Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Fixes #8646 visualize wf before submitting #14034

Open
wants to merge 20 commits into
base: main
Choose a base branch
from

Conversation

Unperceivable
Copy link
Contributor

Fixes #8646

Motivation

Stumbled across the open issue while developing a complex workflow, thought I might as well give it a go myself.

Disclaimer

First time doing any front-end development.

Modifications

Added a "graph view" tab to all workflow/template creation/submission pages to visualize the workflow as a graph before submission.

  • Preview graph from submit-new-workflow
    Workflow
  • Preview graph from submit-new-workflow using workflowTemplateRef
    Workflow Ref
  • Preview graph from workflow-templates:
    Workflow Template
  • Preview graph from cluster-workflow-templates:
    Cluster Workflow
  • Preview graph from cron-workflow:
    Cron Workflow

Verification

Ran all workflows/workflow-templates under ui/test/ui/ and visually compared the predicted graph view to the resultant output.

  • Preview vs Run, Steps example:
    Preview vs Run Steps example
  • Preview vs Run, Dag example:
    Preview vs Run Dag example
  • Preview vs Run, Dag+Steps example:
    Preview vs Dag+Steps

Possible Improvements

  • Add node detail view/panel
  • Make it a Graph Editor/Allow workflow modifications through graph view
  • Improve general UX
    • Ability to hide node type and/or edge labels
    • Dedicated Color/Icon? Currently using Skipped + Clock becuase Pending(Yellow) was harder to read due to low contrast.
    • Node names/labels are truncated, this may no longer be best option since "executionStrategy" is included in the label.
    • Edge labels are small and hard to read, sometimes overlapping with node names
    • Long node types such as StepGroup do not fit to the node.

…gacy dependancies logic and extend support for enhances depends logic

Signed-off-by: Unperceivable <[email protected]>
…me of the buttons, not all options work, WIP

Signed-off-by: Unperceivable <[email protected]>
Signed-off-by: Unperceivable <[email protected]>
gy and executionStrategy issues

Signed-off-by: Unperceivable <[email protected]>
…bility, file length and reduce code duplication

Signed-off-by: Unperceivable <[email protected]>
…ated functions to make control flow more legible

Signed-off-by: Unperceivable <[email protected]>
Signed-off-by: Unperceivable <[email protected]>
@Unperceivable Unperceivable marked this pull request as draft December 27, 2024 13:23
Signed-off-by: Unperceivable <[email protected]>
Copy link
Member

@tczhao tczhao left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks incredible!

Comment on lines 33 to 36
if ('workflowTemplateRef' in workflowDefinition.spec && isLoading) {
setWorkflowFromRefrence(workflowDefinition.spec.workflowTemplateRef.name).then(() => {
setIsLoading(false);
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

@Unperceivable Unperceivable Jan 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just to clarify, the usecase is for when you submit a manifest that uses a reference to a clusterWorkflowTemplate? Because currently there is no way to submit a clusterWorkflowTemplate via reference via selection in the UI right?
image
I assumed clusterWorkflowTemplates could not be submitted via reference for some reason...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added clusterWorkflowTemplate reference support: 180a142
image

Copy link
Contributor Author

@Unperceivable Unperceivable Jan 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

kind is optional so I have to cascade the calls either way I think. It could be written to only try cluster if the kind is available I guess. What do you think?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for all the screenshots and commit ref, they are really helpful


For workflowTemplateRef to use clusterworkflow template, the clusterScope: true needs to be there, perhaps we should use this to determine if we should do a clusterworkflow template lookup instead of the current fallback method

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah ok, clusterScope is also optional but has to be available when it's a cluster template. That makes sense, thanks for explaining.
Updated the logic: 0fdb470

ui/src/shared/components/editors/graph-viewer.tsx Outdated Show resolved Hide resolved
… clusteWorkflowTemplate references

Signed-off-by: Unperceivable <[email protected]>
Signed-off-by: Unperceivable <[email protected]>
…or not in setWorkflowFromReference

Signed-off-by: Unperceivable <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

UI: Visualize a wf template before submitting (steps it will run, arguments it will take, etc..)
2 participants