feat(tekton): add view logs and view sbom actions in the pipelineRun …

…list (#1003) * fix(plr-actions): add view logs and view sbom actions in the pipelinerun list page * fix disabled button in dark mode * add IconButton to handle onclick callback on svg icons
janus-idp · Dec 20, 2023 · c7eff5f · c7eff5f
1 parent 4aeb33e
commit c7eff5f
Show file tree

Hide file tree

Showing 13 changed files with 534 additions and 3 deletions.
diff --git a/plugins/shared-react/src/types/pipeline/pipeline.ts b/plugins/shared-react/src/types/pipeline/pipeline.ts
@@ -55,6 +55,7 @@ export type TektonTaskSpec = {
 
 export type TektonResultsRun = {
   name: string;
+  type?: string;
   value: string;
 };
 

diff --git a/plugins/shared-react/src/types/pipeline/taskRun.ts b/plugins/shared-react/src/types/pipeline/taskRun.ts
@@ -36,6 +36,7 @@ export type TaskRunStatus = {
   startTime?: string;
   steps?: PLRTaskRunStep[];
   taskResults?: TektonResultsRun[];
+  results?: TektonResultsRun[];
 };
 
 export type TaskRunKind = {
@@ -53,3 +54,17 @@ export type TaskRunKind = {
   };
   status?: TaskRunStatus;
 };
+
+export enum TaskRunResultsAnnotations {
+  KEY = 'task.results.key',
+  TYPE = 'task.results.type',
+}
+
+export enum TaskRunResultsAnnotationValue {
+  EXTERNAL_LINK = 'external-link',
+}
+
+export enum TaskRunResults {
+  SBOM = 'LINK_TO_SBOM',
+  SCAN_OUTPUT = 'SCAN_OUTPUT',
+}
diff --git a/plugins/tekton/src/__fixtures__/taskRunData.ts b/plugins/tekton/src/__fixtures__/taskRunData.ts
@@ -0,0 +1,162 @@
+import { TaskRunKind } from '@janus-idp/shared-react';
+
+import { TEKTON_PIPELINE_RUN } from '../consts/tekton-const';
+
+export const taskRunWithResults: TaskRunKind = {
+  apiVersion: 'tekton.dev/v1beta1',
+  kind: 'TaskRun',
+  metadata: {
+    name: 'test-tr',
+    namespace: 'test-ns',
+    labels: {
+      'tekton.dev/pipelineRun': 'test-plr',
+    },
+  },
+  spec: {
+    params: [
+      {
+        name: 'first',
+        value: '20',
+      },
+      {
+        name: 'second',
+        value: '10',
+      },
+    ],
+    serviceAccountName: 'pipeline',
+    taskRef: {
+      kind: 'Task',
+      name: 'add-task',
+    },
+    timeout: '1h0m0s',
+  },
+  status: {
+    completionTime: 'Mon Mar 27 2023 18:09:11',
+    startTime: 'Mon Mar 27 2023 18:08:19',
+    podName: 'sum-three-pipeline-run-second-add-al6kxl-deploy-pod',
+    conditions: [
+      {
+        lastTransitionTime: '2021-02-09T09:57:03Z',
+        message: 'All Steps have completed executing',
+        reason: 'Succeeded',
+        status: 'True',
+        type: 'Succeeded',
+      },
+    ],
+    taskResults: [
+      {
+        name: 'sum',
+        value: '30',
+      },
+      {
+        name: 'difference',
+        value: '10',
+      },
+      {
+        name: 'multiply',
+        value: '200',
+      },
+      {
+        name: 'divide',
+        value: '2',
+      },
+    ],
+  },
+};
+
+export const taskRunWithSBOMResult = {
+  apiVersion: 'tekton.dev/v1',
+  kind: 'TaskRun',
+  metadata: {
+    annotations: {
+      'chains.tekton.dev/signed': 'true',
+      'pipeline.openshift.io/preferredName': 'pipelinerun-with-sbom-task',
+      'pipeline.openshift.io/started-by': 'kube:admin',
+      'task.output.location': 'results',
+      'task.results.format': 'application/text',
+      'task.results.key': 'LINK_TO_SBOM',
+    },
+    labels: {
+      [TEKTON_PIPELINE_RUN]: 'test-plr',
+    },
+    name: 'pipelinerun-with-sbom-task-t237ev-sbom-task',
+    uid: '764d0a6c-a4f6-419c-a3c3-585c2a9eb67c',
+  },
+  spec: {
+    serviceAccountName: 'pipeline',
+    taskRef: {
+      kind: 'Task',
+      name: 'sbom-task',
+    },
+    timeout: '1h0m0s',
+  },
+  status: {
+    completionTime: '2023-11-08T08:18:25Z',
+    conditions: [
+      {
+        lastTransitionTime: '2023-11-08T08:18:25Z',
+        message: 'All Steps have completed executing',
+        reason: 'Succeeded',
+        status: 'True',
+        type: 'Succeeded',
+      },
+    ],
+    podName: 'pipelinerun-with-sbom-task-t237ev-sbom-task-pod',
+    results: [
+      {
+        name: 'LINK_TO_SBOM',
+        type: 'string',
+        value: 'quay.io/test/image:build-8e536-1692702836',
+      },
+    ],
+  },
+};
+
+export const taskRunWithSBOMResultExternalLink: TaskRunKind = {
+  apiVersion: 'tekton.dev/v1',
+  kind: 'TaskRun',
+  metadata: {
+    annotations: {
+      'chains.tekton.dev/signed': 'true',
+      'pipeline.openshift.io/preferredName': 'pipelinerun-with-sbom-task',
+      'pipeline.openshift.io/started-by': 'kube:admin',
+      'pipeline.tekton.dev/release': 'a2f17f6',
+      'task.output.location': 'results',
+      'task.results.format': 'application/text',
+      'task.results.type': 'external-link',
+      'task.results.key': 'LINK_TO_SBOM',
+    },
+    resourceVersion: '197373',
+    name: 'pipelinerun-with-sbom-task-t237ev-sbom-task',
+    uid: '764d0a6c-a4f6-419c-a3c3-585c2a9eb67c',
+    generation: 1,
+  },
+  spec: {
+    serviceAccountName: 'pipeline',
+    taskRef: {
+      kind: 'Task',
+      name: 'sbom-task',
+    },
+    timeout: '1h0m0s',
+  },
+  status: {
+    completionTime: '2023-11-08T08:18:25Z',
+    conditions: [
+      {
+        lastTransitionTime: '2023-11-08T08:18:25Z',
+        message: 'All Steps have completed executing',
+        reason: 'Succeeded',
+        status: 'True',
+        type: 'Succeeded',
+      },
+    ],
+    podName: 'pipelinerun-with-sbom-task-t237ev-sbom-task-pod',
+    results: [
+      {
+        name: 'LINK_TO_SBOM',
+        type: 'string',
+        value: 'http://quay.io/test/image:build-8e536-1692702836',
+      },
+    ],
+  },
+};
diff --git a/plugins/tekton/src/components/Icons/LinkToSbomIcon.tsx b/plugins/tekton/src/components/Icons/LinkToSbomIcon.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import { createStyles, makeStyles, Theme } from '@material-ui/core';
+import { SVGIconProps } from '@patternfly/react-icons/dist/esm/createIcon';
+import classNames from 'classnames';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    icon: {
+      fill: 'var(--pf-v5-global--Color--100)',
+    },
+    disabledButton: {
+      fill: theme.palette.grey[600],
+    },
+  }),
+);
+
+const LinkToSBomIcon: React.FC<SVGIconProps> = (props): React.ReactElement => {
+  const classes = useStyles();
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className={classNames(classes.icon, {
+        [classes.disabledButton]: props.disabled,
+      })}
+      {...props}
+    >
+      <path d="M11 17H7C5.61667 17 4.4375 16.5125 3.4625 15.5375C2.4875 14.5625 2 13.3833 2 12C2 10.6167 2.4875 9.4375 3.4625 8.4625C4.4375 7.4875 5.61667 7 7 7H11V9H7C6.16667 9 5.45833 9.29167 4.875 9.875C4.29167 10.4583 4 11.1667 4 12C4 12.8333 4.29167 13.5417 4.875 14.125C5.45833 14.7083 6.16667 15 7 15H11V17ZM8 13V11H16V13H8ZM13 17V15H17C17.8333 15 18.5417 14.7083 19.125 14.125C19.7083 13.5417 20 12.8333 20 12C20 11.1667 19.7083 10.4583 19.125 9.875C18.5417 9.29167 17.8333 9 17 9H13V7H17C18.3833 7 19.5625 7.4875 20.5375 8.4625C21.5125 9.4375 22 10.6167 22 12C22 13.3833 21.5125 14.5625 20.5375 15.5375C19.5625 16.5125 18.3833 17 17 17H13Z" />
+    </svg>
+  );
+};
+
+export default LinkToSBomIcon;
diff --git a/plugins/tekton/src/components/Icons/ViewLogsIcon.tsx b/plugins/tekton/src/components/Icons/ViewLogsIcon.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import { createStyles, makeStyles, Theme } from '@material-ui/core';
+import { SVGIconProps } from '@patternfly/react-icons/dist/esm/createIcon';
+import classNames from 'classnames';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    icon: {
+      fill: 'var(--pf-v5-global--Color--100)',
+    },
+    disabledButton: {
+      fill: theme.palette.grey[600],
+    },
+  }),
+);
+
+const ViewLogsIcon: React.FC<SVGIconProps> = (props): React.ReactElement => {
+  const classes = useStyles();
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className={classNames(classes.icon, {
+        [classes.disabledButton]: props.disabled,
+      })}
+      {...props}
+    >
+      <path d="M4.5 21C4.0875 21 3.73438 20.8531 3.44063 20.5594C3.14688 20.2656 3 19.9125 3 19.5V4.5C3 4.0875 3.14688 3.73438 3.44063 3.44063C3.73438 3.14688 4.0875 3 4.5 3H19.5C19.9125 3 20.2656 3.14688 20.5594 3.44063C20.8531 3.73438 21 4.0875 21 4.5V19.5C21 19.9125 20.8531 20.2656 20.5594 20.5594C20.2656 20.8531 19.9125 21 19.5 21H4.5ZM4.5 19.5H19.5V6.5H4.5V19.5ZM12.001 16.875C10.667 16.875 9.475 16.5154 8.425 15.7962C7.375 15.077 6.60833 14.1437 6.125 12.9962C6.60833 11.8487 7.37466 10.9167 8.42398 10.2C9.47329 9.48333 10.665 9.125 11.999 9.125C13.333 9.125 14.525 9.48459 15.575 10.2038C16.625 10.923 17.3917 11.8563 17.875 13.0038C17.3917 14.1513 16.6253 15.0833 15.576 15.8C14.5267 16.5167 13.335 16.875 12.001 16.875ZM11.9971 14.25C11.649 14.25 11.3542 14.1282 11.1125 13.8846C10.8708 13.6409 10.75 13.3451 10.75 12.9971C10.75 12.649 10.8718 12.3542 11.1155 12.1125C11.3591 11.8708 11.6549 11.75 12.003 11.75C12.351 11.75 12.6458 11.8718 12.8875 12.1155C13.1292 12.3591 13.25 12.6549 13.25 13.003C13.25 13.351 13.1282 13.6458 12.8846 13.8875C12.6409 14.1292 12.3451 14.25 11.9971 14.25ZM12 15C12.56 15 13.0333 14.8067 13.42 14.42C13.8067 14.0333 14 13.56 14 13C14 12.44 13.8067 11.9667 13.42 11.58C13.0333 11.1933 12.56 11 12 11C11.44 11 10.9667 11.1933 10.58 11.58C10.1933 11.9667 10 12.44 10 13C10 13.56 10.1933 14.0333 10.58 14.42C10.9667 14.8067 11.44 15 12 15Z" />
+    </svg>
+  );
+};
+
+export default ViewLogsIcon;
diff --git a/plugins/tekton/src/components/PipelineRunList/PipelineRunColumnHeader.ts b/plugins/tekton/src/components/PipelineRunList/PipelineRunColumnHeader.ts
@@ -28,4 +28,8 @@ export const PipelineRunColumnHeader: TableColumn[] = [
     title: 'DURATION',
     field: 'status.completionTime',
   },
