Merge pull request #473 from PeterYurkovich/ou-930

OU-930: use non-legacy store for accurate hideGraphs value

Author: openshift-merge-bot[bot]

web/src/actions/observe.ts

@@ -29,6 +29,7 @@ export enum ActionType {
   QueryBrowserToggleAllSeries = 'queryBrowserToggleAllSeries',
   SetAlertCount = 'SetAlertCount',
   ToggleGraphs = 'toggleGraphs',
+  ShowGraphs = 'showGraphs',
   SetIncidents = 'setIncidents',
   SetIncidentsActiveFilters = 'setIncidentsActiveFilters',
   SetChooseIncident = 'setChooseIncident',
@@ -93,6 +94,8 @@ export const alertingSetRules = (key: rulesKey, rules: Rule[], perspective: Pers
 
 export const toggleGraphs = () => action(ActionType.ToggleGraphs);
 
+export const showGraphs = () => action(ActionType.ShowGraphs);
+
 export const queryBrowserAddQuery = () => action(ActionType.QueryBrowserAddQuery);
 
 export const queryBrowserDuplicateQuery = (index: number) =>
@@ -186,6 +189,7 @@ const actions = {
   queryBrowserToggleSeries,
   setAlertCount,
   toggleGraphs,
+  showGraphs,
   setIncidents,
   setIncidentsActiveFilters,
   setChooseIncident,

web/src/components/MetricsPage.tsx

@@ -73,6 +73,7 @@ import {
   queryBrowserToggleAllSeries,
   queryBrowserToggleIsEnabled,
   queryBrowserToggleSeries,
+  showGraphs,
   toggleGraphs,
 } from '../actions/observe';
 
@@ -94,7 +95,7 @@ import {
 import { MonitoringState } from '../reducers/observe';
 import { DropDownPollInterval } from './dropdown-poll-interval';
 import { useBoolean } from './hooks/useBoolean';
-import { getLegacyObserveState, usePerspective } from './hooks/usePerspective';
+import { getLegacyObserveState, getObserveState, usePerspective } from './hooks/usePerspective';
 import KebabDropdown from './kebab-dropdown';
 import { colors, Error, QueryBrowser } from './query-browser';
 import { QueryParams } from './query-params';
@@ -321,22 +322,19 @@ export const ToggleGraph: React.FC = () => {
   const { perspective } = usePerspective();
 
   const hideGraphs = useSelector(
-    (state: MonitoringState) => !!getLegacyObserveState(perspective, state)?.get('hideGraphs'),
+    (state: MonitoringState) => !!getObserveState(perspective, state)?.get('hideGraphs'),
   );
 
   const dispatch = useDispatch();
   const toggle = React.useCallback(() => dispatch(toggleGraphs()), [dispatch]);
+
   // Use an empty useEffect to get access to the cleanup function so that if graphs are
-  // currently hidden then we toggle one more time as we unmount
-  React.useEffect(
-    () => () => {
-      if (hideGraphs) {
-        toggle();
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [hideGraphs],
-  );
+  // currently hidden then we show the graphs as we unmount
+  React.useEffect(() => {
+    return () => {
+      dispatch(showGraphs());
+    };
+  }, [dispatch]);
 
   const icon = hideGraphs ? <ChartLineIcon /> : <CompressIcon />;
 
@@ -985,7 +983,7 @@ const QueryBrowserWrapper: React.FC<{
   const dispatch = useDispatch();
 
   const hideGraphs = useSelector(
-    (state: MonitoringState) => !!getLegacyObserveState(perspective, state)?.get('hideGraphs'),
+    (state: MonitoringState) => !!getObserveState(perspective, state)?.get('hideGraphs'),
   );
   const queriesList = useSelector((state: MonitoringState) =>
     getLegacyObserveState(perspective, state)?.getIn(['queryBrowser', 'queries']),

web/src/components/alerting/AlertsDetailsPage.tsx

@@ -22,6 +22,7 @@ import {
   getAlertsUrl,
   getLegacyObserveState,
   getNewSilenceAlertUrl,
+  getObserveState,
   getRuleUrl,
   usePerspective,
 } from '../hooks/usePerspective';
@@ -99,7 +100,7 @@ const AlertsDetailsPage_: React.FC = () => {
   const [namespace] = useActiveNamespace();
 
   const hideGraphs = useSelector(
-    (state: MonitoringState) => !!getLegacyObserveState(perspective, state)?.get('hideGraphs'),
+    (state: MonitoringState) => !!getObserveState(perspective, state)?.get('hideGraphs'),
   );
 
   const alerts: Alerts = useSelector((state: MonitoringState) =>

web/src/components/query-browser.tsx

@@ -69,7 +69,7 @@ import { queryBrowserTheme } from './query-browser-theme';
 import { PrometheusAPIError, TimeRange } from './types';
 import { getTimeRanges } from './utils';
 
-import { getLegacyObserveState, usePerspective } from './hooks/usePerspective';
+import { getLegacyObserveState, getObserveState, usePerspective } from './hooks/usePerspective';
 import { MonitoringState } from '../reducers/observe';
 import { LoadingInline } from './console/console-shared/src/components/loading/LoadingInline';
 import {
@@ -590,7 +590,7 @@ const QueryBrowser_: React.FC<QueryBrowserProps> = ({
   const { perspective } = usePerspective();
 
   const hideGraphs = useSelector(
-    (state: MonitoringState) => !!getLegacyObserveState(perspective, state)?.get('hideGraphs'),
+    (state: MonitoringState) => !!getObserveState(perspective, state)?.get('hideGraphs'),
   );
   const tickInterval = useSelector(
     (state: MonitoringState) =>

web/src/reducers/observe.ts

@@ -202,6 +202,9 @@ export default (state: ObserveState, action: ObserveAction): ObserveState => {
     case ActionType.ToggleGraphs:
       return state.set('hideGraphs', !state.get('hideGraphs'));
 
+    case ActionType.ShowGraphs:
+      return state.set('hideGraphs', false);
+
     case ActionType.QueryBrowserAddQuery:
       return state.setIn(
         ['queryBrowser', 'queries'],