rerender only the schedules which toggled (#3244)

opendatahub-io · Sep 26, 2024 · 063d974 · 063d974
1 parent 027278b
commit 063d974
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 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[];
+  refresh: () => void;
   loading?: boolean;
   totalSize: number;
   page: number;
@@ -33,6 +34,7 @@ type PipelineRecurringRunTableProps = {
 
 const PipelineRecurringRunTable: React.FC<PipelineRecurringRunTableProps> = ({
   recurringRuns,
+  refresh,
   loading,
   totalSize,
   page,
@@ -122,6 +124,7 @@ const PipelineRecurringRunTable: React.FC<PipelineRecurringRunTableProps> = ({
         rowRenderer={(recurringRun) => (
           <PipelineRecurringRunTableRow
             key={recurringRun.recurring_run_id}
+            refresh={refresh}
             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;
+  refresh: () => void;
   onToggleCheck: () => void;
   onDelete: () => void;
   recurringRun: PipelineRecurringRunKFv2;
 };
 
 const PipelineRecurringRunTableRow: React.FC<PipelineRecurringRunTableRowProps> = ({
   isChecked,
+  refresh,
   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(() => refresh())
           }
         />
       </Td>

diff --git a/frontend/src/pages/pipelines/global/runs/ScheduledRuns.tsx b/frontend/src/pages/pipelines/global/runs/ScheduledRuns.tsx
@@ -19,8 +19,10 @@ import PipelineRecurringRunTable from '~/concepts/pipelines/content/tables/pipel
 
 const ScheduledRuns: React.FC = () => {
   const { experimentId, pipelineVersionId } = useParams();
-  const [[{ items: recurringRuns, totalSize }, loaded, error], { initialLoaded, ...tableProps }] =
-    usePipelineRecurringRunsTable({ experimentId, pipelineVersionId });
+  const [
+    [{ items: recurringRuns, totalSize }, loaded, error, refresh],
+    { initialLoaded, ...tableProps },
+  ] = usePipelineRecurringRunsTable({ experimentId, pipelineVersionId });
   const isExperimentArchived = useIsExperimentArchived();
 
   if (error) {
@@ -73,6 +75,7 @@ const ScheduledRuns: React.FC = () => {
 
   return (
     <PipelineRecurringRunTable
+      refresh={refresh}
       recurringRuns={recurringRuns}
       loading={!loaded}
       totalSize={totalSize}