Merge pull request #37 from cloudflare/rozenmd/more-logs

Refactor activity log to show a separate log item per query in a request

frontend/.gitignore

@@ -5,3 +5,4 @@ node_modules
 /functions/\[\[path\]\].js.map
 /public/build
 .dev.vars
+/functions/metafile*

frontend/app/components/StatsContext.tsx

@@ -1,4 +1,5 @@
 import { createContext, useContext } from "react";
+import type { SQLRequestEvent } from "../../../worker/lib/tools";
 
 export const StatsContext = createContext<typeof initialStats | null>(null);
 
@@ -16,13 +17,7 @@ export const initialStats = {
   update: 0,
   delete: 0,
   insert: 0,
-  log: [] as {
-    type: string;
-    query: string;
-    ts: string;
-    served_by: string;
-    duration: string;
-  }[],
+  log: [] as SQLRequestEvent[],
 };
 
 export function useStats() {

frontend/app/root.tsx

@@ -45,7 +45,7 @@ const statsReducer = (state: any, action: any) => {
   if (action.update) state.update += action.update;
   if (action.delete) state.delete += action.delete;
   if (action.insert) state.insert += action.insert;
-  if (action.log) state.log.push(...action.log);
+  if (action.log) state.log.push({ ...action.log });
   return state;
 };
 
@@ -74,10 +74,7 @@ export default function App() {
           property="og:description"
           content="This is a demo of the Northwind dataset, running on Cloudflare Workers, and D1 - Cloudflare's newest SQL database, running on SQLite."
         />
-        <meta
-          property="og:url"
-          content="https://northwind.d1sql.com/"
-        />
+        <meta property="og:url" content="https://northwind.d1sql.com/" />
         <meta
           property="og:image"
           content="https://imagedelivery.net/4wj01aQOZZ0hemsvbxWAvA/763bcbcd-da6d-46ec-f5e1-70c1c1a33d00/public"
@@ -99,10 +96,7 @@ export default function App() {
           name="twitter:description"
           content="This is a demo of the Northwind dataset, running on Cloudflare Workers, and D1 - Cloudflare's newest SQL database, running on SQLite."
         />
-        <meta
-          name="twitter:url"
-          content="https://northwind.d1sql.com"
-        />
+        <meta name="twitter:url" content="https://northwind.d1sql.com" />
         <meta
           name="twitter:image"
           content="https://imagedelivery.net/4wj01aQOZZ0hemsvbxWAvA/763bcbcd-da6d-46ec-f5e1-70c1c1a33d00/public"

frontend/app/routes/customers.tsx

@@ -92,11 +92,9 @@ const Customers = () => {
                         <div className="image">
                           <img
                             alt="Customer avatar"
-                            src={`https://avatars.dicebear.com/v2/initials/${
+                            src={`https://api.dicebear.com/9.x/initials/svg?seed=${
                               customer.ContactName.split(" ")[0]
-                            }-${
-                              customer.ContactName.split(" ").slice(-1)[0]
-                            }.svg`}
+                            }-${customer.ContactName.split(" ").slice(-1)[0]}`}
                             className="rounded-full"
                           />
                         </div>

frontend/app/routes/dash.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { useStats } from "~/components/StatsContext";
+import { SQLRequestEvent } from "worker/lib/tools";
 
 interface Status {
   cf:
@@ -71,25 +72,53 @@ export default function Dash() {
         <p className="text-gray-800 text-xs">
           Explore the app and see metrics here
         </p>
-        {stats?.log?.map((log, index: number) => {
-          console.log(log);
-          if (log.type == "sql") {
-            return (
-              <div className="pt-2" key={index}>
-                <p className="text-gray-400 text-xs">
-                  {log.ts}, {log.served_by}, {log.duration}ms
-                </p>
-                {log.query.split("\n").map((l: string, index: number) => {
-                  return (
-                    <p key={index} className="text-sm font-mono break-all">
-                      {l}
-                    </p>
-                  );
-                })}
-              </div>
-            );
-          } else return null;
-        })}
+        <div className="mt-4">
+          {stats?.log?.map((log: SQLRequestEvent, index: number) => {
+            if (log.type === "sql") {
+              return (
+                <div
+                  className="pt-2 border-l-2 border-gray-200 pl-4 mb-4"
+                  key={index}
+                >
+                  <p className="text-gray-500 text-xs font-semibold">
+                    Request at {log.timestamp}
+                    <span className="ml-2 text-blue-600">
+                      Request duration: {log.overallTimeMs}ms
+                    </span>
+                  </p>
+                  <ul className="mt-2 space-y-2">
+                    {log.queries.map((query, queryIndex) => (
+                      <li
+                        key={queryIndex}
+                        className="bg-gray-50 rounded-md p-3"
+                      >
+                        <p className="text-gray-500 text-xs mb-1">
+                          Served by: {query.served_by}
+                          <span className="ml-2 text-blue-600">
+                            Query duration: {query.duration}ms
+                          </span>
+                        </p>
+                        <div className="bg-white rounded border border-gray-200 p-2">
+                          {query.query
+                            .split("\n")
+                            .map((line: string, lineIndex: number) => (
+                              <p
+                                key={lineIndex}
+                                className="text-sm font-mono break-all text-gray-700"
+                              >
+                                {line}
+                              </p>
+                            ))}
+                        </div>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              );
+            }
+            return null;
+          })}
+        </div>
       </div>
     </>
   );

frontend/app/routes/employees.tsx

@@ -83,7 +83,7 @@ const Employees = () => {
                         <div className="image">
                           <img
                             alt="employee avatar"
-                            src={`https://avatars.dicebear.com/v2/initials/${employee.FirstName[0]}-${employee.LastName[0]}.svg`}
+                            src={`https://api.dicebear.com/9.x/initials/svg?seed=${employee.FirstName[0]}-${employee.LastName[0]}`}
                             className="rounded-full"
                           />
                         </div>

frontend/app/routes/suppliers.tsx

@@ -82,11 +82,9 @@ const Suppliers = () => {
                         <div className="image">
                           <img
                             alt="supplier"
-                            src={`https://avatars.dicebear.com/v2/initials/${
+                            src={`https://api.dicebear.com/9.x/initials/svg?seed=${
                               supplier.ContactName.split(" ")[0]
-                            }-${
-                              supplier.ContactName.split(" ").slice(-1)[0]
-                            }.svg`}
+                            }-${supplier.ContactName.split(" ").slice(-1)[0]}`}
                             className="rounded-full"
                           />
                         </div>

worker/lib/api/customers.ts

@@ -18,13 +18,12 @@ const apiCustomers = () => {
         [[itemsPerPage, (page - 1) * itemsPerPage]]
       );
       try {
-        console.log(stmts);
+        const startTime = Date.now();
         const response: D1Result<any>[] = await env.DB.batch(
           stmts as D1PreparedStatement[]
         );
-        console.log(response);
-        console.log("response[0]:", response[0]);
-        console.log("response[1]:", response[1]);
+        const overallTimeMs = Date.now() - startTime;
+
         const first = response[0];
         const total =
           count && first.results ? (first.results[0] as any).total : 0;
@@ -40,7 +39,7 @@ const apiCustomers = () => {
             queries: stmts.length,
             results: customers.length + (count ? 1 : 0),
             select: stmts.length,
-            log: createSQLLog(sql, response),
+            log: createSQLLog(sql, response, overallTimeMs),
           },
           customers: customers,
         };
@@ -67,13 +66,17 @@ const apiCustomer = () => {
         [[id]]
       );
       try {
+        const startTime = Date.now();
         const customer: any = await (stmts[0] as D1PreparedStatement).all();
+        const overallTimeMs = Date.now() - startTime;
+
         return {
           stats: {
             queries: 1,
             results: 1,
             select: 1,
-            log: createSQLLog(sql, [customer]),
+            overallTimeMs: overallTimeMs,
+            log: createSQLLog(sql, [customer], overallTimeMs),
           },
           customer: customer.results[0],
         };

worker/lib/api/employees.ts

@@ -18,9 +18,12 @@ const apiEmployees = () => {
         [[itemsPerPage, (page - 1) * itemsPerPage]]
       );
       try {
+        const startTime = Date.now();
         const response: D1Result<any>[] = await env.DB.batch(
           stmts as D1PreparedStatement[]
         );
+        const overallTimeMs = Date.now() - startTime;
+
         const first = response[0];
         const total =
           count && first.results ? (first.results[0] as any).total : 0;
@@ -36,7 +39,8 @@ const apiEmployees = () => {
             queries: stmts.length,
             results: employees.length + (count ? 1 : 0),
             select: stmts.length,
-            log: createSQLLog(sql, response),
+            overallTimeMs: overallTimeMs,
+            log: createSQLLog(sql, response, overallTimeMs),
           },
           employees: employees,
         };
@@ -63,13 +67,17 @@ const apiEmployee = () => {
         [[id]]
       );
       try {
+        const startTime = Date.now();
         const employee: any = await (stmts[0] as D1PreparedStatement).all();
+        const overallTimeMs = Date.now() - startTime;
+
         return {
           stats: {
             queries: 1,
             results: 1,
             select_leftjoin: 1,
-            log: createSQLLog(sql, [employee]),
+            overallTimeMs: overallTimeMs,
+            log: createSQLLog(sql, [employee], overallTimeMs),
           },
           employee: employee.results[0],
         };

worker/lib/api/orders.ts

@@ -18,9 +18,12 @@ const apiOrders = () => {
         [[itemsPerPage, (page - 1) * itemsPerPage]]
       );
       try {
+        const startTime = Date.now();
         const response: D1Result<any>[] = await env.DB.batch(
           stmts as D1PreparedStatement[]
         );
+        const overallTimeMs = Date.now() - startTime;
+
         const first = response[0];
         const total =
           count && first.results ? (first.results[0] as any).total : 0;
@@ -36,7 +39,8 @@ const apiOrders = () => {
             queries: stmts.length,
             results: orders.length + (count ? 1 : 0),
             select: stmts.length,
-            log: createSQLLog(sql, response),
+            overallTimeMs: overallTimeMs,
+            log: createSQLLog(sql, response, overallTimeMs),
           },
           orders: orders,
         };
@@ -65,7 +69,10 @@ const apiOrder = () => {
       );
 
       try {
+        const startTime = Date.now();
         const response = await env.DB.batch(stmts as D1PreparedStatement[]);
+        const overallTimeMs = Date.now() - startTime;
+
         const orders: any = response[0].results;
         const products: any = response[1].results;
         return {
@@ -74,7 +81,8 @@ const apiOrder = () => {
             results: products.length + 1,
             select: stmts.length,
             select_where: stmts.length,
-            log: createSQLLog(sql, response),
+            overallTimeMs: overallTimeMs,
+            log: createSQLLog(sql, response, overallTimeMs),
           },
           order: orders ? orders[0] : {},
           products: products,

worker/lib/api/products.ts

@@ -18,9 +18,12 @@ const apiProducts = () => {
         [[itemsPerPage, (page - 1) * itemsPerPage]]
       );
       try {
+        const startTime = Date.now();
         const response: D1Result<any>[] = await env.DB.batch(
           stmts as D1PreparedStatement[]
         );
+        const overallTimeMs = Date.now() - startTime;
+
         const first = response[0];
         const total =
           count && first.results ? (first.results[0] as any).total : 0;
@@ -36,7 +39,8 @@ const apiProducts = () => {
             queries: stmts.length,
             results: products.length + (count ? 1 : 0),
             select: stmts.length,
-            log: createSQLLog(sql, response),
+            overallTimeMs: overallTimeMs,
+            log: createSQLLog(sql, response, overallTimeMs),
           },
           products: products,
         };
@@ -63,15 +67,19 @@ const apiProduct = () => {
           ],
           [[id]]
         );
+        const startTime = Date.now();
         const product: D1Result<any> = await (
           stmts[0] as D1PreparedStatement
         ).all();
+        const overallTimeMs = Date.now() - startTime;
+
         return {
           stats: {
             queries: 1,
             results: 1,
             select: 1,
-            log: createSQLLog(sql, [product]),
+            overallTimeMs: overallTimeMs,
+            log: createSQLLog(sql, [product], overallTimeMs),
           },
           product: product.results ? product.results[0] : {},
         };

worker/lib/api/search.ts

@@ -21,15 +21,19 @@ const apiSearch = () => {
       );
 
       try {
+        const startTime = Date.now();
         const search = await (stmts[0] as D1PreparedStatement).all();
+        const overallTimeMs = Date.now() - startTime;
+
         return {
           items: itemsPerPage,
           stats: {
             queries: 1,
             results: search.results ? search.results.length : 0,
             select_fts: 0,
             select_where: 1,
-            log: createSQLLog(sql, [search]),
+            overallTimeMs: overallTimeMs,
+            log: createSQLLog(sql, [search], overallTimeMs),
           },
           results: search.results,
         };