Update global pipelines page and link it to the global pipeline runs …

…page
opendatahub-io · Nov 25, 2024 · b001727 · b001727
1 parent f0b961c
commit b001727
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 28 deletions.
diff --git a/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelinesTable.ts b/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelinesTable.ts
@@ -34,6 +34,10 @@ class PipelineVersionsTableRow extends TableRow {
   findPipelineVersionLink() {
     return this.find().findByTestId(`table-row-title`).find('a');
   }
+
+  findPipelineVersionViewRunLink() {
+    return this.find().findByTestId('runs-route-link');
+  }
 }
 
 export enum PipelineSort {

diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/pipelinesList.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/pipelinesList.cy.ts
@@ -220,6 +220,44 @@ describe('PipelinesList', () => {
       `/pipelines/${projectName}/${initialMockPipeline.pipeline_id}/${initialMockPipelineVersion.pipeline_version_id}/schedules/create`,
     );
   });
+
+  it('navigates to "Runs" page from pipeline version row', () => {
+    initIntercepts();
+    projectDetails.visitSection(projectName, 'pipelines-projects');
+
+    pipelinesTable.find();
+    const pipelineRow = pipelinesTable.getRowById(initialMockPipeline.pipeline_id);
+    pipelineRow.findExpandButton().click();
+
+    pipelineRow
+      .getPipelineVersionRowById(initialMockPipelineVersion.pipeline_version_id)
+      .findPipelineVersionViewRunLink()
+      .click();
+
+    cy.url().should(
+      'include',
+      `/pipelineRuns/${projectName}/runs/active?pipeline_version=${initialMockPipelineVersion.pipeline_id}`,
+    );
+  });
+
+  it('navigates to "Schedules" tab on run page from pipeline version row', () => {
+    initIntercepts();
+    projectDetails.visitSection(projectName, 'pipelines-projects');
+
+    pipelinesTable.find();
+    const pipelineRow = pipelinesTable.getRowById(initialMockPipeline.pipeline_id);
+    pipelineRow.findExpandButton().click();
+
+    pipelineRow
+      .getPipelineVersionRowById(initialMockPipelineVersion.pipeline_version_id)
+      .findKebabAction('View schedules')
+      .click();
+
+    cy.url().should(
+      'include',
+      `/pipelineRuns/${projectName}/schedules?pipeline_version=${initialMockPipelineVersion.pipeline_id}`,
+    );
+  });
 });
 
 const pipelineTableSetup = () => {

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetailsActions.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetailsActions.tsx
@@ -7,11 +7,11 @@ import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import PipelineVersionImportModal from '~/concepts/pipelines/content/import/PipelineVersionImportModal';
 import { PipelineKF, PipelineVersionKF } from '~/concepts/pipelines/kfTypes';
 import {
+  globalPipelineRecurringRunsVersionRoute,
+  globalPipelineRunsVersionRoute,
   pipelineVersionCreateRecurringRunRoute,
   pipelineVersionCreateRunRoute,
   pipelineVersionDetailsRoute,
-  pipelineVersionRecurringRunsRoute,
-  pipelineVersionRunsRoute,
 } from '~/routes';
 import { getDashboardMainContainer } from '~/utilities/utils';
 import {
@@ -109,14 +109,10 @@ const PipelineDetailsActions: React.FC<PipelineDetailsActionsProps> = ({
                     key="view-runs"
                     onClick={() =>
                       navigate(
-                        pipelineVersionRunsRoute(
+                        globalPipelineRunsVersionRoute(
                           namespace,
-                          pipeline.pipeline_id,
                           pipelineVersion.pipeline_version_id,
                         ),
-                        {
-                          state: { lastVersion: pipelineVersion },
-                        },
                       )
                     }
                   >
@@ -126,9 +122,8 @@ const PipelineDetailsActions: React.FC<PipelineDetailsActionsProps> = ({
                     key="view-schedules"
                     onClick={() =>
                       navigate(
-                        pipelineVersionRecurringRunsRoute(
+                        globalPipelineRecurringRunsVersionRoute(
                           namespace,
-                          pipeline.pipeline_id,
                           pipelineVersion.pipeline_version_id,
                         ),
                       )

diff --git a/frontend/src/concepts/pipelines/content/tables/columns.ts b/frontend/src/concepts/pipelines/content/tables/columns.ts
@@ -56,6 +56,12 @@ export const pipelineVersionColumns: SortableData<PipelineVersionKF>[] = [
     sortable: (a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime(),
     width: 20,
   },
+  {
+    label: '',
+    sortable: false,
+    field: 'view_runs',
+    width: 20,
+  },
   kebabTableColumn(),
 ];
 

diff --git a/frontend/src/concepts/pipelines/content/tables/pipelineVersion/PipelineVersionTableRow.tsx b/frontend/src/concepts/pipelines/content/tables/pipelineVersion/PipelineVersionTableRow.tsx
@@ -1,16 +1,17 @@
 import * as React from 'react';
 import { ActionsColumn, TableText, Td, Tr } from '@patternfly/react-table';
 import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@patternfly/react-core';
 import { PipelineKF, PipelineVersionKF } from '~/concepts/pipelines/kfTypes';
 import { CheckboxTd, TableRowTitleDescription } from '~/components/table';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import PipelinesTableRowTime from '~/concepts/pipelines/content/tables/PipelinesTableRowTime';
 import {
+  globalPipelineRecurringRunsVersionRoute,
+  globalPipelineRunsVersionRoute,
   pipelineVersionCreateRecurringRunRoute,
   pipelineVersionCreateRunRoute,
   pipelineVersionDetailsRoute,
-  pipelineVersionRecurringRunsRoute,
-  pipelineVersionRunsRoute,
 } from '~/routes';
 import { isArgoWorkflow } from '~/concepts/pipelines/content/tables/utils';
 import {
@@ -70,6 +71,19 @@ const PipelineVersionTableRow: React.FC<PipelineVersionTableRowProps> = ({
       <Td>
         <PipelinesTableRowTime date={createdDate} />
       </Td>
+      <Td>
+        <Button
+          component="a"
+          isInline
+          data-testid="runs-route-link"
+          variant="link"
+          onClick={() =>
+            navigate(globalPipelineRunsVersionRoute(namespace, version.pipeline_version_id))
+          }
+        >
+          View runs
+        </Button>
+      </Td>
       <Td isActionCell>
         <ActionsColumn
           items={[
@@ -108,27 +122,11 @@ const PipelineVersionTableRow: React.FC<PipelineVersionTableRowProps> = ({
             {
               isSeparator: true,
             },
-            {
-              title: 'View runs',
-              onClick: () => {
-                navigate(
-                  pipelineVersionRunsRoute(
-                    namespace,
-                    pipeline.pipeline_id,
-                    version.pipeline_version_id,
-                  ),
-                );
-              },
-            },
             {
               title: 'View schedules',
               onClick: () => {
                 navigate(
-                  pipelineVersionRecurringRunsRoute(
-                    namespace,
-                    pipeline.pipeline_id,
-                    version.pipeline_version_id,
-                  ),
+                  globalPipelineRecurringRunsVersionRoute(namespace, version.pipeline_version_id),
                 );
               },
             },

diff --git a/frontend/src/routes/pipelines/runs.ts b/frontend/src/routes/pipelines/runs.ts
@@ -131,12 +131,22 @@ export const pipelineRunsBaseRoute = (namespace?: string): string =>
 export const globalPipelineRunsRoute = (namespace: string | undefined): string =>
   `${pipelineRunsBaseRoute(namespace)}/runs`;
 
+export const globalPipelineRunsVersionRoute = (
+  namespace: string | undefined,
+  pipelineVersionId: string | undefined,
+): string => `${globalPipelineRunsRoute(namespace)}/active?pipeline_version=${pipelineVersionId}`;
+
 export const globalArchivedPipelineRunsRoute = (namespace: string | undefined): string =>
   `${globalPipelineRunsRoute(namespace)}/archived`;
 
 export const globalPipelineRecurringRunsRoute = (namespace: string | undefined): string =>
   `${pipelineRunsBaseRoute(namespace)}/schedules`;
 
+export const globalPipelineRecurringRunsVersionRoute = (
+  namespace: string | undefined,
+  pipelineVersionId: string | undefined,
+): string => `${globalPipelineRecurringRunsRoute(namespace)}?pipeline_version=${pipelineVersionId}`;
+
 export const globalPipelineRunDetailsRoute = (namespace: string, runId: string): string =>
   `${globalPipelineRunsRoute(namespace)}/${runId}`;