blob: 7de6ad01b014e497730a401264f6498be58003e3 [file] [log] [blame]
sebdetc8d61302019-07-04 15:50:34 +02001/*-
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
24import React from 'react';
25import styled from 'styled-components';
26import MenuBar from '../menu/MenuBar';
27import Navbar from 'react-bootstrap/Navbar';
28import logo from './logo.png';
29import { GlobalClampStyle } from '../../theme/globalStyle.js';
30
31import ClosedLoopSvg from '../loop_viewer/svg/ClosedLoopSvg';
32import ClosedLoopLogs from '../loop_viewer/logs/ClosedLoopLogs';
33import ClosedLoopStatus from '../loop_viewer/status/ClosedLoopStatus';
34
35const ProjectNameStyle = styled.a`
36 vertical-align: middle;
37 padding-left: 30px;
38 font-size: 30px;
39
40`
41const 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
53const LoopViewHeaderDivStyle = styled.div`
54 background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
55 padding: 10px 10px;
56 color: ${props => props.theme.loopViewerHeaderFontColor};
57`
58
59const 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
66const LoopViewLoopNameSpanStyle = styled.span`
67 font-weight: bold;
68 color: ${props => (props.theme.loopViewerHeaderFontColor)};
69 background-color: ${props => (props.theme.loopViewerHeaderBackgroundColor)};
70`
71
72export default class LoopUI extends React.Component {
xuegao7c7323d2019-07-09 11:52:20 +020073
sebdetc8d61302019-07-04 15:50:34 +020074 loopName="Empty (NO loop loaded yet)";
75
76 renderMenuNavBar() {
77 return (
78 <MenuBar />
79 );
80 }
81
82 renderUserLoggedNavBar() {
83 return (
84 <Navbar.Text>
xuegao7c7323d2019-07-09 11:52:20 +020085 Signed in as: <a href="login">{localStorage.getItem('user')}</a>
sebdetc8d61302019-07-04 15:50:34 +020086 </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}