Skip to content

Create view issues component for metrics

Robert Hunt requested to merge create-view-issues-component-for-metrics into master

What does this MR do and why?

This MR creates a view issues link component to be used on metrics, logs, and traces. For now this is only added to the metrics page.

This component should render the number of issues, with a loading and error state. It should then link to the anchored linked items component further down the page.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Larger viewport:

State Screenshot
Error Google_Chrome_Beta_2024-08-22_11.58.07
Loading Google_Chrome_Beta_2024-08-22_11.57.57
Loaded Google_Chrome_Beta_2024-08-22_11.57.46

Smaller viewport:

State Screenshot
Error Google_Chrome_Beta_2024-08-22_11.56.45
Loading Google_Chrome_Beta_2024-08-22_11.56.35
Loaded Google_Chrome_Beta_2024-08-22_11.56.29

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. You need a GitLab Ultimate license.
  2. Enable the :observability_features feature flag.
  3. Apply patch to load local mocks git apply < <(curl -s https://gitlab.com/-/snippets/3725609/raw/main/mock.patch)
  4. Visit a metric.
  5. Check that the View issues link and count are rendered. If you don't have any issues assigned to the metric, add some to check the count goes up.
  6. Use your Vue DevTools to toggle the props, or your browser DevTools to slow down/block requests and confirm that:
    1. The loading icon is rendered when loading.
    2. The error icon and tooltip are shown when the request fails.
Edited by Robert Hunt

Merge request reports