src/app/tierSupport/selectedNodeDetails/SelectedNodeDetails.jsx

   1 /*
   2  * ============LICENSE_START===================================================
   3  * SPARKY (AAI UI service)
   4  * ============================================================================
   5  * Copyright © 2017 AT&T Intellectual Property.
   6  * Copyright © 2017 Amdocs
   7  * All rights reserved.
   8  * ============================================================================
   9  * Licensed under the Apache License, Version 2.0 (the "License");
  10  * you may not use this file except in compliance with the License.
  11  * You may obtain a copy of the License at
  12  *
  13  *      http://www.apache.org/licenses/LICENSE-2.0
  14  *
  15  * Unless required by applicable law or agreed to in writing, software
  16  * distributed under the License is distributed on an "AS IS" BASIS,
  17  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18  * See the License for the specific language governing permissions and
  19  * limitations under the License.
  20  * ============LICENSE_END=====================================================
  21  *
  22  * ECOMP and OpenECOMP are trademarks
  23  * and service marks of AT&T Intellectual Property.
  24  */
  25
  26 import {connect} from 'react-redux';
  27 import React, {Component} from 'react';
  28 import Table from 'react-bootstrap/lib/Table';
  29 import i18n from 'utils/i18n/i18n';
  30 import {
  31   SELECTED_NODE_TITLE,
  32   NO_SELECTION,
  33   SELECTED_NODE_TABLE_COLUMN_NAMES
  34 } from 'app/tierSupport/selectedNodeDetails/SelectedNodeDetailsConstants.js';
  35
  36 let mapStateToProps = ({tierSupport: {selectedNodeDetails}}) => {
  37   let {nodeData = [], nodeType = '', uid = ''} = selectedNodeDetails;
  38
  39   return {
  40     nodeData,
  41     nodeType,
  42     uid
  43   };
  44 };
  45
  46 class SelectedNodeDetails extends Component {
  47   static propTypes = {
  48     nodeData: React.PropTypes.array,
  49     nodeType: React.PropTypes.string,
  50     uid: React.PropTypes.string
  51   };
  52
  53   render() {
  54     const {nodeData, nodeType, uid} = this.props;
  55
  56     let tableClass = 'ts-selected-node-table';
  57     let noSelectionMessageClass = 'hidden';
  58     let tableColumns = [];
  59     let tableRows = [];
  60
  61     if (Object.keys(nodeData).length > 0) {
  62       let cellClassName = '';
  63       for (let i = 1; i <= SELECTED_NODE_TABLE_COLUMN_NAMES.length; i++) {
  64         cellClassName = (i % 2 ? 'left-column-cell' : 'right-column-cell');
  65         tableColumns.push(<th className={cellClassName} key={i}>
  66           {i18n(SELECTED_NODE_TABLE_COLUMN_NAMES[i - 1])}
  67         </th>);
  68       }
  69
  70       for (var key in nodeData) {
  71         let value = nodeData[key];
  72         tableRows.push(
  73           <tr key={key}>
  74             <td className='left-column-cell'>{key}</td>
  75             <td className='right-column-cell'>{value}</td>
  76           </tr>
  77         );
  78       }
  79     } else {
  80       tableClass = 'hidden';
  81       noSelectionMessageClass = '';
  82     }
  83
  84     return (
  85       <div className='ts-selected-node-details'>
  86         <h1>{i18n(SELECTED_NODE_TITLE)}</h1>
  87         <h2>{nodeType}</h2>
  88         <span>{uid}</span>
  89         <Table bsClass={tableClass}>
  90           <thead>
  91           <tr>
  92             {tableColumns}
  93           </tr>
  94           </thead>
  95           <tbody>
  96           {tableRows}
  97           </tbody>
  98         </Table>
  99         <p className={noSelectionMessageClass}>{i18n(NO_SELECTION)}</p>
 100       </div>
 101     );
 102   }
 103 }
 104 export default connect(mapStateToProps)(SelectedNodeDetails);