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>{sgrInstance['config-status']}</td>
  69                                                         <td>
  70                                                                 {sgrInstance['is-default'] == 'false' ? <a onClick={this.handleDeleteClick.bind(this, this.props.data.id, sgrName, id)} title="Delete">
  71                                                         <span className="oi" data-glyph="trash" aria-hidden="true"></span>
  72                                                 </a> : null}
  73                                                         </td>
  74                                                 </tr>
  75                                         );
  76                                 }
  77                         }) : trows.push(
  78                                 <tr key={sgri}>
  79                                         <td colSpan="5" style={{textAlign: 'center'}}>No network services scaled in this group</td>
  80                                 </tr>
  81                         );
  82                 });
  83
  84                 let tbody = (
  85                         <tbody>
  86                         {trows}
  87                     </tbody>
  88                 );
  89
  90                 return (
  91                         <table className="scalingGroupsInstancesTable">
  92                             <thead>
  93                                 <tr>
  94                                         <th style={{width: '6%'}}></th>
  95                                     <th style={{width: '12%'}}>ID</th>
  96                                     <th style={{width: '24%'}}>Uptime</th>
  97                                     <th style={{width: '25%'}}>Status</th>
  98                                     <th style={{width: '25%'}}>Config-Status</th>
  99                                     <th style={{width: '7%'}}> </th>
 100                                 </tr>
 101                             </thead>
 102                             {tbody}
 103                         </table>
 104                 );
 105         }
 106
 107         getInstancesForScalingGroup = (scalingGroupDesriptorName) => {
 108                 let count = 0;
 109                 this.props.data['scaling-group-record'] && this.props.data['scaling-group-record'].map((sgr, sgri) => {
 110                         sgr['instance'] && sgr['instance'].map((sgrInstance, sgrInstanceIndex) => {
 111                                 if (sgr['scaling-group-name-ref'] == scalingGroupDesriptorName) {
 112                                         count++;
 113                                 }
 114                         });
 115                 });
 116
 117                 return count;
 118         }
 119
 120         render() {
 121                 let scalingGroups = [];
 122
 123                 this.props.data['scaling-group-descriptor'] && this.props.data['scaling-group-descriptor'].map((sgd) => {
 124                         let sgvnfs = [];
 125                         let sgMaxCount = (
 126                                 <span>
 127                                         <span>Max: </span>
 128                                         <span>{sgd['max-instance-count']}</span>
 129                                 </span>
 130                         );
 131
 132                         sgd['vnfd-member'] && sgd['vnfd-member'].map((vnf) => {
 133                                 let instanceCount = vnf['count'];
 134                                 sgvnfs.push(
 135                                         <span>{vnf['short-name']} {instanceCount > 1 ? '(' + instanceCount + ')': ''}</span>
 136                                 );
 137                         });
 138
 139                         sgvnfs = Utils.arrayIntersperse(sgvnfs, ', ');
 140
 141                         let sgInstanceTable = this.createScalingGroupTable(sgd.name);
 142
 143                         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'])} />
 144
 145                         let scalingGroup =
 146                                 <div>
 147                                         <div className='launchpadCard_title' style={{textAlign:'right'}}><span style={{float:'left'}}>{sgd.name}</span></div>
 148                                         <div className='vnfsList'><span className='vnfsLabel'>VNFS: </span><span>{sgvnfs}</span></div>
 149                                         <div className='scalingGroupsInstancesTableWrapper'>
 150                                                 {sgInstanceTable}
 151                                         </div>
 152                                         {sgCreateInstanceButton} {sgMaxCount}
 153                                 </div>
 154
 155                         scalingGroups.push(scalingGroup);
 156                 });
 157
 158                 return (
 159                         <div className='nsScalingGroups'>
 160                 <div className=''>
 161                         {scalingGroups}
 162                 </div>
 163             </div>
 164                 );
 165         }
 166
 167 }
 168
 169 export default SkyquakeComponent(NsrScalingGroups);