From a8fff2f85cf2cfac2866f931919ecfd188f1cdf7 Mon Sep 17 00:00:00 2001 From: John Wu <76966357+jwu-fisker@users.noreply.github.com> Date: Wed, 2 Jun 2021 09:47:48 -0700 Subject: [PATCH] CEC-227, CEC-244 Add dashboard page, update car command control (#46) * Create multiselect car table control Remove table overflow containers * Include trim to add car form * CEC-252 Replace modal status with link to car details page * Remove send command from car status page Fix menu key warning * Change car command control data Add Grafana menu items * Revert --- .../App/__snapshots__/App.test.js.snap | 640 ++++++++++++++++-- src/components/Cars/List/index.jsx | 2 +- src/components/Cars/SendCommand/index.jsx | 4 +- src/components/Dashboard/index.jsx | 28 + src/components/Layouts/SideMenu.jsx | 16 +- .../__snapshots__/SideMenu.test.jsx.snap | 94 +++ src/components/ListItemExternalLink.jsx | 46 ++ src/components/Routes/SiteRoutes.jsx | 9 + src/services/commands.js | 93 +-- 9 files changed, 847 insertions(+), 85 deletions(-) create mode 100644 src/components/Dashboard/index.jsx create mode 100644 src/components/ListItemExternalLink.jsx diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap index bbdf041..100fc98 100644 --- a/src/components/App/__snapshots__/App.test.js.snap +++ b/src/components/App/__snapshots__/App.test.js.snap @@ -76,6 +76,28 @@ exports[`App Route / authenticated 1`] = ` /> +
  • + +
    + + Dashboard + +
    + +     +
    • +
  • + +
    + + Create Charts + +
    + +     +
    • @@ -347,6 +394,28 @@ exports[`App Route /carupdate-deploy authenticated 1`] = ` /> +
  • + +
    + + Dashboard + +
    + +     +
    • +
  • + +
    + + Create Charts + +
    + +     +
    • @@ -1036,6 +1130,28 @@ exports[`App Route /carupdate-status authenticated 1`] = ` /> +
  • + +
    + + Dashboard + +
    + +     +
    • +
  • + +
    + + Create Charts + +
    + +     +
    • @@ -1475,6 +1616,28 @@ exports[`App Route /home authenticated 1`] = ` /> +
  • + +
    + + Dashboard + +
    + +     +
    • +
  • + +
    + + Create Charts + +
    + +     +
    • @@ -1746,6 +1934,28 @@ exports[`App Route /package-upload authenticated 1`] = ` /> +
  • + +
    + + Dashboard + +
    + +     +
    • +
  • + +
    + + Create Charts + +
    + +     +
    • @@ -2250,6 +2485,28 @@ exports[`App Route /page-not-found authenticated 1`] = ` /> +
  • + +
    + + Dashboard + +
    + +     +
    • +
  • + +
    + + Create Charts + +
    + +     +
    • @@ -2510,6 +2792,28 @@ exports[`App Route /update authenticated 1`] = ` /> +
  • + +
    + + Dashboard + +
    + +     +
    • +
  • + +
    + + Create Charts + +
    + +     +
    • @@ -3035,6 +3364,28 @@ exports[`App Route /updates authenticated 1`] = ` /> +
  • + +
    + + Dashboard + +
    + +     +
    • +
  • + +
    + + Create Charts + +
    + +     +
    • @@ -3604,6 +3980,28 @@ exports[`App Route /vehicle-add authenticated 1`] = ` /> +
  • + +
    + + Dashboard + +
    + +     +
    • +
  • + +
    + + Create Charts + +
    + +     +
    • @@ -4080,6 +4503,28 @@ exports[`App Route /vehicle-status authenticated 1`] = ` /> +
  • + +
    + + Dashboard + +
    + +     +
    • +
  • + +
    + + Create Charts + +
    + +     +
    • @@ -4616,6 +5086,28 @@ exports[`App Route /vehicles authenticated 1`] = ` /> +
  • + +
    + + Dashboard + +
    + +     +
    • +
  • + +
    + + Create Charts + +
    + +     +
    • @@ -5225,6 +5742,28 @@ exports[`App Route /vehicles-command authenticated 1`] = ` /> +
  • + +
    + + Dashboard + +
    + +     +
    • +
  • + +
    + + Create Charts + +
    + +     +
    • @@ -5444,42 +6008,32 @@ exports[`App Route /vehicles-command authenticated 1`] = ` name="send-command" > + + + + - - - - - - @@ -5531,19 +6085,29 @@ exports[`App Route /vehicles-command authenticated 1`] = ` name="send-parameter" > + + { {vehicles.map((row) => ( - + {row.vin} {row.model} diff --git a/src/components/Cars/SendCommand/index.jsx b/src/components/Cars/SendCommand/index.jsx index 5babf24..eee3b42 100644 --- a/src/components/Cars/SendCommand/index.jsx +++ b/src/components/Cars/SendCommand/index.jsx @@ -88,8 +88,8 @@ const SendCommand = ({ vins }) => { }} onChange={changeCommandHandler} > - {commands.map((item) => ( -
    + +
    + ); +}; + +export default Dashboard; diff --git a/src/components/Layouts/SideMenu.jsx b/src/components/Layouts/SideMenu.jsx index 4853fe5..00fc3b7 100644 --- a/src/components/Layouts/SideMenu.jsx +++ b/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() { @@ -51,7 +62,10 @@ export default function SideMenu() { {menu.map((item, index) => (
  • - + {item.to && } + {item.url && ( + + )}
    • ))}     diff --git a/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap b/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap index 3cd4ac4..af6fcf3 100644 --- a/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap +++ b/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap @@ -30,6 +30,28 @@ exports[`SideMenu Authenticated 1`] = ` /> +
  • + +
    + + Dashboard + +
    + +     +
    • +
  • + +
    + + Create Charts + +
    + +     +
    • @@ -175,6 +222,53 @@ exports[`SideMenu Unauthenticated 1`] = ` /> +
  • + +
    + + Dashboard + +
    + +     +
    • +
  • + +
    + + Create Charts + +
    + +     +
    • diff --git a/src/components/ListItemExternalLink.jsx b/src/components/ListItemExternalLink.jsx new file mode 100644 index 0000000..13568a5 --- /dev/null +++ b/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 ( + + {icon ? {icon} : null} + + + ); +} + +ListItemExternalLink.propTypes = { + icon: PropTypes.element, + primary: PropTypes.string.isRequired, + url: PropTypes.string.isRequired, +}; + +export default ListItemExternalLink; diff --git a/src/components/Routes/SiteRoutes.jsx b/src/components/Routes/SiteRoutes.jsx index 1e103df..190ed66 100644 --- a/src/components/Routes/SiteRoutes.jsx +++ b/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]} /> + } + type={TYPES.PROTECTED} + token={token} + groups={groups} + roles={[Roles.READ, Roles.CREATE]} + /> diff --git a/src/services/commands.js b/src/services/commands.js index d255174..c2ab954 100644 --- a/src/services/commands.js +++ b/src/services/commands.js @@ -1,68 +1,75 @@ -const LockUnlockParams = [ +const Locks = [ { - value: "LOCK", - label: "Lock", - }, - { - value: "UNLOCK", - label: "Unlock", + value: "right_front", + label: "Front right door", + },{ + value: "left_front", + label: "Front left door", + },{ + value: "right_rear", + label: "Rear right door", + },{ + value: "left_rear", + label: "Rear left door", + },{ + value: "trunk", + label: "Trunk", }, ]; -const OpenCloseParams = [ +const Windows = [ { - value: "OPEN", - label: "Open", - }, - { - value: "CLOSE", - label: "Close", + value: "right_front", + label: "Front right window", + },{ + value: "left_front", + label: "Front left window", + },{ + 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", - 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", + value: "headlights", label: "Flash headlights", }];