Merge pull request #511 from Fewwy/ou-923

OU-781: fix links in incidents table

Author: openshift-merge-bot[bot]

web/src/components/Incidents/IncidentsDetailsRowTable.tsx

@@ -1,4 +1,3 @@
-import { useRef, useState, useEffect } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import {
   GreenCheckCircleIcon,
@@ -7,71 +6,24 @@ import {
   useActiveNamespace,
 } from '@openshift-console/dynamic-plugin-sdk';
 import { BellIcon } from '@patternfly/react-icons';
-import { Bullseye, DropdownItem, Spinner, Tooltip } from '@patternfly/react-core';
-import { Link, useHistory } from 'react-router-dom';
-import { AlertResource } from '../utils';
-import KebabDropdown from '../kebab-dropdown';
+import { Bullseye, Spinner } from '@patternfly/react-core';
+import { Link } from 'react-router-dom';
+import { RuleResource } from '../utils';
 import { useTranslation } from 'react-i18next';
-import {
-  getAlertUrl,
-  getLegacyObserveState,
-  getNewSilenceAlertUrl,
-  getRuleUrl,
-  usePerspective,
-} from '../hooks/usePerspective';
-import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+import { getRuleUrl, usePerspective } from '../hooks/usePerspective';
 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 = 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] = 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);
-
-  useEffect(() => {
-    setAlertsWithMatchedData(findMatchingAlertsWithId(memoizedAlerts, alertsWithLabels));
-  }, [memoizedAlerts, alertsWithLabels]);
-
   return (
     <Table borders={false} variant="compact">
       <Thead>
         <Tr>
-          <Th width={25}>{t('Alert Name')}</Th>
+          <Th width={25}>{t('Alert Rule')}</Th>
           <Th width={15}>{t('Namespace')}</Th>
           <Th width={10}>{t('Severity')}</Th>
           <Th width={10}>{t('State')}</Th>
@@ -80,40 +32,19 @@ 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
-                        ? getAlertUrl(
-                            perspective,
-                            alertDetails,
-                            alertDetails?.rule?.rule.id,
-                            namespace,
-                          )
-                        : '#'
-                    }
-                    style={
-                      !alertDetails?.rule || alertDetails.resolved
-                        ? { pointerEvents: 'none', color: 'inherit', textDecoration: 'inherit' }
-                        : {}
-                    }
-                  >
+                  <ResourceIcon kind={RuleResource.kind} />
+                  <Link to={getRuleUrl(perspective, alertDetails?.rule, namespace)}>
                     {alertDetails.alertname}
                   </Link>
-                  {(!alertDetails?.rule || alertDetails.resolved) && (
-                    <Tooltip content={<div>No details can be shown for inactive alerts.</div>}>
-                      <OutlinedQuestionCircleIcon className="expanded-details-text-margin" />
-                    </Tooltip>
-                  )}
                 </Td>
                 <Td dataLabel="expanded-details-namespace">{alertDetails.namespace || '---'}</Td>
                 <Td dataLabel="expanded-details-severity">
@@ -142,35 +73,6 @@ const IncidentsDetailsRowTable = ({ alerts }) => {
                     <Timestamp simple={true} timestamp={alertDetails.alertsEndFiring} />
                   )}
                 </Td>
-                <Td>
-                  <KebabDropdown
-                    dropdownItems={[
-                      <DropdownItem
-                        component="button"
-                        key="silence alert"
-                        isDisabled={!alertDetails?.rule}
-                        onClick={() =>
-                          history.push(
-                            getNewSilenceAlertUrl(perspective, alertDetails.rule, namespace),
-                          )
-                        }
-                      >
-                        {t('Silence alert')}
-                      </DropdownItem>,
-                      <DropdownItem
-                        key="view-rule"
-                        isDisabled={alertDetails?.alertstate === 'resolved' ? true : false}
-                      >
-                        <Link
-                          to={getRuleUrl(perspective, alertDetails?.rule?.rule)}
-                          style={{ color: 'inherit', textDecoration: 'inherit' }}
-                        >
-                          {t('View alerting rule')}
-                        </Link>
-                      </DropdownItem>,
-                    ]}
-                  />
-                </Td>
               </Tr>
             );
           })

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 = useMemo(() => parseUrlParams(location.search), [location.search]);
-  const { perspective } = usePerspective();
+  const { perspective, rulesKey } = usePerspective();
+  useAlertsPoller();
   const { theme } = usePatternFlyTheme();
   // loading states
   const [incidentsAreLoading, setIncidentsAreLoading] = useState(true);
@@ -206,13 +209,19 @@ const IncidentsPage = () => {
     })();
   }, [incidentForAlertProcessing]);
 
+  const alertingRulesData: Rule[] = useSelector((state: MonitoringState) =>
+    getLegacyObserveState(perspective, state)?.get(rulesKey),
+  );
+
   useEffect(() => {
-    dispatch(
-      setAlertsTableData({
-        alertsTableData: groupAlertsForTable(alertsData),
-      }),
-    );
-  }, [alertsData]);
+    if (alertingRulesData && alertsData) {
+      dispatch(
+        setAlertsTableData({
+          alertsTableData: groupAlertsForTable(alertsData, alertingRulesData),
+        }),
+      );
+    }
+  }, [alertsData, alertingRulesData]);
 
   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 }],
       });
     }