update

nitrojs · Sep 11, 2024 · bc9af7f · bc9af7f
1 parent 185a99d
commit bc9af7f
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 43 deletions.
diff --git a/server/routes/[...path].ts b/server/routes/[...path].ts
@@ -1,11 +1,12 @@
-import { deployments } from "../../deployments";
+import { deployments as _deployments } from "../../deployments";
 
 const { baseURL } = useRuntimeConfig().app;
 
 const getURL = (p) => baseURL + p.replace(/^\//, "");
 
 const routes = ["/api/hello", "/api/env", "/stream"];
 
+export const deployments = [..._deployments];
 if (import.meta.dev) {
   deployments.unshift({
     name: "dev",
@@ -14,14 +15,50 @@ if (import.meta.dev) {
     docs: "",
   });
 }
-
-export default defineRenderHandler((event) => {
+export default defineEventHandler((event) => {
   const url = getRequestURL(event) as URL;
   const currentDeployment =
     deployments.find((d) => d.url.includes(url.host)) ||
     ({} as (typeof deployments)[number]);
 
-  const body = /* html */ `<!doctype html>
+  const stats = /* html */ `
+      <table id="perf" class="table-auto" style="color: white" ></table>
+      <script>
+      const perfNavTiming = window.performance.getEntriesByType('navigation')[0];
+      const renderPerfStats = () => {
+        const measure = (end, start) => {
+          const diff = end - start;
+          return diff >= 0 ? Math.round(diff * 1000) / 1000 + " ms" : "-";
+        }
+        console.log(perfNavTiming.duration);
+        const measures = {
+          Protocol: perfNavTiming.nextHopProtocol,
+          Transfer: perfNavTiming.transferSize + " bytes",
+          Request: measure(perfNavTiming.responseEnd, perfNavTiming.requestStart),
+          Duration: measure(perfNavTiming.duration, 0),
+        };
+        document.querySelector("#perf").innerHTML = Object.entries(measures)
+          .map(
+            ([name, value]) =>
+              "<tr><td>" + name + ": " + "</td><td>" + value + "</td></tr>",
+          )
+          .join("");
+      };
+      renderPerfStats();
+      const int = setInterval(() => {
+        if (perfNavTiming.loadEventEnd) {
+          clearInterval(int);
+          renderPerfStats();
+        }
+      });
+    </script>
+  `;
+
+  if (url.searchParams.has("stats")) {
+    return stats;
+  }
+
+  return /* html */ `<!doctype html>
   <html lang="en">
 
   <head>
@@ -36,14 +73,18 @@ export default defineRenderHandler((event) => {
     <div class="flex justify-center items-center h-screen">
       <div class="border border-gray-200 text-white p-8 rounded-lg max-w-lg">
         <!-- Title -->
-        <h1 class="text-3xl font-bold mb-4">
-          <img src="${getURL("/nitro.svg")}" class="w-8 h-8 inline-block" />
-          <a href="${getURL("/")}">Nitro Test Deployment</a>
+        <h1 class="flex items-center mb-4">
+          <img src="${getURL("/nitro.svg")}" class="w-8 h-8 mr-4" />
+          <div>
+            <a class="text-3xl font-bold" href="${currentDeployment.url}">Nitro Test Deployment</a>
+            <br>
+            <a class="text-xl underline" href="${currentDeployment.docs}">${currentDeployment.name}</a>
+          </div>
         </h1>
 
         <!-- Perf -->
         <div class="mb-3 pt-3">
-          <table class="table-auto" id="perf"></table>
+          ${stats}
         </div>
 
         <!-- Routes -->
@@ -64,12 +105,12 @@ export default defineRenderHandler((event) => {
         <div class="mt-3 pt-3">
           <!-- Deployment -->
           <div>
-            <select onchange="window.location.href=this.value" value="${currentDeployment.url}" id="countries"
+            <select onchange="window.location.href=this.value" id="countries"
               class="mt-4 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
               ${deployments
                 .map((d) =>
                   d.url
-                    ? /* html */ ` <option value="${d.url}">${d.name}</option>`
+                    ? /* html */ ` <option value="${d.url}" ${d.url === currentDeployment.url ? "selected" : ""}>${d.name}</option>`
                     : /* html */ `<option disabled>${d.name}</option>`,
                 )
                 .join("\n")}
@@ -89,41 +130,9 @@ export default defineRenderHandler((event) => {
         </div>
       </div>
     </div>
-    <script>
-      const perfNavTiming = window.performance.getEntriesByType('navigation')[0];
-      const renderPerfStats = () => {
-        const measure = (end, start) => {
-          const diff = end - start;
-          return diff >= 0 ? Math.round(diff * 1000) / 1000 + " ms" : "-";
-        }
-        console.log(perfNavTiming.duration);
-        const measures = {
-          Protocol: perfNavTiming.nextHopProtocol,
-          Transfer: perfNavTiming.transferSize + " bytes",
-          Request: measure(perfNavTiming.responseEnd, perfNavTiming.requestStart),
-          Duration: measure(perfNavTiming.duration, 0),
-        };
-        document.querySelector("#perf").innerHTML = Object.entries(measures)
-          .map(
-            ([name, value]) =>
-              "<tr><td>" + name + ": " + "</td><td>" + value + "</td></tr>",
-          )
-          .join("");
-      };
-      renderPerfStats();
-      const int = setInterval(() => {
-        if (perfNavTiming.loadEventEnd) {
-          clearInterval(int);
-          renderPerfStats();
-        }
-      });
-    </script>
+
   </body>
 
   </html>
   `;
-
-  return {
-    body,
-  };
 });
diff --git a/server/routes/all.ts b/server/routes/all.ts
@@ -0,0 +1,37 @@
+import { deployments } from "./[...path]";
+
+const { baseURL } = useRuntimeConfig().app;
+
+const getURL = (p) => baseURL + p.replace(/^\//, "");
+
+export default defineEventHandler(() => {
+  return /* html */ `<!doctype html>
+  <html lang="en">
+
+  <head>
+    <meta charset="utf-8" />
+    <title>Nitro Test Deployments</title>
+    <link rel="icon" href="/nitro.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="${getURL("/_dist/tailwind@3.4.5.js")}"></script>
+  </head>
+  <body class="bg-neutral-900">
+    <div class="grid grid-cols-3 h-screen">
+    ${deployments
+      .filter((deployment) => deployment.url)
+      .map(
+        (deployment) => /* html */ `
+      <div class="border-t border-gray-200 text-white relative">
+        <a class="absolute top-2 right-5 p-1 text-xs bg-purple-500 shadow-lg rounded-lg" href="${deployment.url}">${deployment.name}</a>
+        <iframe src="${deployment.url}?stats" class="w-full h-full"></iframe>
+      </div>
+    `,
+      )
+      .join("")}
+  </div>
+
+
+  </body>
+  </html>
+  `;
+});