feat: performance tracker

routes/_app.tsx

@@ -36,6 +36,7 @@ export default function App({ Component }: AppProps) {
           :root {
             --background: rgb(43, 41, 48);
             --foreground: rgb(129, 129, 129);
+            --light: #2B2930;
           }
           .custom-grid {
             grid-template-columns: repeat(auto-fit, minmax(37vw, 1fr)) ;

routes/_middleware.ts

@@ -2,17 +2,17 @@
 import { MiddlewareHandlerContext } from "$fresh/server.ts";
 import { DomainError } from "@lib/errors.ts";
 import { getCookies } from "https://deno.land/std@0.197.0/http/cookie.ts";
-import { decode, verify } from "https://deno.land/x/djwt@v2.2/mod.ts";
-import { sessionDB, userDB } from "@lib/db.ts";
+import { verify } from "https://deno.land/x/djwt@v2.2/mod.ts";
+import * as cache from "@lib/cache/performance.ts";
 import { JWT_SECRET } from "@lib/env.ts";
 
 export async function handler(
-  _req: Request,
+  req: Request,
   ctx: MiddlewareHandlerContext,
 ) {
   try {
-    ctx.state.flag = true;
-    const allCookies = getCookies(_req.headers);
+    performance.mark("a");
+    const allCookies = getCookies(req.headers);
     const sessionCookie = allCookies["session_cookie"];
     if (!ctx.state.session && sessionCookie && JWT_SECRET) {
       try {
@@ -22,9 +22,15 @@ export async function handler(
         }
       } catch (_err) {
         //
+        console.log({ _err });
       }
     }
-    return await ctx.next();
+
+    const resp = await ctx.next();
+    performance.mark("b");
+    const b = performance.measure("a->b", "a", "b");
+    cache.savePerformance(req.url, b.duration);
+    return resp;
   } catch (error) {
     console.error("Error", error);
 

routes/admin/performance/api.ts

@@ -0,0 +1,9 @@
+import { Handlers } from "$fresh/server.ts";
+import { getPerformances } from "@lib/cache/performance.ts";
+import { json } from "@lib/helpers.ts";
+
+export const handler: Handlers = {
+  async GET() {
+    return json(await getPerformances());
+  },
+};

routes/admin/performance/index.tsx

@@ -0,0 +1,93 @@
+import { MainLayout } from "@components/layouts/main.tsx";
+import { Handlers, PageProps } from "$fresh/server.ts";
+import {
+  getPerformances,
+  PerformancePoint,
+  PerformanceRes,
+} from "@lib/cache/performance.ts";
+import { AccessDeniedError } from "@lib/errors.ts";
+
+export const handler: Handlers = {
+  async GET(_, ctx) {
+    const performances = await getPerformances();
+    if (!("session" in ctx.state)) {
+      throw new AccessDeniedError();
+    }
+
+    return ctx.render({ performances });
+  },
+};
+
+function PerformanceLine(
+  { maximum, data: [amount, min, average, max], url }: {
+    maximum: number;
+    url: string;
+    data: readonly [number, number, number, number];
+  },
+) {
+  return (
+    <div
+      class="mt-10 flex flex-col gap-2 bg-gray-900 px-4 py-2 rounded-2xl"
+      style={{ background: "var(--light)" }}
+    >
+      <div style={{ color: "var(--foreground)" }}>
+        {url}
+      </div>
+      <div class="flex gap-2">
+        <span class="bg-gray-600 p-1 text-xs rounded-xl text-white">
+          {Math.floor(average / 1000)}ms
+        </span>
+        <span class="bg-gray-600 p-1 text-xs rounded-xl text-white">
+          {amount}x
+        </span>
+      </div>
+      <div class="" style={{ maxWidth: "75vw" }}>
+        <div
+          class="h-2 bg-red-200 rounded"
+          style={{
+            width: `${Math.floor((max / maximum) * 100)}%`,
+            borderRadius: "1rem 1rem 1rem 0px",
+            minWidth: "5px",
+          }}
+        />
+        <div
+          class="h-2  bg-green-200 rounded"
+          style={{
+            width: `${Math.floor((average / maximum) * 100)}%`,
+            borderStartEndRadius: "0px",
+            borderRadius: "0px 0px 1rem 0px",
+            minWidth: "5px",
+          }}
+        />
+        <div
+          class="h-2  bg-yellow-200 rounded"
+          style={{
+            width: `${Math.floor((min / maximum) * 100)}%`,
+            borderRadius: "0px 0px 1rem 1rem",
+            minWidth: "5px",
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default function Greet(
+  { data: { performances }, url }: PageProps<{ performances: PerformanceRes }>,
+) {
+  return (
+    <MainLayout url={url}>
+      <h1 class="text-white text-4xl ">Performance</h1>
+
+      {performances.res.map((r) => {
+        return (
+          <PerformanceLine
+            maximum={performances.max}
+            url={r.url}
+            data={r.data}
+          />
+        );
+      })}
+    </MainLayout>
+  );
+}