Move dailyStats chart type state to redux store

ui/src/actions/settingsActions.ts

@@ -1,9 +1,11 @@
 import { ThemePreference } from "../reducers/settingsReducer";
+import { DailyStatsKey } from "../views/DashboardView";
 // List of settings related action types.
 export const POLL_INTERVAL_CHANGE = "POLL_INTERVAL_CHANGE";
 export const THEME_PREFERENCE_CHANGE = "THEME_PREFERENCE_CHANGE";
 export const TOGGLE_DRAWER = "TOGGLE_DRAWER";
 export const TASK_ROWS_PER_PAGE_CHANGE = "TASK_ROWS_PER_PAGE_CHANGE";
+export const DAILY_STATS_KEY_CHANGE = "DAILY_STATS_KEY_CHANGE";
 
 interface PollIntervalChangeAction {
   type: typeof POLL_INTERVAL_CHANGE;
@@ -24,12 +26,18 @@ interface TaskRowsPerPageChange {
   value: number;
 }
 
+interface DailyStatsKeyChange {
+  type: typeof DAILY_STATS_KEY_CHANGE;
+  value: DailyStatsKey;
+}
+
 // Union of all settings related action types.
 export type SettingsActionTypes =
   | PollIntervalChangeAction
   | ThemePreferenceChangeAction
   | ToggleDrawerAction
-  | TaskRowsPerPageChange;
+  | TaskRowsPerPageChange
+  | DailyStatsKeyChange;
 
 export function pollIntervalChange(value: number) {
   return {
@@ -55,3 +63,10 @@ export function taskRowsPerPageChange(value: number) {
     value,
   };
 }
+
+export function dailyStatsKeyChange(value: DailyStatsKey) {
+  return {
+    type: DAILY_STATS_KEY_CHANGE,
+    value,
+  }
+}

ui/src/reducers/settingsReducer.ts

@@ -1,4 +1,5 @@
 import {
+  DAILY_STATS_KEY_CHANGE,
   POLL_INTERVAL_CHANGE,
   SettingsActionTypes,
   TASK_ROWS_PER_PAGE_CHANGE,
@@ -6,6 +7,7 @@ import {
   TOGGLE_DRAWER,
 } from "../actions/settingsActions";
 import { defaultPageSize } from "../components/TablePaginationActions"
+import { DailyStatsKey, defaultDailyStatsKey } from "../views/DashboardView";
 
 export enum ThemePreference {
   SystemDefault,
@@ -14,10 +16,20 @@ export enum ThemePreference {
 }
 
 export interface SettingsState {
+  // Time duration between data refresh.
   pollInterval: number;
+
+  // UI theme setting.
   themePreference: ThemePreference;
+
+  // Whether the drawer (i.e. sidebar) is open or not.
   isDrawerOpen: boolean;
+
+  // Number of tasks displayed in task table.
   taskRowsPerPage: number,
+
+  // Type of the chart displayed for "Processed Tasks" section in dashboard.
+  dailyStatsChartType: DailyStatsKey;
 }
 
 export const initialState: SettingsState = {
@@ -25,6 +37,7 @@ export const initialState: SettingsState = {
   themePreference: ThemePreference.SystemDefault,
   isDrawerOpen: true,
   taskRowsPerPage: defaultPageSize,
+  dailyStatsChartType: defaultDailyStatsKey,
 };
 
 function settingsReducer(
@@ -56,6 +69,12 @@ function settingsReducer(
         taskRowsPerPage: action.value,
       }
 
+    case DAILY_STATS_KEY_CHANGE:
+      return {
+        ...state,
+        dailyStatsChartType: action.value,
+      }
+
     default:
       return state;
   }

ui/src/views/DashboardView.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { connect, ConnectedProps } from "react-redux";
 import Container from "@material-ui/core/Container";
 import { makeStyles } from "@material-ui/core/styles";
@@ -15,6 +15,7 @@ import {
   deleteQueueAsync,
 } from "../actions/queuesActions";
 import { listQueueStatsAsync } from "../actions/queueStatsActions";
+import { dailyStatsKeyChange } from "../actions/settingsActions";
 import { AppState } from "../store";
 import QueueSizeChart from "../components/QueueSizeChart";
 import ProcessedTasksChart from "../components/ProcessedTasksChart";
@@ -72,6 +73,7 @@ function mapStateToProps(state: AppState) {
     error: state.queues.error,
     pollInterval: state.settings.pollInterval,
     queueStats: state.queueStats.data,
+    dailyStatsKey: state.settings.dailyStatsChartType,
   };
 }
 
@@ -81,21 +83,25 @@ const mapDispatchToProps = {
   resumeQueueAsync,
   deleteQueueAsync,
   listQueueStatsAsync,
+  dailyStatsKeyChange,
 };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
 
 type Props = ConnectedProps<typeof connector>;
 
-type DailyStatsKey = "today" | "last-7d" | "last-30d" | "last-90d";
-const initialStatsKey = "last-7d";
+export type DailyStatsKey = "today" | "last-7d" | "last-30d" | "last-90d";
+export const defaultDailyStatsKey = "last-7d";
 
 function DashboardView(props: Props) {
-  const { pollInterval, listQueuesAsync, queues, listQueueStatsAsync } = props;
+  const {
+    pollInterval,
+    listQueuesAsync,
+    queues,
+    listQueueStatsAsync,
+    dailyStatsKey,
+  } = props;
   const classes = useStyles();
-  const [dailyStatsKey, setDailyStatsKey] = useState<DailyStatsKey>(
-    initialStatsKey
-  );
 
   usePolling(listQueuesAsync, pollInterval);
 
@@ -204,8 +210,10 @@ function DashboardView(props: Props) {
                     { label: "Last 30d", key: "last-30d" },
                     { label: "Last 90d", key: "last-90d" },
                   ]}
-                  initialSelectedKey={initialStatsKey}
-                  onSelect={(key) => setDailyStatsKey(key as DailyStatsKey)}
+                  initialSelectedKey={dailyStatsKey}
+                  onSelect={(key) =>
+                    props.dailyStatsKeyChange(key as DailyStatsKey)
+                  }
                 />
               </div>
             </div>