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 OnapConstants from '../../utils/OnapConstants';
  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.menuFontColor};
  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.menuHighlightedBackgroundColor};
  46                 color:  ${props => props.theme.menuHighlightedFontColor};
  47         }
  48 `;
  49 const StyledNavLink = styled(Nav.Link)`
  50         color: ${props => props.theme.menuFontColor};
  51         background-color: ${props => props.theme.menuBackgroundColor};
  52         font-weight: normal;
  53         padding: .25rem 1.5rem;
  54         :hover {
  55                 background-color: ${props => props.theme.menuHighlightedBackgroundColor};
  56                 color:  ${props => props.theme.menuHighlightedFontColor};
  57         }
  58 `;
  59
  60 const StyledNavDropdown = styled(NavDropdown)`
  61         color: ${props => props.theme.menuFontColor};
  62         & .dropdown-toggle {
  63         color: ${props => props.theme.menuFontColor};
  64         background-color: ${props => props.theme.backgroundColor};
  65         font-weight: normal;
  66                 :hover {
  67                                 font-weight: bold;
  68                 }
  69         }
  70 `;
  71
  72 export default class MenuBar extends React.Component {
  73         state = {
  74                 loopName: this.props.loopName,
  75                 disabled: true
  76         };
  77
  78         componentWillReceiveProps(newProps) {
  79                 if (newProps.loopName !== OnapConstants.defaultLoopName) {
  80                         this.setState({ disabled: false });
  81                 } else {
  82                         this.setState({ disabled: true });
  83                 }
  84         }
  85
  86         render () {
  87                 return (
  88
  89                                 <Navbar.Collapse>
  90                                         <StyledNavDropdown title="Loop Templates">
  91                                                         <NavDropdown.Item as={StyledLink} to="/ViewLoopTemplatesModal">View All Templates</NavDropdown.Item>
  92                                         </StyledNavDropdown>
  93                                         <StyledNavDropdown title="Policy Models">
  94                             <NavDropdown.Item as={StyledLink} to="/uploadToscaPolicyModal">Upload Tosca Model</NavDropdown.Item>
  95                                 <NavDropdown.Item as={StyledLink} to="/viewToscaPolicyModal">View Tosca Models</NavDropdown.Item>
  96                     </StyledNavDropdown>
  97                                         <StyledNavDropdown title="Loop Instance">
  98                                                         <NavDropdown.Item as={StyledLink} to="/openLoop">Open Loop</NavDropdown.Item>
  99                                                         <NavDropdown.Item as={StyledLink} to="/loopProperties" disabled={this.state.disabled}>Properties</NavDropdown.Item>
 100                                                         <NavDropdown.Item as={StyledLink} to="/closeLoop" disabled={this.state.disabled}>Close</NavDropdown.Item>
 101                                                         <NavDropdown.Item as={StyledLink} to="/modifyLoop" >Modify</NavDropdown.Item>
 102                                                         <NavDropdown.Item as={StyledLink} to="/refreshStatus" disabled={this.state.disabled}>Refresh Status</NavDropdown.Item>
 103                                         </StyledNavDropdown>
 104                                         <StyledNavDropdown title="Loop Operations">
 105                                                         <NavDropdown.Item as={StyledLink} to="/submit" disabled={this.state.disabled}>Create and deploy to Policy Engine(SUBMIT)</NavDropdown.Item>
 106                                                         <NavDropdown.Item as={StyledLink} to="/stop" disabled={this.state.disabled}>Undeploy from Policy Engine (STOP)</NavDropdown.Item>
 107                                                         <NavDropdown.Item as={StyledLink} to="/restart" disabled={this.state.disabled}>ReDeploy to Policy Engine (RESTART)</NavDropdown.Item>
 108                                                         <NavDropdown.Item as={StyledLink} to="/delete" disabled={this.state.disabled}>Delete loop instance (DELETE)</NavDropdown.Item>
 109                                                         <NavDropdown.Item as={StyledLink} to="/deploy" disabled={this.state.disabled}>Deploy to DCAE (DEPLOY)</NavDropdown.Item>
 110                                                         <NavDropdown.Item as={StyledLink} to="/undeploy" disabled={this.state.disabled}>UnDeploy to DCAE (UNDEPLOY)</NavDropdown.Item>
 111                                         </StyledNavDropdown>
 112                                         <StyledNavDropdown title="Help">
 113                                                         <StyledNavLink href="https://wiki.onap.org/" target="_blank">Wiki</StyledNavLink>
 114                                                         <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>
 115                                                         <NavDropdown.Item as={StyledLink} to="/userInfo">User Info</NavDropdown.Item>
 116                                         </StyledNavDropdown>
 117                                 </Navbar.Collapse>
 118                 );
 119         }
 120 }