Merge pull request #404 from Dstack-TEE/vmm-ui-v1

vmm-ui: Short uptime

Author: kvinwang

vmm/ui/src/composables/useVmManager.ts

@@ -1225,6 +1225,16 @@ type CreateVmPayloadSource = {
     window.open('/v0', '_blank', 'noopener');
   }
 
+  function shortUptime(uptime?: string | null) {
+    if (!uptime) {
+      return '-';
+    }
+    const parts = uptime.split(/\s+/).filter(Boolean);
+    if (parts.length === 0) {
+      return uptime;
+    }
+    return parts.slice(0, Math.min(2, parts.length)).join(' ');
+  }
   function toggleDevMode() {
     devMode.value = !devMode.value;
     localStorage.setItem('devMode', devMode.value ? 'true' : 'false');
@@ -1508,6 +1518,7 @@ type CreateVmPayloadSource = {
     reloadVMs,
     devMode,
     toggleDevMode,
+    shortUptime,
   };
 }
 

vmm/ui/src/templates/app.html

@@ -167,7 +167,7 @@ <h1 class="app-title">dstack-vmm</h1>
             {{ vmStatus(vm) }}
           </span>
         </div>
-        <div class="vm-col-uptime">{{ vm.status !== 'stopped' ? (vm.uptime || '-') : '-' }}</div>
+        <div class="vm-col-uptime">{{ vm.status !== 'stopped' ? shortUptime(vm.uptime) : '-' }}</div>
         <div class="vm-col-view" @click.stop>
           <a class="view-link" @click.prevent="showLogs(vm.id, 'serial')" href="#">Logs</a>
           <a class="view-link" @click.prevent="showLogs(vm.id, 'stderr')" href="#">Stderr</a>