From e8a84563bd7f27de229c49b73c2233346d7c9bcf Mon Sep 17 00:00:00 2001 From: John Wu <76966357+jwu-fisker@users.noreply.github.com> Date: Wed, 2 Jun 2021 15:02:58 -0700 Subject: [PATCH] Use responsive iframe control for charts (#49) * Use responsive iframe control to charts * Move external Grafana link to Dashboard page * Remove unused embedded style class * Add button label --- .../App/__snapshots__/App.test.js.snap | 391 +++--------------- .../Controls/ResponsiveIFrame/index.jsx | 26 ++ src/components/Dashboard/index.jsx | 39 +- src/components/Layouts/SideMenu.jsx | 5 - .../__snapshots__/SideMenu.test.jsx.snap | 50 --- src/components/useStyles.jsx | 6 +- 6 files changed, 105 insertions(+), 412 deletions(-) create mode 100644 src/components/Controls/ResponsiveIFrame/index.jsx diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap index dde53f1..5fac71f 100644 --- a/src/components/App/__snapshots__/App.test.js.snap +++ b/src/components/App/__snapshots__/App.test.js.snap @@ -208,31 +208,6 @@ exports[`App Route / authenticated 1`] = ` /> -
  • - -
    - - Create Charts - -
    - -     -
    • @@ -526,31 +501,6 @@ exports[`App Route /carupdate-deploy authenticated 1`] = ` /> -
  • - -
    - - Create Charts - -
    - -     -
    • @@ -1262,31 +1212,6 @@ exports[`App Route /carupdate-status authenticated 1`] = ` /> -
  • - -
    - - Create Charts - -
    - -     -
    • @@ -1750,31 +1675,6 @@ exports[`App Route /dashboard authenticated 1`] = ` /> -
  • - -
    - - Create Charts - -
    - -     -
    • @@ -1790,22 +1690,56 @@ exports[`App Route /dashboard authenticated 1`] = `
    - +
    + ); +}; + +export default ResponsiveIFrame; diff --git a/src/components/Dashboard/index.jsx b/src/components/Dashboard/index.jsx index f4b907d..3e16a83 100644 --- a/src/components/Dashboard/index.jsx +++ b/src/components/Dashboard/index.jsx @@ -1,7 +1,10 @@ import React, { useEffect } from "react"; -import useStyles from "../useStyles"; +import { Button, Link } from "@material-ui/core"; +import CreateIcon from "@material-ui/icons/Create"; import { useStatusContext } from "../Contexts/StatusContext"; +import useStyles from "../useStyles"; +import ResponsiveIFrame from "../Controls/ResponsiveIFrame"; const Dashboard = () => { const classes = useStyles(); @@ -14,22 +17,28 @@ const Dashboard = () => { return (
    - - + title="Vehicle Signals" + /> +
    ); }; diff --git a/src/components/Layouts/SideMenu.jsx b/src/components/Layouts/SideMenu.jsx index 00fc3b7..5b1ee7a 100644 --- a/src/components/Layouts/SideMenu.jsx +++ b/src/components/Layouts/SideMenu.jsx @@ -41,11 +41,6 @@ const menuData = [ to: "/vehicles-command", roles: [Roles.CREATE], }, - { - label: "Create Charts", - url: "https://grafana.fiskerdps.com", - roles: [], - }, ]; export default function SideMenu() { diff --git a/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap b/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap index af6fcf3..e5897f8 100644 --- a/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap +++ b/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap @@ -162,31 +162,6 @@ exports[`SideMenu Authenticated 1`] = ` /> -
  • - -
    - - Create Charts - -
    - -     -
    • @@ -244,31 +219,6 @@ exports[`SideMenu Unauthenticated 1`] = ` /> -
  • - -
    - - Create Charts - -
    - -     -
    • diff --git a/src/components/useStyles.jsx b/src/components/useStyles.jsx index 3b679dc..8982fe9 100644 --- a/src/components/useStyles.jsx +++ b/src/components/useStyles.jsx @@ -166,8 +166,12 @@ const useStyles = makeStyles((theme) => ({ grow: { flexGrow: 1, }, - iframe: { + embeddedWrapper: { marginTop: 10, + position: "relative", + overflow: "hidden", + width: "100%", + paddingTop: "56.25%", }, }));