feat: Move pipeline results to separate tab (#570)

epam · Jan 23, 2025 · 149597f · 149597f
1 parent b821633
commit 149597f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/src/pages/pipeline-details/components/Overview/hooks/useInfoRows.tsx b/src/pages/pipeline-details/components/Overview/hooks/useInfoRows.tsx
@@ -4,7 +4,6 @@ import { InfoRow } from '../../../../../components/InfoColumns/types';
 import { StatusIcon } from '../../../../../components/StatusIcon';
 import { PipelineRunKubeObject } from '../../../../../k8s/groups/Tekton/PipelineRun';
 import { humanize } from '../../../../../utils/date/humanize';
-import { PipelineRunResults } from '../../../../../widgets/PipelineRunResults';
 import { useDynamicDataContext } from '../../../providers/DynamicData/hooks';
 
 export const useInfoRows = (): InfoRow[] | null => {
@@ -112,23 +111,11 @@ export const useInfoRows = (): InfoRow[] | null => {
           columnXs: 12,
         },
       ],
-      [
-        ...(pipelineRun.data?.status?.results
-          ? [
-              {
-                label: 'Results',
-                text: <PipelineRunResults pipelineRun={pipelineRun.data} />,
-                columnXs: 6,
-              },
-            ]
-          : []),
-      ],
     ];
   }, [
     color,
     icon,
     isRotating,
-    pipelineRun.data,
     pipelineRunLabels,
     reason,
     status,

diff --git a/src/pages/pipeline-details/hooks/useTabs.tsx b/src/pages/pipeline-details/hooks/useTabs.tsx
@@ -1,3 +1,4 @@
+import { NameValueTable } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import { Box } from '@mui/material';
 import React from 'react';
 import { ViewYAML } from '../../../components/Editor';
@@ -54,6 +55,24 @@ export const useTabs = () => {
           </Box>
         ),
       },
+      {
+        label: 'Results',
+        component: (
+          <Box
+            sx={{
+              pt: (t) => t.typography.pxToRem(24),
+            }}
+          >
+            <NameValueTable
+              rows={(pipelineRun.data?.status?.results || []).map((el) => ({
+                name: el.name,
+                value: el.value,
+              }))}
+            />
+          </Box>
+        ),
+        disabled: !pipelineRun.data?.status?.results,
+      },
       {
         label: 'Diagram',
         component: (