admin/ota-admin-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use responsive iframe control for charts (#49) (#50)

Browse Source 
* Use responsive iframe control to charts

* Move external Grafana link to Dashboard page

* Remove unused embedded style class

* Add button label
This commit is contained in:
John Wu
2021-06-03 14:25:41 -07:00
committed by GitHub
parent da3e348df8
commit dec88737ad
6 changed files with 105 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

371
src/components/App/__snapshots__/App.test.js.snap
View File

@@ -208,31 +208,6 @@ exports[`App Route / 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>
@@ -526,31 +501,6 @@ exports[`App Route /carupdate-deploy 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>
@@ -1262,31 +1212,6 @@ exports[`App Route /carupdate-status 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>
@@ -1750,31 +1675,6 @@ exports[`App Route /dashboard 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>
@@ -1789,24 +1689,58 @@ exports[`App Route /dashboard authenticated 1`] = `
>
<div
class="makeStyles-paper-827"
>
<div
class="makeStyles-embeddedWrapper-856"
>
<iframe
class="makeStyles-iframe-856"
frameborder="0"
height="400"
src="https://grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=5s&panelId=6"
style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%;"
title="Vehicle Connected"
width="900"
/>
</div>
<div
class="makeStyles-embeddedWrapper-856"
>
<iframe
class="makeStyles-iframe-856"
frameborder="0"
height="400"
src="https://grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=5s&panelId=2"
style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%;"
title="Vehicle Signals"
width="900"
/>
</div>
<a
aria-disabled="false"
aria-label="create"
class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiTypography-colorPrimary"
href="https://grafana.fiskerdps.com"
rel="noopener"
role="button"
style="margin-top: 10px;"
tabindex="0"
target="_blank"
>
<span
class="MuiButton-label"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
/>
</svg>
Create Charts
</span>
<span
class="MuiTouchRipple-root"
/>
</a>
</div>
</main>
</main>
</div>
@@ -2077,31 +2011,6 @@ exports[`App Route /home 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>
@@ -2395,31 +2304,6 @@ exports[`App Route /package-upload 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>
@@ -2946,31 +2830,6 @@ exports[`App Route /page-not-found 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>
@@ -3253,31 +3112,6 @@ exports[`App Route /update 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>
@@ -3825,31 +3659,6 @@ exports[`App Route /updates 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>
@@ -4441,31 +4250,6 @@ exports[`App Route /vehicle-add 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>
@@ -4964,31 +4748,6 @@ exports[`App Route /vehicle-status 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>
@@ -5547,31 +5306,6 @@ exports[`App Route /vehicles 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>
@@ -6203,31 +5937,6 @@ exports[`App Route /vehicles-command 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>

26
src/components/Controls/ResponsiveIFrame/index.jsx Normal file
View File

@@ -0,0 +1,26 @@
import React from "react";
const ResponsiveIFrame = (props) => {
const { classes, src, title } = props;
return (
<div className={classes.embeddedWrapper}>
<iframe
style={{
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
width: "100%",
height: "100%",
}}
title={title}
src={src}
frameBorder="0"
></iframe>
</div>
);
};
export default ResponsiveIFrame;

39
src/components/Dashboard/index.jsx
View File

@@ -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>
);
};

5
src/components/Layouts/SideMenu.jsx
View File

@@ -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() {

50
src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap
View File

@@ -162,31 +162,6 @@ 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>
@@ -244,31 +219,6 @@ exports[`SideMenu Unauthenticated 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>

6
src/components/useStyles.jsx
View File

@@ -166,8 +166,12 @@ const useStyles = makeStyles((theme) => ({
grow: {
flexGrow: 1,
},
iframe: {
embeddedWrapper: {
marginTop: 10,
position: "relative",
overflow: "hidden",
width: "100%",
paddingTop: "56.25%",
},
}));