Reorganize app pages (#73)
* Update layout and menus * Add breadcrumbs Add menu icons Add ECU drop down * Implement submenu Update download progress * revamped dashboard section - failing app.test.js * Clean up Co-authored-by: Drew Taylor <dtaylor@fiskerinc.com>
This commit is contained in:
John Wu
159
src/components/Datascope/Battery/index.jsx
Normal file
159
src/components/Datascope/Battery/index.jsx
Normal file
@@ -0,0 +1,159 @@
|
||||
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;
|
||||
96
src/components/Datascope/Home/index.jsx
Normal file
96
src/components/Datascope/Home/index.jsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Button, Grid, Link, Paper } from "@material-ui/core";
|
||||
import CreateIcon from "@material-ui/icons/Create";
|
||||
|
||||
import api from "../../../services/grafana";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import useStyles from "../../useStyles";
|
||||
import ResponsiveIFrame from "../../Controls/ResponsiveIFrame";
|
||||
|
||||
const Datascope = () => {
|
||||
const classes = useStyles();
|
||||
const { setTitle, setSitePath } = useStatusContext();
|
||||
const REQUEST_INTERVAL = 10000;
|
||||
|
||||
useEffect(() => {
|
||||
setTitle("Datascope");
|
||||
setSitePath([]);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const [carsCount, setCarsCount] = useState(0);
|
||||
useEffect(() => {
|
||||
api
|
||||
.getCarsCount()
|
||||
.then((result) => setCarsCount(result))
|
||||
.catch((error) => console.log(error));
|
||||
}, []);
|
||||
|
||||
const [signalsCount, setSignalsCount] = useState("0");
|
||||
useEffect(() => {
|
||||
storeSignals();
|
||||
|
||||
const id = setInterval(function () {
|
||||
storeSignals();
|
||||
}, REQUEST_INTERVAL);
|
||||
return () => {
|
||||
clearInterval(id);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const storeSignals = () => {
|
||||
api
|
||||
.getSignalsCount()
|
||||
.then((result) => {
|
||||
let num = result.toLocaleString();
|
||||
setSignalsCount(num);
|
||||
})
|
||||
.catch((error) => console.log(error));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes.paper}>
|
||||
<Grid container className={classes.root} spacing={2}>
|
||||
<Grid item md={6}>
|
||||
<Paper className={classes.grafanaContainer} style={{ height: 150 }}>
|
||||
<h1 className={classes.datascopeContainerValue}>{carsCount}</h1>
|
||||
<h2 className={classes.datascopeContainerText}>Cars</h2>
|
||||
</Paper>
|
||||
</Grid>
|
||||
|
||||
<Grid item md={6}>
|
||||
<Paper className={classes.grafanaContainer} style={{ height: 150 }}>
|
||||
<h1 className={classes.datascopeContainerValue}>{signalsCount}</h1>
|
||||
<h2 className={classes.datascopeContainerText}>
|
||||
Signals Collected
|
||||
</h2>
|
||||
</Paper>
|
||||
</Grid>
|
||||
|
||||
<Grid item md={12}>
|
||||
<Paper className={classes.grafanaContainer}>
|
||||
<ResponsiveIFrame
|
||||
classes={classes}
|
||||
src="https://grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=30s&panelId=12"
|
||||
title="Signals Time Series"
|
||||
/>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Button
|
||||
style={{ marginTop: 10 }}
|
||||
aria-label="create"
|
||||
color="primary"
|
||||
component={Link}
|
||||
href="https://grafana.fiskerdps.com"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<CreateIcon fontSize="large" />
|
||||
Go to Grafana
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Datascope;
|
||||
Reference in New Issue
Block a user