src/app/tierSupport/selectedNodeDetails/SelectedNodeDetails.jsx

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
   6  * Copyright © 2017 Amdocs
   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  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  22  */
  23
  24 import {connect} from 'react-redux';
  25 import React, {Component} from 'react';
  26 import Table from 'react-bootstrap/lib/Table';
  27 import LaunchInContext from 'app/tierSupport/launchExternalResource/LaunchExternalResource.jsx';
  28 import i18n from 'utils/i18n/i18n';
  29 import {
  30   SELECTED_NODE_TITLE,
  31   NO_SELECTION,
  32   SELECTED_NODE_TABLE_COLUMN_NAMES
  33 } from 'app/tierSupport/selectedNodeDetails/SelectedNodeDetailsConstants.js';
  34
  35 let mapStateToProps = ({tierSupport: {selectedNodeDetails}}) => {
  36   let {nodeData = {}, nodeType = '', uid = ''} = selectedNodeDetails;
  37
  38   return {
  39     nodeData,
  40     nodeType,
  41     uid
  42   };
  43 };
  44
  45 class SelectedNodeDetails extends Component {
  46   static propTypes = {
  47     nodeData: React.PropTypes.object,
  48     nodeType: React.PropTypes.string,
  49     uid: React.PropTypes.string
  50   };
  51
  52   render() {
  53     const {nodeData, nodeType, uid} = this.props;
  54
  55     let tableClass = 'ts-selected-node-table';
  56     let noSelectionMessageClass = 'hidden';
  57     let tableColumns = [];
  58     let tableRows = [];
  59
  60     if (Object.keys(nodeData).length > 0) {
  61       let cellClassName = '';
  62       for (let i = 1; i <= SELECTED_NODE_TABLE_COLUMN_NAMES.length; i++) {
  63         cellClassName = (i % 2 ? 'left-column-cell' : 'right-column-cell');
  64         tableColumns.push(<th className={cellClassName} key={i}>
  65           {i18n(SELECTED_NODE_TABLE_COLUMN_NAMES[i - 1])}
  66         </th>);
  67       }
  68
  69       for (var key in nodeData) {
  70         let value = nodeData[key];
  71         tableRows.push(
  72           <tr key={key}>
  73             <td className='left-column-cell'>{key}</td>
  74             <td className='right-column-cell'>{value}</td>
  75           </tr>
  76         );
  77       }
  78     } else {
  79       tableClass = 'hidden';
  80       noSelectionMessageClass = '';
  81     }
  82
  83     return (
  84       <div className='ts-selected-node-details'>
  85         <h1>{i18n(SELECTED_NODE_TITLE)}</h1>
  86         <h2>{nodeType}</h2>
  87         <span>{uid} <LaunchInContext /></span>
  88         <Table bsClass={tableClass}>
  89           <thead>
  90           <tr>
  91             {tableColumns}
  92           </tr>
  93           </thead>
  94           <tbody>
  95           {tableRows}
  96           </tbody>
  97         </Table>
  98         <p className={noSelectionMessageClass}>{i18n(NO_SELECTION)}</p>
  99       </div>
 100     );
 101   }
 102 }
 103 export default connect(mapStateToProps)(SelectedNodeDetails);