MetalK8s UI Overview page - Global Health

[ChengYanJin]

Component: UI

Why this is needed:
To show the global health of the metalk8s cluster.

What should be done:
#3088 (comment)

Implementation proposal (strongly recommended):

• the GlobalHealthBar component in core-ui is ready.
• add platform health selector in shell-ui
  alertname: ["PlatfromAtRisk", "PlatformDegraded"]
• we will need to retrieve the platform alerts through Loki API in order to get the history of the alerts.
  getLast7DaysAlerts() function from src/services/loki/api.js

// by default to get the last 7day alerts from Loki
export function getLast7DaysAlerts(): Promise<Alert[]> {
const start = new Date(
new Date().getTime() - 7 * 24 * 60 * 60 * 1000,
).toISOString();
const end = new Date().toISOString();

return getAlertsLoki(start, end);
}

About LOKI: https://metal-k8s.readthedocs.io/en/latest/developer/architecture/alert-history.html?highlight=LOKI

Test plan:
TBD

[ChengYanJin]

With @JBWatenbergScality, we found that we will need to implement more logic for the data we get from LOKI API in order to pass them to the Global Health Component.

The design is shown below, we will add the technical design in the design document.