Merge pull request #421 from bento-platform/feat/logs

feat: monitoring
bento-platform · Aug 14, 2024 · 32807f1 · 32807f1
2 parents 1ab8289 + 6cefde2
commit 32807f1
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 4 deletions.
diff --git a/src/components/App.js b/src/components/App.js
@@ -38,6 +38,7 @@ const DataExplorerContent = lazy(() => import("./DataExplorerContent"));
 const DataManagerContent = lazy(() => import("./DataManagerContent"));
 const ReferenceGenomesContent = lazy(() => import("./ReferenceGenomesContent"));
 const CBioPortalContent = lazy(() => import("./CBioPortalContent"));
+const GrafanaContent = lazy(() => import("./GrafanaContent"));
 const NotificationsContent = lazy(() => import("./notifications/NotificationsContent"));
 const ServiceContent = lazy(() => import("./ServiceContent"));
 const ServiceDetail = lazy(() => import("./services/ServiceDetail"));
@@ -191,9 +192,10 @@ const App = () => {
 
   const openSignInWindow = useOpenSignInWindowCallback(signInWindow, SIGN_IN_WINDOW_FEATURES);
 
-  // On the cBioPortal tab only, eliminate the margin around the content
-  // to give as much space as possible to the cBioPortal application itself.
-  const margin = window.location.pathname.endsWith("cbioportal") ? 0 : 26;
+  // On the cBioPortal and Grafana tabs, eliminate the margin around the content
+  // to give as much space as possible to the application itself.
+  const margin =
+    window.location.pathname.endsWith("cbioportal") || window.location.pathname.endsWith("grafana") ? 0 : 26;
 
   const threshold = useSelector((state) => state.explorer.otherThresholdPercentage) / 100;
 
@@ -259,6 +261,14 @@ const App = () => {
                   </RequireAuth>
                 }
               />
+              <Route
+                path="/grafana"
+                element={
+                  <RequireAuth>
+                    <GrafanaContent />
+                  </RequireAuth>
+                }
+              />
               <Route
                 path="/services/:kind/*"
                 element={

diff --git a/src/components/GrafanaContent.js b/src/components/GrafanaContent.js
@@ -0,0 +1,28 @@
+import { useEffect } from "react";
+
+import { SITE_NAME } from "../constants";
+import { BENTO_GRAFANA_URL } from "../config";
+
+const GrafanaContent = () => {
+  useEffect(() => {
+    document.title = `${SITE_NAME} - Grafana`;
+  }, []);
+
+  return (
+    <div style={{ flex: "1", display: "flex", flexDirection: "column" }}>
+      {BENTO_GRAFANA_URL && (
+        <iframe
+          src={BENTO_GRAFANA_URL}
+          style={{
+            width: "100%",
+            border: "none",
+            borderBottom: "2px solid #E6E6E6",
+            flex: "1",
+          }}
+        ></iframe>
+      )}
+    </div>
+  );
+};
+
+export default GrafanaContent;
diff --git a/src/components/SiteHeader.js b/src/components/SiteHeader.js
@@ -5,6 +5,7 @@ import { viewNotifications, useIsAuthenticated, usePerformSignOut, usePerformAut
 
 import { Badge, Layout, Menu, Spin } from "antd";
 import {
+  ApartmentOutlined,
   BarChartOutlined,
   BellOutlined,
   DashboardOutlined,
@@ -19,7 +20,7 @@ import {
   UserOutlined,
 } from "@ant-design/icons";
 
-import { BENTO_CBIOPORTAL_ENABLED, CUSTOM_HEADER } from "@/config";
+import { BENTO_CBIOPORTAL_ENABLED, BENTO_MONITORING_ENABLED, CUSTOM_HEADER } from "@/config";
 import { useEverythingPermissions } from "@/hooks";
 import { showNotificationDrawer } from "@/modules/notifications/actions";
 import { useNotifications } from "@/modules/notifications/hooks";
@@ -147,6 +148,16 @@ const SiteHeader = () => {
             },
           ]
         : []),
+      ...(BENTO_MONITORING_ENABLED && isAuthenticated
+        ? [
+            {
+              url: "/grafana",
+              icon: <ApartmentOutlined />,
+              text: "Grafana",
+              key: "grafana",
+            },
+          ]
+        : []),
       {
         style: { marginLeft: "auto" },
         icon: <SettingOutlined />,

diff --git a/src/config.js b/src/config.js
@@ -12,6 +12,11 @@ export const BENTO_CBIOPORTAL_PUBLIC_URL =
   BENTO_WEB_CONFIG.BENTO_CBIOPORTAL_PUBLIC_URL ?? process.env.BENTO_CBIOPORTAL_PUBLIC_URL ?? null;
 export const CUSTOM_HEADER = BENTO_WEB_CONFIG.CUSTOM_HEADER ?? process.env.CUSTOM_HEADER ?? null;
 
+export const BENTO_GRAFANA_URL = `${BENTO_URL_NO_TRAILING_SLASH}/api/grafana`;
+export const BENTO_MONITORING_ENABLED =
+  BENTO_WEB_CONFIG.BENTO_MONITORING_ENABLED ||
+  ["true", "1", "yes"].includes(process.env.BENTO_MONITORING_ENABLED || "");
+
 /** @type {string} */
 export const CLIENT_ID = BENTO_WEB_CONFIG.CLIENT_ID ?? process.env.CLIENT_ID ?? "";
 

diff --git a/static/config.js b/static/config.js
@@ -5,6 +5,7 @@ BENTO_WEB_CONFIG = {
     BENTO_PUBLIC_URL: null,
     BENTO_CBIOPORTAL_ENABLED: false,
     BENTO_CBIOPORTAL_PUBLIC_URL: null,
+    BENTO_MONITORING_ENABLED: false,
     BENTO_DROP_BOX_FS_BASE_PATH: null,
     CUSTOM_HEADER: null,
 };
diff --git a/webpack.config.js b/webpack.config.js
@@ -70,6 +70,7 @@ module.exports = {
             BENTO_URL: null,
             BENTO_PUBLIC_URL: null,
             BENTO_CBIOPORTAL_ENABLED: false,
+            BENTO_MONITORING_ENABLED: false,
             BENTO_CBIOPORTAL_PUBLIC_URL: null,
             BENTO_DROP_BOX_FS_BASE_PATH: null,
             CUSTOM_HEADER: null,