dashboard: ntt looker and nav link fix

wormhole-foundation · Apr 4, 2024 · 15b917f · 15b917f
1 parent 00afb23
commit 15b917f
Show file tree

Hide file tree

Showing 4 changed files with 149 additions and 37 deletions.
diff --git a/dashboard/src/components/LookerDashboard.tsx b/dashboard/src/components/LookerDashboard.tsx
@@ -0,0 +1,58 @@
+import { Box } from '@mui/material';
+import { ReactElement } from 'react';
+
+function RatioWrapper({
+  children,
+  ratio = '56.25%' /* 16:9 */,
+  paddingTop = 0,
+}: {
+  children: ReactElement;
+  ratio?: string;
+  paddingTop?: number;
+}) {
+  return (
+    <Box display="flex" alignItems="center" justifyContent="center" mt={2} mx={2}>
+      <Box maxWidth={1366} flexGrow={1}>
+        <Box style={{ width: '100%', paddingTop, paddingBottom: ratio, position: 'relative' }}>
+          <Box
+            style={{
+              position: 'absolute',
+              top: 0,
+              bottom: 0,
+              left: 0,
+              right: 0,
+            }}
+          >
+            {children}
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export function LookerDashboard({
+  title,
+  src,
+  hasTabs = false,
+}: {
+  title: string;
+  src: string;
+  hasTabs?: boolean;
+}) {
+  return (
+    <RatioWrapper paddingTop={hasTabs ? 65 : 0}>
+      <iframe
+        title={title}
+        src={src}
+        style={{
+          border: 0,
+          width: '100%',
+          height: '100%',
+        }}
+        allowFullScreen
+        sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+      ></iframe>
+    </RatioWrapper>
+  );
+}
diff --git a/dashboard/src/components/Main.tsx b/dashboard/src/components/Main.tsx
@@ -1,13 +1,14 @@
 import { GitHub } from '@mui/icons-material';
 import { AppBar, Box, Button, Hidden, IconButton, Toolbar, Typography } from '@mui/material';
-import { NavLink, Route, Switch } from 'react-router-dom';
+import { NavLink, Route, Switch, useLocation } from 'react-router-dom';
 import useChainHeartbeats from '../hooks/useChainHeartbeats';
 import useHeartbeats from '../hooks/useHeartbeats';
 import useLatestRelease from '../hooks/useLatestRelease';
 import WormholeStatsIcon from '../icons/WormholeStatsIcon';
 import Alerts from './Alerts';
 import Home from './Home';
 import Metrics from './Metrics';
+import NTTMetrics from './NTTMetrics';
 import NetworkSelector from './NetworkSelector';
 import Settings from './Settings';
 
@@ -17,6 +18,51 @@ function NavButton(props: any) {
   return <Button {...rest} />;
 }
 
+function NavLinks() {
+  const { search } = useLocation();
+  return (
+    <>
+      <NavLink
+        to={`/${search}`}
+        exact
+        component={NavButton}
+        color="inherit"
+        activeStyle={{ borderBottom: '2px solid', paddingBottom: 4 }}
+        style={{ marginLeft: -8, textTransform: 'none', borderRadius: 0, minWidth: 0 }}
+      >
+        <Box display="flex" alignItems="center">
+          <WormholeStatsIcon />
+        </Box>
+        <Hidden smDown>
+          <Typography variant="h6" sx={{ pl: 0.75 }}>
+            Dashboard
+          </Typography>
+        </Hidden>
+      </NavLink>
+      <NavLink
+        to={`/metrics${search}`}
+        exact
+        component={NavButton}
+        color="inherit"
+        activeStyle={{ borderBottom: '2px solid', paddingBottom: 4 }}
+        style={{ paddingRight: 8, marginLeft: 8, textTransform: 'none', borderRadius: 0 }}
+      >
+        <Typography variant="h6">Metrics</Typography>
+      </NavLink>
+      <NavLink
+        to={`/ntt-metrics${search}`}
+        exact
+        component={NavButton}
+        color="inherit"
+        activeStyle={{ borderBottom: '2px solid', paddingBottom: 4 }}
+        style={{ paddingRight: 8, marginLeft: 8, textTransform: 'none', borderRadius: 0 }}
+      >
+        <Typography variant="h6">NTT</Typography>
+      </NavLink>
+    </>
+  );
+}
+
 function Main() {
   const heartbeats = useHeartbeats();
   const chainIdsToHeartbeats = useChainHeartbeats(heartbeats);
@@ -25,33 +71,7 @@ function Main() {
     <>
       <AppBar position="static">
         <Toolbar variant="dense">
-          <NavLink
-            to="/"
-            exact
-            component={NavButton}
-            color="inherit"
-            activeStyle={{ borderBottom: '2px solid', paddingBottom: 4 }}
-            style={{ marginLeft: -8, textTransform: 'none', borderRadius: 0, minWidth: 0 }}
-          >
-            <Box display="flex" alignItems="center">
-              <WormholeStatsIcon />
-            </Box>
-            <Hidden smDown>
-              <Typography variant="h6" sx={{ pl: 0.75 }}>
-                Dashboard
-              </Typography>
-            </Hidden>
-          </NavLink>
-          <NavLink
-            to="/metrics"
-            exact
-            component={NavButton}
-            color="inherit"
-            activeStyle={{ borderBottom: '2px solid', paddingBottom: 4 }}
-            style={{ paddingRight: 8, marginLeft: 8, textTransform: 'none', borderRadius: 0 }}
-          >
-            <Typography variant="h6">Metrics</Typography>
-          </NavLink>
+          <NavLinks />
           <Box flexGrow={1} />
           <Hidden smDown>
             <Alerts
@@ -74,6 +94,9 @@ function Main() {
         </Toolbar>
       </AppBar>
       <Switch>
+        <Route path="/ntt-metrics">
+          <NTTMetrics />
+        </Route>
         <Route path="/metrics">
           <Metrics />
         </Route>

diff --git a/dashboard/src/components/Metrics.tsx b/dashboard/src/components/Metrics.tsx
@@ -1,31 +1,39 @@
-import { Tab, Tabs } from '@mui/material';
+import { Box, Tab, Tabs, Typography } from '@mui/material';
 import React from 'react';
+import { useNetworkContext } from '../contexts/NetworkContext';
+import { LookerDashboard } from './LookerDashboard';
 
 function Metrics() {
+  const { currentNetwork } = useNetworkContext();
   const [value, setValue] = React.useState(0);
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
   };
+  if (currentNetwork.name !== 'Mainnet') {
+    return (
+      <Box textAlign="center" my={8} mx={4}>
+        <Typography variant="h3">Metrics are only supported in Mainnet</Typography>
+      </Box>
+    );
+  }
   return (
     <>
       <Tabs value={value} onChange={handleChange} centered sx={{ minHeight: 36 }}>
         <Tab label="7 Day" sx={{ minHeight: 36, py: 0 }} />
         <Tab label="30 Day" sx={{ minHeight: 36, py: 0 }} />
       </Tabs>
       {value === 0 ? (
-        <iframe
+        <LookerDashboard
           title="7 Day Report"
           src="https://lookerstudio.google.com/embed/reporting/d2236e5e-bf1b-4bff-9a5c-f9a394fdeb68/page/p_o3mrmt3o8c"
-          style={{ border: 0, height: 'calc( 100vh - 92px )', width: '100%' }}
-          allowFullScreen
-        ></iframe>
+          hasTabs
+        />
       ) : (
-        <iframe
+        <LookerDashboard
           title="30 Day Report"
           src="https://lookerstudio.google.com/embed/reporting/8a014f09-2954-4437-ac46-3d83f20fe6df/page/p_o3mrmt3o8c"
-          style={{ border: 0, height: 'calc( 100vh - 92px )', width: '100%' }}
-          allowFullScreen
-        ></iframe>
+          hasTabs
+        />
       )}
     </>
   );

diff --git a/dashboard/src/components/NTTMetrics.tsx b/dashboard/src/components/NTTMetrics.tsx
@@ -0,0 +1,23 @@
+import { Box, Typography } from '@mui/material';
+import { useNetworkContext } from '../contexts/NetworkContext';
+import { LookerDashboard } from './LookerDashboard';
+
+function NTTMetrics() {
+  const { currentNetwork } = useNetworkContext();
+  if (currentNetwork.name !== 'Testnet') {
+    return (
+      <Box textAlign="center" my={8} mx={4}>
+        <Typography variant="h3">NTT Metrics are only supported in Testnet</Typography>
+      </Box>
+    );
+  }
+  return (
+    <>
+      <LookerDashboard
+        title="Testnet NTT Transfers Report"
+        src="https://lookerstudio.google.com/embed/reporting/a47057a8-15a0-4cc7-8086-eb00f5d09d2a/page/SPpuD"
+      />
+    </>
+  );
+}
+export default NTTMetrics;