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         user = "testuser";
  75         loopName="Empty (NO loop loaded yet)";
  76
  77         renderMenuNavBar() {
  78                 return (
  79                         <MenuBar />
  80                 );
  81         }
  82
  83         renderUserLoggedNavBar() {
  84                 return (
  85                         <Navbar.Text>
  86                                 Signed in as: <a href="login">{this.user}</a>
  87                         </Navbar.Text>
  88                 );
  89         }
  90
  91         renderLogoNavBar() {
  92                 return (
  93                         <Navbar.Brand>
  94                                 <img height="50px" width="234px" src={logo} alt=""/>
  95                                 <ProjectNameStyle>CLAMP</ProjectNameStyle>
  96                         </Navbar.Brand>
  97                 );
  98         }
  99
 100         renderNavBar() {
 101                 return (
 102                 <Navbar expand="lg">
 103                         {this.renderLogoNavBar()}
 104                         {this.renderMenuNavBar()}
 105                         {this.renderUserLoggedNavBar()}
 106                 </Navbar>
 107         );
 108         }
 109
 110         renderLoopViewHeader() {
 111                 return (
 112                         <LoopViewHeaderDivStyle>
 113                                 Loop Viewer - <LoopViewLoopNameSpanStyle id="loop_name">{this.loopName}</LoopViewLoopNameSpanStyle>
 114                         </LoopViewHeaderDivStyle>
 115                 );
 116         }
 117
 118         renderLoopViewBody() {
 119                 return (
 120                         <LoopViewBodyDivStyle>
 121                                 <ClosedLoopSvg />
 122                                 <ClosedLoopLogs />
 123                                 <ClosedLoopStatus />
 124                         </LoopViewBodyDivStyle>
 125                 );
 126         }
 127
 128         renderLoopViewer() {
 129                 return (
 130                         <LoopViewDivStyle>
 131                                         {this.renderLoopViewHeader()}
 132                                         {this.renderLoopViewBody()}
 133                         </LoopViewDivStyle>
 134                         );
 135         }
 136
 137         render() {
 138                 return (
 139                                 <div>
 140                                         <GlobalClampStyle />
 141                                         {this.renderNavBar()}
 142                                         {this.renderLoopViewer()}
 143                                 </div>
 144                 );
 145         }
 146 }