github.com/thanos-io/thanos@v0.32.5/pkg/ui/react-app/src/App.tsx (about)

     1  import React, { FC } from 'react';
     2  import { Container } from 'reactstrap';
     3  import { Router, Redirect, globalHistory } from '@reach/router';
     4  import { QueryParamProvider } from 'use-query-params';
     5  import useMedia from 'use-media';
     6  
     7  import { Alerts, Config, Flags, Rules, ServiceDiscovery, Status, Targets, TSDBStatus, PanelList, NotFound } from './pages';
     8  import PathPrefixProps from './types/PathPrefixProps';
     9  import ThanosComponentProps from './thanos/types/ThanosComponentProps';
    10  import Navigation from './thanos/Navbar';
    11  import { Stores, ErrorBoundary, Blocks } from './thanos/pages';
    12  import { ThemeContext, themeName, themeSetting } from './contexts/ThemeContext';
    13  import { Theme, themeLocalStorageKey } from './Theme';
    14  import { useLocalStorage } from './hooks/useLocalStorage';
    15  
    16  const defaultRouteConfig: { [component: string]: string } = {
    17    query: '/graph',
    18    rule: '/alerts',
    19    bucket: '/blocks',
    20    compact: '/loaded',
    21    store: '/loaded',
    22  };
    23  
    24  const App: FC<PathPrefixProps & ThanosComponentProps> = ({ pathPrefix, thanosComponent }) => {
    25    const [userTheme, setUserTheme] = useLocalStorage<themeSetting>(themeLocalStorageKey, 'auto');
    26    const browserHasThemes = useMedia('(prefers-color-scheme)');
    27    const browserWantsDarkTheme = useMedia('(prefers-color-scheme: dark)');
    28  
    29    let theme: themeName;
    30    if (userTheme !== 'auto') {
    31      theme = userTheme;
    32    } else {
    33      theme = browserHasThemes ? (browserWantsDarkTheme ? 'dark' : 'light') : 'light';
    34    }
    35  
    36    return (
    37      <ThemeContext.Provider
    38        value={{ theme: theme, userPreference: userTheme, setTheme: (t: themeSetting) => setUserTheme(t) }}
    39      >
    40        <Theme />
    41        <ErrorBoundary>
    42          <Navigation
    43            pathPrefix={pathPrefix}
    44            thanosComponent={thanosComponent}
    45            defaultRoute={defaultRouteConfig[thanosComponent]}
    46          />
    47          <Container fluid style={{ paddingTop: 70 }}>
    48            <QueryParamProvider reachHistory={globalHistory}>
    49              <Router basepath={`${pathPrefix}`}>
    50                <Redirect from="/" to={`${pathPrefix}${defaultRouteConfig[thanosComponent]}`} />
    51  
    52                <PanelList path="/graph" pathPrefix={pathPrefix} />
    53                <Alerts path="/alerts" pathPrefix={pathPrefix} />
    54                <Config path="/config" pathPrefix={pathPrefix} />
    55                <Flags path="/flags" pathPrefix={pathPrefix} />
    56                <Rules path="/rules" pathPrefix={pathPrefix} />
    57                <ServiceDiscovery path="/service-discovery" pathPrefix={pathPrefix} />
    58                <Status path="/status" pathPrefix={pathPrefix} />
    59                <TSDBStatus path="/tsdb-status" pathPrefix={pathPrefix} />
    60                <Targets path="/targets" pathPrefix={pathPrefix} />
    61                <Stores path="/stores" pathPrefix={pathPrefix} />
    62                <Blocks path="/blocks" pathPrefix={pathPrefix} />
    63                <Blocks path="/loaded" pathPrefix={pathPrefix} view="loaded" />
    64                <NotFound pathPrefix={pathPrefix} default defaultRoute={defaultRouteConfig[thanosComponent]} />
    65              </Router>
    66            </QueryParamProvider>
    67          </Container>
    68        </ErrorBoundary>
    69      </ThemeContext.Provider>
    70    );
    71  };
    72  
    73  export default App;