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