From 687a962bd19be4d39c9a4ba38d7167e5cd6c0942 Mon Sep 17 00:00:00 2001
From: Drumil Patel <42701709+drumilpatel2000@users.noreply.github.com>
Date: Sat, 8 Feb 2020 15:30:48 +0530
Subject: [PATCH] Add conditional rendering of Navlink for Consoles (#6761)

* Add conditional rendering of Navlink for Consoles

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>

* Replacing if else with only if conditional rendering

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>

* Add tests and removing global declaration in Navbar

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>

* Correct Navbar Testcases and add types for ConsolesLink

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>

* Change names for Console link as per-naming convention

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>

* Change prop names to AppProps and NavbarProps respectively

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>
---
 web/ui/react-app/public/index.html   | 11 ++++++++--
 web/ui/react-app/src/App.tsx         |  8 ++++++--
 web/ui/react-app/src/Navbar.test.tsx | 30 ++++++++++++++++++++++++++++
 web/ui/react-app/src/Navbar.tsx      | 11 +++++++++-
 web/ui/react-app/src/index.tsx       | 19 ++++++++++++++----
 web/web.go                           |  1 +
 6 files changed, 71 insertions(+), 9 deletions(-)
 create mode 100644 web/ui/react-app/src/Navbar.test.tsx

diff --git a/web/ui/react-app/public/index.html b/web/ui/react-app/public/index.html
index 2e118e50d..e5943537b 100755
--- a/web/ui/react-app/public/index.html
+++ b/web/ui/react-app/public/index.html
@@ -10,11 +10,18 @@
     <meta name="theme-color" content="#000000" />
 
     <!--
-      This constant's placeholder magic value is replaced during serving by Prometheus
+      The GLOBAL_PATH_PREFIX placeholder magic value is replaced during serving by Prometheus
       and set to Prometheus's external URL path. It gets prepended to all links back
       to Prometheus, both for asset loading as well as API accesses.
+
+      The GLOBAL_CONSOLES_LINK placeholder magic value is replaced during serving by Prometheus
+      and set to the consoles link if it exists. It will render a "Consoles" link in the navbar when 
+      it is non-empty. 
     -->
-    <script>const PATH_PREFIX='PATH_PREFIX_PLACEHOLDER';</script>
+    <script>
+      const GLOBAL_PATH_PREFIX='PATH_PREFIX_PLACEHOLDER';
+      const GLOBAL_CONSOLES_LINK='CONSOLES_LINK_PLACEHOLDER';
+    </script>
 
     <!--
       manifest.json provides metadata used when your web app is added to the
diff --git a/web/ui/react-app/src/App.tsx b/web/ui/react-app/src/App.tsx
index 68b3ce485..d172773e0 100755
--- a/web/ui/react-app/src/App.tsx
+++ b/web/ui/react-app/src/App.tsx
@@ -7,10 +7,14 @@ import { Router, Redirect } from '@reach/router';
 import { Alerts, Config, Flags, Rules, ServiceDiscovery, Status, Targets, TSDBStatus, PanelList } from './pages';
 import PathPrefixProps from './types/PathPrefixProps';
 
-const App: FC<PathPrefixProps> = ({ pathPrefix }) => {
+interface AppProps {
+  consolesLink: string | null;
+}
+
+const App: FC<PathPrefixProps & AppProps> = ({ pathPrefix, consolesLink }) => {
   return (
     <>
-      <Navigation pathPrefix={pathPrefix} />
+      <Navigation pathPrefix={pathPrefix} consolesLink={consolesLink} />
       <Container fluid style={{ paddingTop: 70 }}>
         <Router basepath={`${pathPrefix}/new`}>
           <Redirect from="/" to={`${pathPrefix}/new/graph`} />
diff --git a/web/ui/react-app/src/Navbar.test.tsx b/web/ui/react-app/src/Navbar.test.tsx
new file mode 100644
index 000000000..08fc72c34
--- /dev/null
+++ b/web/ui/react-app/src/Navbar.test.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import Navigation from './Navbar';
+import { NavItem, NavLink } from 'reactstrap';
+
+describe('Navbar should contain console Link', () => {
+  it('with non-empty consoleslink', () => {
+    const app = shallow(<Navigation pathPrefix="/path/prefix" consolesLink="/path/consoles" />);
+    expect(
+      app.contains(
+        <NavItem>
+          <NavLink href="/path/consoles">Consoles</NavLink>
+        </NavItem>
+      )
+    ).toBeTruthy();
+  });
+});
+
+describe('Navbar should not contain consoles link', () => {
+  it('with empty string in consolesLink', () => {
+    const app = shallow(<Navigation pathPrefix="/path/prefix" consolesLink="" />);
+    expect(
+      app.contains(
+        <NavItem>
+          <NavLink>Consoles</NavLink>
+        </NavItem>
+      )
+    ).toBeFalsy();
+  });
+});
diff --git a/web/ui/react-app/src/Navbar.tsx b/web/ui/react-app/src/Navbar.tsx
index 690901bd3..031b58fdf 100644
--- a/web/ui/react-app/src/Navbar.tsx
+++ b/web/ui/react-app/src/Navbar.tsx
@@ -14,7 +14,11 @@ import {
 } from 'reactstrap';
 import PathPrefixProps from './types/PathPrefixProps';
 
-const Navigation: FC<PathPrefixProps> = ({ pathPrefix }) => {
+interface NavbarProps {
+  consolesLink: string | null;
+}
+
+const Navigation: FC<PathPrefixProps & NavbarProps> = ({ pathPrefix, consolesLink }) => {
   const [isOpen, setIsOpen] = useState(false);
   const toggle = () => setIsOpen(!isOpen);
   return (
@@ -25,6 +29,11 @@ const Navigation: FC<PathPrefixProps> = ({ pathPrefix }) => {
       </Link>
       <Collapse isOpen={isOpen} navbar style={{ justifyContent: 'space-between' }}>
         <Nav className="ml-0" navbar>
+          {consolesLink !== '' && (
+            <NavItem>
+              <NavLink href={`${consolesLink}`}>Consoles</NavLink>
+            </NavItem>
+          )}
           <NavItem>
             <NavLink tag={Link} to={`${pathPrefix}/new/alerts`}>
               Alerts
diff --git a/web/ui/react-app/src/index.tsx b/web/ui/react-app/src/index.tsx
index 3d4e94ef7..557069907 100755
--- a/web/ui/react-app/src/index.tsx
+++ b/web/ui/react-app/src/index.tsx
@@ -3,12 +3,15 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import { isPresent } from './utils';
 
 // Declared/defined in public/index.html, value replaced by Prometheus when serving bundle.
-declare const PATH_PREFIX: string;
+declare const GLOBAL_PATH_PREFIX: string;
+declare const GLOBAL_CONSOLES_LINK: string;
 
-let prefix = PATH_PREFIX;
-if (PATH_PREFIX === 'PATH_PREFIX_PLACEHOLDER' || PATH_PREFIX === '/') {
+let prefix = GLOBAL_PATH_PREFIX;
+let consolesLink = GLOBAL_CONSOLES_LINK;
+if (GLOBAL_PATH_PREFIX === 'PATH_PREFIX_PLACEHOLDER' || GLOBAL_PATH_PREFIX === '/' || !isPresent(GLOBAL_PATH_PREFIX)) {
   // Either we are running the app outside of Prometheus, so the placeholder value in
   // the index.html didn't get replaced, or we have a '/' prefix, which we also need to
   // normalize to '' to make concatenations work (prefixes like '/foo/bar/' already get
@@ -16,4 +19,12 @@ if (PATH_PREFIX === 'PATH_PREFIX_PLACEHOLDER' || PATH_PREFIX === '/') {
   prefix = '';
 }
 
-ReactDOM.render(<App pathPrefix={prefix} />, document.getElementById('root'));
+if (
+  GLOBAL_CONSOLES_LINK === 'CONSOLES_LINK_PLACEHOLDER' ||
+  GLOBAL_CONSOLES_LINK === '' ||
+  !isPresent(GLOBAL_CONSOLES_LINK)
+) {
+  consolesLink = '';
+}
+
+ReactDOM.render(<App pathPrefix={prefix} consolesLink={consolesLink} />, document.getElementById('root'));
diff --git a/web/web.go b/web/web.go
index 358d7e29d..284728ce6 100644
--- a/web/web.go
+++ b/web/web.go
@@ -382,6 +382,7 @@ func New(logger log.Logger, o *Options) *Handler {
 				return
 			}
 			prefixedIdx := bytes.ReplaceAll(idx, []byte("PATH_PREFIX_PLACEHOLDER"), []byte(o.ExternalURL.Path))
+			prefixedIdx = bytes.ReplaceAll(prefixedIdx, []byte("CONSOLES_LINK_PLACEHOLDER"), []byte(h.consolesPath()))
 			w.Write(prefixedIdx)
 			return
 		}