UI Design Epic and PipelineRun Interactive Diagram Implementation

[kimholmes]

Expected Behavior

• A user of the Tekton Dashboard needs to find what's failed in his PipelineRun at a glance.
• A user of the Tekton Dashboard needs to drill into a failed step and quickly access the log file that corresponds to the failed attempted.
  

Actual Behavior

Additional Info

See the comments for high fidelity designs for the Tekton dashboard PipelienRun Diagram, based on the Carbon design system. It includes a map of the intended behaviors and HTML/CSS specs.

We can use the map of the behaviors to iterate on as FED works through the code.

[kimholmes]

View the high fidelity mockups at the following git links. Click on object to view associated specs:

PipelineRun Diagram View "Closed"

https://kimholmes.github.io/Exported-Specs/PipelineTopology_Closed/

PipelineRun Diagram View "Open" - Node Selected

https://kimholmes.github.io/Exported-Specs/PipelineTopology_DetailsLogs/

PipelineRun Diagram View Logs "View more"

https://kimholmes.github.io/Exported-Specs/PipelineTopology_LogsModal/

[kimholmes]

Hover states:

Node selection:

Accordion selection:

Toolbar and Cursor behavior:

View Logs:

[kimholmes]

@AlanGreene

[AlanGreene]

@kimholmes How should we handle the hover state for expanded Tasks?

RIght now it just applies the same background fill to the whole node as when hovering in the collapsed state but it doesn't look right to me:

Do we want to apply this only to the line that's being hovered? Something like this maybe?

[kimholmes]

@AlanGreene If you're able to apply it only to the row being hovered on, that would be ideal.

[AlanGreene]

Latest here: https://alangreene.github.io/dashboard/?path=/story/graph-graph--default
There are still some quirks to work out:

• excess whitespace below tasks with multiple steps
• some steps don't stretch the full width

We should have the ability to expand/collapse the tasks early tomorrow. I had hoped to have that complete today but ran into some issues.

[carrenelloyd]

@AlanGreene

Changes related to the current Storybook implementation

https://alangreene.github.io/dashboard/?path=/story/graph-pipelinegraph--default

Height

30 px - Height of 1 pipeline
The icons + text inside the 30 pixel box should be centered vertically, meaning there should be the same amount of height above and below the text and icons.

60 px - Height of 2 pipelines

90 px - Height of 3 pipelines
The icons + text evenly distributed within the box

The pattern continues for each line of text: 120 px - Height of 4 pipelines, etc

Remove extra spacing at the bottom of the gray "Hasn't run yet" box

Arrows + Lines

The current implementation of the arrows looks like it has two pixels? If this is not the intention then perhaps it is not rendering pixels along the gird?

The same goes for the arrows—it should end with only one point, not a double point

• 1 px arrows
• $ui-04 color token
  

Width

Indicated below with purple boxes, the spacing btwn the elements on the sections should be Token: $spacing-03

• This means there is not a fixed-width box size and the expand/collapse icon will not align to the right of the box like it does in the current implementation. The box will widen with an increase in characters.
• Set max-width to: 200 px
• If the text exceeds the max-width of 200 pixels use an ellipsis in the center of the text with a Carbon Tool Tip with the entire string
  

Color

The following elements should be using color Token $ui-04

1. Outline around box
2. Icon
3. Text
4. Expand/Collapse arrow
   

Icon size

The icon size that should be used is 20x20 this will help legibility with in the icon itself

[ghost]

Do you have any estimate when this work could be available for trying out? That flow chart type of visualization of steps would be really handy.

[AlanGreene]

@tomhau01 this is under active development, you can see the current status in the storybook https://alangreene.github.io/dashboard/?path=/story/graph-pipelinegraph--default. The PipelineGraph example uses Tekton resources (in JSON format) as input to generate the graph, so all of the basics are in place to build the data model and render the diagram.

Some updates are still needed to fully support inline resource definitions and some other features added in the most recent Tekton Pipeline release. We're also working on adding the ability to pan and zoom the diagram which will be important for larger / more complex pipelines.

Keep an eye on this issue for updates as we begin making changes to the PipelineRun details page and integrating the graph. The next couple of weeks should see most of the major changes complete.

[ghost]

Thank you for the update, and I'll be happy to give it a spin once there is something to try out 👍

[tekton-robot]

Stale issues rot after 30d of inactivity.
Mark the issue as fresh with /remove-lifecycle rotten.
Rotten issues close after an additional 30d of inactivity.
If this issue is safe to close now please do so with /close.

/lifecycle rotten

Send feedback to tektoncd/plumbing.

[tekton-robot]

Rotten issues close after 30d of inactivity.
Reopen the issue with /reopen.
Mark the issue as fresh with /remove-lifecycle rotten.

/close

Send feedback to tektoncd/plumbing.

[tekton-robot]

Issues go stale after 90d of inactivity.
Mark the issue as fresh with /remove-lifecycle stale.
Stale issues rot after an additional 30d of inactivity and eventually close.
If this issue is safe to close now please do so with /close.

