feat: refresh interval is added (#1712)

* feat: refresh interval is added

frontend/src/container/TopNav/AutoRefresh/config.ts

@@ -1,6 +1,6 @@
 export const options: IOptions[] = [
 	{
-		label: '',
+		label: 'off',
 		key: 'off',
 		value: 0,
 	},

frontend/src/container/TopNav/AutoRefresh/index.tsx

@@ -1,9 +1,20 @@
-import { Select } from 'antd';
+import { CaretDownFilled } from '@ant-design/icons';
+import {
+	Checkbox,
+	Divider,
+	Popover,
+	Radio,
+	RadioChangeEvent,
+	Space,
+	Typography,
+} from 'antd';
+import { CheckboxChangeEvent } from 'antd/lib/checkbox';
 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 _omit from 'lodash-es/omit';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
@@ -15,7 +26,7 @@ import { UPDATE_TIME_INTERVAL } from 'types/actions/globalTime';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { options } from './config';
-import { SelectContainer } from './styles';
+import { ButtonContainer, Container } from './styles';
 
 function AutoRefresh({ disabled = false }: AutoRefreshProps): JSX.Element {
 	const { minTime: initialMinTime, selectedTime } = useSelector<
@@ -24,8 +35,6 @@ function AutoRefresh({ disabled = false }: AutoRefreshProps): JSX.Element {
 	>((state) => state.globalTime);
 	const { pathname } = useLocation();
 
-	const params = useUrlQuery();
-
 	const localStorageData = JSON.parse(get(DASHBOARD_TIME_IN_DURATION) || '{}');
 
 	const localStorageValue = useMemo(() => localStorageData[pathname], [
@@ -33,6 +42,16 @@ function AutoRefresh({ disabled = false }: AutoRefreshProps): JSX.Element {
 		localStorageData,
 	]);
 
+	const [isAutoRefreshEnabled, setIsAutoRefreshfreshEnabled] = useState<boolean>(
+		Boolean(localStorageValue),
+	);
+
+	useEffect(() => {
+		setIsAutoRefreshfreshEnabled(Boolean(localStorageValue));
+	}, [localStorageValue]);
+
+	const params = useUrlQuery();
+
 	const dispatch = useDispatch<Dispatch<AppActions>>();
 	const [selectedOption, setSelectedOption] = useState<string>(
 		localStorageValue || options[0].key,
@@ -50,7 +69,7 @@ function AutoRefresh({ disabled = false }: AutoRefreshProps): JSX.Element {
 	useInterval(() => {
 		const selectedValue = getOption?.value;
 
-		if (disabled) {
+		if (disabled || !isAutoRefreshEnabled) {
 			return;
 		}
 
@@ -69,31 +88,70 @@ function AutoRefresh({ disabled = false }: AutoRefreshProps): JSX.Element {
 	}, 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 }),
-				);
-			}
+		(event: RadioChangeEvent) => {
+			const selectedValue = event.target.value;
+			setSelectedOption(selectedValue);
+			params.set(DASHBOARD_TIME_IN_DURATION, selectedValue);
+			set(
+				DASHBOARD_TIME_IN_DURATION,
+				JSON.stringify({ ...localStorageData, [pathname]: selectedValue }),
+			);
+			setIsAutoRefreshfreshEnabled(true);
 		},
 		[params, pathname, localStorageData],
 	);
 
+	const onChangeAutoRefreshHandler = useCallback(
+		(event: CheckboxChangeEvent) => {
+			const { checked } = event.target;
+			if (!checked) {
+				// remove the path from localstorage
+				set(
+					DASHBOARD_TIME_IN_DURATION,
+					JSON.stringify(_omit(localStorageData, pathname)),
+				);
+			}
+			setIsAutoRefreshfreshEnabled(checked);
+		},
+		[localStorageData, pathname],
+	);
+
 	return (
-		<SelectContainer
-			disabled={disabled}
-			onChange={onChangeHandler}
-			value={selectedOption}
+		<Popover
+			placement="bottomLeft"
+			trigger={['click']}
+			content={
+				<Container>
+					<Checkbox
+						onChange={onChangeAutoRefreshHandler}
+						checked={isAutoRefreshEnabled}
+						disabled={disabled}
+					>
+						Auto Refresh
+					</Checkbox>
+
+					<Divider />
+
+					<Typography.Paragraph>Refresh Interval</Typography.Paragraph>
+
+					<Radio.Group onChange={onChangeHandler} value={selectedOption}>
+						<Space direction="vertical">
+							{options
+								.filter((e) => e.label !== 'off')
+								.map((option) => (
+									<Radio key={option.key} value={option.key}>
+										{option.label}
+									</Radio>
+								))}
+						</Space>
+					</Radio.Group>
+				</Container>
+			}
 		>
-			{options.map((option) => (
-				<Select.Option key={option.key} value={option.key}>
-					{option.label}
-				</Select.Option>
-			))}
-		</SelectContainer>
+			<ButtonContainer title="Set auto refresh" type="primary">
+				<CaretDownFilled />
+			</ButtonContainer>
+		</Popover>
 	);
 }
 

frontend/src/container/TopNav/AutoRefresh/styles.ts

@@ -1,9 +1,13 @@
-import { Select } from 'antd';
+import { Button } from 'antd';
 import styled from 'styled-components';
 
-export const SelectContainer = styled(Select)`
+export const Container = styled.div`
+	min-width: 8rem;
+`;
+
+export const ButtonContainer = styled(Button)`
 	&&& {
-		width: 100%;
-		min-width: 4rem;
+		padding-left: 0.5rem;
+		padding-right: 0.5rem;
 	}
 `;

frontend/src/container/TopNav/DateTimeSelection/index.tsx

@@ -19,7 +19,7 @@ import AutoRefresh from '../AutoRefresh';
 import CustomDateTimeModal, { DateTimeRangeType } from '../CustomDateTimeModal';
 import { getDefaultOption, getOptions, Time } from './config';
 import RefreshText from './Refresh';
-import { Form, FormItem } from './styles';
+import { Form, FormContainer, FormItem } from './styles';
 
 const { Option } = DefaultSelect;
 
@@ -263,29 +263,31 @@ function DateTimeSelection({
 				layout="inline"
 				initialValues={{ interval: selectedTime }}
 			>
-				<DefaultSelect
-					onSelect={(value: unknown): void => onSelectHandler(value as Time)}
-					value={getInputLabel(startTime, endTime, selectedTime)}
-					data-testid="dropDown"
-				>
-					{options.map(({ value, label }) => (
-						<Option key={value + label} value={value}>
-							{label}
-						</Option>
-					))}
-				</DefaultSelect>
+				<FormContainer>
+					<DefaultSelect
+						onSelect={(value: unknown): void => onSelectHandler(value as Time)}
+						value={getInputLabel(startTime, endTime, selectedTime)}
+						data-testid="dropDown"
+					>
+						{options.map(({ value, label }) => (
+							<Option key={value + label} value={value}>
+								{label}
+							</Option>
+						))}
+					</DefaultSelect>
 
-				<FormItem hidden={refreshButtonHidden}>
-					<Button
-						icon={<SyncOutlined />}
-						type="primary"
-						onClick={onRefreshHandler}
-					/>
-				</FormItem>
+					<FormItem hidden={refreshButtonHidden}>
+						<Button
+							icon={<SyncOutlined />}
+							type="primary"
+							onClick={onRefreshHandler}
+						/>
+					</FormItem>
 
-				<FormItem>
-					<AutoRefresh disabled={refreshButtonHidden} />
-				</FormItem>
+					<FormItem>
+						<AutoRefresh disabled={refreshButtonHidden} />
+					</FormItem>
+				</FormContainer>
 			</Form>
 
 			<RefreshText

frontend/src/container/TopNav/DateTimeSelection/styles.ts

@@ -28,3 +28,8 @@ export const RefreshTextContainer = styled.div<Props>`
 	visibility: ${({ refreshButtonHidden }): string =>
 		refreshButtonHidden ? 'hidden' : 'visible'};
 `;
+
+export const FormContainer = styled.div`
+	display: flex;
+	gap: 0.1rem;
+`;