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

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 (
     <div className={classes.paper}>
-      <iframe
-        className={classes.iframe}
-        title="Vehicle Connected"
+      <ResponsiveIFrame
+        classes={classes}
         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"
+        title="Vehicle Connected"
+      />
+      <ResponsiveIFrame
+        classes={classes}
         src="https://grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=5s&panelId=2"
-        width="900"
-        height="400"
-        frameBorder="0"
-      ></iframe>
+        title="Vehicle Signals"
+      />
+      <Button
+        style={{ marginTop: 10 }}
+        aria-label="create"
+        color="primary"
+        component={Link}
+        href="https://grafana.fiskerdps.com"
+        rel="noopener"
+        target="_blank"
+      >
+        <CreateIcon fontSize="large" />
+        Create Charts
+      </Button>
     </div>
   );
 };