ota-admin-portal/src/components/Datascope/Battery/index.jsx

import React, { useEffect, useState } from "react";
import {
  FormControl,
  Grid,
  InputLabel,
  MenuItem,
  Paper,
  Select,
  TextField,
} from "@material-ui/core";

import { useStatusContext } from "../../Contexts/StatusContext";
import useStyles from "../../useStyles";
import ResponsiveIFrame from "../../Controls/ResponsiveIFrame";

const Battery = () => {
  const classes = useStyles();
  const { setTitle, setSitePath } = useStatusContext();

  useEffect(() => {
    setTitle("Battery");
    setSitePath([
      {
        label: "Datascope",
        link: "/datascope",
      },
      {
        label: "Battery",
      },
    ]);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const [vin, setVIN] = useState("1F15K3R45N1234567");
  const [cellNum, setCellNum] = useState(1);

  const handleVINForm = (e) => {
    if (e.target.value.length === 17) {
      setVIN(e.target.value);
    }
  };

  return (
    <div className={classes.paper}>
      <Grid container spacing={2}>
        <Grid container item md={4} space={2}>
          <Grid item md={12}>
            <Paper className={classes.grafanaContainer}>
              <form className={classes.formControl}>
                <TextField
                  id="vin"
                  label="VIN"
                  defaultValue="1F15K3R45N1234567"
                  variant="outlined"
                  onChange={handleVINForm}
                  style={{ width: "100%" }}
                />
              </form>
              <FormControl variant="outlined" className={classes.formControl}>
                <InputLabel id="demo-simple-select-outlined-label">
                  Cell
                </InputLabel>
                <Select
                  labelId="demo-simple-select-outlined-label"
                  id="demo-simple-select-outlined"
                  value={cellNum}
                  onChange={(e) => setCellNum(e.target.value)}
                  label="Cell"
                >
                  {[...Array(112)].map((_, i) => (
                    <MenuItem key={i + 1} value={i + 1}>
                      {i + 1}
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>
            </Paper>
          </Grid>

          <Grid item md={12}>
            <Paper className={classes.grafanaContainer}>
              Cell Voltage {cellNum}
              <ResponsiveIFrame
                classes={classes}
                src={`https://grafana.fiskerdps.com/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=${vin}&var-Signal=BMS_CellVolt${cellNum}&panelId=2`}
                title="Cell Voltage"
              />
            </Paper>
          </Grid>

          <Grid item md={12}>
            <Paper className={classes.grafanaContainer}>
              Cell Temperature {cellNum}
              <ResponsiveIFrame
                classes={classes}
                src={`https://grafana.fiskerdps.com/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=${vin}&var-Signal=BMS_CellT${cellNum}&panelId=2`}
                title="Cell Temperature"
              />
            </Paper>
          </Grid>

          <Grid item md={12}>
            <Paper className={classes.grafanaContainer}>
              <ResponsiveIFrame
                classes={classes}
                src={`https://grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=4`}
                title="Battery Temperature Time Series"
              />
            </Paper>
          </Grid>
        </Grid>

        <Grid container item md={8} space={2}>
          <Grid item md={12}>
            <Paper className={classes.grafanaContainer}>
              <ResponsiveIFrame
                classes={classes}
                src={`https://grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=6`}
                title="Battery Capacity Time Series"
              />
            </Paper>
          </Grid>

          <Grid item md={12}>
            <Paper className={classes.grafanaContainer}>
              <ResponsiveIFrame
                classes={classes}
                src={`https://grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&panelId=12`}
                title="Battery Percent Time Series"
              />
            </Paper>
          </Grid>

          <Grid item md={6}>
            <Paper className={classes.grafanaContainer}>
              <ResponsiveIFrame
                classes={classes}
                src={`https://grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=2`}
                title="12V Battery Percentage Time Series"
              />
            </Paper>
          </Grid>

          <Grid item md={6}>
            <Paper className={classes.grafanaContainer}>
              <ResponsiveIFrame
                classes={classes}
                src={`https://grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=9`}
                title="12V Battery Voltage Time Series"
              />
            </Paper>
          </Grid>
        </Grid>
      </Grid>
    </div>
  );
};

export default Battery;