add tests to activeSince function

Author: leandroberetta

web/locales/en/plugin__netobserv-plugin.json

@@ -584,5 +584,6 @@
   "The top DNS response code extracted from DNS response headers compared to total over the selected interval": "The top DNS response code extracted from DNS response headers compared to total over the selected interval",
   "rates": "rates",
   "with total": "with total",
-  "Invalid custom panel id": "Invalid custom panel id"
+  "Invalid custom panel id": "Invalid custom panel id",
+  "Yesterday": "Yesterday"
 }

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

@@ -27,7 +27,7 @@ export const AlertDetails: React.FC<AlertDetailsProps> = ({ resourceName, alert
         <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('Active since')}>{formatActiveSince(t, alert.activeAt)}</AlertDetailsValue>
         )}
         <AlertDetailsValue title={t('Labels')}>
           {labels.length === 0

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

@@ -40,7 +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>}
+      {alert.activeAt && <Td>{formatActiveSince(t, alert.activeAt)}</Td>}
       <Td>
         {labels.length === 0
           ? t('None')

web/src/utils/__tests__/datetime.spec.ts

@@ -1,4 +1,6 @@
-import { toISODateString, twentyFourHourTime } from '../datetime';
+import { TFunction } from 'react-i18next';
+import { formatActiveSince, toISODateString, twentyFourHourTime } from '../datetime';
+import { getLanguage } from '../language';
 
 describe('datetime', () => {
   it('should toISODateString', () => {
@@ -13,3 +15,66 @@ describe('datetime', () => {
     expect(twentyFourHourTime(new Date('1955-11-05T06:15:00'))).toBe('06:15');
   });
 });
+
+describe('formatActiveSince', () => {
+  const FIXED_NOW = new Date('2025-11-27T15:00:00');
+  const tMock: TFunction = ((key: string) => key) as unknown as TFunction;
+  
+  beforeAll(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(FIXED_NOW);
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  it('should format "today" as only time', () => {
+    const ts = '2025-11-27T10:15:00';
+    const date = new Date(ts);
+
+    const expectedTime = twentyFourHourTime(date, false);
+
+    const result = formatActiveSince(tMock, ts);
+
+    expect(result).toBe(expectedTime);
+  });
+
+  it('should format "yesterday" as "Yesterday, HH:MM"', () => {
+    const ts = '2025-11-26T22:00:00';
+    const date = new Date(ts);
+
+    const expectedTime = twentyFourHourTime(date, false);
+
+    const result = formatActiveSince(tMock,ts);
+
+    expect(result).toBe(`Yesterday, ${expectedTime}`);
+  });
+
+  it('should format dates within the last 7 days as "Weekday, HH:MM"', () => {
+    const ts = '2025-11-25T09:30:00'; 
+    const date = new Date(ts);
+
+    const weekdayFormatter = new Intl.DateTimeFormat(getLanguage(), {
+      weekday: 'short',
+    });
+    const weekday = weekdayFormatter.format(date);
+    const time = twentyFourHourTime(date, false);
+
+    const result = formatActiveSince(tMock, ts);
+
+    expect(result).toBe(`${weekday}, ${time}`);
+  });
+
+  it('should format older dates with "YYYY-MM-DD HH:MM"', () => {
+    const ts = '2025-11-07T14:00:00'; 
+    const date = new Date(ts);
+
+    const expectedDate = toISODateString(date);
+    const expectedTime = twentyFourHourTime(date, false);
+
+    const result = formatActiveSince(tMock, ts);
+
+    expect(result).toBe(`${expectedDate} ${expectedTime}`);
+  });
+});

web/src/utils/datetime.ts

@@ -131,7 +131,7 @@ export const computeStepInterval = (range: TimeRange | number) => {
  * - 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 => {
+export const formatActiveSince = (t: TFunction, timestamp: string): string => {
   const activeDate = new Date(timestamp);
   const now = new Date();
 
@@ -155,7 +155,7 @@ export const formatActiveSince = (timestamp: string): string => {
     activeDate.getMonth() === yesterday.getMonth() &&
     activeDate.getFullYear() === yesterday.getFullYear()
   ) {
-    return `Yesterday, ${timeStr}`;
+    return `${t('Yesterday')}, ${timeStr}`;
   }
 
   // Last 7 days: show day of week and time