Skip to content

Commit 15b917f

Browse files
evan-grayevan-gray
committed
dashboard: ntt looker and nav link fix
1 parent 00afb23 commit 15b917f

File tree

4 files changed

+149
-37
lines changed

4 files changed

+149
-37
lines changed

‎dashboard/src/components/LookerDashboard.tsx

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { Box } from '@mui/material';
2+
import { ReactElement } from 'react';
3+
4+
function RatioWrapper({
5+
children,
6+
ratio = '56.25%' /* 16:9 */,
7+
paddingTop = 0,
8+
}: {
9+
children: ReactElement;
10+
ratio?: string;
11+
paddingTop?: number;
12+
}) {
13+
return (
14+
<Box display="flex" alignItems="center" justifyContent="center" mt={2} mx={2}>
15+
<Box maxWidth={1366} flexGrow={1}>
16+
<Box style={{ width: '100%', paddingTop, paddingBottom: ratio, position: 'relative' }}>
17+
<Box
18+
style={{
19+
position: 'absolute',
20+
top: 0,
21+
bottom: 0,
22+
left: 0,
23+
right: 0,
24+
}}
25+
>
26+
{children}
27+
</Box>
28+
</Box>
29+
</Box>
30+
</Box>
31+
);
32+
}
33+
34+
export function LookerDashboard({
35+
title,
36+
src,
37+
hasTabs = false,
38+
}: {
39+
title: string;
40+
src: string;
41+
hasTabs?: boolean;
42+
}) {
43+
return (
44+
<RatioWrapper paddingTop={hasTabs ? 65 : 0}>
45+
<iframe
46+
title={title}
47+
src={src}
48+
style={{
49+
border: 0,
50+
width: '100%',
51+
height: '100%',
52+
}}
53+
allowFullScreen
54+
sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
55+
></iframe>
56+
</RatioWrapper>
57+
);
58+
}

‎dashboard/src/components/Main.tsx

+51-28
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { GitHub } from '@mui/icons-material';
22
import { AppBar, Box, Button, Hidden, IconButton, Toolbar, Typography } from '@mui/material';
3-
import { NavLink, Route, Switch } from 'react-router-dom';
3+
import { NavLink, Route, Switch, useLocation } from 'react-router-dom';
44
import useChainHeartbeats from '../hooks/useChainHeartbeats';
55
import useHeartbeats from '../hooks/useHeartbeats';
66
import useLatestRelease from '../hooks/useLatestRelease';
77
import WormholeStatsIcon from '../icons/WormholeStatsIcon';
88
import Alerts from './Alerts';
99
import Home from './Home';
1010
import Metrics from './Metrics';
11+
import NTTMetrics from './NTTMetrics';
1112
import NetworkSelector from './NetworkSelector';
1213
import Settings from './Settings';
1314

@@ -17,6 +18,51 @@ function NavButton(props: any) {
1718
return <Button {...rest} />;
1819
}
1920

