skyquake/plugins/launchpad/src/recordViewer/placementGroupsInfo.jsx

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19 import React from 'react';
  20 export default class PlacementGroupsInfo extends React.Component {
  21   constructor(props) {
  22     super(props);
  23     this.state = {};
  24     this.state.dict = {};
  25     this.state.displayedGroup = null;
  26   }
  27   componentWillReceiveProps(props) {
  28     this.setState({
  29       nsr: props.nsr,
  30       dict: buildPlacementGroupDictFromVDUR(props.nsr),
  31       // dict: buildPlacementGroupDict(props.nsr),
  32     });
  33   }
  34   showDisplayGroup = (context, ref, type) => {
  35     // ref = 'Orcus';
  36     context.setState({
  37       displayedGroup: this.state.dict[ref]
  38     })
  39   }
  40   render(){
  41     let html;
  42     let vdurs = <VduPlacement nsr={this.props.nsr} showDisplayGroup={this.showDisplayGroup.bind(null, this)}/>;
  43     let details = <PlacementGroupDetails displayedGroup={this.state.displayedGroup} />;
  44     return <div className="placementGroups">{vdurs}{details}</div>;
  45   }
  46 }
  47 PlacementGroupsInfo.defaultProps = {
  48   nsr: {}
  49 }
  50
  51
  52 class VduPlacement extends React.Component {
  53   render() {
  54     let html;
  55     let {showDisplayGroup, nsr, ...props} = this.props;
  56     html = (
  57       <div className="panel panel-5">
  58         <h3 className="sectionHeader">
  59           VDU Placement
  60         </h3>
  61         <div className="vdupTable">
  62           <div className="vdup-title">
  63             <h4>Record</h4>
  64             <h4>Placement Group</h4>
  65           </div>
  66           <dl className="nsrType">
  67             <dt>
  68               <div>NSR: {nsr.name}</div>
  69             </dt>
  70             <dd></dd>
  71           </dl>
  72           {
  73             flattenPlacementGroupsToHTML(nsr, showDisplayGroup)
  74           }
  75         </div>
  76       </div>
  77     );
  78     return html;
  79   }
  80 }
  81 function flattenPlacementGroupsToHTML(nsr, onClick) {
  82   let data = [];
  83   nsr.vnfrs && nsr.vnfrs.map(function(v, i) {
  84     let html;
  85     html = (
  86       <dl className="vnfrType" key={'vnfr-' + i}>
  87         <dt>
  88           <div>VNFR: {v['short-name']}</div>
  89         </dt>
  90         <dd></dd>
  91       </dl>
  92     )
  93     data.push(html);
  94     v && v.vdur && v.vdur.map(function(vd, j) {
  95       let html;
  96       html = (
  97         <dl className="vduType" key={'vdur-' + i + '-'+ j}>
  98           <dt>
  99             <div>VDUR: {vd['name']}</div>
 100           </dt>
 101           <dd>
 102             <ul>
 103               {
 104                 vd['placement-groups-info'].map(function(p, k) {
 105                   return <li onClick={onClick.bind(null, p.name)} key={'pg-' + i + '-' + j + '-' + k}>{p.name}</li>
 106                 })
 107               }
 108             </ul>
 109           </dd>
 110         </dl>
 111       );
 112       data.push(html);
 113     });
 114   });
 115   return data;
 116 }
 117 class PlacementGroupDetails extends React.Component {
 118   render() {
 119     let html;
 120     let {displayedGroup, ...props} = this.props;
 121     let dg = displayedGroup;
 122     let dgHTML = '';
 123     if(dg) {
 124       dgHTML = (
 125         <dl className="placementGroupDetails">
 126             <dt>Name</dt>
 127             <dd>{dg.name}</dd>
 128             <dt>Requirement</dt>
 129             <dd>{dg.requirement}</dd>
 130             <dt>Strategy</dt>
 131             <dd>{dg.strategy}</dd>
 132             <dt>Cloud Provider</dt>
 133             <dd>{dg['cloud-type']}</dd>
 134             {
 135               (dg['availability-zone'] != undefined) ?
 136                 <dt>Availability Zone</dt> : ''
 137             }
 138             {
 139               (dg['availability-zone'] != undefined) ?
 140                 <dd>{dg['availability-zone']}</dd> : ''
 141             }
 142             {
 143               (dg['server-group'] != undefined) ?
 144                 <dt>Affinity/Anti-Affinity Server Group</dt> : ''
 145             }
 146             {
 147               (dg['server-group'] != undefined) ?
 148                  <dd>{dg['server-group']}</dd> : ''
 149             }
 150             {
 151               (dg['host-aggregate'] != undefined) ?
 152                 <dt>Host Aggregates</dt> : ''
 153             }
 154             {
 155               dg['host-aggregate'] != undefined ?
 156                 <dd>
 157                   {dg['host-aggregate'].map(function(ha, h) {
 158                     return <div key={h}>{ha['metadata-key']}:{ha['metadata-value']}</div>
 159                   })}
 160                 </dd>
 161               : ''
 162             }
 163         </dl>
 164       )
 165     }
 166     html = (
 167       <div className="panel panel-5">
 168         <h3 className="sectionHeader">
 169           Placement Group Details
 170         </h3>
 171         <div>
 172           {dgHTML}
 173         </div>
 174       </div>
 175     );
 176     return html;
 177   }
 178 }
 179 PlacementGroupDetails.defaultProps = {
 180   displayedGroup: {}
 181 }
 182 function buildPlacementGroupDictFromVDUR(data) {
 183   let d = {};
 184   data.vnfrs.map(function(vnf) {
 185     vnf.vdur && vnf.vdur.map(function(v) {
 186       v['placement-groups-info'].map(function(p) {
 187         d[p.name] = p;
 188       })
 189     })
 190   })
 191   return d;
 192 }
 193 function buildPlacementGroupDict(data) {
 194   let d = {};
 195   let nsd = data['nsd-placement-group-maps'];
 196   let vnfd = data['vnfd-placement-group-maps'];
 197   nsd.map(function(m, i) {
 198     d[m['placement-group-ref']] = m;
 199   });
 200   vnfd.map(function(m, i) {
 201     d[m['placement-group-ref']] = m;
 202   });
 203   return d;
 204 }