fix(frontend): reduce list run latency

Signed-off-by: droctothorpe <mythicalsunlight@gmail.com> Co-authored-by: quinnovator <jack@jq.codes> Co-authored-by: tarat44 <32471142+tarat44@users.noreply.github.com>
kubeflow · May 8, 2024 · 709e88b · 709e88b
1 parent 804ee00
commit 709e88b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 52 deletions.
diff --git a/frontend/src/pages/RecurringRunList.tsx b/frontend/src/pages/RecurringRunList.tsx
@@ -269,11 +269,23 @@ class RecurringRunList extends React.PureComponent<RecurringRunListProps, Recurr
   private async _setColumns(
     displayRecurringRuns: DisplayRecurringRun[],
   ): Promise<DisplayRecurringRun[]> {
+    const {experiments} = await Apis.experimentServiceApiV2.listExperiments()
+
     return Promise.all(
-      displayRecurringRuns.map(async displayRecurringRun => {
+      displayRecurringRuns.map(displayRecurringRun => {
         if (!this.props.hideExperimentColumn) {
-          await this._getAndSetExperimentNames(displayRecurringRun);
+          const experimentId = displayRecurringRun.recurringRun.experiment_id;
+
+          if (experimentId) {
+            const displayName = experiments?.find(e => e.experiment_id === displayRecurringRun.recurringRun.experiment_id)?.display_name || "-";
+
+            displayRecurringRun.experiment = {
+              displayName: displayName,
+              id: experimentId,
+            };
+          }
         }
+
         return displayRecurringRun;
       }),
     );
@@ -301,31 +313,6 @@ class RecurringRunList extends React.PureComponent<RecurringRunListProps, Recurr
       }),
     );
   }
-
-  /**
-   * For the given DisplayRecurringRun, get its recurring run and retrieve the Experiment ID
-   * if it has one, then use that Experiment ID to fetch its associated Experiment and attach
-   * that Experiment's name to the DisplayRecurringRun. If the recurring run has no Experiment ID,
-   * then the corresponding DisplayRecurringRun will show '-'.
-   */
-  private async _getAndSetExperimentNames(displayRecurringRun: DisplayRecurringRun): Promise<void> {
-    const experimentId = displayRecurringRun.recurringRun.experiment_id;
-    if (experimentId) {
-      let experimentName;
-      try {
-        const experiment = await Apis.experimentServiceApiV2.getExperiment(experimentId);
-        experimentName = experiment.display_name || '';
-      } catch (err) {
-        displayRecurringRun.error =
-          'Failed to get associated experiment: ' + (await errorToMessage(err));
-        return;
-      }
-      displayRecurringRun.experiment = {
-        displayName: experimentName,
-        id: experimentId,
-      };
-    }
-  }
 }
 
 export default RecurringRunList;
diff --git a/frontend/src/pages/RunList.tsx b/frontend/src/pages/RunList.tsx
@@ -405,14 +405,25 @@ class RunList extends React.PureComponent<RunListProps, RunListState> {
   }
 
   private async _setColumns(displayRuns: DisplayRun[]): Promise<DisplayRun[]> {
+    const {experiments} = await Apis.experimentServiceApiV2.listExperiments()
+
     return Promise.all(
       displayRuns.map(async displayRun => {
         this._setRecurringRun(displayRun);
 
         await this._getAndSetPipelineVersionNames(displayRun);
 
         if (!this.props.hideExperimentColumn) {
-          await this._getAndSetExperimentNames(displayRun);
+          const experimentId = displayRun.run.experiment_id;
+
+          if (experimentId) {
+            const displayName = experiments?.find(e => e.experiment_id === displayRun.run.experiment_id)?.display_name || "-";
+
+            displayRun.experiment = {
+              displayName: displayName,
+              id: experimentId,
+            };
+          }
         }
         return displayRun;
       }),
@@ -478,30 +489,6 @@ class RunList extends React.PureComponent<RunListProps, RunListState> {
         : { usePlaceholder: true };
     }
   }
-
-  /**
-   * For the given DisplayRun, get its ApiRun and retrieve that ApiRun's Experiment ID if it has
-   * one, then use that Experiment ID to fetch its associated Experiment and attach that
-   * Experiment's name to the DisplayRun. If the ApiRun has no Experiment ID, then the corresponding
-   * DisplayRun will show '-'.
-   */
-  private async _getAndSetExperimentNames(displayRun: DisplayRun): Promise<void> {
-    const experimentId = displayRun.run.experiment_id;
-    if (experimentId) {
-      let experimentName;
-      try {
-        const experiment = await Apis.experimentServiceApiV2.getExperiment(experimentId);
-        experimentName = experiment.display_name || '';
-      } catch (err) {
-        displayRun.error = 'Failed to get associated experiment: ' + (await errorToMessage(err));
-        return;
-      }
-      displayRun.experiment = {
-        displayName: experimentName,
-        id: experimentId,
-      };
-    }
-  }
 }
 
 export default RunList;