devices list shows temp and humidity of attached plenum if it's there

src/pages/Devices.tsx

@@ -1,5 +1,5 @@
 import { DeveloperBoard as ProvisionIcon, LibraryAdd as CreateGroupIcon } from "@mui/icons-material";
-import { Box, Chip, CircularProgress, IconButton, Skeleton, Tab, Tabs, Theme, Tooltip, Typography } from "@mui/material";
+import { Box, Chip, CircularProgress, Grid2, IconButton, Skeleton, 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";
@@ -18,6 +18,7 @@ import SmartBreadcrumb from "common/SmartBreadcrumb";
 import GroupActions from "group/GroupActions";
 // import CircleGraphIcon from "common/CircleGraphIcon";
 import DevicesSummary from "device/DevicesSummary";
+import MeasurementSummary from "component/MeasurementSummary";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -79,6 +80,7 @@ export default function Devices() {
   const [isProvisionDialogOpen, setIsProvisionDialogOpen] = useState<boolean>(false);
   const [stats, setStats] = useState<pond.DeviceStatistics>(pond.DeviceStatistics.create())
   const [loadingStats, setLoadingStats] = useState(false)
+  const [hasPlenums, setHasPlenums] = useState(false)
 
   const [groupsLoading, setGroupsLoading] = useState(false)
   const [groups, setGroups] = useState<Group[]>([]);
@@ -196,6 +198,10 @@ export default function Devices() {
     ).then(resp => {
       let newDevices: Device[] = []
       resp.data.devices.forEach(device => {
+        console.log(device.status?.plenum?.temperature)
+        if (device.status?.plenum?.temperature) {
+          setHasPlenums(true)
+        }
         newDevices.push(Device.create(device))
       })
       setDevices(newDevices)
@@ -260,10 +266,10 @@ export default function Devices() {
   };
 
   const columns = (): Column<Device>[] => {
-    return [
+    let columns = [
       {
         title: "State",
-        render: (device) => {
+        render: (device: Device) => {
           const status = device.status ?? pond.DeviceStatus.create()
           const deviceStateHelper = getDeviceStateHelper(status.state);
           return (
@@ -275,13 +281,13 @@ export default function Devices() {
       },
       {
         title: "ID",
-        render: device => <span className={classes.cellContainer}>
+        render: (device: Device) => <span className={classes.cellContainer}>
           {device.settings?.deviceId}
         </span>
       },
       {
         title: "Device",
-        render: (device) => {
+        render: (device: Device) => {
           return (
             <Box className={classes.cellContainer} >
               <Chip 
@@ -294,7 +300,7 @@ export default function Devices() {
       },
       {
         title: "Description",
-        render: device => {
+        render: (device: Device) => {
           const description = device.settings?.description ?? ""
           return (
             <Box className={classes.cellContainer}>
@@ -310,6 +316,37 @@ export default function Devices() {
         }
       },
     ]
+    if (hasPlenums) {
+      columns.push({
+        title: "Plenum",
+        render: (device: Device) => {
+          if (device.status.plenum?.temperature) {
+            return (
+              <Grid2 container direction="column">
+                <Grid2>
+                  <Typography>
+                    {device.status.plenum.temperature}
+                  </Typography>
+                </Grid2>
+                <Grid2>
+                  <Typography>
+                    {device.status.plenum.humidity}
+                  </Typography>
+                </Grid2>
+              </Grid2>
+              
+            )
+          } else {
+            return (
+              <Typography>
+                No Data
+              </Typography>
+            )
+          }
+        }
+      })
+    }
+    return columns
   }
 
   const provisionButton= () => {