Improve performance of showing partial Pipelines and runs

opendatahub-io · Jul 11, 2023 · 9093881 · 9093881
1 parent 3843c82
commit 9093881
Show file tree

Hide file tree

Showing 10 changed files with 34 additions and 21 deletions.
diff --git a/frontend/src/api/pipelines/custom.ts b/frontend/src/api/pipelines/custom.ts
@@ -64,7 +64,13 @@ export const listExperiments: ListExperimentsAPI = (hostPath) => (opts) =>
 export const listPipelines: ListPipelinesAPI = (hostPath) => (opts, count) =>
   handlePipelineFailures(
     // eslint-disable-next-line camelcase
-    proxyGET(hostPath, '/apis/v1beta1/pipelines', { page_size: count }, opts),
+    proxyGET(
+      hostPath,
+      '/apis/v1beta1/pipelines',
+      // eslint-disable-next-line camelcase
+      { page_size: count, sort_by: 'created_at desc' },
+      opts,
+    ),
   );
 
 export const listPipelineRuns: ListPipelinesRunAPI = (hostPath) => (opts) =>
@@ -77,14 +83,18 @@ export const listPipelineRunJobs: ListPipelinesRunJobAPI = (hostPath) => (opts)
   handlePipelineFailures(proxyGET(hostPath, '/apis/v1beta1/jobs', {}, opts));
 
 export const listPipelineRunsByPipeline: ListPipelineRunsByPipelineAPI =
