[UI New Node Page] Add alerts table in Node Page

[ChengYanJin]

Component: ui, nodes

Why this is needed:

• We want to see all the active alerts related to this node.
• With the filter component to filter the alert base on severity.

What should be done:

• We should retrieve the alerts from Alertmanager and list all the alerts in the table

• When we add the severity filter the URL should update too.
  /newNodes/<node-name>/alerts?severity=<critical/warning>

• Remove the info selector because we only have critical and warning for the moment for Node

• if there is no severity selected then no alert display.

• When we come to the alert tab from the tab selection, by default display all the alerts(both critical and warning)
  the URL should be: /newNodes/<node-name>/alerts?severity=critical,warning or
  or /newNodes/<node-name>/alerts?severity=critical&severity=warning

Implementation proposal (strongly recommended):

Update proposal

Hardcode the alerts related to nodes in frontend.

Store all the selected severity in an array

const selectedSeverity = [ ];

const [isCriticalSelected, setIsCriticalSelected] = useState();
const [isWarningSelected, setIsWarningSelected] = useState();

Test plan:
TBD

[gdemonet]

Before implementing this, we need a detailed list of relevant alerts to look at, and how to retrieve them (which AM query we need to perform).

[ChengYanJin]

Before implementing this, we need a detailed list of relevant alerts to look at, and how to retrieve them (which AM query we need to perform).

Hello @gdemonet ,
We have around 20 preconfigured alert rules related to Node, please check Prometheus configuration

I was hoping to retrieve them from the /api/v1/alerts, I will check it.

[gdemonet]

We have around 20 preconfigured alert rules related to Node, please check Prometheus configuration

Indeed, I just think we should have the exhaustive list stated in this ticket.

I was hoping to retrieve them from the /api/v1/alerts, I will check it.

Should work fine for now (note that the current API under development is not v1, but v2 - see here). You would need to filter this list somehow, do you plan on getting all of them and filter in the browser, or use AM's features for this (recommended)?

Side-note (cc @alexandre-allard-scality @thomasdanan): there is an "alert grouping" feature which would probably make a lot of sense to let the UI "know" what to retrieve without caring for the detailed list (mentioned above) of alert rules to consider.