d7d983d6fea772e156eef2ffc3dd1cf71ea76e84
[clamp.git] / ui-react / src / components / loop_viewer / logs / LoopLogs.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 import React from 'react';
24 import Table from 'react-bootstrap/Table';
25 import LoopCache from '../../../api/LoopCache';
26 import styled from 'styled-components';
27
28 const TableRow = ({ logRow }) => (
29         <tr>
30                 <td>{logRow.logInstant}</td>
31                 <td>{logRow.logType}</td>
32                 <td>{logRow.logComponent}</td>
33                 <td>{logRow.message}</td>
34         </tr>
35
36 )
37
38 const LoopLogsHeaderDivStyled = styled.div`
39         background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
40         padding: 10px 10px;
41         color: ${props => props.theme.loopViewerHeaderFontColor};
42         overflow: auto;
43 `
44
45 export default class LoopLogs extends React.Component {
46
47         state = {
48                 loopCache: new LoopCache({}),
49         }
50         constructor(props) {
51                 super(props);
52                 this.renderLogs = this.renderLogs.bind(this);
53                 this.state.loopCache=props.loopCache;
54         }
55
56         shouldComponentUpdate(nextProps, nextState) {
57                 return this.state.loopCache !== nextState.loopCache;
58         }
59
60         componentWillReceiveProps(newProps) {
61                 this.setState({
62                         loopCache: newProps.loopCache,
63                 });
64         }
65
66         renderLogs() {
67                 if (this.state.loopCache.getLoopLogsArray() != null) {
68                 return (
69                         this.state.loopCache.getLoopLogsArray().map(row => <TableRow logRow={row} />)
70                 )
71         } 
72         }
73
74         render() {
75                 return (
76                         <LoopLogsHeaderDivStyled>
77                                 <label>Loop Logs</label>
78                                 <Table striped hover bordeless variant responsive>
79                                         <thead>
80                                                 <tr>
81                                                         <th><span align="left">Date</span></th>
82                                                         <th><span align="left">Type</span></th>
83                                                         <th><span align="left">Component</span></th>
84                                                         <th><span align="right">Log</span></th>
85                                                 </tr>
86                                         </thead>
87                                         <tbody>
88                                                 {this.renderLogs()}
89                                         </tbody>
90                                 </Table>
91                         </LoopLogsHeaderDivStyled>
92
93                 );
94         }
95 }