update pipelinerun graph to show past pipeline structure

frontend/packages/dev-console/src/components/pipelineruns/detail-page-tabs/PipelineRunVisualization.tsx

@@ -1,37 +1,16 @@
 import * as React from 'react';
-import { Alert } from '@patternfly/react-core';
-import { k8sGet } from '@console/internal/module/k8s';
-import { PipelineModel } from '../../../models';
 import PipelineVisualization from '../../pipelines/detail-page-tabs/pipeline-details/PipelineVisualization';
-import { Pipeline, PipelineRun, pipelineRefExists } from '../../../utils/pipeline-augment';
+import { PipelineRun, getPipelineFromPipelineRun } from '../../../utils/pipeline-augment';
 
 type PipelineRunVisualizationProps = {
   pipelineRun: PipelineRun;
 };
 
-const PipelineRunVisualization: React.FC<PipelineRunVisualizationProps> = ({ pipelineRun }) => {
-  const [errorMessage, setErrorMessage] = React.useState<string>(null);
-  const [pipeline, setPipeline] = React.useState<Pipeline>(null);
-
-  React.useEffect(() => {
-    if (pipelineRefExists(pipelineRun)) {
-      k8sGet(PipelineModel, pipelineRun.spec.pipelineRef.name, pipelineRun.metadata.namespace)
-        .then((res: Pipeline) => setPipeline(res))
-        .catch((error) =>
-          setErrorMessage(error?.message || 'Could not load visualization at this time.'),
-        );
-    }
-  }, [pipelineRun, setPipeline]);
-
-  if (errorMessage) {
-    return <Alert variant="danger" isInline title={errorMessage} />;
-  }
-
-  if (!pipeline || !pipelineRun) {
-    return null;
-  }
-
-  return <PipelineVisualization pipeline={pipeline} pipelineRun={pipelineRun} />;
-};
+const PipelineRunVisualization: React.FC<PipelineRunVisualizationProps> = ({ pipelineRun }) => (
+  <PipelineVisualization
+    pipeline={getPipelineFromPipelineRun(pipelineRun)}
+    pipelineRun={pipelineRun}
+  />
+);
 
 export default PipelineRunVisualization;

frontend/packages/dev-console/src/components/pipelineruns/status/LinkedPipelineRunTaskStatus.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { resourcePathFromModel } from '@console/internal/components/utils';
-import { Pipeline, PipelineRun } from '../../../utils/pipeline-augment';
+import { PipelineRun } from '../../../utils/pipeline-augment';
 import { PipelineRunModel } from '../../../models';
-import { PipelineTaskStatus } from './PipelineTaskStatus';
+import { PipelineBars } from './PipelineBars';
 
 export interface LinkedPipelineRunTaskStatusProps {
-  pipeline?: Pipeline;
   pipelineRun: PipelineRun;
 }
 
@@ -15,15 +14,10 @@ export interface LinkedPipelineRunTaskStatusProps {
  * If it does not, it'll just render the pipeline status.
  */
 const LinkedPipelineRunTaskStatus: React.FC<LinkedPipelineRunTaskStatusProps> = ({
-  pipeline,
   pipelineRun,
 }) => {
   const pipelineStatus = (
-    <PipelineTaskStatus
-      key={pipelineRun.metadata?.name}
-      pipeline={pipeline}
-      pipelinerun={pipelineRun}
-    />
+    <PipelineBars key={pipelineRun.metadata?.name} pipelinerun={pipelineRun} />
   );
 
   if (pipelineRun.metadata?.name && pipelineRun.metadata?.namespace) {

frontend/packages/dev-console/src/components/pipelineruns/status/PipelineBars.tsx

@@ -5,18 +5,16 @@ import {
   getTaskStatus,
   runStatus,
   getRunStatusColor,
-  Pipeline,
   PipelineRun,
 } from '../../../utils/pipeline-augment';
 import TaskStatusToolTip from './TaskStatusTooltip';
 
 export interface PipelineBarProps {
   pipelinerun: PipelineRun;
-  pipeline?: { data: Pipeline };
 }
 
-export const PipelineBars: React.FC<PipelineBarProps> = ({ pipelinerun, pipeline }) => {
-  const taskStatus = getTaskStatus(pipelinerun, pipeline?.data);
+export const PipelineBars: React.FC<PipelineBarProps> = ({ pipelinerun }) => {
+  const taskStatus = getTaskStatus(pipelinerun);
 
   return (
     <Tooltip content={<TaskStatusToolTip taskStatus={taskStatus} />}>

frontend/packages/dev-console/src/components/pipelines/const.ts

@@ -6,6 +6,7 @@ export enum StartedByAnnotation {
 }
 
 export enum TektonResourceLabel {
+  pipeline = 'tekton.dev/pipeline',
   pipelinerun = 'tekton.dev/pipelineRun',
   taskrun = 'tekton.dev/taskRun',
 }

frontend/packages/dev-console/src/components/pipelines/list-page/PipelineRow.tsx

@@ -45,11 +45,7 @@ const PipelineRow: RowFunction<Pipeline> = ({ obj, index, key, style }) => {
         )}
       </TableData>
       <TableData className={tableColumnClasses[3]}>
-        {obj.latestRun ? (
-          <LinkedPipelineRunTaskStatus pipeline={obj} pipelineRun={obj.latestRun} />
-        ) : (
-          '-'
-        )}
+        {obj.latestRun ? <LinkedPipelineRunTaskStatus pipelineRun={obj.latestRun} /> : '-'}
       </TableData>
       <TableData className={tableColumnClasses[4]}>
         <Status status={pipelineFilterReducer(obj)} />