import React, {Component} from 'react'; import 'antd/dist/antd.css'; import { Layout, Menu, notification } from 'antd'; import {BrowserRouter as Router, Link, Route, Switch, Redirect} from "react-router-dom"; import { MenuUnfoldOutlined, MenuFoldOutlined, HistoryOutlined, SmileOutlined, SettingOutlined, ToolOutlined, FireFilled } from '@ant-design/icons'; import Release_home_page from "./components/release/release_home_page"; import Build_record_table from "./components/build_health/build_record_table"; import Daily_overview_table from "./components/build_health/daily_overview_table"; import Daily_overview_expand_home from "./components/build_health/daily_overview_expand_home"; import Whatsnew_carousel from "./components/whatsnew/whatsnew_carousel"; import Advisory_Overview_Home from "./components/release/advisory_overview/home"; import Build_history_home from "./components/build/build_history_home"; import Cookies from "js-cookie"; import Incident_home from "./components/incident/incident_home"; require('dotenv').config(); const {SubMenu} = Menu; export default class App extends Component{ state = { 'selected_tab': 'build', 'collapsed_sider': false } constructor(props) { super(props); this.toggle_side = this.toggle_side.bind(this); } toggle_side(){ this.setState({collapsed_sider: !this.state.collapsed_sider}); } openNotification = () => { notification.open({ message: 'New Updates!', description: 'There are new updates on the dashboard. Checkout updates in the help section under feature history.', icon: <SmileOutlined style={{color: "#108ee9"}}/> }); }; render() { const { Header, Footer, Sider, Content } = Layout; const release_number_whats_new_cookie = Cookies.get("release_number_whats_new_cookie"); const release_number_env = process.env.REACT_APP_RELEASE_NUMBER_WHATS_NEW; if(release_number_whats_new_cookie === undefined || release_number_whats_new_cookie !== release_number_env){ this.openNotification(); Cookies.set("release_number_whats_new_cookie", release_number_env); } return ( <Router> <div> <Layout> <Sider collapsed={this.state.collapsed_sider}> <div> <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}> <Menu.Item key="release_status_menu_item" icon={<HistoryOutlined />}> <Link to="/release/status/?type=all"> Release </Link> </Menu.Item> <SubMenu key="sub1" title={ <span> <SettingOutlined /> <span>Build</span> </span> } > <Menu.Item key="build_menu_item" icon={<HistoryOutlined />}> <Link to="/build/history"> History </Link> </Menu.Item> <Menu.Item key="build_health_item" icon={<SmileOutlined/>} > <Link to="/health/daily/overview"> Health </Link> </Menu.Item> </SubMenu> <Menu.Item key={"incidents"} icon={<FireFilled/>}> <Link to={"/incidents"}> Incidents </Link> </Menu.Item> <Menu.Item key={"whats_news"} icon={<ToolOutlined/>}> <Link to={"/help"}> Help </Link> </Menu.Item> </Menu> </div> </Sider> <Layout> <Header style={{background: "white", height: "120px", float: "left"}}> <div className="left"> {React.createElement(this.state.collapsed_sider ? MenuUnfoldOutlined : MenuFoldOutlined, { className: 'trigger', onClick: this.toggle_side, })} </div> <div className="center"> <h1 style={{color: "#316DC1", margin: "20px"}}>OpenShift Release Portal</h1> </div> </Header> <Content> <Switch> <Route component={Daily_overview_table} path="/health/daily/overview" exact/> <Route path="/build/history" exact component={Build_history_home} name="build_history"/> <Route path="/release/status/:branch" exact component={Release_home_page} name="release_status"/> <Route component={Daily_overview_expand_home} path="/health/daily/detail/:date" exact/> <Route path="/health/daily/build/:date" exact render={(props) => <Build_record_table {...props}/>} name="daily_build_by_date"/> <Route path="/help" exact component={Whatsnew_carousel}/> <Route path="/release/advisory/overview/:advisoryid" exact component={Advisory_Overview_Home} name="advisory_overview_home"/> <Route path="/incidents" exact component={Incident_home}/> <Redirect exact from="" to={"/release/status/"+process.env.REACT_APP_OPENSHIFT_VERSION_RELEASE_HOME_PAGE}/> </Switch> </Content> <Footer style={{ textAlign: 'center' }}> RedHat ©2020 </Footer> </Layout> </Layout> </div> </Router> ); } }