feat(pipelines): support customStatusIcon (#215)

* feat(pipelines): support customStatusIcon * feat(pipelines): support customStatusIcon
patternfly · Jun 4, 2024 · 018c394 · 018c394
1 parent 871677a
commit 018c394
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskNode.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskNode.tsx
@@ -82,6 +82,7 @@ const DemoTaskNode: React.FunctionComponent<DemoTaskNodeProps> = ({
           status={data.status}
           hideDetailsAtMedium
           leadIcon={getLeadIcon(data.taskJobType)}
+          customStatusIcon={data.customStatusIcon}
           taskIconClass={pipelineOptions.showIcons ? logos.get('icon-java') : undefined}
           taskIconTooltip={pipelineOptions.showIcons ? 'Environment' : undefined}
           badge={pipelineOptions.showBadges ? data.taskProgress : undefined}

diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/useDemoPipelineNodes.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/useDemoPipelineNodes.tsx
@@ -9,6 +9,7 @@ import {
   RunStatus,
   WhenStatus
 } from '@patternfly/react-topology';
+import { BanIcon } from '@patternfly/react-icons';
 
 export const NODE_PADDING_VERTICAL = 45;
 export const NODE_PADDING_HORIZONTAL = 15;
@@ -267,5 +268,34 @@ export const useDemoPipelineNodes = (
     }
     tasks.push(iconTask2);
 
+    const iconTask3: PipelineNodeModel = {
+      id: `task-icon-3`,
+      type: DEFAULT_TASK_NODE_TYPE,
+      label: `Custom status icon task`,
+      width: DEFAULT_TASK_WIDTH + (showContextMenu ? 10 : 0) + (showBadges ? 40 : 0),
+      height: DEFAULT_TASK_HEIGHT,
+      style: {
+        padding: [NODE_PADDING_VERTICAL, NODE_PADDING_HORIZONTAL + (showIcons ? 25 : 0)]
+      },
+      runAfterTasks: [iconTask2.id]
+    };
+
+    iconTask3.data = {
+      status: RunStatus.Failed,
+      customStatusIcon: <BanIcon />,
+      taskProgress: '3/4',
+      taskType: 'java',
+      taskTopic: 'Environment',
+      columnGroup: (TASK_STATUSES.length % STATUS_PER_ROW) + 1
+    };
+
+    if (!layout) {
+      const row = Math.ceil((TASK_STATUSES.length + 1) / STATUS_PER_ROW) - 1;
+      const columnWidth = COLUMN_WIDTH + (showIcons ? 15 : 0) + (showBadges ? 32 : 0) + (showContextMenu ? 20 : 0);
+      iconTask3.x = (showIcons ? 28 : 0) + 3 * columnWidth;
+      iconTask3.y = GRAPH_MARGIN_TOP + row * ROW_HEIGHT;
+    }
+    tasks.push(iconTask3);
+
     return [...tasks, ...finallyNodes, finallyGroup];
   }, [layout, showBadges, showContextMenu, showGroups, showIcons]);
diff --git a/packages/module/src/pipelines/components/nodes/TaskNode.tsx b/packages/module/src/pipelines/components/nodes/TaskNode.tsx
@@ -47,6 +47,8 @@ export interface TaskNodeProps {
   statusIconSize?: number;
   /** Flag indicating the status indicator */
   showStatusState?: boolean;
+  /** Custom icon to use as the status icon */
+  customStatusIcon?: React.ReactNode;
   /** Flag indicating the node should be scaled, best on hover of the node at lowest scale level */
   scaleNode?: boolean;
   /** Flag to hide details at medium scale */
@@ -138,6 +140,7 @@ const TaskNodeInner: React.FC<TaskNodeInnerProps> = observer(
     badgeTooltip,
     badgePopoverProps,
     badgePopoverParams,
+    customStatusIcon,
     nameLabelClass,
     taskIconClass,
     taskIcon,
@@ -296,6 +299,7 @@ const TaskNodeInner: React.FC<TaskNodeInnerProps> = observer(
       showStatusState,
       leadSize,
       leadIcon,
+      customStatusIcon,
       statusSize,
       badgeSize,
       badge,
@@ -437,7 +441,7 @@ const TaskNodeInner: React.FC<TaskNodeInnerProps> = observer(
                     (status === RunStatus.Running || status === RunStatus.InProgress) && styles.modifiers.spin
                   )}
                 >
-                  <StatusIcon status={status} />
+                  {customStatusIcon ?? <StatusIcon status={status} />}
                 </g>
               </g>
             ) : null}
@@ -501,7 +505,7 @@ const TaskNodeInner: React.FC<TaskNodeInnerProps> = observer(
                   (status === RunStatus.Running || status === RunStatus.InProgress) && styles.modifiers.spin
                 )}
               >
-                <StatusIcon status={status} />
+                {customStatusIcon ?? <StatusIcon status={status} />}
               </g>
             </g>
           )}