Merge pull request #474 from PeterYurkovich/ou-943

OU-943: Manual Cherry Pick

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) =>
@@ -187,6 +190,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,7 +322,7 @@ 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();
@@ -338,6 +339,14 @@ export const ToggleGraph: React.FC = () => {
     [hideGraphs],
   );
 
+  // Use an empty useEffect to get access to the cleanup function so that if graphs are
+  // currently hidden then we show the graphs as we unmount
+  React.useEffect(() => {
+    return () => {
+      dispatch(showGraphs());
+    };
+  }, [dispatch]);
+
   const icon = hideGraphs ? <ChartLineIcon /> : <CompressIcon />;
 
   return (
@@ -987,7 +996,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

@@ -87,7 +87,7 @@ import {
   formatPrometheusDuration,
   parsePrometheusDuration,
 } from './console/console-shared/src/datetime/prometheus';
-import { getLegacyObserveState, usePerspective } from './hooks/usePerspective';
+import { getLegacyObserveState, getObserveState, usePerspective } from './hooks/usePerspective';
 import './query-browser.scss';
 
 const spans = ['5m', '15m', '30m', '1h', '2h', '6h', '12h', '1d', '2d', '1w', '2w'];
@@ -598,7 +598,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'],