datajunction-ui 0.0.154 → 0.0.156

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.154",
+  "version": "0.0.156",
   "description": "DataJunction UI",
   "module": "src/index.tsx",
   "repository": {

package/src/app/index.tsx

@@ -10,6 +10,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { NamespacePage } from './pages/NamespacePage/Loadable';
 import { MyWorkspacePage } from './pages/MyWorkspacePage/Loadable';
 import { OverviewPage } from './pages/OverviewPage/Loadable';
+import { SystemMetricsExplorerPage } from './pages/SystemMetricsExplorerPage/Loadable';
 import { SettingsPage } from './pages/SettingsPage/Loadable';
 import { NotificationsPage } from './pages/NotificationsPage/Loadable';
 import { NodePage } from './pages/NodePage/Loadable';
@@ -153,6 +154,11 @@ export function App() {
                           key="overview"
                           element={<OverviewPage />}
                         />
+                        <Route
+                          path="overview/explore"
+                          key="overview-explore"
+                          element={<SystemMetricsExplorerPage />}
+                        />
                         <Route
                           path="workspace"
                           key="workspace"

package/src/app/pages/OverviewPage/index.jsx

@@ -7,6 +7,17 @@ import { DimensionNodeUsagePanel } from './DimensionNodeUsagePanel';
 export function OverviewPage() {
   return (
     <div className="mid">
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          padding: '0.5rem 1rem',
+        }}
+      >
+        <a href="/overview/explore" className="button-3 neutral-button">
+          Explore system metrics →
+        </a>
+      </div>
       <div className="chart-container">
         <OverviewPanel />
         <NodesByTypePanel />

package/src/app/pages/SystemMetricsExplorerPage/Loadable.jsx

@@ -0,0 +1,16 @@
+/**
+ * Asynchronously loads the component for the System Metrics Explorer page
+ */
+
+import * as React from 'react';
+import { lazyLoad } from '../../../utils/loadable';
+
+export const SystemMetricsExplorerPage = props => {
+  return lazyLoad(
+    () => import('./index'),
+    module => module.SystemMetricsExplorerPage,
+    {
+      fallback: <div></div>,
+    },
+  )(props);
+};