feat: filter invocations by error/status (fixes #20)

includable · Oct 6, 2024 · f738a42 · f738a42
1 parent 759b9dd
commit f738a42
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 56 deletions.
diff --git a/packages/api/src/routes/explore/index.js b/packages/api/src/routes/explore/index.js
@@ -59,6 +59,37 @@ app.get("/functions/:region/:name", async (c) => {
   return c.json(Items?.[0]);
 });
 
+app.get("/functions/:region/:name/invocation-summaries", async (c) => {
+  const [start, end] = getDates(c);
+  const startTs = start.getTime();
+  const endTs = end.getTime();
+
+  const params = {
+    KeyConditionExpression: "#pk = :pk AND #sk BETWEEN :skStart AND :skEnd",
+    ExpressionAttributeNames: {
+      "#pk": "pk",
+      "#sk": "sk",
+      "#resultSummary": "resultSummary",
+    },
+    ExpressionAttributeValues: {
+      ":pk": `function#${c.req.param("region")}#${c.req.param("name")}`,
+      ":skStart": `invocation#${startTs}`,
+      ":skEnd": `invocation#${endTs}`,
+    },
+    ProjectionExpression: "#resultSummary",
+    Limit: 10000,
+    ScanIndexForward: false,
+  };
+
+  const { Items } = await query(params);
+
+  return c.json(
+    Array.from(new Set(Items.map((item) => item.resultSummary))).filter(
+      Boolean,
+    ),
+  );
+});
+
 app.get("/functions/:region/:name/invocations", async (c) => {
   const [start, end] = getDates(c);
   const startTs = start.getTime();
@@ -91,7 +122,8 @@ app.get("/functions/:region/:name/invocations", async (c) => {
     ScanIndexForward: false,
   };
 
-  const resultSummaryFilters = c.req.query("resultSummaryFilters")?.split(',') || [];
+  const resultSummaryFilters =
+    c.req.query("resultSummaryFilters")?.split(",") || [];
   if (resultSummaryFilters.length) {
     const filterExpression = [];
     for (const filter of resultSummaryFilters) {

diff --git a/packages/dashboard/src/routes/invocations/page.tsx b/packages/dashboard/src/routes/invocations/page.tsx
@@ -1,35 +1,13 @@
+import { Suspense } from "react";
 import { Link, useParams } from "react-router-dom";
 
 import { Button } from "@/components/ui/button";
-import { DataTable } from "@/components/tables/data-table";
-import { StatsChart } from "@/components/stats/stats-chart";
 import FunctionSummary from "@/components/stats/function-summary";
-import { columns } from "./columns";
-import { useData } from "@/lib/api";
-import { useState } from "react";
+import { StatsChart } from "@/components/stats/stats-chart";
+import { InvocationsTable } from "@/routes/invocations/table";
 
 const Invocations = () => {
   const { region, name } = useParams();
-  const [startKey, setStartKey] = useState("");
-  const [previousKeys, setPreviousKeys] = useState<string[]>([]);
-
-  const {
-    data: { invocations, nextStartKey },
-  } = useData(
-    `functions/${region}/${name}/invocations?startKey=${encodeURIComponent(startKey)}`,
-    {
-      suspense: true,
-    },
-  );
-
-  const goBack = () => {
-    setStartKey(previousKeys.pop());
-    setPreviousKeys(previousKeys);
-  };
-  const goNext = () => {
-    setPreviousKeys([...previousKeys, startKey]);
-    setStartKey(nextStartKey);
-  };
 
   return (
     <div>
@@ -65,36 +43,9 @@ const Invocations = () => {
           />
         </div>
       </div>
-      <DataTable
-        id="invocations"
-        pageSize={50}
-        columns={columns}
-        data={invocations}
-        defaultSorting={[{ id: "started", desc: true }]}
-      />
-      <div className="flex items-center justify-between">
-        <div className="text-xs text-muted-foreground">
-          Page {previousKeys.length + 1} ({invocations.length} items)
-        </div>
-        <div className="flex items-center justify-end space-x-2 py-4">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => goBack()}
-            disabled={!previousKeys.length}
-          >
-            Previous
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => goNext()}
-            disabled={!nextStartKey}
-          >
-            Next
-          </Button>
-        </div>
-      </div>
+      <Suspense fallback={<p>Loading...</p>}>
+        <InvocationsTable region={region} name={name} />
+      </Suspense>
     </div>
   );
 };

diff --git a/packages/dashboard/src/routes/invocations/table.tsx b/packages/dashboard/src/routes/invocations/table.tsx
@@ -0,0 +1,96 @@
+import { useState } from "react";
+
+import { DataTable } from "@/components/tables/data-table";
+import { Button } from "@/components/ui/button";
+
+import { columns } from "@/routes/invocations/columns";
+import { useData } from "@/lib/api";
+import { CheckIcon, XIcon } from "lucide-react";
+import { DataTableFilter } from "@/components/tables/data-table-filter";
+import { useUserState } from "@/lib/user-state";
+
+export const InvocationsTable = ({ region, name }) => {
+  const [startKey, setStartKey] = useState("");
+  const [previousKeys, setPreviousKeys] = useState<string[]>([]);
+  const [resultSummaryFilters, setResultSummaryFilters] = useUserState(
+    `resultSummaryFilters-${region}-${name}`,
+    [],
+  );
+
+  let url = `functions/${region}/${name}/invocations`;
+  url += `?startKey=${encodeURIComponent(startKey)}`;
+  if (resultSummaryFilters?.length) {
+    url += `&resultSummaryFilters=${encodeURIComponent(resultSummaryFilters.join(","))}`;
+  }
+
+  const {
+    data: { invocations, nextStartKey },
+  } = useData(url, { suspense: true });
+
+  const { data: resultSummaryFilterOptions } = useData(
+    `functions/${region}/${name}/invocation-summaries`,
+  );
+
+  const goBack = () => {
+    setStartKey(previousKeys.pop());
+    setPreviousKeys(previousKeys);
+  };
+  const goNext = () => {
+    setPreviousKeys([...previousKeys, startKey]);
+    setStartKey(nextStartKey);
+  };
+
+  const column = {
+    getFilterValue: () => resultSummaryFilters,
+    setFilterValue: setResultSummaryFilters,
+  };
+
+  const options = resultSummaryFilterOptions?.map((value) => ({
+    value,
+    label: value,
+    icon: value.startsWith("Successful") ? CheckIcon : XIcon,
+  }));
+
+  return (
+    <>
+      <DataTable
+        id="invocations"
+        pageSize={50}
+        columns={columns}
+        data={invocations}
+        defaultSorting={[{ id: "started", desc: true }]}
+      >
+        {() => (
+          <DataTableFilter
+            column={column}
+            title="Invocation status"
+            options={options}
+          />
+        )}
+      </DataTable>
+      <div className="flex items-center justify-between">
+        <div className="text-xs text-muted-foreground">
+          Page {previousKeys.length + 1} ({invocations.length} items)
+        </div>
+        <div className="flex items-center justify-end space-x-2 py-4">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => goBack()}
+            disabled={!previousKeys.length}
+          >
+            Previous
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => goNext()}
+            disabled={!nextStartKey}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};