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