feat: display tracing status

includable · Sep 7, 2024 · 1662a5e · 1662a5e
1 parent cafaf63
commit 1662a5e
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 19 deletions.
diff --git a/packages/api/src/events/auto-trace.js b/packages/api/src/events/auto-trace.js
@@ -88,7 +88,7 @@ const saveFunctionInfo = async (lambda, traceStatus) => {
       region: process.env.AWS_REGION,
       arn: lambda.FunctionArn,
       memoryAllocated: lambda.MemorySize,
-      timeout: lambda.Timeout,
+      timeout: lambda.Timeout * 1000,
       traceStatus,
     },
     true,

diff --git a/packages/dashboard/src/components/stats/function-summary.tsx b/packages/dashboard/src/components/stats/function-summary.tsx
@@ -12,7 +12,7 @@ import {
 
 export const MiniFunctionSummary = ({ data, short = false }) => {
   return (
-    <dl className="flex gap-2 text-sm text-muted-foreground mt-2">
+    <dl className="flex gap-2 text-sm text-muted-foreground mt-1">
       <dt>Region</dt>
       <dd className="mr-4 font-semibold">{data.region}</dd>
       <dt>Runtime</dt>
@@ -27,10 +27,14 @@ export const MiniFunctionSummary = ({ data, short = false }) => {
           <dd className="mr-4 font-semibold">
             {Math.round(data.timeout / 1000)} s
           </dd>
-          <dt>Last invocation</dt>
-          <dd className="mr-4 font-semibold">
-            {formatRelative(new Date(data.lastInvocation), new Date())}
-          </dd>
+          {data.lastInvocation && (
+            <>
+              <dt>Last invocation</dt>
+              <dd className="mr-4 font-semibold">
+                {formatRelative(new Date(data.lastInvocation), new Date())}
+              </dd>
+            </>
+          )}
         </>
       )}
     </dl>

diff --git a/packages/dashboard/src/components/stats/mini-stats-chart.tsx b/packages/dashboard/src/components/stats/mini-stats-chart.tsx
@@ -50,7 +50,7 @@ export function MiniStatsChart({
             color: color,
           },
         }}
-        className="h-12 w-full border px-2 pt-5 rounded-md"
+        className="h-11 w-full border px-2 pt-5 rounded-md"
       >
         {data ? (
           <BarChart accessibilityLayer data={data} margin={0}>

diff --git a/packages/dashboard/src/components/ui/tooltipped.tsx b/packages/dashboard/src/components/ui/tooltipped.tsx
@@ -0,0 +1,19 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+export const Tooltipped = ({ children, title }) => {
+  return (
+    <TooltipProvider>
+      <Tooltip delayDuration={100}>
+        <TooltipTrigger>{children}</TooltipTrigger>
+        <TooltipContent>
+          <p>{title}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
diff --git a/packages/dashboard/src/routes/functions/columns.tsx b/packages/dashboard/src/routes/functions/columns.tsx
@@ -2,7 +2,9 @@
 
 import { MiniFunctionSummary } from "@/components/stats/function-summary";
 import { MiniStatsChart } from "@/components/stats/mini-stats-chart";
+import { Tooltipped } from "@/components/ui/tooltipped";
 import { ColumnDef } from "@tanstack/react-table";
+import { CheckCircle2, CirclePause, CircleX } from "lucide-react";
 import { Link } from "react-router-dom";
 
 export type FunctionItem = {
@@ -23,7 +25,7 @@ export const columns: ColumnDef<FunctionItem>[] = [
           to={`/functions/${row.original.region}/${name}/invocations`}
           className="block text-primary"
         >
-          <span className="font-semibold block mb-1">{name}</span>
+          <span className="font-semibold block">{name}</span>
           <MiniFunctionSummary data={row.original} short />
         </Link>
       );
@@ -36,9 +38,9 @@ export const columns: ColumnDef<FunctionItem>[] = [
     cell: ({ row }) => {
       return (
         <MiniStatsChart
-        title="Invocations"
-        region={row.original.region}
-        name={row.original.name + ".invocations"}
+          title="Invocations"
+          region={row.original.region}
+          name={row.original.name + ".invocations"}
         />
       );
     },
@@ -50,12 +52,12 @@ export const columns: ColumnDef<FunctionItem>[] = [
     cell: ({ row }) => {
       return (
         <div className="lg:mr-10">
-        <MiniStatsChart
-        title="Traced errors"
-        color="var(--chart-2)"
-        region={row.original.region}
-        name={row.original.name + ".errors"}
-        />
+          <MiniStatsChart
+            title="Traced errors"
+            color="var(--chart-2)"
+            region={row.original.region}
+            name={row.original.name + ".errors"}
+          />
         </div>
       );
     },
@@ -77,9 +79,49 @@ export const columns: ColumnDef<FunctionItem>[] = [
   },
   {
     accessorKey: "traceStatus",
-    header: "Trace status",
+    header: "Tracing",
     cell: ({ row }) => {
-      return <span>{row.getValue("traceStatus")}</span>;
+      if (row.getValue("traceStatus") === "enabled") {
+        return (
+          <Tooltipped title="Tracer installed">
+            <div className="flex items-center gap-2 text-sm text-green-500">
+              <CheckCircle2 size={16} />
+              Active
+            </div>
+          </Tooltipped>
+        );
+      }
+
+      if (row.getValue("traceStatus") === "error") {
+        return (
+          <Tooltipped title="Error installing tracer">
+            <div className="flex items-center gap-2 text-sm text-red-500">
+              <CircleX size={16} />
+              Error
+            </div>
+          </Tooltipped>
+        );
+      }
+
+      if (row.getValue("traceStatus") === "excluded") {
+        return (
+          <Tooltipped title={row.getValue("traceStatus")}>
+            <div className="flex items-center gap-2 text-sm text-gray-500">
+              <CirclePause size={16} />
+              Excluded
+            </div>
+          </Tooltipped>
+        );
+      }
+
+      return (
+        <Tooltipped title={row.getValue("traceStatus")}>
+          <div className="flex items-center gap-2 text-sm text-gray-500">
+            <CircleX size={16} />
+            Inactive
+          </div>
+        </Tooltipped>
+      );
     },
   },
 ];