feat: Add results column into pipeline table (#557)

Author: callmevladik

src/components/InfoColumns/index.tsx

@@ -14,7 +14,13 @@ export const InfoColumns = ({ infoRows }: InfoColumnsProps) => {
                 <React.Fragment key={`column::${index}`}>
                   {!!label && !!text && (
                     <Grid item xs={columnXs as GridSize}>
-                      <Typography fontWeight={500} fontSize={14} color="primary.dark" gutterBottom>
+                      <Typography
+                        component="div"
+                        fontWeight={500}
+                        fontSize={14}
+                        color="primary.dark"
+                        gutterBottom
+                      >
                         {label}
                       </Typography>
                       <Grid container spacing={1} alignItems={'center'}>
@@ -27,7 +33,7 @@ export const InfoColumns = ({ infoRows }: InfoColumnsProps) => {
                             )}
                           </Grid>
                         )}
-                        <Grid item>
+                        <Grid item flexGrow={1}>
                           <Typography
                             fontSize={13}
                             color="secondary.dark"

src/k8s/groups/Tekton/PipelineRun/utils/createBuildPipelineRunInstance/index.ts

@@ -62,7 +62,7 @@ export const createBuildPipelineRunInstance = ({
   base.metadata.labels[PIPELINE_RUN_LABEL_SELECTOR_CODEBASE_BRANCH] = codebaseBranchMetadataName;
   base.metadata.labels[PIPELINE_RUN_LABEL_SELECTOR_PIPELINE_TYPE] = PIPELINE_TYPES.BUILD;
 
-  base.spec.pipelineRef.name = codebaseBranch.spec.pipelines.build;
+  base.spec.pipelineRef.name = codebaseBranch.spec?.pipelines?.build;
 
   base.spec.workspaces = [
     ...base.spec.workspaces,

src/pages/component-details/providers/DynamicData/provider.tsx

@@ -4,6 +4,7 @@ import { useParams } from 'react-router-dom';
 import { CodebaseKubeObject } from '../../../../k8s/groups/EDP/Codebase';
 import { CodebaseBranchKubeObject } from '../../../../k8s/groups/EDP/CodebaseBranch';
 import { CODEBASE_BRANCH_LABEL_SELECTOR_CODEBASE_NAME } from '../../../../k8s/groups/EDP/CodebaseBranch/labels';
+import { CodebaseBranchKubeObjectInterface } from '../../../../k8s/groups/EDP/CodebaseBranch/types';
 import { useGitServerByCodebaseQuery } from '../../../../k8s/groups/EDP/GitServer/hooks/useGitServerByCodebaseQuery';
 import {
   generateBuildPipelineRef,
@@ -26,16 +27,6 @@ export const DynamicDataContextProvider: React.FC = ({ children }) => {
     props: { codebaseGitServer: component?.spec.gitServer },
   });
 
-  const reviewPipelineRefName = generateReviewPipelineRef({
-    gitServer: gitServerByCodebase,
-    component: component,
-  });
-
-  const buildPipelineRefName = generateBuildPipelineRef({
-    gitServer: gitServerByCodebase,
-    component: component,
-  });
-
   const [codebaseBranches, codebaseBranchesError] = CodebaseBranchKubeObject.useList({
     namespace,
     labelSelector: `${CODEBASE_BRANCH_LABEL_SELECTOR_CODEBASE_NAME}=${name}`,
@@ -46,6 +37,8 @@ export const DynamicDataContextProvider: React.FC = ({ children }) => {
       ? null
       : codebaseBranches?.sort((a) => (isDefaultBranch(component, a) ? -1 : 1));
 
+  const defaultBranch: CodebaseBranchKubeObjectInterface = sortedCodebaseBranches?.[0];
+
   const DataContextValue = React.useMemo(
     () => ({
       component: {
@@ -55,8 +48,18 @@ export const DynamicDataContextProvider: React.FC = ({ children }) => {
       },
       pipelines: {
         data: {
-          review: reviewPipelineRefName,
-          build: buildPipelineRefName,
+          review:
+            defaultBranch?.spec?.pipelines?.review ||
+            generateReviewPipelineRef({
+              gitServer: gitServerByCodebase,
+              component: component,
+            }),
+          build:
+            defaultBranch?.spec?.pipelines?.build ||
+            generateBuildPipelineRef({
+              gitServer: gitServerByCodebase,
+              component: component,
+            }),
         },
         error: error,
         isLoading: component === null,
@@ -73,15 +76,15 @@ export const DynamicDataContextProvider: React.FC = ({ children }) => {
       },
     }),
     [
-      buildPipelineRefName,
       codebaseBranches,
       codebaseBranchesError,
       component,
+      defaultBranch?.spec?.pipelines?.build,
+      defaultBranch?.spec?.pipelines?.review,
       error,
       gitServerByCodebase,
       gitServerByCodebaseError,
       gitServerByCodebaseIsLoading,
-      reviewPipelineRefName,
       sortedCodebaseBranches,
     ]
   );

src/pages/pipeline-details/components/Overview/hooks/useInfoRows.tsx

@@ -4,6 +4,7 @@ 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 => {
@@ -111,11 +112,23 @@ 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,

src/widgets/PipelineRunList/hooks/useColumns.tsx

@@ -15,6 +15,7 @@ import { routePipelineRunDetails } from '../../../pages/pipeline-details/route';
 import { useDialogContext } from '../../../providers/Dialog/hooks';
 import { humanize } from '../../../utils/date/humanize';
 import { PipelineRunGraphDialog } from '../../dialogs/PipelineRunGraph';
+import { PipelineRunResults } from '../../PipelineRunResults';
 import { Actions } from '../components/Actions';
 import { WidgetPermissions } from '../types';
 
@@ -98,6 +99,12 @@ export const useColumns = ({
         },
         width: '15%',
       },
+      {
+        id: 'results',
+        label: 'Results',
+        render: (resource) => <PipelineRunResults pipelineRun={resource} />,
+        width: '30%',
+      },
       {
         id: 'pullRequestUrl',
         label: 'Pull Request',
@@ -117,7 +124,7 @@ export const useColumns = ({
             />
           );
         },
-        width: '10%',
+        width: '5%',
         textAlign: 'center',
       },
       {
@@ -148,8 +155,9 @@ export const useColumns = ({
 
           return startedAt;
         },
-        width: '15%',
+        width: '10%',
       },
+
       {
         id: 'time',
         label: 'Time',
@@ -193,7 +201,7 @@ export const useColumns = ({
 
           return activeDuration;
         },
-        width: '30%',
+        width: '10%',
       },
       {
         id: 'diagram',

src/widgets/PipelineRunResults/index.tsx

@@ -0,0 +1,27 @@
+import { Table, TableBody, TableCell, TableRow } from '@mui/material';
+import React from 'react';
+
+export const PipelineRunResults = ({ pipelineRun }) => {
+  const results = pipelineRun?.status?.results || [];
+
+  if (results.length === 0) {
+    return null;
+  }
+
+  return (
+    <Table size="small">
+      <colgroup>
+        <col style={{ width: '30%' }} />
+        <col style={{ width: '70%' }} />
+      </colgroup>
+      <TableBody>
+        {results.map((el) => (
+          <TableRow>
+            <TableCell sx={{ fontWeight: 500 }}>{el.name}</TableCell>
+            <TableCell>{el.value}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+};