feat: Add taskRun steps into PipelineRun diagram graph, add zoom-in, …

…zoom-out, reset zoom buttons (#66) Jira: EPMDEDP-12703 Related: #66 Change-Id: I63f47b494eedc03d83868fec61c1a9c602718a3e
epam · Oct 13, 2023 · 22c02bd · 22c02bd
1 parent 644fb7a
commit 22c02bd
Show file tree

Hide file tree

Showing 9 changed files with 473 additions and 165 deletions.
diff --git a/src/components/Graph/components/Node/index.tsx b/src/components/Graph/components/Node/index.tsx
@@ -1,22 +1,10 @@
-import CardNode, { CardNodeColumn, CardNodeTitle } from '@carbon/charts-react/diagrams/CardNode';
-import { Link, Paper, Typography } from '@material-ui/core';
+import CardNode from '@carbon/charts-react/diagrams/CardNode';
+import { Paper } from '@material-ui/core';
 import React from 'react';
-import { StatusIcon } from '../../../StatusIcon';
 import { useStyles } from './styles';
 import { NodeProps } from './types';
 
-export const Node = ({
-    x,
-    y,
-    height,
-    width,
-    title,
-    url,
-    icon,
-    color,
-    isRotating,
-    status,
-}: NodeProps) => {
+export const Node: React.FC<NodeProps> = ({ x, y, height, width, color, children }) => {
     const classes = useStyles(color);
 
     return (
@@ -27,30 +15,7 @@ export const Node = ({
             style={{ overflow: 'visible' }}
         >
             <Paper style={{ height, width, overflow: 'hidden' }}>
-                <CardNode className={classes.node}>
-                    <CardNodeColumn>
-                        <StatusIcon
-                            icon={icon}
-                            color={color}
-                            isRotating={isRotating}
-                            Title={status}
-                            width={15}
-                        />
-                    </CardNodeColumn>
-                    <CardNodeColumn>
-                        <CardNodeTitle>
-                            {url ? (
-                                <Link href={url} target={'_blank'}>
-                                    {title}
-                                </Link>
-                            ) : (
-                                <Typography variant={'subtitle2'} title={title}>
-                                    {title}
-                                </Typography>
-                            )}
-                        </CardNodeTitle>
-                    </CardNodeColumn>
-                </CardNode>
+                <CardNode className={classes.node}>{children as React.ReactElement}</CardNode>
             </Paper>
         </foreignObject>
     );

diff --git a/src/components/Graph/components/types.ts b/src/components/Graph/components/types.ts
@@ -1,25 +1,16 @@
 import { ElkExtendedEdge, ElkNode } from 'elkjs';
 
-export interface MyNode extends ElkNode {
-    id: string;
-    color: string;
-    icon: string;
-    status: string;
-    isRotating: boolean;
-    title: string;
-    height: number;
-    width: number;
-    url?: string;
-}
-
-export interface MyEdge extends ElkExtendedEdge {
+export interface MyNode<T = unknown> extends ElkNode {
+    data: T;
     color: string;
 }
 
 export interface GraphProps {
     id: string;
-    nodes: MyNode[];
-    edges: MyEdge[];
+    nodes: ElkNode[];
+    edges: ElkExtendedEdge[];
     type?: string;
     direction?: string;
+    renderEdge: (edge: ElkExtendedEdge) => JSX.Element;
+    renderNode: (node: ElkNode) => JSX.Element;
 }
diff --git a/src/components/Graph/index.tsx b/src/components/Graph/index.tsx
@@ -1,14 +1,22 @@
 import '@carbon/charts/styles-g90.css';
 import { ArrowRightMarker } from '@carbon/charts-react/diagrams/Marker';
+import { Icon } from '@iconify/react';
+import { IconButton } from '@material-ui/core';
 import { ElkNode } from 'elkjs';
 import ELK from 'elkjs/lib/elk.bundled';
 import React, { useEffect, useState } from 'react';
 import { ReactZoomPanPinchRef, TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
-import { Edge } from './components/Edge';
-import { Node } from './components/Node';
 import { GraphProps } from './components/types';
 
-export const Graph = ({ direction = 'RIGHT', id, nodes, edges, type = 'detailed' }: GraphProps) => {
+export const Graph = ({
+    direction = 'RIGHT',
+    id,
+    nodes,
+    edges,
+    renderEdge,
+    renderNode,
+    type = 'detailed',
+}: GraphProps) => {
     const elk = React.useMemo(
         () =>
             new ELK({
@@ -66,24 +74,48 @@ export const Graph = ({ direction = 'RIGHT', id, nodes, edges, type = 'detailed'
             initialPositionY={0}
             ref={transformComponentRef}
         >
-            <TransformComponent>
-                <svg
-                    style={{ height: graphHeight + 100, width: graphWidth }}
-                    viewBox={`0 0 ${graphWidth} ${graphHeight + 100 - graphHeight / 2}`}
-                    id="graph-svg"
-                >
-                    <defs>
-                        <ArrowRightMarker id="arrowRight" />
-                    </defs>
-                    {graphEdges.map((edge, i) => {
-                        return <Edge direction={direction} key={`edge_${i}`} {...edge} />;
-                    })}
-                    {graphNodes.map((node, i) => {
-                        //@ts-ignore
-                        return <Node key={`node_${i}`} {...node} />;
-                    })}
-                </svg>
-            </TransformComponent>
+            {({ zoomIn, zoomOut, resetTransform }) => {
+                return (
+                    <React.Fragment>
+                        <TransformComponent>
+                            <svg
+                                style={{ height: graphHeight + 100, width: graphWidth }}
+                                viewBox={`0 0 ${graphWidth} ${graphHeight + 100 - graphHeight / 2}`}
+                                id="graph-svg"
+                            >
+                                <defs>
+                                    <ArrowRightMarker id="arrowRight" />
+                                </defs>
+                                {graphEdges.map((edge, i) => {
+                                    return (
+                                        <React.Fragment key={`edge_${i}`}>
+                                            {renderEdge(edge)}
+                                        </React.Fragment>
+                                    );
+                                })}
+                                {graphNodes.map((node, i) => {
+                                    return (
+                                        <React.Fragment key={`node_${i}`}>
+                                            {renderNode(node)}
+                                        </React.Fragment>
+                                    );
+                                })}
+                            </svg>
+                        </TransformComponent>
+                        <div className="tools">
+                            <IconButton onClick={() => zoomIn()}>
+                                <Icon icon={'ic:baseline-zoom-in'} />
+                            </IconButton>
+                            <IconButton onClick={() => zoomOut()}>
+                                <Icon icon={'ic:baseline-zoom-out'} />
+                            </IconButton>
+                            <IconButton onClick={() => resetTransform()}>
+                                <Icon icon={'ic:baseline-zoom-in-map'} />
+                            </IconButton>
+                        </div>
+                    </React.Fragment>
+                );
+            }}
         </TransformWrapper>
     );
 };
diff --git a/src/k8s/TaskRun/constants.ts b/src/k8s/TaskRun/constants.ts
@@ -14,3 +14,13 @@ export const TASK_RUN_STATUS = {
     FALSE: 'false',
     UNKNOWN: 'unknown',
 } as const;
+
+export const TASK_RUN_STEP_STATUS = {
+    RUNNING: 'running',
+    TERMINATED: 'terminated',
+    WAITING: 'waiting',
+} as const;
+
+export const TASK_RUN_STEP_REASON = {
+    COMPLETED: 'completed',
+} as const;
diff --git a/src/k8s/TaskRun/index.ts b/src/k8s/TaskRun/index.ts
@@ -4,7 +4,12 @@ import { ICONS } from '../../icons/iconify-icons-mapping';
 import { ValueOf } from '../../types/global';
 import { streamResults } from '../common/streamResults';
 import { TaskRunKubeObjectConfig } from './config';
-import { TASK_RUN_REASON, TASK_RUN_STATUS } from './constants';
+import {
+    TASK_RUN_REASON,
+    TASK_RUN_STATUS,
+    TASK_RUN_STEP_REASON,
+    TASK_RUN_STEP_STATUS,
+} from './constants';
 import {
     TASK_RUN_LABEL_SELECTOR_CD_PIPELINE_NAME,
     TASK_RUN_LABEL_SELECTOR_PARENT_PIPELINE_RUN,
@@ -46,7 +51,10 @@ export class TaskRunKubeObject extends K8s.cluster.makeKubeObject<TaskRunKubeObj
         return taskRun?.status?.conditions?.[0]?.reason || 'Unknown';
     }
 
-    static getStatusIcon(status: string, reason: string): [string, string, boolean?] {
+    static getStatusIcon(
+        status: ValueOf<typeof TASK_RUN_STATUS>,
+        reason: ValueOf<typeof TASK_RUN_REASON>
+    ): [string, string, boolean?] {
         if (status === undefined || reason === undefined) {
             return [ICONS.UNKNOWN, STATUS_COLOR.UNKNOWN];
         }
@@ -77,6 +85,32 @@ export class TaskRunKubeObject extends K8s.cluster.makeKubeObject<TaskRunKubeObj
         }
     }
 
+    static getStepStatusIcon(
+        status: ValueOf<typeof TASK_RUN_STEP_STATUS>,
+        reason: ValueOf<typeof TASK_RUN_STEP_REASON>
+    ): [string, string, boolean?] {
+        if (status === undefined) {
+            return [ICONS.UNKNOWN, STATUS_COLOR.UNKNOWN];
+        }
+        const _status = status.toLowerCase();
+        const _reason = reason.toLowerCase();
+
+        switch (_status) {
+            case TASK_RUN_STEP_STATUS.RUNNING:
+                return [ICONS.LOADER_CIRCLE, STATUS_COLOR.IN_PROGRESS, true];
+            case TASK_RUN_STEP_STATUS.WAITING:
+                return [ICONS.LOADER_CIRCLE, STATUS_COLOR.IN_PROGRESS, true];
+            case TASK_RUN_STEP_STATUS.TERMINATED:
+                if (_reason === TASK_RUN_STEP_REASON.COMPLETED) {
+                    return [ICONS.CHECK_CIRCLE, STATUS_COLOR.SUCCESS];
+                }
+
+                return [ICONS.CROSS_CIRCLE, STATUS_COLOR.ERROR];
+            default:
+                return [ICONS.UNKNOWN, STATUS_COLOR.UNKNOWN];
+        }
+    }
+
     static streamListByPipelineNameAndPipelineType({
         namespace,
         CDPipelineName,

diff --git a/src/override.css b/src/override.css
@@ -24,8 +24,8 @@ div[class*="SnackbarItem-variantWarning"] {
     color: #000;
 }
 
-.react-transform-wrapper {
-    width: auto !important;
+.react-transform-wrapper, .react-transform-component {
+    width: 100% !important;
     height: auto !important;
 }