device history implemented

src/pages/DeviceHistory.tsx

@@ -0,0 +1,54 @@
+import { 
+  Box, 
+  Theme, 
+  Toolbar 
+} from "@mui/material";
+import SmartBreadcrumb from "common/SmartBreadcrumb";
+import { useDeviceAPI, useSnackbar } from "hooks";
+import { Device } from "models";
+import PageContainer from "pages/PageContainer";
+import { useEffect, useState } from "react";
+import { useParams } from "react-router";
+import DeviceHistory from "device/DeviceHistory";
+import { makeStyles } from "@mui/styles";
+
+const useStyles = makeStyles((theme: Theme) => {
+  return ({
+    gutter: {
+      marginBottom: theme.spacing(1)
+    }
+  })
+});
+
+interface Props {}
+
+export default function DeviceHistoryPage(_props: Props) {
+  const classes = useStyles();
+  const { error } = useSnackbar();
+  const deviceAPI = useDeviceAPI();
+  const deviceID = useParams<{ deviceID: string }>()?.deviceID ?? "";
+  const [device, setDevice] = useState(Device.any({ settings: { deviceId: deviceID } }));
+  const deviceName = device.name();
+
+  useEffect(() => {
+    (async function load() {
+      await deviceAPI
+        .get(deviceID)
+        .then((response: any) => {
+          setDevice(Device.any(response.data));
+        })
+        .catch((err: any) => {
+          error(err);
+        });
+    })();
+  }, [deviceAPI, deviceID, error]);
+
+  return (
+    <PageContainer>
+      <Box className={classes.gutter}>
+        <SmartBreadcrumb deviceName={deviceName} />
+      </Box>
+      <DeviceHistory device={device} />
+    </PageContainer>
+  );
+}

src/pages/Devices.tsx

@@ -1,5 +1,5 @@
-import { DeveloperBoard as ProvisionIcon, LibraryAdd as CreateGroupIcon, CheckCircle } from "@mui/icons-material";
-import { Box, Card, Chip, CircularProgress, Grid2, IconButton, Tab, Tabs, Theme, Tooltip, Typography } from "@mui/material";
+import { DeveloperBoard as ProvisionIcon, LibraryAdd as CreateGroupIcon } from "@mui/icons-material";
+import { Box, Chip, CircularProgress, IconButton, Tab, Tabs, Theme, Tooltip, Typography } from "@mui/material";
 import { blue, green } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import ResponsiveTable, { Column } from "common/ResponsiveTable";
@@ -16,7 +16,7 @@ import { Device, Group } from "models";
 import GroupSettings from "group/GroupSettings";
 import SmartBreadcrumb from "common/SmartBreadcrumb";
 import GroupActions from "group/GroupActions";
-import CircleGraphIcon from "common/CircleGraphIcon";
+// import CircleGraphIcon from "common/CircleGraphIcon";
 import DevicesSummary from "device/DevicesSummary";
 
 const useStyles = makeStyles((theme: Theme) => {