X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=skyquake%2Fplugins%2Flaunchpad%2Fsrc%2Flaunchpad_card%2FnsrScalingGroups.jsx;fp=skyquake%2Fplugins%2Flaunchpad%2Fsrc%2Flaunchpad_card%2FnsrScalingGroups.jsx;h=b6abf5c81bac5c8ddf868985689950f0ed5b383e;hb=e29efc315df33d546237e270470916e26df391d6;hp=0000000000000000000000000000000000000000;hpb=9c5e457509ba5a1822c316635c6308874e61b4b9;p=osm%2FUI.git

diff --git a/skyquake/plugins/launchpad/src/launchpad_card/nsrScalingGroups.jsx b/skyquake/plugins/launchpad/src/launchpad_card/nsrScalingGroups.jsx
new file mode 100644
index 000000000..b6abf5c81
--- /dev/null
+++ b/skyquake/plugins/launchpad/src/launchpad_card/nsrScalingGroups.jsx
@@ -0,0 +1,160 @@
+/*
+ * 
+ *   Copyright 2016 RIFT.IO Inc
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ *
+ */
+import React from 'react';
+import RecordViewStore from '../recordViewer/recordViewStore.js';
+import Button from 'widgets/button/rw.button.js';
+import Utils from 'utils/utils.js';
+import _ from 'underscore';
+import UpTime from 'widgets/uptime/uptime.jsx';
+import './nsrScalingGroups.scss';
+
+export default class NsrScalingGroups extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {};
+	}
+
+	handleExecuteClick = (nsr_id, scaling_group_id, event) => {
+		RecordViewStore.createScalingGroupInstance({
+			nsr_id: nsr_id,
+			scaling_group_id: scaling_group_id
+		});
+	}
+
+	handleDeleteClick = (nsr_id, scaling_group_id, scaling_instance_index, event) => {
+		RecordViewStore.deleteScalingGroupInstance({
+			nsr_id: nsr_id,
+			scaling_group_id: scaling_group_id,
+			scaling_instance_index: scaling_instance_index
+		});
+	}
+
+	createScalingGroupTable = (scalingGroupDesriptorName) => {
+		let trows = [];
+
+		this.props.data['scaling-group-record'] && this.props.data['scaling-group-record'].map((sgr, sgri) => {
+
+			sgr['instance'] ? sgr['instance'].map((sgrInstance, sgrInstanceIndex) => {
+				let id = sgrInstance['instance-id'];
+				let sgrName = sgr['scaling-group-name-ref'];
+
+				if (sgrName == scalingGroupDesriptorName) {
+					trows.push(
+						<tr key={sgrInstanceIndex}>
+							<td>{sgrInstanceIndex + 1}</td>
+							<td>{id}</td>
+							<td><UpTime initialTime={sgrInstance['create-time']} run={true} /></td>
+							<td>{sgrInstance['op-status']}</td>
+							<td>
+								{sgrInstance['is-default'] == 'false' ? <a onClick={this.handleDeleteClick.bind(this, this.props.data.id, sgrName, id)} title="Delete">
+				                	<span className="oi" data-glyph="trash" aria-hidden="true"></span>
+				            	</a> : null}
+							</td>
+						</tr>
+					);
+				}
+			}) : trows.push(
+				<tr key={sgrInstanceIndex}>
+					<td colSpan="5" style={{textAlign: 'center'}}>No network services scaled in this group</td>
+				</tr>
+			);
+		});
+
+		let tbody = (
+			<tbody>
+		        {trows}
+		    </tbody>
+		);
+
+		return (
+			<table className="scalingGroupsInstancesTable">
+			    <thead>
+			        <tr>
+			        	<th style={{width: '6%'}}></th>
+			            <th style={{width: '12%'}}>ID</th>
+			            <th style={{width: '37%'}}>Uptime</th>
+			            <th style={{width: '37%'}}>Status</th>
+			            <th style={{width: '7%'}}> </th>
+			        </tr>
+			    </thead>
+			    {tbody}
+			</table>
+		);
+	}
+
+	getInstancesForScalingGroup = (scalingGroupDesriptorName) => {
+		let count = 0;
+		this.props.data['scaling-group-record'] && this.props.data['scaling-group-record'].map((sgr, sgri) => {
+			sgr['instance'] && sgr['instance'].map((sgrInstance, sgrInstanceIndex) => {
+				if (sgr['scaling-group-name-ref'] == scalingGroupDesriptorName) {
+					count++;
+				}
+			});
+		});
+
+		return count;
+	}
+
+	render() {
+		let scalingGroups = [];
+
+		this.props.data['scaling-group-descriptor'] && this.props.data['scaling-group-descriptor'].map((sgd) => {
+			let sgvnfs = [];
+			let sgMaxCount = (
+				<span>
+					<span>Max: </span>
+					<span>{sgd['max-instance-count']}</span>
+				</span>
+			);
+
+			sgd['vnfd-member'] && sgd['vnfd-member'].map((vnf) => {
+				let instanceCount = vnf['count'];
+				sgvnfs.push(
+					<span>{vnf['short-name']} {instanceCount > 1 ? '(' + instanceCount + ')': ''}</span>
+				);
+			});
+
+			sgvnfs = Utils.arrayIntersperse(sgvnfs, ', ');
+
+			let sgInstanceTable = this.createScalingGroupTable(sgd.name);
+
+			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)} />
+
+			let scalingGroup =
+				<div>
+					<div className='launchpadCard_title' style={{textAlign:'right'}}><span style={{float:'left'}}>{sgd.name}</span></div>
+					<div className='vnfsList'><span className='vnfsLabel'>VNFS: </span><span>{sgvnfs}</span></div>
+					<div className='scalingGroupsInstancesTableWrapper'>
+						{sgInstanceTable}
+					</div>
+					{sgCreateInstanceButton} {sgMaxCount}
+				</div>
+
+			scalingGroups.push(scalingGroup);
+		});
+
+		return (
+			<div className='nsScalingGroups'>
+                <div className=''>
+                	{scalingGroups}
+                </div>
+            </div>
+		);
+	}
+
+}