Rework the logs

Provide data to logs viewer and rework the look and feel

Issue-ID: CLAMP-428
Change-Id: I7445c491faa7a061da4a959b4ca7646c7c14a88d
Signed-off-by: sebdet <sebastien.determe@intl.att.com>

diff --git a/.gitignore b/.gitignore
index b6d49c7..fbdcf4a 100644 (file)
--- a/.gitignore
+++ b/.gitignore
@@ -8,7 +8,6 @@ target
 ui-react/node_modules
 ui-react/build
 **/package-lock.json
-**/logs/
 **/.evosuite/
 **/debug-logs/
 *.log

diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index dd4923e..1f79d39 100644 (file)
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -147,7 +147,7 @@ export default class LoopUI extends React.Component {
                return (
                        <LoopViewBodyDivStyled>
                                <LoopSvg loopCache={this.state.loopCache} />
-                               <LoopLogs />
+                               <LoopLogs loopCache={this.state.loopCache} />
                                <LoopStatus />
                        </LoopViewBodyDivStyled>
                );

diff --git a/ui-react/src/components/loop_viewer/logs/LoopLogs.js b/ui-react/src/components/loop_viewer/logs/LoopLogs.js
new file mode 100644 (file)
index 0000000..d7d983d
--- /dev/null
+++ b/ui-react/src/components/loop_viewer/logs/LoopLogs.js
@@ -0,0 +1,95 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights
+ *                             reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END============================================
+ * ===================================================================
+ *
+ */
+import React from 'react';
+import Table from 'react-bootstrap/Table';
+import LoopCache from '../../../api/LoopCache';
+import styled from 'styled-components';
+
+const TableRow = ({ logRow }) => (
+       <tr>
+               <td>{logRow.logInstant}</td>
+               <td>{logRow.logType}</td>
+               <td>{logRow.logComponent}</td>
+               <td>{logRow.message}</td>
+       </tr>
+
+)
+
+const LoopLogsHeaderDivStyled = styled.div`
+       background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
+       padding: 10px 10px;
+       color: ${props => props.theme.loopViewerHeaderFontColor};
+       overflow: auto;
+`
+
+export default class LoopLogs extends React.Component {
+
+       state = {
+               loopCache: new LoopCache({}),
+       }
+       constructor(props) {
+               super(props);
+               this.renderLogs = this.renderLogs.bind(this);
+               this.state.loopCache=props.loopCache;
+       }
+
+       shouldComponentUpdate(nextProps, nextState) {
+               return this.state.loopCache !== nextState.loopCache;
+       }
+
+       componentWillReceiveProps(newProps) {
+               this.setState({
+                       loopCache: newProps.loopCache,
+               });
+       }
+
+       renderLogs() {
+               if (this.state.loopCache.getLoopLogsArray() != null) {
+               return (
+                       this.state.loopCache.getLoopLogsArray().map(row => <TableRow logRow={row} />)
+               )
+       } 
+       }
+
+       render() {
+               return (
+                       <LoopLogsHeaderDivStyled>
+                               <label>Loop Logs</label>
+                               <Table striped hover bordeless variant responsive>
+                                       <thead>
+                                               <tr>
+                                                       <th><span align="left">Date</span></th>
+                                                       <th><span align="left">Type</span></th>
+                                                       <th><span align="left">Component</span></th>
+                                                       <th><span align="right">Log</span></th>
+                                               </tr>
+                                       </thead>
+                                       <tbody>
+                                               {this.renderLogs()}
+                                       </tbody>
+                               </Table>
+                       </LoopLogsHeaderDivStyled>
+
+               );
+       }
+}