Merge pull request #2335 from jpuzz0/RHOAIENG-1451-disable-deleted-ve…

…rsions RHOAIENG-1451: Detect deleted pipeline versions on pipeline runs table, disable, show tooltip
opendatahub-io · Jan 15, 2024 · cc59a36 · cc59a36
2 parents 68a1283 + d4a3f67
commit cc59a36
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 53 deletions.
diff --git a/frontend/src/concepts/pipelines/content/PipelineRunTypeLabel.tsx b/frontend/src/concepts/pipelines/content/PipelineRunTypeLabel.tsx
@@ -3,7 +3,7 @@ import { Label, Tooltip } from '@patternfly/react-core';
 import {
   PipelineRunLabels,
   getPipelineCoreResourceJobReference,
-  getPipelineCoreResourcePipelineReference,
+  getPipelineVersionRunReference,
 } from '~/concepts/pipelines/content/tables/utils';
 import { PipelineCoreResourceKF } from '~/concepts/pipelines/kfTypes';
 
@@ -13,7 +13,7 @@ type PipelineRunTypeLabelProps = {
 };
 const PipelineRunTypeLabel: React.FC<PipelineRunTypeLabelProps> = ({ resource, isCompact }) => {
   const jobReference = getPipelineCoreResourceJobReference(resource);
-  const pipelineReference = getPipelineCoreResourcePipelineReference(resource);
+  const pipelineVersionRef = getPipelineVersionRunReference(resource);
 
   return (
     <>
@@ -25,7 +25,7 @@ const PipelineRunTypeLabel: React.FC<PipelineRunTypeLabelProps> = ({ resource, i
             </Label>
           </Tooltip>
         </>
-      ) : !pipelineReference ? (
+      ) : !pipelineVersionRef ? (
         <>
           <Tooltip content={<div>Created by a scheduled run that was deleted</div>}>
             <Label color="blue" isCompact={isCompact}>

diff --git a/frontend/src/concepts/pipelines/content/PipelineVersionLink.tsx b/frontend/src/concepts/pipelines/content/PipelineVersionLink.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { Skeleton, Tooltip } from '@patternfly/react-core';
+
+import usePipelineVersionById from '~/concepts/pipelines/apiHooks/usePipelineVersionById';
+import { usePipelinesAPI } from '~/concepts/pipelines/context';
+import { ResourceReferenceKF } from '~/concepts/pipelines/kfTypes';
+import { NoRunContent } from '~/concepts/pipelines/content/tables/renderUtils';
+
+interface PipelineVersionLinkProps {
+  resourceRef: ResourceReferenceKF | undefined;
+  loadingIndicator?: React.ReactElement;
+}
+
+export const PipelineVersionLink: React.FC<PipelineVersionLinkProps> = ({
+  resourceRef,
+  loadingIndicator,
+}) => {
+  const { namespace } = usePipelinesAPI();
+  const versionName = resourceRef?.name;
+  const versionId = resourceRef?.key.id;
+  const [version, isVersionLoaded, error] = usePipelineVersionById(versionId);
+
+  if (!resourceRef) {
+    return <NoRunContent />;
+  }
+
+  if (!isVersionLoaded && !error) {
+    return loadingIndicator || <Skeleton />;
+  }
+
+  if (!version) {
+    return (
+      <Tooltip content={<div>&quot;{versionName}&quot; no longer exists.</div>} position="right">
+        <div className="pf-v5-u-disabled-color-100 pf-v5-c-truncate__start">{versionName}</div>
+      </Tooltip>
+    );
+  }
+
+  return <Link to={`/pipelines/${namespace}/pipeline/view/${versionId}`}>{versionName}</Link>;
+};
diff --git a/frontend/src/concepts/pipelines/content/createRun/useRunFormData.ts b/frontend/src/concepts/pipelines/content/createRun/useRunFormData.ts
@@ -19,7 +19,7 @@ import {
   ResourceReferenceKF,
 } from '~/concepts/pipelines/kfTypes';
 
-import { getPipelineCoreResourcePipelineReference } from '~/concepts/pipelines/content/tables/utils';
+import { getPipelineVersionRunReference } from '~/concepts/pipelines/content/tables/utils';
 import usePipelineById from '~/concepts/pipelines/apiHooks/usePipelineById';
 import { UpdateObjectAtPropAndValue } from '~/pages/projects/types';
 import { FetchState } from '~/utilities/useFetchState';
@@ -83,7 +83,7 @@ const useUpdatePipelineRun = (
     updatedSetFunction,
     pipelineRunJob,
     'pipeline',
-    getPipelineCoreResourcePipelineReference,
+    getPipelineVersionRunReference,
     usePipelineById,
   );
 };
@@ -110,7 +110,7 @@ const useUpdatePipeline = (
     updatedSetFunction,
     initialData,
     'pipeline',
-    getPipelineCoreResourcePipelineReference,
+    getPipelineVersionRunReference,
     usePipelineById,
   );
 

diff --git a/frontend/src/concepts/pipelines/content/pipelineSelector/CustomPipelineVersionSelect.tsx b/frontend/src/concepts/pipelines/content/pipelineSelector/CustomPipelineVersionSelect.tsx
@@ -27,6 +27,10 @@ type CustomPipelineVersionSelectProps = {
   onSelect: (version: PipelineVersionKF) => void;
 };
 
+/**
+ * Select dropdown with custom list of versions, which uses client-side sorting & filtering. This component
+ * should mimic the presentation of PipelineVersionSelector for a consistent user experience.
+ */
 const CustomPipelineVersionSelect: React.FC<CustomPipelineVersionSelectProps> = ({
   versions,
   selection,

diff --git a/...end/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunTabDetails.tsx b/...end/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunTabDetails.tsx
@@ -9,7 +9,7 @@ import {
 import { Link } from 'react-router-dom';
 import { PipelineRunJobKF, PipelineRunKF } from '~/concepts/pipelines/kfTypes';
 import {
-  getPipelineCoreResourcePipelineReference,
+  getPipelineVersionRunReference,
   getRunDuration,
 } from '~/concepts/pipelines/content/tables/utils';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
@@ -22,7 +22,7 @@ import {
   renderDetailItems,
 } from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/utils';
 import { isPipelineRunJob } from '~/concepts/pipelines/content/utils';
-import { NoRunContent } from '~/concepts/pipelines/content/tables/renderUtils';
+import { PipelineVersionLink } from '~/concepts/pipelines/content/PipelineVersionLink';
 
 type PipelineRunTabDetailsProps = {
   pipelineRunKF?: PipelineRunKF | PipelineRunJobKF;
@@ -34,6 +34,8 @@ const PipelineRunTabDetails: React.FC<PipelineRunTabDetailsProps> = ({
   workflowName,
 }) => {
   const { namespace, project } = usePipelinesAPI();
+  const pipelineVersionRef = getPipelineVersionRunReference(pipelineRunKF);
+
   if (!pipelineRunKF || !workflowName) {
     return (
       <EmptyState variant={EmptyStateVariant.lg} data-id="loading-empty-state">
@@ -43,26 +45,21 @@ const PipelineRunTabDetails: React.FC<PipelineRunTabDetailsProps> = ({
     );
   }
 
-  const pipelineReference = getPipelineCoreResourcePipelineReference(pipelineRunKF);
-  const pipelineRef = pipelineReference
-    ? [
-        {
-          key: 'Pipeline',
-          // TODO: get the relative parent namespaced link
-          value: pipelineReference.name ? (
-            <Link to={`/pipelines/${namespace}/pipeline/view/${pipelineReference.key.id}`}>
-              <Truncate content={pipelineReference.name} />
-            </Link>
-          ) : (
-            <NoRunContent />
-          ),
-        },
-      ]
-    : [];
-
   const details: DetailItem[] = [
     { key: 'Name', value: <Truncate content={pipelineRunKF.name} /> },
-    ...pipelineRef,
+    ...(pipelineVersionRef
+      ? [
+          {
+            key: 'Pipeline version',
+            value: (
+              <PipelineVersionLink
+                resourceRef={pipelineVersionRef}
+                loadingIndicator={<Spinner size="sm" />}
+              />
+            ),
+          },
+        ]
+      : []),
     {
       key: 'Project',
       value: <Link to={`/projects/${namespace}`}>{getProjectDisplayName(project)}</Link>,

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/utils.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/utils.tsx
@@ -32,7 +32,7 @@ export const renderDetailItems = (details: DetailItem[], flexKey?: boolean): Rea
           <FlexItem style={{ width: flexKey ? undefined : 150 }}>
             <b>{detail.key}</b>
           </FlexItem>
-          <FlexItem flex={{ default: 'flex_1' }}>{detail.value}</FlexItem>
+          <FlexItem>{detail.value}</FlexItem>
         </Flex>
       </StackItem>
     ))}

diff --git a/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableRow.tsx b/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableRow.tsx
@@ -1,14 +1,13 @@
 import * as React from 'react';
 import { ActionsColumn, Td, Tr } from '@patternfly/react-table';
-import { Skeleton } from '@patternfly/react-core';
 import { useNavigate } from 'react-router-dom';
 import { PipelineRunKF, PipelineRunStatusesKF } from '~/concepts/pipelines/kfTypes';
 import { CheckboxTd } from '~/components/table';
 import {
   RunCreated,
   RunDuration,
   CoreResourceExperiment,
-  CoreResourcePipeline,
+  CoreResourcePipelineVersion,
   RunStatus,
 } from '~/concepts/pipelines/content/tables/renderUtils';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
@@ -32,7 +31,7 @@ const PipelineRunTableRow: React.FC<PipelineRunTableRowProps> = ({
   getJobInformation,
 }) => {
   const { namespace, api, refreshAllAPI } = usePipelinesAPI();
-  const { loading, data } = getJobInformation(run);
+  const { loading: isJobInfoLoading, data } = getJobInformation(run);
   const notification = useNotification();
   const navigate = useNavigate();
 
@@ -46,11 +45,7 @@ const PipelineRunTableRow: React.FC<PipelineRunTableRowProps> = ({
         <CoreResourceExperiment resource={run} />
       </Td>
       <Td modifier="truncate">
-        {loading ? (
-          <Skeleton />
-        ) : (
-          <CoreResourcePipeline resource={data || run} namespace={namespace} />
-        )}
+        <CoreResourcePipelineVersion isLoading={isJobInfoLoading} resource={data || run} />
       </Td>
       <Td>
         <RunCreated run={run} />

diff --git a/frontend/src/concepts/pipelines/content/tables/pipelineRunJob/PipelineRunJobTableRow.tsx b/frontend/src/concepts/pipelines/content/tables/pipelineRunJob/PipelineRunJobTableRow.tsx
@@ -8,7 +8,7 @@ import {
   RunJobStatus,
   RunJobTrigger,
   CoreResourceExperiment,
-  CoreResourcePipeline,
+  CoreResourcePipelineVersion,
 } from '~/concepts/pipelines/content/tables/renderUtils';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
 
@@ -46,7 +46,7 @@ const PipelineRunJobTableRow: React.FC<PipelineRunJobTableRowProps> = ({
         <CoreResourceExperiment resource={job} />
       </Td>
       <Td modifier="truncate">
-        <CoreResourcePipeline resource={job} namespace={namespace} />
+        <CoreResourcePipelineVersion resource={job} />
       </Td>
       <Td>
         <RunJobTrigger job={job} />

diff --git a/frontend/src/concepts/pipelines/content/tables/renderUtils.tsx b/frontend/src/concepts/pipelines/content/tables/renderUtils.tsx
@@ -3,6 +3,7 @@ import {
   Icon,
   Level,
   LevelItem,
+  Skeleton,
   Spinner,
   Switch,
   Timestamp,
@@ -23,11 +24,12 @@ import {
   getPipelineCoreResourceExperimentName,
   getPipelineRunJobScheduledState,
   ScheduledState,
-  getPipelineCoreResourcePipelineReference,
+  getPipelineVersionRunReference,
 } from '~/concepts/pipelines/content/tables/utils';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import { computeRunStatus } from '~/concepts/pipelines/content/utils';
 import PipelinesTableRowTime from '~/concepts/pipelines/content/tables/PipelinesTableRowTime';
+import { PipelineVersionLink } from '~/concepts/pipelines/content/PipelineVersionLink';
 
 export const NoRunContent = (): React.JSX.Element => <>-</>;
 
@@ -89,19 +91,16 @@ export const CoreResourceExperiment: CoreResourceUtil = ({ resource }) => (
   <>{getPipelineCoreResourceExperimentName(resource)}</>
 );
 
-export const CoreResourcePipeline: CoreResourceUtil<{ namespace: string }> = ({
-  resource,
-  namespace,
-}) => {
-  const resourceRef = getPipelineCoreResourcePipelineReference(resource);
-  const pipelineName = resourceRef?.name;
-  if (!resourceRef || !pipelineName) {
-    return <NoRunContent />;
+export const CoreResourcePipelineVersion: CoreResourceUtil<{
+  isLoading?: boolean;
+}> = ({ resource, isLoading }) => {
+  const resourceRef = getPipelineVersionRunReference(resource);
+
+  if (isLoading) {
+    return <Skeleton />;
   }
-  const pipelineId = resourceRef.key.id;
 
-  // TODO: get link path
-  return <Link to={`/pipelineRuns/${namespace}/pipeline/view/${pipelineId}`}>{pipelineName}</Link>;
+  return <PipelineVersionLink resourceRef={resourceRef} />;
 };
 
 export const RunJobTrigger: RunJobUtil = ({ job }) => {

diff --git a/frontend/src/concepts/pipelines/content/tables/utils.ts b/frontend/src/concepts/pipelines/content/tables/utils.ts
@@ -43,7 +43,7 @@ export const getPipelineCoreResourceJobReference = (
   resource?: PipelineCoreResourceKF,
 ): ResourceReferenceKF | undefined => getRunResourceReference(resource, ResourceTypeKF.JOB);
 
-export const getPipelineCoreResourcePipelineReference = (
+export const getPipelineVersionRunReference = (
   resource?: PipelineCoreResourceKF,
 ): ResourceReferenceKF | undefined =>
   getRunResourceReference(resource, ResourceTypeKF.PIPELINE_VERSION);
@@ -55,9 +55,6 @@ export const getPipelineCoreResourceExperimentReference = (
 export const getPipelineCoreResourceExperimentName = (resource?: PipelineCoreResourceKF): string =>
   getPipelineCoreResourceExperimentReference(resource)?.name || 'Default';
 
-export const getPipelineCoreResourcePipelineName = (resource?: PipelineCoreResourceKF): string =>
-  getPipelineCoreResourcePipelineReference(resource)?.name || '';
-
 export const getPipelineRunJobStartTime = (job: PipelineRunJobKF): Date | null => {
   const startTime =
     job.trigger.cron_schedule?.start_time || job.trigger.periodic_schedule?.start_time;