-  (hostPath) => (opts, pipelineId) =>
+  (hostPath) => (opts, pipelineId, count) =>
     handlePipelineFailures(
       proxyGET(
         hostPath,
         '/apis/v1beta1/runs',
         {
           'resource_reference_key.id': pipelineId,
           'resource_reference_key.type': ResourceTypeKF.PIPELINE_VERSION,
+          // eslint-disable-next-line camelcase
+          page_size: count,
+          // eslint-disable-next-line camelcase
+          sort_by: 'created_at desc',
         },
         opts,
       ),

diff --git a/frontend/src/concepts/pipelines/apiHooks/usePipelineRunsForPipeline.ts b/frontend/src/concepts/pipelines/apiHooks/usePipelineRunsForPipeline.ts
@@ -4,13 +4,14 @@ import useFetchState, { FetchStateCallbackPromise } from '~/utilities/useFetchSt
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import { POLL_INTERVAL } from '~/utilities/const';
 
-const usePipelineRunsForPipeline = (pipeline: PipelineKF) => {
+const usePipelineRunsForPipeline = (pipeline: PipelineKF, limit: number) => {
   const { api } = usePipelinesAPI();
 
   const pipelineId = pipeline.id;
   const call = React.useCallback<FetchStateCallbackPromise<PipelineRunKF[]>>(
-    (opts) => api.listPipelineRunsByPipeline(opts, pipelineId).then(({ runs }) => runs ?? []),
-    [api, pipelineId],
+    (opts) =>
+      api.listPipelineRunsByPipeline(opts, pipelineId, limit).then(({ runs }) => runs ?? []),
+    [api, pipelineId, limit],
   );
 
   return useFetchState(call, [], { refreshRate: POLL_INTERVAL });

diff --git a/frontend/src/concepts/pipelines/const.ts b/frontend/src/concepts/pipelines/const.ts
@@ -1,2 +1,4 @@
 export const PIPELINE_ROUTE_NAME = 'ds-pipeline-pipelines-definition';
 export const PIPELINE_DEFINITION_NAME = 'pipelines-definition';
+export const TABLE_CONTENT_LIMIT = 5;
+export const LIMIT_MAX_ITEM_COUNT = TABLE_CONTENT_LIMIT + 1;
diff --git a/frontend/src/concepts/pipelines/content/tables/pipeline/PipelinesTable.tsx b/frontend/src/concepts/pipelines/content/tables/pipeline/PipelinesTable.tsx
@@ -29,10 +29,10 @@ const PipelinesTable: React.FC<PipelinesTableProps> = ({
   return (
     <>
       <Table
-        {...tableProps}
         data={pipelines}
+        enablePagination
+        {...tableProps}
         columns={pipelineColumns}
-        defaultSortColumn={1}
         variant={TableVariant.compact}
         truncateRenderingAt={contentLimit}
         rowRenderer={(pipeline, rowIndex) => (

diff --git a/frontend/src/concepts/pipelines/content/tables/pipeline/PipelinesTableExpandedRow.tsx b/frontend/src/concepts/pipelines/content/tables/pipeline/PipelinesTableExpandedRow.tsx
@@ -13,6 +13,7 @@ import { PipelineKF, PipelineRunKF } from '~/concepts/pipelines/kfTypes';
 import IndentSection from '~/pages/projects/components/IndentSection';
 import { FetchState } from '~/utilities/useFetchState';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
+import { TABLE_CONTENT_LIMIT } from '~/concepts/pipelines/const';
 import { RenderContentList, combineRunsByColumn } from './expandedRowRenderUtils';
 
 type PipelinesTableExpandedRowProps = {
@@ -75,7 +76,7 @@ const PipelinesTableExpandedRow: React.FC<PipelinesTableExpandedRowProps> = ({
     );
   }
 
-  const renderContentByColumn = combineRunsByColumn(runs, 5);
+  const renderContentByColumn = combineRunsByColumn(runs, TABLE_CONTENT_LIMIT);
 
   return (
     <Tbody isExpanded={isExpanded}>
@@ -92,7 +93,9 @@ const PipelinesTableExpandedRow: React.FC<PipelinesTableExpandedRowProps> = ({
                 }
                 items={[
                   ...renderContentByColumn.names,
-                  runs.length > 5 && <Link to={`/pipelineRuns/${namespace}`}>View all runs</Link>,
+                  runs.length > TABLE_CONTENT_LIMIT && (
+                    <Link to={`/pipelineRuns/${namespace}`}>View all runs</Link>
+                  ),
                 ]}
               />
             </IndentSection>

diff --git a/frontend/src/concepts/pipelines/content/tables/pipeline/PipelinesTableRow.tsx b/frontend/src/concepts/pipelines/content/tables/pipeline/PipelinesTableRow.tsx
@@ -16,6 +16,7 @@ import {
   RunNameForPipeline,
   RunStatus,
 } from '~/concepts/pipelines/content/tables/renderUtils';
+import { LIMIT_MAX_ITEM_COUNT } from '~/concepts/pipelines/const';
 
 type PipelinesTableRowProps = {
   pipeline: PipelineKF;
@@ -32,7 +33,7 @@ const PipelinesTableRow: React.FC<PipelinesTableRowProps> = ({
 }) => {
   const navigate = useNavigate();
   const { namespace } = usePipelinesAPI();
-  const runsFetchState = usePipelineRunsForPipeline(pipeline);
+  const runsFetchState = usePipelineRunsForPipeline(pipeline, LIMIT_MAX_ITEM_COUNT);
   const [isExpanded, setExpanded] = React.useState(false);
 
   const createdDate = new Date(pipeline.created_at);

diff --git a/frontend/src/concepts/pipelines/content/tables/pipeline/expandedRowRenderUtils.tsx b/frontend/src/concepts/pipelines/content/tables/pipeline/expandedRowRenderUtils.tsx
@@ -7,7 +7,6 @@ import {
   RunNameForPipeline,
   RunStatus,
 } from '~/concepts/pipelines/content/tables/renderUtils';
-import { sortRunsByCreated } from '~/concepts/pipelines/content/tables/utils';
 
 type RenderContentListProps = {
   firstItem?: React.ReactNode;
@@ -30,7 +29,7 @@ type RenderContentByColumn = {
 };
 
 export const combineRunsByColumn = (runs: PipelineRunKF[], sliceCount?: number) =>
-  sortRunsByCreated(runs).reduce<RenderContentByColumn>(
+  runs.reduce<RenderContentByColumn>(
     (acc, run, i) => {
       if (sliceCount && i >= sliceCount) {
         return acc;

diff --git a/frontend/src/concepts/pipelines/content/tables/utils.ts b/frontend/src/concepts/pipelines/content/tables/utils.ts
@@ -8,10 +8,7 @@ import {
 } from '~/concepts/pipelines/kfTypes';
 import { DateRangeString, splitDateRange } from '~/components/dateRange/utils';
 
-export const sortRunsByCreated = (runs: PipelineRunKF[]) =>
-  [...runs].sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
-
-export const getLastRun = (runs: PipelineRunKF[]) => sortRunsByCreated(runs)[0];
+export const getLastRun = (runs: PipelineRunKF[]) => runs[0];
 
 export const getRunDuration = (run: PipelineRunKF): number => {
   const finishedDate = new Date(run.finished_at);

diff --git a/frontend/src/concepts/pipelines/types.ts b/frontend/src/concepts/pipelines/types.ts
@@ -49,6 +49,7 @@ export type ListPipelineRunJobs = (opts: K8sAPIOptions) => Promise<ListPipelineR
 export type ListPipelineRunsByPipeline = (
   opts: K8sAPIOptions,
   pipelineId: string,
+  limit?: number,
 ) => Promise<ListPipelineRunsResourceKF>;
 export type ListPipelineTemplates = (
   opts: K8sAPIOptions,

diff --git a/frontend/src/pages/projects/screens/detail/pipelines/PipelinesList.tsx b/frontend/src/pages/projects/screens/detail/pipelines/PipelinesList.tsx
@@ -7,12 +7,11 @@ import usePipelines from '~/concepts/pipelines/apiHooks/usePipelines';
 import IndentSection from '~/pages/projects/components/IndentSection';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import EmptyStateErrorMessage from '~/components/EmptyStateErrorMessage';
-
-const CONTENT_LIMIT = 5;
+import { TABLE_CONTENT_LIMIT, LIMIT_MAX_ITEM_COUNT } from '~/concepts/pipelines/const';
 
 const PipelinesList: React.FC = () => {
   const { namespace } = usePipelinesAPI();
-  const [pipelines, loaded, loadError, refresh] = usePipelines();
+  const [pipelines, loaded, loadError, refresh] = usePipelines(LIMIT_MAX_ITEM_COUNT);
   const navigate = useNavigate();
 
   if (loadError) {
@@ -40,12 +39,12 @@ const PipelinesList: React.FC = () => {
       <StackItem>
         <PipelinesTable
           pipelines={pipelines}
-          contentLimit={CONTENT_LIMIT}
+          contentLimit={TABLE_CONTENT_LIMIT}
           pipelineDetailsPath={(namespace, id) => `/projects/${namespace}/pipeline/view/${id}`}
           refreshPipelines={refresh}
         />
       </StackItem>
-      {pipelines.length > CONTENT_LIMIT && (
+      {pipelines.length > TABLE_CONTENT_LIMIT && (
         <StackItem>
           <IndentSection>
             <Button variant="link" onClick={() => navigate(`/pipelines/${namespace}`)}>