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/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index dd4923e..1f79d39 100644
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -147,7 +147,7 @@
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
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>
+
+ );
+ }
+}