From fc440d120641c404e5b4ed1a81221a2e0b54c508 Mon Sep 17 00:00:00 2001 From: Teo Koon Peng Date: Thu, 22 Aug 2024 10:28:01 +0800 Subject: [PATCH] dashboard: fix alert audio (#1002) Signed-off-by: Teo Koon Peng --- eslint.config.mjs | 3 ++- packages/dashboard/app-config.schema.json | 2 +- packages/dashboard/src/app-config.ts | 2 +- .../dashboard/src/components/alert-manager.tsx | 9 +++++---- packages/dashboard/src/components/map-app.tsx | 15 +++++++++++---- packages/dashboard/src/components/rmf-app.tsx | 2 +- .../src/components/robots/robot-summary.tsx | 4 ++-- .../src/components/tasks/task-schedule.tsx | 2 +- .../src/components/tasks/task-summary.tsx | 4 ++-- 9 files changed, 26 insertions(+), 17 deletions(-) diff --git a/eslint.config.mjs b/eslint.config.mjs index 9e00068a0..518da99f1 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -13,7 +13,7 @@ export default tseslint.config( ...tseslint.configs.recommended, { files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'], - plugins: { react, reactHooks }, + plugins: { react, 'react-hooks': reactHooks }, settings: { react: { version: 'detect', @@ -24,6 +24,7 @@ export default tseslint.config( '@typescript-eslint/ban-types': ['error', { types: { '{}': false }, extendDefaults: true }], '@typescript-eslint/no-loss-of-precision': 'off', '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }], + ...reactHooks.configs.recommended.rules, }, }, ...compat.config(storybook.configs.recommended), diff --git a/packages/dashboard/app-config.schema.json b/packages/dashboard/app-config.schema.json index b6155b4bc..6a54b9ff0 100644 --- a/packages/dashboard/app-config.schema.json +++ b/packages/dashboard/app-config.schema.json @@ -136,7 +136,7 @@ }, "properties": { "alertAudioPath": { - "description": "Url to a .wav file to be played when an alert occurs on the dashboard.", + "description": "Url to a file to be played when an alert occurs on the dashboard.", "type": "string" }, "allowedTasks": { diff --git a/packages/dashboard/src/app-config.ts b/packages/dashboard/src/app-config.ts index c4496da3d..ae232f7a3 100644 --- a/packages/dashboard/src/app-config.ts +++ b/packages/dashboard/src/app-config.ts @@ -126,7 +126,7 @@ export interface RuntimeConfig { allowedTasks: TaskResource[]; /** - * Url to a .wav file to be played when an alert occurs on the dashboard. + * Url to a file to be played when an alert occurs on the dashboard. */ alertAudioPath?: string; diff --git a/packages/dashboard/src/components/alert-manager.tsx b/packages/dashboard/src/components/alert-manager.tsx index 8656813eb..1a37c09e8 100644 --- a/packages/dashboard/src/components/alert-manager.tsx +++ b/packages/dashboard/src/components/alert-manager.tsx @@ -258,9 +258,10 @@ export const AlertManager = React.memo(() => { const rmf = React.useContext(RmfAppContext); const [openAlerts, setOpenAlerts] = React.useState>({}); const appConfig = React.useContext(AppConfigContext); - const alertAudio: HTMLAudioElement | undefined = appConfig.alertAudioPath - ? new Audio(appConfig.alertAudioPath) - : undefined; + const alertAudio: HTMLAudioElement | undefined = React.useMemo( + () => (appConfig.alertAudioPath ? new Audio(appConfig.alertAudioPath) : undefined), + [appConfig.alertAudioPath], + ); React.useEffect(() => { if (!rmf) { @@ -349,7 +350,7 @@ export const AlertManager = React.memo(() => { sub.unsubscribe(); } }; - }, [rmf]); + }, [rmf, alertAudio]); const removeOpenAlert = (id: string) => { const filteredAlerts = Object.fromEntries( diff --git a/packages/dashboard/src/components/map-app.tsx b/packages/dashboard/src/components/map-app.tsx index 5709bc8a0..a3ef33ebf 100644 --- a/packages/dashboard/src/components/map-app.tsx +++ b/packages/dashboard/src/components/map-app.tsx @@ -148,7 +148,7 @@ export const MapApp: StyledComponent clearInterval(interval); debug(`cleared interval ${interval}`); }; - }, [trajManager, currentLevel, trajectoryTime, trajectoryAnimScale]); + }, [trajManager, currentLevel, trajectoryTime, trajectoryAnimScale, authenticator.token]); React.useEffect(() => { if (!rmf) { @@ -201,7 +201,7 @@ export const MapApp: StyledComponent sub.unsubscribe(); } }; - }, [rmf, resourceManager]); + }, [rmf, resourceManager, appConfig.defaultMapLevel]); const [imageUrl, setImageUrl] = React.useState(null); // Since the configurable zoom level is for supporting the lowest resolution @@ -307,7 +307,14 @@ export const MapApp: StyledComponent }); setRobots(newRobots); })(); - }, [fleets, robotsStore, resourceManager, currentLevel, currentLevelOfRobots]); + }, [ + fleets, + robotsStore, + resourceManager, + currentLevel, + currentLevelOfRobots, + resources.fleets, + ]); const { current: robotLocations } = React.useRef< Record @@ -485,7 +492,7 @@ export const MapApp: StyledComponent sub.unsubscribe(); } }; - }, [robotLocations, sceneBoundingBox, buildingMap]); + }, [robotLocations, sceneBoundingBox, buildingMap, appConfig.defaultRobotZoom]); React.useEffect(() => { if (!sceneBoundingBox) { diff --git a/packages/dashboard/src/components/rmf-app.tsx b/packages/dashboard/src/components/rmf-app.tsx index e33ec8be5..61113a742 100644 --- a/packages/dashboard/src/components/rmf-app.tsx +++ b/packages/dashboard/src/components/rmf-app.tsx @@ -24,7 +24,7 @@ export function RmfApp(props: RmfAppProps): JSX.Element { ); return undefined; } - }, [authenticator]); + }, [authenticator, appConfig]); return ( diff --git a/packages/dashboard/src/components/robots/robot-summary.tsx b/packages/dashboard/src/components/robots/robot-summary.tsx index 8d607f96d..d7ab60381 100644 --- a/packages/dashboard/src/components/robots/robot-summary.tsx +++ b/packages/dashboard/src/components/robots/robot-summary.tsx @@ -181,6 +181,8 @@ export const RobotSummary = React.memo(({ onClose, robot }: RobotSummaryProps) = } }, [taskState]); + const theme = useTheme(); + const returnDialogContent = () => { const contents = [ { @@ -221,8 +223,6 @@ export const RobotSummary = React.memo(({ onClose, robot }: RobotSummaryProps) = }); } - const theme = useTheme(); - return ( <> {contents.map((message, index) => ( diff --git a/packages/dashboard/src/components/tasks/task-schedule.tsx b/packages/dashboard/src/components/tasks/task-schedule.tsx index cfbeedd5a..89e419704 100644 --- a/packages/dashboard/src/components/tasks/task-schedule.tsx +++ b/packages/dashboard/src/components/tasks/task-schedule.tsx @@ -150,7 +150,7 @@ export const TaskSchedule = () => { }), ); }, - [rmf, allowedTasks], + [rmf], ); const CustomCalendarEditor = ({ scheduler, value, onChange }: CustomCalendarEditorProps) => { diff --git a/packages/dashboard/src/components/tasks/task-summary.tsx b/packages/dashboard/src/components/tasks/task-summary.tsx index fd14005fc..04cab296b 100644 --- a/packages/dashboard/src/components/tasks/task-summary.tsx +++ b/packages/dashboard/src/components/tasks/task-summary.tsx @@ -109,6 +109,8 @@ export const TaskSummary = React.memo((props: TaskSummaryProps) => { return () => sub.unsubscribe(); }, [rmf, task]); + const theme = useTheme(); + const returnDialogContent = () => { const contents = [ { @@ -132,8 +134,6 @@ export const TaskSummary = React.memo((props: TaskSummaryProps) => { } } - const theme = useTheme(); - return ( <> {contents.map((message, index) => (