skyquake/plugins/launchpad/src/launchpad_card/nsrScalingGroups.jsx

   1 /*
   2  *
   3  *   Copyright 2016 RIFT.IO Inc
   4  *
   5  *   Licensed under the Apache License, Version 2.0 (the "License");
   6  *   you may not use this file except in compliance with the License.
   7  *   You may obtain a copy of the License at
   8  *
   9  *       http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  *   Unless required by applicable law or agreed to in writing, software
  12  *   distributed under the License is distributed on an "AS IS" BASIS,
  13  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  *   See the License for the specific language governing permissions and
  15  *   limitations under the License.
  16  *
  17  */
  18 import React from 'react';
  19 import RecordViewStore from '../recordViewer/recordViewStore.js';
  20 import Button from 'widgets/button/rw.button.js';
  21 import Utils from 'utils/utils.js';
  22 import _ from 'underscore';
  23 import UpTime from 'widgets/uptime/uptime.jsx';
  24 import './nsrScalingGroups.scss';
  25
  26 export default class NsrScalingGroups extends React.Component {
  27         constructor(props) {
  28                 super(props);
  29                 this.state = {};
  30         }
  31
  32         handleExecuteClick = (nsr_id, scaling_group_id, event) => {
  33                 RecordViewStore.createScalingGroupInstance({
  34                         nsr_id: nsr_id,
  35                         scaling_group_id: scaling_group_id
  36                 });
  37         }
  38
  39         handleDeleteClick = (nsr_id, scaling_group_id, scaling_instance_index, event) => {
  40                 RecordViewStore.deleteScalingGroupInstance({
  41                         nsr_id: nsr_id,
  42                         scaling_group_id: scaling_group_id,
  43                         scaling_instance_index: scaling_instance_index
  44                 });
  45         }
  46
  47         createScalingGroupTable = (scalingGroupDesriptorName) => {
  48                 let trows = [];
  49
  50                 this.props.data['scaling-group-record'] && this.props.data['scaling-group-record'].map((sgr, sgri) => {
  51
  52                         sgr['instance'] ? sgr['instance'].map((sgrInstance, sgrInstanceIndex) => {
  53                                 let id = sgrInstance['instance-id'];
  54                                 let sgrName = sgr['scaling-group-name-ref'];
  55
  56                                 if (sgrName == scalingGroupDesriptorName) {
  57                                         trows.push(
  58                                                 <tr key={sgrInstanceIndex}>
  59                                                         <td>{sgrInstanceIndex + 1}</td>
  60                                                         <td>{id}</td>
  61                                                         <td><UpTime initialTime={sgrInstance['create-time']} run={true} /></td>
  62                                                         <td>{sgrInstance['op-status']}</td>
  63                                                         <td>
  64                                                                 {sgrInstance['is-default'] == 'false' ? <a onClick={this.handleDeleteClick.bind(this, this.props.data.id, sgrName, id)} title="Delete">
  65                                                         <span className="oi" data-glyph="trash" aria-hidden="true"></span>
  66                                                 </a> : null}
  67                                                         </td>
  68                                                 </tr>
  69                                         );
  70                                 }
  71                         }) : trows.push(
  72                                 <tr key={sgri}>
  73                                         <td colSpan="5" style={{textAlign: 'center'}}>No network services scaled in this group</td>
  74                                 </tr>
  75                         );
  76                 });
  77
  78                 let tbody = (
  79                         <tbody>
  80                         {trows}
  81                     </tbody>
  82                 );
  83
  84                 return (
  85                         <table className="scalingGroupsInstancesTable">
  86                             <thead>
  87                                 <tr>
  88                                         <th style={{width: '6%'}}></th>
  89                                     <th style={{width: '12%'}}>ID</th>
  90                                     <th style={{width: '37%'}}>Uptime</th>
  91                                     <th style={{width: '37%'}}>Status</th>
  92                                     <th style={{width: '7%'}}> </th>
  93                                 </tr>
  94                             </thead>
  95                             {tbody}
  96                         </table>
  97                 );
  98         }
  99
 100         getInstancesForScalingGroup = (scalingGroupDesriptorName) => {
 101                 let count = 0;
 102                 this.props.data['scaling-group-record'] && this.props.data['scaling-group-record'].map((sgr, sgri) => {
 103                         sgr['instance'] && sgr['instance'].map((sgrInstance, sgrInstanceIndex) => {
 104                                 if (sgr['scaling-group-name-ref'] == scalingGroupDesriptorName) {
 105                                         count++;
 106                                 }
 107                         });
 108                 });
 109
 110                 return count;
 111         }
 112
 113         render() {
 114                 let scalingGroups = [];
 115
 116                 this.props.data['scaling-group-descriptor'] && this.props.data['scaling-group-descriptor'].map((sgd) => {
 117                         let sgvnfs = [];
 118                         let sgMaxCount = (
 119                                 <span>
 120                                         <span>Max: </span>
 121                                         <span>{sgd['max-instance-count']}</span>
 122                                 </span>
 123                         );
 124
 125                         sgd['vnfd-member'] && sgd['vnfd-member'].map((vnf) => {
 126                                 let instanceCount = vnf['count'];
 127                                 sgvnfs.push(
 128                                         <span>{vnf['short-name']} {instanceCount > 1 ? '(' + instanceCount + ')': ''}</span>
 129                                 );
 130                         });
 131
 132                         sgvnfs = Utils.arrayIntersperse(sgvnfs, ', ');
 133
 134                         let sgInstanceTable = this.createScalingGroupTable(sgd.name);
 135
 136                         let sgCreateInstanceButton = <Button label='Create Scaling Group Instance' className="dark" isDisabled={this.getInstancesForScalingGroup(sgd.name) == sgd["max-instance-count"]} isLoading={false} onClick={this.handleExecuteClick.bind(this, this.props.data.id, sgd.name)} />
 137
 138                         let scalingGroup =
 139                                 <div>
 140                                         <div className='launchpadCard_title' style={{textAlign:'right'}}><span style={{float:'left'}}>{sgd.name}</span></div>
 141                                         <div className='vnfsList'><span className='vnfsLabel'>VNFS: </span><span>{sgvnfs}</span></div>
 142                                         <div className='scalingGroupsInstancesTableWrapper'>
 143                                                 {sgInstanceTable}
 144                                         </div>
 145                                         {sgCreateInstanceButton} {sgMaxCount}
 146                                 </div>
 147
 148                         scalingGroups.push(scalingGroup);
 149                 });
 150
 151                 return (
 152                         <div className='nsScalingGroups'>
 153                 <div className=''>
 154                         {scalingGroups}
 155                 </div>
 156             </div>
 157                 );
 158         }
 159
 160 }