Merge branch 'dev_environment' of gitlab.com:brandx/bxt-app into dev_environment

package-lock.json

@@ -10770,7 +10770,7 @@
     },
     "node_modules/protobuf-ts": {
       "version": "1.0.0",
-      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#6cbc16a8de336d72e2e65619327e4462d26ce05d",
+      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#9074fe327f799b1faef10374bd7ede55f3eb6a17",
       "dependencies": {
         "protobufjs": "^6.8.8"
       }
@@ -13551,9 +13551,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.0.tgz",
-      "integrity": "sha512-7dPxoo+WsT/64rDcwoOjk76XHj+TqNTIvHKcuMQ1k4/SeHDaQt5GFAeLYzrimZrMpn/O6DtdI03WUjdxuPM0oQ==",
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.3.tgz",
+      "integrity": "sha512-IzwM54g4y9JA/xAeBPNaDXiBF8Jsgl3VBQ2YQ/wOY6fyW3xMdSoltIV3Bo59DErdqdE6RxUfv8W69DvUorE4Eg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

src/common/DraggableTabs.tsx

@@ -1,4 +1,4 @@
-import { darken, Tabs, TabsProps } from "@mui/material";
+import { Tabs, TabsProps } from "@mui/material";
 import React, { useEffect, useState, useRef } from "react";
 // import AnimatedTabs from "./AnimatedTabs";
 

src/common/PulseBox.tsx

@@ -0,0 +1,63 @@
+import { Box, BoxProps, Theme } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import classNames from "classnames";
+import { forwardRef, ReactNode } from "react";
+
+const useStyles = makeStyles((_theme: Theme) => ({
+  pulseWrapper: {
+    position: 'relative',
+    display: 'block', // Changed to block to respect Box margins
+    width: 'fit-content', // Shrinks to child width
+    '&::after': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      border: '2px solid var(--pulse-color)',
+      borderRadius: 'inherit', // Should inherit from Box
+      animation: '$pulse 2s infinite ease-in-out',
+      pointerEvents: 'none',
+      boxSizing: 'border-box',
+      transition: "border-color 0.35s ease-in-out",
+    },
+  },
+  '@keyframes pulse': {
+    from: {
+      transform: "scale(1)",
+      opacity: 1
+    },
+    to: {
+      transform: "scale(1.25)",
+      opacity: 0
+    }
+  },
+}));
+
+interface Props extends BoxProps {
+  color: string;
+  children: ReactNode;
+  className?: string;
+}
+
+const PulseBox = forwardRef<HTMLDivElement, Props>((props, ref) => {
+  const { color, children, className, ...boxProps } = props;
+  const classes = useStyles()
+
+  return (
+    <Box 
+      ref={ref}
+      {...boxProps}
+      className={classNames([classes.pulseWrapper, className])} 
+      style={{ '--pulse-color': color } as React.CSSProperties}
+    >
+      {children}
+    </Box>
+  );
+});
+
+// Optional: Add a display name for better debugging
+PulseBox.displayName = "PulseBox";
+
+export default PulseBox;

src/common/ResponsiveTable.tsx

