From 65af8c1b98d85469da6fdb40584df24457c9dbb4 Mon Sep 17 00:00:00 2001 From: Palash Gupta Date: Thu, 10 Nov 2022 20:48:40 +0530 Subject: [PATCH] 801 dropdown is added in the dashboard page (#1669) * chore: update the import from constant rather than static string * chore: removed redundant div * feat: added auto refresh component * refactor: top nav is refactored --- frontend/src/constants/app.ts | 2 + .../container/TopNav/AutoRefresh/config.ts | 63 ++++++++++ .../container/TopNav/AutoRefresh/index.tsx | 108 ++++++++++++++++++ .../container/TopNav/AutoRefresh/styles.ts | 9 ++ .../TopNav/DateTimeSelection/Refresh.tsx | 8 +- .../TopNav/DateTimeSelection/config.ts | 16 +++ .../TopNav/DateTimeSelection/index.tsx | 23 +++- .../TopNav/DateTimeSelection/styles.ts | 12 +- frontend/src/container/TopNav/index.tsx | 52 ++++----- frontend/src/store/actions/global.ts | 3 +- 10 files changed, 250 insertions(+), 46 deletions(-) create mode 100644 frontend/src/container/TopNav/AutoRefresh/config.ts create mode 100644 frontend/src/container/TopNav/AutoRefresh/index.tsx create mode 100644 frontend/src/container/TopNav/AutoRefresh/styles.ts diff --git a/frontend/src/constants/app.ts b/frontend/src/constants/app.ts index 68bfe983db..8529db4e4d 100644 --- a/frontend/src/constants/app.ts +++ b/frontend/src/constants/app.ts @@ -11,3 +11,5 @@ export const INVITE_MEMBERS_HASH = '#invite-team-members'; export const SIGNOZ_UPGRADE_PLAN_URL = 'https://upgrade.signoz.io/upgrade-from-app'; + +export const DASHBOARD_TIME_IN_DURATION = 'refreshInterval'; diff --git a/frontend/src/container/TopNav/AutoRefresh/config.ts b/frontend/src/container/TopNav/AutoRefresh/config.ts new file mode 100644 index 0000000000..240b7d1f25 --- /dev/null +++ b/frontend/src/container/TopNav/AutoRefresh/config.ts @@ -0,0 +1,63 @@ +export const options: IOptions[] = [ + { + label: '', + key: 'off', + value: 0, + }, + { + label: '5s', + key: '5s', + value: 5000, + }, + { + label: '10s', + key: '10s', + value: 10000, + }, + { + label: '30s', + key: '30s', + value: 30000, + }, + { + label: '1m', + key: '1m', + value: 60000, + }, + { + label: '5m', + key: '5m', + value: 300000, + }, + { + label: '10m', + key: '10m', + value: 600000, + }, + { + label: '30m', + key: '30m', + value: 1800000, + }, + { + label: '1h', + key: '1h', + value: 3600000, + }, + { + label: '2h', + key: '2h', + value: 7200000, + }, + { + label: '1d', + key: '1d', + value: 86400000, + }, +]; + +export interface IOptions { + label: string; + key: string; + value: number; +} diff --git a/frontend/src/container/TopNav/AutoRefresh/index.tsx b/frontend/src/container/TopNav/AutoRefresh/index.tsx new file mode 100644 index 0000000000..f81875bcc3 --- /dev/null +++ b/frontend/src/container/TopNav/AutoRefresh/index.tsx @@ -0,0 +1,108 @@ +import { Select } from 'antd'; +import get from 'api/browser/localstorage/get'; +import set from 'api/browser/localstorage/set'; +import { DASHBOARD_TIME_IN_DURATION } from 'constants/app'; +import dayjs from 'dayjs'; +import useUrlQuery from 'hooks/useUrlQuery'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { useLocation } from 'react-router-dom'; +import { useInterval } from 'react-use'; +import { Dispatch } from 'redux'; +import { AppState } from 'store/reducers'; +import AppActions from 'types/actions'; +import { UPDATE_TIME_INTERVAL } from 'types/actions/globalTime'; +import { GlobalReducer } from 'types/reducer/globalTime'; + +import { options } from './config'; +import { SelectContainer } from './styles'; + +function AutoRefresh({ disabled = false }: AutoRefreshProps): JSX.Element { + const { minTime: initialMinTime, selectedTime } = useSelector< + AppState, + GlobalReducer + >((state) => state.globalTime); + const { pathname } = useLocation(); + + const params = useUrlQuery(); + + const localStorageData = JSON.parse(get(DASHBOARD_TIME_IN_DURATION) || '{}'); + + const localStorageValue = useMemo(() => localStorageData[pathname], [ + pathname, + localStorageData, + ]); + + const dispatch = useDispatch>(); + const [selectedOption, setSelectedOption] = useState( + localStorageValue || options[0].key, + ); + + useEffect(() => { + setSelectedOption(localStorageValue || options[0].key); + }, [localStorageValue, params]); + + const getOption = useMemo( + () => options.find((option) => option.key === selectedOption), + [selectedOption], + ); + + useInterval(() => { + const selectedValue = getOption?.value; + + if (disabled) { + return; + } + + if (selectedOption !== 'off' && selectedValue) { + const min = initialMinTime / 1000000; + + dispatch({ + type: UPDATE_TIME_INTERVAL, + payload: { + maxTime: dayjs().valueOf() * 1000000, + minTime: dayjs(min).subtract(selectedValue, 'second').valueOf() * 1000000, + selectedTime, + }, + }); + } + }, getOption?.value || 0); + + const onChangeHandler = useCallback( + (value: unknown) => { + if (typeof value === 'string') { + setSelectedOption(value); + params.set(DASHBOARD_TIME_IN_DURATION, value); + set( + DASHBOARD_TIME_IN_DURATION, + JSON.stringify({ ...localStorageData, [pathname]: value }), + ); + } + }, + [params, pathname, localStorageData], + ); + + return ( + + {options.map((option) => ( + + {option.label} + + ))} + + ); +} + +interface AutoRefreshProps { + disabled?: boolean; +} + +AutoRefresh.defaultProps = { + disabled: false, +}; + +export default AutoRefresh; diff --git a/frontend/src/container/TopNav/AutoRefresh/styles.ts b/frontend/src/container/TopNav/AutoRefresh/styles.ts new file mode 100644 index 0000000000..6e8380703f --- /dev/null +++ b/frontend/src/container/TopNav/AutoRefresh/styles.ts @@ -0,0 +1,9 @@ +import { Select } from 'antd'; +import styled from 'styled-components'; + +export const SelectContainer = styled(Select)` + &&& { + width: 100%; + min-width: 4rem; + } +`; diff --git a/frontend/src/container/TopNav/DateTimeSelection/Refresh.tsx b/frontend/src/container/TopNav/DateTimeSelection/Refresh.tsx index 36b1163dda..f4597e5727 100644 --- a/frontend/src/container/TopNav/DateTimeSelection/Refresh.tsx +++ b/frontend/src/container/TopNav/DateTimeSelection/Refresh.tsx @@ -2,7 +2,10 @@ import React, { useEffect, useState } from 'react'; import { RefreshTextContainer, Typography } from './styles'; -function RefreshText({ onLastRefreshHandler }: RefreshTextProps): JSX.Element { +function RefreshText({ + onLastRefreshHandler, + refreshButtonHidden, +}: RefreshTextProps): JSX.Element { const [refreshText, setRefreshText] = useState(''); // this is to update the refresh text @@ -19,7 +22,7 @@ function RefreshText({ onLastRefreshHandler }: RefreshTextProps): JSX.Element { }, [onLastRefreshHandler, refreshText]); return ( - + {refreshText} ); @@ -27,6 +30,7 @@ function RefreshText({ onLastRefreshHandler }: RefreshTextProps): JSX.Element { interface RefreshTextProps { onLastRefreshHandler: () => string; + refreshButtonHidden: boolean; } export default RefreshText; diff --git a/frontend/src/container/TopNav/DateTimeSelection/config.ts b/frontend/src/container/TopNav/DateTimeSelection/config.ts index 1654def09f..d327476e08 100644 --- a/frontend/src/container/TopNav/DateTimeSelection/config.ts +++ b/frontend/src/container/TopNav/DateTimeSelection/config.ts @@ -67,3 +67,19 @@ export const getOptions = (routes: string): Option[] => { } return Options; }; + +export const routesToSkip = [ + ROUTES.SETTINGS, + ROUTES.LIST_ALL_ALERT, + ROUTES.TRACE_DETAIL, + ROUTES.ALL_CHANNELS, + ROUTES.USAGE_EXPLORER, + ROUTES.INSTRUMENTATION, + ROUTES.VERSION, + ROUTES.ALL_DASHBOARD, + ROUTES.ORG_SETTINGS, + ROUTES.ERROR_DETAIL, + ROUTES.ALERTS_NEW, + ROUTES.EDIT_ALERTS, + ROUTES.LIST_ALL_ALERT, +]; diff --git a/frontend/src/container/TopNav/DateTimeSelection/index.tsx b/frontend/src/container/TopNav/DateTimeSelection/index.tsx index c170a7cef3..9d62c36a8d 100644 --- a/frontend/src/container/TopNav/DateTimeSelection/index.tsx +++ b/frontend/src/container/TopNav/DateTimeSelection/index.tsx @@ -1,3 +1,4 @@ +import { SyncOutlined } from '@ant-design/icons'; import { Button, Select as DefaultSelect } from 'antd'; import getLocalStorageKey from 'api/browser/localstorage/get'; import setLocalStorageKey from 'api/browser/localstorage/set'; @@ -14,10 +15,11 @@ import { AppState } from 'store/reducers'; import AppActions from 'types/actions'; import { GlobalReducer } from 'types/reducer/globalTime'; +import AutoRefresh from '../AutoRefresh'; import CustomDateTimeModal, { DateTimeRangeType } from '../CustomDateTimeModal'; import { getDefaultOption, getOptions, Time } from './config'; import RefreshText from './Refresh'; -import { Container, Form, FormItem } from './styles'; +import { Form, FormItem } from './styles'; const { Option } = DefaultSelect; @@ -240,6 +242,8 @@ function DateTimeSelection({ setStartTime(dayjs(preStartTime)); setEndTime(dayjs(preEndTime)); + setRefreshButtonHidden(updatedTime === 'custom'); + updateTimeInterval(updatedTime, [preStartTime, preEndTime]); }, [ location.pathname, @@ -253,7 +257,7 @@ function DateTimeSelection({ ]); return ( - + <>