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