Skip to content

Commit

Permalink
feat(ui): Group nodes based on templateRef and show invoking templa…
Browse files Browse the repository at this point in the history 
…te name. Fixes argoproj#11106 (argoproj#13511)

Signed-off-by: Adrien Delannoy <a.delannoyfr@gmail.com>
  • Loading branch information
@Adrien-D
Adrien-D authored Oct 21, 2024
1 parent 6fa5365 commit 5e02f6e
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 23 deletions.
4 changes: 3 additions & 1 deletion ui/src/app/shared/components/graph/graph-panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,9 @@ export function GraphPanel(props: Props) {
.filter(([n, label]) => label.x !== null && visible(n))
.map(([n, label]) => (
<g key={`node/${n}`} transform={`translate(${label.x},${label.y})`}>
<title>{n}</title>
<title>
{n} ({label.label})
</title>
<g
className={`node ${label.classNames || ''} ${props.selectedNode === n ? ' selected' : ''}`}
style={{strokeWidth: nodeSize / 15}}
Expand Down
22 changes: 22 additions & 0 deletions ui/src/app/workflows/components/workflow-dag/workflow-dag-render-options-panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,28 @@ export function WorkflowDagRenderOptionsPanel(props: WorkflowDagRenderOptions &
title='Expand all nodes'>
<i className='fa fa-expand fa-fw' data-fa-transform='rotate-45' />
</a>
<a
onClick={() =>
props.onChange({
...workflowDagRenderOptions(),
showInvokingTemplateName: !workflowDagRenderOptions().showInvokingTemplateName
})
}
className={workflowDagRenderOptions().showInvokingTemplateName ? 'active' : ''}
title='Show invoking template name'>
<i className='fa fa-tag fa-fw' data-fa-transform='rotate-45' />
</a>
<a
onClick={() =>
props.onChange({
...workflowDagRenderOptions(),
showTemplateRefsGrouping: !workflowDagRenderOptions().showTemplateRefsGrouping
})
}
className={workflowDagRenderOptions().showTemplateRefsGrouping ? 'active' : ''}
title='Group by templateRefs'>
<i className='fa fa-sitemap fa-fw' />
</a>
</>
);
}
71 changes: 49 additions & 22 deletions ui/src/app/workflows/components/workflow-dag/workflow-dag.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import {WorkflowDagRenderOptionsPanel} from './workflow-dag-render-options-panel
export interface WorkflowDagRenderOptions {
expandNodes: Set<string>;
showArtifacts: boolean;
showInvokingTemplateName: boolean;
showTemplateRefsGrouping: boolean;
}

interface WorkflowDagProps {
Expand All @@ -36,18 +38,6 @@ function getNodeLabelTemplateName(n: NodeStatus): string {
return n.templateName || (n.templateRef && n.templateRef.template + '/' + n.templateRef.name) || 'no template';
}

function nodeLabel(n: NodeStatus) {
const phase = n.type === 'Suspend' && n.phase === 'Running' ? 'Suspended' : n.phase;
return {
label: shortNodeName(n),
genre: n.type,
icon: icons[phase] || icons.Pending,
progress: phase === 'Running' && progress(n),
classNames: phase,
tags: new Set([getNodeLabelTemplateName(n)])
};
}

const classNames = (() => {
const v: {[label: string]: boolean} = {
Artifact: true,
Expand All @@ -65,7 +55,9 @@ export class WorkflowDag extends React.Component<WorkflowDagProps, WorkflowDagRe
super(props);
this.state = {
expandNodes: new Set(),
showArtifacts: localStorage.getItem('showArtifacts') !== 'false'
showArtifacts: localStorage.getItem('showArtifacts') !== 'false',
showInvokingTemplateName: localStorage.getItem('showInvokingTemplateName') !== 'false',
showTemplateRefsGrouping: localStorage.getItem('showTemplateRefsGrouping') !== 'false'
};
}

Expand Down Expand Up @@ -100,8 +92,28 @@ export class WorkflowDag extends React.Component<WorkflowDagProps, WorkflowDagRe
);
}

private nodeLabel(n: NodeStatus, parent?: NodeStatus) {
const phase = n.type === 'Suspend' && n.phase === 'Running' ? 'Suspended' : n.phase;
let label = shortNodeName(n);

if (this.state.showInvokingTemplateName) {
label = `${parent?.templateRef?.name ?? parent?.templateName ?? n.templateName}:${label}`;
}

return {
label,
genre: n.type,
icon: icons[phase] || icons.Pending,
progress: phase === 'Running' && progress(n),
classNames: phase,
tags: new Set([getNodeLabelTemplateName(n)])
};
}

private saveOptions(newChanges: WorkflowDagRenderOptions) {
localStorage.setItem('showArtifacts', newChanges.showArtifacts ? 'true' : 'false');
localStorage.setItem('showInvokingTemplateName', newChanges.showInvokingTemplateName ? 'true' : 'false');
localStorage.setItem('showTemplateRefsGrouping', newChanges.showTemplateRefsGrouping ? 'true' : 'false');
this.setState(newChanges);
}

Expand Down Expand Up @@ -133,6 +145,13 @@ export class WorkflowDag extends React.Component<WorkflowDagProps, WorkflowDagRe
if (!allNodes[nodeId] || !allNodes[nodeId].children) {
return [];
}

if (this.state.showTemplateRefsGrouping) {
return Object.values(allNodes)
.filter(node => node.boundaryID === nodeId && genres[node.type])
.map(node => node.id);
}

return allNodes[nodeId].children.filter(child => allNodes[child]);
};
const pushChildren = (nodeId: string, isExpanded: boolean, queue: PrepareNode[]): void => {
Expand Down Expand Up @@ -163,14 +182,22 @@ export class WorkflowDag extends React.Component<WorkflowDagProps, WorkflowDagRe
children: getChildren(children[children.length - 1])
});
} else {
// Node will not be collapsed
children.map(child =>
queue.push({
nodeName: child,
parent: nodeId,
// Node will not be collapsed if no templateRefs are present
children.map(child => {
let parentNodeId = nodeId;
let nodeName = child;

if (allNodes[nodeId].templateRef && this.state.showTemplateRefsGrouping) {
parentNodeId = allNodes[child].boundaryID;
nodeName = !isExpanded ? getCollapsedNodeName(nodeId, `template:${allNodes[nodeId].templateRef.name}`, allNodes[child].type) : child;
}

return queue.push({
nodeName,
parent: parentNodeId,
children: getChildren(child)
})
);
});
});
}
};

Expand Down Expand Up @@ -201,7 +228,7 @@ export class WorkflowDag extends React.Component<WorkflowDagProps, WorkflowDagRe
}
const isExpanded: boolean = this.state.expandNodes.has('*') || this.state.expandNodes.has(item.nodeName);

nodes.set(item.nodeName, nodeLabel(child));
nodes.set(item.nodeName, this.nodeLabel(child, allNodes[item.parent]));
edges.set({v: item.parent, w: item.nodeName}, {});

// If we have already considered the children of this node, don't consider them again
Expand Down Expand Up @@ -232,7 +259,7 @@ export class WorkflowDag extends React.Component<WorkflowDagProps, WorkflowDagRe
if (onExitHandlerNodeId) {
this.getOutboundNodes(this.props.workflowName).forEach(v => {
const exitHandler = allNodes[onExitHandlerNodeId.id];
nodes.set(onExitHandlerNodeId.id, nodeLabel(exitHandler));
nodes.set(onExitHandlerNodeId.id, this.nodeLabel(exitHandler));
if (nodes.has(v)) {
edges.set({v, w: onExitHandlerNodeId.id}, {});
}
Expand Down

0 comments on commit 5e02f6e

Please sign in to comment.