fixes and improvements

leandroberetta · leandroberetta · commit 408439badd9c · 2026-01-14T13:00:59.000-03:00
diff --git a/web/locales/en/plugin__netobserv-plugin.json b/web/locales/en/plugin__netobserv-plugin.json
@@ -294,6 +294,7 @@
   "Threshold": "Threshold",
   "View metric in query browser": "View metric in query browser",
   "No recording rules found": "No recording rules found",
+  "Mode": "Mode",
   "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}}",
diff --git a/web/src/components/health/alert-row.tsx b/web/src/components/health/alert-row.tsx
@@ -6,7 +6,13 @@ import { useTranslation } from 'react-i18next';
 import { formatActiveSince } from '../../utils/datetime';
 import { valueFormat } from '../../utils/format';
 import { HealthColorSquare } from './health-color-square';
-import { AlertWithRuleName, getAlertFilteredLabels, getAlertLink, getTrafficLink } from './health-helper';
+import {
+  AlertWithRuleName,
+  getAlertFilteredLabels,
+  getAlertLink,
+  getSeverityColor,
+  getTrafficLink
+} from './health-helper';
 
 export interface AlertRowProps {
   kind: string;
@@ -39,7 +45,9 @@ export const AlertRow: React.FC<AlertRowProps> = ({ kind, resourceName, alert, w
         </Td>
       )}
       <Td noPadding={!wide}>{alert.state}</Td>
-      <Td>{alert.labels.severity}</Td>
+      <Td>
+        <Label color={getSeverityColor(alert.labels.severity)}>{alert.labels.severity}</Label>
+      </Td>
       {alert.activeAt && <Td>{formatActiveSince(t, alert.activeAt)}</Td>}
       <Td>
         {labels.length === 0
@@ -51,9 +59,10 @@ export const AlertRow: React.FC<AlertRowProps> = ({ kind, resourceName, alert, w
             ))}
       </Td>
       <Td>
-        {valueFormat(alert.value as number, 2)}
-        {alert.metadata.threshold && ' > ' + alert.metadata.threshold + ' ' + alert.metadata.unit}
+        {valueFormat(alert.value as number, 2)} {alert.metadata.unit}
+        {!wide && alert.metadata.threshold && ' > ' + alert.metadata.threshold}
       </Td>
+      {wide && <Td>{alert.metadata.threshold ? '> ' + alert.metadata.threshold : ''}</Td>}
       {wide && <Td>{alert.annotations['description']}</Td>}
       <Td noPadding>
         <ActionsColumn
diff --git a/web/src/components/health/health-drawer-container.tsx b/web/src/components/health/health-drawer-container.tsx
@@ -24,6 +24,12 @@ import { RecordingRuleCard } from './recording-rule-card';
 import { RecordingRuleDetails } from './recording-rule-details';
 import { RuleDetails } from './rule-details';
 
+// Type guard to differentiate between ByResource and RecordingRulesByResource
+const isAlertResource = (item: ByResource | RecordingRulesByResource): item is ByResource => {
+  // ByResource has critical.firing, RecordingRulesByResource has critical as array
+  return 'firing' in item.critical;
+};
+
 export interface HealthDrawerContainerProps {
   title: string;
   stats: ByResource[];
@@ -40,54 +46,37 @@ export const HealthDrawerContainer: React.FC<HealthDrawerContainerProps> = ({
   isDark
 }) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
-  const [selectedResource, setSelectedResource] = React.useState<ByResource | undefined>(undefined);
-  const [selectedRecordingResource, setSelectedRecordingResource] = React.useState<RecordingRulesByResource>();
+  const [selectedItem, setSelectedItem] = React.useState<ByResource | RecordingRulesByResource | undefined>(undefined);
   const drawerRef = React.useRef<HTMLDivElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
   };
 
-  // When selecting a violation, deselect recording rule
-  const handleSelectResource = (r?: ByResource) => {
-    setSelectedResource(r);
-    if (r) {
-      setSelectedRecordingResource(undefined);
-    }
-  };
-
-  // When selecting a recording rule, deselect violation
-  const handleSelectRecordingResource = (r: RecordingRulesByResource | undefined) => {
-    setSelectedRecordingResource(r);
-    if (r) {
-      setSelectedResource(undefined);
-    }
+  const handleSelectItem = (item?: ByResource | RecordingRulesByResource) => {
+    setSelectedItem(item);
   };
 
   React.useEffect(() => {
-    if (selectedResource) {
-      const fromStats = stats.find(s => s.name === selectedResource.name);
-      if (fromStats !== selectedResource) {
-        setSelectedResource(fromStats);
+    if (selectedItem) {
+      if (isAlertResource(selectedItem)) {
+        const fromStats = stats.find(s => s.name === selectedItem.name);
+        if (fromStats !== selectedItem) {
+          setSelectedItem(fromStats);
+        }
+      } else if (recordingRulesStats) {
+        const fromStats = recordingRulesStats.find(s => s.name === selectedItem.name);
+        if (fromStats !== selectedItem) {
+          setSelectedItem(fromStats);
+        }
       }
     }
-    // we want to update selectedResource when stats changes, no more
+    // we want to update selectedItem when stats or recordingRulesStats changes, no more
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [stats]);
-
-  React.useEffect(() => {
-    if (selectedRecordingResource && recordingRulesStats) {
-      const fromStats = recordingRulesStats.find(s => s.name === selectedRecordingResource.name);
-      if (fromStats !== selectedRecordingResource) {
-        setSelectedRecordingResource(fromStats);
-      }
-    }
-    // we want to update selectedRecordingResource when recordingRulesStats changes, no more
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [recordingRulesStats]);
+  }, [stats, recordingRulesStats]);
 
   const hasRecordingRules = recordingRulesStats && recordingRulesStats.length > 0;
-  const isExpanded = selectedResource !== undefined || selectedRecordingResource !== undefined;
+  const isExpanded = selectedItem !== undefined;
 
   // Sort alerts by score (best score = lowest value)
   const sortedAlerts = React.useMemo(() => _.orderBy(stats, r => r.score, 'asc'), [stats]);
@@ -123,26 +112,16 @@ export const HealthDrawerContainer: React.FC<HealthDrawerContainerProps> = ({
             >
               <DrawerHead>
                 <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-                  {selectedResource !== undefined && (
-                    <>
-                      <ResourceLink inline={true} kind={kind} name={selectedResource.name} />
-                    </>
-                  )}
-                  {selectedRecordingResource !== undefined && (
-                    <>
-                      <ResourceLink inline={true} kind={kind} name={selectedRecordingResource.name} />
-                    </>
-                  )}
+                  {selectedItem && <ResourceLink inline={true} kind={kind} name={selectedItem.name} />}
                 </span>
               </DrawerHead>
-              {selectedResource && (
+              {selectedItem && (
                 <div className="health-gallery-drawer-content">
-                  <RuleDetails kind={kind} info={selectedResource} wide={false} />
-                </div>
-              )}
-              {selectedRecordingResource && (
-                <div className="health-gallery-drawer-content">
-                  <RecordingRuleDetails kind={kind} info={selectedRecordingResource} wide={false} />
+                  {isAlertResource(selectedItem) ? (
+                    <RuleDetails kind={kind} info={selectedItem} wide={false} />
+                  ) : (
+                    <RecordingRuleDetails kind={kind} info={selectedItem} wide={false} />
+                  )}
                 </div>
               )}
             </DrawerPanelContent>
@@ -165,9 +144,9 @@ export const HealthDrawerContainer: React.FC<HealthDrawerContainerProps> = ({
                     kind={kind}
                     isDark={isDark}
                     stats={r}
-                    isSelected={r.name === selectedResource?.name}
+                    isSelected={r.name === selectedItem?.name}
                     onClick={() => {
-                      handleSelectResource(r.name !== selectedResource?.name ? r : undefined);
+                      handleSelectItem(r.name !== selectedItem?.name ? r : undefined);
                     }}
                   />
                 ))}
@@ -177,9 +156,9 @@ export const HealthDrawerContainer: React.FC<HealthDrawerContainerProps> = ({
                     kind={kind}
                     isDark={isDark}
                     stats={r}
-                    isSelected={r.name === selectedRecordingResource?.name}
+                    isSelected={r.name === selectedItem?.name}
                     onClick={() => {
-                      handleSelectRecordingResource(r.name !== selectedRecordingResource?.name ? r : undefined);
+                      handleSelectItem(r.name !== selectedItem?.name ? r : undefined);
                     }}
                   />
                 ))}
diff --git a/web/src/components/health/health-global.tsx b/web/src/components/health/health-global.tsx
@@ -15,8 +15,7 @@ import { useTranslation } from 'react-i18next';
 import { HealthCard } from './health-card';
 import { ByResource, getAllAlerts, RecordingRulesByResource } from './health-helper';
 import { RecordingRuleCard } from './recording-rule-card';
-import { RecordingRuleDetails } from './recording-rule-details';
-import { RuleDetails } from './rule-details';
+import { UnifiedRuleDetails } from './unified-rule-details';
 
 export interface HealthGlobalProps {
   info: ByResource;
@@ -56,12 +55,11 @@ export const HealthGlobal: React.FC<HealthGlobalProps> = ({ info, recordingRules
             )}
           </GridItem>
           <GridItem span={9}>
-            {allAlerts.length > 0 && <RuleDetails kind={'Global'} info={info} wide={true} />}
-            {hasRecordingRules && (
-              <div style={{ marginTop: allAlerts.length > 0 ? '1rem' : '0' }}>
-                <RecordingRuleDetails kind={'Global'} info={recordingRules} wide={true} />
-              </div>
-            )}
+            <UnifiedRuleDetails
+              kind={'Global'}
+              alertInfo={allAlerts.length > 0 ? info : undefined}
+              recordingRuleInfo={hasRecordingRules ? recordingRules : undefined}
+            />
           </GridItem>
         </Grid>
       )}
diff --git a/web/src/components/health/health-helper.ts b/web/src/components/health/health-helper.ts
@@ -19,6 +19,7 @@ export type RecordingRulesByResource = {
   critical: RecordingRuleItem[];
   warning: RecordingRuleItem[];
   other: RecordingRuleItem[];
+  score: number;
 };
 
 export type RecordingRuleMetricValue = {
@@ -213,14 +214,24 @@ const processRecordingRules = (
       name: name,
       critical: items.filter(i => i.severity === 'critical'),
       warning: items.filter(i => i.severity === 'warning'),
-      other: items.filter(i => i.severity === 'info')
+      other: items.filter(i => i.severity === 'info'),
+      score: 0 // Will be computed below
     };
   };
 
+  const global = buildResourceGroup('', globalItems);
+  const byNamespace = Object.keys(namespaceGroups).map(ns => buildResourceGroup(ns, namespaceGroups[ns]));
+  const byNode = Object.keys(nodeGroups).map(n => buildResourceGroup(n, nodeGroups[n]));
+
+  // Compute scores for all resource groups
+  [global, ...byNamespace, ...byNode].forEach(r => {
+    r.score = computeRecordingRulesScore(r);
+  });
+
   return {
-    global: buildResourceGroup('', globalItems),
-    byNamespace: Object.keys(namespaceGroups).map(ns => buildResourceGroup(ns, namespaceGroups[ns])),
-    byNode: Object.keys(nodeGroups).map(n => buildResourceGroup(n, nodeGroups[n]))
+    global,
+    byNamespace,
+    byNode
   };
 };
 
@@ -488,8 +499,58 @@ export const computeScore = (r: ByResource): number => {
   return sum / sumWeights;
 };
 
+// Score [0,10]; higher is better
+export const computeRecordingRulesScore = (r: RecordingRulesByResource): number => {
+  const allRules = [...r.critical, ...r.warning, ...r.other];
+
+  if (allRules.length === 0) {
+    return 10; // Perfect score if no rules
+  }
+
+  const allScores: ScoreDetail[] = allRules.map(rule => {
+    // Determine weight based on severity
+    let weight = minorWeight;
+    if (rule.severity === 'critical') {
+      weight = criticalWeight;
+    } else if (rule.severity === 'warning') {
+      weight = warningWeight;
+    }
+
+    // Calculate raw score based on value vs threshold
+    let rawScore = 10; // Default to perfect if no threshold
+    if (rule.threshold) {
+      const thresholdValue = parseFloat(rule.threshold);
+      if (!isNaN(thresholdValue) && thresholdValue > 0) {
+        // Create a compatible object to use the same computeExcessRatio function as alerts
+        // Use same default upperBound as alerts (100)
+        const mockAlert = {
+          value: rule.value,
+          metadata: {
+            thresholdF: thresholdValue,
+            upperBoundF: 100
+          }
+        } as AlertWithRuleName;
+
+        const excessRatio = computeExcessRatio(mockAlert);
+        rawScore = 10 * (1 - excessRatio);
+      }
+    }
+
+    return { rawScore, weight };
+  });
+
+  const sum = allScores.map(s => s.rawScore * s.weight).reduce((a, b) => a + b, 0);
+  const sumWeights = allScores.map(s => s.weight).reduce((a, b) => a + b, 0);
+
+  if (sumWeights === 0) {
+    return 10;
+  }
+
+  return sum / sumWeights;
+};
+
 // Score [0,1]; lower is better
-const computeExcessRatio = (a: AlertWithRuleName): number => {
+export const computeExcessRatio = (a: AlertWithRuleName): number => {
   // Assuming the alert value is a [0-n] percentage. Needs update if more use cases come up.
   const threshold = a.metadata.thresholdF / 2;
   const upper = a.metadata.upperBoundF;
@@ -510,6 +571,25 @@ export const computeAlertScore = (a: AlertWithRuleName): ScoreDetail => {
   };
 };
 
+// Mapping of severity levels to PatternFly Label colors
+// critical -> red (danger)
+// warning -> orange (warning)
+// info -> blue (info)
+const SEVERITY_LABEL_COLORS = {
+  critical: 'red',
+  warning: 'orange',
+  info: 'blue'
+} as const;
+
+export const getSeverityColor = (
+  severity: string | undefined
+): 'red' | 'orange' | 'blue' | 'grey' | 'purple' | 'cyan' | 'green' | 'gold' => {
+  if (severity && severity in SEVERITY_LABEL_COLORS) {
+    return SEVERITY_LABEL_COLORS[severity as keyof typeof SEVERITY_LABEL_COLORS];
+  }
+  return 'blue'; // default for info/undefined
+};
+
 export const isSilenced = (silence: SilenceMatcher[], labels: PrometheusLabels): boolean => {
   for (const matcher of silence) {
     if (!(matcher.name in labels)) {
diff --git a/web/src/components/health/recording-rule-card.tsx b/web/src/components/health/recording-rule-card.tsx
@@ -14,6 +14,7 @@ import {
 import { BellIcon, ExclamationCircleIcon, ExclamationTriangleIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+import { valueFormat } from '../../utils/format';
 import { RecordingRulesByResource } from './health-helper';
 
 export interface RecordingRuleCardProps {
@@ -43,8 +44,6 @@ export const RecordingRuleCard: React.FC<RecordingRuleCardProps> = ({ stats, kin
     classes.push('dark');
   }
 
-  const totalRules = stats.critical.length + stats.warning.length + stats.other.length;
-
   return (
     <Card className={classes.join(' ')} isClickable={onClick !== undefined} isClicked={isSelected}>
       <CardHeader
@@ -89,7 +88,7 @@ export const RecordingRuleCard: React.FC<RecordingRuleCardProps> = ({ stats, kin
           </FlexItem>
           <FlexItem>
             <TextContent>
-              <Text component={TextVariants.h1}>{totalRules}</Text>
+              <Text component={TextVariants.h1}>{valueFormat(stats.score, 1)}</Text>
             </TextContent>
           </FlexItem>
         </Flex>
diff --git a/web/src/components/health/recording-rule-details.tsx b/web/src/components/health/recording-rule-details.tsx
diff --git a/web/src/components/health/rule-details.tsx b/web/src/components/health/rule-details.tsx
diff --git a/web/src/components/health/unified-rule-details.tsx b/web/src/components/health/unified-rule-details.tsx