/lifecycle stale

Send feedback to tektoncd/plumbing.

[tekton-robot]

@AlanGreene: Reopened this issue.

In response to this:

/remove-lifecycle stale
/lifecycle frozen
/reopen

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[AlanGreene]

Next steps:

• review compatibility with current pipelines releases
  • any impact on how links in the DAG are constructed based on new features?
  • probably OK to ignore Conditions since they're deprecated and being replaced by 'when expressions'
  • how should we display retries? Worth considering this along with Improve display of when expressions and retries #1445, may have some impact
• resolve styling issues
  • unwanted whitespace in tasks with multiple steps when expanded
• decide on how the graph will be presented
  • potentially as an overlay / side panel initially until other design update on the PipelineRun + TaskRun pages can be implemented

[AlanGreene]

• resolve styling issues
  • unwanted whitespace in tasks with multiple steps when expanded

If this can't be resolved using the current approach, it may be worth considering alternative layout algorithms, or possibly changing the Node design (removing the expand/collapse behaviour) if this is contributing to the problem.

One pattern that seems to be pretty common is having a simplified summary of the child nodes displayed permanently, with more detailed information displayed in a tooltip / popover of some sort on hover or other interaction.

[AlanGreene]

/kind design

[AlanGreene]

Potential updated design for the graph:

It's more compact and slightly less likely to have unwanted edge crossings.

This requires only a small config change to the current graph code and some minor style tweaks.

Current POC keeps the expanding Task behaviour from the original:

There are still layout issues with this in some cases, but they may be easily solved. If not we can adopt a different approach to surface the step information, either directly on the Task nodes or in some form of tooltip.

[christianvogt]

Is this visualization available in the dashboard or when is it planned?

The OpenShift Console and the Tekton Pipelines VSCode Extension have visualizations. It would be great if a single pipeline visualization library could be shared amongst all 3 tools by creating a separate reusable library.

[AlanGreene]

I wasn't aware of the preview diagram provided by the VSCode extension, I'll have to take a look at that. Thanks for sharing.

The visualisation is not currently available in the Dashboard but we have revisited this issue recently (~1 month) and the latest design explorations using Carbon Charts to fit with the Carbon design language used throughout the rest of the Dashboard can be found here: https://54h4e.csb.app/

We're currently in the middle of a significant redesign effort for the PipelineRun list + details views and hope to have more time to dedicate to the visualisation work once other high priority items are complete. It's still something we're eager to add to the Dashboard.

Our plan is to make it available as a reusable library similar to our other UI components, and will be published as @tektoncd/dashboard-graph, with the option to use the UI component as-is, or just the underlying graph model + utils and for consumers to provide their own UI on top of it if they so wish. The version currently published is based on very old code and likely broken, but that will be where the new design above will be made available. https://github.com/tektoncd/dashboard/tree/main/packages/graph

[number5]

@AlanGreene just FYI, https://54h4e.csb.app/ is broken

Error
Undefined variable.
  ╷
1 │ .#{$prefix}--#{$charts-prefix}--grid {
  │    ^^^^^^^
  ╵
  stdin 1:4  root stylesheet

[AlanGreene]

@number5 thanks for the heads up, looks like an intermittent issue with the Codesandbox environment itself. We haven't changed the code in over a month and it's working for me at the moment. I did hit that error above a couple of times and it looked like Codesandbox hadn't fully installed the dependencies or was having trouble reading from the filesystem.

I'll try to narrow it down and open an issue with the Codesandbox folks.

In the meantime I'll be migrating the code into the Dashboard repo soon so we should have the examples included in our Storybook too.

[pawelkopka]

Hi, is there any eta?

[AlanGreene]

/area roadmap

[AlanGreene]

Apologies for the lack of updates. There's no ETA right now as we have been concentrating on other priorities. I have started work on migrating the POC described above into the Dashboard repo so we can begin reviewing and iterating on it properly, I'll post updates here or in linked PRs as they happen. I expect to have the initial migration complete within the next week or two. After that we will begin to review the changes required to support features introduced in recent Tekton Pipelines releases (e.g. matrix, when expressions, custom tasks, etc.) and create sub-issues to track them as appropriate.

If you have specific use cases in mind and how a visualisation could help you to achieve them, please share details as it would be very helpful to us as we finalise the designs.

[seanlaff]

@AlanGreene Thanks for the update. We're coming from a gitlab environment where this dag-pipeline views are invaluable for a large complex repo.

With regards to suggestions- I'd love if there was some way to surface the running-time of each task on the node. It would help us quickly diagnose bottlenecks in the pipeline.

[Goltergaul]

Is there any news on this?

[cmorinupgrade]

@AlanGreene Is this feature on the roadmap? That's one feature gap with Argo Workflows, which would drastically improve developer experience with regards to seeing how the DAG looks like and how it progresses through it. At large scale, this is a feature that's requested a lot by developers. Would love to see such a feature added to the dashboard, among other developer experience focused improvements.

[AlanGreene]

Yes this is still something we'd like to add.