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

vmm: Use new version of UI as default

Author: kvinwang

vmm/src/console.html vmm/src/console_v0.htmlvmm/src/console.html renamed to vmm/src/console_v0.html

@@ -99,7 +99,7 @@ async fn run_external_api(app: App, figment: Figment, api_auth: ApiToken) -> Res
             })
         }));
     let external_api =
-        ra_rpc::rocket_helper::mount_openapi_docs(external_api, openapi_doc, "/rpc-docs");
+        ra_rpc::rocket_helper::mount_openapi_docs(external_api, openapi_doc, "/api-docs");
 
     let _ = external_api
         .launch()

vmm/src/console_beta.html vmm/src/console_v1.htmlvmm/src/console_beta.html renamed to vmm/src/console_v1.html

@@ -36,18 +36,29 @@ fn replace_title(app: &App, html: &str) -> String {
     html.replace("{{TITLE}}", &title)
 }
 
-#[get("/")]
-async fn index(app: &State<App>) -> (ContentType, String) {
-    let html = file_or_include_str!("console.html");
+fn render_console(html: String, app: &State<App>) -> (ContentType, String) {
     let html = replace_title(app, &html);
     (ContentType::HTML, html)
 }
 
+#[get("/")]
+async fn index(app: &State<App>) -> (ContentType, String) {
+    render_console(file_or_include_str!("console_v1.html"), app)
+}
+
+#[get("/v1")]
+async fn v1(app: &State<App>) -> (ContentType, String) {
+    index(app).await
+}
+
 #[get("/beta")]
 async fn beta(app: &State<App>) -> (ContentType, String) {
-    let html = file_or_include_str!("console_beta.html");
-    let html = replace_title(app, &html);
-    (ContentType::HTML, html)
+    index(app).await
+}
+
+#[get("/v0")]
+async fn v0(app: &State<App>) -> (ContentType, String) {
+    render_console(file_or_include_str!("console_v0.html"), app)
 }
 
 #[get("/res/<path>")]
@@ -171,5 +182,5 @@ fn vm_logs(
 }
 
 pub fn routes() -> Vec<Route> {
-    routes![index, beta, res, vm_logs]
+    routes![index, v1, beta, v0, res, vm_logs]
 }

vmm/src/main.rs

@@ -8,19 +8,19 @@ This directory contains the source for the Vue-based VM management console.
 # Install dev dependencies (installs protobufjs CLI)
 npm install
 
-# Build the beta console once
+# Build the console once
 npm run build
 
-# Build continuously (writes beta console on changes)
+# Build continuously (writes console_v1 on changes)
 npm run watch
 ```
 
-The build step generates a single-file HTML artifact at `../src/console_beta.html`
-which is served by `dstack-vmm` under the `/beta` path. The existing
-`console.html` remains untouched so both versions can coexist.
+The build step generates a single-file HTML artifact at `../src/console_v1.html`
+which is served by `dstack-vmm` under `/` and `/v1`. The previous
+`console_v0.html` remains untouched so the legacy UI stays available under `/v0`.
 
 The UI codebase is written in TypeScript. The build pipeline performs three steps:
 
 1. `scripts/build_proto.sh` (borrowed from `phala-blockchain`) uses `pbjs/pbts` to regenerate static JS bindings for `vmm_rpc.proto`.
 2. `tsc` transpiles `src/**/*.ts` into `build/ts/`.
-3. `build.mjs` bundles the transpiled output together with the runtime assets into a single HTML page `console_beta.html`.
+3. `build.mjs` bundles the transpiled output together with the runtime assets into a single HTML page `console_v1.html`.

vmm/src/main_routes.rs

@@ -204,7 +204,7 @@ async function build({ watch = false } = {}) {
   const distFile = path.join(DIST_DIR, 'index.html');
   await fs.writeFile(distFile, html);
 
-  const targetFile = path.resolve(ROOT, '../src/console_beta.html');
+  const targetFile = path.resolve(ROOT, '../src/console_v1.html');
   await fs.writeFile(targetFile, html);
 
   if (watch) {

vmm/ui/README.md

@@ -1219,6 +1219,16 @@ type CreateVmPayloadSource = {
     systemMenu.value.show = false;
   }
 
+  function openApiDocs() {
+    closeSystemMenu();
+    window.open('/api-docs/docs', '_blank', 'noopener');
+  }
+
+  function openLegacyUi() {
+    closeSystemMenu();
+    window.open('/v0', '_blank', 'noopener');
+  }
+
   async function reloadVMs() {
     try {
       errorMessage.value = '';
@@ -1307,7 +1317,7 @@ type CreateVmPayloadSource = {
   }
 
   function showLogs(id: string, channel: string) {
-    window.open(`/logs?id=${encodeURIComponent(id)}&follow=false&ansi=false&lines=200&ch=${channel}`, '_blank');
+    window.open(`/logs?id=${encodeURIComponent(id)}&follow=true&ansi=false&lines=200&ch=${channel}`, '_blank');
   }
 
   function showDashboard(vm: VmListItem) {
@@ -1459,6 +1469,8 @@ type CreateVmPayloadSource = {
     systemMenu,
     toggleSystemMenu,
     closeSystemMenu,
+    openApiDocs,
+    openLegacyUi,
     reloadVMs,
   };
 }

vmm/ui/build.mjs

@@ -11,6 +11,12 @@ <h1 class="app-title">dstack-vmm</h1>
         <span class="version-badge">v{{ version.version }}</span>
       </div>
       <div class="header-right">
+        <button class="btn-primary" @click="showDeployDialog()">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path d="M8 3V13M3 8H13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+          Deploy Instance
+        </button>
         <div class="system-menu">
           <button class="btn-icon system-menu-btn" @click="toggleSystemMenu($event)" title="System Menu">
             <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
@@ -24,14 +30,22 @@ <h1 class="app-title">dstack-vmm</h1>
               </svg>
               Reload VMs
             </button>
+            <button class="dropdown-item" @click="openApiDocs()">
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                <path d="M3 3h8v8H3z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/>
+                <path d="M5 5h4M5 7h4M5 9h2" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+              </svg>
+              API Docs
+            </button>
+            <button class="dropdown-item" @click="openLegacyUi()">
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                <path d="M3 3h8v8H3z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/>
+                <path d="M4.5 6.5l1.5 1.5 3.5-3.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              Legacy UI
+            </button>
           </div>
         </div>
-        <button class="btn-primary" @click="showDeployDialog()">
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-            <path d="M8 3V13M3 8H13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-          </svg>
-          Deploy Instance
-        </button>
       </div>
     </div>
   </header>
@@ -264,6 +278,10 @@ <h1 class="app-title">dstack-vmm</h1>
             <span class="detail-label">Disk Type</span>
             <span class="detail-value">{{ vm.configuration?.disk_type || 'virtio-pci' }}</span>
           </div>
+          <div class="detail-item">
+            <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">
             <span class="detail-label">GPUs</span>
             <div>