From cc6f755f07c6917c274e4a954a1d2fb76c132cd2 Mon Sep 17 00:00:00 2001
From: Himanshu Dixit <hudixt@gmail.com>
Date: Mon, 18 Jan 2021 02:43:22 +0530
Subject: [PATCH] Commit uncommitted changes

---
 frontend/src/components/App.tsx              |  4 +-
 frontend/src/components/DateTimeSelector.tsx | 67 ++++++++++++++------
 frontend/src/constants/LOCAL_STORAGE.ts      |  3 -
 frontend/src/constants/env.ts                |  4 +-
 frontend/src/constants/localStorage.ts       |  3 +
 5 files changed, 54 insertions(+), 27 deletions(-)
 delete mode 100644 frontend/src/constants/LOCAL_STORAGE.ts
 create mode 100644 frontend/src/constants/localStorage.ts

diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index 8fd699a346..bd21a5a93a 100644
--- a/frontend/src/components/App.tsx
+++ b/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
diff --git a/frontend/src/components/DateTimeSelector.tsx b/frontend/src/components/DateTimeSelector.tsx
index 12515104a3..886df1621a 100644
--- a/frontend/src/components/DateTimeSelector.tsx
+++ b/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">
-							<Select onSelect={handleOnSelect}>
-								<Option value="custom">Custom</Option>
-								<Option value="15min">Last 15 min</Option>
-								<Option value="30min">Last 30 min</Option>
-								<Option value="1hr">Last 1 hour</Option>
-								<Option value="6hr">Last 6 hour</Option>
-								<Option value="1day">Last 1 day</Option>
-								<Option value="1week">Last 1 week</Option>
-							</Select>
-						</FormItem>
+						<FormItem></FormItem>
+						<Select onSelect={handleOnSelect} value={timeInterval}>
+							{options.map(({ value, label }) => (
+								<Option value={value}>{label}</Option>
+							))}
+						</Select>
 
 						<FormItem hidden={refreshButtonHidden} name="refresh_button">
 							<Button type="primary" onClick={handleRefresh}>
diff --git a/frontend/src/constants/LOCAL_STORAGE.ts b/frontend/src/constants/LOCAL_STORAGE.ts
deleted file mode 100644
index ccd305d284..0000000000
--- a/frontend/src/constants/LOCAL_STORAGE.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export enum LOCAL_STORAGE {
-	metricsTimeDuration = "metricsTimeDuration",
-}
diff --git a/frontend/src/constants/env.ts b/frontend/src/constants/env.ts
index 63cca65667..c350e6d922 100644
--- a/frontend/src/constants/env.ts
+++ b/frontend/src/constants/env.ts
@@ -1,3 +1,3 @@
 export const ENVIRONMENT = {
-	baseURL: "http://104.211.113.204:8080"
-}
\ No newline at end of file
+	baseURL: "http://104.211.113.204:8080",
+};
diff --git a/frontend/src/constants/localStorage.ts b/frontend/src/constants/localStorage.ts
new file mode 100644
index 0000000000..26512b627d
--- /dev/null
+++ b/frontend/src/constants/localStorage.ts
@@ -0,0 +1,3 @@
+export enum LOCAL_STORAGE {
+	METRICS_TIME_IN_DURATION = "metricsTimeDuration",
+}