added support page

src/common/SmartBreadcrumb.tsx

@@ -7,6 +7,7 @@ import {
   LinkProps,
   Skeleton,
   Theme,
+  Typography,
   useTheme
 } from "@mui/material";
 import { Replay } from "@mui/icons-material";
@@ -57,6 +58,7 @@ interface Props {
   paddingTop?: number;
   paddingBottom?: number;
   prependPaths?: string[];
+
 }
 
 interface LinkRouterProps extends LinkProps {
@@ -289,7 +291,7 @@ export default function SmartBreadcrumb(props: Props) {
     
     if (prependPaths) pathnames.splice(pathnames.length - 1, 0, ...prependPaths);
 
-    pathnames.forEach((_value: any, index: any) => {
+    pathnames.forEach((value: any, index: any) => {
       
       const lastPath = index === pathnames.length - 1;
       const to = `/${pathnames.slice(0, index + 1).join("/")}`;
@@ -310,6 +312,21 @@ export default function SmartBreadcrumb(props: Props) {
         links.push(linkComponent(to, label, lastPath));
       }
 
+      if (value === "support") {
+        links.push(
+          <Chip
+            key={"support-chip"}
+            variant={"outlined"}
+            label={
+              <Typography variant="subtitle1" color="textPrimary">
+                Support
+              </Typography>
+            }
+            className={classes.chip}
+          />
+        )
+      }
+
     });
     return links;
   };

src/device/DeviceActions.tsx

@@ -24,7 +24,8 @@ import {
   AccountCircle as ObjectUsersIcon,
   SupervisedUserCircle as ObjectTeamsIcon,
   Sync as SyncDeviceIcon,
-  Wifi as WifiIcon
+  Wifi as WifiIcon,
+  Visibility
 } from "@mui/icons-material";
 import { Skeleton } from "@mui/material";
 // import Datadog from "assets/external/datadog.png";
@@ -498,6 +499,11 @@ export default function DeviceActions(props: Props) {
   const buttons = () => {
     return (
       <React.Fragment>
+        {user.allowedTo("provision") && <Tooltip title="Support">
+          <IconButton onClick={() => navigate("support", { state: {device: device} })}>
+            <Visibility />
+          </IconButton>
+        </Tooltip>}
         {canWrite && user.allowedTo("provision") && <UpgradeDevice device={device} />}
         {/* {!isShareableLink(match.params.deviceID) && ( */}
           <NotificationButton

src/navigation/Router.tsx

@@ -8,6 +8,7 @@ import { ErrorBoundary } from "react-error-boundary";
 import { getWhitelabel } from "services/whiteLabel";
 import Ventilation from "pages/VentEditor";
 import { useGlobalState } from "providers"; 
+import DeviceSupport from "pages/DeviceSupport";
 
 const DeviceHistory = lazy(() => import("pages/DeviceHistory"));
 const DevicePage = lazy(() => import("pages/Device"));
@@ -103,6 +104,10 @@ export default function Router() {
             path="/:deviceID" // "/settings/basic"
             element={<DevicePage />}
           />
+          <Route
+            path="/:deviceID/support" // "/settings/basic"
+            element={<DeviceSupport />}
+          />
           <Route
             path="/:deviceID/components/:componentID" // "/settings/basic"
             element={<DeviceComponent />}

src/pages/DeviceSupport.tsx

@@ -0,0 +1,303 @@
+import { Box, Button, FormControl, Grid2 as Grid, MenuItem, Select, Tab, Tabs, TextField, Typography, useTheme } from "@mui/material";
+import PageContainer from "./PageContainer";
+import { pond } from "protobuf-ts/pond";
+import LogsDisplay from "common/LogsDisplay";
+import { useEffect, useState } from "react";
+import { useDeviceAPI, useSnackbar } from "hooks";
+import { useLocation, useParams } from "react-router-dom";
+import { Device } from "models";
+import { getContextKeys, getContextTypes } from "pbHelpers/Context";
+import SmartBreadcrumb from "common/SmartBreadcrumb";
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: any;
+  value: any;
+}
+
+function TabPanelMine(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}>
+      {value === index && <>{children}</>}
+    </div>
+  );
+}
+
+export default function DeviceSupport() {
+  const deviceID = +(useParams<{ deviceID: string }>()?.deviceID ?? "0");
+
+  const deviceAPI = useDeviceAPI()
+  const snackbar = useSnackbar()
+  const theme = useTheme()
+
+  const { state } = useLocation();
+  const [device, setDevice] = useState<Device>(state?.device ? Device.create(state.device) : Device.create())
+  const [tabNumber, setTabNumber] = useState(0)
+  const [newCap, setNewCap] = useState(0);
+  const [datacap, setDatacap] = useState<number>();
+  const [isOver, setIsOver] = useState(undefined);
+  const [pauseCheck, setPauseCheck] = useState(undefined);
+  const [inputFirmware, setInputFirmware] = useState<string>("");
+  const [platform, setPlatform] = useState<pond.DevicePlatform>(
+    pond.DevicePlatform.DEVICE_PLATFORM_INVALID
+  );
+
+  useEffect(() => {
+    if (state?.device) return
+    deviceAPI.get(deviceID, undefined, getContextKeys(), getContextTypes()).then(resp => {
+      setDevice(Device.create(resp.data))
+    })
+  }, [deviceID, state?.device])
+
+  const handleChange = (_event: React.ChangeEvent<{}>, newValue: number) => {
+    setTabNumber(newValue);
+  };
+
+  const resetQuackCount = () => {
+    deviceAPI.resetQuackCount(device.id()).then(resp => console.log(resp));
+  };
+
+  const resetQuackCountTx = () => {
+    deviceAPI.resetQuackCountTx(device.id()).then(resp => console.log(resp));
+  };
+
+  const resetQuackCountTx1000 = () => {
+    deviceAPI.resetQuackCountTx1000(device.id()).then(resp => console.log(resp));
+  };
+
+  const clearPending = () => {
+    deviceAPI.clearPending(device.id()).then(resp => {
+      console.log(resp);
+    });
+  };
+
+  const setFirmwareVersion = (firmwareVersion: string) => {
+    let status = device.status;
+    status.firmwareVersion = firmwareVersion;
+    deviceAPI.updateStatus(device.id(), status).then(() => {
+      snackbar.info("Firmware version set to " + firmwareVersion);
+    });
+  };
+
+  const updateDevicePlatform = (firmwareVersion: pond.DevicePlatform) => {
+    let settings = device.settings;
+    settings.platform = firmwareVersion;
+    deviceAPI.update(device.id(), settings).then(() => {
+      snackbar.info("Platform set to " + firmwareVersion.toString());
+    });
+  };
+
+  const getDatacap = () => {
+    deviceAPI.getDatacap(device.id()).then(resp => {
+      //console.log(resp);
+      setDatacap(resp.data.overlimit);
+    });
+  };
+
+  const updateDatacap = () => {
+    deviceAPI.setDatacap(device.id(), newCap).then(resp => {
+      console.log(resp);
+    });
+  };
+
+  const checkLimit = () => {
+    deviceAPI.isOverLimit(device.id()).then(resp => {
+      //console.log(resp);
+      setIsOver(resp.data);
+    });
+  };
+
+  const checkIfPaused = () => {
+    deviceAPI.isPaused(device.id()).then(resp => {
+      //console.log(resp);
+      setPauseCheck(resp.data);
+    });
+  };
+
+  const pauseDevice = () => {
+    deviceAPI.pause(device.id()).then(resp => {
+      console.log(resp);
+    });
+  };
+
+  const resumeDevice = () => {
+    deviceAPI.resume(device.id()).then(resp => {
+      console.log(resp);
+    });
+  };
+
+	return (
+		<PageContainer>
+      <SmartBreadcrumb deviceName={device.name()} />
+			<Tabs
+				style={{ position: "sticky" }}
+				value={tabNumber}
+				onChange={handleChange}
+				centered
+				TabIndicatorProps={{ style: { background: "rgba(255,255,0,255)" } }}>
+				<Tab label="Control Center" />
+				<Tab label="Hologram" />
+				<Tab label="DataDog" />
+				<Tab label="DuckData" />
+			</Tabs>
+			<TabPanelMine value={tabNumber} index={0}>
+				<Box>
+					<Typography gutterBottom variant="h5">
+						General Options:
+					</Typography>
+					<Grid container direction="row">
+						<Grid>
+							<Button color="primary" onClick={resetQuackCount}>
+								Reset Count Rx (safe, use when quack count errors)
+							</Button>
+							<Button color="primary" onClick={resetQuackCountTx}>
+								Reset Count Tx, Are you sure (ONLY use when device not responding)
+							</Button>
+							<Button color="primary" onClick={resetQuackCountTx1000}>
+								Reset Count Tx - 1000, Are you sure (ONLY use when device not responding)
+							</Button>
+						</Grid>
+						<Grid>
+							<Button color="primary" onClick={clearPending}>
+								Clear Pending
+							</Button>
+						</Grid>
+					</Grid>
+					<Grid container direction="row">
+						<Grid>
+							<TextField
+								value={inputFirmware}
+								onChange={e => setInputFirmware(e.currentTarget.value)}
+							/>
+							<Button color="primary" onClick={() => setFirmwareVersion(inputFirmware)}>
+								Set Firmware
+							</Button>
+						</Grid>
+					</Grid>
+					<Grid container direction="row">
+						<Grid>
+							<FormControl>
+								<Select
+									labelId="demo-simple-select-label"
+									id="demo-simple-select"
+									value={platform}
+									label="Platform"
+									onChange={(event: any) => setPlatform(event.target.value)}>
+									<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_PHOTON}>Photon</MenuItem>
+									<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_ELECTRON}>
+										Electron
+									</MenuItem>
+									<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR}>
+										V2 Cellular
+									</MenuItem>
+									<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_V2_WIFI_S3}>
+										V2 Wifi S3
+									</MenuItem>
+									<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR_BLACK}>
+										V2 Cellular Black
+									</MenuItem>
+									<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR_GREEN}>
+										V2 Cellular Green
+									</MenuItem>
+									<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_V2_WIFI_BLUE}>
+										V2 Wifi Blue
+									</MenuItem>
+									<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR_BLUE}>
+										V2 Cellular Blue
+									</MenuItem>
+								</Select>
+							</FormControl>
+							<Button color="primary" onClick={() => updateDevicePlatform(platform)}>
+								Set Platform
+							</Button>
+						</Grid>
+					</Grid>
+				</Box>
+				<Box marginTop={theme.spacing(0.5)}>
+					<Typography gutterBottom variant="h5">
+						OPI Cable Functions:
+					</Typography>
+					<Grid container direction="row">
+						<Grid>
+							<Button color="primary">Cable Reprogrammer</Button>
+						</Grid>
+						<Grid>
+							<Button color="primary">Cable Diagnostic</Button>
+						</Grid>
+					</Grid>
+				</Box>
+			</TabPanelMine>
+			<TabPanelMine value={tabNumber} index={1}>
+				<Grid container direction="column">
+					<Grid container direction="row">
+						<Grid>
+							<TextField
+								type="number"
+								value={newCap}
+								onChange={e => setNewCap(+e.target.value)}
+							/>
+						</Grid>
+						<Grid>
+							<Button onClick={updateDatacap} color="primary">
+								Set New Datacap
+							</Button>
+						</Grid>
+					</Grid>
+					<Grid container direction="row" alignItems="center">
+						<Grid>
+							<Button onClick={getDatacap} color="primary">
+								DataCap
+							</Button>
+						</Grid>
+						<Grid>
+							<Box margin={3}>{datacap && datacap / 1000 / 1000}Mb</Box>
+						</Grid>
+					</Grid>
+					<Grid container direction="row" alignItems="center">
+						<Grid>
+							<Button onClick={checkLimit} color="primary">
+								OverLimit
+							</Button>
+						</Grid>
+						<Grid>
+							<Box margin={3}>
+								{isOver === undefined ? "Click to Check" : isOver ? "Over Limit" : "Under Limit"}
+							</Box>
+						</Grid>
+					</Grid>
+					<Grid container direction="row" alignItems="center">
+						<Grid>
+							<Button onClick={checkIfPaused} color="primary">
+								Am I Paused
+							</Button>
+						</Grid>
+						<Grid>
+							<Box margin={3}>
+								{pauseCheck === undefined ? "Click to Check" : pauseCheck ? "Paused" : "Running"}
+							</Box>
+						</Grid>
+					</Grid>
+				</Grid>
+				<Button onClick={pauseDevice} color="primary">
+					Pause Me
+				</Button>
+				<Button onClick={resumeDevice} color="primary">
+					Get Me Goin
+				</Button>
+			</TabPanelMine>
+			<TabPanelMine value={tabNumber} index={2}>
+				<LogsDisplay deviceID={deviceID} />
+			</TabPanelMine>
+			<TabPanelMine value={tabNumber} index={3}>
+        History Not imported yet
+				{/* <CompleteHistory device={device} /> */}
+			</TabPanelMine>
+    </PageContainer>
+	)
+}