Merge pull request #624 from falox/fix-incidents

NO-JIRA: Display incidents' last update time

Author: openshift-merge-bot[bot]

web/src/components/Incidents/AlertsChart/AlertsChart.tsx

@@ -12,9 +12,12 @@ import {
 import {
   Card,
   CardBody,
+  CardHeader,
   CardTitle,
   EmptyState,
   EmptyStateBody,
+  Flex,
+  FlexItem,
   getResizeObserver,
 } from '@patternfly/react-core';
 import {
@@ -30,7 +33,7 @@ import {
   generateAlertsDateArray,
   getCurrentTime,
 } from '../utils';
-import { dateTimeFormatter } from '../../console/utils/datetime';
+import { dateTimeFormatter, timeFormatter } from '../../console/utils/datetime';
 import { useTranslation } from 'react-i18next';
 import { AlertsChartBar } from '../model';
 import { setAlertsAreLoading } from '../../../store/actions';
@@ -114,7 +117,22 @@ const AlertsChart = ({ theme }: { theme: 'light' | 'dark' }) => {
       data-test={DataTestIDs.AlertsChart.Card}
     >
       <div ref={containerRef} data-test={DataTestIDs.AlertsChart.ChartContainer}>
-        <CardTitle data-test={DataTestIDs.AlertsChart.Title}>{t('Alerts Timeline')}</CardTitle>
+        <CardHeader>
+          <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+            <FlexItem>
+              <CardTitle data-test={DataTestIDs.AlertsChart.Title}>
+                {t('Alerts Timeline')}
+              </CardTitle>
+            </FlexItem>
+            {incidentsLastRefreshTime && (
+              <FlexItem>
+                <span className="pf-v6-u-text-color-subtle">
+                  {t('Last updated at')} {timeFormatter.format(new Date(incidentsLastRefreshTime))}
+                </span>
+              </FlexItem>
+            )}
+          </Flex>
+        </CardHeader>
         {!selectedIncidentIsVisible || isEmpty(incidentsActiveFilters.groupId) ? (
           <EmptyState
             variant="lg"

web/src/components/Incidents/IncidentsChart/IncidentsChart.tsx

@@ -14,7 +14,10 @@ import {
   Bullseye,
   Card,
   CardBody,
+  CardHeader,
   CardTitle,
+  Flex,
+  FlexItem,
   getResizeObserver,
   Spinner,
 } from '@patternfly/react-core';
@@ -31,7 +34,7 @@ import {
   createIncidentsChartBars,
   generateDateArray,
 } from '../utils';
-import { dateTimeFormatter } from '../../console/utils/datetime';
+import { dateTimeFormatter, timeFormatter } from '../../console/utils/datetime';
 import { useTranslation } from 'react-i18next';
 import { DataTestIDs } from '../../data-test';
 
@@ -58,13 +61,15 @@ const IncidentsChart = ({
   selectedGroupId,
   onIncidentClick,
   currentTime,
+  lastRefreshTime,
 }: {
   incidentsData: Array<Incident>;
   chartDays: number;
   theme: 'light' | 'dark';
   selectedGroupId: string;
   onIncidentClick: (groupId: string) => void;
   currentTime: number;
+  lastRefreshTime: number | null;
 }) => {
   const [isLoading, setIsLoading] = useState(true);
   const [chartContainerHeight, setChartContainerHeight] = useState<number>();
@@ -131,9 +136,22 @@ const IncidentsChart = ({
         style={{ position: 'relative' }}
         data-test={DataTestIDs.IncidentsChart.ChartContainer}
       >
-        <CardTitle data-test={DataTestIDs.IncidentsChart.Title}>
-          {t('Incidents Timeline')}
-        </CardTitle>
+        <CardHeader>
+          <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+            <FlexItem>
+              <CardTitle data-test={DataTestIDs.IncidentsChart.Title}>
+                {t('Incidents Timeline')}
+              </CardTitle>
+            </FlexItem>
+            {lastRefreshTime && (
+              <FlexItem>
+                <span className="pf-v6-u-text-color-subtle">
+                  {t('Last updated at')} {timeFormatter.format(new Date(lastRefreshTime))}
+                </span>
+              </FlexItem>
+            )}
+          </Flex>
+        </CardHeader>
         {isLoading ? (
           <Bullseye>
             <Spinner

web/src/components/Incidents/IncidentsPage.tsx

@@ -609,6 +609,7 @@ const IncidentsPage = () => {
                     selectedGroupId={selectedGroupId}
                     onIncidentClick={handleIncidentChartClick}
                     currentTime={incidentsLastRefreshTime}
+                    lastRefreshTime={incidentsLastRefreshTime}
                   />
                 </StackItem>
                 <StackItem>