ui-react/src/components/menu/MenuBar.js

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * ONAP CLAMP
   4  * ================================================================================
   5  * Copyright (C) 2019 AT&T Intellectual Property. All rights
   6  *                             reserved.
   7  * ================================================================================
   8  * Licensed under the Apache License, Version 2.0 (the "License");
   9  * you may not use this file except in compliance with the License.
  10  * You may obtain a copy of the License at
  11  *
  12  * http://www.apache.org/licenses/LICENSE-2.0
  13  *
  14  * Unless required by applicable law or agreed to in writing, software
  15  * distributed under the License is distributed on an "AS IS" BASIS,
  16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17  * See the License for the specific language governing permissions and
  18  * limitations under the License.
  19  * ============LICENSE_END============================================
  20  * ===================================================================
  21  *
  22  */
  23 import React from 'react';
  24 import Nav from 'react-bootstrap/Nav';
  25 import Navbar from 'react-bootstrap/Navbar';
  26 import NavDropdown from 'react-bootstrap/NavDropdown';
  27 import LoopUI from '../../LoopUI';
  28 import 'bootstrap-css-only/css/bootstrap.min.css';
  29 import styled from 'styled-components';
  30 import { Link } from 'react-router-dom'
  31
  32 const StyledLink = styled(Link)`
  33         color: ${props => props.theme.menuColor};
  34         background-color: ${props => props.theme.menuBackgroundColor};
  35         font-weight: normal;
  36         display: block;
  37         width: 100%;
  38         padding: .25rem 1.5rem;
  39         clear: both;
  40         text-align: inherit;
  41         white-space: nowrap;
  42         border: 0;
  43         :hover {
  44                         text-decoration: none;
  45                         background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
  46                         color:  ${props => props.theme.loopViewerHeaderFontColor};
  47         }
  48 `;
  49 const StyledNavLink = styled(Nav.Link)`
  50         color: ${props => props.theme.menuColor};
  51         background-color: ${props => props.theme.menuBackgroundColor};
  52   font-weight: normal;
  53         padding: .25rem 1.5rem;
  54         :hover {
  55                         background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
  56                         color:  ${props => props.theme.loopViewerHeaderFontColor}
  57         }
  58 `;
  59 export default class MenuBar extends React.Component {
  60         state = {
  61                 loopName: this.props.loopName,
  62                 disabled: true
  63         };
  64
  65         componentWillReceiveProps(newProps) {
  66                 if (newProps.loopName !== LoopUI.defaultLoopName) {
  67                         this.setState({ disabled: false });
  68                 } else {
  69                         this.setState({ disabled: true });
  70                 }
  71         }
  72
  73         render () {
  74                 return (
  75                                 <Navbar.Collapse>
  76                                         <NavDropdown title="Closed Loop">
  77                                                         <NavDropdown.Item as={StyledLink} to="/openLoop">Open CL</NavDropdown.Item>
  78                                                         <NavDropdown.Item as={StyledLink} to="/loopProperties" disabled={this.state.disabled}>Properties CL</NavDropdown.Item>
  79                                                         <NavDropdown.Item as={StyledLink} to="/closeLoop" disabled={this.state.disabled}>Close Model</NavDropdown.Item>
  80                                         </NavDropdown>
  81                                         <NavDropdown title="Manage">
  82                                                         <NavDropdown.Item as={StyledLink} to="/submit" disabled={this.state.disabled}>Submit</NavDropdown.Item>
  83                                                         <NavDropdown.Item as={StyledLink} to="/stop" disabled={this.state.disabled}>Stop</NavDropdown.Item>
  84                                                         <NavDropdown.Item as={StyledLink} to="/restart" disabled={this.state.disabled}>Restart</NavDropdown.Item>
  85                                                         <NavDropdown.Item as={StyledLink} to="/delete" disabled={this.state.disabled}>Delete</NavDropdown.Item>
  86                                                         <NavDropdown.Item as={StyledLink} to="/deploy" disabled={this.state.disabled}>Deploy</NavDropdown.Item>
  87                                                         <NavDropdown.Item as={StyledLink} to="/undeploy" disabled={this.state.disabled}>UnDeploy</NavDropdown.Item>
  88                                         </NavDropdown>
  89                                         <NavDropdown title="View">
  90                                                         <NavDropdown.Item as={StyledLink} to="/refreshStatus" disabled={this.state.disabled}>Refresh Status</NavDropdown.Item>
  91                                         </NavDropdown>
  92                                         <NavDropdown title="Help">
  93                                                         <StyledNavLink href="https://wiki.onap.org/" target="_blank">Wiki</StyledNavLink>
  94                                                         <StyledNavLink href="mailto:onap-discuss@lists.onap.org?subject=CLAMP&body=Please send us suggestions or feature enhancements or defect. If possible, please send us the steps to replicate any defect.">Contact Us</StyledNavLink>
  95                                                         <NavDropdown.Item as={StyledLink} to="/userInfo">User Info</NavDropdown.Item>
  96                                         </NavDropdown>
  97                                 </Navbar.Collapse>
  98                 );
  99         }
 100 }