[Synthetics] persist refresh interval in local storage (#191333)

## Summary Stores refresh interval and refresh paused state in local storage. Also defaults refresh to paused rather than active. --------- Co-authored-by: Shahzad <shahzad31comp@gmail.com>
elastic · Sep 16, 2024 · 3ad697b · 3ad697b
1 parent 684da23
commit 3ad697b
Show file tree

Hide file tree

Showing 13 changed files with 64 additions and 138 deletions.
diff --git a/.../plugins/observability_solution/synthetics/common/constants/synthetics/client_defaults.ts b/.../plugins/observability_solution/synthetics/common/constants/synthetics/client_defaults.ts
@@ -16,11 +16,11 @@ export const CLIENT_DEFAULTS_SYNTHETICS = {
   DATE_RANGE_END: 'now',
 
   /**
-   * The application auto refreshes every 30s by default.
+   * The application auto refreshes every 60s by default.
    */
   AUTOREFRESH_INTERVAL_SECONDS: 60,
   /**
-   * The application's autorefresh feature is enabled.
+   * The application's autorefresh feature is disabled by default.
    */
-  AUTOREFRESH_IS_PAUSED: false,
+  AUTOREFRESH_IS_PAUSED: true,
 };
diff --git a/...on/synthetics/public/apps/synthetics/components/common/components/auto_refresh_button.tsx b/...on/synthetics/public/apps/synthetics/components/common/components/auto_refresh_button.tsx
@@ -5,69 +5,17 @@
  * 2.0.
  */
 
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 import { EuiAutoRefreshButton, OnRefreshChangeProps } from '@elastic/eui';
-import { useDispatch, useSelector } from 'react-redux';
-import { CLIENT_DEFAULTS_SYNTHETICS } from '../../../../../../common/constants/synthetics/client_defaults';
-import { SyntheticsUrlParams } from '../../../utils/url_params';
-import { useUrlParams } from '../../../hooks';
-import {
-  selectRefreshInterval,
-  selectRefreshPaused,
-  setRefreshIntervalAction,
-  setRefreshPausedAction,
-} from '../../../state';
-const { AUTOREFRESH_INTERVAL_SECONDS, AUTOREFRESH_IS_PAUSED } = CLIENT_DEFAULTS_SYNTHETICS;
+import { useSyntheticsRefreshContext } from '../../../contexts/synthetics_refresh_context';
 
-const replaceDefaults = ({ refreshPaused, refreshInterval }: Partial<SyntheticsUrlParams>) => {
-  return {
-    refreshInterval: refreshInterval === AUTOREFRESH_INTERVAL_SECONDS ? undefined : refreshInterval,
-    refreshPaused: refreshPaused === AUTOREFRESH_IS_PAUSED ? undefined : refreshPaused,
-  };
-};
 export const AutoRefreshButton = () => {
-  const dispatch = useDispatch();
-
-  const refreshPaused = useSelector(selectRefreshPaused);
-  const refreshInterval = useSelector(selectRefreshInterval);
-
-  const [getUrlsParams, updateUrlParams] = useUrlParams();
-
-  const { refreshInterval: urlRefreshInterval, refreshPaused: urlIsPaused } = getUrlsParams();
-
-  const isFirstRender = useRef(true);
-
-  useEffect(() => {
-    if (isFirstRender.current) {
-      // sync url state with redux state on first render
-      dispatch(setRefreshIntervalAction(urlRefreshInterval));
-      dispatch(setRefreshPausedAction(urlIsPaused));
-      isFirstRender.current = false;
-    } else {
-      // sync redux state with url state on subsequent renders
-      if (urlRefreshInterval !== refreshInterval || urlIsPaused !== refreshPaused) {
-        updateUrlParams(
-          replaceDefaults({
-            refreshInterval,
-            refreshPaused,
-          }),
-          true
-        );
-      }
-    }
-  }, [updateUrlParams, refreshInterval, refreshPaused, urlRefreshInterval, urlIsPaused, dispatch]);
+  const { refreshInterval, setRefreshInterval, refreshPaused, setRefreshPaused } =
+    useSyntheticsRefreshContext();
 
   const onRefreshChange = (newProps: OnRefreshChangeProps) => {
-    dispatch(setRefreshIntervalAction(newProps.refreshInterval / 1000));
-    dispatch(setRefreshPausedAction(newProps.isPaused));
-
-    updateUrlParams(
-      replaceDefaults({
-        refreshInterval: newProps.refreshInterval / 1000,
-        refreshPaused: newProps.isPaused,
-      }),
-      true
-    );
+    setRefreshPaused(newProps.isPaused);
+    setRefreshInterval(newProps.refreshInterval / 1000);
   };
 
   return (

diff --git a/...olution/synthetics/public/apps/synthetics/components/common/components/last_refreshed.tsx b/...olution/synthetics/public/apps/synthetics/components/common/components/last_refreshed.tsx
@@ -9,16 +9,12 @@ import React, { useEffect, useState } from 'react';
 import moment from 'moment';
 import { EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { useSelector } from 'react-redux';
 import { useSyntheticsRefreshContext } from '../../../contexts';
-import { selectRefreshPaused } from '../../../state';
 
 export function LastRefreshed() {
-  const { lastRefresh: lastRefreshed } = useSyntheticsRefreshContext();
+  const { lastRefresh: lastRefreshed, refreshPaused } = useSyntheticsRefreshContext();
   const [refresh, setRefresh] = useState(() => Date.now());
 
-  const refreshPaused = useSelector(selectRefreshPaused);
-
   useEffect(() => {
     const interVal = setInterval(() => {
       setRefresh(Date.now());

diff --git a/...nthetics/public/apps/synthetics/components/monitor_details/hooks/use_selected_monitor.tsx b/...nthetics/public/apps/synthetics/components/monitor_details/hooks/use_selected_monitor.tsx
@@ -4,7 +4,6 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
 import { useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
@@ -16,7 +15,6 @@ import {
   selectMonitorListState,
   selectorMonitorDetailsState,
   selectorError,
-  selectRefreshInterval,
 } from '../../../state';
 
 export const useSelectedMonitor = (monId?: string) => {
@@ -27,14 +25,13 @@ export const useSelectedMonitor = (monId?: string) => {
   }
   const monitorsList = useSelector(selectEncryptedSyntheticsSavedMonitors);
   const { loading: monitorListLoading } = useSelector(selectMonitorListState);
-  const refreshInterval = useSelector(selectRefreshInterval);
 
   const monitorFromList = useMemo(
     () => monitorsList.find((monitor) => monitor[ConfigKey.CONFIG_ID] === monitorId) ?? null,
     [monitorId, monitorsList]
   );
   const error = useSelector(selectorError);
-  const { lastRefresh } = useSyntheticsRefreshContext();
+  const { lastRefresh, refreshInterval } = useSyntheticsRefreshContext();
   const { syntheticsMonitor, syntheticsMonitorLoading, syntheticsMonitorDispatchedAt } =
     useSelector(selectorMonitorDetailsState);
   const dispatch = useDispatch();

diff --git a/...bility_solution/synthetics/public/apps/synthetics/contexts/synthetics_refresh_context.tsx b/...bility_solution/synthetics/public/apps/synthetics/contexts/synthetics_refresh_context.tsx
@@ -14,22 +14,44 @@ import React, {
   useState,
   FC,
 } from 'react';
-import { useSelector } from 'react-redux';
+import useLocalStorage from 'react-use/lib/useLocalStorage';
 import { useEvent } from 'react-use';
 import moment from 'moment';
 import { Subject } from 'rxjs';
-import { selectRefreshInterval, selectRefreshPaused } from '../state';
+import { i18n } from '@kbn/i18n';
+import { CLIENT_DEFAULTS_SYNTHETICS } from '../../../../common/constants/synthetics/client_defaults';
+const { AUTOREFRESH_INTERVAL_SECONDS, AUTOREFRESH_IS_PAUSED } = CLIENT_DEFAULTS_SYNTHETICS;
 
 interface SyntheticsRefreshContext {
   lastRefresh: number;
   refreshApp: () => void;
+  refreshInterval: number;
+  refreshPaused: boolean;
+  setRefreshInterval: (interval: number) => void;
+  setRefreshPaused: (paused: boolean) => void;
 }
 
 const defaultContext: SyntheticsRefreshContext = {
   lastRefresh: 0,
   refreshApp: () => {
     throw new Error('App refresh was not initialized, set it when you invoke the context');
   },
+  refreshInterval: AUTOREFRESH_INTERVAL_SECONDS,
+  refreshPaused: AUTOREFRESH_IS_PAUSED,
+  setRefreshInterval: () => {
+    throw new Error(
+      i18n.translate('xpack.synthetics.refreshContext.intervalNotInitialized', {
+        defaultMessage: 'Refresh interval was not initialized, set it when you invoke the context',
+      })
+    );
+  },
+  setRefreshPaused: () => {
+    throw new Error(
+      i18n.translate('xpack.synthetics.refreshContext.pausedNotInitialized', {
+        defaultMessage: 'Refresh paused was not initialized, set it when you invoke the context',
+      })
+    );
+  },
 };
 
 export const SyntheticsRefreshContext = createContext(defaultContext);
@@ -41,8 +63,14 @@ export const SyntheticsRefreshContextProvider: FC<
 > = ({ children, reload$ }) => {
   const [lastRefresh, setLastRefresh] = useState<number>(Date.now());
 
-  const refreshPaused = useSelector(selectRefreshPaused);
-  const refreshInterval = useSelector(selectRefreshInterval);
+  const [refreshInterval, setRefreshInterval] = useLocalStorage<number>(
+    'xpack.synthetics.refreshInterval',
+    AUTOREFRESH_INTERVAL_SECONDS
+  );
+  const [refreshPaused, setRefreshPaused] = useLocalStorage<boolean>(
+    'xpack.synthetics.refreshPaused',
+    AUTOREFRESH_IS_PAUSED
+  );
 
   const refreshApp = useCallback(() => {
     const refreshTime = Date.now();
@@ -66,13 +94,26 @@ export const SyntheticsRefreshContextProvider: FC<
     return {
       lastRefresh,
       refreshApp,
+      refreshInterval: refreshInterval ?? AUTOREFRESH_INTERVAL_SECONDS,
+      refreshPaused: refreshPaused ?? AUTOREFRESH_IS_PAUSED,
+      setRefreshInterval,
+      setRefreshPaused,
     };
-  }, [lastRefresh, refreshApp]);
+  }, [
+    lastRefresh,
+    refreshApp,
+    refreshInterval,
+    refreshPaused,
+    setRefreshInterval,
+    setRefreshPaused,
+  ]);
 
   useEvent(
     'visibilitychange',
     () => {
-      const isOutdated = moment().diff(new Date(lastRefresh), 'seconds') > refreshInterval;
+      const isOutdated =
+        moment().diff(new Date(lastRefresh), 'seconds') >
+        (refreshInterval || AUTOREFRESH_INTERVAL_SECONDS);
       if (document.visibilityState !== 'hidden' && !refreshPaused && isOutdated) {
         refreshApp();
       }
@@ -88,7 +129,7 @@ export const SyntheticsRefreshContextProvider: FC<
       if (document.visibilityState !== 'hidden') {
         refreshApp();
       }
-    }, refreshInterval * 1000);
+    }, (refreshInterval || AUTOREFRESH_INTERVAL_SECONDS) * 1000);
     return () => clearInterval(interval);
   }, [refreshPaused, refreshApp, refreshInterval]);
 

diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/ui/actions.ts b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/ui/actions.ts
@@ -31,5 +31,3 @@ export const toggleIntegrationsPopover = createAction<PopoverState>(
 );
 
 export const setSelectedMonitorId = createAction<string>('[UI] SET MONITOR ID');
-export const setRefreshPausedAction = createAction<boolean>('[UI] SET REFRESH PAUSED');
-export const setRefreshIntervalAction = createAction<number>('[UI] SET REFRESH INTERVAL');
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/ui/index.ts b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/ui/index.ts
@@ -11,7 +11,6 @@ import {
   SYNTHETICS_STATUS_RULE,
   SYNTHETICS_TLS_RULE,
 } from '../../../../../common/constants/synthetics_alerts';
-import { CLIENT_DEFAULTS_SYNTHETICS } from '../../../../../common/constants/synthetics/client_defaults';
 import {
   PopoverState,
   toggleIntegrationsPopover,
@@ -20,10 +19,7 @@ import {
   setAlertFlyoutVisible,
   setSearchTextAction,
   setSelectedMonitorId,
-  setRefreshPausedAction,
-  setRefreshIntervalAction,
 } from './actions';
-const { AUTOREFRESH_INTERVAL_SECONDS, AUTOREFRESH_IS_PAUSED } = CLIENT_DEFAULTS_SYNTHETICS;
 
 export interface UiState {
   alertFlyoutVisible: typeof SYNTHETICS_TLS_RULE | typeof SYNTHETICS_STATUS_RULE | null;
@@ -32,8 +28,6 @@ export interface UiState {
   searchText: string;
   integrationsPopoverOpen: PopoverState | null;
   monitorId: string;
-  refreshInterval: number;
-  refreshPaused: boolean;
 }
 
 const initialState: UiState = {
@@ -43,8 +37,6 @@ const initialState: UiState = {
   searchText: '',
   integrationsPopoverOpen: null,
   monitorId: '',
-  refreshInterval: AUTOREFRESH_INTERVAL_SECONDS,
-  refreshPaused: AUTOREFRESH_IS_PAUSED,
 };
 
 export const uiReducer = createReducer(initialState, (builder) => {
@@ -66,12 +58,6 @@ export const uiReducer = createReducer(initialState, (builder) => {
     })
     .addCase(setSelectedMonitorId, (state, action) => {
       state.monitorId = action.payload;
-    })
-    .addCase(setRefreshPausedAction, (state, action) => {
-      state.refreshPaused = action.payload;
-    })
-    .addCase(setRefreshIntervalAction, (state, action) => {
-      state.refreshInterval = action.payload;
     });
 });
 

diff --git a/...ck/plugins/observability_solution/synthetics/public/apps/synthetics/state/ui/selectors.ts b/...ck/plugins/observability_solution/synthetics/public/apps/synthetics/state/ui/selectors.ts
@@ -14,12 +14,3 @@ export const selectAlertFlyoutVisibility = createSelector(
   uiStateSelector,
   ({ alertFlyoutVisible }) => alertFlyoutVisible
 );
-
-export const selectRefreshPaused = createSelector(
-  uiStateSelector,
-  ({ refreshPaused }) => refreshPaused
-);
-export const selectRefreshInterval = createSelector(
-  uiStateSelector,
-  ({ refreshInterval }) => refreshInterval
-);
diff --git a/...lution/synthetics/public/apps/synthetics/utils/testing/__mocks__/synthetics_store.mock.ts b/...lution/synthetics/public/apps/synthetics/utils/testing/__mocks__/synthetics_store.mock.ts
@@ -30,8 +30,6 @@ export const mockState: SyntheticsAppState = {
     integrationsPopoverOpen: null,
     searchText: '',
     monitorId: '',
-    refreshInterval: 60,
-    refreshPaused: true,
   },
   serviceLocations: {
     throttling: DEFAULT_THROTTLING,

diff --git a/...ution/synthetics/public/apps/synthetics/utils/url_params/get_supported_url_params.test.ts b/...ution/synthetics/public/apps/synthetics/utils/url_params/get_supported_url_params.test.ts
@@ -51,12 +51,7 @@ describe('getSupportedUrlParams', () => {
 
   it('returns default values', () => {
     const { FILTERS, SEARCH, STATUS_FILTER } = CLIENT_DEFAULTS;
-    const {
-      DATE_RANGE_START,
-      DATE_RANGE_END,
-      AUTOREFRESH_INTERVAL_SECONDS,
-      AUTOREFRESH_IS_PAUSED,
-    } = CLIENT_DEFAULTS_SYNTHETICS;
+    const { DATE_RANGE_START, DATE_RANGE_END } = CLIENT_DEFAULTS_SYNTHETICS;
     const result = getSupportedUrlParams({});
     expect(result).toEqual({
       absoluteDateRangeStart: MOCK_DATE_VALUE,
@@ -75,8 +70,6 @@ describe('getSupportedUrlParams', () => {
       projects: [],
       schedules: [],
       tags: [],
-      refreshInterval: AUTOREFRESH_INTERVAL_SECONDS,
-      refreshPaused: AUTOREFRESH_IS_PAUSED,
     });
   });
 

diff --git a/...y_solution/synthetics/public/apps/synthetics/utils/url_params/get_supported_url_params.ts b/...y_solution/synthetics/public/apps/synthetics/utils/url_params/get_supported_url_params.ts
@@ -7,17 +7,13 @@
 
 import { MonitorOverviewState } from '../../state';
 import { CLIENT_DEFAULTS_SYNTHETICS } from '../../../../../common/constants/synthetics/client_defaults';
-import { parseIsPaused } from './parse_is_paused';
-import { parseUrlInt } from './parse_url_int';
 import { CLIENT_DEFAULTS } from '../../../../../common/constants';
 import { parseAbsoluteDate } from './parse_absolute_date';
 
 // TODO: Change for Synthetics App if needed (Copied from legacy_uptime)
 export interface SyntheticsUrlParams {
   absoluteDateRangeStart: number;
   absoluteDateRangeEnd: number;
-  refreshInterval: number;
-  refreshPaused: boolean;
   dateRangeStart: string;
   dateRangeEnd: string;
   pagination?: string;
@@ -43,8 +39,7 @@ export interface SyntheticsUrlParams {
 const { ABSOLUTE_DATE_RANGE_START, ABSOLUTE_DATE_RANGE_END, SEARCH, FILTERS, STATUS_FILTER } =
   CLIENT_DEFAULTS;
 
-const { DATE_RANGE_START, DATE_RANGE_END, AUTOREFRESH_INTERVAL_SECONDS, AUTOREFRESH_IS_PAUSED } =
-  CLIENT_DEFAULTS_SYNTHETICS;
+const { DATE_RANGE_START, DATE_RANGE_END } = CLIENT_DEFAULTS_SYNTHETICS;
 
 /**
  * Gets the current URL values for the application. If no item is present
@@ -76,8 +71,6 @@ export const getSupportedUrlParams = (params: {
   });
 
   const {
-    refreshInterval,
-    refreshPaused,
     dateRangeStart,
     dateRangeEnd,
     filters,
@@ -112,8 +105,6 @@ export const getSupportedUrlParams = (params: {
       ABSOLUTE_DATE_RANGE_END,
       { roundUp: true }
     ),
-    refreshInterval: parseUrlInt(refreshInterval, AUTOREFRESH_INTERVAL_SECONDS),
-    refreshPaused: parseIsPaused(refreshPaused, AUTOREFRESH_IS_PAUSED),
     dateRangeStart: dateRangeStart || DATE_RANGE_START,
     dateRangeEnd: dateRangeEnd || DATE_RANGE_END,
     filters: filters || FILTERS,