rerender only the schedules which toggled

opendatahub-io · Sep 24, 2024 · 0b6b1c6 · 0b6b1c6
1 parent a509cf4
commit 0b6b1c6
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/.../src/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTable.tsx b/.../src/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTable.tsx
@@ -18,6 +18,7 @@ import PipelineRecurringRunTableToolbar from './PipelineRecurringRunTableToolbar
 
 type PipelineRecurringRunTableProps = {
   recurringRuns: PipelineRecurringRunKFv2[];
+  refreshSingleRecurringRun: (recurringRun: PipelineRecurringRunKFv2) => void;
   loading?: boolean;
   totalSize: number;
   page: number;
@@ -33,6 +34,7 @@ type PipelineRecurringRunTableProps = {
 
 const PipelineRecurringRunTable: React.FC<PipelineRecurringRunTableProps> = ({
   recurringRuns,
+  refreshSingleRecurringRun,
   loading,
   totalSize,
   page,
@@ -122,6 +124,7 @@ const PipelineRecurringRunTable: React.FC<PipelineRecurringRunTableProps> = ({
         rowRenderer={(recurringRun) => (
           <PipelineRecurringRunTableRow
             key={recurringRun.recurring_run_id}
+            refreshSingleRecurringRun={refreshSingleRecurringRun}
             isChecked={isSelected(recurringRun.recurring_run_id)}
             onToggleCheck={() => toggleSelection(recurringRun.recurring_run_id)}
             onDelete={() => setDeleteResources([recurringRun])}

diff --git a/...c/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTableRow.tsx b/...c/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTableRow.tsx
@@ -19,20 +19,22 @@ import useExperimentById from '~/concepts/pipelines/apiHooks/useExperimentById';
 
 type PipelineRecurringRunTableRowProps = {
   isChecked: boolean;
+  refreshSingleRecurringRun: (recurringRun: PipelineRecurringRunKFv2) => void;
   onToggleCheck: () => void;
   onDelete: () => void;
   recurringRun: PipelineRecurringRunKFv2;
 };
 
 const PipelineRecurringRunTableRow: React.FC<PipelineRecurringRunTableRowProps> = ({
   isChecked,
+  refreshSingleRecurringRun,
   onToggleCheck,
   onDelete,
   recurringRun,
 }) => {
   const navigate = useNavigate();
   const { experimentId, pipelineId, pipelineVersionId } = useParams();
-  const { namespace, api, refreshAllAPI } = usePipelinesAPI();
+  const { namespace, api } = usePipelinesAPI();
   const { version, loaded, error } = usePipelineRunVersionInfo(recurringRun);
   const isExperimentsAvailable = useIsAreaAvailable(SupportedArea.PIPELINE_EXPERIMENTS).status;
   const isExperimentsContext = isExperimentsAvailable && experimentId;
@@ -98,7 +100,7 @@ const PipelineRecurringRunTableRow: React.FC<PipelineRecurringRunTableRowProps>
           onToggle={(checked) =>
             api
               .updatePipelineRecurringRun({}, recurringRun.recurring_run_id, checked)
-              .then(refreshAllAPI)
+              .then(() => refreshSingleRecurringRun(recurringRun))
           }
         />
       </Td>

diff --git a/frontend/src/pages/pipelines/global/runs/ScheduledRuns.tsx b/frontend/src/pages/pipelines/global/runs/ScheduledRuns.tsx
@@ -16,13 +16,32 @@ import CreateScheduleButton from '~/pages/pipelines/global/runs/CreateScheduleBu
 import { useContextExperimentArchived as useIsExperimentArchived } from '~/pages/pipelines/global/experiments/ExperimentContext';
 import { usePipelineRecurringRunsTable } from '~/concepts/pipelines/content/tables/pipelineRecurringRun/usePipelineRecurringRunTable';
 import PipelineRecurringRunTable from '~/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTable';
+import { PipelineRecurringRunKFv2 } from '~/concepts/pipelines/kfTypes';
+import { usePipelinesAPI } from '~/concepts/pipelines/context';
 
 const ScheduledRuns: React.FC = () => {
   const { experimentId, pipelineVersionId } = useParams();
   const [[{ items: recurringRuns, totalSize }, loaded, error], { initialLoaded, ...tableProps }] =
     usePipelineRecurringRunsTable({ experimentId, pipelineVersionId });
   const isExperimentArchived = useIsExperimentArchived();
 
+  const { api } = usePipelinesAPI();
+  const [updatedRecurringRuns, setUpdatedRecurringRuns] = React.useState<
+    PipelineRecurringRunKFv2[]
+  >([]);
+
+  React.useEffect(() => setUpdatedRecurringRuns(recurringRuns), [recurringRuns]);
+
+  const refreshSingleRecurringRun = (recurringRun: PipelineRecurringRunKFv2) => {
+    api.getPipelineRecurringRun({}, recurringRun.recurring_run_id).then((newState) => {
+      setUpdatedRecurringRuns((prevState) =>
+        prevState.map((run) =>
+          run.recurring_run_id === recurringRun.recurring_run_id ? newState : run,
+        ),
+      );
+    });
+  };
+
   if (error) {
     return (
       <Bullseye>
@@ -73,7 +92,8 @@ const ScheduledRuns: React.FC = () => {
 
   return (
     <PipelineRecurringRunTable
-      recurringRuns={recurringRuns}
+      refreshSingleRecurringRun={refreshSingleRecurringRun}
+      recurringRuns={updatedRecurringRuns}
       loading={!loaded}
       totalSize={totalSize}
       {...tableProps}