feat(RHINENG-20424): improved ux and incident id filtering

Author: Fewwy

web/src/actions/observe.ts

@@ -32,7 +32,6 @@ export enum ActionType {
   ShowGraphs = 'showGraphs',
   SetIncidents = 'setIncidents',
   SetIncidentsActiveFilters = 'setIncidentsActiveFilters',
-  SetChooseIncident = 'setChooseIncident',
   SetAlertsData = 'setAlertsData',
   SetAlertsTableData = 'setAlertsTableData',
   SetAlertsAreLoading = 'setAlertsAreLoading',
@@ -145,8 +144,6 @@ export const setIncidents = (incidents) => action(ActionType.SetIncidents, incid
 export const setIncidentsActiveFilters = (incidentsActiveFilters) =>
   action(ActionType.SetIncidentsActiveFilters, incidentsActiveFilters);
 
-export const setChooseIncident = (groupId) => action(ActionType.SetChooseIncident, groupId);
-
 export const setAlertsData = (alertsData) => action(ActionType.SetAlertsData, alertsData);
 
 export const setAlertsTableData = (alertsTableData) =>
@@ -196,7 +193,6 @@ type Actions = {
   showGraphs: typeof showGraphs;
   setIncidents: typeof setIncidents;
   setIncidentsActiveFilters: typeof setIncidentsActiveFilters;
-  setChooseIncident: typeof setChooseIncident;
   setAlertsData: typeof setAlertsData;
   setAlertsTableData: typeof setAlertsTableData;
   setAlertsAreLoading: typeof setAlertsAreLoading;

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import {
   Chart,
@@ -24,7 +24,7 @@ import {
   t_global_color_status_warning_default,
 } from '@patternfly/react-tokens';
 import { useDispatch, useSelector } from 'react-redux';
-import { setAlertsAreLoading, setChooseIncident } from '../../../actions/observe';
+import { setAlertsAreLoading, setIncidentsActiveFilters } from '../../../actions/observe';
 import { MonitoringState } from '../../../reducers/observe';
 import '../incidents-styles.css';
 import { IncidentsTooltip } from '../IncidentsTooltip';
@@ -51,10 +51,19 @@ const IncidentsChart = ({
   const [chartHeight, setChartHeight] = useState<number>();
   const dateValues = useMemo(() => generateDateArray(chartDays), [chartDays]);
 
+  const incidentsActiveFilters = useSelector((state: MonitoringState) =>
+    state.plugins.mcp.getIn(['incidentsData', 'incidentsActiveFilters']),
+  );
+  const selectedGroupId = incidentsActiveFilters.groupId?.[0] ?? null;
+
   const chartData = useMemo(() => {
     if (!Array.isArray(incidentsData) || incidentsData.length === 0) return [];
-    return incidentsData.map((incident) => createIncidentsChartBars(incident, dateValues));
-  }, [incidentsData, dateValues]);
+    const filteredIncidents = selectedGroupId
+      ? incidentsData.filter((incident) => incident.group_id === selectedGroupId)
+      : incidentsData;
+
+    return filteredIncidents.map((incident) => createIncidentsChartBars(incident, dateValues));
+  }, [incidentsData, dateValues, selectedGroupId]);
 
   useEffect(() => {
     setIsLoading(false);
@@ -79,41 +88,31 @@ const IncidentsChart = ({
     return () => observer();
   }, []);
 
-  const selectedId = useSelector((state: MonitoringState) =>
-    state.plugins.mcp.getIn(['incidentsData', 'groupId']),
-  );
-  const incidentsActiveFilters = useSelector((state: MonitoringState) =>
-    state.plugins.mcp.getIn(['incidentsData', 'incidentsActiveFilters']),
-  );
-
-  const isHidden = useCallback(
-    (group_id) => selectedId !== '' && selectedId !== group_id,
-    [selectedId],
-  );
   const clickHandler = (data, datum) => {
-    if (datum.datum.group_id === selectedId) {
+    if (datum.datum.group_id === selectedGroupId) {
       dispatch(
-        setChooseIncident({
-          groupId: '',
+        setIncidentsActiveFilters({
+          incidentsActiveFilters: {
+            ...incidentsActiveFilters,
+            groupId: [],
+          },
         }),
       );
       updateBrowserUrl(incidentsActiveFilters, '');
       dispatch(setAlertsAreLoading({ alertsAreLoading: true }));
     } else {
       dispatch(
-        setChooseIncident({
-          groupId: datum.datum.group_id,
+        setIncidentsActiveFilters({
+          incidentsActiveFilters: {
+            ...incidentsActiveFilters,
+            groupId: [datum.datum.group_id],
+          },
         }),
       );
       updateBrowserUrl(incidentsActiveFilters, datum.datum.group_id);
     }
   };
 
-  const getOpacity = useCallback(
-    (datum) => (datum.fillOpacity = isHidden(datum.group_id) ? '0.3' : '1'),
-    [isHidden],
-  );
-
   return (
     <Card className="incidents-chart-card" style={{ overflow: 'visible' }}>
       <div ref={containerRef} style={{ position: 'relative' }}>
@@ -140,7 +139,7 @@ const IncidentsChart = ({
                     }
                     return `Severity: ${datum.name}
                     Component: ${datum.componentList?.join(', ')}
-                    Incident ID: 
+                    Incident ID:
                     ${datum.group_id}
                     Start: ${formatDate(new Date(datum.y0), true)}
                     End: ${datum.firing ? '---' : formatDate(new Date(datum.y), true)}`;
@@ -209,7 +208,7 @@ const IncidentsChart = ({
                         data: {
                           fill: ({ datum }) => datum.fill,
                           stroke: ({ datum }) => datum.fill,
-                          fillOpacity: ({ datum }) => (datum.nodata ? 0 : getOpacity(datum)),
+                          fillOpacity: ({ datum }) => (datum.nodata ? 0 : 1),
                           cursor: 'pointer',
                         },
                       }}

web/src/components/Incidents/IncidentsPage.tsx

@@ -44,7 +44,6 @@ import {
   setAlertsAreLoading,
   setAlertsData,
   setAlertsTableData,
-  setChooseIncident,
   setFilteredIncidentsData,
   setIncidentPageFilterType,
   setIncidents,
@@ -157,13 +156,6 @@ const IncidentsPage = () => {
           },
         }),
       );
-      if (urlParams?.groupId?.length > 0) {
-        dispatch(
-          setChooseIncident({
-            groupId: urlParams?.groupId?.at(0),
-          }),
-        );
-      }
     } else {
       // If no URL parameters exist, set the URL based on incidentsInitialState
       updateBrowserUrl(incidentsInitialState);
@@ -187,7 +179,11 @@ const IncidentsPage = () => {
         filteredIncidentsData: filterIncident(incidentsActiveFilters, incidents),
       }),
     );
-  }, [incidentsActiveFilters.state, incidentsActiveFilters.severity]);
+  }, [
+    incidentsActiveFilters.state,
+    incidentsActiveFilters.severity,
+    incidentsActiveFilters.groupId,
+  ]);
 
   const now = Date.now();
   const safeFetch = useSafeFetch();
@@ -334,17 +330,18 @@ const IncidentsPage = () => {
             <Spinner aria-label="incidents-chart-spinner" />
           </Bullseye>
         ) : (
-          <PageSection hasBodyWrapper={false}>
+          <PageSection hasBodyWrapper={false} className="incidents-page-main-section">
             <Toolbar
               id="toolbar-with-filter"
               collapseListedFiltersBreakpoint="xl"
               clearAllFilters={() =>
                 dispatch(
                   setIncidentsActiveFilters({
                     incidentsActiveFilters: {
+                      ...incidentsActiveFilters,
                       severity: [],
-                      days: ['7 days'],
                       state: [],
+                      groupId: [],
                     },
                   }),
                 )

web/src/components/Incidents/ToolbarItemFilter.tsx

@@ -8,8 +8,7 @@ import {
   MenuToggle,
   Badge,
 } from '@patternfly/react-core';
-import FilterIcon from '@patternfly/react-icons/dist/js/icons/filter-icon';
-import { getFilterKey } from './utils'; // Assuming this utility function exists
+import { getFilterKey } from './utils';
 
 interface IncidentFilterToolbarItemProps {
   categoryName: string;
@@ -97,9 +96,9 @@ const IncidentFilterToolbarItem: React.FC<IncidentFilterToolbarItemProps> = ({
               ref={toggleRef}
               onClick={onIncidentFilterToggle}
               isExpanded={incidentFilterIsExpanded}
-              icon={<FilterIcon />}
               badge={
-                Object.entries(incidentsActiveFilters[getFilterKey(categoryName)]).length > 0 ? (
+                Object.entries(incidentsActiveFilters?.[getFilterKey(categoryName)] || {}).length >
+                0 ? (
                   <Badge isRead>
                     {Object.entries(incidentsActiveFilters[getFilterKey(categoryName)]).length}
                   </Badge>

web/src/components/Incidents/incidents-styles.css

@@ -25,3 +25,7 @@
   margin-top: -1px;
   width: 0;
 }
+
+.incidents-page-main-section.pf-v6-c-page__main-section {
+  gap: 0;
+}

web/src/components/Incidents/utils.ts

@@ -17,13 +17,6 @@ import {
   Timestamps,
 } from './model';
 
-export const isIncidentFilter = (filter: unknown): filter is IncidentFilters => {
-  return (
-    typeof filter === 'string' &&
-    ['Critical', 'Warning', 'Firing', 'Informative', 'Resolved'].includes(filter)
-  );
-};
-
 function consolidateAndMergeIntervals(data: Incident, dateArray: SpanDates) {
   const severityRank = { 2: 2, 1: 1, 0: 0 };
   const filteredValues = filterAndSortValues(data, severityRank);
@@ -331,7 +324,7 @@ export function filterIncident(filters: IncidentFiltersCombined, incidents: Arra
   };
 
   return incidents.filter((incident) => {
-    if (!filters.severity.length && !filters.state.length) {
+    if (!filters?.severity?.length && !filters?.state?.length && !filters?.groupId?.length) {
       return true;
     }
 
@@ -345,8 +338,11 @@ export function filterIncident(filters: IncidentFiltersCombined, incidents: Arra
         ? filters.state.some((filter) => incident[conditions[filter]] === true)
         : true; // True if no state filters
 
+    const isIncidentIdMatch =
+      filters.groupId?.length > 0 ? filters.groupId.includes(incident.group_id) : true;
+
     // Combine conditions with AND behavior between categories
-    return isSeverityMatch && isStateMatch;
+    return isSeverityMatch && isStateMatch && isIncidentIdMatch;
   });
 }
 
@@ -488,6 +484,20 @@ export const changeDaysFilter = (
   );
 };
 
+/**
+ * A wrapper function that handles a user's selection on an incident filter.
+ *
+ * This function acts as the public entry point for filter selection,
+ * passing the event details and filter state to the internal `onSelect`
+ * helper function to perform the state update.
+ *
+ * @param {Event} event - The DOM event from the checkbox or filter selection.
+ * @param {string} selection - The value of the filter being selected or deselected.
+ * @param {Function} dispatch - The Redux dispatch function to trigger state changes.
+ * @param {object} incidentsActiveFilters - The current state of active filters.
+ * @param {string} filterCategoryType - The category of the filter (e.g., 'Incident ID', 'severity').
+ * @returns {void}
+ */
 export const onIncidentFiltersSelect = (
   event,
   selection: IncidentFilters,
@@ -498,6 +508,20 @@ export const onIncidentFiltersSelect = (
   onSelect(event, selection, dispatch, incidentsActiveFilters, filterCategoryType);
 };
 
+/**
+ * An internal helper function that manages the logic for selecting or deselecting a filter.
+ *
+ * It updates the Redux state based on the filter type. For 'groupId', it replaces the
+ * existing selection (single-select behavior). For all other filters, it adds or
+ * removes the selection from the array (multi-select behavior).
+ *
+ * @param {Event} event - The DOM event from the checkbox or filter selection.
+ * @param {string} selection - The value of the filter being selected or deselected.
+ * @param {Function} dispatch - The Redux dispatch function to trigger state changes.
+ * @param {object} incidentsActiveFilters - The current state of active filters.
+ * @param {string} filterCategoryType - The category of the filter.
+ * @returns {void}
+ */
 const onSelect = (event, selection, dispatch, incidentsActiveFilters, filterCategoryType) => {
   const checked = event.target.checked;
   let effectiveFilterType = filterCategoryType;
@@ -510,12 +534,20 @@ const onSelect = (event, selection, dispatch, incidentsActiveFilters, filterCate
     const targetArray = incidentsActiveFilters[effectiveFilterType] || [];
     const newFilters = { ...incidentsActiveFilters };
 
-    if (checked) {
-      if (!targetArray.includes(selection)) {
-        newFilters[effectiveFilterType] = [...targetArray, selection];
+    if (effectiveFilterType === 'groupId') {
+      if (checked) {
+        newFilters[effectiveFilterType] = [selection];
+      } else {
+        newFilters[effectiveFilterType] = [];
       }
     } else {
-      newFilters[effectiveFilterType] = targetArray.filter((value) => value !== selection);
+      if (checked) {
+        if (!targetArray.includes(selection)) {
+          newFilters[effectiveFilterType] = [...targetArray, selection];
+        }
+      } else {
+        newFilters[effectiveFilterType] = targetArray.filter((value) => value !== selection);
+      }
     }
 
     dispatch(
@@ -542,6 +574,16 @@ export const parseUrlParams = (search) => {
   return result;
 };
 
+/**
+ * Generates an array of unique incident ID options for a filter.
+ *
+ * This function iterates through a list of incident objects,
+ * extracts their unique `group_id`s, and returns them in a format
+ * suitable for a dropdown or filter component.
+ *
+ * @param {Array<Incident>} incidents - An array of incident objects.
+ * @returns {{value: string}[]} An array of objects, where each object has a `value` key with a unique incident ID.
+ */
 export const getIncidentIdOptions = (incidents: Array<Incident>) => {
   const uniqueIds = new Set<string>();
   incidents.forEach((incident) => {
@@ -554,6 +596,17 @@ export const getIncidentIdOptions = (incidents: Array<Incident>) => {
   }));
 };
 
+/**
+ * Maps a human-readable filter category name to its corresponding data key.
+ *
+ * This function is used to convert a display name (e.g., "Incident ID")
+ * into the internal key used to access filter data (e.g., "groupId").
+ * It handles a specific case for "Incident ID" and converts all other
+ * category names to lowercase.
+ *
+ * @param {string} categoryName - The human-readable name of the filter category.
+ * @returns {string} The corresponding data key for the filter.
+ */
 export const getFilterKey = (categoryName: string): string => {
   if (categoryName === 'Incident ID') {
     return 'groupId';

web/src/reducers/observe.ts

@@ -103,7 +103,6 @@ export default (state: ObserveState, action: ObserveAction): ObserveState => {
           groupId: [],
         },
         incidentPageFilterType: 'Severity',
-        groupId: '',
       }),
     });
   }
@@ -327,10 +326,6 @@ export default (state: ObserveState, action: ObserveAction): ObserveState => {
       );
     }
 
-    case ActionType.SetChooseIncident: {
-      return state.setIn(['incidentsData', 'groupId'], action.payload.groupId);
-    }
-
     case ActionType.SetAlertsData: {
       return state.setIn(['incidentsData', 'alertsData'], action.payload.alertsData);
     }