Skip to content

Add view all tab to the clusters page

What does this MR do and why?

This MR adds a view with both agents and clusters available to the Kubernetes section.

Current MR summaries changes to the Kubernetes section UX will be delivered in the following steps:

  1. Move clusters_empty_state component to Vue --> !73064 (merged)
  2. Change the navigation for the clusters base page --> !73163 (merged)
  3. Change the copy and empty state illustrations in the existing components --> !73586 (merged)
  4. Change the navigation on the clusters page to Vue and actions button on the top of the page (introducing the clusters_main_view and clusters_actions components --> !73637 (merged)
  5. Add the 'All' tab <-- \textcolor{#FC6D26}{\textsf{You are here}}
  6. Add an empty state variant for the Install new Agent modal --> !73636 (merged)

Adding a new view to show both Agent and Certificate based integrations as cards in the first tab. It shows up to 6 integrations in each card or the empty state.

  • Agent tab should have the Recommended badge showing the tooltip on hover with some info and link to the docs.
  • In case there are no connected agents it should show the Install new Agent button that opens the popup for the Agent creation UI
  • Otherwise, there should appear a link to the agents' tab saying View all %{number} Agent based integrations. The number of the integrations should be shown here only if it's more than 6.
  • In case there are no clusters connected via certificate it should show the button Connect existing cluster that navigates to the /clusters/new?tab=add view
  • Otherwise, there should appear a link to the clusters' tab saying View all %{number} Certificate based integrations with the same logic as for the agents' card

More information is in the main MR(!71482 (closed))

Screenshots or screen recordings

  • With both empty states

Screenshot_2021-10-20_at_00.17.21 Screenshot_2021-10-20_at_00.17.37

  • With one empty state

Screenshot_2021-10-20_at_00.18.40

  • With less than 6 integrations

Screenshot_2021-10-20_at_00.21.24

  • With more than 6 integratinos

Screenshot_2021-10-20_at_00.19.53

Recommended badge:

Screenshot_2021-10-20_at_00.23.23

How to set up and validate locally

  1. Visit the Infrastructure -> Kubernetes clusters section
  2. To add content to the view follow these guides:

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #340759 (closed)

Edited by Anna Vovchenko

Merge request reports