ui-react/src/components/loop_viewer/status/LoopStatus.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 styled from 'styled-components';
  26 import LoopCache from '../../../api/LoopCache';
  27
  28 const LoopStatusViewDivStyled = styled.div`
  29         background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
  30         padding: 10px 10px;
  31         color: ${props => props.theme.loopViewerHeaderFontColor};
  32 `
  33
  34 const TableStyled = styled(Table)`
  35     overflow: auto;
  36 `
  37
  38 const TableRow = ({ statusRow }) => (
  39         <tr>
  40                 <td>{statusRow.componentName}</td>
  41                 <td>{statusRow.stateName}</td>
  42                 <td>{statusRow.description}</td>
  43         </tr>
  44
  45 )
  46
  47 export default class LoopStatus extends React.Component {
  48         state = {
  49                 loopCache: new LoopCache({}),
  50         }
  51
  52         constructor(props) {
  53                 super(props);
  54                 this.renderStatus = this.renderStatus.bind(this);
  55                 this.state.loopCache = props.loopCache;
  56         }
  57
  58
  59         renderStatus() {
  60                 if (this.state.loopCache.getComponentStates() != null) {
  61                         return Object.keys(this.state.loopCache.getComponentStates()).map((key) => {
  62                                 console.debug("Adding status for: ",key);
  63                                 var res={}
  64                                 res[key]=this.state.loopCache.getComponentStates()[key];
  65                                 return (<TableRow statusRow={{'componentName':key,'stateName':this.state.loopCache.getComponentStates()[key].componentState.stateName,'description':this.state.loopCache.getComponentStates()[key].componentState.description}} />)
  66                         })
  67
  68                 }
  69         }
  70
  71         shouldComponentUpdate(nextProps, nextState) {
  72                 return this.state.loopCache !== nextState.loopCache;
  73         }
  74
  75         componentWillReceiveProps(newProps) {
  76                 this.setState({
  77                         loopCache: newProps.loopCache,
  78                 });
  79         }
  80
  81         render() {
  82                 return (
  83                         <LoopStatusViewDivStyled>
  84                                 <label>Loop Status: {this.state.loopCache.getComputedState()}
  85                                 </label>
  86
  87                                 <div >
  88                                         <TableStyled striped hover variant responsive>
  89                                                 <thead>
  90                                                         <tr>
  91                                                                 <th><span align="left">Component Name</span></th>
  92                                                                 <th><span align="left">Component State</span></th>
  93                                                                 <th><span align="right">Description</span></th>
  94                                                         </tr>
  95                                                 </thead>
  96                                                 <tbody>
  97                                                         {this.renderStatus()}
  98                                                 </tbody>
  99                                         </TableStyled>
 100                                 </div>
 101                         </LoopStatusViewDivStyled>
 102                 );
 103         }
 104 }
 105