Allow experiments table to sort by last run started

opendatahub-io · Jun 7, 2024 · 51ca864 · 51ca864
1 parent 23ae524
commit 51ca864
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/frontend/src/concepts/pipelines/content/tables/columns.ts b/frontend/src/concepts/pipelines/content/tables/columns.ts
@@ -76,6 +76,11 @@ export const experimentColumns: SortableData<ExperimentKFv2>[] = [
     field: 'created_at',
     sortable: true,
   },
+  {
+    label: 'Last run started',
+    field: 'last_run_started',
+    sortable: (a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime(),
+  },
   {
     label: 'Last 5 runs',
     field: 'last_5_runs',

diff --git a/frontend/src/concepts/pipelines/content/tables/experiment/ExperimentTableRow.tsx b/frontend/src/concepts/pipelines/content/tables/experiment/ExperimentTableRow.tsx
@@ -7,7 +7,7 @@ import { ExperimentKFv2, StorageStateKF } from '~/concepts/pipelines/kfTypes';
 import { CheckboxTd } from '~/components/table';
 import { experimentRunsRoute } from '~/routes';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
-import { ExperimentCreated, LastExperimentRuns } from './renderUtils';
+import { ExperimentCreated, LastExperimentRuns, LastExperimentRunsStarted } from './renderUtils';
 
 type ExperimentTableRowProps = {
   isChecked: boolean;
@@ -43,6 +43,9 @@ const ExperimentTableRow: React.FC<ExperimentTableRowProps> = ({
       <Td dataLabel="Created">
         <ExperimentCreated experiment={experiment} />
       </Td>
+      <Td dataLabel="Last run started">
+        <LastExperimentRunsStarted experiment={experiment} />
+      </Td>
       <Td dataLabel="Last 5 runs">
         <LastExperimentRuns experiment={experiment} />
       </Td>

diff --git a/frontend/src/concepts/pipelines/content/tables/experiment/renderUtils.tsx b/frontend/src/concepts/pipelines/content/tables/experiment/renderUtils.tsx
@@ -12,6 +12,20 @@ export const ExperimentCreated: ExperimentUtil = ({ experiment }) => {
   return <PipelinesTableRowTime date={createdDate} />;
 };
 
+export const LastExperimentRunsStarted: ExperimentUtil = ({ experiment }) => {
+  const [runs] = usePipelineRunsByExperiment(experiment.experiment_id, {
+    sortDirection: 'desc',
+    sortField: 'created_at',
+  });
+
+  if (runs.items.length === 0) {
+    return <>-</>;
+  }
+
+  const lastRunStarted = new Date(runs.items[0].created_at);
+  return <PipelinesTableRowTime date={lastRunStarted} />;
+};
+
 export const LastExperimentRuns: ExperimentUtil = ({ experiment }) => {
   const [runs] = usePipelineRunsByExperiment(experiment.experiment_id, {
     sortDirection: 'desc',