Merge branch 'development' into main

src/components/App/App.test.js

@@ -91,6 +91,10 @@ describe("App", () => {
     await check("/vehicles-command", "span.MuiButton-label", "Sign In");
   });
 
+  it("Route /dashboard unauthenticated", async () => {
+    await check("/dashboard", "span.MuiButton-label", "Sign In");
+  });
+
   it("Route / authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
     await check("/", "h1", "Welcome John!");
@@ -154,4 +158,10 @@ describe("App", () => {
     setToken(TEST_AUTH_OBJECT);
     await check("/carupdate-deploy/1", "h6", "Deploy  ");
   });
+
+  it("Route /dashboard authenticated", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    await check("/dashboard", "h6", "Dashboard");
+  });
+
 });

src/components/CarUpdates/Deploy/index.jsx

@@ -1,15 +1,17 @@
 import React, { useEffect, useState } from "react";
 import { useParams, Redirect } from "react-router";
-import { Button, Typography } from "@material-ui/core";
+import { Button, Grid, Typography } from "@material-ui/core";
 import {
   UpdatesProvider,
   useUpdatesContext,
 } from "../../Contexts/UpdatesContext";
+import { VehicleProvider } from "../../Contexts/VehicleContext";
 import { useUserContext } from "../../Contexts/UserContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
-import CarSelection from "../../Cars/CarSelection";
 import useStyles from "../../useStyles";
 import { tsLocalDateTimeString } from "../../../utils/dates";
