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 UpTime from 'widgets/uptime/uptime.jsx';
  23 import './nsrScalingGroups.scss';
  24
  25 export default class NsrScalingGroups extends React.Component {
  26         constructor(props) {
  27                 super(props);
  28                 this.state = {};
  29         }
  30
  31         handleExecuteClick = (nsr_id, scaling_group_id, event) => {
  32                 RecordViewStore.createScalingGroupInstance({
  33                         nsr_id: nsr_id,
  34                         scaling_group_id: scaling_group_id
  35                 });
  36         }
  37
  38         handleDeleteClick = (nsr_id, scaling_group_id, scaling_instance_index, event) => {
  39                 RecordViewStore.deleteScalingGroupInstance({
  40                         nsr_id: nsr_id,
  41                         scaling_group_id: scaling_group_id,
  42                         scaling_instance_index: scaling_instance_index
  43                 });
  44         }
  45
  46         createScalingGroupTable = (scalingGroupDesriptorName) => {
  47                 let trows = [];
  48
  49                 this.props.data['scaling-group-record'] && this.props.data['scaling-group-record'].map((sgr, sgri) => {
  50
  51                         sgr['instance'] ? sgr['instance'].map((sgrInstance, sgrInstanceIndex) => {
  52                                 let id = sgrInstance['instance-id'];
  53                                 let sgrName = sgr['scaling-group-name-ref'];
  54
  55                                 if (sgrName == scalingGroupDesriptorName) {
  56                                         trows.push(
  57                                                 <tr key={sgrInstanceIndex}>
  58                                                         <td>{sgrInstanceIndex + 1}</td>
  59                                                         <td>{id}</td>
  60                                                         <td><UpTime initialTime={sgrInstance['create-time']} run={true} /></td>
  61                                                         <td>{sgrInstance['op-status']}</td>
  62                                                         <td>
  63                                                                 {sgrInstance['is-default'] == 'false' ? <a onClick={this.handleDeleteClick.bind(this, this.props.data.id, sgrName, id)} title="Delete">
  64                                                         <span className="oi" data-glyph="trash" aria-hidden="true"></span>
  65                                                 </a> : null}
  66                                                         </td>
  67                                                 </tr>
  68                                         );
  69                                 }
  70                         }) : trows.push(
  71                                 <tr key={sgrInstanceIndex}>
  72                                         <td colSpan="5" style={{textAlign: 'center'}}>No network services scaled in this group</td>
  73                                 </tr>
  74                         );
  75                 });
  76
  77                 let tbody = (
  78                         <tbody>
  79                         {trows}
  80                     </tbody>
  81                 );
  82
  83                 return (
  84                         <table className="scalingGroupsInstancesTable">
  85                             <thead>
  86                                 <tr>
  87                                         <th style={{width: '6%'}}></th>
  88                                     <th style={{width: '12%'}}>ID</th>
  89                                     <th style={{width: '37%'}}>Uptime</th>
  90                                     <th style={{width: '37%'}}>Status</th>
  91                                     <th style={{width: '7%'}}> </th>
  92                                 </tr>
  93                             </thead>
  94                             {tbody}
  95                         </table>
  96                 );
  97         }
  98
  99         getInstancesForScalingGroup = (scalingGroupDesriptorName) => {
 100                 let count = 0;
 101                 this.props.data['scaling-group-record'] && this.props.data['scaling-group-record'].map((sgr, sgri) => {
 102                         sgr['instance'] && sgr['instance'].map((sgrInstance, sgrInstanceIndex) => {
 103                                 if (sgr['scaling-group-name-ref'] == scalingGroupDesriptorName) {
 104                                         count++;
 105                                 }
 106                         });
 107                 });
 108
 109                 return count;
 110         }
 111
 112         render() {
 113                 let scalingGroups = [];
 114
 115                 this.props.data['scaling-group-descriptor'] && this.props.data['scaling-group-descriptor'].map((sgd) => {
 116                         let sgvnfs = [];
 117                         let sgMaxCount = (
 118                                 <span>
 119                                         <span>Max: </span>
 120                                         <span>{sgd['max-instance-count']}</span>
 121                                 </span>
 122                         );
 123
 124                         sgd['vnfd-member'] && sgd['vnfd-member'].map((vnf) => {
 125                                 let instanceCount = vnf['count'];
 126                                 sgvnfs.push(
 127                                         <span>{vnf['short-name']} {instanceCount > 1 ? '(' + instanceCount + ')': ''}</span>
 128                                 );
 129                         });
 130
 131                         sgvnfs = Utils.arrayIntersperse(sgvnfs, ', ');
 132
 133                         let sgInstanceTable = this.createScalingGroupTable(sgd.name);
 134
 135                         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)} />
 136
 137                         let scalingGroup =
 138                                 <div>
 139                                         <div className='launchpadCard_title' style={{textAlign:'right'}}><span style={{float:'left'}}>{sgd.name}</span></div>
 140                                         <div className='vnfsList'><span className='vnfsLabel'>VNFS: </span><span>{sgvnfs}</span></div>
 141                                         <div className='scalingGroupsInstancesTableWrapper'>
 142                                                 {sgInstanceTable}
 143                                         </div>
 144                                         {sgCreateInstanceButton} {sgMaxCount}
 145                                 </div>
 146
 147                         scalingGroups.push(scalingGroup);
 148                 });
 149
 150                 return (
 151                         <div className='nsScalingGroups'>
 152                 <div className=''>
 153                         {scalingGroups}
 154                 </div>
 155             </div>
 156                 );
 157         }
 158
 159 }