prometheus

1
import React, { FC, useState } from 'react';
2
import { Link } from 'react-router-dom';
3
import {
4
  Collapse,
5
  Navbar,
6
  NavbarToggler,
7
  Nav,
8
  NavItem,
9
  NavLink,
10
  UncontrolledDropdown,
11
  DropdownToggle,
12
  DropdownMenu,
13
  DropdownItem,
14
} from 'reactstrap';
15
import { ThemeToggle } from './Theme';
16
import { ReactComponent as PromLogo } from './images/prometheus_logo_grey.svg';
17

18
interface NavbarProps {
19
  consolesLink: string | null;
20
  agentMode: boolean;
21
  animateLogo?: boolean | false;
22
}
23

24
const Navigation: FC<NavbarProps> = ({ consolesLink, agentMode, animateLogo }) => {
25
  const [isOpen, setIsOpen] = useState(false);
26
  const toggle = () => setIsOpen(!isOpen);
27
  return (
28
    <Navbar className="mb-3" dark color="dark" expand="md" fixed="top">
29
      <NavbarToggler onClick={toggle} className="mr-2" />
30
      <Link className="pt-0 navbar-brand" to={agentMode ? '/agent' : '/graph'}>
31
        <PromLogo className={`d-inline-block align-top${animateLogo ? ' animate' : ''}`} title="Prometheus" />
32
        Prometheus{agentMode && ' Agent'}
33
      </Link>
34
      <Collapse isOpen={isOpen} navbar style={{ justifyContent: 'space-between' }}>
35
        <Nav className="ml-0" navbar>
36
          {consolesLink !== null && (
37
            <NavItem>
38
              <NavLink href={consolesLink}>Consoles</NavLink>
39
            </NavItem>
40
          )}
41
          {!agentMode && (
42
            <>
43
              <NavItem>
44
                <NavLink tag={Link} to="/alerts">
45
                  Alerts
46
                </NavLink>
47
              </NavItem>
48
              <NavItem>
49
                <NavLink tag={Link} to="/graph">
50
                  Graph
51
                </NavLink>
52
              </NavItem>
53
            </>
54
          )}
55
          <UncontrolledDropdown nav inNavbar>
56
            <DropdownToggle nav caret>
57
              Status
58
            </DropdownToggle>
59
            <DropdownMenu>
60
              <DropdownItem tag={Link} to="/status">
61
                Runtime & Build Information
62
              </DropdownItem>
63
              {!agentMode && (
64
                <DropdownItem tag={Link} to="/tsdb-status">
65
                  TSDB Status
66
                </DropdownItem>
67
              )}
68
              <DropdownItem tag={Link} to="/flags">
69
                Command-Line Flags
70
              </DropdownItem>
71
              <DropdownItem tag={Link} to="/config">
72
                Configuration
73
              </DropdownItem>
74
              {!agentMode && (
75
                <DropdownItem tag={Link} to="/rules">
76
                  Rules
77
                </DropdownItem>
78
              )}
79
              <DropdownItem tag={Link} to="/targets">
80
                Targets
81
              </DropdownItem>
82
              <DropdownItem tag={Link} to="/service-discovery">
83
                Service Discovery
84
              </DropdownItem>
85
            </DropdownMenu>
86
          </UncontrolledDropdown>
87
          <NavItem>
88
            <NavLink href="https://prometheus.io/docs/prometheus/latest/getting_started/">Help</NavLink>
89
          </NavItem>
90
        </Nav>
91
      </Collapse>
92
      <ThemeToggle />
93
    </Navbar>
94
  );
95
};
96

97
export default Navigation;
98