vmm-ui: Use new UI as default

Author: kvinwang

vmm/src/console.html vmm/src/console_v0.htmlvmm/src/console.html renamed to vmm/src/console_v0.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/console_beta.html vmm/src/console_v1.htmlvmm/src/console_beta.html renamed to vmm/src/console_v1.html

@@ -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

@@ -1224,6 +1224,11 @@ type CreateVmPayloadSource = {
     window.open('/api-docs/docs', '_blank', 'noopener');
   }
 
+  function openLegacyUi() {
+    closeSystemMenu();
+    window.open('/v0', '_blank', 'noopener');
+  }
+
   async function reloadVMs() {
     try {
       errorMessage.value = '';
@@ -1465,6 +1470,7 @@ type CreateVmPayloadSource = {
     toggleSystemMenu,
     closeSystemMenu,
     openApiDocs,
+    openLegacyUi,
     reloadVMs,
   };
 }

vmm/ui/build.mjs

@@ -37,6 +37,13 @@ <h1 class="app-title">dstack-vmm</h1>
               </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>
       </div>