Background

In order for customers or internal teams to troubleshoot better, they need to be able to see the dashboards created using Perses inside the OpenShift console. We will use the monitoring plugin which already supports console dashboards coming from Grafana, to provide the Perses dashboard functionality

Outcomes

Create a component in the monitoring plugin that can render a Perses dashboard based on the dashboard schema returned by the Perses API.

There are 2 dropdowns, one for selecting namespaces and another for selecting the dashboards in the selected namespace.

Steps

1. From the Perses Hello world component created in OU-433
2. Copy the dashboard selector, variables, time range and auto refresh from the current Dashboard component to Perses component
3. Use the DashboardView component from Perses to render the perses dashboard, based on the Perses dashboard definition.
4. Create a single PersesWrapper and include all the Perses providers like in the Distributed tracing plugin. Wrap also the variables in this provider.
5. Use the Patternfly theme for Perses (ECharts) charts
6. Adjust the Grid to use Patternfly grid instead of material UI Grid

Previous work

https://docs.google.com/presentation/d/1h7aRZkl5Kr9laXaBodxQv5IsLBZF06g0gigXbCqv9H4/edit#slide=id.g1dd06ee962a_0_4384

Create dashboard flow chart

Figma design