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)

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-02 15:02:58 -07:00
committed by GitHub
parent d8f14aaeba
commit e8a84563bd
6 changed files with 105 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -208,31 +208,6 @@ exports[`App Route / authenticated 1`] = `
/> />
</a> </a>
</li> </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> </ul>
</div> </div>
</div> </div>
@@ -526,31 +501,6 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
/> />
</a> </a>
</li> </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> </ul>
</div> </div>
</div> </div>
@@ -1262,31 +1212,6 @@ exports[`App Route /carupdate-status authenticated 1`] = `
/> />
</a> </a>
</li> </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> </ul>
</div> </div>
</div> </div>
@@ -1750,31 +1675,6 @@ exports[`App Route /dashboard authenticated 1`] = `
/> />
</a> </a>
</li> </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> </ul>
</div> </div>
</div> </div>
@@ -1790,22 +1690,56 @@ exports[`App Route /dashboard authenticated 1`] = `
<div <div
class="makeStyles-paper-827" class="makeStyles-paper-827"
> >
<iframe <div
class="makeStyles-iframe-856" class="makeStyles-embeddedWrapper-856"
frameborder="0" >
height="400" <iframe
src="https://grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=5s&panelId=6" frameborder="0"
title="Vehicle Connected" src="https://grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=5s&panelId=6"
width="900" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%;"
/> title="Vehicle Connected"
<iframe />
class="makeStyles-iframe-856" </div>
frameborder="0" <div
height="400" class="makeStyles-embeddedWrapper-856"
src="https://grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=5s&panelId=2" >
title="Vehicle Signals" <iframe
width="900" frameborder="0"
/> 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"
/>
</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> </div>
</main> </main>
</main> </main>
@@ -2077,31 +2011,6 @@ exports[`App Route /home authenticated 1`] = `
/> />
</a> </a>
</li> </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> </ul>
</div> </div>
</div> </div>
@@ -2395,31 +2304,6 @@ exports[`App Route /package-upload authenticated 1`] = `
/> />
</a> </a>
</li> </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> </ul>
</div> </div>
</div> </div>
@@ -2946,31 +2830,6 @@ exports[`App Route /page-not-found authenticated 1`] = `
/> />
</a> </a>
</li> </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> </ul>
</div> </div>
</div> </div>
@@ -3253,31 +3112,6 @@ exports[`App Route /update authenticated 1`] = `
/> />
</a> </a>
</li> </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> </ul>
</div> </div>
</div> </div>
@@ -3825,31 +3659,6 @@ exports[`App Route /updates authenticated 1`] = `
/> />
</a> </a>
</li> </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> </ul>
</div> </div>
</div> </div>
@@ -4441,31 +4250,6 @@ exports[`App Route /vehicle-add authenticated 1`] = `
/> />
</a> </a>
</li> </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> </ul>
</div> </div>
</div> </div>
@@ -4964,31 +4748,6 @@ exports[`App Route /vehicle-status authenticated 1`] = `
/> />
</a> </a>
</li> </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> </ul>
</div> </div>
</div> </div>
@@ -5547,31 +5306,6 @@ exports[`App Route /vehicles authenticated 1`] = `
/> />
</a> </a>
</li> </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> </ul>
</div> </div>
</div> </div>
@@ -6203,31 +5937,6 @@ exports[`App Route /vehicles-command authenticated 1`] = `
/> />
</a> </a>
</li> </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> </ul>
</div> </div>
</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 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 { useStatusContext } from "../Contexts/StatusContext";
import useStyles from "../useStyles";
import ResponsiveIFrame from "../Controls/ResponsiveIFrame";
const Dashboard = () => { const Dashboard = () => {
const classes = useStyles(); const classes = useStyles();
@@ -14,22 +17,28 @@ const Dashboard = () => {
return ( return (
<div className={classes.paper}> <div className={classes.paper}>
<iframe <ResponsiveIFrame
className={classes.iframe} classes={classes}
title="Vehicle Connected"
src="https://grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=5s&panelId=6" src="https://grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=5s&panelId=6"
width="900" title="Vehicle Connected"
height="400" />
frameBorder="0" <ResponsiveIFrame
></iframe> classes={classes}
<iframe
className={classes.iframe}
title="Vehicle Signals"
src="https://grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=5s&panelId=2" src="https://grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=5s&panelId=2"
width="900" title="Vehicle Signals"
height="400" />
frameBorder="0" <Button
></iframe> 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> </div>
); );
}; };

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

@@ -41,11 +41,6 @@ const menuData = [
to: "/vehicles-command", to: "/vehicles-command",
roles: [Roles.CREATE], roles: [Roles.CREATE],
}, },
{
label: "Create Charts",
url: "https://grafana.fiskerdps.com",
roles: [],
},
]; ];
export default function SideMenu() { export default function SideMenu() {

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

@@ -162,31 +162,6 @@ exports[`SideMenu Authenticated 1`] = `
/> />
</a> </a>
</li> </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> </ul>
</div> </div>
</div> </div>
@@ -244,31 +219,6 @@ exports[`SideMenu Unauthenticated 1`] = `
/> />
</a> </a>
</li> </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> </ul>
</div> </div>
</div> </div>

6
src/components/useStyles.jsx
View File

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