import React from 'react'; import logo from 'assets/svg/logo.svg'; import { Navbar, Nav, Badge } from 'react-bootstrap'; import axios from 'axios'; import './Navbar.scss'; export class NavbarComponent extends React.Component { constructor(props){ super(props); this.state = { alertCount: null }; this.alertCountInterval = this.alertCountInterval.bind(this); } componentDidMount() { this.alertCountInterval(); setInterval(this.alertCountInterval, 30000); } alertCountInterval() { axios.get(process.env.REACT_APP_BACKEND_HOST + '/v1/alerts') .then((response) => { this.setState({ alertCount: response.data.length }); }) .catch((err) => { console.log(err); }); } render() { return ( <Navbar bg="dark" variant="dark" expand="lg"> <Navbar.Brand href="/"> <img src={logo} className="navbar-logo" alt="logo" /> OpenRCA </Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Collapse id="basic-navbar-nav"> <Nav className="mr-auto"> <Nav.Link href="/graph">Graph</Nav.Link> <Nav.Link href="/alerts"> Alerts <Badge className="alertBadge" variant="danger" pill>{this.state.alertCount ? this.state.alertCount : null}</Badge> </Nav.Link> </Nav> </Navbar.Collapse> </Navbar> ); } }