-
Notifications
You must be signed in to change notification settings - Fork 16
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
Conversation
This reverts commit 0a15600.
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 |
There was a problem hiding this 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.
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; | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
❤️
requires server changes from go-vela/server#995
closes go-vela/community#71
org/repo/1/graph
for build tab titledVisualize
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.