feat(ou-923): fix links in incidents table

Author: Fewwy

web/src/components/Incidents/IncidentsDetailsRowTable.tsx

@@ -14,59 +14,20 @@ import KebabDropdown from '../kebab-dropdown';
 import { useTranslation } from 'react-i18next';
 import {
   getAlertUrl,
-  getLegacyObserveState,
   getNewSilenceAlertUrl,
   getRuleUrl,
   usePerspective,
 } from '../hooks/usePerspective';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import './incidents-styles.css';
 import { SeverityBadge } from '../alerting/AlertUtils';
-import { useAlertsPoller } from '../hooks/useAlertsPoller';
-import { useSelector } from 'react-redux';
-import isEqual from 'lodash/isEqual';
-import { MonitoringState } from 'src/reducers/observe';
-
-function useDeepCompareMemoize(value) {
-  const ref = React.useRef();
-
-  if (!isEqual(value, ref.current)) {
-    ref.current = value;
-  }
-
-  return ref.current;
-}
 
 const IncidentsDetailsRowTable = ({ alerts }) => {
   const history = useHistory();
   const [namespace] = useActiveNamespace();
-  useAlertsPoller();
-  const { perspective, alertsKey } = usePerspective();
-  const [alertsWithMatchedData, setAlertsWithMatchedData] = React.useState([]);
+  const { perspective } = usePerspective();
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
 
-  const alertsWithLabels = useSelector((state: MonitoringState) =>
-    getLegacyObserveState(perspective, state)?.get(alertsKey),
-  );
-
-  function findMatchingAlertsWithId(alertsArray, rulesArray) {
-    return alertsArray.map((alert) => {
-      if (!Array.isArray(rulesArray?.data)) {
-        return alert;
-      }
-      const match = rulesArray.data.find((rule) => alert.alertname === rule.labels.alertname);
-      if (match) {
-        return { ...alert, rule: match };
-      }
-      return alert;
-    });
-  }
-  const memoizedAlerts = useDeepCompareMemoize(alerts);
-
-  React.useEffect(() => {
-    setAlertsWithMatchedData(findMatchingAlertsWithId(memoizedAlerts, alertsWithLabels));
-  }, [memoizedAlerts, alertsWithLabels]);
-
   return (
     <Table borders={false} variant="compact">
       <Thead>
@@ -80,31 +41,26 @@ const IncidentsDetailsRowTable = ({ alerts }) => {
         </Tr>
       </Thead>
       <Tbody>
-        {!alertsWithMatchedData ? (
+        {!alerts ? (
           <Bullseye>
             <Spinner aria-label="incidents-chart-spinner" />
           </Bullseye>
         ) : (
-          alertsWithMatchedData?.map((alertDetails, rowIndex) => {
+          alerts?.map((alertDetails, rowIndex) => {
             return (
               <Tr key={rowIndex}>
                 <Td dataLabel="expanded-details-alertname">
                   <ResourceIcon kind={AlertResource.kind} />
                   <Link
                     to={
-                      alertDetails?.rule
+                      alertDetails.rule.state === 'firing'
                         ? getAlertUrl(
                             perspective,
                             alertDetails,
-                            alertDetails?.rule?.rule.id,
-                            namespace,
+                            alertDetails?.rule?.id,
+                            alertDetails?.labels?.namespace || namespace,
                           )
-                        : '#'
-                    }
-                    style={
-                      !alertDetails?.rule || alertDetails.resolved
-                        ? { pointerEvents: 'none', color: 'inherit', textDecoration: 'inherit' }
-                        : {}
+                        : getRuleUrl(perspective, alertDetails?.rule, namespace)
                     }
                   >
                     {alertDetails.alertname}
@@ -162,7 +118,7 @@ const IncidentsDetailsRowTable = ({ alerts }) => {
                         isDisabled={alertDetails?.alertstate === 'resolved' ? true : false}
                       >
                         <Link
-                          to={getRuleUrl(perspective, alertDetails?.rule?.rule)}
+                          to={getRuleUrl(perspective, alertDetails?.rule)}
                           style={{ color: 'inherit', textDecoration: 'inherit' }}
                         >
                           {t('View alerting rule')}

web/src/components/Incidents/IncidentsPage.tsx

@@ -49,7 +49,7 @@ import {
   setIncidentsActiveFilters,
 } from '../../actions/observe';
 import { useLocation } from 'react-router-dom';
-import { usePerspective } from '../hooks/usePerspective';
+import { getLegacyObserveState, usePerspective } from '../hooks/usePerspective';
 import { changeDaysFilter } from './utils';
 import { parsePrometheusDuration } from '../console/console-shared/src/datetime/prometheus';
 import withFallback from '../console/console-shared/error/fallbacks/withFallback';
@@ -58,13 +58,16 @@ import AlertsChart from './AlertsChart/AlertsChart';
 import { usePatternFlyTheme } from '../hooks/usePatternflyTheme';
 import { MonitoringState } from 'src/reducers/observe';
 import { Incident } from './model';
+import { useAlertsPoller } from '../hooks/useAlertsPoller';
+import { Rule } from '@openshift-console/dynamic-plugin-sdk';
 
 const IncidentsPage = () => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
   const dispatch = useDispatch();
   const location = useLocation();
   const urlParams = React.useMemo(() => parseUrlParams(location.search), [location.search]);
-  const { perspective } = usePerspective();
+  const { perspective, rulesKey } = usePerspective();
+  useAlertsPoller();
   const { theme } = usePatternFlyTheme();
   // loading states
   const [incidentsAreLoading, setIncidentsAreLoading] = React.useState(true);
@@ -206,13 +209,19 @@ const IncidentsPage = () => {
     })();
   }, [incidentForAlertProcessing]);
 
+  const alertingRulesData: Rule[] = useSelector((state: MonitoringState) =>
+    getLegacyObserveState(perspective, state)?.get(rulesKey),
+  );
+
   React.useEffect(() => {
-    dispatch(
-      setAlertsTableData({
-        alertsTableData: groupAlertsForTable(alertsData),
-      }),
-    );
-  }, [alertsData]);
+    if (alertingRulesData && alertsData) {
+      dispatch(
+        setAlertsTableData({
+          alertsTableData: groupAlertsForTable(alertsData, alertingRulesData),
+        }),
+      );
+    }
+  }, [alertsData, alertingRulesData]);
 
   React.useEffect(() => {
     (async () => {

web/src/components/Incidents/processAlerts.ts

@@ -188,13 +188,17 @@ export function processAlerts(
     .filter((alert) => alert !== null);
 }
 
-export const groupAlertsForTable = (alerts: Array<Alert>): Array<Alert> => {
+export const groupAlertsForTable = (alerts: Array<Alert>, alertingRulesData): Array<Alert> => {
   // group alerts by the component and coun
   const groupedAlerts: Array<Alert> = alerts.reduce((acc, alert) => {
-    const { component, alertstate, severity, layer } = alert;
+    const { component, alertstate, severity, layer, alertname } = alert;
     const existingGroup = acc.find((group) => group.component === component);
+    let rule;
+    if (alertingRulesData) {
+      rule = alertingRulesData.find((rule) => alertname === rule.name);
+    }
     if (existingGroup) {
-      existingGroup.alertsExpandedRowData.push(alert);
+      existingGroup.alertsExpandedRowData.push({ ...alert, rule });
       if (severity === 'warning') existingGroup.warning += 1;
       else if (severity === 'info') existingGroup.info += 1;
       else if (severity === 'critical') existingGroup.critical += 1;
@@ -206,7 +210,7 @@ export const groupAlertsForTable = (alerts: Array<Alert>): Array<Alert> => {
         warning: severity === 'warning' ? 1 : 0,
         info: severity === 'info' ? 1 : 0,
         critical: severity === 'critical' ? 1 : 0,
-        alertsExpandedRowData: [alert],
+        alertsExpandedRowData: [{ ...alert, rule }],
       });
     }