ui/nodes: Fetch the alert for NodeAlertTab in NodePageRSP

Fix the bug of URL when click on the tab Refs: #2775
scality · Oct 16, 2020 · 9c1ba50 · 9c1ba50
1 parent ae01732
commit 9c1ba50
Showing 1 changed file with 48 additions and 18 deletions.
diff --git a/ui/src/containers/NodePageRSP.js b/ui/src/containers/NodePageRSP.js
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { Switch, Route } from 'react-router-dom';
+import { Switch, Route, useParams } from 'react-router-dom';
 import { useHistory, useLocation, useRouteMatch } from 'react-router';
 import styled from 'styled-components';
 import { Tabs } from '@scality/core-ui';
@@ -22,7 +22,12 @@ import NodePageAlertsTab from '../components/NodePageAlertsTab';
 import NodePageMetricsTab from './NodePageMetricsTab';
 import NodePageVolumesTab from '../components/NodePageVolumesTab';
 import NodePagePodsTab from '../components/NodePagePodsTab';
-import { queryTimeSpansCodes } from '../constants';
+import { TextBadge } from '../components/CommonLayoutStyle';
+import {
+  queryTimeSpansCodes,
+  NODE_ALERTS_GROUP,
+  PORT_NODE_EXPORTER,
+} from '../constants';
 import { intl } from '../translations/IntlGlobalProvider';
 
 const NodePageRSPContainer = styled.div`
@@ -46,8 +51,8 @@ const NodePageRSP = (props) => {
   const location = useLocation();
   const dispatch = useDispatch();
 
-  const { path, params } = useRouteMatch();
-  const selectedNodeName = params.name;
+  const { path, url } = useRouteMatch();
+  const { name } = useParams();
 
   // Initialize the `metricsTimeSpan` in saga state base on the URL query.
   // In order to keep the selected timespan for metrics tab when switch between the tabs.
@@ -73,19 +78,17 @@ const NodePageRSP = (props) => {
 
   // Retrieve the podlist data
   const pods = useSelector((state) => state.app.pods.list);
-  const podsListData = getPodsListData(selectedNodeName, pods);
+  const podsListData = getPodsListData(name, pods);
   const nodes = useSelector((state) => state.app.nodes.list);
   const volumes = useSelector((state) => state.app.volumes.list);
   const nodeStats = useSelector(
     (state) => state.app.monitoring.nodeStats.metrics,
   );
   const nodesIPsInfo = useSelector((state) => state.app.nodes.IPsInfo);
   const instanceIP =
-    nodes?.find((node) => node.name === selectedNodeName)?.internalIP ?? '';
-  const controlPlaneInterface =
-    nodesIPsInfo[selectedNodeName]?.controlPlane?.interface;
-  const workloadPlaneInterface =
-    nodesIPsInfo[selectedNodeName]?.workloadPlane?.interface;
+    nodes?.find((node) => node.name === name)?.internalIP ?? '';
+  const controlPlaneInterface = nodesIPsInfo[name]?.controlPlane?.interface;
+  const workloadPlaneInterface = nodesIPsInfo[name]?.workloadPlane?.interface;
 
   useEffect(() => {
     dispatch(
@@ -105,6 +108,15 @@ const NodePageRSP = (props) => {
     workloadPlaneInterface,
   ]);
 
+  // Filter alerts for the specific node, base on the InstaceIP and Alert Name
+  const alerts = useSelector((state) => state.app.alerts.list);
+  const alertsNode =
+    alerts?.filter(
+      (alert) =>
+        NODE_ALERTS_GROUP.includes(alert?.labels?.alertname) &&
+        `${instanceIP}:${PORT_NODE_EXPORTER}` === alert?.labels?.instance,
+    ) ?? [];
+
   const isHealthTabActive = location.pathname.endsWith('/overview');
   const isAlertsTabActive = location.pathname.endsWith('/alerts');
   const isMetricsTabActive = location.pathname.endsWith('/metrics');
@@ -115,27 +127,32 @@ const NodePageRSP = (props) => {
     {
       selected: isHealthTabActive,
       title: 'Overview',
-      onClick: () => history.push(`${path}/overview`),
+      onClick: () => history.push(`${url}/overview`),
     },
     {
       selected: isAlertsTabActive,
-      title: intl.translate('alerts'),
-      onClick: () => history.push(`${path}/alerts`),
+      title: (
+        <span>
+          {intl.translate('alerts')}
+          <TextBadge>{alertsNode?.length}</TextBadge>
+        </span>
+      ),
+      onClick: () => history.push(`${url}/alerts`),
     },
     {
       selected: isMetricsTabActive,
       title: 'Metrics',
-      onClick: () => history.push(`${path}/metrics`),
+      onClick: () => history.push(`${url}/metrics`),
     },
     {
       selected: isVolumesTabActive,
       title: intl.translate('volumes'),
-      onClick: () => history.push(`${path}/volumes`),
+      onClick: () => history.push(`${url}/volumes`),
     },
     {
       selected: isPodsTabActive,
       title: intl.translate('pods'),
-      onClick: () => history.push(`${path}/pods`),
+      onClick: () => history.push(`${url}/pods`),
     },
   ];
 
@@ -154,10 +171,23 @@ const NodePageRSP = (props) => {
               />
             )}
           />
-          <Route path={`${path}/alerts`} component={NodePageAlertsTab} />
+          <Route
+            path={`${path}/alerts`}
+            render={() => (
+              <NodePageAlertsTab alertsNode={alertsNode}></NodePageAlertsTab>
+            )}
+          />
           <Route
             path={`${path}/metrics`}
-            render={() => <NodePageMetricsTab nodeStats={nodeStats} />}
+            render={() => (
+              <NodePageMetricsTab
+                nodeStats={nodeStats}
+                instanceIP={instanceIP}
+                controlPlaneInterface={controlPlaneInterface}
+                workloadPlaneInterface={workloadPlaneInterface}
+                selectedNodeName={name}
+              />
+            )}
           />
           <Route path={`${path}/volumes`} component={NodePageVolumesTab} />
           <Route