rerender only the schedule which got toggled #3244
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #3244 +/- ##
==========================================
- Coverage 85.07% 84.91% -0.17%
==========================================
Files 1292 1299 +7
Lines 28814 29006 +192
Branches 7749 7807 +58
==========================================
+ Hits 24514 24629 +115
- Misses 4300 4377 +77
... and 67 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
|
Ok i think this is a bit more complicated then it should be. The tables data fetching hook can return a refresh function which only refreshes the recurring run data and not all data. and it will still not force update the whole thing this is the old (in main now) old.movThis is the new new.movdiff --git a/frontend/src/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTable.tsx b/frontend/src/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTable.tsx
index d8fc9e75c..50036f023 100644
--- a/frontend/src/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTable.tsx
+++ b/frontend/src/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTable.tsx
@@ -18,7 +18,7 @@ import PipelineRecurringRunTableToolbar from './PipelineRecurringRunTableToolbar
type PipelineRecurringRunTableProps = {
recurringRuns: PipelineRecurringRunKFv2[];
- refreshSingleRecurringRun: (recurringRun: PipelineRecurringRunKFv2) => void;
+ refresh: () => void;
loading?: boolean;
totalSize: number;
page: number;
@@ -34,7 +34,7 @@ type PipelineRecurringRunTableProps = {
const PipelineRecurringRunTable: React.FC<PipelineRecurringRunTableProps> = ({
recurringRuns,
- refreshSingleRecurringRun,
+ refresh,
loading,
totalSize,
page,
@@ -124,7 +124,7 @@ const PipelineRecurringRunTable: React.FC<PipelineRecurringRunTableProps> = ({
rowRenderer={(recurringRun) => (
<PipelineRecurringRunTableRow
key={recurringRun.recurring_run_id}
- refreshSingleRecurringRun={refreshSingleRecurringRun}
+ refresh={refresh}
isChecked={isSelected(recurringRun.recurring_run_id)}
onToggleCheck={() => toggleSelection(recurringRun.recurring_run_id)}
onDelete={() => setDeleteResources([recurringRun])}
diff --git a/frontend/src/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTableRow.tsx b/frontend/src/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTableRow.tsx
index 1787dbecc..c08e61c50 100644
--- a/frontend/src/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTableRow.tsx
+++ b/frontend/src/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTableRow.tsx
@@ -19,7 +19,7 @@ import useExperimentById from '~/concepts/pipelines/apiHooks/useExperimentById';
type PipelineRecurringRunTableRowProps = {
isChecked: boolean;
- refreshSingleRecurringRun: (recurringRun: PipelineRecurringRunKFv2) => void;
+ refresh: () => void;
onToggleCheck: () => void;
onDelete: () => void;
recurringRun: PipelineRecurringRunKFv2;
@@ -27,7 +27,7 @@ type PipelineRecurringRunTableRowProps = {
const PipelineRecurringRunTableRow: React.FC<PipelineRecurringRunTableRowProps> = ({
isChecked,
- refreshSingleRecurringRun,
+ refresh,
onToggleCheck,
onDelete,
recurringRun,
@@ -100,7 +100,7 @@ const PipelineRecurringRunTableRow: React.FC<PipelineRecurringRunTableRowProps>
onToggle={(checked) =>
api
.updatePipelineRecurringRun({}, recurringRun.recurring_run_id, checked)
- .then(() => refreshSingleRecurringRun(recurringRun))
+ .then(() => refresh())
}
/>
</Td>
diff --git a/frontend/src/pages/pipelines/global/runs/ScheduledRuns.tsx b/frontend/src/pages/pipelines/global/runs/ScheduledRuns.tsx
index 2639db627..350416ae4 100644
--- a/frontend/src/pages/pipelines/global/runs/ScheduledRuns.tsx
+++ b/frontend/src/pages/pipelines/global/runs/ScheduledRuns.tsx
@@ -16,32 +16,15 @@ 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 [
+ [{ items: recurringRuns, totalSize }, loaded, error, refresh],
+ { 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>
@@ -92,8 +75,8 @@ const ScheduledRuns: React.FC = () => {
return (
<PipelineRecurringRunTable
- refreshSingleRecurringRun={refreshSingleRecurringRun}
- recurringRuns={updatedRecurringRuns}
+ refresh={refresh}
+ recurringRuns={recurringRuns}
loading={!loaded}
totalSize={totalSize}
{...tableProps} |
|
@Gkrumbach07, I did notice the |
The big issue was that it was re fetching the whole api and not just recurring runs. Just fetching recurring runs is one call and not that big of a deal. Optimizing it further to instead fetching just the the changed run is still just one call so there is not any gain. Plus the added complexity of having have another state variable and needing to search though it and replace the singular item in the list. I think we should keep it simple and use the refresh from the table hook |
pnaik1
force-pushed
the
rhoaieng-11858
branch
from
0b6b1c6
to
78872dc
Compare
|
Made the changes accordingly |
|
/hold |
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: DaoDaoNoCode, Gkrumbach07 The full list of commands accepted by this bot can be found here. The pull request process is described here
Needs approval from an approver in each of these files:
Approvers can indicate their approval by writing |
|
/unhold |
https://issues.redhat.com/browse/RHOAIENG-11858
Description
ggle one of the schedules to enable or disable it, and that should only trigger and re-render of that particular schedule
How Has This Been Tested?
Check if It will only trigger re-render of the current row and re-fetch the current schedule
Test Impact
N/A
Request review criteria:
Self checklist (all need to be checked):
If you have UI changes:
After the PR is posted & before it merges:
main