From 3b4cbf8da4c5b9b8c6c2a0a30ae182dfbb0b8213 Mon Sep 17 00:00:00 2001
From: Levi Harrison <git@leviharrison.dev>
Date: Sun, 8 Jan 2023 18:04:00 -0500
Subject: [PATCH] Inject readiness state through context (#11617)

Signed-off-by: Levi Harrison <git@leviharrison.dev>

Signed-off-by: Levi Harrison <git@leviharrison.dev>
---
 web/ui/react-app/public/index.html            |  4 +
 web/ui/react-app/src/App.test.tsx             |  2 +-
 web/ui/react-app/src/App.tsx                  | 84 ++++++++++---------
 .../src/components/withStartingIndicator.tsx  |  4 +-
 .../react-app/src/contexts/ReadyContext.tsx   |  9 ++
 web/ui/react-app/src/index.tsx                |  7 +-
 web/web.go                                    |  1 +
 7 files changed, 68 insertions(+), 43 deletions(-)
 create mode 100644 web/ui/react-app/src/contexts/ReadyContext.tsx

diff --git a/web/ui/react-app/public/index.html b/web/ui/react-app/public/index.html
index a3f7b7a850..57131a26b6 100755
--- a/web/ui/react-app/public/index.html
+++ b/web/ui/react-app/public/index.html
@@ -16,10 +16,14 @@
       - PROMETHEUS_AGENT_MODE is replaced by a boolean indicating if Prometheus is running in agent mode.
         It true, it will disable querying capacities in the UI and generally adapt the UI to the agent mode.
         It has to be represented as a string, because booleans can be mangled to !1 in production builds.
+      - PROMETHEUS_READY is replaced by a boolean indicating whether Prometheus was ready at the time the
+        web app was served. It has to be represented as a string, because booleans can be mangled to !1 in
+        production builds.
     -->
     <script>
       const GLOBAL_CONSOLES_LINK='CONSOLES_LINK_PLACEHOLDER';
       const GLOBAL_AGENT_MODE='AGENT_MODE_PLACEHOLDER';
+      const GLOBAL_READY='READY_PLACEHOLDER';
     </script>
 
     <!--
diff --git a/web/ui/react-app/src/App.test.tsx b/web/ui/react-app/src/App.test.tsx
index 6bc11b4dcd..62f685c921 100755
--- a/web/ui/react-app/src/App.test.tsx
+++ b/web/ui/react-app/src/App.test.tsx
@@ -18,7 +18,7 @@ import {
 } from './pages';
 
 describe('App', () => {
-  const app = shallow(<App consolesLink={null} agentMode={false} />);
+  const app = shallow(<App consolesLink={null} agentMode={false} ready={false} />);
 
   it('navigates', () => {
     expect(app.find(Navigation)).toHaveLength(1);
diff --git a/web/ui/react-app/src/App.tsx b/web/ui/react-app/src/App.tsx
index dcf5f98f17..30b07f2613 100755
--- a/web/ui/react-app/src/App.tsx
+++ b/web/ui/react-app/src/App.tsx
@@ -5,6 +5,7 @@ import Navigation from './Navbar';
 import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
 import { PathPrefixContext } from './contexts/PathPrefixContext';
 import { ThemeContext, themeName, themeSetting } from './contexts/ThemeContext';
+import { ReadyContext } from './contexts/ReadyContext';
 import { useLocalStorage } from './hooks/useLocalStorage';
 import useMedia from './hooks/useMedia';
 import {
@@ -24,9 +25,10 @@ import { Theme, themeLocalStorageKey } from './Theme';
 interface AppProps {
   consolesLink: string | null;
   agentMode: boolean;
+  ready: boolean;
 }
 
-const App: FC<AppProps> = ({ consolesLink, agentMode }) => {
+const App: FC<AppProps> = ({ consolesLink, agentMode, ready }) => {
   // This dynamically/generically determines the pathPrefix by stripping the first known
   // endpoint suffix from the window location path. It works out of the box for both direct
   // hosting and reverse proxy deployments with no additional configurations required.
@@ -72,48 +74,50 @@ const App: FC<AppProps> = ({ consolesLink, agentMode }) => {
     >
       <Theme />
       <PathPrefixContext.Provider value={basePath}>
-        <Router basename={basePath}>
-          <Navigation consolesLink={consolesLink} agentMode={agentMode} />
-          <Container fluid style={{ paddingTop: 70 }}>
-            <Switch>
-              <Redirect exact from="/" to={agentMode ? '/agent' : '/graph'} />
-              {/*
+        <ReadyContext.Provider value={ready}>
+          <Router basename={basePath}>
+            <Navigation consolesLink={consolesLink} agentMode={agentMode} />
+            <Container fluid style={{ paddingTop: 70 }}>
+              <Switch>
+                <Redirect exact from="/" to={agentMode ? '/agent' : '/graph'} />
+                {/*
               NOTE: Any route added here needs to also be added to the list of
               React-handled router paths ("reactRouterPaths") in /web/web.go.
             */}
-              <Route path="/agent">
-                <AgentPage />
-              </Route>
-              <Route path="/graph">
-                <PanelListPage />
-              </Route>
-              <Route path="/alerts">
-                <AlertsPage />
-              </Route>
-              <Route path="/config">
-                <ConfigPage />
-              </Route>
-              <Route path="/flags">
-                <FlagsPage />
-              </Route>
-              <Route path="/rules">
-                <RulesPage />
-              </Route>
-              <Route path="/service-discovery">
-                <ServiceDiscoveryPage />
-              </Route>
-              <Route path="/status">
-                <StatusPage agentMode={agentMode} />
-              </Route>
-              <Route path="/tsdb-status">
-                <TSDBStatusPage />
-              </Route>
-              <Route path="/targets">
-                <TargetsPage />
-              </Route>
-            </Switch>
-          </Container>
-        </Router>
+                <Route path="/agent">
+                  <AgentPage />
+                </Route>
+                <Route path="/graph">
+                  <PanelListPage />
+                </Route>
+                <Route path="/alerts">
+                  <AlertsPage />
+                </Route>
+                <Route path="/config">
+                  <ConfigPage />
+                </Route>
+                <Route path="/flags">
+                  <FlagsPage />
+                </Route>
+                <Route path="/rules">
+                  <RulesPage />
+                </Route>
+                <Route path="/service-discovery">
+                  <ServiceDiscoveryPage />
+                </Route>
+                <Route path="/status">
+                  <StatusPage agentMode={agentMode} />
+                </Route>
+                <Route path="/tsdb-status">
+                  <TSDBStatusPage />
+                </Route>
+                <Route path="/targets">
+                  <TargetsPage />
+                </Route>
+              </Switch>
+            </Container>
+          </Router>
+        </ReadyContext.Provider>
       </PathPrefixContext.Provider>
     </ThemeContext.Provider>
   );
diff --git a/web/ui/react-app/src/components/withStartingIndicator.tsx b/web/ui/react-app/src/components/withStartingIndicator.tsx
index 0f29d8b1ee..eb2724ed13 100644
--- a/web/ui/react-app/src/components/withStartingIndicator.tsx
+++ b/web/ui/react-app/src/components/withStartingIndicator.tsx
@@ -4,6 +4,7 @@ import { Progress, Alert } from 'reactstrap';
 import { useFetchReadyInterval } from '../hooks/useFetch';
 import { WALReplayData } from '../types/types';
 import { usePathPrefix } from '../contexts/PathPrefixContext';
+import { useReady } from '../contexts/ReadyContext';
 
 interface StartingContentProps {
   isUnexpected: boolean;
@@ -48,8 +49,9 @@ export const withStartingIndicator =
   ({ ...rest }) => {
     const pathPrefix = usePathPrefix();
     const { ready, walReplayStatus, isUnexpected } = useFetchReadyInterval(pathPrefix);
+    const staticReady = useReady();
 
-    if (ready || isUnexpected) {
+    if (staticReady || ready || isUnexpected) {
       return <Page {...(rest as T)} />;
     }
 
diff --git a/web/ui/react-app/src/contexts/ReadyContext.tsx b/web/ui/react-app/src/contexts/ReadyContext.tsx
new file mode 100644
index 0000000000..f3a95cfb8a
--- /dev/null
+++ b/web/ui/react-app/src/contexts/ReadyContext.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const ReadyContext = React.createContext(false);
+
+function useReady(): boolean {
+  return React.useContext(ReadyContext);
+}
+
+export { useReady, ReadyContext };
diff --git a/web/ui/react-app/src/index.tsx b/web/ui/react-app/src/index.tsx
index a798d1b623..61a9ae083c 100755
--- a/web/ui/react-app/src/index.tsx
+++ b/web/ui/react-app/src/index.tsx
@@ -11,9 +11,11 @@ import { isPresent } from './utils';
 // Declared/defined in public/index.html, value replaced by Prometheus when serving bundle.
 declare const GLOBAL_CONSOLES_LINK: string;
 declare const GLOBAL_AGENT_MODE: string;
+declare const GLOBAL_READY: string;
 
 let consolesLink: string | null = GLOBAL_CONSOLES_LINK;
 const agentMode: string | null = GLOBAL_AGENT_MODE;
+const ready: string | null = GLOBAL_READY;
 
 if (
   GLOBAL_CONSOLES_LINK === 'CONSOLES_LINK_PLACEHOLDER' ||
@@ -23,4 +25,7 @@ if (
   consolesLink = null;
 }
 
-ReactDOM.render(<App consolesLink={consolesLink} agentMode={agentMode === 'true'} />, document.getElementById('root'));
+ReactDOM.render(
+  <App consolesLink={consolesLink} agentMode={agentMode === 'true'} ready={ready === 'true'} />,
+  document.getElementById('root')
+);
diff --git a/web/web.go b/web/web.go
index ba7c2d2895..9d63094f69 100644
--- a/web/web.go
+++ b/web/web.go
@@ -401,6 +401,7 @@ func New(logger log.Logger, o *Options) *Handler {
 		replacedIdx := bytes.ReplaceAll(idx, []byte("CONSOLES_LINK_PLACEHOLDER"), []byte(h.consolesPath()))
 		replacedIdx = bytes.ReplaceAll(replacedIdx, []byte("TITLE_PLACEHOLDER"), []byte(h.options.PageTitle))
 		replacedIdx = bytes.ReplaceAll(replacedIdx, []byte("AGENT_MODE_PLACEHOLDER"), []byte(strconv.FormatBool(h.options.IsAgent)))
+		replacedIdx = bytes.ReplaceAll(replacedIdx, []byte("READY_PLACEHOLDER"), []byte(strconv.FormatBool(h.isReady())))
 		w.Write(replacedIdx)
 	}