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

     1  import React, { FC, useState } from 'react';
     2  import { Link } from '@reach/router';
     3  import {
     4    Collapse,
     5    Navbar,
     6    NavbarToggler,
     7    Nav,
     8    NavItem,
     9    NavLink,
    10    UncontrolledDropdown,
    11    DropdownItem,
    12    DropdownMenu,
    13    DropdownToggle,
    14  } from 'reactstrap';
    15  import PathPrefixProps from '../types/PathPrefixProps';
    16  import { ThemeToggle } from '../Theme';
    17  import logo from './images/icon-dark.png';
    18  
    19  interface NavConfig {
    20    name: string;
    21    uri: string;
    22  }
    23  
    24  interface NavDropDown {
    25    name: string;
    26    children: NavConfig[];
    27  }
    28  
    29  const navConfig: { [component: string]: (NavConfig | NavDropDown)[] } = {
    30    query: [
    31      { name: 'Graph', uri: '/graph' },
    32      { name: 'Stores', uri: '/stores' },
    33      {
    34        name: 'Status',
    35        children: [
    36          { name: 'Runtime & Build Information', uri: '/status' },
    37          { name: 'Command-Line Flags', uri: '/flags' },
    38          { name: 'Alerts', uri: '/alerts' },
    39          { name: 'Targets', uri: '/targets' },
    40          { name: 'Rules', uri: '/rules' },
    41        ],
    42      },
    43    ],
    44    rule: [
    45      { name: 'Alerts', uri: '/alerts' },
    46      { name: 'Rules', uri: '/rules' },
    47      {
    48        name: 'Status',
    49        children: [
    50          { name: 'Runtime & Build Information', uri: '/status' },
    51          { name: 'Command-Line Flags', uri: '/flags' },
    52        ],
    53      },
    54    ],
    55    bucket: [
    56      { name: 'Blocks', uri: '/blocks' },
    57      {
    58        name: 'Status',
    59        children: [
    60          { name: 'Runtime & Build Information', uri: '/status' },
    61          { name: 'Command-Line Flags', uri: '/flags' },
    62        ],
    63      },
    64    ],
    65    compact: [
    66      { name: 'Global Blocks', uri: '/blocks' },
    67      { name: 'Loaded Blocks', uri: '/loaded' },
    68      {
    69        name: 'Status',
    70        children: [
    71          { name: 'Runtime & Build Information', uri: '/status' },
    72          { name: 'Command-Line Flags', uri: '/flags' },
    73        ],
    74      },
    75    ],
    76    store: [
    77      { name: 'Loaded Blocks', uri: '/loaded' },
    78      {
    79        name: 'Status',
    80        children: [
    81          { name: 'Runtime & Build Information', uri: '/status' },
    82          { name: 'Command-Line Flags', uri: '/flags' },
    83        ],
    84      },
    85    ],
    86  };
    87  
    88  interface NavigationProps {
    89    thanosComponent: string;
    90    defaultRoute: string;
    91  }
    92  
    93  const Navigation: FC<PathPrefixProps & NavigationProps> = ({ pathPrefix, thanosComponent, defaultRoute }) => {
    94    const [isOpen, setIsOpen] = useState(false);
    95    const toggle = () => setIsOpen(!isOpen);
    96    return (
    97      <Navbar className="mb-3" dark color="dark" expand="md" fixed="top">
    98        <NavbarToggler onClick={toggle} className="mr-2" />
    99        <Link className="navbar-brand" to={`${pathPrefix}${defaultRoute}`}>
   100          <img src={logo} alt="thanos" style={{ width: '2rem', marginRight: '0.5rem' }} />
   101          Thanos - {thanosComponent[0].toUpperCase()}
   102          {thanosComponent.substr(1, thanosComponent.length)}
   103        </Link>
   104        <Collapse isOpen={isOpen} navbar style={{ justifyContent: 'space-between' }}>
   105          <Nav className="ml-0" navbar>
   106            {navConfig[thanosComponent].map((config) => {
   107              if ('uri' in config)
   108                return (
   109                  <NavItem key={config.uri}>
   110                    <NavLink tag={Link} to={`${pathPrefix}${config.uri}`}>
   111                      {config.name}
   112                    </NavLink>
   113                  </NavItem>
   114                );
   115  
   116              return (
   117                <UncontrolledDropdown key={config.name} nav inNavbar>
   118                  <DropdownToggle nav caret>
   119                    {config.name}
   120                  </DropdownToggle>
   121                  <DropdownMenu>
   122                    {config.children.map((c) => (
   123                      <DropdownItem key={c.uri} tag={Link} to={`${pathPrefix}${c.uri}`}>
   124                        {c.name}
   125                      </DropdownItem>
   126                    ))}
   127                  </DropdownMenu>
   128                </UncontrolledDropdown>
   129              );
   130            })}
   131            <NavItem>
   132              <NavLink href="https://thanos.io/tip/thanos/getting-started.md/">Help</NavLink>
   133            </NavItem>
   134          </Nav>
   135        </Collapse>
   136        <ThemeToggle />
   137      </Navbar>
   138    );
   139  };
   140  
   141  export default Navigation;