@@ -10,7 +10,7 @@ const useStyles = makeStyles((theme: Theme) => {
   // const isMobile = useMobile()
   return ({
     gutter: {
-      backgroundColor: darken(theme.palette.background.paper, 0.03),
+      backgroundColor: darken(theme.palette.background.paper, 0.05),
       border: "none"
     },
     tableContainer: {
@@ -55,7 +55,7 @@ const useStyles = makeStyles((theme: Theme) => {
     rowHover: {
       cursor: "pointer",
       "&:hover": {
-        backgroundColor: "rgba(150, 150, 150, 0.05)"
+        backgroundColor: "rgba(150, 150, 150, 0.15)"
       }
     }
   })},

src/common/StatusPlenum.tsx

@@ -0,0 +1,101 @@
+import { Box, Grid2, Theme, Tooltip, Typography } from "@mui/material";
+import { blue, orange } from "@mui/material/colors";
+import { makeStyles } from "@mui/styles";
+import { Device } from "models";
+import PulseBox from "./PulseBox";
+import { or } from "utils";
+import { useEffect, useState } from "react";
+
+interface Props {
+  device: Device
+}
+
+const useStyles = makeStyles((theme: Theme) => {
+  const lightMode = theme.palette?.mode === "light";
+  return ({
+    box: {
+      display: "inline-block",
+      borderRadius: "6px",
+      backgroundColor: lightMode ? "rgb(210, 210, 210)" : "rgb(50, 50, 50)",
+      padding: theme.spacing(0.75),
+      marginRight: "auto",
+      margin: theme.spacing(1),
+    },
+  })
+})
+
+export default function StatusPlenum(props: Props) {
+  const { device } = props;
+  const classes = useStyles()
+
+  const colors = or(device.status.plenum?.overlays.map(overlay => overlay.color), []);
+  const messages = or(device.status.plenum?.overlays.map(overlay => overlay.message), []);
+
+  const [color, setColor] = useState(colors.length > 0 ? colors[0] : "");
+  const [, setColorIndex] = useState(0)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setColorIndex(prevIndex => {
+        const newIndex = prevIndex >= colors.length - 1 ? 0 : prevIndex + 1;
+        setColor(colors[newIndex]); // Use the new index here
+        return newIndex;
+      });
+    }, 5000);
+    
+    return () => clearInterval(interval);
+  }, []);
+
+  const tooltip = () => {
+    if (messages.length === 0) return null
+    if (messages.length < 2) return (
+      messages[0]
+    )
+    return (
+      <Grid2 container direction={"column"}>
+        <Grid2 container direction="row">
+          <Typography fontWeight={"bold"} variant="caption">
+            Overlay Messages
+          </Typography>
+        </Grid2>
+        {messages.map((message, index) => {
+          return (
+            <Grid2 key={"tooltip-overly-message-" + message} container direction="row" alignItems={"center"}>
+              <Box
+                sx={{
+                  width: 10, // Size of the square
+                  height: 10,
+                  backgroundColor: colors[index], // Passed color prop
+                  borderRadius: 1, // Optional: slight rounding, remove for sharp square
+                  border: "1px solid black",
+                }}
+              />
+              <Typography variant="caption" sx={{ marginLeft: 1 }}>
+                {message}
+              </Typography>
+            </Grid2>
+          )
+        })}
+      </Grid2>
+    )
+  }
+
+  return (
+    <Tooltip title={tooltip()}>
+      <PulseBox color={color} className={classes.box} >
+        <Grid2 container direction="column" >
+          <Grid2>
+            <Typography variant="body2" style={{ color: orange[700]}}>
+              {device.status.plenum?.temperature.toFixed(1)}°C
+            </Typography>
+          </Grid2>
+          <Grid2>
+            <Typography variant="body2" style={{ color: blue[700]}}>
+              {device.status.plenum?.humidity.toFixed(1)}%
+            </Typography>
+          </Grid2>
+        </Grid2>
+      </PulseBox>
+    </Tooltip>
+  )
+}

src/pages/Devices.tsx

@@ -22,6 +22,7 @@ import BindaptIcon from "products/Bindapt/BindaptIcon";
 import { describePower } from "pbHelpers/Power";
 import { Tag as TagUI } from "common/Tag";
 import moment from "moment";
+import StatusPlenum from "common/StatusPlenum";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -214,6 +215,8 @@ export default function Devices() {
     ).then(resp => {
       let newDevices: Device[] = []
       resp.data.devices.forEach(device => {
+        console.log(device.status)
+        console.log(device.status?.plenum?.overlays)
         if (device.status?.plenum?.temperature) {
           setHasPlenums(true)
         }
@@ -325,18 +328,9 @@ export default function Devices() {
         render: (device: Device) => {
           if (device.status.plenum?.temperature) {
             return (
-              <Grid2 container direction="column" marginLeft={2}>
-                <Grid2>
-                  <Typography variant="body2" style={{ color: orange[300]}}>
-                    {device.status.plenum.temperature.toFixed(1)}°C
-                  </Typography>
-                </Grid2>
-                <Grid2>
-                  <Typography variant="body2" color="info">
-                    {device.status.plenum.humidity.toFixed(1)}%
-                  </Typography>
-                </Grid2>
-              </Grid2>
+              <Box sx={{ marginLeft: 1 }}>
+                <StatusPlenum device={device} />
+              </Box>
             )
           } else {
             return (