Add job name to job runs table (#923)

nucleuscloud · Dec 19, 2023 · 701b39e · 701b39e
1 parent 7ba13e5
commit 701b39e
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 18 deletions.
diff --git a/frontend/apps/web/app/[account]/runs/components/JobRunsTable/columns.tsx b/frontend/apps/web/app/[account]/runs/components/JobRunsTable/columns.tsx
@@ -14,12 +14,13 @@ interface GetColumnsProps {
   onDeleted(id: string): void;
   accountId: string;
   accountName: string;
+  jobNameMap: Record<string, string>;
 }
 
 export function getColumns(
   props: GetColumnsProps
 ): ColumnDef<PlainMessage<JobRun>>[] {
-  const { onDeleted, accountId, accountName } = props;
+  const { onDeleted, accountId, accountName, jobNameMap } = props;
   return [
     {
       accessorKey: 'status',
@@ -44,7 +45,7 @@ export function getColumns(
       ),
       cell: ({ row }) => {
         return (
-          <div>
+          <div className="font-medium">
             <NextLink
               className="hover:underline"
               href={`/${accountName}/runs/${row.getValue('id')}`}
@@ -58,15 +59,15 @@ export function getColumns(
       enableHiding: false,
     },
     {
-      accessorKey: 'name',
+      accessorKey: 'jobName',
       header: ({ column }) => (
-        <DataTableColumnHeader column={column} title="Name" />
+        <DataTableColumnHeader column={column} title="Job Name" />
       ),
       cell: ({ row }) => {
         return (
-          <div className="flex space-x-2">
-            <span className="max-w-[500px] truncate font-medium">
-              {row.getValue('name')}
+          <div>
+            <span className="font-medium">
+              {jobNameMap[row.original.jobId]}
             </span>
           </div>
         );
@@ -79,14 +80,12 @@ export function getColumns(
       ),
       cell: ({ row }) => {
         return (
-          <div className="flex space-x-2">
+          <div className="font-medium">
             <NextLink
               className="hover:underline"
               href={`/${accountName}/jobs/${row.getValue('jobId')}`}
             >
-              <span className="max-w-[500px] truncate font-medium">
-                {row.getValue('jobId')}
-              </span>
+              <span>{row.getValue('jobId')}</span>
             </NextLink>
           </div>
         );
@@ -99,8 +98,8 @@ export function getColumns(
       ),
       cell: ({ row }) => {
         return (
-          <div className="flex space-x-2">
-            <span className="max-w-[500px] truncate font-medium">
+          <div>
+            <span className="font-medium">
               {formatDateTime(row.getValue<Timestamp>('startedAt').toDate())}
             </span>
           </div>
@@ -120,10 +119,8 @@ export function getColumns(
           ? formatDateTime(row.getValue<Timestamp>('completedAt').toDate())
           : undefined;
         return (
-          <div className="flex space-x-2">
-            <span className="max-w-[500px] truncate font-medium">
-              {completedAt}
-            </span>
+          <div>
+            <span className="font-medium">{completedAt}</span>
           </div>
         );
       },

diff --git a/frontend/apps/web/app/[account]/runs/components/RunsTable.tsx b/frontend/apps/web/app/[account]/runs/components/RunsTable.tsx
@@ -6,6 +6,7 @@ import {
   onJobRunsPaused,
   useGetJobRuns,
 } from '@/libs/hooks/useGetJobRuns';
+import { useGetJobs } from '@/libs/hooks/useGetJobs';
 import { ReactElement, useMemo, useState } from 'react';
 import { getColumns } from './JobRunsTable/columns';
 import { DataTable } from './JobRunsTable/data-table';
@@ -33,6 +34,16 @@ export default function RunsTable(props: RunsTableProps): ReactElement {
     }
   );
 
+  const { data: jobsData, mutate: jobsMutate } = useGetJobs(account?.id ?? '');
+
+  const jobNameMap =
+    jobsData?.jobs.reduce(
+      (prev, curr) => {
+        return { ...prev, [curr.id]: curr.name };
+      },
+      {} as Record<string, string>
+    ) || {};
+
   const columns = useMemo(
     () =>
       getColumns({
@@ -41,8 +52,9 @@ export default function RunsTable(props: RunsTableProps): ReactElement {
         },
         accountId: account?.id ?? '',
         accountName: account?.name ?? '',
+        jobNameMap: jobNameMap,
       }),
-    [account?.id ?? '', account?.name ?? '']
+    [account?.id ?? '', account?.name ?? '', jobNameMap]
   );
 
   if (isLoading) {
@@ -53,6 +65,7 @@ export default function RunsTable(props: RunsTableProps): ReactElement {
 
   function refreshClick(): void {
     mutate();
+    jobsMutate();
   }
 
   return (