Skip to content

Commit b25306d

Browse files
committed
OU-1039: add info alert to the Incident page
1 parent ea66fe4 commit b25306d

2 files changed

Lines changed: 41 additions & 1 deletion

File tree

web/locales/en/plugin__monitoring-plugin.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -303,5 +303,6 @@
303303
"No metrics targets found": "No metrics targets found",
304304
"Error loading latest targets data": "Error loading latest targets data",
305305
"Search by endpoint or namespace...": "Search by endpoint or namespace...",
306-
"Text": "Text"
306+
"Text": "Text",
307+
"Incident data is updated every few minutes. What you see may be up to 5 minutes old. Refresh the page to view updated information.":"Incident data is updated every few minutes. What you see may be up to 5 minutes old. Refresh the page to view updated information."
307308
}

web/src/components/Incidents/IncidentsPage.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ import {
2020
ToolbarGroup,
2121
Flex,
2222
FlexItem,
23+
Alert,
24+
AlertActionCloseButton,
2325
} from '@patternfly/react-core';
2426
import { IncidentsTable } from './IncidentsTable';
2527
import {
@@ -89,6 +91,11 @@ const IncidentsPage = () => {
8991
>([]);
9092
const [hideCharts, setHideCharts] = useState(false);
9193
const [isInitialized, setIsInitialized] = useState(false);
94+
const INCIDENTS_DATA_ALERT_DISPLAYED = 'monitoring/incidents/data-alert-displayed';
95+
const [showDataDelayAlert, setShowDataDelayAlert] = useState(() => {
96+
const alertDisplayed = localStorage.getItem(INCIDENTS_DATA_ALERT_DISPLAYED);
97+
return !alertDisplayed;
98+
});
9299

93100
const [filtersExpanded, setFiltersExpanded] = useState<IncidentsPageFiltersExpandedState>({
94101
severity: false,
@@ -350,6 +357,18 @@ const IncidentsPage = () => {
350357
}
351358
}, [incidentsActiveFilters, filteredData, dispatch]);
352359

360+
useEffect(() => {
361+
// Set up 5-minute timer to hide banner automatically on first visit
362+
if (showDataDelayAlert) {
363+
const timer = setTimeout(() => {
364+
setShowDataDelayAlert(false);
365+
localStorage.setItem(INCIDENTS_DATA_ALERT_DISPLAYED, 'true');
366+
}, 5 * 60 * 1000);
367+
368+
return () => clearTimeout(timer);
369+
}
370+
}, [showDataDelayAlert]);
371+
353372
const handleIncidentChartClick = useCallback(
354373
(groupId) => {
355374
closeDropDownFilters();
@@ -389,6 +408,26 @@ const IncidentsPage = () => {
389408
</Bullseye>
390409
) : (
391410
<PageSection hasBodyWrapper={false} className="incidents-page-main-section">
411+
{showDataDelayAlert && (
412+
<Alert
413+
variant="info"
414+
title="Data delay"
415+
className="pf-v6-u-mb-md"
416+
actionClose={
417+
<AlertActionCloseButton
418+
aria-label="Close data delay alert"
419+
onClose={() => {
420+
setShowDataDelayAlert(false);
421+
localStorage.setItem(INCIDENTS_DATA_ALERT_DISPLAYED, 'true');
422+
}}
423+
/>
424+
}
425+
>
426+
{t(
427+
'Incident data is updated every few minutes. What you see may be up to 5 minutes old. Refresh the page to view updated information.',
428+
)}
429+
</Alert>
430+
)}
392431
<Toolbar
393432
id="toolbar-with-filter"
394433
data-test={DataTestIDs.IncidentsPage.Toolbar}

0 commit comments

Comments
 (0)