diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskNode.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskNode.tsx index 6c21440b..2c6a18c3 100644 --- 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 = ({ 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 index 7c5f42d5..96f7be21 100644 --- 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: , + 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 index 9f624b9d..f84be8cb 100644 --- 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 = observer( badgeTooltip, badgePopoverProps, badgePopoverParams, + customStatusIcon, nameLabelClass, taskIconClass, taskIcon, @@ -296,6 +299,7 @@ const TaskNodeInner: React.FC = observer( showStatusState, leadSize, leadIcon, + customStatusIcon, statusSize, badgeSize, badge, @@ -437,7 +441,7 @@ const TaskNodeInner: React.FC = observer( (status === RunStatus.Running || status === RunStatus.InProgress) && styles.modifiers.spin )} > - + {customStatusIcon ?? } ) : null} @@ -501,7 +505,7 @@ const TaskNodeInner: React.FC = observer( (status === RunStatus.Running || status === RunStatus.InProgress) && styles.modifiers.spin )} > - + {customStatusIcon ?? } )}