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 'bootstrap-css-only/css/bootstrap.min.css';
  28 import styled from 'styled-components';
  29 import { Link } from 'react-router-dom'
  30
  31 const StyledLink = styled(Link)`
  32         color: ${props => props.theme.menuColor};
  33         background-color: ${props => props.theme.menuBackgroundColor};
  34         font-weight: normal;
  35         display: block;
  36         width: 100%;
  37         padding: .25rem 1.5rem;
  38         clear: both;
  39         text-align: inherit;
  40         white-space: nowrap;
  41         border: 0;
  42         :hover {
  43                         text-decoration: none;
  44                         background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
  45                         color:  ${props => props.theme.loopViewerHeaderFontColor};
  46         }
  47 `;
  48 const StyledNavLink = styled(Nav.Link)`
  49         color: ${props => props.theme.menuColor};
  50         background-color: ${props => props.theme.menuBackgroundColor};
  51   font-weight: normal;
  52         padding: .25rem 1.5rem;
  53         :hover {
  54                         background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
  55                         color:  ${props => props.theme.loopViewerHeaderFontColor}
  56         }
  57 `;
  58 export default class MenuBar extends React.Component {
  59
  60         render () {
  61                 return (
  62                                 <Navbar.Collapse>
  63                                         <NavDropdown title="Closed Loop">
  64                                                         <NavDropdown.Item as={StyledLink} to="/openLoop">Open CL</NavDropdown.Item>
  65                                                         <NavDropdown.Item as={StyledLink} to="/loopProperties">Properties CL</NavDropdown.Item>
  66                                                         <NavDropdown.Item as={StyledLink} to="/closeLoop">Close Model</NavDropdown.Item>
  67                                         </NavDropdown>
  68                                         <NavDropdown title="Manage">
  69                                                         <NavDropdown.Item as={StyledLink} to="/submit">Submit</NavDropdown.Item>
  70                                                         <NavDropdown.Item as={StyledLink} to="/stop">Stop</NavDropdown.Item>
  71                                                         <NavDropdown.Item as={StyledLink} to="/restart">Restart</NavDropdown.Item>
  72                                                         <NavDropdown.Item as={StyledLink} to="/delete">Delete</NavDropdown.Item>
  73                                                         <NavDropdown.Item as={StyledLink} to="/deploy">Deploy</NavDropdown.Item>
  74                                                         <NavDropdown.Item as={StyledLink} to="/undeploy">UnDeploy</NavDropdown.Item>
  75                                         </NavDropdown>
  76                                         <NavDropdown title="View">
  77                                                         <NavDropdown.Item as={StyledLink} to="/refreshStatus">Refresh Status</NavDropdown.Item>
  78                                         </NavDropdown>
  79                                         <NavDropdown title="Help">
  80                                                         <StyledNavLink href="https://wiki.onap.org/" target="_blank">Wiki</StyledNavLink>
  81                                                         <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>
  82                                                         <NavDropdown.Item as={StyledLink} to="/userInfo">User Info</NavDropdown.Item>
  83                                         </NavDropdown>
  84                                 </Navbar.Collapse>
  85                 );
  86         }
  87 }