+import SearchField from "../../Controls/SearchField";
+import CarSelectionTable from "../../Cars/CarSelectionTable";
 
 const MainForm = () => {
   const { packageid } = useParams();
@@ -24,20 +26,41 @@ const MainForm = () => {
   const [version, setVersion] = useState("");
   const [description, setDescription] = useState("");
   const [createDate, setCreateDate] = useState("");
-  const [selectedVehicles, setSelectedVehicles] = useState([]);
+  const [selected, setSelected] = useState([]);
+  const [search, setSearch] = useState("");
   const [redirect, setRedirect] = useState("");
   const classes = useStyles();
 
+  const handleSearch = (search) => {
+    setSelected([]);
+    setSearch(search);
+  };
+
+  const handleSelectAll = (cars) => {
+    setSelected(cars);
+  };
+
+  const handleSelect = (event, key) => {
+    let newSelected;
+    if (event.target.checked) {
+      newSelected = [...selected];
+      newSelected.push(key);
+    } else {
+      newSelected = selected.filter((vin) => vin !== key);
+    }
+    setSelected(newSelected);
+  };
+
   const onSubmit = async (event) => {
     try {
       event.preventDefault();
       const data = {
         package_id: parseInt(packageid),
-        vins: selectedVehicles,
+        vins: selected,
       };
       await createCarUpdates(data, token);
       setMessage(
-        `Deployed ${packageName} ${version} to ${selectedVehicles.length} cars`
+        `Deployed ${packageName} ${version} to ${selected.length} cars`
       );
       setRedirect(`/carupdate-status/${packageid}`);
     } catch (e) {
@@ -80,30 +103,48 @@ const MainForm = () => {
     <div className={classes.paper}>
       <form className={classes.form} noValidate action="{onSubmit}">
         <Typography variant="body2">
-          Created {createDate}. {description}
+          Created {createDate}. {description || "No description"}
         </Typography>
-        <hr style={{ marginBottom: 30, marginTop: 30 }} />
+        <Grid container className={classes.root} spacing={2}>
-        <CarSelection onSelection={setSelectedVehicles} />
+          <Grid item md={10}>
-        <Button
+            <SearchField classes={classes} onSearch={handleSearch} />
-          type="submit"
+            <div
-          disabled={busy}
+              className={classes.labelInline}
-          fullWidth
+            >{`${selected.length} Selected`}</div>
-          variant="contained"
+          </Grid>
-          color="primary"
+          <Grid item md={2} style={{ textAlign: "right" }}>
-          className={classes.submit}
+            <Button
-          onClick={onSubmit}
+              type="submit"
-        >
+              disabled={busy || selected.length === 0}
-          {busy ? "Deploying..." : "Deploy"}
+              fullWidth
-        </Button>
+              variant="contained"
+              color="primary"
+              className={classes.formControl}
+              onClick={onSubmit}
+            >
+              {busy ? "Deploying..." : "Deploy"}
+            </Button>
+          </Grid>
+        </Grid>
+        <CarSelectionTable
+          classes={classes}
+          token={token}
+          search={{ search }}
+          selected={selected}
+          onSelect={handleSelect}
+          onSelectAll={handleSelectAll}
+        />
       </form>
     </div>
   );
 };
 
 const UpdatePackageDeployForm = () => (
-  <UpdatesProvider>
+  <VehicleProvider>
-    <MainForm />
+    <UpdatesProvider>
-  </UpdatesProvider>
+      <MainForm />
+    </UpdatesProvider>
+  </VehicleProvider>
 );
 
 export default UpdatePackageDeployForm;

src/components/CarUpdates/Status/index.jsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
 import { useParams } from "react-router";
+import { Link } from "react-router-dom";
 import {
   LinearProgress,
   Table,
   TableBody,
   TableCell,
-  TableContainer,
   TableFooter,
   TableHead,
   TablePagination,
@@ -20,14 +20,12 @@ import { useUserContext } from "../../Contexts/UserContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import { LocalDateTimeString } from "../../../utils/dates";
-import VehicleStatus from "../../Cars/StatusModal";
 
 const MainForm = () => {
   const { packageid } = useParams();
   const classes = useStyles();
   const [pageSize, setPageSize] = useState(10);
   const [pageIndex, setPageIndex] = useState(0);
-  const [viewVIN, setViewVIN] = useState(null);
   const {
     getCarUpdates,
     carUpdates,
@@ -99,75 +97,58 @@ const MainForm = () => {
     setPageIndex(0);
   };
 
-  const handleViewVIN = (event) => {
-    event.preventDefault();
-    setViewVIN(event.target.innerHTML);
-  };
-
-  const handleCloseViewVIN = (event) => {
-    setViewVIN(null);
-  };
-
   return (
     <div className={classes.paper} style={{ height: 700, width: "100%" }}>
-      <TableContainer>
+      <Table>
-        <Table>
+        <TableHead>
-          <TableHead>
+          <TableRow>
-            <TableRow>
+            <TableCell align="center">ID</TableCell>
-              <TableCell align="center">ID</TableCell>
+            <TableCell align="center">Vehicle</TableCell>
-              <TableCell align="center">Vehicle</TableCell>
+            <TableCell align="center">Status</TableCell>
-              <TableCell align="center">Status</TableCell>
+            <TableCell align="center">Created</TableCell>
-              <TableCell align="center">Created</TableCell>
+            <TableCell align="center">Updated</TableCell>
-              <TableCell align="center">Updated</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {carUpdates.map((row) => (
+            <TableRow key={row.id}>
+              <TableCell align="center">{row.id}</TableCell>
+              <TableCell align="center">
+                <Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
+              </TableCell>
+              <TableCell align="center">
+                {row.status}
+                {row.progress > 0 && (
+                  <LinearProgress variant="determinate" value={row.progress} />
+                )}
+              </TableCell>
+              <TableCell align="center">
+                {LocalDateTimeString(row.created)}
+              </TableCell>
+              <TableCell align="center">
+                {LocalDateTimeString(row.updated)}
+              </TableCell>
             </TableRow>
-          </TableHead>
+          ))}
-          <TableBody>
+        </TableBody>
-            {carUpdates.map((row) => (
+        <TableFooter>
-              <TableRow key={row.id}>
+          <TableRow>
-                <TableCell align="center">{row.id}</TableCell>
+            <TablePagination
-                <TableCell align="center">
+              rowsPerPageOptions={[5, 10, 25, 100]}
-                  <span className={classes.link} onClick={handleViewVIN}>
+              colSpan={5}
-                    {row.vin}
+              count={totalCarUpdates}
-                  </span>
+              rowsPerPage={pageSize}
-                </TableCell>
+              page={pageIndex}
-                <TableCell align="center">
+              SelectProps={{
-                  {row.status}
+                inputProps: { "aria-label": "rows per page" },
-                  {row.progress > 0 && (
+                native: true,
-                    <LinearProgress
+              }}
-                      variant="determinate"
+              onChangePage={handleChangePageIndex}
-                      value={row.progress}
+              onChangeRowsPerPage={handleChangePageSize}
-                    />
+            />
-                  )}
+          </TableRow>
-                </TableCell>
+        </TableFooter>
-                <TableCell align="center">
+      </Table>
-                  {LocalDateTimeString(row.created)}
-                </TableCell>
-                <TableCell align="center">
-                  {LocalDateTimeString(row.updated)}
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={[5, 10, 25, 100]}
-                colSpan={5}
-                count={totalCarUpdates}
-                rowsPerPage={pageSize}
-                page={pageIndex}
-                SelectProps={{
-                  inputProps: { "aria-label": "rows per page" },
-                  native: true,
-                }}
-                onChangePage={handleChangePageIndex}
-                onChangeRowsPerPage={handleChangePageSize}
-              />
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-      <VehicleStatus vin={viewVIN} handleClose={handleCloseViewVIN} />
     </div>
   );
 };

src/components/Cars/Add/index.jsx

@@ -21,6 +21,7 @@ const MainForm = () => {
   const vinEl = useRef(null);
   const modelEl = useRef(null);
   const yearEl = useRef(null);
+  const trimEl = useRef(null);
 
   useEffect(() => {
     setTitle("Add Vehicle");
@@ -34,6 +35,7 @@ const MainForm = () => {
         vin: vinEl.current.value,
         model: modelEl.current.value,
         year: parseInt(yearEl.current.value),
+        trim: trimEl.current.value,
       };
 
       const result = await addVehicle(formData, token);
@@ -91,6 +93,21 @@ const MainForm = () => {
           fullWidth
           inputRef={yearEl}
         />
+        <TextField
+          id="trim"
+          name="trim"
+          label="Trim"
+          defaultValue="Base"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "4",
+            minLength: "4",
+          }}
+          required
+          fullWidth
+          inputRef={trimEl}
+        />
         <Button
           type="submit"
           disabled={busy}

src/components/Cars/CarSelection/index.jsx

@@ -11,14 +11,8 @@ import useStyles from "../../useStyles";
 
 const Control = (props) => {
   const classes = useStyles();
-  const {
+  const { models, years, vehicles, getModels, getYears, getVehicles } =
-    models,
+    useVehicleContext();
-    years,
-    vehicles,
-    getModels,
-    getYears,
-    getVehicles,
-  } = useVehicleContext();
   const {
     token: {
       idToken: { jwtToken: token },
@@ -26,6 +20,7 @@ const Control = (props) => {
   } = useUserContext();
   const [model, setModel] = useState("");
   const [year, setYear] = useState(-1);
+  const [trim, setTrim] = useState("");
 
   const handleChangeModel = (event) => {
     setModel(event.target.value);
@@ -33,6 +28,9 @@ const Control = (props) => {
   const handleChangeYear = (event) => {
     setYear(event.target.value);
   };
+  const handleChangeTrim = (event) => {
+    setTrim(event.target.value);
+  };
 
   useEffect(() => {
     if (!token) return;
@@ -57,9 +55,9 @@ const Control = (props) => {
 
   useEffect(() => {
     if (model === null || year === -1) return;
-    getVehicles({ model, year }, token);
+    getVehicles({ model, year, trim }, token);
     // eslint-disable-next-line
-  }, [model, year]);
+  }, [model, year, trim]);
 
   useEffect(() => {
     if (!props.onSelection) return;
@@ -69,56 +67,80 @@ const Control = (props) => {
   }, [vehicles]);
 
   return (
-    <div className={classes.form}>
+    <div className={classes.paper}>
-      <FormControl className={classes.formControlInline} variant="outlined">
+      <div className={classes.form}>
-        <InputLabel htmlFor="car-model" style={{ backgroundColor: "White" }}>
+        <FormControl className={classes.formControlInline} variant="outlined">
-          Model
+          <InputLabel htmlFor="car-model" style={{ backgroundColor: "White" }}>
-        </InputLabel>
+            Model
-        <Select
+          </InputLabel>
-          native
+          <Select
-          value={model}
+            native
-          onChange={handleChangeModel}
+            value={model}
-          variant="outlined"
+            onChange={handleChangeModel}
-          inputProps={{
+            variant="outlined"
-            name: "car-model",
+            inputProps={{
-            id: "car-model",
+              name: "car-model",
-          }}
+              id: "car-model",
-        >
+            }}
-          {models.map((item) => (
+          >
-            <option key={item} value={item}>
+            {models.map((item) => (
-              {item}
+              <option key={item} value={item}>
-            </option>
+                {item}
-          ))}
+              </option>
-        </Select>
+            ))}
-      </FormControl>
+          </Select>
-      <FormControl className={classes.formControlInline} variant="outlined">
+        </FormControl>
-        <InputLabel htmlFor="car-year" style={{ backgroundColor: "White" }}>
+        <FormControl className={classes.formControlInline} variant="outlined">
-          Year
+          <InputLabel htmlFor="car-year" style={{ backgroundColor: "White" }}>
-        </InputLabel>
+            Year
-        <Select
+          </InputLabel>
-          native
+          <Select
-          value={year}
+            native
-          onChange={handleChangeYear}
+            value={year}
-          variant="outlined"
+            onChange={handleChangeYear}
-          inputProps={{
+            variant="outlined"
-            name: "car-year",
+            inputProps={{
-            id: "car-year",
+              name: "car-year",
-          }}
+              id: "car-year",
-        >
+            }}
-          {years.map((item) => (
+          >
-            <option key={item} value={item}>
+            {years.map((item) => (
-              {item}
+              <option key={item} value={item}>
-            </option>
+                {item}
-          ))}
+              </option>
-        </Select>
+            ))}
-      </FormControl>
+          </Select>
-      <div className={classes.labelInline}>
+        </FormControl>
-        {vehicles.length === 0
+        <FormControl className={classes.formControlInline} variant="outlined">
-          ? "No Cars Selected"
+          <InputLabel htmlFor="car-trim" style={{ backgroundColor: "White" }}>
-          : vehicles.length === 1
+            Trim
-          ? "1 Car Selected"
+          </InputLabel>
-          : `${vehicles.length} Cars Selected`}
+          <Select
+            native
+            value={year}
+            onChange={handleChangeTrim}
+            variant="outlined"
+            inputProps={{
+              name: "car-trim",
+              id: "car-trim",
+            }}
+          >
+            {years.map((item) => (
+              <option key={item} value={item}>
+                {item}
+              </option>
+            ))}
+          </Select>
+        </FormControl>
+        <div className={classes.labelInline}>
+          {vehicles.length === 0
+            ? "No Cars Selected"
+            : vehicles.length === 1
+            ? "1 Car Selected"
+            : `${vehicles.length} Cars Selected`}
+        </div>
       </div>
+      <div className={classes.form}></div>
     </div>
   );
 };

src/components/Cars/CarSelectionTable/index.jsx

@@ -0,0 +1,182 @@
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
+import {
+  Checkbox,
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TablePagination,
+  TableRow,
+} from "@material-ui/core";
+
+import { useVehicleContext } from "../../Contexts/VehicleContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { LocalDateTimeString } from "../../../utils/dates";
+import TableHeaderSortable from "../../Table/HeaderSortable";
+
+const tableColumns = [
+  {
+    id: "vin",
+    label: "VIN",
+  },
+  {
+    id: "model",
+    label: "Model",
+  },
+  {
+    id: "year",
+    label: "Year",
+  },
+  {
+    id: "trim",
+    label: "Trim",
+  },
+  {
+    id: "created_at",
+    label: "Created",
+  },
+  {
+    id: "updated_at",
+    label: "Updated",
+  },
+];
+
+const CarSelectionTable = (props) => {
+  const { token, classes, search, selected, onSelect, onSelectAll } = props;
+  const [pageSize, setPageSize] = useState(10);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [orderBy, setOrderBy] = useState("vin");
+  const [order, setOrder] = useState("asc");
+  const { getVehicles, vehicles, totalVehicles } = useVehicleContext();
+  const { setMessage } = useStatusContext();
+
+  const sortHandler = (event, property) => {
+    if (property === orderBy) {
+      if (order === "asc") {
+        setOrder("desc");
+      } else {
+        setOrder("asc");
+      }
+    } else {
+      setOrderBy(property);
+      setOrder("asc");
+    }
+  };
+
+  const handleChangePageIndex = (event, newIndex) => {
+    setPageIndex(newIndex);
+  };
+
+  const handleChangePageSize = (event) => {
+    setPageSize(parseInt(event.target.value, 10));
+    setPageIndex(0);
+  };
+
+  const handleSelectAll = (event) => {
+    if (!onSelectAll) return;
+
+    const newSelected = [];
+    if (event.target.checked) {
+      vehicles.forEach((car) => {
+        newSelected.push(car.vin);
+      });
+    }
+
+    onSelectAll(newSelected);
+  };
+
+  const handleSelect = (event, key) => {
+    if (!onSelect) return;
+
+    onSelect(event, key);
+  };
+
+  useEffect(() => {
+    const options = {
+      limit: pageSize,
+      offset: pageSize * pageIndex,
+      order: `${orderBy} ${order}`,
+    };
+    try {
+      getVehicles(Object.assign(options, search), token);
+    } catch (e) {
+      setMessage(e.message);
+    }
+    // eslint-disable-next-line
+  }, [pageIndex, pageSize, orderBy, order, search, token]);
+
+  return (
+    <div className={classes.paper} style={{ height: 700, width: "100%" }}>
+      <Table>
+        <TableHeaderSortable
+          classes={classes}
+          orderBy={orderBy}
+          order={order}
+          columnData={tableColumns}
+          onSortRequest={sortHandler}
+          multiSelect={true}
+          onSelectAll={handleSelectAll}
+          selectCount={selected.length}
+          rowCount={vehicles.length}
+        />
+        <TableBody>
+          {vehicles.map((row) => {
+            const isSelected = selected.indexOf(row.vin) !== -1;
+            return (
+              <TableRow key={row.vin}>
+                <TableCell padding="checkbox">
+                  <Checkbox
+                    checked={isSelected}
+                    onChange={(event) => handleSelect(event, row.vin)}
+                  />
+                </TableCell>
+                <TableCell align="center">
+                  <Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
+                </TableCell>
+                <TableCell align="center">{row.model}</TableCell>
+                <TableCell align="center">{row.year}</TableCell>
+                <TableCell align="center">{row.trim || ""}</TableCell>
+                <TableCell align="center">
+                  {LocalDateTimeString(row.created)}
+                </TableCell>
+                <TableCell align="center">
+                  {LocalDateTimeString(row.updated)}
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={[5, 10, 25, 100]}
+              colSpan={7}
+              count={totalVehicles}
+              rowsPerPage={pageSize}
+              page={pageIndex}
+              SelectProps={{
+                inputProps: { "aria-label": "rows per page" },
+                native: true,
+              }}
+              onChangePage={handleChangePageIndex}
+              onChangeRowsPerPage={handleChangePageSize}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </div>
+  );
+};
+
+CarSelectionTable.propTypes = {
+  token: PropTypes.string.isRequired,
+  classes: PropTypes.object.isRequired,
+  search: PropTypes.object.isRequired,
+  selected: PropTypes.array.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  onSelectAll: PropTypes.func.isRequired,
+};
+
+export default CarSelectionTable;

src/components/Cars/List/index.jsx

@@ -4,7 +4,6 @@ import {
   Table,
   TableBody,
   TableCell,
-  TableContainer,
   TableFooter,
   TablePagination,
   TableRow,
@@ -117,52 +116,50 @@ const MainForm = () => {
       <Toolbar className={classes.tableToolbar}>
         <SearchField classes={classes} onSearch={handleSearch} />
       </Toolbar>
-      <TableContainer>
+      <Table>
-        <Table>
+        <TableHeaderSortable
-          <TableHeaderSortable
+          classes={classes}
-            classes={classes}
+          orderBy={orderBy}
-            orderBy={orderBy}
+          order={order}
-            order={order}
+          columnData={tableColumns}
-            columnData={tableColumns}
+          onSortRequest={sortHandler}
-            onSortRequest={sortHandler}
+        />
-          />
+        <TableBody>
-          <TableBody>
+          {vehicles.map((row) => (
-            {vehicles.map((row) => (
+            <TableRow key={row.vin}>
-              <TableRow key={row.vin}>
+              <TableCell align="center">
-                <TableCell align="center" sortDirection={true}>
+                <Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
-                  <Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
+              </TableCell>
-                </TableCell>
+              <TableCell align="center">{row.model}</TableCell>
-                <TableCell align="center">{row.model}</TableCell>
+              <TableCell align="center">{row.year}</TableCell>
-                <TableCell align="center">{row.year}</TableCell>
+              <TableCell align="center">{row.trim || ""}</TableCell>
-                <TableCell align="center">{row.trim || ""}</TableCell>
+              <TableCell align="center">
-                <TableCell align="center">
+                {LocalDateTimeString(row.created)}
-                  {LocalDateTimeString(row.created)}
+              </TableCell>
-                </TableCell>
+              <TableCell align="center">
-                <TableCell align="center">
+                {LocalDateTimeString(row.updated)}
-                  {LocalDateTimeString(row.updated)}
+              </TableCell>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={[5, 10, 25, 100]}
-                colSpan={6}
-                count={totalVehicles}
-                rowsPerPage={pageSize}
-                page={pageIndex}
-                SelectProps={{
-                  inputProps: { "aria-label": "rows per page" },
-                  native: true,
-                }}
-                onChangePage={handleChangePageIndex}
-                onChangeRowsPerPage={handleChangePageSize}
-              />
             </TableRow>
-          </TableFooter>
+          ))}
-        </Table>
+        </TableBody>
-      </TableContainer>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={[5, 10, 25, 100]}
+              colSpan={6}
+              count={totalVehicles}
+              rowsPerPage={pageSize}
+              page={pageIndex}
+              SelectProps={{
+                inputProps: { "aria-label": "rows per page" },
+                native: true,
+              }}
+              onChangePage={handleChangePageIndex}
+              onChangeRowsPerPage={handleChangePageSize}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
     </div>
   );
 };

src/components/Cars/SendCommand/index.jsx

@@ -88,7 +88,32 @@ const SendCommand = ({ vins }) => {
           }}
           onChange={changeCommandHandler}
         >
-          {commands.map((item) => (
+          {commands.map((item, index) => (
+            <option key={index} value={item.value}>
+              {item.label}
+            </option>
+          ))}
+        </Select>
+      </FormControl>
+      <FormControl className={classes.formControlInline} variant="outlined">
+        <InputLabel
+          htmlFor="send-parameter"
+          style={{ backgroundColor: "White" }}
+        >
+          Parameter
+        </InputLabel>
+        <Select
+          native
+          value={parameter}
+          variant="outlined"
+          inputProps={{
+            name: "send-parameter",
+            id: "send-parameter",
+          }}
+          onChange={changeParametersHandler}
+          disabled={parameters.length === 0}
+        >
+          {parameters.map((item) => (
             <option key={item.value} value={item.value}>
               {item.label}
             </option>

src/components/Cars/SendCommandBulk/index.jsx

@@ -1,124 +1,32 @@
 import React, { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Grid } from "@material-ui/core";
-import {
-  Checkbox,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableFooter,
-  TablePagination,
-  TableRow,
-  Toolbar,
-} from "@material-ui/core";
 
-import {
+import { VehicleProvider } from "../../Contexts/VehicleContext";
-  useVehicleContext,
-  VehicleProvider,
-} from "../../Contexts/VehicleContext";
 import { useUserContext } from "../../Contexts/UserContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
-import { LocalDateTimeString } from "../../../utils/dates";
-import TableHeaderSortable from "../../Table/HeaderSortable";
 import SendCommand from "../SendCommand";
 import SearchField from "../../Controls/SearchField";
-
+import CarSelectionTable from "../CarSelectionTable";
-const tableColumns = [
-  {
-    id: "vin",
-    label: "VIN",
-  },
-  {
-    id: "model",
-    label: "Model",
-  },
-  {
-    id: "year",
-    label: "Year",
-  },
-  {
-    id: "trim",
-    label: "Trim",
-  },
-  {
-    id: "created_at",
-    label: "Created",
-  },
-  {
-    id: "updated_at",
-    label: "Updated",
-  },
-];
 
 const MainForm = () => {
   const classes = useStyles();
-  const [pageSize, setPageSize] = useState(10);
-  const [pageIndex, setPageIndex] = useState(0);
-  const [orderBy, setOrderBy] = useState("vin");
-  const [order, setOrder] = useState("asc");
   const [selected, setSelected] = useState([]);
   const [search, setSearch] = useState("");
-  const { getVehicles, vehicles, totalVehicles } = useVehicleContext();
+  const { setTitle } = useStatusContext();
-  const { setMessage, setTitle } = useStatusContext();
   const {
     token: {
       idToken: { jwtToken: token },
     },
   } = useUserContext();
 
-  const sortHandler = (event, property) => {
+  const handleSearch = (search) => {
-    if (property === orderBy) {
+    setSelected([]);
-      if (order === "asc") {
+    setSearch(search);
-        setOrder("desc");
-      } else {
-        setOrder("asc");
-      }
-    } else {
-      setOrderBy(property);
-      setOrder("asc");
-    }
   };
 
-  useEffect(() => {
+  const handleSelectAll = (cars) => {
-    setTitle("Send Command");
+    setSelected(cars);
-    // eslint-disable-next-line
-  }, []);
-
-  useEffect(() => {
-    try {
-      getVehicles(
-        {
-          limit: pageSize,
-          offset: pageSize * pageIndex,
-          order: `${orderBy} ${order}`,
-          search,
-        },
-        token
-      );
-    } catch (e) {
-      setMessage(e.message);
-    }
-    // eslint-disable-next-line
-  }, [pageIndex, pageSize, token, orderBy, order, search]);
-
-  const handleChangePageIndex = (event, newIndex) => {
-    setPageIndex(newIndex);
-  };
-
-  const handleChangePageSize = (event) => {
-    setPageSize(parseInt(event.target.value, 10));
-    setPageIndex(0);
-  };
-
-  const handleSelectAll = (event) => {
-    const newSelected = [];
-    if (event.target.checked) {
-      vehicles.forEach((car) => {
-        newSelected.push(car.vin);
-      });
-    }
-    setSelected(newSelected);
   };
 
   const handleSelect = (event, key) => {
@@ -132,76 +40,32 @@ const MainForm = () => {
     setSelected(newSelected);
   };
 
-  const handleSearch = (search) => {
+  useEffect(() => {
-    setSelected([]);
+    setTitle("Send Command");
-    setSearch(search);
+    // eslint-disable-next-line
-  };
+  }, []);
 
   return (
     <div className={classes.paper} style={{ height: 700, width: "100%" }}>
-      <Toolbar className={classes.tableToolbar}>
+      <Grid container className={classes.root} spacing={2}>
-        <SearchField classes={classes} onSearch={handleSearch} />
+        <Grid item md={6}>
-      </Toolbar>
+          <SearchField classes={classes} onSearch={handleSearch} />
-      <TableContainer>
+          <div
-        <Table>
+            className={classes.labelInline}
-          <TableHeaderSortable
+          >{`${selected.length} Selected`}</div>
-            classes={classes}
+        </Grid>
-            orderBy={orderBy}
+        <Grid item md={6} style={{ textAlign: "right" }}>
-            order={order}
+          <SendCommand vins={selected} style={{ display: "flex" }} />
-            columnData={tableColumns}
+        </Grid>
-            onSortRequest={sortHandler}
+      </Grid>
-            multiSelect={true}
+      <CarSelectionTable
-            onSelectAll={handleSelectAll}
+        classes={classes}
-            selectCount={selected.length}
+        token={token}
-            rowCount={totalVehicles}
+        search={{ search }}
-          />
+        selected={selected}
-          <TableBody>
+        onSelect={handleSelect}
-            {vehicles.map((row) => {
+        onSelectAll={handleSelectAll}
-              const isSelected = selected.indexOf(row.vin) !== -1;
+      />
-              return (
-                <TableRow key={row.vin}>
-                  <TableCell padding="checkbox">
-                    <Checkbox
-                      checked={isSelected}
-                      onChange={(event) => handleSelect(event, row.vin)}
-                    />
-                  </TableCell>
-                  <TableCell align="center" sortDirection={true}>
-                    <Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
-                  </TableCell>
-                  <TableCell align="center">{row.model}</TableCell>
-                  <TableCell align="center">{row.year}</TableCell>
-                  <TableCell align="center">{row.trim || ""}</TableCell>
-                  <TableCell align="center">
-                    {LocalDateTimeString(row.created)}
-                  </TableCell>
-                  <TableCell align="center">
-                    {LocalDateTimeString(row.updated)}
-                  </TableCell>
-                </TableRow>
-              );
-            })}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={[5, 10, 25, 100]}
-                colSpan={7}
-                count={totalVehicles}
-                rowsPerPage={pageSize}
-                page={pageIndex}
-                SelectProps={{
-                  inputProps: { "aria-label": "rows per page" },
-                  native: true,
-                }}
-                onChangePage={handleChangePageIndex}
-                onChangeRowsPerPage={handleChangePageSize}
-              />
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-      <SendCommand vins={selected} />
     </div>
   );
 };

src/components/Cars/Status/index.jsx

@@ -1,11 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { useParams } from "react-router";
 import {
-  Grid,
   Table,
   TableBody,
   TableCell,
-  TableContainer,
   TableFooter,
   TablePagination,
   TableRow,
@@ -16,13 +14,11 @@ import {
   useUpdatesContext,
 } from "../../Contexts/UpdatesContext";
 import { VehicleProvider } from "../../Contexts/VehicleContext";
-
 import { useUserContext } from "../../Contexts/UserContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
-import SendCommand from "../SendCommand";
 
 const tableColumns = [
   {
@@ -107,54 +103,47 @@ const MainForm = () => {
 
   return (
     <div className={classes.paper} style={{ height: 700, width: "100%" }}>
-      <TableContainer>
+      <Table>
-        <Table>
+        <TableHeaderSortable
-          <TableHeaderSortable
+          classes={classes}
-            classes={classes}
+          orderBy={orderBy}
-            orderBy={orderBy}
+          order={order}
-            order={order}
+          columnData={tableColumns}
-            columnData={tableColumns}
+          onSortRequest={handleSort}
-            onSortRequest={handleSort}
+        />
-          />
+        <TableBody>
-          <TableBody>
+          {carUpdates.map((row) => (
-            {carUpdates.map((row) => (
+            <TableRow key={row.id}>
-              <TableRow key={row.id}>
+              <TableCell align="center">{row.id}</TableCell>
-                <TableCell align="center">{row.id}</TableCell>
+              <TableCell align="center">{`${row.updatepackage.package_name} ${row.updatepackage.version}`}</TableCell>
-                <TableCell align="center">{`${row.updatepackage.package_name} ${row.updatepackage.version}`}</TableCell>
+              <TableCell align="center">{row.status}</TableCell>
-                <TableCell align="center">{row.status}</TableCell>
+              <TableCell align="center">
-                <TableCell align="center">
+                {LocalDateTimeString(row.created)}
-                  {LocalDateTimeString(row.created)}
+              </TableCell>
-                </TableCell>
+              <TableCell align="center">
-                <TableCell align="center">
+                {LocalDateTimeString(row.updated)}
-                  {LocalDateTimeString(row.updated)}
+              </TableCell>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={[5, 10, 25, 100]}
-                colSpan={5}
-                count={totalCarUpdates}
-                rowsPerPage={pageSize}
-                page={pageIndex}
-                SelectProps={{
-                  inputProps: { "aria-label": "rows per page" },
-                  native: true,
-                }}
-                onChangePage={handleChangePageIndex}
-                onChangeRowsPerPage={handleChangePageSize}
-              />
             </TableRow>
-          </TableFooter>
+          ))}
-        </Table>
+        </TableBody>
-      </TableContainer>
+        <TableFooter>
-      <Grid container className={classes.root} spacing={2}>
+          <TableRow>
-        <Grid item lg={6} md={12}>
+            <TablePagination
-          <SendCommand vins={[vin]} />
+              rowsPerPageOptions={[5, 10, 25, 100]}
-        </Grid>
+              colSpan={5}
-      </Grid>
+              count={totalCarUpdates}
+              rowsPerPage={pageSize}
+              page={pageIndex}
+              SelectProps={{
+                inputProps: { "aria-label": "rows per page" },
+                native: true,
+              }}
+              onChangePage={handleChangePageIndex}
+              onChangeRowsPerPage={handleChangePageSize}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
     </div>
   );
 };

src/components/Controls/SearchField/index.jsx

@@ -20,9 +20,13 @@ const SearchField = (props) => {
     onSearch(searchTerm);
   };
   const handleEnterPress = (e) => {
-    if (e.keyCode !== 13) return;
+    if (e.keyCode === 13) {
-    e.preventDefault();
+      e.preventDefault();
-    handleSearch(e);
+      handleSearch(e);
+    } else if (e.keyCode === 27) {
+      e.preventDefault();
+      setSearchTerm("");
+    }
   };
 
   return (

src/components/Dashboard/index.jsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from "react";
+import useStyles from "../useStyles";
+
+import { useStatusContext } from "../Contexts/StatusContext";
+
+const Dashboard = () => {
+  const classes = useStyles();
+  const { setTitle } = useStatusContext();
+
+  useEffect(() => {
+    setTitle("Dashboard");
+    // eslint-disable-next-line
+  }, []);
+
+  return (
+    <div className={classes.paper}>
+      <iframe
+        className={classes.iframe}
+        title="Vehicle Connected"
+        src="https://grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=5s&panelId=6"
+        width="900"
+        height="400"
+        frameBorder="0"
+      ></iframe>
+      <iframe
+        className={classes.iframe}
+        title="Vehicle Signals"
+        src="https://grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=5s&panelId=2"
+        width="900"
+        height="400"
+        frameBorder="0"
+      ></iframe>
+    </div>
+  );
+};
+
+export default Dashboard;

src/components/Layouts/SideMenu.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { List } from "@material-ui/core";
 import ListItemLink from "../ListItemLink";
+import ListItemExternalLink from "../ListItemExternalLink";
 import { useUserContext } from "../Contexts/UserContext";
 import { Roles, hasRole } from "../../utils/roles";
 
@@ -10,6 +11,11 @@ const menuData = [
     to: "/home",
     roles: [],
   },
+  {
+    label: "Dashboard",
+    to: "/dashboard",
+    roles: [],
+  },
   {
     label: "Deploy Packages",
     to: "/updates",
@@ -35,6 +41,11 @@ const menuData = [
     to: "/vehicles-command",
     roles: [Roles.CREATE],
   },
+  {
+    label: "Create Charts",
+    url: "https://grafana.fiskerdps.com",
+    roles: [],
+  },
 ];
 
 export default function SideMenu() {
@@ -50,7 +61,12 @@ export default function SideMenu() {
   return (
     <List>
       {menu.map((item, index) => (
-        <ListItemLink key={index} primary={item.label} to={item.to} />
+        <li key={index}>
+          {item.to && <ListItemLink primary={item.label} to={item.to} />}
+          {item.url && (
+            <ListItemExternalLink primary={item.label} url={item.url} />
+          )}
+        </li>
       ))}
     </List>
   );

src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap

@@ -30,6 +30,28 @@ exports[`SideMenu Authenticated 1`] = `
           />
         </a>
       </li>
+      <li>
+        <a
+          aria-disabled="false"
+          class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+          href="/dashboard"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="MuiListItemText-root"
+          >
+            <span
+              class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+            >
+              Dashboard
+            </span>
+          </div>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </a>
+      </li>
       <li>
         <a
           aria-disabled="false"
@@ -140,6 +162,31 @@ exports[`SideMenu Authenticated 1`] = `
           />
         </a>
       </li>
+      <li>
+        <a
+          aria-disabled="false"
+          class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
+          href="https://grafana.fiskerdps.com"
+          rel="noopener"
+          role="button"
+          style="text-decoration: inherit;"
+          tabindex="0"
+          target="_blank"
+        >
+          <div
+            class="MuiListItemText-root"
+          >
+            <span
+              class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+            >
+              Create Charts
+            </span>
+          </div>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </a>
+      </li>
     </ul>
   </div>
 </div>
@@ -175,6 +222,53 @@ exports[`SideMenu Unauthenticated 1`] = `
           />
         </a>
       </li>
+      <li>
+        <a
+          aria-disabled="false"
+          class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+          href="/dashboard"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="MuiListItemText-root"
+          >
+            <span
+              class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+            >
+              Dashboard
+            </span>
+          </div>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </a>
+      </li>
+      <li>
+        <a
+          aria-disabled="false"
+          class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
+          href="https://grafana.fiskerdps.com"
+          rel="noopener"
+          role="button"
+          style="text-decoration: inherit;"
+          tabindex="0"
+          target="_blank"
+        >
+          <div
+            class="MuiListItemText-root"
+          >
+            <span
+              class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+            >
+              Create Charts
+            </span>
+          </div>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </a>
+      </li>
     </ul>
   </div>
 </div>

src/components/ListItemExternalLink.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+import PropTypes from "prop-types";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import { Link } from "@material-ui/core";
+
+function ListItemExternalLink(props) {
+  const { icon, primary, url } = props;
+  const style = {
+    textDecoration: "inherit",
+    color: "inherit",
+    "&:link": {
+      textDecoration: "inherit",
+      color: "inherit",
+      cursor: "auto",
+    },
+    "&:visited": {
+      textDecoration: "inherit",
+      color: "inherit",
+      cursor: "auto",
+    },
+  };
+
+  return (
+    <ListItem
+      button
+      component={Link}
+      style={style}
+      href={url}
+      rel="noopener"
+      target="_blank"
+    >
+      {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
+      <ListItemText primary={primary} />
+    </ListItem>
+  );
+}
+
+ListItemExternalLink.propTypes = {
+  icon: PropTypes.element,
+  primary: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+};
+
+export default ListItemExternalLink;

src/components/ListItemLink.jsx

@@ -17,12 +17,10 @@ function ListItemLink(props) {
   );
 
   return (
-    <li>
+    <ListItem button component={renderLink}>
-      <ListItem button component={renderLink}>
+      {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
-        {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
+      <ListItemText primary={primary} />
-        <ListItemText primary={primary} />
+    </ListItem>
-      </ListItem>
-    </li>
   );
 }
 

src/components/Routes/SiteRoutes.jsx

@@ -18,6 +18,7 @@ const CarUpdatesStatus = React.lazy(() => import("../CarUpdates/Status"));
 const CarUpdates = React.lazy(() => import("../Cars/Status"));
 const VehiclesList = React.lazy(() => import("../Cars/List"));
 const SendCommandBulk = React.lazy(() => import("../Cars/SendCommandBulk"));
+const Dashboard = React.lazy(() => import("../Dashboard"));
 
 const SiteRoutes = () => {
   const { token, groups } = useUserContext();
@@ -110,6 +111,14 @@ const SiteRoutes = () => {
           groups={groups}
           roles={[Roles.CREATE]}
         />
+        <AuthRoute
+          path="/dashboard"
+          render={() => <Dashboard />}
+          type={TYPES.PROTECTED}
+          token={token}
+          groups={groups}
+          roles={[Roles.READ, Roles.CREATE]}
+        />
         <PageNotFound />
       </Switch>
     </Suspense>

src/components/UpdatePackages/Create/__snapshots__/Create.test.js.snap

@@ -46,10 +46,10 @@ exports[`File Upload Form Should render 1`] = `
             />
             <fieldset
               aria-hidden="true"
-              class="PrivateNotchedOutline-root-31 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-33 MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="PrivateNotchedOutline-legendLabelled-33"
+                class="PrivateNotchedOutline-legendLabelled-35"
               >
                 <span>
                   Package name
@@ -92,10 +92,10 @@ exports[`File Upload Form Should render 1`] = `
             />
             <fieldset
               aria-hidden="true"
-              class="PrivateNotchedOutline-root-31 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-33 MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="PrivateNotchedOutline-legendLabelled-33"
+                class="PrivateNotchedOutline-legendLabelled-35"
               >
                 <span>
                   Version
@@ -138,10 +138,10 @@ exports[`File Upload Form Should render 1`] = `
             />
             <fieldset
               aria-hidden="true"
-              class="PrivateNotchedOutline-root-31 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-33 MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="PrivateNotchedOutline-legendLabelled-33"
+                class="PrivateNotchedOutline-legendLabelled-35"
               >
                 <span>
                   Description
@@ -185,10 +185,10 @@ exports[`File Upload Form Should render 1`] = `
             />
             <fieldset
               aria-hidden="true"
-              class="PrivateNotchedOutline-root-31 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-33 MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="PrivateNotchedOutline-legendLabelled-33"
+                class="PrivateNotchedOutline-legendLabelled-35"
               >
                 <span>
                   Release Notes URL

src/components/UpdatePackages/List/index.jsx

@@ -4,7 +4,6 @@ import {
   Table,
   TableBody,
   TableCell,
-  TableContainer,
   TableFooter,
   TablePagination,
   TableRow,
@@ -151,47 +150,45 @@ const UpdatePackagesList = () => {
       <Toolbar className={classes.tableToolbar}>
         <SearchField classes={classes} onSearch={handleSearch} />
       </Toolbar>
-      <TableContainer>
+      <Table>
-        <Table>
+        <TableHeaderSortable
-          <TableHeaderSortable
+          classes={classes}
-            classes={classes}
+          orderBy={orderBy}
-            orderBy={orderBy}
+          order={order}
-            order={order}
+          columnData={tableColumns}
-            columnData={tableColumns}
+          onSortRequest={handleSort}
-            onSortRequest={handleSort}
+        />
-          />
+        <TableBody>
-          <TableBody>
+          {packages.map((row) => (
-            {packages.map((row) => (
+            <TableRow key={row.id}>
-              <TableRow key={row.id}>
+              <TableCell align="center">{row.id}</TableCell>
-                <TableCell align="center">{row.id}</TableCell>
+              <TableCell align="center">{row.package_name}</TableCell>
-                <TableCell align="center">{row.package_name}</TableCell>
+              <TableCell align="center">{row.version}</TableCell>
-                <TableCell align="center">{row.version}</TableCell>
+              <TableCell align="center">
-                <TableCell align="center">
+                {LocalDateTimeString(row.created)}
-                  {LocalDateTimeString(row.created)}
+              </TableCell>
-                </TableCell>
+              <TableCell align="center">{Actions(row)}</TableCell>
-                <TableCell align="center">{Actions(row)}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={[5, 10, 25, 100]}
-                colSpan={5}
-                count={totalPackages}
-                rowsPerPage={pageSize}
-                page={pageIndex}
-                SelectProps={{
-                  inputProps: { "aria-label": "rows per page" },
-                  native: true,
-                }}
-                onChangePage={handleChangePageIndex}
-                onChangeRowsPerPage={handleChangePageSize}
-              />
             </TableRow>
-          </TableFooter>
+          ))}
-        </Table>
+        </TableBody>
-      </TableContainer>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={[5, 10, 25, 100]}
+              colSpan={5}
+              count={totalPackages}
+              rowsPerPage={pageSize}
+              page={pageIndex}
+              SelectProps={{
+                inputProps: { "aria-label": "rows per page" },
+                native: true,
+              }}
+              onChangePage={handleChangePageIndex}
+              onChangeRowsPerPage={handleChangePageSize}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
     </div>
   );
 };

src/components/useStyles.jsx

@@ -45,10 +45,10 @@ const useStyles = makeStyles((theme) => ({
   },
   labelInline: {
     fontSize: "1.25em",
-    margin: theme.spacing(2, 0, 1),
+    margin: theme.spacing(2, 1, 1),
     display: "inline-flex",
     boxSizing: "border-box",
-    position: "relative",
+    verticalAlign: "bottom",
   },
   chips: {
     display: "flex",
@@ -152,6 +152,7 @@ const useStyles = makeStyles((theme) => ({
     width: "25ch",
   },
   tableToolbar: {
+    display: "flex",
     textAlign: "left",
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(1),
@@ -162,6 +163,12 @@ const useStyles = makeStyles((theme) => ({
     width: 60,
     margin: "auto",
   },
+  grow: {
+    flexGrow: 1,
+  },
+  iframe: {
+    marginTop: 10,
+  },
 }));
 
 export default useStyles;

src/services/commands.js

@@ -1,68 +1,75 @@
-const LockUnlockParams = [
+const Locks = [
   {
-    value: "LOCK",
+    value: "right_front",
-    label: "Lock",
+    label: "Front right door",
-  },
+  },{
-  {
+    value: "left_front",
-    value: "UNLOCK",
+    label: "Front left door",
-    label: "Unlock",
+  },{
+    value: "right_rear",
+    label: "Rear right door",
+  },{
+    value: "left_rear",
+    label: "Rear left door",
+  },{
+    value: "trunk",
+    label: "Trunk",
   },
 ];
 
-const OpenCloseParams = [
+const Windows = [
   {
-    value: "OPEN",
+    value: "right_front",
-    label: "Open",
+    label: "Front right window",
-  },
+  },{
-  {
+    value: "left_front",
-    value: "CLOSE",
+    label: "Front left window",
-    label: "Close",
+  },{
+    value: "right_rear",
+    label: "Rear right window",
+  },{
+    value: "left_rear",
+    label: "Rear left window",
   },
 ];
 
 const Commands = [{
-    value: "LOG",
+    value: "lock",
+    label: "Lock door",
+    parameters: Locks,
+  },
+  {
+    value: "unlock",
+    label: "Unlock door",
+    parameters: Locks,
+  },{
+    value: "open",
+    label: "Open window",
+    parameters: Windows,
+  },
+  {
+    value: "close",
+    label: "Close window",
+    parameters: Windows,
+  },{
+    value: "log",
     label: "Log level",
     parameters: [
       {
-        value: "INFO",
+        value: "info",
         label: "Info",
       },
       {
-        value: "DEBUG",
+        value: "debug",
         label: "Debug",
       },
       {
-        value: "TRACE",
+        value: "trace",
         label: "Trace",
       },
     ],
   },{
-    value: "FRONT-RIGHT",
+    value: "headlights",
-    label: "Front right door",
-    parameters: LockUnlockParams,
-  },{
-    value: "FRONT-LEFT",
-    label: "Front left door",
-    parameters: LockUnlockParams,
-  },{
-    value: "REAR-RIGHT",
-    label: "Rear right door",
-    parameters: LockUnlockParams,
-  },{
-    value: "REAR-LEFT",
-    label: "Rear left door",
-    parameters: LockUnlockParams,
-  },{
-    value: "TRUNK",
-    label: "Trunk",
-    parameters: LockUnlockParams,
-  },{
-    value: "WINDOWS",
-    label: "Windows",
-    parameters: OpenCloseParams,
-  },{
-    value: "FLASH-HEADLIGHTS",
     label: "Flash headlights",
   }];