Create view issues component for metrics
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 | ![]() |
Loading | ![]() |
Loaded | ![]() |
Smaller viewport:
State | Screenshot |
---|---|
Error | ![]() |
Loading | ![]() |
Loaded | ![]() |
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
- You need a GitLab Ultimate license.
- Enable the
:observability_features
feature flag. - Apply patch to load local mocks
git apply < <(curl -s https://gitlab.com/-/snippets/3725609/raw/main/mock.patch)
- Visit a metric.
- 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. - Use your Vue DevTools to toggle the props, or your browser DevTools to slow down/block requests and confirm that:
- The loading icon is rendered when loading.
- The error icon and tooltip are shown when the request fails.
Edited by Robert Hunt