Add alert details info

Author: jotak

web/locales/en/plugin__netobserv-plugin.json

@@ -225,6 +225,12 @@
   "Previous tip": "Previous tip",
   "Next tip": "Next tip",
   "Close tips": "Close tips",
+  "Summary": "Summary",
+  "Navigate to alert details": "Navigate to alert details",
+  "State": "State",
+  "Severity": "Severity",
+  "Labels": "Labels",
+  "Description": "Description",
   "(global)": "(global)",
   "No violations found": "No violations found",
   "critical issues": "critical issues",
@@ -233,6 +239,7 @@
   "pending issues": "pending issues",
   "silenced issues": "silenced issues",
   "Rule {{ruleName}}: no alert": "Rule {{ruleName}}: no alert",
+  "No alert for this rule": "No alert for this rule",
   "No rules found, health cannot be determined": "No rules found, health cannot be determined",
   "Check alert definitions in FlowCollector \"spec.processor.metrics.alertGroups\" and \"spec.processor.metrics.disableAlerts\".": "Check alert definitions in FlowCollector \"spec.processor.metrics.alertGroups\" and \"spec.processor.metrics.disableAlerts\".",
   "Make sure that Prometheus and AlertManager are running.": "Make sure that Prometheus and AlertManager are running.",
@@ -254,7 +261,6 @@
   "Global rule violations": "Global rule violations",
   "Rule violations per node": "Rule violations per node",
   "Rule violations per namespace": "Rule violations per namespace",
-  "Navigate to alert details": "Navigate to alert details",
   "No results found": "No results found",
   "Clear or reset filters and try again.": "Clear or reset filters and try again.",
   "Check for errors in health dashboard. Status endpoint is returning: {{statusError}}": "Check for errors in health dashboard. Status endpoint is returning: {{statusError}}",
@@ -356,7 +362,6 @@
   "Filtered sum of packets": "Filtered sum of packets",
   "Filtered average speed": "Filtered average speed",
   "Bps": "Bps",
-  "Summary": "Summary",
   "Query limit reached": "Query limit reached",
   "Filtered flows count": "Filtered flows count",
   "Filtered ended conversations count": "Filtered ended conversations count",

