Add new runs page (#1288)

* Add runs page under flag

* Add initial runs table

* Render table with fake data

* Tweaks

* Simplify code

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

@@ -7,6 +7,7 @@ import { InvokeButton } from '@inngest/components/InvokeButton';
 import { useMutation } from 'urql';
 
 import { useEnvironment } from '@/app/(organization-active)/(dashboard)/env/[environmentSlug]/environment-context';
+import { useBooleanFlag } from '@/components/FeatureFlags/hooks';
 import Header, { type HeaderLink } from '@/components/Header/Header';
 import { graphql } from '@/gql';
 import { useFunction } from '@/queries';
@@ -37,6 +38,8 @@ export default function FunctionLayout({ children, params }: FunctionLayoutProps
   const { isArchived = false } = fn ?? {};
   const isPaused = !isArchived && !data?.workspace.workflow?.current;
 
+  const isNewRunsEnabled = useBooleanFlag('new-runs');
+
   const emptyData = !data || fetching || !fn;
   const navLinks: HeaderLink[] = [
     {
@@ -54,6 +57,18 @@ export default function FunctionLayout({ children, params }: FunctionLayoutProps
     },
   ];
 
+  if (isNewRunsEnabled.value) {
+    navLinks.push({
+      href: `/env/${params.environmentSlug}/functions/${params.slug}/runs`,
+      text: 'Runs',
+      badge: (
+        <Badge kind="solid" className=" h-3.5 bg-indigo-500 px-[0.235rem] text-white">
+          Beta
+        </Badge>
+      ),
+    });
+  }
+
   const doesFunctionAcceptPayload =
     fn?.current?.triggers.some((trigger) => {
       return trigger.eventName;

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

@@ -0,0 +1,185 @@
+import { ArrowDownIcon, ArrowUpIcon } from '@heroicons/react/20/solid';
+import { FunctionRunStatusIcon } from '@inngest/components/FunctionRunStatusIcon';
+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 {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  type OnChangeFn,
+  type SortingState,
+} from '@tanstack/react-table';
+
+import { Time } from '@/components/Time';
+
+export type Run = {
+  status: FunctionRunStatus;
+  duration: string;
+  id: string;
+  queuedAt: string;
+  endedAt: string;
+};
+
+type RunsTableProps = {
+  data: Run[] | undefined;
+  sorting?: SortingState;
+  setSorting?: OnChangeFn<SortingState>;
+  isLoading?: boolean;
+};
+
+export default function RunsTable({ data = [], isLoading, sorting, setSorting }: RunsTableProps) {
+  const columns = useColumns();
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    manualSorting: true,
+    onSortingChange: setSorting,
+    state: {
+      sorting,
+    },
+  });
+
+  // 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';
+
+  return (
+    <table className={tableStyles}>
+      <thead className={tableHeadStyles}>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <tr key={headerGroup.id} className="h-12">
+            {headerGroup.headers.map((header) => (
+              <th
+                key={header.id}
+                className={cn(tableColumnStyles, 'text-sm font-semibold text-slate-500 ')}
+              >
+                {header.isPlaceholder ? null : (
+                  <div
+                    className={cn(
+                      header.column.getCanSort() &&
+                        'flex cursor-pointer select-none items-center gap-1'
+                    )}
+                    onClick={header.column.getToggleSortingHandler()}
+                  >
+                    {flexRender(header.column.columnDef.header, header.getContext())}
+                    {{
+                      asc: <ArrowDownIcon className="h-4 w-4" />,
+                      desc: <ArrowUpIcon className="h-4 w-4" />,
+                    }[header.column.getIsSorted() as string] ?? null}
+                  </div>
+                )}
+              </th>
+            ))}
+          </tr>
+        ))}
+      </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>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+      <tfoot>
+        {table.getFooterGroups().map((footerGroup) => (
+          <tr key={footerGroup.id}>
+            {footerGroup.headers.map((header) => (
+              <th key={header.id}>
+                {header.isPlaceholder
+                  ? null
+                  : flexRender(header.column.columnDef.footer, header.getContext())}
+              </th>
+            ))}
+          </tr>
+        ))}
+      </tfoot>
+    </table>
+  );
+}
+
+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',
+    }),
+  ];
+}

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

@@ -0,0 +1,16 @@
+export const mockedRuns = [
+  {
+    id: '01HVRHTQNESBSW4006K4BEA9S3',
+    status: 'RUNNING',
+    queuedAt: '2024-04-18T12:10:17.646Z',
+    endedAt: null,
+    duration: null,
+  },
+  {
+    id: '01HVPWVYJ1BRZ0TSVBVB0V1KA6',
+    status: 'COMPLETED',
+    queuedAt: '2024-04-17T20:44:42.945Z',
+    endedAt: '2024-04-17T23:56:33.175Z',
+    duration: '11510230',
+  },
+];

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

@@ -0,0 +1,38 @@
+'use client';
+
+// import { useQuery } from 'urql';
+
+// import { useEnvironment } from '@/app/(organization-active)/(dashboard)/env/[environmentSlug]/environment-context';
+// import { graphql } from '@/gql';
+import RunsTable from './RunsTable';
+import { mockedRuns } from './mockedRuns';
+
+// const GetRunsDocument = graphql(`
+//   query GetRuns($environmentID: ID!) {
+//     workspace(id: $environmentID) {
+//       runs {
+//       }
+//     }
+//   }
+// `);
+
+export default function RunsPage() {
+  //   const environment = useEnvironment();
+  //   const [{ data, fetching: fetchingRuns }] = useQuery({
+  //     query: GetRunsDocument,
+  //     variables: {
+  //       environmentID: environment.id,
+  //       // filter: filtering,
+  //     },
+  //   });
+
+  const runs = mockedRuns;
+
+  return (
+    <main className="bg-white">
+      <div className="m-8 flex gap-2">{/* TODO: filters */}</div>
+      {/* @ts-ignore */}
+      <RunsTable data={runs} />
+    </main>
+  );
+}

ui/packages/components/src/Table/Cell.tsx

@@ -0,0 +1,26 @@
+import { cn } from '../utils/classNames';
+
+const cellStyles = 'text-slate-950 text-sm';
+
+export function IDCell({ children }: React.PropsWithChildren) {
+  return <p className={cn(cellStyles, 'font-mono')}>{children}</p>;
+}
+
+export function TextCell({ children }: React.PropsWithChildren) {
+  return <p className={cn(cellStyles, 'font-medium')}>{children}</p>;
+}
+
+export function TimeCell({ children }: React.PropsWithChildren) {
+  // TODO: Move Time component from Cloud to shared components, to use here
+  return <span className={cn(cellStyles, 'font-medium')}>{children}</span>;
+}
+
+export function StatusCell({ status, children }: React.PropsWithChildren<{ status: string }>) {
+  // TODO: Use new runs circles and colors instead of passing FunctionRunStatusIcon as children
+  return (
+    <p className={cn(cellStyles, 'flex items-center gap-2.5 font-medium')}>
+      {children}
+      <p className="lowercase first-letter:capitalize">{status}</p>
+    </p>
+  );
+}

ui/packages/components/src/Table/index.ts

@@ -1 +1,2 @@
 export { Table } from './Table';
+export { IDCell, TextCell, TimeCell, StatusCell } from './Cell';