active since field added

Author: leandroberetta

web/locales/en/plugin__netobserv-plugin.json

@@ -246,6 +246,8 @@
   "Navigate to alert details": "Navigate to alert details",
   "State": "State",
   "Severity": "Severity",
+  "Active since": "Active since",
+  "Yesterday": "Yesterday",
   "Labels": "Labels",
   "Description": "Description",
   "Navigate to network traffic": "Navigate to network traffic",

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

@@ -3,6 +3,7 @@ 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 { formatActiveSince } from '../../utils/datetime';
 import { valueFormat } from '../../utils/format';
 import { AlertWithRuleName, getAlertFilteredLabels, getAlertLink } from './health-helper';
 
@@ -25,6 +26,11 @@ export const AlertDetails: React.FC<AlertDetailsProps> = ({ resourceName, alert
         </AlertDetailsValue>
         <AlertDetailsValue title={t('State')}>{alert.state}</AlertDetailsValue>
         <AlertDetailsValue title={t('Severity')}>{alert.labels.severity}</AlertDetailsValue>
+        {alert.activeAt && (
+          <AlertDetailsValue title={t('Active since')}>
+            {formatActiveSince(alert.activeAt)}
+          </AlertDetailsValue>
+        )}
         <AlertDetailsValue title={t('Labels')}>
           {labels.length === 0
             ? t('None')

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

@@ -3,6 +3,7 @@ import * as React from 'react';
 
 import { Label, Tooltip } from '@patternfly/react-core';
 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';
@@ -39,6 +40,7 @@ export const AlertRow: React.FC<AlertRowProps> = ({ kind, resourceName, alert, w
       )}
       <Td noPadding={!wide}>{alert.state}</Td>
       <Td>{alert.labels.severity}</Td>
+      {alert.activeAt && <Td>{formatActiveSince(alert.activeAt)}</Td>}
       <Td>
         {labels.length === 0
           ? t('None')

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

@@ -23,6 +23,7 @@ export const RuleDetails: React.FC<RuleDetailsProps> = ({ kind, info, wide }) =>
           <Th>{t('Summary')}</Th>
           <Th>{t('State')}</Th>
           <Th>{t('Severity')}</Th>
+          <Th>{t('Active since')}</Th>
           <Th>{t('Labels')}</Th>
           <Th>{t('Value')}</Th>
           <Th>{t('Description')}</Th>

web/src/utils/datetime.ts

@@ -123,3 +123,46 @@ export const computeStepInterval = (range: TimeRange | number) => {
     stepSeconds: step
   };
 };
+
+/**
+ * Formats a timestamp for "Active since" display with relative or absolute time.
+ * - Today: Shows only time (14:23)
+ * - Yesterday: Shows "Yesterday, HH:MM"
+ * - Last 7 days: Shows day of week and time (Tue, 14:23)
+ * - Older: Shows full date and time (2025-11-24 14:23)
+ */
+export const formatActiveSince = (timestamp: string): string => {
+  const activeDate = new Date(timestamp);
+  const now = new Date();
+
+  // Calculate time difference in milliseconds
+  const diffMs = now.getTime() - activeDate.getTime();
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+  // Format time as HH:MM
+  const timeStr = twentyFourHourTime(activeDate, false);
+
+  // Today: show only time
+  if (diffDays === 0 && now.getDate() === activeDate.getDate()) {
+    return timeStr;
+  }
+
+  // Yesterday: show "Yesterday, HH:MM"
+  const yesterday = new Date(now);
+  yesterday.setDate(yesterday.getDate() - 1);
+  if (activeDate.getDate() === yesterday.getDate() &&
+      activeDate.getMonth() === yesterday.getMonth() &&
+      activeDate.getFullYear() === yesterday.getFullYear()) {
+    return `Yesterday, ${timeStr}`;
+  }
+
+  // Last 7 days: show day of week and time
+  if (diffDays < 7) {
+    const weekdayFormatter = new Intl.DateTimeFormat(getLanguage(), { weekday: 'short' });
+    const weekday = weekdayFormatter.format(activeDate);
+    return `${weekday}, ${timeStr}`;
+  }
+
+  // Older: show full date and time (YYYY-MM-DD HH:MM)
+  return `${toISODateString(activeDate)} ${timeStr}`;
+};