prometheus

1
import { FC } from 'react';
2
import { Container } from 'reactstrap';
3
import Navigation from './Navbar';
4

5
import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
6
import { PathPrefixContext } from './contexts/PathPrefixContext';
7
import { ThemeContext, themeName, themeSetting } from './contexts/ThemeContext';
8
import { ReadyContext } from './contexts/ReadyContext';
9
import { AnimateLogoContext } from './contexts/AnimateLogoContext';
10
import { useLocalStorage } from './hooks/useLocalStorage';
11
import useMedia from './hooks/useMedia';
12
import {
13
  AgentPage,
14
  AlertsPage,
15
  ConfigPage,
16
  FlagsPage,
17
  PanelListPage,
18
  RulesPage,
19
  ServiceDiscoveryPage,
20
  StatusPage,
21
  TargetsPage,
22
  TSDBStatusPage,
23
} from './pages';
24
import { Theme, themeLocalStorageKey } from './Theme';
25

26
interface AppProps {
27
  consolesLink: string | null;
28
  agentMode: boolean;
29
  ready: boolean;
30
}
31

32
const App: FC<AppProps> = ({ consolesLink, agentMode, ready }) => {
33
  // This dynamically/generically determines the pathPrefix by stripping the first known
34
  // endpoint suffix from the window location path. It works out of the box for both direct
35
  // hosting and reverse proxy deployments with no additional configurations required.
36
  let basePath = window.location.pathname;
37
  const paths = [
38
    '/agent',
39
    '/graph',
40
    '/alerts',
41
    '/status',
42
    '/tsdb-status',
43
    '/flags',
44
    '/config',
45
    '/rules',
46
    '/targets',
47
    '/service-discovery',
48
  ];
49
  if (basePath.endsWith('/')) {
50
    basePath = basePath.slice(0, -1);
51
  }
52
  if (basePath.length > 1) {
53
    for (let i = 0; i < paths.length; i++) {
54
      if (basePath.endsWith(paths[i])) {
55
        basePath = basePath.slice(0, basePath.length - paths[i].length);
56
        break;
57
      }
58
    }
59
  }
60

61
  const [userTheme, setUserTheme] = useLocalStorage<themeSetting>(themeLocalStorageKey, 'auto');
62
  const browserHasThemes = useMedia('(prefers-color-scheme)');
63
  const browserWantsDarkTheme = useMedia('(prefers-color-scheme: dark)');
64
  const [animateLogo, setAnimateLogo] = useLocalStorage<boolean>('animateLogo', false);
65

66
  let theme: themeName;
67
  if (userTheme !== 'auto') {
68
    theme = userTheme;
69
  } else {
70
    theme = browserHasThemes ? (browserWantsDarkTheme ? 'dark' : 'light') : 'light';
71
  }
72

73
  return (
74
    <ThemeContext.Provider
75
      value={{ theme: theme, userPreference: userTheme, setTheme: (t: themeSetting) => setUserTheme(t) }}
76
    >
77
      <Theme />
78
      <PathPrefixContext.Provider value={basePath}>
79
        <ReadyContext.Provider value={ready}>
80
          <Router basename={basePath}>
81
            <AnimateLogoContext.Provider value={animateLogo}>
82
              <Navigation consolesLink={consolesLink} agentMode={agentMode} animateLogo={animateLogo} />
83
              <Container fluid style={{ paddingTop: 70 }}>
84
                <Switch>
85
                  <Redirect exact from="/" to={agentMode ? '/agent' : '/graph'} />
86
                  {/*
87
              NOTE: Any route added here needs to also be added to the list of
88
              React-handled router paths ("reactRouterPaths") in /web/web.go.
89
            */}
90
                  <Route path="/agent">
91
                    <AgentPage />
92
                  </Route>
93
                  <Route path="/graph">
94
                    <PanelListPage />
95
                  </Route>
96
                  <Route path="/alerts">
97
                    <AlertsPage />
98
                  </Route>
99
                  <Route path="/config">
100
                    <ConfigPage />
101
                  </Route>
102
                  <Route path="/flags">
103
                    <FlagsPage />
104
                  </Route>
105
                  <Route path="/rules">
106
                    <RulesPage />
107
                  </Route>
108
                  <Route path="/service-discovery">
109
                    <ServiceDiscoveryPage />
110
                  </Route>
111
                  <Route path="/status">
112
                    <StatusPage agentMode={agentMode} setAnimateLogo={setAnimateLogo} />
113
                  </Route>
114
                  <Route path="/tsdb-status">
115
                    <TSDBStatusPage />
116
                  </Route>
117
                  <Route path="/targets">
118
                    <TargetsPage />
119
                  </Route>
120
                </Switch>
121
              </Container>
122
            </AnimateLogoContext.Provider>
123
          </Router>
124
        </ReadyContext.Provider>
125
      </PathPrefixContext.Provider>
126
    </ThemeContext.Provider>
127
  );
128
};
129

130
export default App;
131