DSEGOG-57 make working hours configurable

Opted not to make working days configurable, as likely to just be weekdays

public/operationsgateway-settings.example.json

@@ -1,6 +1,7 @@
 {
   "apiUrl": "",
   "recordLimitWarning": -1,
+  "workingHours": { "start": 9, "end": 18 },
   "routes": [
     {
       "section": "OperationsGateway",

src/plotting/plot.component.tsx

@@ -13,6 +13,7 @@ import type {
   PlotData as PlotlyPlotData,
 } from 'plotly.js';
 import { useTheme } from '@mui/material';
+import type { WorkingHours } from '../settings';
 
 export interface PlotProps {
   datasets: PlotDataset[];
@@ -36,6 +37,7 @@ export interface PlotProps {
   leftYAxisLabel?: string;
   rightYAxisLabel?: string;
   viewReset: boolean;
+  workingHours: WorkingHours;
   skipNonBusinessHours: boolean;
 }
 
@@ -62,6 +64,7 @@ const Plot = (props: PlotProps) => {
     leftYAxisLabel,
     rightYAxisLabel,
     viewReset,
+    workingHours,
     skipNonBusinessHours,
   } = props;
 
@@ -154,7 +157,10 @@ const Plot = (props: PlotProps) => {
             ? {
                 rangebreaks: [
                   { pattern: 'day of week', bounds: ['sat', 'mon'] }, // skips from saturday to monday
-                  { pattern: 'hour', bounds: [18, 9] }, // skips from 6pm to 9am
+                  {
+                    pattern: 'hour',
+                    bounds: [workingHours.end, workingHours.start],
+                  }, // skips from end to start as defined in the config
                 ],
               }
             : {}),
@@ -231,6 +237,8 @@ const Plot = (props: PlotProps) => {
     viewReset,
     themeMode,
     skipNonBusinessHours,
+    workingHours.end,
+    workingHours.start,
   ]);
 
   React.useEffect(() => {

src/plotting/plotWindow.component.tsx

@@ -26,6 +26,7 @@ import WindowPortal from '../windows/windowPortal.component';
 import { selectSelectedChannels } from '../state/slices/tableSlice';
 import { useAppSelector, useAppDispatch } from '../state/hooks';
 import { PlotConfig, savePlot } from '../state/slices/plotSlice';
+import { selectWorkingHours } from '../state/slices/configSlice';
 
 interface PlotWindowProps {
   onClose: () => void;
@@ -140,6 +141,8 @@ const PlotWindow = (props: PlotWindowProps) => {
     (channel) => channel.systemName === XAxis
   )?.name;
 
+  const workingHours = useAppSelector(selectWorkingHours);
+
   const handleSavePlot = React.useCallback(() => {
     const configToSave: PlotConfig = {
       ...plotConfig,
@@ -371,6 +374,7 @@ const PlotWindow = (props: PlotWindowProps) => {
               leftYAxisLabel={leftYAxisLabel}
               rightYAxisLabel={rightYAxisLabel}
               viewReset={viewFlag}
+              workingHours={workingHours}
               skipNonBusinessHours={skipNonBusinessHours}
             />
           </Grid>

src/settings.ts

@@ -1,11 +1,17 @@
-import { PluginRoute } from './state/scigateway.actions';
+import type { PluginRoute } from './state/scigateway.actions';
+
+export interface WorkingHours {
+  start: number;
+  end: number;
+}
 
 export interface OperationsGatewaySettings {
   apiUrl: string;
   recordLimitWarning: number;
   routes: PluginRoute[];
   helpSteps?: { target: string; content: string }[];
   pluginHost?: string;
+  workingHours?: WorkingHours;
 }
 
 export let settings: Promise<OperationsGatewaySettings | void>;

src/state/slices/configSlice.tsx

@@ -1,7 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { AppDispatch } from '../store';
-import { settings } from '../../settings';
+import { settings, type WorkingHours } from '../../settings';
 import { RootState } from '../store';
 
 interface URLs {
@@ -14,6 +14,7 @@ interface ConfigState {
   recordLimitWarning: number;
   pluginHost: string;
   settingsLoaded: boolean;
+  workingHours: WorkingHours;
 }
 
 // Define the initial state using that type
@@ -24,6 +25,7 @@ export const initialState: ConfigState = {
   recordLimitWarning: -1,
   pluginHost: '',
   settingsLoaded: false,
+  workingHours: { start: 9, end: 18 },
 };
 
 export const configSlice = createSlice({
@@ -44,6 +46,9 @@ export const configSlice = createSlice({
     loadRecordLimitWarningSetting: (state, action: PayloadAction<number>) => {
       state.recordLimitWarning = action.payload;
     },
+    loadWorkingHoursSetting: (state, action: PayloadAction<WorkingHours>) => {
+      state.workingHours = action.payload;
+    },
   },
 });
 
@@ -52,11 +57,14 @@ export const {
   loadPluginHostSetting,
   loadUrls,
   loadRecordLimitWarningSetting,
+  loadWorkingHoursSetting,
 } = configSlice.actions;
 
 export const selectUrls = (state: RootState) => state.config.urls;
 export const selectRecordLimitWarning = (state: RootState) =>
   state.config.recordLimitWarning;
+export const selectWorkingHours = (state: RootState) =>
+  state.config.workingHours;
 
 // Defining a thunk
 export const configureApp = () => async (dispatch: AppDispatch) => {
@@ -78,6 +86,10 @@ export const configureApp = () => async (dispatch: AppDispatch) => {
       dispatch(loadPluginHostSetting(settingsResult['pluginHost']));
     }
 
+    if (settingsResult['workingHours'] !== undefined) {
+      dispatch(loadWorkingHoursSetting(settingsResult['workingHours']));
+    }
+
     dispatch(settingsLoaded());
   }
 };