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

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 {

frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/pipelines.cy.ts

@@ -1181,12 +1181,12 @@ describe('Pipelines', () => {
     pipelineRow.findExpandButton().click();
     pipelineRow
       .getPipelineVersionRowById(initialMockPipelineVersion.pipeline_version_id)
-      .findKebabAction('View runs')
+      .findPipelineVersionViewRunLink()
       .click();
 
     cy.url().should(
       'include',
-      `/pipelines/${projectName}/${initialMockPipeline.pipeline_id}/${initialMockPipelineVersion.pipeline_version_id}/runs`,
+      `/pipelineRuns/${projectName}/runs/active?pipeline_version=${initialMockPipelineVersion.pipeline_id}`,
     );
   });
 
@@ -1204,7 +1204,7 @@ describe('Pipelines', () => {
 
     cy.url().should(
       'include',
-      `/pipelines/${projectName}/${initialMockPipeline.pipeline_id}/${initialMockPipelineVersion.pipeline_version_id}/schedules`,
+      `/pipelineRuns/${projectName}/schedules?pipeline_version=${initialMockPipelineVersion.pipeline_id}`,
     );
   });
 

frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/pipelinesTopology.cy.ts

@@ -200,14 +200,14 @@ describe('Pipeline topology', () => {
       it('Test pipeline details view runs navigation', () => {
         pipelineDetails.selectActionDropdownItem('View runs');
         verifyRelativeURL(
-          `/pipelines/${projectId}/${mockVersion.pipeline_id}/${mockVersion.pipeline_version_id}/runs`,
+          `/pipelineRuns/${projectId}/runs/active?pipeline_version=${mockVersion.pipeline_version_id}`,
         );
       });
 
       it('navigates to "Schedules" on "View schedules" click', () => {
         pipelineDetails.selectActionDropdownItem('View schedules');
         verifyRelativeURL(
-          `/pipelines/${projectId}/${mockVersion.pipeline_id}/${mockVersion.pipeline_version_id}/schedules`,
+          `/pipelineRuns/${projectId}/schedules?pipeline_version=${mockVersion.pipeline_version_id}`,
         );
       });
     });

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,
                         ),
                       )

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(),
 ];
 

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),
                 );
               },
             },

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,
+): 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,
+): string => `${globalPipelineRecurringRunsRoute(namespace)}?pipeline_version=${pipelineVersionId}`;
+
 export const globalPipelineRunDetailsRoute = (namespace: string, runId: string): string =>
   `${globalPipelineRunsRoute(namespace)}/${runId}`;