diff --git a/ui/src/actions/settingsActions.ts b/ui/src/actions/settingsActions.ts index 9e970d4..44e8cec 100644 --- a/ui/src/actions/settingsActions.ts +++ b/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, + } +} diff --git a/ui/src/reducers/settingsReducer.ts b/ui/src/reducers/settingsReducer.ts index 9237c56..3d8775b 100644 --- a/ui/src/reducers/settingsReducer.ts +++ b/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; } diff --git a/ui/src/views/DashboardView.tsx b/ui/src/views/DashboardView.tsx index 05506cc..9403620 100644 --- a/ui/src/views/DashboardView.tsx +++ b/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; -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( - 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) + } />