INN 2962 Add status filter to runs

ui/apps/dashboard/package.json

@@ -42,6 +42,7 @@
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-toggle-group": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.6",
+    "@remixicon/react": "4.2.0",
     "@sentry/nextjs": "7.88.0",
     "@sindresorhus/slugify": "2.2.0",
     "@stripe/react-stripe-js": "2.1.0",

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/functions/[slug]/runs/RunsTable.tsx

@@ -1,8 +1,11 @@
-import { ArrowDownIcon, ArrowUpIcon } from '@heroicons/react/20/solid';
+import { useMemo } from 'react';
 import { FunctionRunStatusIcon } from '@inngest/components/FunctionRunStatusIcon';
+import { Skeleton } from '@inngest/components/Skeleton';
 import { IDCell, StatusCell, TextCell, TimeCell } from '@inngest/components/Table';
 import { type FunctionRunStatus } from '@inngest/components/types/functionRun';
 import { cn } from '@inngest/components/utils/classNames';
+import { formatMilliseconds } from '@inngest/components/utils/date';
+import { RiSortAsc, RiSortDesc } from '@remixicon/react';
 import {
   createColumnHelper,
   flexRender,
@@ -16,7 +19,7 @@ import { Time } from '@/components/Time';
 
 export type Run = {
   status: FunctionRunStatus;
-  duration: string;
+  duration: number;
   id: string;
   queuedAt: string;
   endedAt: string;
@@ -30,11 +33,23 @@ type RunsTableProps = {
 };
 
 export default function RunsTable({ data = [], isLoading, sorting, setSorting }: RunsTableProps) {
-  const columns = useColumns();
+  // Render 8 empty lines for skeletons when data is loading
+  const tableData = useMemo(() => (isLoading ? Array(8).fill({}) : data), [isLoading, data]);
+
+  const tableColumns = useMemo(
+    () =>
+      isLoading
+        ? columns.map((column) => ({
+            ...column,
+            cell: () => <Skeleton className="my-4 block h-4" />,
+          }))
+        : columns,
+    [isLoading]
+  );
 
   const table = useReactTable({
-    data,
-    columns,
+    data: tableData,
+    columns: tableColumns,
     getCoreRowModel: getCoreRowModel(),
     manualSorting: true,
     onSortingChange: setSorting,
@@ -43,16 +58,15 @@ export default function RunsTable({ data = [], isLoading, sorting, setSorting }:
     },
   });
 
-  // TODO: pass loading to column cells for skeletons
-  if (isLoading) return;
-
   const tableStyles = 'w-full border-y border-slate-200';
   const tableHeadStyles = 'border-b border-slate-200';
   const tableBodyStyles = 'divide-y divide-slate-200';
   const tableColumnStyles = 'px-4';
 
+  const isEmpty = data.length < 1 && !isLoading;
+
   return (
-    <table className={tableStyles}>
+    <table className={cn(isEmpty && 'h-full', tableStyles)}>
       <thead className={tableHeadStyles}>
         {table.getHeaderGroups().map((headerGroup) => (
           <tr key={headerGroup.id} className="h-12">
@@ -71,8 +85,8 @@ export default function RunsTable({ data = [], isLoading, sorting, setSorting }:
                   >
                     {flexRender(header.column.columnDef.header, header.getContext())}
                     {{
-                      asc: <ArrowDownIcon className="h-4 w-4" />,
-                      desc: <ArrowUpIcon className="h-4 w-4" />,
+                      asc: <RiSortDesc className="h-4 w-4" />,
+                      desc: <RiSortAsc className="h-4 w-4" />,
                     }[header.column.getIsSorted() as string] ?? null}
                   </div>
                 )}
@@ -82,15 +96,24 @@ export default function RunsTable({ data = [], isLoading, sorting, setSorting }:
         ))}
       </thead>
       <tbody className={tableBodyStyles}>
-        {table.getRowModel().rows.map((row) => (
-          <tr key={row.id} className="h-12">
-            {row.getVisibleCells().map((cell) => (
-              <td className={tableColumnStyles} key={cell.id}>
-                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-              </td>
-            ))}
+        {isEmpty && (
+          <tr>
+            {/* TODO: when we introduce column visibility options, this colSpan has to be dinamically calculated depending on # visible columns */}
+            <td className="pt-28 text-center align-top	font-medium text-slate-600" colSpan={5}>
+              No results were found.
+            </td>
           </tr>
-        ))}
+        )}
+        {!isEmpty &&
+          table.getRowModel().rows.map((row) => (
+            <tr key={row.id} className="h-12">
+              {row.getVisibleCells().map((cell) => (
+                <td className={tableColumnStyles} key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
       </tbody>
       <tfoot>
         {table.getFooterGroups().map((footerGroup) => (
@@ -109,77 +132,75 @@ export default function RunsTable({ data = [], isLoading, sorting, setSorting }:
   );
 }
 
-function useColumns() {
-  const columnHelper = createColumnHelper<Run>();
-
-  return [
-    columnHelper.accessor('status', {
-      cell: (info) => {
-        const status = info.getValue();
-
-        return (
-          <div className="flex items-center">
-            <StatusCell status={status}>
-              <FunctionRunStatusIcon status={status} className="h-5 w-5" />
-            </StatusCell>
-          </div>
-        );
-      },
-      header: 'Status',
-    }),
-    columnHelper.accessor('id', {
-      cell: (info) => {
-        const id = info.getValue();
-
-        return (
-          <div className="flex items-center">
-            <IDCell>{id}</IDCell>
-          </div>
-        );
-      },
-      header: 'Run ID',
-    }),
-    columnHelper.accessor('queuedAt', {
-      cell: (info) => {
-        const time = info.getValue();
-
-        return (
-          <div className="flex items-center">
-            <TimeCell>
-              <Time value={new Date(time)} />
-            </TimeCell>
-          </div>
-        );
-      },
-      header: 'Queued At',
-    }),
-    columnHelper.accessor('endedAt', {
-      cell: (info) => {
-        const time = info.getValue();
-
-        return (
-          <div className="flex items-center">
-            <TimeCell>
-              <Time value={new Date(time)} />
-            </TimeCell>
-          </div>
-        );
-      },
-      header: 'Ended At',
-    }),
-    columnHelper.accessor('duration', {
-      cell: (info) => {
-        const duration = info.getValue();
-
-        return (
-          <div className="flex items-center">
-            <TextCell>
-              <p>{duration || '-'}</p>
-            </TextCell>
-          </div>
-        );
-      },
-      header: 'Duration',
-    }),
-  ];
-}
+const columnHelper = createColumnHelper<Run>();
+
+const columns = [
+  columnHelper.accessor('status', {
+    cell: (info) => {
+      const status = info.getValue();
+
+      return (
+        <div className="flex items-center">
+          <StatusCell status={status}>
+            <FunctionRunStatusIcon status={status} className="h-5 w-5" />
+          </StatusCell>
+        </div>
+      );
+    },
+    header: 'Status',
+  }),
+  columnHelper.accessor('id', {
+    cell: (info) => {
+      const id = info.getValue();
+
+      return (
+        <div className="flex items-center">
+          <IDCell>{id}</IDCell>
+        </div>
+      );
+    },
+    header: 'Run ID',
+  }),
+  columnHelper.accessor('queuedAt', {
+    cell: (info) => {
+      const time = info.getValue();
+
+      return (
+        <div className="flex items-center">
+          <TimeCell>
+            <Time value={new Date(time)} />
+          </TimeCell>
+        </div>
+      );
+    },
+    header: 'Queued At',
+  }),
+  columnHelper.accessor('endedAt', {
+    cell: (info) => {
+      const time = info.getValue();
+
+      return (
+        <div className="flex items-center">
+          <TimeCell>
+            <Time value={new Date(time)} />
+          </TimeCell>
+        </div>
+      );
+    },
+    header: 'Ended At',
+  }),
+  columnHelper.accessor('duration', {
+    cell: (info) => {
+      const duration = info.getValue();
+
+      return (
+        <div className="flex items-center">
+          <TextCell>
+            <p>{duration ? formatMilliseconds(duration) : '-'}</p>
+          </TextCell>
+        </div>
+      );
+    },
+    header: 'Duration',
+  }),
+];

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/functions/[slug]/runs/mockedRuns.ts

@@ -11,6 +11,6 @@ export const mockedRuns = [
     status: 'COMPLETED',
     queuedAt: '2024-04-17T20:44:42.945Z',
     endedAt: '2024-04-17T23:56:33.175Z',
-    duration: '11510230',
+    duration: 11510230,
   },
 ];

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/functions/[slug]/runs/page.tsx

@@ -4,6 +4,12 @@
 
 // import { useEnvironment } from '@/app/(organization-active)/(dashboard)/env/[environmentSlug]/environment-context';
 // import { graphql } from '@/gql';
+import { Button } from '@inngest/components/Button';
+import { RiLoopLeftLine } from '@remixicon/react';
+
+import { FunctionRunStatus } from '@/gql/graphql';
+import { useStringArraySearchParam } from '@/utils/useSearchParam';
+import StatusFilter from '../logs/StatusFilter';
 import RunsTable from './RunsTable';
 import { mockedRuns } from './mockedRuns';
 
@@ -17,6 +23,16 @@ import { mockedRuns } from './mockedRuns';
 // `);
 
 export default function RunsPage() {
+  const [filteredStatus, setFilteredStatus, removeFilteredStatus] =
+    useStringArraySearchParam('filterStatus');
+
+  function handleStatusesChange(statuses: FunctionRunStatus[]) {
+    if (statuses.length > 0) {
+      setFilteredStatus(statuses);
+    } else {
+      removeFilteredStatus();
+    }
+  }
   //   const environment = useEnvironment();
   //   const [{ data, fetching: fetchingRuns }] = useQuery({
   //     query: GetRunsDocument,
@@ -29,8 +45,15 @@ export default function RunsPage() {
   const runs = mockedRuns;
 
   return (
-    <main className="bg-white">
-      <div className="m-8 flex gap-2">{/* TODO: filters */}</div>
+    <main className="min-h-0 overflow-y-auto bg-white">
+      <div className="flex justify-between gap-2 bg-slate-50 px-8 py-2">
+        <StatusFilter
+          selectedStatuses={filteredStatus ? (filteredStatus as FunctionRunStatus[]) : []}
+          onStatusesChange={handleStatusesChange}
+        />
+        {/* TODO: wire button */}
+        <Button label="Refresh" appearance="text" icon={<RiLoopLeftLine />} />
+      </div>
       {/* @ts-ignore */}
       <RunsTable data={runs} />
     </main>

ui/apps/dashboard/src/utils/isStringArray.ts

@@ -0,0 +1,7 @@
+export default function isStringArray(value: unknown): value is Array<string> {
+  if (!Array.isArray(value)) {
+    return false;
+  }
+
+  return value.every((item) => typeof item === 'string');
+}

ui/apps/dashboard/src/utils/useSearchParam.ts

@@ -1,6 +1,8 @@
 import { useCallback } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
+import isStringArray from './isStringArray';
+
 type SetParam<T> = (value: T) => void;
 
 /**
@@ -50,3 +52,45 @@ export function useBooleanSearchParam(name: string): [boolean | undefined, SetPa
 
   return [value, upsert];
 }
+
+export function useStringArraySearchParam(
+  name: string
+): [Array<string> | undefined, SetParam<Array<string>>, () => void] {
+  const pathname = usePathname();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const upsert = useCallback(
+    (value: Array<string>) => {
+      const params = new URLSearchParams(searchParams);
+      params.set(name, JSON.stringify(value));
+
+      // @ts-expect-error Router doesn't like strings.
+      router.replace(pathname + '?' + params.toString());
+    },
+    [name, pathname, router, searchParams]
+  );
+
+  const remove = useCallback(() => {
+    const params = new URLSearchParams(searchParams);
+    params.delete(name);
+
+    // @ts-expect-error Router doesn't like strings.
+    router.replace(pathname + '?' + params.toString());
+  }, [name, pathname, router, searchParams]);
+
+  let value = undefined;
+  const rawValue = searchParams.get(name);
+  if (typeof rawValue === 'string') {
+    const parsed: unknown = JSON.parse(rawValue);
+
+    if (isStringArray(parsed)) {
+      value = parsed;
+    } else {
+      // This means the query param value is the wrong type
+      console.error(`invalid type for search param ${name}`);
+    }
+  }
+
+  return [value, upsert, remove];
+}