diff --git a/interface/src/project/DashboardDevices.tsx b/interface/src/project/DashboardDevices.tsx index ced1d801f..182f5560e 100644 --- a/interface/src/project/DashboardDevices.tsx +++ b/interface/src/project/DashboardDevices.tsx @@ -7,6 +7,7 @@ import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDown import KeyboardArrowUpOutlinedIcon from '@mui/icons-material/KeyboardArrowUpOutlined'; import PlayArrowIcon from '@mui/icons-material/PlayArrow'; import RefreshIcon from '@mui/icons-material/Refresh'; +import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore'; import StarIcon from '@mui/icons-material/Star'; import UnfoldMoreOutlinedIcon from '@mui/icons-material/UnfoldMoreOutlined'; import { @@ -193,8 +194,23 @@ const DashboardDevices: FC = () => { } }; + function onSelectChange(action: any, state: any) { + setSelectedDevice(state.id); + if (action.type === 'ADD_BY_ID_EXCLUSIVELY') { + void fetchDeviceData(state.id); + } + } + + const device_select = useRowSelect( + { nodes: coreData.devices }, + { + onChange: onSelectChange + } + ); + const fetchCoreData = useCallback(async () => { try { + setSelectedDevice(undefined); setCoreData((await EMSESP.readCoreData()).data); } catch (error) { toast.error(extractErrorMessage(error, LL.PROBLEM_LOADING())); @@ -216,20 +232,6 @@ const DashboardDevices: FC = () => { } }; - function onSelectChange(action: any, state: any) { - setSelectedDevice(state.id); - if (action.type === 'ADD_BY_ID_EXCLUSIVELY') { - void fetchDeviceData(state.id); - } - } - - const device_select = useRowSelect( - { nodes: coreData.devices }, - { - onChange: onSelectChange - } - ); - const escapeCsvCell = (cell: any) => { if (cell == null) { return ''; @@ -358,7 +360,12 @@ const DashboardDevices: FC = () => { )} - +
dv.id === selectedDevice) : coreData.devices }} + select={device_select} + theme={device_theme} + layout={{ custom: true }} + > {(tableList: any) => ( <>
@@ -398,7 +405,7 @@ const DashboardDevices: FC = () => { }; const renderDeviceData = () => { - if (!device_select.state.id) { + if (!selectedDevice) { return; } @@ -521,16 +528,32 @@ const DashboardDevices: FC = () => { /> )} - - - {device_select.state.id && device_select.state.id !== 'sensor' && ( - - )} - + + + + + {device_select.state.id && device_select.state.id !== 'sensor' && ( + + )} + + + + + + + + ); };