+  {
+    id: 'actions',
+    title: 'ACTIONS',
+  },
 ];
diff --git a/plugins/tekton/src/components/PipelineRunList/PipelineRunRow.tsx b/plugins/tekton/src/components/PipelineRunList/PipelineRunRow.tsx
@@ -18,6 +18,7 @@ import { PipelineRunKind } from '@janus-idp/shared-react';
 import { OpenRowStatus, tektonGroupColor } from '../../types/types';
 import { pipelineRunDuration } from '../../utils/tekton-utils';
 import { PipelineRunVisualization } from '../pipeline-topology';
+import PipelineRunRowActions from './PipelineRunRowActions';
 import PipelineRunTaskStatus from './PipelineRunTaskStatus';
 import PlrStatus from './PlrStatus';
 import ResourceBadge from './ResourceBadge';
@@ -121,6 +122,9 @@ export const PipelineRunRow = ({
           )}
         </TableCell>
         <TableCell align="left">{pipelineRunDuration(row)}</TableCell>
+        <TableCell align="left">
+          <PipelineRunRowActions pipelineRun={row} />
+        </TableCell>
       </TableRow>
       <TableRow className={classes.plrVisRow}>
         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>

diff --git a/plugins/tekton/src/components/PipelineRunList/PipelineRunRowActions.tsx b/plugins/tekton/src/components/PipelineRunList/PipelineRunRowActions.tsx
@@ -0,0 +1,77 @@
+import * as React from 'react';
+
+import { IconButton } from '@material-ui/core';
+import { Flex, FlexItem } from '@patternfly/react-core';
+import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip/Tooltip';
+
+import { PipelineRunKind } from '@janus-idp/shared-react';
+
+import { TektonResourcesContext } from '../../hooks/TektonResourcesContext';
+import { getSbomTaskRun, isSbomTaskRun } from '../../utils/taskRun-utils';
+import ViewLogsIcon from '../Icons/ViewLogsIcon';
+import PipelineRunLogDialog from '../PipelineRunLogs/PipelineRunLogDialog';
+import PipelineRunSBOMLink from './PipelineRunSBOMLink';
+
+const PipelineRunRowActions: React.FC<{ pipelineRun: PipelineRunKind }> = ({
+  pipelineRun,
+}) => {
+  const { watchResourcesData } = React.useContext(TektonResourcesContext);
+  const [open, setOpen] = React.useState<boolean>(false);
+  const [noActiveTask, setNoActiveTask] = React.useState(false);
+  const pods = watchResourcesData?.pods?.data || [];
+  const taskRuns = watchResourcesData?.taskruns?.data || [];
+  const sbomTaskRun = getSbomTaskRun(pipelineRun?.metadata?.name, taskRuns);
+  const activeTaskName = sbomTaskRun?.metadata?.name;
+
+  const openDialog = (viewLogs?: boolean) => {
+    if (viewLogs) setNoActiveTask(true);
+    setOpen(true);
+  };
+
+  const closeDialog = () => {
+    setNoActiveTask(false);
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <PipelineRunLogDialog
+        pipelineRun={pipelineRun}
+        open={open}
+        closeDialog={closeDialog}
+        pods={pods}
+        taskRuns={taskRuns}
+        activeTask={noActiveTask ? undefined : activeTaskName}
+      />
+      <Flex gap={{ default: 'gapXs' }}>
+        <FlexItem>
+          <Tooltip content="View logs">
+            <IconButton size="small" onClick={() => openDialog(true)}>
+              <ViewLogsIcon />
+            </IconButton>
+          </Tooltip>
+        </FlexItem>
+
+        <FlexItem align={{ default: 'alignLeft' }}>
+          <Tooltip
+            content={
+              !sbomTaskRun
+                ? 'View SBOM is not applicable for this PipelineRun'
+                : 'View SBOM'
+            }
+          >
+            <IconButton
+              disabled={!sbomTaskRun || !isSbomTaskRun(sbomTaskRun)}
+              size="small"
+              onClick={() => openDialog()}
+              style={{ pointerEvents: 'auto', padding: 0 }}
+            >
+              <PipelineRunSBOMLink sbomTaskRun={sbomTaskRun} />
+            </IconButton>
+          </Tooltip>
+        </FlexItem>
+      </Flex>
+    </>
+  );
+};
+export default React.memo(PipelineRunRowActions);