diff --git a/src/components/App/App.test.js b/src/components/App/App.test.js index 65ede98..86b9731 100644 --- a/src/components/App/App.test.js +++ b/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"); + }); + }); diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap index b93036c..b5c56f1 100644 --- a/src/components/App/__snapshots__/App.test.js.snap +++ b/src/components/App/__snapshots__/App.test.js.snap @@ -6,10 +6,10 @@ exports[`App Route / authenticated 1`] = ` data-testid="mocked-userprovider" >
Fisker Admin Portal
@@ -76,6 +76,28 @@ exports[`App Route / authenticated 1`] = ` /> +
  • + +
    + + Dashboard + +
    + +     +
    • +
  • + +
    + + Create Charts + +
    + +     +

    • Fisker Admin Portal
    @@ -347,6 +394,28 @@ exports[`App Route /carupdate-deploy authenticated 1`] = ` /> +
  • + +
    + + Dashboard + +
    + +     +
    • +
  • + +
    + + Create Charts + +
    + +     +
    • -
    -

    - Created - - . - -

    -
    -
    +

    + Created + + . + No description +

    -
    - -
    - - - + +
    +
    +
    +
    + 0 Selected
    - -
    - - - -
    -
    -
    - No Cars Selected + Deploy + +
    -
    - - + + + + + + + + + + + + + + + + + + +
    + + + + + + + + + + VIN + + sorted ascending + + + + + + Model + + + + + Year + + + + + Trim + + + + + Created + + + + + Updated + + +
    +
    +
    +

    + Rows per page: +

    +
    + + +
    +

    + 0-0 of 0 +

    +
    + + +
    +
    +
    +
    + +

    @@ -648,10 +1005,10 @@ exports[`App Route /carupdate-deploy unauthenticated 1`] = ` data-testid="mocked-userprovider" >
    @@ -703,10 +1060,10 @@ exports[`App Route /carupdate-status authenticated 1`] = ` data-testid="mocked-userprovider" >
    Fisker Admin Portal
    @@ -773,6 +1130,28 @@ exports[`App Route /carupdate-status authenticated 1`] = ` />     +
  • + +
    + + Dashboard + +
    + +     +
    • +
  • + +
    + + Create Charts + +
    + +     +
    • -
    - - - - - - - - - - - - + + + + + + + + + - - - - -
    - ID - - Vehicle - - Status - - Created - - Updated -
    + Vehicle + + Status + + Created + + Updated +
    +

    -

    -

    +

    + +
    -

    - 0-0 of 0 -

    -
    - - -
    + +
    -
    -
    -
    +

    + 0-0 of 0 +

    +
    + + +
    +
    + + + +
    @@ -1092,10 +1491,10 @@ exports[`App Route /carupdate-status unauthenticated 1`] = ` data-testid="mocked-userprovider" >
    + + Sign In + + + +
    +
    +
    +
    +
    +
    +`; + +exports[`App Route /dashboard authenticated 1`] = ` +
    +
    +
    +
    +
    +
    + Dashboard +
    + +
    +
    +
    +
    +
    + Fisker Admin Portal +
    +
    + +
    +
    +
    +
    +
    +
    + + +
    + ); +}; + +export default Dashboard; diff --git a/src/components/Layouts/SideMenu.jsx b/src/components/Layouts/SideMenu.jsx index 01a52af..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() { @@ -50,7 +61,12 @@ export default function SideMenu() { return ( {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/ListItemLink.jsx b/src/components/ListItemLink.jsx index 317a42c..b30901b 100644 --- a/src/components/ListItemLink.jsx +++ b/src/components/ListItemLink.jsx @@ -17,12 +17,10 @@ function ListItemLink(props) { ); return ( -
  • - - {icon ? {icon} : null} - - -
    • + + {icon ? {icon} : null} + + ); } 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/components/UpdatePackages/Create/__snapshots__/Create.test.js.snap b/src/components/UpdatePackages/Create/__snapshots__/Create.test.js.snap index 3547c2b..345dbcc 100644 --- a/src/components/UpdatePackages/Create/__snapshots__/Create.test.js.snap +++ b/src/components/UpdatePackages/Create/__snapshots__/Create.test.js.snap @@ -46,10 +46,10 @@ exports[`File Upload Form Should render 1`] = ` />
    ); }; diff --git a/src/components/useStyles.jsx b/src/components/useStyles.jsx index 50c3500..3b679dc 100644 --- a/src/components/useStyles.jsx +++ b/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; 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", }];