address feedback to update the runs details page

opendatahub-io · Jan 15, 2024 · 0837924 · 0837924
1 parent 3e2ca7f
commit 0837924
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 48 deletions.
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/...end/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunTabDetails.tsx b/...end/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunTabDetails.tsx
@@ -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,21 +45,17 @@ const PipelineRunTabDetails: React.FC<PipelineRunTabDetailsProps> = ({
     );
   }
 
-  const pipelineVersionRef = getPipelineVersionRunReference(pipelineRunKF);
-
   const details: DetailItem[] = [
     { key: 'Name', value: <Truncate content={pipelineRunKF.name} /> },
     ...(pipelineVersionRef
       ? [
           {
-            key: 'Pipeline',
-            // TODO: get the relative parent namespaced link
-            value: pipelineVersionRef.name ? (
-              <Link to={`/pipelines/${namespace}/pipeline/view/${pipelineVersionRef.key.id}`}>
-                <Truncate content={pipelineVersionRef.name} />
-              </Link>
-            ) : (
-              <NoRunContent />
+            key: 'Pipeline version',
+            value: (
+              <PipelineVersionLink
+                resourceRef={pipelineVersionRef}
+                loadingIndicator={<Spinner size="sm" />}
+              />
             ),
           },
         ]

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
@@ -45,11 +45,7 @@ const PipelineRunTableRow: React.FC<PipelineRunTableRowProps> = ({
         <CoreResourceExperiment resource={run} />
       </Td>
       <Td modifier="truncate">
-        <CoreResourcePipelineVersion
-          isLoading={isJobInfoLoading}
-          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
@@ -46,7 +46,7 @@ const PipelineRunJobTableRow: React.FC<PipelineRunJobTableRowProps> = ({
         <CoreResourceExperiment resource={job} />
       </Td>
       <Td modifier="truncate">
-        <CoreResourcePipelineVersion 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
@@ -29,7 +29,7 @@ import {
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import { computeRunStatus } from '~/concepts/pipelines/content/utils';
 import PipelinesTableRowTime from '~/concepts/pipelines/content/tables/PipelinesTableRowTime';
-import usePipelineVersionById from '~/concepts/pipelines/apiHooks/usePipelineVersionById';
+import { PipelineVersionLink } from '~/concepts/pipelines/content/PipelineVersionLink';
 
 export const NoRunContent = (): React.JSX.Element => <>-</>;
 
@@ -92,41 +92,15 @@ export const CoreResourceExperiment: CoreResourceUtil = ({ resource }) => (
 );
 
 export const CoreResourcePipelineVersion: CoreResourceUtil<{
-  namespace: string;
   isLoading?: boolean;
-}> = ({ resource, namespace, isLoading }) => {
+}> = ({ resource, isLoading }) => {
   const resourceRef = getPipelineVersionRunReference(resource);
-  const resourceRefVersionName = resourceRef?.name;
-  const [pipelineVersion, isPipelineVersionLoaded, pipelineVersionError] = usePipelineVersionById(
-    resourceRef?.key.id,
-  );
 
-  if (!resourceRefVersionName) {
-    return <NoRunContent />;
-  }
-
-  if (isLoading || (!isPipelineVersionLoaded && !pipelineVersionError)) {
+  if (isLoading) {
     return <Skeleton />;
   }
 
-  if (!pipelineVersion) {
-    return (
-      <Tooltip
-        content={<div>&quot;{resourceRefVersionName}&quot; no longer exists.</div>}
-        position="right"
-      >
-        <div className="pf-v5-u-disabled-color-100 pf-v5-c-truncate__start" id="test-append">
-          {resourceRefVersionName}
-        </div>
-      </Tooltip>
-    );
-  }
-
-  return (
-    <Link to={`/pipelineRuns/${namespace}/pipeline/view/${pipelineVersion?.id}`}>
-      {resourceRefVersionName}
-    </Link>
-  );
+  return <PipelineVersionLink resourceRef={resourceRef} />;
 };
 
 export const RunJobTrigger: RunJobUtil = ({ job }) => {