Option to customise PipeilneRuns view

[dippynark]

Feature request

We have just upgraded Tekton Dashboard from v0.26.0 to v0.48.0 and in the PipelineRuns tab it seems there has been a number of changes which we have found make it harder to "see" what is happening at a glance:

• The status column is no longer on the far left so you need to look left and right to see all the details after identifying a PipelineRun failure
• Some information that was previously in separate columns has been stacked in the same column (e.g. Pipeline name and Namespace) which has increased the height of each column meaning less information fits on the screen

We are using Tekton to manage 100's of Kubernetes clusters for various development teams across our organisation and so the ability to get a view of recent successes/failures is very useful, however after this upgrade it feels "harder" to parse the information being shown (of course, this is probably quite subjective, but the whole team have felt a similar way).

I assume these changes were made to make it easier to view the information on smaller screens and I am aware of the ability to filter the output, but I was wondering if there is a way to customise some aspects of the view (e.g. by mounting a ConfigMap with custom CSS) that would allow us to tweak things to better support our use case.

I general we love Tekton Dashboard so these are very nit picky issues relative to all of the benefits we get from using this tool!

[AlanGreene]

Hi @dippynark, thanks for the feedback. I'm glad to hear you're getting some good benefits from using the Dashboard.

I assume these changes were made to make it easier to view the information on smaller screens

Not exactly. The changes were made in response to a large amount of user feedback as well as the desire to display more information, such as trigger info, more granular / detailed status, etc..

The biggest change to the PipelineRuns page to adopt the current table design (in v0.27.0, May 2022) was undertaken after a number of rounds of design research including comparison with similar products, user interviews, etc.

The users we spoke to included varying levels of experience, as well as varying levels of familiarity with CI/CD systems, i.e. some already familiar with Tekton, some only familiar with other CI/CD systems, as well as some with no particular experience with any CI/CD system. These covered a number of roles, including developers, DevOps, SRE, admins, etc., to ensure we could address the most common use cases.

We also reviewed the approaches taken by other systems, including OpenShift Pipelines, Azure Pipelines, Jenkins X, Kubeflow, any many more. We found that in the majority of these the status is not on the left, rather it's at or near the middle of the row. This allows users to focus on the status first for quick visual filtering, then find the next most important related information at a glance on either side.

this is probably quite subjective, but the whole team have felt a similar way

I'm sorry to hear your team finds the new design harder to use, that was certainly not our intent. The reason we interviewed such as wide variety of users was to ensure we gathered as much diverse input as possible covering many different use cases and experience levels. Unfortunately it's not possible to cover every combination or use case, and it sounds like your team may be one of those cases.

The vast majority of the feedback we've received for the new design has been positive, and we've tried to address any suggestions for enhancement where reasonable.

You mentioned 2 main issues in your description:

• position of the status
• combination of multiple fields in a single column

Are there any other issues that you find are affecting your team's ability to use the Dashboard effectively? Either related to the display of the existing information, or possibly any additional content that's missing.

Can you also share more details about the specific task(s) your team are trying to achieve on this page or while using this page? This would help us to better understand any gaps we may have overlooked in previous design exercises.

Can you share a sketch of what you would expect to find on this page to make it easier for you and your team to achieve your goals, and describe how you would use it? This doesn't have to look good, even a rough pencil sketch on paper would be great. In lieu of a sketch, a description of the columns and how you expect their content to be presented / interacted with would be fine.

Would the customisations be applied consistently to all users, or would you expect users to be able to customise things according to their own preferences? Or perhaps some combination of these depending on the type of customisation.

Are there any other customisations you would like to see?

I was wondering if there is a way to customise some aspects of the view

There's nothing officially supported by the Dashboard for this, however you could load some custom CSS via whatever reverse proxy you've deployed in front of the Dashboard. You would need to reference your proxy's documentation for how to inject custom content into a response.

The Dashboard is deployed as a single page app with a single document root, i.e. the HTML document served at the Dashboard's context root. This means that any styles you inject to this document would affect all pages in the app. If you want to restrict your custom styles to the PipelineRuns (and presumably also TaskRuns / CustomRuns) page, you could scope your CSS using :has(td.cell-run) or similar to apply the styles only when the page contains a table cell with the cell-run class which is used on the run list pages.

Bear in mind that approach would only allow for visual changes, the underlying structure and functionality of the table would remain as-is. You could probably get creative with changing the default display mode of the elements to achieve a different layout, but this would likely cause issues with keyboard navigation and accessibility if the visual and logical orders no longer match.

Thanks again for the feedback, we really appreciate it 😸

[dippynark]

Hi @AlanGreene,

Thank you very much, this reasoning all makes sense and of course one view is never going to perfectly match every use case so I think it'll be a case of just getting used to the new layout. We may look into your proxy suggestion if we have bandwidth.

Happy for this issue to be closed, but will just give some more context around how we are using Tekton Dashboard in case this is useful for future design:

• We are a Kubernetes platform team managing 100s of clusters for development teams (customers) inc. managed addons, cluster policy, ingress etc.
• The high-level architecture is that for each environment (e.g. dev/staging/prod) we have one management cluster which manages all of the customer clusters in that environment
• Cluster management is driven by Tekton Pipelines installed onto the management clusters; we have a pipeline which reconciles customer-supplied configuration (e.g. which addons to install, node pool configuration etc.) which allows customers self-service control of particular aspects of the cluster but still allows us to roll out upgrades etc. without customer interaction
• Tekton Dashboard runs on the management clusters and allows the platform team and customers to see recent activity against managed clusters. We're still relying on Prometheus for detecting issues, but it provides a picture of what is going on right now (e.g. recent failures to apply cluster configuration or the progress of cluster upgrades etc.)

[AlanGreene]

That's good to know, thanks for sharing more detail. We'll definitely keep this in mind for future design changes.