1import React, { FC, useState } from 'react';
2import { Link } from '@reach/router';
3import {
4  Collapse,
5  Navbar,
6  NavbarToggler,
7  Nav,
8  NavItem,
9  NavLink,
10  UncontrolledDropdown,
11  DropdownToggle,
12  DropdownMenu,
13  DropdownItem,
14} from 'reactstrap';
15import PathPrefixProps from './types/PathPrefixProps';
16
17interface NavbarProps {
18  consolesLink: string | null;
19}
20
21const Navigation: FC<PathPrefixProps & NavbarProps> = ({ pathPrefix, consolesLink }) => {
22  const [isOpen, setIsOpen] = useState(false);
23  const toggle = () => setIsOpen(!isOpen);
24  return (
25    <Navbar className="mb-3" dark color="dark" expand="md" fixed="top">
26      <NavbarToggler onClick={toggle} />
27      <Link className="pt-0 navbar-brand" to={`${pathPrefix}/graph`}>
28        Prometheus
29      </Link>
30      <Collapse isOpen={isOpen} navbar style={{ justifyContent: 'space-between' }}>
31        <Nav className="ml-0" navbar>
32          {consolesLink !== null && (
33            <NavItem>
34              <NavLink href={consolesLink}>Consoles</NavLink>
35            </NavItem>
36          )}
37          <NavItem>
38            <NavLink tag={Link} to={`${pathPrefix}/alerts`}>
39              Alerts
40            </NavLink>
41          </NavItem>
42          <NavItem>
43            <NavLink tag={Link} to={`${pathPrefix}/graph`}>
44              Graph
45            </NavLink>
46          </NavItem>
47          <UncontrolledDropdown nav inNavbar>
48            <DropdownToggle nav caret>
49              Status
50            </DropdownToggle>
51            <DropdownMenu>
52              <DropdownItem tag={Link} to={`${pathPrefix}/status`}>
53                Runtime & Build Information
54              </DropdownItem>
55              <DropdownItem tag={Link} to={`${pathPrefix}/tsdb-status`}>
56                TSDB Status
57              </DropdownItem>
58              <DropdownItem tag={Link} to={`${pathPrefix}/flags`}>
59                Command-Line Flags
60              </DropdownItem>
61              <DropdownItem tag={Link} to={`${pathPrefix}/config`}>
62                Configuration
63              </DropdownItem>
64              <DropdownItem tag={Link} to={`${pathPrefix}/rules`}>
65                Rules
66              </DropdownItem>
67              <DropdownItem tag={Link} to={`${pathPrefix}/targets`}>
68                Targets
69              </DropdownItem>
70              <DropdownItem tag={Link} to={`${pathPrefix}/service-discovery`}>
71                Service Discovery
72              </DropdownItem>
73            </DropdownMenu>
74          </UncontrolledDropdown>
75          <NavItem>
76            <NavLink href="https://prometheus.io/docs/prometheus/latest/getting_started/">Help</NavLink>
77          </NavItem>
78          <NavItem>
79            <NavLink href={`${pathPrefix}/classic/graph${window.location.search}`}>Classic UI</NavLink>
80          </NavItem>
81        </Nav>
82      </Collapse>
83    </Navbar>
84  );
85};
86
87export default Navigation;
88