web/src/components/health/alert-details.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+import { Label, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { valueFormat } from '../../utils/format';
+import { AlertWithRuleName, getAlertFilteredLabels, getAlertLink, getHealthMetadata } from './helper';
+
+export interface AlertDetailsProps {
+  resourceName: string;
+  alert: AlertWithRuleName;
+}
+
+export const AlertDetails: React.FC<AlertDetailsProps> = ({ resourceName, alert }) => {
+  const { t } = useTranslation('plugin__netobserv-plugin');
+
+  const md = getHealthMetadata(alert.annotations);
+
+  return (
+    <div className="alert-details">
+      <TextContent>
+        <AlertDetailsValue title={t('Summary')}>
+          <Link to={getAlertLink(alert)} title={t('Navigate to alert details')}>
+            {alert.annotations['summary']}
+          </Link>
+        </AlertDetailsValue>
+        <AlertDetailsValue title={t('State')}>{alert.state}</AlertDetailsValue>
+        <AlertDetailsValue title={t('Severity')}>{alert.labels.severity}</AlertDetailsValue>
+        <AlertDetailsValue title={t('Labels')}>
+          {getAlertFilteredLabels(alert, resourceName).map(kv => (
+            <Label key={kv[0]}>
+              {kv[0]}={kv[1]}
+            </Label>
+          ))}
+        </AlertDetailsValue>
+        <AlertDetailsValue title={t('Value')}>
+          <>
+            {valueFormat(alert.value as number, 2)}
+            {md?.threshold && ' > ' + md.threshold + ' ' + md.unit}
+          </>
+        </AlertDetailsValue>
+        <AlertDetailsValue title={t('Description')}>{alert.annotations['description']}</AlertDetailsValue>
+      </TextContent>
+    </div>
+  );
+};
+
+export const AlertDetailsValue: React.FC<{ title: string }> = ({ title, children }) => {
+  return (
+    <>
+      <Text component={TextVariants.h4} className="alert-field-title">
+        {title}
+      </Text>
+      <Text>{children}</Text>
+    </>
+  );
+};

web/src/components/health/health-drawer-container.tsx

@@ -89,13 +89,13 @@ export const HealthDrawerContainer: React.FC<HealthDrawerContainerProps> = ({ ti
                 </DrawerActions>
               </DrawerHead>
               {selectedResource && (
-                <>
+                <div className="health-gallery-drawer-content">
                   {selectedPanelView === 'heatmap' ? (
                     <HealthHeatmap info={selectedResource} />
                   ) : (
                     <RuleDetails info={selectedResource} />
                   )}
-                </>
+                </div>
               )}
             </DrawerPanelContent>
           }

web/src/components/health/health-heatmap.tsx

@@ -1,8 +1,10 @@
+import { TextContent } from '@patternfly/react-core';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+import { valueFormat } from '../../utils/format';
 import { AlertWithRuleName, ByResource, computeAlertScore, getAllAlerts } from './helper';
 
-import { valueFormat } from '../../utils/format';
+import { AlertDetails, AlertDetailsValue } from './alert-details';
 import './heatmap.css';
 
 export interface HealthHeatmapProps {
@@ -54,6 +56,12 @@ const getCellColors = (value: number, rangeFrom: number, rangeTo: number, colorM
 
 export const HealthHeatmap: React.FC<HealthHeatmapProps> = ({ info }) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
+  const [selectedItem, setSelectedItem] = React.useState<AlertWithRuleName | string | undefined>(undefined);
+
+  React.useEffect(() => {
+    // Reset selection when props.info changes
+    setSelectedItem(undefined);
+  }, [info]);
 
   const tooltip = (a: AlertWithRuleName): string => {
     let prefix = '';
@@ -71,15 +79,21 @@ export const HealthHeatmap: React.FC<HealthHeatmapProps> = ({ info }) => {
     return `${prefix}${a.annotations['summary']} | ${valueInfo}`;
   };
 
-  type CellInfo = { score: number; colorMap: ColorMap; tooltip: string };
+  type CellInfo = { score: number; colorMap: ColorMap; tooltip: string; onClick: () => void; selected: boolean };
 
   // Map inactive rules to CellInfo
   const inactive: CellInfo[] = [...info.critical.inactive, ...info.warning.inactive, ...info.other.inactive].map(
-    ruleName => ({ score: 0, colorMap: inactiveColorMap, tooltip: t('Rule {{ruleName}}: no alert', { ruleName }) })
+    ruleName => ({
+      score: 0,
+      colorMap: inactiveColorMap,
+      tooltip: t('Rule {{ruleName}}: no alert', { ruleName }),
+      onClick: () => setSelectedItem(ruleName),
+      selected: selectedItem === ruleName
+    })
   );
 
   // Map active alerts to CellInfo, then concat inactive
-  const values: CellInfo[] = getAllAlerts(info)
+  const items: CellInfo[] = getAllAlerts(info)
     .map(a => {
       const colorMap =
         a.labels.severity === 'critical'
@@ -88,26 +102,52 @@ export const HealthHeatmap: React.FC<HealthHeatmapProps> = ({ info }) => {
           ? warningColorMap
           : infoColorMap;
       const score = computeAlertScore(a, true);
-      return { score, colorMap: colorMap, tooltip: tooltip(a) };
+      return {
+        score,
+        colorMap: colorMap,
+        tooltip: tooltip(a),
+        onClick: () => setSelectedItem(a),
+        selected: selectedItem === a
+      };
     })
     .concat(inactive)
     .slice(0, 24);
 
   // Fill remaining cells for a 5x5 array
   let remains = [];
-  if (values.length < 25) {
-    remains = Array(25 - values.length).fill(undefined);
+  if (items.length < 25) {
+    remains = Array(25 - items.length).fill(undefined);
   }
 
   return (
-    <div className="heatmap">
-      {values.map((cell, i) => {
-        const style = getCellColors(cell.score, 0, 1, cell.colorMap);
-        return <div key={`heatmap_${i}`} className={'cell'} style={style} title={cell.tooltip} />;
-      })}
-      {remains.map((_, i) => {
-        return <div key={`heatmap_remains_${i}`} className={'cell greyed'} />;
-      })}
-    </div>
+    <>
+      <div className="heatmap">
+        {items.map((item, i) => {
+          const style = getCellColors(item.score, 0, 1, item.colorMap);
+          return (
+            <div
+              key={`heatmap_${i}`}
+              className={'cell' + (item.selected ? ' selected' : '')}
+              style={style}
+              title={item.tooltip}
+              onClick={item.onClick}
+            />
+          );
+        })}
+        {remains.map((_, i) => {
+          return <div key={`heatmap_remains_${i}`} className={'cell greyed'} />;
+        })}
+      </div>
+      <div className="details">
+        {selectedItem && typeof selectedItem === 'string' && (
+          <TextContent>
+            <AlertDetailsValue title={t('No alert for this rule')}>{selectedItem}</AlertDetailsValue>
+          </TextContent>
+        )}
+        {selectedItem && typeof selectedItem !== 'string' && (
+          <AlertDetails alert={selectedItem} resourceName={info.name} />
+        )}
+      </div>
+    </>
   );
 };

web/src/components/health/health.css

@@ -27,6 +27,10 @@
     height: initial;
 }
 
+.health-gallery-drawer-content {
+    padding: 1.5rem;
+}
+
 .netobserv-refresh-interval-container {
     margin: 0 !important;
 }

web/src/components/health/heatmap.css

@@ -3,15 +3,24 @@
   grid-template-columns: 2rem 2rem 2rem 2rem 2rem;
   grid-template-rows:  2rem 2rem 2rem 2rem 2rem;
   grid-gap: 0.3rem;
-  margin-left: 50px;
 }
 
 .heatmap .cell {
   border-radius: 5px;
   width: 100%;
   height: 100%;
+  cursor: pointer;
+}
+
+.heatmap .cell.selected {
+  border: 2px solid #06c;
 }
 
 .heatmap .cell.greyed {
   background-color: rgb(106, 110, 115);
+  cursor: initial;
+}
+
+.details {
+  margin-top: 2rem;
 }

web/src/components/health/network-health.tsx

@@ -5,6 +5,7 @@ import * as _ from 'lodash';
 import { murmur3 } from 'murmurhash-js';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+import { SilenceMatcher } from '../../api/alert';
 import { getAlerts, getSilencedAlerts } from '../../api/routes';
 import { getHTTPErrorDetails } from '../../utils/errors';
 import { localStorageHealthRefreshKey, useLocalStorage } from '../../utils/local-storage-hook';
@@ -16,7 +17,6 @@ import HealthError from './health-error';
 import { HealthSummary } from './health-summary';
 import { buildStats, isSilenced } from './helper';
 import { HealthTabTitle } from './tab-title';
-import { SilenceMatcher } from '../../api/alert';
 
 import './health.css';