diff --git a/web/src/components/Incidents/AlertsChart/AlertsChart.tsx b/web/src/components/Incidents/AlertsChart/AlertsChart.tsx index b1737714..e680d7ed 100644 --- a/web/src/components/Incidents/AlertsChart/AlertsChart.tsx +++ b/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} >
- {t('Alerts Timeline')} + + + + + {t('Alerts Timeline')} + + + {incidentsLastRefreshTime && ( + + + {t('Last updated at')} {timeFormatter.format(new Date(incidentsLastRefreshTime))} + + + )} + + {!selectedIncidentIsVisible || isEmpty(incidentsActiveFilters.groupId) ? ( ; chartDays: number; @@ -65,6 +69,7 @@ const IncidentsChart = ({ selectedGroupId: string; onIncidentClick: (groupId: string) => void; currentTime: number; + lastRefreshTime: number | null; }) => { const [isLoading, setIsLoading] = useState(true); const [chartContainerHeight, setChartContainerHeight] = useState(); @@ -131,9 +136,22 @@ const IncidentsChart = ({ style={{ position: 'relative' }} data-test={DataTestIDs.IncidentsChart.ChartContainer} > - - {t('Incidents Timeline')} - + + + + + {t('Incidents Timeline')} + + + {lastRefreshTime && ( + + + {t('Last updated at')} {timeFormatter.format(new Date(lastRefreshTime))} + + + )} + + {isLoading ? ( { selectedGroupId={selectedGroupId} onIncidentClick={handleIncidentChartClick} currentTime={incidentsLastRefreshTime} + lastRefreshTime={incidentsLastRefreshTime} />