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: build pipeline visualizer #731

Merged
merged 94 commits into from
Nov 3, 2023
Merged

feat: build pipeline visualizer #731

merged 94 commits into from
Nov 3, 2023

Conversation

plyr4
Copy link
Contributor

@plyr4 plyr4 commented Oct 26, 2023

requires server changes from go-vela/server#995

closes go-vela/community#71

  • adds elm DOT module
  • adds graphviz and d3 via npm
  • adds new page org/repo/1/graph for build tab titled Visualize
  • adds outbound interop for rendering the actual graph
  • adds inbound interop for handling graph interactions

the code added will retrieve a graph object from the server, generate a DOT string in Elm, generate the html using Graphviz, then bootstrap style and interactivity using d3 and scss.

inspiration was taken from the d3-graphviz by https://github.com/magjac and various CI tools.

Demo

build-viz-final.mov

Light Theme

needs some work, but so does the rest of light theme.

Screenshot 2023-10-27 at 9 46 06 AM

@wass3r
Copy link
Collaborator

wass3r commented Nov 1, 2023

see the fix, thank you! only feedback i have is that i sort of expected the whole container/stage to get marked as failed as it happens in your video from the description:
image

in my case it stayed green even though one of the steps error'd and caused the build to fail. i think the only scenario i can see where the whole container/stage should still be green is if they had ruleset: continue: true in there on the steps that failed? (i didn't do much testing on that yet)

@plyr4
Copy link
Contributor Author

plyr4 commented Nov 2, 2023

sure I'll check out that scenario. that logic is controlled by the BuildGraph endpoint so the best we can do is tweak the OverallStageStatus function in the server code to be better at determining "stage status" and then the UI will just reflect whatever it returns

wass3r
wass3r previously requested changes Nov 2, 2023
Copy link
Collaborator

@wass3r wass3r left a comment

Choose a reason for hiding this comment

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

one generic note: make sure to add license headers and fix outdated ones. otherwise, some inline comments, suggestions, etc.

src/elm/Pages/Build/Graph/Interop.elm Outdated Show resolved Hide resolved
src/elm/Main.elm Outdated Show resolved Hide resolved
src/elm/Pages/Build/Graph/View.elm Outdated Show resolved Hide resolved
src/elm/Pages/Build/Graph/View.elm Outdated Show resolved Hide resolved
src/static/graph.ts Outdated Show resolved Hide resolved
src/static/index.d.ts Outdated Show resolved Hide resolved
src/scss/_graph.scss Outdated Show resolved Hide resolved
src/scss/_graph.scss Show resolved Hide resolved
src/elm/Pages/Build/Graph/DOT.elm Outdated Show resolved Hide resolved
src/elm/Pages/Build/Graph/DOT.elm Show resolved Hide resolved
wass3rw3rk
wass3rw3rk previously approved these changes Nov 2, 2023
src/elm/Pages/Build/Graph/DOT.elm Outdated Show resolved Hide resolved
Comment on lines +103 to +127
export type GraphData = {
/** @property dot: string */
dot: string;
/** @property buildID: number */
buildID: number;
/** @property filter: string */
filter: string;
/** @property focusedNode: number */
focusedNode: number;
/** @property showServices: boolean */
showServices: boolean;
/** @property showSteps: boolean */
showSteps: boolean;
/** @property centerOnDraw: boolean */
centerOnDraw: boolean;
};

export type GraphInteraction = {
/** @property eventType: string */
eventType: string;
/** @property href: string */
href: string;
/** @property nodeID: string */
nodeID: string;
};
Copy link
Member

Choose a reason for hiding this comment

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

❤️

@wass3r wass3r dismissed their stale review November 2, 2023 18:42

wass3rw3rk is representing

wass3rw3rk
wass3rw3rk previously approved these changes Nov 2, 2023
@plyr4 plyr4 merged commit 8cf3f88 into main Nov 3, 2023
12 checks passed
@plyr4 plyr4 deleted the feat/viz-d3 branch November 3, 2023 15:07
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.

Add pipeline visualizations
5 participants