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

@@ -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

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`} />

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();
+  });
+});

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

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;
+let prefix = GLOBAL_PATH_PREFIX;
-if (PATH_PREFIX === 'PATH_PREFIX_PLACEHOLDER' || 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'));

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
 		}