21+
function NavLinks() {
22+
const { search } = useLocation();
23+
return (
24+
<>
25+
<NavLink
26+
to={`/${search}`}
27+
exact
28+
component={NavButton}
29+
color="inherit"
30+
activeStyle={{ borderBottom: '2px solid', paddingBottom: 4 }}
31+
style={{ marginLeft: -8, textTransform: 'none', borderRadius: 0, minWidth: 0 }}
32+
>
33+
<Box display="flex" alignItems="center">
34+
<WormholeStatsIcon />
35+
</Box>
36+
<Hidden smDown>
37+
<Typography variant="h6" sx={{ pl: 0.75 }}>
38+
Dashboard
39+
</Typography>
40+
</Hidden>
41+
</NavLink>
42+
<NavLink
43+
to={`/metrics${search}`}
44+
exact
45+
component={NavButton}
46+
color="inherit"
47+
activeStyle={{ borderBottom: '2px solid', paddingBottom: 4 }}
48+
style={{ paddingRight: 8, marginLeft: 8, textTransform: 'none', borderRadius: 0 }}
49+
>
50+
<Typography variant="h6">Metrics</Typography>
51+
</NavLink>
52+
<NavLink
53+
to={`/ntt-metrics${search}`}
54+
exact
55+
component={NavButton}
56+
color="inherit"
57+
activeStyle={{ borderBottom: '2px solid', paddingBottom: 4 }}
58+
style={{ paddingRight: 8, marginLeft: 8, textTransform: 'none', borderRadius: 0 }}
59+
>
60+
<Typography variant="h6">NTT</Typography>
61+
</NavLink>
62+
</>
63+
);
64+
}
65+
2066
function Main() {
2167
const heartbeats = useHeartbeats();
2268
const chainIdsToHeartbeats = useChainHeartbeats(heartbeats);
@@ -25,33 +71,7 @@ function Main() {
2571
<>
2672
<AppBar position="static">
2773
<Toolbar variant="dense">
28-
<NavLink
29-
to="/"
30-
exact
31-
component={NavButton}
32-
color="inherit"
33-
activeStyle={{ borderBottom: '2px solid', paddingBottom: 4 }}
34-
style={{ marginLeft: -8, textTransform: 'none', borderRadius: 0, minWidth: 0 }}
35-
>
36-
<Box display="flex" alignItems="center">
37-
<WormholeStatsIcon />
38-
</Box>
39-
<Hidden smDown>
40-
<Typography variant="h6" sx={{ pl: 0.75 }}>
41-
Dashboard
42-
</Typography>
43-
</Hidden>
44-
</NavLink>
45-
<NavLink
46-
to="/metrics"
47-
exact
48-
component={NavButton}
49-
color="inherit"
50-
activeStyle={{ borderBottom: '2px solid', paddingBottom: 4 }}
51-
style={{ paddingRight: 8, marginLeft: 8, textTransform: 'none', borderRadius: 0 }}
52-
>
53-
<Typography variant="h6">Metrics</Typography>
54-
</NavLink>
74+
<NavLinks />
5575
<Box flexGrow={1} />
5676
<Hidden smDown>
5777
<Alerts
@@ -74,6 +94,9 @@ function Main() {
7494
</Toolbar>
7595
</AppBar>
7696
<Switch>
97+
<Route path="/ntt-metrics">
98+
<NTTMetrics />
99+
</Route>
77100
<Route path="/metrics">
78101
<Metrics />
79102
</Route>

‎dashboard/src/components/Metrics.tsx

+17-9
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,39 @@
1-
import { Tab, Tabs } from '@mui/material';
1+
import { Box, Tab, Tabs, Typography } from '@mui/material';
22
import React from 'react';
3+
import { useNetworkContext } from '../contexts/NetworkContext';
4+
import { LookerDashboard } from './LookerDashboard';
35

46
function Metrics() {
7+
const { currentNetwork } = useNetworkContext();
58
const [value, setValue] = React.useState(0);
69
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
710
setValue(newValue);
811
};
12+
if (currentNetwork.name !== 'Mainnet') {
13+
return (
14+
<Box textAlign="center" my={8} mx={4}>
15+
<Typography variant="h3">Metrics are only supported in Mainnet</Typography>
16+
</Box>
17+
);
18+
}
919
return (
1020
<>
1121
<Tabs value={value} onChange={handleChange} centered sx={{ minHeight: 36 }}>
1222
<Tab label="7 Day" sx={{ minHeight: 36, py: 0 }} />
1323
<Tab label="30 Day" sx={{ minHeight: 36, py: 0 }} />
1424
</Tabs>
1525
{value === 0 ? (
16-
<iframe
26+
<LookerDashboard
1727
title="7 Day Report"
1828
src="https://lookerstudio.google.com/embed/reporting/d2236e5e-bf1b-4bff-9a5c-f9a394fdeb68/page/p_o3mrmt3o8c"
19-
style={{ border: 0, height: 'calc( 100vh - 92px )', width: '100%' }}
20-
allowFullScreen
21-
></iframe>
29+
hasTabs
30+
/>
2231
) : (
23-
<iframe
32+
<LookerDashboard
2433
title="30 Day Report"
2534
src="https://lookerstudio.google.com/embed/reporting/8a014f09-2954-4437-ac46-3d83f20fe6df/page/p_o3mrmt3o8c"
26-
style={{ border: 0, height: 'calc( 100vh - 92px )', width: '100%' }}
27-
allowFullScreen
28-
></iframe>
35+
hasTabs
36+
/>
2937
)}
3038
</>
3139
);

‎dashboard/src/components/NTTMetrics.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Box, Typography } from '@mui/material';
2+
import { useNetworkContext } from '../contexts/NetworkContext';
3+
import { LookerDashboard } from './LookerDashboard';
4+
5+
function NTTMetrics() {
6+
const { currentNetwork } = useNetworkContext();
7+
if (currentNetwork.name !== 'Testnet') {
8+
return (
9+
<Box textAlign="center" my={8} mx={4}>
10+
<Typography variant="h3">NTT Metrics are only supported in Testnet</Typography>
11+
</Box>
12+
);
13+
}
14+
return (
15+
<>
16+
<LookerDashboard
17+
title="Testnet NTT Transfers Report"
18+
src="https://lookerstudio.google.com/embed/reporting/a47057a8-15a0-4cc7-8086-eb00f5d09d2a/page/SPpuD"
19+
/>
20+
</>
21+
);
22+
}
23+
export default NTTMetrics;

0 commit comments

Comments
 (0)