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 }