Merge pull request #2919 from jpuzz0/RHOAIENG-2905-pipline-run-detail…

…-disable-tabs [RHOAIENG-2905] Pipeline Run Details tabs without content should be disabled
opendatahub-io · Jun 25, 2024 · a9bbb1b · a9bbb1b
2 parents af0d946 + 42d1d8b
commit a9bbb1b
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 84 deletions.
diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/pipelinesTopology.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/pipelinesTopology.cy.ts
@@ -496,8 +496,7 @@ describe('Pipeline topology', () => {
       pipelineRunDetails.findTaskNode('create-dataset').click();
       const rightDrawer = pipelineRunDetails.findRightDrawer();
       rightDrawer.findRightDrawerVolumesTab().should('be.visible');
-      rightDrawer.findRightDrawerVolumesTab().click();
-      rightDrawer.findRightDrawerVolumesSection().should('contain.text', 'No content');
+      rightDrawer.findRightDrawerVolumesTab().should('be.disabled');
     });
 
     it('Test node with volume mounts', () => {

diff --git a/...rc/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs.tsx b/...rc/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs.tsx
@@ -5,27 +5,16 @@ import SelectedNodeInputOutputTab from '~/concepts/pipelines/content/pipelinesDe
 import LogsTab from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab';
 import './PipelineRunDrawer.scss';
 import { PipelineTask } from '~/concepts/pipelines/topology';
-import SelectedNodeVolumeMountsTab from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeVolumeMountsTab';
 import { Execution } from '~/third_party/mlmd';
+import { renderDetailItems } from './utils';
 
-enum PipelineRunNodeTabs {
+enum PipelineRunNodeTab {
   INPUT_OUTPUT = 'inputoutput',
-  // VISUALIZATIONS = 'Visualizations',
   DETAILS = 'details',
   VOLUMES = 'volumes',
   LOGS = 'logs',
-  // POD = 'Pod',
-  // EVENTS = 'Events',
-  // ML_METADATA = 'ML Metadata',
 }
 
-const PipelineRunNodeTabsTitles = {
-  [PipelineRunNodeTabs.INPUT_OUTPUT]: 'Input/Output',
-  [PipelineRunNodeTabs.DETAILS]: 'Task details',
-  [PipelineRunNodeTabs.VOLUMES]: 'Volumes',
-  [PipelineRunNodeTabs.LOGS]: 'Logs',
-};
-
 type PipelineRunDrawerRightTabsProps = {
   task: PipelineTask;
   executions: Execution[];
@@ -35,47 +24,64 @@ const PipelineRunDrawerRightTabs: React.FC<PipelineRunDrawerRightTabsProps> = ({
   task,
   executions,
 }) => {
-  const [selection, setSelection] = React.useState(PipelineRunNodeTabs.INPUT_OUTPUT);
+  const hasNoInputsOutputs = !task.inputs && !task.outputs;
+  const [selection, setSelection] = React.useState<string>(
+    hasNoInputsOutputs ? PipelineRunNodeTab.DETAILS : PipelineRunNodeTab.INPUT_OUTPUT,
+  );
   const taskExecution = executions.find(
     (e) => e.getCustomPropertiesMap().get('task_name')?.getStringValue() === task.name,
   );
 
-  const tabContents: Record<PipelineRunNodeTabs, React.ReactNode> = {
-    [PipelineRunNodeTabs.INPUT_OUTPUT]: (
-      <SelectedNodeInputOutputTab task={task} execution={taskExecution?.toObject()} />
-    ),
-    // [PipelineRunNodeTabs.VISUALIZATIONS]: <>TBD 2</>,
-    [PipelineRunNodeTabs.DETAILS]: <SelectedNodeDetailsTab task={task} />,
-    [PipelineRunNodeTabs.VOLUMES]: <SelectedNodeVolumeMountsTab task={task} />,
-    [PipelineRunNodeTabs.LOGS]: <LogsTab task={task} />,
-    // [PipelineRunNodeTabs.POD]: <>TBD 6</>,
-    // [PipelineRunNodeTabs.EVENTS]: <>TBD 7</>,
-    // [PipelineRunNodeTabs.ML_METADATA]: <>TBD 8</>,
+  const tabs: Record<string, { title: string; isDisabled?: boolean; content: React.ReactNode }> = {
+    [PipelineRunNodeTab.INPUT_OUTPUT]: {
+      title: 'Input/Output',
+      isDisabled: hasNoInputsOutputs,
+      content: <SelectedNodeInputOutputTab task={task} execution={taskExecution?.toObject()} />,
+    },
+    [PipelineRunNodeTab.DETAILS]: {
+      title: 'Task details',
+      content: <SelectedNodeDetailsTab task={task} />,
+    },
+    [PipelineRunNodeTab.VOLUMES]: {
+      title: 'Volumes',
+      isDisabled: !task.volumeMounts || task.volumeMounts.length === 0,
+      content: renderDetailItems(
+        (task.volumeMounts ?? []).map(({ name, mountPath }) => ({ key: mountPath, value: name })),
+      ),
+    },
+    [PipelineRunNodeTab.LOGS]: {
+      title: 'Logs',
+      isDisabled: !task.status?.podName,
+      content: <LogsTab task={task} />,
+    },
   };
 
   return (
     <>
       <Tabs activeKey={selection} mountOnEnter>
-        {Object.values(PipelineRunNodeTabs).map((tab) => (
+        {Object.entries(tabs).map(([tabName, { title, isDisabled }]) => (
           <Tab
-            data-testid={`right-drawer-tab-${tab}`}
-            key={tab}
-            title={PipelineRunNodeTabsTitles[tab]}
-            eventKey={tab}
-            tabContentId={tab}
-            onClick={() => setSelection(tab)}
+            data-testid={`right-drawer-tab-${tabName}`}
+            key={tabName}
+            title={title}
+            eventKey={tabName}
+            tabContentId={tabName}
+            isDisabled={isDisabled}
+            onClick={() => setSelection(tabName)}
           />
         ))}
       </Tabs>
       <DrawerPanelBody className="pipeline-run__drawer-panel-body pf-v5-u-px-sm">
-        <TabContent
-          id={selection}
-          eventKey={selection}
-          activeKey={selection}
-          style={{ flex: '1 1 auto' }}
-        >
-          {tabContents[selection]}
-        </TabContent>
+        {!tabs[selection].isDisabled && (
+          <TabContent
+            id={selection}
+            eventKey={selection}
+            activeKey={selection}
+            style={{ flex: '1 1 auto' }}
+          >
+            {tabs[selection].content}
+          </TabContent>
+        )}
       </DrawerPanelBody>
     </>
   );

diff --git a/...rc/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeInputOutputTab.tsx b/...rc/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeInputOutputTab.tsx
@@ -106,10 +106,6 @@ const SelectedNodeInputOutputTab: React.FC<SelectedNodeInputOutputTabProps> = ({
     [getExecutionValueFromInputType],
   );
 
-  if (!task.inputs && !task.outputs) {
-    return <>No content</>;
-  }
-
   return (
     <Stack hasGutter>
       {isExperimentsAvailable && execution?.id && (

diff --git a/...c/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeVolumeMountsTab.tsx b/...c/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeVolumeMountsTab.tsx
diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab.tsx
@@ -41,24 +41,14 @@ import useDebounceCallback from '~/utilities/useDebounceCallback';
 import { PipelineTask } from '~/concepts/pipelines/topology';
 import { ExecutionStateKF } from '~/concepts/pipelines/kfTypes';
 
-// TODO: If this gets large enough we should look to make this its own component file
-const LogsTab: React.FC<{ task: PipelineTask }> = ({ task }) => {
-  const podName = task.status?.podName;
-  const isFailedPod = task.status?.state === ExecutionStateKF.FAILED;
-
-  if (!podName) {
-    return <>No content</>;
-  }
+interface LogsTabProps {
+  task: PipelineTask;
+}
 
-  return <LogsTabForPodName podName={podName} isFailedPod={isFailedPod} />;
-};
-
-/** Must be a non-empty podName -- use LogsTabForTask for safer usage */
-const LogsTabForPodName: React.FC<{ podName: string; isFailedPod: boolean }> = ({
-  podName,
-  isFailedPod,
-}) => {
+const LogsTab: React.FC<LogsTabProps> = ({ task }) => {
   const { namespace } = usePipelinesAPI();
+  const podName = task.status?.podName ?? '';
+  const isFailedPod = task.status?.state === ExecutionStateKF.FAILED;
   const {
     pod,
     podLoaded,