Skip to content

Commit

Permalink
[Synthetics] persist refresh interval in local storage (elastic#191333)
Browse files Browse the repository at this point in the history
## Summary

Stores refresh interval and refresh paused state in local storage.

Also defaults refresh to paused rather than active.

---------

Co-authored-by: Shahzad <[email protected]>
  • Loading branch information
dominiqueclarke and shahzad31 authored Sep 16, 2024
1 parent 684da23 commit 3ad697b
Show file tree
Hide file tree
Showing 13 changed files with 64 additions and 138 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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());
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -16,7 +15,6 @@ import {
selectMonitorListState,
selectorMonitorDetailsState,
selectorError,
selectRefreshInterval,
} from '../../../state';

export const useSelectedMonitor = (monId?: string) => {
Expand All @@ -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();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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();
Expand All @@ -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();
}
Expand All @@ -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]);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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;
Expand All @@ -32,8 +28,6 @@ export interface UiState {
searchText: string;
integrationsPopoverOpen: PopoverState | null;
monitorId: string;
refreshInterval: number;
refreshPaused: boolean;
}

const initialState: UiState = {
Expand All @@ -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) => {
Expand All @@ -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;
});
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,6 @@ export const mockState: SyntheticsAppState = {
integrationsPopoverOpen: null,
searchText: '',
monitorId: '',
refreshInterval: 60,
refreshPaused: true,
},
serviceLocations: {
throttling: DEFAULT_THROTTLING,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -75,8 +70,6 @@ describe('getSupportedUrlParams', () => {
projects: [],
schedules: [],
tags: [],
refreshInterval: AUTOREFRESH_INTERVAL_SECONDS,
refreshPaused: AUTOREFRESH_IS_PAUSED,
});
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
Expand Down Expand Up @@ -76,8 +71,6 @@ export const getSupportedUrlParams = (params: {
});

const {
refreshInterval,
refreshPaused,
dateRangeStart,
dateRangeEnd,
filters,
Expand Down Expand Up @@ -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,
Expand Down
Loading

0 comments on commit 3ad697b

Please sign in to comment.