dashboard: cleanup new log page design (#41688)

GitOrigin-RevId: 9f9222a597e1d1df97729f17b77a8922d696ad2f

Author: atrakh

npm-packages/@convex-dev/design-system/src/Callout.tsx

@@ -5,7 +5,7 @@ type CalloutVariant = "instructions" | "error" | "hint" | "localDev" | "upsell";
 const classes: Record<CalloutVariant, string> = {
   error: "bg-background-error text-content-error",
   instructions: "bg-background-warning text-content-warning",
-  hint: "bg-util-accent/10",
+  hint: "bg-util-accent/10 dark:bg-util-accent/30",
   upsell: "bg-util-accent/10 dark:bg-util-accent/30",
   localDev:
     "bg-teal-100 border border-teal-500 dark:bg-teal-900 text-content-primary",

npm-packages/dashboard-common/src/features/functions/components/FunctionLogs.tsx

@@ -6,7 +6,7 @@ import { SearchLogsInput } from "@common/features/logs/components/SearchLogsInpu
 import { filterLogs } from "@common/features/logs/lib/filterLogs";
 import { displayNameToIdentifier } from "@common/lib/functions/FunctionsProvider";
 import { functionIdentifierValue } from "@common/lib/functions/generateFileTree";
-import { UdfLog, useLogs } from "@common/lib/useLogs";
+import { MAX_LOGS, UdfLog, useLogs } from "@common/lib/useLogs";
 import { ModuleFunction } from "@common/lib/functions/types";
 import { Nent } from "@common/lib/useNents";
 import { Button } from "@ui/Button";
@@ -107,7 +107,7 @@ export function FunctionLogs({
         return prev;
       }
       return [...prev, ...newLogs].slice(
-        Math.max(prev.length + entries.length - 10000, 0),
+        Math.max(prev.length + entries.length - MAX_LOGS, 0),
         prev.length + entries.length,
       );
     });

npm-packages/dashboard-common/src/features/logs/components/DeploymentEventListItem.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState, useRef, useEffect } from "react";
+import { useContext, useState } from "react";
 import classNames from "classnames";
 import { GearIcon } from "@radix-ui/react-icons";
 import {
@@ -10,6 +10,7 @@ import { formatDateTime } from "@common/lib/format";
 import { DeploymentAuditLogEvent } from "@common/lib/useDeploymentAuditLog";
 import { DetailPanel } from "@common/elements/DetailPanel";
 import { DeploymentInfoContext } from "@common/lib/deploymentContext";
+import { useScrollIntoViewAndFocus } from "@common/features/logs/hooks/useScrollIntoViewAndFocus";
 
 export function DeploymentEventListItem({
   event,
@@ -31,32 +32,10 @@ export function DeploymentEventListItem({
   const { TeamMemberLink } = useContext(DeploymentInfoContext);
   const [showDetails, setShowDetails] = useState(false);
   const timestamp = formatDateTime(new Date(event._creationTime));
-  const ref = useRef<HTMLDivElement>(null);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const prevFocusedRef = useRef(focused);
-
-  // Focus the button when focused prop changes to true
-  useEffect(() => {
-    if (newLogsPageSidepanel && focused) {
-      buttonRef.current?.focus();
-    }
-  }, [focused, newLogsPageSidepanel]);
-
-  // Scroll into view when transitioning to focused (only in side panel mode)
-  useEffect(() => {
-    if (
-      focused &&
-      !prevFocusedRef.current &&
-      ref.current &&
-      newLogsPageSidepanel
-    ) {
-      ref.current.scrollIntoView({
-        block: "center",
-        inline: "nearest",
-      });
-    }
-    prevFocusedRef.current = focused;
-  }, [focused, ref, newLogsPageSidepanel]);
+  const { elementRef: ref, buttonRef } = useScrollIntoViewAndFocus({
+    focused,
+    enabled: !!newLogsPageSidepanel,
+  });
 
   // When the button receives focus and setShownLog is available, call it
   const handleFocus = () => {
@@ -95,6 +74,7 @@ export function DeploymentEventListItem({
           setShownLog && "hover:bg-background-tertiary/70",
           setShownLog &&
             "focus:outline-none focus:border focus:border-border-selected",
+          focused && "bg-background-highlight",
         )}
         style={{
           height: ITEM_SIZE,

npm-packages/dashboard-common/src/features/logs/components/FunctionCallTree.stories.tsx

@@ -7,6 +7,29 @@ const meta: Meta<typeof FunctionCallTree> = {
   parameters: {
     layout: "padded",
   },
+  args: {
+    currentLog: {
+      id: "1",
+      udfType: "Query" as const,
+      localizedTimestamp: "2023-10-15 10:30:00",
+      timestamp: 1697365800000,
+      call: functionIdentifierValue("api/users:list"),
+      cachedResult: false,
+      requestId: "req_123",
+      executionId: "exec_1",
+      caller: "dashboard",
+      environment: "production",
+      identityType: "user",
+      parentExecutionId: null,
+      executionTimestamp: 1697365800000,
+      kind: "outcome" as const,
+      outcome: {
+        status: "success" as const,
+        statusCode: null,
+      },
+      executionTimeMs: 3000,
+    },
+  },
 };
 
 export default meta;
@@ -100,6 +123,27 @@ const mockRunningLogs = [
 
 export const WithSuccessfulFunctions: Story = {
   args: {
+    currentLog: {
+      id: "1",
+      udfType: "Query" as const,
+      localizedTimestamp: "2023-10-15 10:30:00",
+      timestamp: 1697365800000,
+      call: functionIdentifierValue("api/users:list"),
+      cachedResult: false,
+      requestId: "req_123",
+      executionId: "exec_1",
+      caller: "dashboard",
+      environment: "production",
+      identityType: "user",
+      parentExecutionId: null,
+      executionTimestamp: 1697365800000,
+      kind: "outcome" as const,
+      outcome: {
+        status: "success" as const,
+        statusCode: null,
+      },
+      executionTimeMs: 45,
+    },
     logs: [
       // Log messages for exec_1
       {
@@ -191,14 +235,33 @@ export const WithSuccessfulFunctions: Story = {
         executionTimeMs: 120,
       },
     ],
-    onFunctionSelect: (executionId: string, functionName: string) => {
-      alert(`Selected function: ${functionName} (${executionId})`);
-    },
   },
 };
 
 export const WithFailedFunction: Story = {
   args: {
+    currentLog: {
+      id: "1",
+      udfType: "Query" as const,
+      localizedTimestamp: "2023-10-15 10:30:00",
+      timestamp: 1697365800000,
+      call: functionIdentifierValue("api/users:list"),
+      cachedResult: false,
+      requestId: "req_123",
+      executionId: "exec_1",
+      caller: "dashboard",
+      environment: "production",
+      identityType: "user",
+      parentExecutionId: null,
+      executionTimestamp: 1697365800000,
+      kind: "outcome" as const,
+      outcome: {
+        status: "failure" as const,
+        statusCode: null,
+      },
+      executionTimeMs: 1500,
+      error: "User validation failed",
+    },
     logs: [
       {
         id: "1",
@@ -245,14 +308,26 @@ export const WithFailedFunction: Story = {
         error: "Payment gateway timeout",
       },
     ],
-    onFunctionSelect: (executionId: string, functionName: string) => {
-      alert(`Selected function: ${functionName} (${executionId})`);
-    },
   },
 };
 
 export const WithRunningFunction: Story = {
   args: {
+    currentLog: {
+      id: "1",
+      udfType: "Action" as const,
+      timestamp: Date.now() - 5000,
+      call: functionIdentifierValue("api/batch:process"),
+      executionId: "exec_1",
+      localizedTimestamp: "2023-10-15 10:30:00",
+      requestId: "req_123",
+      kind: "log" as const,
+      output: {
+        isTruncated: false,
+        messages: ["Starting batch processing..."],
+        level: "INFO" as const,
+      },
+    },
     logs: [
       {
         id: "1",
@@ -336,23 +411,39 @@ export const WithRunningFunction: Story = {
         },
       },
     ],
-    onFunctionSelect: (executionId: string, functionName: string) => {
-      alert(`Selected function: ${functionName} (${executionId})`);
-    },
   },
 };
 
 export const WithNestedFunctions: Story = {
   args: {
+    currentLog: mockLogs[0],
     logs: mockLogs,
-    onFunctionSelect: (executionId: string, functionName: string) => {
-      alert(`Selected function: ${functionName} (${executionId})`);
-    },
   },
 };
 
 export const WithComplexNesting: Story = {
   args: {
+    currentLog: {
+      id: "1",
+      udfType: "Query" as const,
+      localizedTimestamp: "2023-10-15 10:30:00",
+      timestamp: 1697365800000,
+      call: functionIdentifierValue("api/orders:process"),
+      cachedResult: false,
+      requestId: "req_123",
+      executionId: "exec_1",
+      caller: "dashboard",
+      environment: "production",
+      identityType: "user",
+      parentExecutionId: null,
+      executionTimestamp: 1697365800000,
+      kind: "outcome" as const,
+      outcome: {
+        status: "success" as const,
+        statusCode: null,
+      },
+      executionTimeMs: 2500,
+    },
     logs: [
       {
         id: "1",
@@ -460,8 +551,5 @@ export const WithComplexNesting: Story = {
         executionTimeMs: 400,
       },
     ],
-    onFunctionSelect: (executionId: string, functionName: string) => {
-      alert(`Selected function: ${functionName} (${executionId})`);
-    },
   },
 };

npm-packages/dashboard-common/src/features/logs/components/FunctionCallTree.test.tsx

@@ -55,7 +55,6 @@ describe("createExecutionNodes", () => {
       functionName: functionIdentifierValue("api/users:list"),
       status: "success",
       executionTime: 1000,
-      logCount: 1,
       children: [],
     });
   });
@@ -102,12 +101,11 @@ describe("createExecutionNodes", () => {
       functionName: functionIdentifierValue("api/batch:process"),
       status: "running",
       executionTime: undefined,
-      logCount: 2,
       children: [],
     });
   });
 
-  it("should correctly count logs per execution", () => {
+  it("should handle multiple executions", () => {
     const logs: UdfLog[] = [
       // Execution 1: 3 logs
       {
@@ -203,8 +201,8 @@ describe("createExecutionNodes", () => {
     const exec1 = result.find((n) => n.executionId === "exec_1");
     const exec2 = result.find((n) => n.executionId === "exec_2");
 
-    expect(exec1?.logCount).toBe(3);
-    expect(exec2?.logCount).toBe(1);
+    expect(exec1?.status).toBe("success");
+    expect(exec2?.status).toBe("failure");
   });
 
   it("should build parent-child relationships correctly", () => {