Commit uncommitted changes

frontend/src/components/App.tsx

@@ -36,7 +36,7 @@ const ThemeSwitcherWrapper = styled.div`
 	display: flex;
 	justify-content: center;
 	margin-top: 20px;
-`
+`;
 const App = () => {
 	// state = { collapsed: false, isDarkMode: true };
 	const { switcher, currentTheme, status, themes } = useThemeSwitcher();
@@ -67,7 +67,7 @@ const App = () => {
 				>
 					<div className="logo">
 						<ThemeSwitcherWrapper>
-						<ToggleButton checked={isDarkMode} onChange={toggleTheme} />
+							<ToggleButton checked={isDarkMode} onChange={toggleTheme} />
 						</ThemeSwitcherWrapper>
 						<NavLink to="/">
 							<img

frontend/src/components/DateTimeSelector.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Select, Button, Space, Form } from "antd";
 import styled from "styled-components";
 import { withRouter } from "react-router";
@@ -11,7 +11,8 @@ import { StoreState } from "../reducers";
 import FormItem from "antd/lib/form/FormItem";
 
 import { DateTimeRangeType } from "../actions";
-
+import { METRICS_PAGE_QUERY_PARAM } from "../constants/query";
+import { LOCAL_STORAGE } from "../constants/localStorage";
 const { Option } = Select;
 
 const DateTimeWrapper = styled.div`
@@ -25,20 +26,37 @@ interface DateTimeSelectorProps extends RouteComponentProps<any> {
 }
 
 const _DateTimeSelector = (props: DateTimeSelectorProps) => {
+	const defaultTime = "15min";
 	const [customDTPickerVisible, setCustomDTPickerVisible] = useState(false);
-	const [timeInterval, setTimeInterval] = useState("15min");
+	const [timeInterval, setTimeInterval] = useState(defaultTime);
 	const [refreshButtonHidden, setRefreshButtonHidden] = useState(false);
-
 	const [form_dtselector] = Form.useForm();
 
+	useEffect(() => {
+		const timeDurationInLocalStorage = localStorage.getItem(
+			LOCAL_STORAGE.METRICS_TIME_IN_DURATION,
+		);
+		const urlParams = new URLSearchParams(window.location.search);
+		const timeInQueryParam = urlParams.get(METRICS_PAGE_QUERY_PARAM.time);
+		if (timeInQueryParam) {
+			setMetricsTime(timeInQueryParam);
+		} else if (timeDurationInLocalStorage) {
+			setMetricsTime(timeDurationInLocalStorage);
+		}
+	}, []);
+
+	const setMetricsTime = (value: string) => {
+		props.history.push({
+			search: `?${METRICS_PAGE_QUERY_PARAM.time}=${value}`,
+		}); //pass time in URL query param for all choices except custom in datetime picker
+		props.updateTimeInterval(value);
+		setTimeInterval(value);
+	};
+
 	const handleOnSelect = (value: string) => {
 		if (value === "custom") {
 			setCustomDTPickerVisible(true);
 		} else {
-			props.history.push({
-				search: "?time=" + value,
-			}); //pass time in URL query param for all choices except custom in datetime picker
-			props.updateTimeInterval(value);
 			setTimeInterval(value);
 			setRefreshButtonHidden(false); // for normal intervals, show refresh button
 		}
@@ -86,8 +104,22 @@ const _DateTimeSelector = (props: DateTimeSelectorProps) => {
 	};
 
 	const handleRefresh = () => {
-		props.updateTimeInterval(timeInterval);
+		window.localStorage.setItem(
+			LOCAL_STORAGE.METRICS_TIME_IN_DURATION,
+			timeInterval,
+		);
+		setMetricsTime(timeInterval);
 	};
+
+	const options = [
+		{ value: "custom", label: "Custom" },
+		{ value: "15min", label: "Last 15 min" },
+		{ value: "30min", label: "Last 30 min" },
+		{ value: "1hr", label: "Last 1 hour" },
+		{ value: "6hr", label: "Last 6 hour" },
+		{ value: "1day", label: "Last 1 day" },
+		{ value: "1week", label: "Last 1 week" },
+	];
 	if (props.location.pathname.startsWith("/usage-explorer")) {
 		return null;
 	} else {
@@ -100,17 +132,12 @@ const _DateTimeSelector = (props: DateTimeSelectorProps) => {
 						initialValues={{ interval: "15min" }}
 						style={{ marginTop: 10, marginBottom: 10 }}
 					>
-						<FormItem name="interval">
+						<FormItem></FormItem>
-							<Select onSelect={handleOnSelect}>
+						<Select onSelect={handleOnSelect} value={timeInterval}>
-								<Option value="custom">Custom</Option>
+							{options.map(({ value, label }) => (
-								<Option value="15min">Last 15 min</Option>
+								<Option value={value}>{label}</Option>
-								<Option value="30min">Last 30 min</Option>
+							))}
-								<Option value="1hr">Last 1 hour</Option>
+						</Select>
-								<Option value="6hr">Last 6 hour</Option>
-								<Option value="1day">Last 1 day</Option>
-								<Option value="1week">Last 1 week</Option>
-							</Select>
-						</FormItem>
 
 						<FormItem hidden={refreshButtonHidden} name="refresh_button">
 							<Button type="primary" onClick={handleRefresh}>

frontend/src/constants/LOCAL_STORAGE.ts

@@ -1,3 +0,0 @@
-export enum LOCAL_STORAGE {
-	metricsTimeDuration = "metricsTimeDuration",
-}

frontend/src/constants/env.ts

@@ -1,3 +1,3 @@
 export const ENVIRONMENT = {
-	baseURL: "http://104.211.113.204:8080"
+	baseURL: "http://104.211.113.204:8080",
-}
+};

frontend/src/constants/localStorage.ts

@@ -0,0 +1,3 @@
+export enum LOCAL_STORAGE {
+	METRICS_TIME_IN_DURATION = "metricsTimeDuration",
+}