Merge pull request #539 from Fewwy/fix-alertschartbars

OU-833: fix 2 bugs for incidents page

Author: openshift-merge-bot[bot]

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

@@ -44,8 +44,8 @@ const AlertsChart = ({ theme }: { theme: 'light' | 'dark' }) => {
   const filteredData = useSelector(
     (state: MonitoringState) => state.plugins.mcp.incidentsData.filteredIncidentsData,
   );
-  const incidentGroupId = useSelector(
-    (state: MonitoringState) => state.plugins.mcp.incidentsData.groupId,
+  const incidentsActiveFilters = useSelector(
+    (state: MonitoringState) => state.plugins.mcp.incidentsData.incidentsActiveFilters,
   );
   const { i18n } = useTranslation();
   // Use dynamic date range based on actual alerts data instead of fixed chartDays
@@ -68,8 +68,8 @@ const AlertsChart = ({ theme }: { theme: 'light' | 'dark' }) => {
   }, [chartData]);
 
   const selectedIncidentIsVisible = useMemo(() => {
-    return filteredData.some((incident) => incident.group_id === incidentGroupId);
-  }, [filteredData, incidentGroupId]);
+    return filteredData.some((incident) => incident.group_id === incidentsActiveFilters.groupId);
+  }, [filteredData, incidentsActiveFilters.groupId]);
 
   useEffect(() => {
     dispatch(setAlertsAreLoading({ alertsAreLoading: !selectedIncidentIsVisible }));

web/src/components/Incidents/ToolbarItemFilter.tsx

@@ -9,7 +9,7 @@ import {
   Badge,
 } from '@patternfly/react-core';
 import { getFilterKey } from './utils';
-import { IncidentFilters, IncidentFiltersCombined } from './model';
+import { IncidentFiltersCombined } from './model';
 import { setAlertsAreLoading } from '../../store/actions';
 
 interface IncidentFilterToolbarItemProps {
@@ -30,7 +30,7 @@ interface IncidentFilterToolbarItemProps {
   incidentFilterIsExpanded: boolean;
   onIncidentFiltersSelect: (
     event: React.MouseEvent | React.ChangeEvent | undefined,
-    selection: IncidentFilters | undefined,
+    selection: any,
     dispatch: any,
     activeFilters: any,
     categoryFilterType: string,
@@ -86,7 +86,7 @@ const IncidentFilterToolbarItem: React.FC<IncidentFilterToolbarItemProps> = ({
             if (typeof selection === 'string') {
               onIncidentFiltersSelect(
                 event,
-                selection as IncidentFilters,
+                selection,
                 dispatch,
                 incidentsActiveFilters,
                 categoryName.toLowerCase(),

web/src/components/Incidents/model.ts

@@ -54,15 +54,24 @@ export type Alert = {
 
 export type DaysFilters = '1 day' | '3 days' | '7 days' | '15 days';
 
-export type IncidentFilters = 'Critical' | 'Warning' | 'Firing' | 'Informative' | 'Resolved';
+export type IncidentStateFilters = 'Resolved' | 'Firing';
+
+export type IncidentSeverityFilters = 'Critical' | 'Warning' | 'Informative';
 
 export type Severity = 'critical' | 'warning' | 'info';
 
+export type IncidentFilterSelectionCombined =
+  | 'Critical'
+  | 'Warning'
+  | 'Informative'
+  | 'Resolved'
+  | 'Firing';
+
 export type IncidentFiltersCombined = {
   days: Array<DaysFilters>;
   groupId?: Array<string>;
-  severity?: Array<string>;
-  state?: Array<string>;
+  severity?: Array<IncidentSeverityFilters>;
+  state?: Array<IncidentStateFilters>;
 };
 
 export type IncidentsPageFiltersExpandedState = {

web/src/components/Incidents/utils.ts

@@ -12,7 +12,6 @@ import {
   AlertsIntervalsArray,
   DaysFilters,
   Incident,
-  IncidentFilters,
   IncidentFiltersCombined,
   IncidentsDetailsAlert,
   SpanDates,
@@ -227,26 +226,20 @@ export const createAlertsChartBars = (alert: IncidentsDetailsAlert): AlertsChart
     warning: t_global_color_status_warning_default.var,
   };
 
-  const data: AlertsChartBar[] = [];
+  const data = [];
 
   for (let i = 0; i < groupedData.length; i++) {
-    const y0AsString = new Date(groupedData[i][0] * 1000).toISOString();
-    const yAsString = new Date(groupedData[i][1] * 1000).toISOString();
-
     data.push({
-      y0: y0AsString,
-      y: yAsString,
+      y0: new Date(groupedData[i][0] * 1000),
+      y: new Date(groupedData[i][1] * 1000),
       x: alert.x,
-      severity: (alert.severity[0].toUpperCase() + alert.severity.slice(1)) as
-        | 'Info'
-        | 'Warning'
-        | 'Critical',
+      severity: alert.severity[0].toUpperCase() + alert.severity.slice(1),
       name: alert.alertname,
       namespace: alert.namespace,
       layer: alert.layer,
       component: alert.component,
-      nodata: groupedData[i][2] === 'nodata',
-      alertstate: alert.alertstate as 'resolved' | 'firing',
+      nodata: groupedData[i][2] === 'nodata' ? true : false,
+      alertstate: alert.alertstate,
       silenced: alert.silenced,
       fill:
         alert.severity === 'critical'
@@ -444,7 +437,7 @@ export function filterIncident(filters: IncidentFiltersCombined, incidents: Arra
 
 export const onDeleteIncidentFilterChip = (
   type: string,
-  id: IncidentFilters | string,
+  id: string,
   filters: IncidentFiltersCombined,
   setFilters,
 ) => {
@@ -601,7 +594,7 @@ export const changeDaysFilter = (
  */
 export const onIncidentFiltersSelect = (
   event,
-  selection: IncidentFilters | undefined,
+  selection: string,
   dispatch,
   incidentsActiveFilters: IncidentFiltersCombined,
   filterCategoryType: string,

web/src/store/store.ts

@@ -5,8 +5,8 @@ import { Alert, PrometheusLabels, Rule } from '@openshift-console/dynamic-plugin
 import { Silences } from '../components/types';
 import {
   DaysFilters,
-  IncidentFilters,
-  IncidentFiltersCombined,
+  IncidentSeverityFilters,
+  IncidentStateFilters,
 } from '../components/Incidents/model';
 import { Variable } from '../components/dashboards/legacy/legacy-variable-dropdowns';
 
@@ -37,10 +37,16 @@ export type ObserveState = {
     incidentsChartSelectedId: string;
     incidentsInitialState: {
       days: Array<DaysFilters>;
-      incidentFilters: Array<IncidentFilters>;
+      severity: Array<IncidentSeverityFilters>;
+      state: Array<IncidentStateFilters>;
+      groupId: Array<string>;
+    };
+    incidentsActiveFilters: {
+      days: Array<DaysFilters>;
+      severity: Array<IncidentSeverityFilters>;
+      state: Array<IncidentStateFilters>;
+      groupId: Array<string>;
     };
-    incidentsActiveFilters: IncidentFiltersCombined;
-    groupId: string;
     incidentPageFilterType: string;
   };
   queryBrowser: {
@@ -77,13 +83,17 @@ export const defaultObserveState: ObserveState = {
     incidentsChartSelectedId: '',
     incidentsInitialState: {
       days: ['7 days'],
-      incidentFilters: ['Critical', 'Warning', 'Firing'],
+      severity: ['Critical', 'Warning'],
+      state: ['Firing'],
+      groupId: [],
     },
     incidentsActiveFilters: {
       days: [],
+      severity: [],
+      state: [],
+      groupId: [],
     },
     incidentPageFilterType: 'Severity',
-    groupId: '',
   },
   alerting: {},
   hideGraphs: false,