feat: allow filtering by tags (closes #12)

packages/dashboard/src/components/tables/data-table-filter.tsx

@@ -38,12 +38,11 @@ export function DataTableFilter<TData, TValue>({
 }: DataTableFilterProps<TData, TValue>) {
   const facets = column?.getFacetedUniqueValues?.();
   const selectedValues = new Set(column?.getFilterValue() as string[]);
+
   options = Array.from(
     options || facets?.keys().map((value) => ({ value, label: value })) || [],
   );
 
-  console.log(options);
-
   return (
     <Popover>
       <PopoverTrigger asChild>

packages/dashboard/src/components/ui/badge.tsx

@@ -18,7 +18,7 @@ const badgeVariants = cva(
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: "secondary",
     },
   }
 )

packages/dashboard/src/routes/functions/columns.tsx

@@ -2,8 +2,9 @@
 
 import { MiniFunctionSummary } from "@/components/stats/function-summary";
 import { MiniStatsChart } from "@/components/stats/mini-stats-chart";
+import { Badge } from "@/components/ui/badge";
 import { Tooltipped } from "@/components/ui/tooltipped";
-import { ColumnDef } from "@tanstack/react-table";
+import { ColumnDef, Table } from "@tanstack/react-table";
 import { CheckCircle2, CirclePause, CircleX } from "lucide-react";
 import { Link } from "react-router-dom";
 
@@ -79,6 +80,32 @@ export const columns: ColumnDef<FunctionItem>[] = [
       return <span>{row.getValue("memoryAllocated") || "-"} MB</span>;
     },
   },
+  {
+    accessorKey: "tags",
+    header: "Tags",
+    cell: ({ row }) => {
+      return (
+        <span className="flex flex-wrap gap-1">
+          {(row.getValue("tags") || []).map((tag) => (
+            <Badge key={tag}>{tag}</Badge>
+          ))}
+        </span>
+      );
+    },
+    getUniqueFacetValues: (column) => {
+      const tags = new Set<string>();
+      for (const { original } of column.getFacetedRowModel().flatRows) {
+        for (const tag of original.tags) {
+          tags.add(tag);
+        }
+      }
+
+      return tags.keys().map((tag) => ({ value: tag, label: tag }));
+    },
+    filterFn: (row, id, value) => {
+      return value.every((v) => row.getValue(id)?.includes(v));
+    },
+  },
   {
     accessorKey: "traceStatus",
     header: "Tracing",

packages/dashboard/src/routes/functions/page.tsx

@@ -4,9 +4,21 @@ import { StatsChart } from "@/components/stats/stats-chart";
 import { columns } from "./columns";
 import { useData } from "@/lib/api";
 import { DataTableFilter } from "@/components/tables/data-table-filter";
+import { useMemo } from "react";
 
 const Functions = () => {
   const { data: functions } = useData(`functions`, { suspense: true });
+  const mappedFunctions = useMemo(() => {
+    return functions.map((func) => ({
+      ...func,
+      tags: Object.entries(func.tags || {})
+        .filter(([tag]) => !tag.startsWith("aws:cloudformation:"))
+        .filter(([tag]) => !tag.startsWith("lumigo:"))
+        .map(([tag, value]) => {
+          return `${tag}: ${value}`;
+        }),
+    }));
+  }, [functions]);
 
   return (
     <div>
@@ -35,20 +47,24 @@ const Functions = () => {
         id="functions"
         defaultSorting={[{ id: "name", desc: false }]}
         columns={columns}
-        data={functions}
+        data={mappedFunctions}
         paginate
       >
-        {(table) => {
-          console.log(table.getColumn("traceStatus").getFacetedUniqueValues())
-          return (
-            <>
-              <DataTableFilter
-                column={table.getColumn("traceStatus")}
-                title="Tracing"
-              />
-            </>
-          );
-        }}
+        {(table) => (
+          <>
+            <DataTableFilter
+              column={table.getColumn("tags")}
+              title="Tags"
+              options={table
+                .getColumn("tags")
+                ?.columnDef.getUniqueFacetValues(table.getColumn("tags"))}
+            />
+            <DataTableFilter
+              column={table.getColumn("traceStatus")}
+              title="Tracing"
+            />
+          </>
+        )}
       </DataTable>
     </div>
   );