vmm-ui: Allow update gpus for non-kms instances

Author: kvinwang

vmm/src/console_v1.html

@@ -73,20 +73,6 @@ const UpdateVmDialogComponent = {
             </select>
           </div>
 
-          <div class="form-group" v-if="availableGpus.length > 0">
-            <div class="checkbox-grid">
-              <label><input type="checkbox" v-model="dialog.updateGpuConfig"> Update GPU configuration</label>
-            </div>
-            <div v-if="dialog.updateGpuConfig">
-              <gpu-config-editor
-                :available-gpus="availableGpus"
-                :allow-attach-all="allowAttachAllGpus"
-                v-model:gpus="dialog.selectedGpus"
-                v-model:attach-all="dialog.attachAllGpus"
-              />
-            </div>
-          </div>
-
           <div class="checkbox-grid">
             <label><input type="checkbox" v-model="dialog.updateCompose"> Update App Compose</label>
           </div>
@@ -122,6 +108,20 @@ const UpdateVmDialogComponent = {
           </div>
         </div>
 
+        <div class="form-group" v-if="availableGpus.length > 0">
+          <div class="checkbox-grid">
+            <label><input type="checkbox" v-model="dialog.updateGpuConfig"> Update GPU configuration</label>
+          </div>
+          <div v-if="dialog.updateGpuConfig">
+            <gpu-config-editor
+              :available-gpus="availableGpus"
+              :allow-attach-all="allowAttachAllGpus"
+              v-model:gpus="dialog.selectedGpus"
+              v-model:attach-all="dialog.attachAllGpus"
+            />
+          </div>
+        </div>
+
         <div class="form-group full-width" v-if="portMappingEnabled">
           <port-mapping-editor :ports="dialog.ports" />
         </div>

vmm/ui/src/components/UpdateVmDialog.ts

@@ -324,13 +324,14 @@ h1, h2, h3, h4, h5, h6 {
 
 .vm-table {
   max-width: 900px;
+  width: 900px;
   margin: 0 auto 24px;
   padding: 0 24px;
 }
 
 .vm-table-header {
   display: grid;
-  grid-template-columns: 24px 1fr 140px 120px 280px 60px;
+  grid-template-columns: 24px 2fr 100px 120px 180px 60px;
   gap: 16px;
   padding: 12px 16px;
   background: var(--color-bg-primary);
@@ -354,7 +355,7 @@ h1, h2, h3, h4, h5, h6 {
 
 .vm-row-main {
   display: grid;
-  grid-template-columns: 24px 1fr 140px 120px 280px 60px;
+  grid-template-columns: 24px 2fr 100px 120px 180px 60px;
   gap: 16px;
   padding: 16px;
   align-items: center;
@@ -554,6 +555,29 @@ h1, h2, h3, h4, h5, h6 {
   cursor: help;
 }
 
+.gpu-chip-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.gpu-chip {
+  font-size: 12px;
+  line-height: 1.4;
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-primary);
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+}
+
+.gpu-chip--all {
+  font-weight: 600;
+  color: var(--color-text-primary);
+  border-style: dashed;
+}
+
 .port-mappings {
   display: flex;
   flex-direction: column;

vmm/ui/src/styles/main.css

@@ -294,12 +294,25 @@ <h1 class="app-title">dstack-vmm</h1>
             <span class="detail-label">TEE</span>
             <span class="detail-value">{{ vm.configuration?.no_tee ? 'Disabled' : 'Enabled' }}</span>
           </div>
-          <div class="detail-item" v-if="vm.configuration?.gpus && vm.configuration.gpus.length > 0">
+          <div class="detail-item detail-item--gpus" v-if="vm.configuration?.gpus">
             <span class="detail-label">GPUs</span>
-            <div>
-              <div v-for="gpu in vm.configuration.gpus" :key="gpu.slot" class="detail-value">
-                {{ gpu.slot || gpu.product_id }}
-              </div>
+            <div v-if="vm.configuration.gpus.attach_mode === 'all'" class="gpu-chip-list">
+              <span class="gpu-chip gpu-chip--all" title="All available GPUs and NVSwitches are attached">
+                All GPUs
+              </span>
+            </div>
+            <div v-else-if="vm.configuration.gpus?.gpus?.length" class="gpu-chip-list">
+              <span
+                class="gpu-chip"
+                v-for="(gpu, index) in vm.configuration.gpus.gpus"
+                :key="gpu.slot || gpu.product_id || index"
+                :title="gpu.description || gpu.slot || gpu.product_id || ('GPU #' + (index + 1))"
+              >
+                {{ gpu.slot || gpu.product_id || ('GPU #' + (index + 1)) }}
+              </span>
+            </div>
+            <div v-else class="detail-value">
+              None
             </div>
           </div>
         </div>