ui-react/src/components/app/LoopUI.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
  24 import React from 'react';
  25 import styled from 'styled-components';
  26 import MenuBar from '../menu/MenuBar';
  27 import Navbar from 'react-bootstrap/Navbar';
  28 import logo from './logo.png';
  29 import { GlobalClampStyle } from '../../theme/globalStyle.js';
  30
  31 import ClosedLoopSvg from '../loop_viewer/svg/ClosedLoopSvg';
  32 import ClosedLoopLogs from '../loop_viewer/logs/ClosedLoopLogs';
  33 import ClosedLoopStatus from '../loop_viewer/status/ClosedLoopStatus';
  34
  35 const ProjectNameStyle = styled.a`
  36         vertical-align: middle;
  37         padding-left: 30px;
  38         font-size: 30px;
  39
  40 `
  41 const LoopViewDivStyle = styled.div`
  42         height: 90vh;
  43         overflow: hidden;
  44         margin-left: 10px;
  45         margin-right: 10px;
  46         margin-bottom: 10px;
  47         color: ${props => props.theme.loopViewerFontColor};
  48         background-color: ${props => props.theme.loopViewerBackgroundColor};
  49         border: 1px solid transparent;
  50         border-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
  51 `
  52
  53 const LoopViewHeaderDivStyle = styled.div`
  54         background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
  55         padding: 10px 10px;
  56         color: ${props => props.theme.loopViewerHeaderFontColor};
  57 `
  58
  59 const LoopViewBodyDivStyle = styled.div`
  60         background-color: ${props => (props.theme.loopViewerBackgroundColor)};
  61         padding: 10px 10px;
  62         color: ${props => (props.theme.loopViewerHeaderFontColor)};
  63         height: 95%;
  64 `
  65
  66 const LoopViewLoopNameSpanStyle = styled.span`
  67         font-weight: bold;
  68         color: ${props => (props.theme.loopViewerHeaderFontColor)};
  69         background-color: ${props => (props.theme.loopViewerHeaderBackgroundColor)};
  70 `
  71
  72 export default class LoopUI extends React.Component {
  73
  74         loopName="Empty (NO loop loaded yet)";
  75
  76         renderMenuNavBar() {
  77                 return (
  78                         <MenuBar />
  79                 );
  80         }
  81
  82         renderUserLoggedNavBar() {
  83                 return (
  84                         <Navbar.Text>
  85                                 Signed in as: <a href="login">{localStorage.getItem('user')}</a>
  86                         </Navbar.Text>
  87                 );
  88         }
  89
  90         renderLogoNavBar() {
  91                 return (
  92                         <Navbar.Brand>
  93                                 <img height="50px" width="234px" src={logo} alt=""/>
  94                                 <ProjectNameStyle>CLAMP</ProjectNameStyle>
  95                         </Navbar.Brand>
  96                 );
  97         }
  98
  99         renderNavBar() {
 100                 return (
 101                 <Navbar expand="lg">
 102                         {this.renderLogoNavBar()}
 103                         {this.renderMenuNavBar()}
 104                         {this.renderUserLoggedNavBar()}
 105                 </Navbar>
 106         );
 107         }
 108
 109         renderLoopViewHeader() {
 110                 return (
 111                         <LoopViewHeaderDivStyle>
 112                                 Loop Viewer - <LoopViewLoopNameSpanStyle id="loop_name">{this.loopName}</LoopViewLoopNameSpanStyle>
 113                         </LoopViewHeaderDivStyle>
 114                 );
 115         }
 116
 117         renderLoopViewBody() {
 118                 return (
 119                         <LoopViewBodyDivStyle>
 120                                 <ClosedLoopSvg />
 121                                 <ClosedLoopLogs />
 122                                 <ClosedLoopStatus />
 123                         </LoopViewBodyDivStyle>
 124                 );
 125         }
 126
 127         renderLoopViewer() {
 128                 return (
 129                         <LoopViewDivStyle>
 130                                         {this.renderLoopViewHeader()}
 131                                         {this.renderLoopViewBody()}
 132                         </LoopViewDivStyle>
 133                         );
 134         }
 135
 136         render() {
 137                 return (
 138                                 <div>
 139                                         <GlobalClampStyle />
 140                                         {this.renderNavBar()}
 141                                         {this.renderLoopViewer()}
 142                                 </div>
 143                 );
 144         }
 145 }