Merge pull request #549 from Fewwy/fix-alerts-chart-empty-state

OBSINTA-789: Fix alerts chart empty state

Author: PeterYurkovich

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

@@ -30,6 +30,7 @@ import { useTranslation } from 'react-i18next';
 import { AlertsChartBar } from '../model';
 import { setAlertsAreLoading } from '../../../store/actions';
 import { MonitoringState } from '../../../store/store';
+import { isEmpty } from 'lodash-es';
 
 const AlertsChart = ({ theme }: { theme: 'light' | 'dark' }) => {
   const dispatch = useDispatch();
@@ -99,7 +100,7 @@ const AlertsChart = ({ theme }: { theme: 'light' | 'dark' }) => {
     <Card className="alerts-chart-card" style={{ overflow: 'visible' }}>
       <div ref={containerRef}>
         <CardTitle>Alerts Timeline</CardTitle>
-        {alertsAreLoading ? (
+        {alertsAreLoading || isEmpty(incidentsActiveFilters.groupId) ? (
           <EmptyState
             variant="lg"
             style={{

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import {
   Chart,
@@ -23,35 +23,31 @@ import {
   t_global_color_status_info_default,
   t_global_color_status_warning_default,
 } from '@patternfly/react-tokens';
-import { useDispatch, useSelector } from 'react-redux';
 import '../incidents-styles.css';
 import { IncidentsTooltip } from '../IncidentsTooltip';
 import { Incident } from '../model';
-import { createIncidentsChartBars, generateDateArray, updateBrowserUrl } from '../utils';
+import { createIncidentsChartBars, generateDateArray } from '../utils';
 import { dateTimeFormatter } from '../../console/utils/datetime';
 import { useTranslation } from 'react-i18next';
-import { MonitoringState } from '../../../store/store';
-import { setAlertsAreLoading, setIncidentsActiveFilters } from '../../../store/actions';
 
 const IncidentsChart = ({
   incidentsData,
   chartDays,
   theme,
+  selectedGroupId,
+  onIncidentClick,
 }: {
   incidentsData: Array<Incident>;
   chartDays: number;
   theme: 'light' | 'dark';
+  selectedGroupId: string;
+  onIncidentClick: (groupId: string) => void;
 }) => {
-  const dispatch = useDispatch();
   const [isLoading, setIsLoading] = useState(true);
   const [chartContainerHeight, setChartContainerHeight] = useState<number>();
   const [chartHeight, setChartHeight] = useState<number>();
   const dateValues = useMemo(() => generateDateArray(chartDays), [chartDays]);
 
-  const incidentsActiveFilters = useSelector(
-    (state: MonitoringState) => state.plugins.mcp.incidentsData.incidentsActiveFilters,
-  );
-  const selectedGroupId = incidentsActiveFilters.groupId?.[0] ?? null;
   const { i18n } = useTranslation();
 
   const chartData = useMemo(() => {
@@ -81,36 +77,13 @@ const IncidentsChart = ({
     }
   };
   useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
     const observer = getResizeObserver(containerRef.current, handleResize);
     handleResize();
     return () => observer();
   }, []);
 
   const clickHandler = (data, datum) => {
-    if (datum.datum.group_id === selectedGroupId) {
-      dispatch(
-        setIncidentsActiveFilters({
-          incidentsActiveFilters: {
-            ...incidentsActiveFilters,
-            groupId: [],
-          },
-        }),
-      );
-      updateBrowserUrl(incidentsActiveFilters, '');
-      dispatch(setAlertsAreLoading({ alertsAreLoading: true }));
-    } else {
-      dispatch(
-        setIncidentsActiveFilters({
-          incidentsActiveFilters: {
-            ...incidentsActiveFilters,
-            groupId: [datum.datum.group_id],
-          },
-        }),
-      );
-      updateBrowserUrl(incidentsActiveFilters, datum.datum.group_id);
-    }
+    onIncidentClick(datum.datum.group_id);
   };
 
   return (
@@ -235,4 +208,4 @@ const IncidentsChart = ({
   );
 };
 
-export default IncidentsChart;
+export default React.memo(IncidentsChart);

web/src/components/Incidents/IncidentsPage.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useMemo, useState, useEffect } from 'react';
+import { useMemo, useState, useEffect, useCallback } from 'react';
 import { useSafeFetch } from '../console/utils/safe-fetch-hook';
 import { createAlertsQuery, fetchDataForIncidentsAndAlerts } from './api';
 import { useTranslation } from 'react-i18next';
@@ -322,6 +322,31 @@ const IncidentsPage = () => {
     }
   }, [incidentsActiveFilters, filteredData, dispatch]);
 
+  const handleIncidentChartClick = useCallback(
+    (groupId) => {
+      if (groupId === selectedGroupId) {
+        dispatch(
+          setIncidentsActiveFilters({
+            incidentsActiveFilters: {
+              ...incidentsActiveFilters,
+              groupId: [],
+            },
+          }),
+        );
+      } else {
+        dispatch(
+          setIncidentsActiveFilters({
+            incidentsActiveFilters: {
+              ...incidentsActiveFilters,
+              groupId: [groupId],
+            },
+          }),
+        );
+      }
+    },
+    [dispatch, incidentsActiveFilters, selectedGroupId],
+  );
+
   return (
     <>
       <Helmet>
@@ -512,6 +537,8 @@ const IncidentsPage = () => {
                     incidentsData={filteredData}
                     chartDays={timeRanges.length}
                     theme={theme}
+                    selectedGroupId={selectedGroupId}
+                    onIncidentClick={handleIncidentChartClick}
                   />
                 </StackItem>
                 <StackItem>

web/src/components/Incidents/IncidentsTable.tsx

@@ -9,7 +9,7 @@ import {
 } from '@patternfly/react-core';
 import { SearchIcon, AngleDownIcon, AngleRightIcon } from '@patternfly/react-icons';
 import { ExpandableRowContent, Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
-import * as _ from 'lodash-es';
+import { isEmpty } from 'lodash-es';
 import { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { MonitoringState } from '../../store/store';
@@ -33,6 +33,9 @@ export const IncidentsTable = () => {
   const alertsAreLoading = useSelector(
     (state: MonitoringState) => state.plugins.mcp.incidentsData.alertsAreLoading,
   );
+  const incidentsActiveFilters = useSelector(
+    (state: MonitoringState) => state.plugins.mcp.incidentsData.incidentsActiveFilters,
+  );
 
   const [expandedAlerts, setExpandedAlerts] = useState<Array<string>>([]);
   const setAlertExpanded = (alert: GroupedAlert, isExpanding = true) =>
@@ -92,7 +95,7 @@ export const IncidentsTable = () => {
     return Math.min(...alert.alertsExpandedRowData.map((alertData) => alertData.alertsStartFiring));
   };
 
-  if (_.isEmpty(alertsTableData) || alertsAreLoading) {
+  if (isEmpty(alertsTableData) || alertsAreLoading || isEmpty(incidentsActiveFilters.groupId)) {
     return (
       <Card>
         <CardBody>