Gitiles
Code Review Sign In
gerrit.opencord.org / xos / adb5d12e222fcd3ac1f3170e72a81e6aa888ba78 / . / planetstack / templates / admin / dashboard / tenant.html
blob: 24db6c41974bc21b4a6b7fd2407dcde4a899ccaf [file] [log] [blame]
Scott Baker537d8232014-04-08 23:40:56 -0700[diff] [blame]1<!doctype html>
2<style>
3#tenantSliceDataWrapper {
4 padding: 1% 0;
5}
6</style>
7<script type="text/javascript" src="http://www.google.com/jsapi"></script>
8<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
9<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
10<div id="dialog-form" title="Add/Remove Slivers" style="display: none;">
11 <form>
12 <fieldset>
13 <label for="numberOfSlivers">Number of Slivers</label>
14 <input type="text" name="numberOfSlivers" id="numOfSlivers" class="text ui-widget-content ui-corner-all">
15 </fieldset>
16 </form>
17</div>
18<div id="adv-dialog-form" title="Add/Remove Slivers" style="display: none;">
19 <form>
20 <fieldset>
21 <label for="numberOfSlivers">Number of Slivers</label>
22 <input type="text" name="numberOfSlivers" id="advNumOfSlivers" class="text ui-widget-content ui-corner-all">
23 </fieldset>
24 </form>
25</div>
26<div id="create-slice-form" title="Create New Slice" style="display: none;">
27 <form>
28 <fieldset>
29 <div class="create-slice-row">
30 <label for="new-slice-name">Name</label>
31 <input type="text" name="new-slice-name" id="new-slice-name" class="text">
32 </div>
33 <div class="create-slice-row">
34 <label for="new-service-class">Service Class</label>
35 <select id="new-service-class"></select>
36 </div>
37 <div class="create-slice-row">
38 <label for="new-image">Image</label>
39 <select id="new-image"></select>
40 </div>
41 <div id=tooltip>Slice Name cannot be empty</div>
42 </fieldset>
43 </form>
44</div>
45<script type="text/javascript">
46google.load('visualization', '1', {
47 'packages': ['controls', 'table', 'corechart', 'geochart']
48});
49</script>
50<script>
51$(document).ready(function () {
52 function showSliceData(data) {
53 var value = $("#tenantSliceDropDown").val();
54 var imageData = data['image']['rows'];
55 var networkData = data['network']['rows'];
56 $("#service-level-value").empty();
57 $("#slice-image-value").empty();
58 $("#tenantSiteTable").empty();
59 $('#tenantSiteTable').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="tenantSiteTableData"></table>');
60 var rows = data['userSliceInfo']['rows'];
61 var siteNames = [];
62 var sliverCount;
63 for (row in rows) {
64 if (rows[row]['sliceName'] == value) {
65 sliceImageData = rows[row]['sliceImage'];
66 $("#slice-image-value").html(sliceImageData);
67 serviceLevelData = rows[row]['sliceServiceClass'];
68 $("#service-level-value").html(serviceLevelData);
69 var innerRows = rows[row]['sliceSite'];
70 for (innerRow in innerRows) {
71 sliverCount = innerRows[innerRow];
72 siteNames.push([innerRow, sliverCount]);
73 }
74 }
75 }
76 oTable = $('#tenantSiteTableData').dataTable({
77 "bJQueryUI": true,
78 "bFilter": false,
79 "bInfo": false,
80 "bLengthChange": false,
81 "aaData": siteNames,
82 "bStateSave": true,
83 "aoColumns": [{
84 "sTitle": "Site Name"
85 }, {
86 "sTitle": "Allocated",
87 sClass: "alignCenter"
88 }
89 //{ "sTitle": "Allocated" , sClass: "alignCenter"},
90 //{ "sTitle": "Desired" , sClass: "alignCenter"},
91 ]
92 });
93 }
94
95 function initTenant() {
96 jQuery.ajax({
97 url: '/tenantview',
98 dataType: 'json',
99 success: function (data) {
100 UserSliceTable(data);
101 showSliceData(data);
Scott Baker6253dfc2014-04-14 09:29:30 -0700[diff] [blame]102 $("#tooltip").css("display", "none");
Scott Baker537d8232014-04-08 23:40:56 -0700[diff] [blame]103 },
104 complete: function () {}
105 });
106
107 function UserSliceTable(data) {
108 //Add check for #dynamicusersliceinfo_filter label-> input having focus here
109 var rows = data['userSliceInfo']['rows'];
Scott Baker590f83a2014-04-09 00:11:23 -0700[diff] [blame]110 $("<div></div>").attr('id', 'tenantSliceDataWrapper').appendTo('#tabs-5');
111 $("<div></div>").attr('id', 'advancedTenantSliceDataWrapper').appendTo('#tabs-5');
Scott Baker537d8232014-04-08 23:40:56 -0700[diff] [blame]112 var sliceData = '';
113 sliceData += '<div class="tenant-row"><span class="summary-attr"><b>Slice Name:</b> <span id="slice-name-value"> </span> </span><br></div><div class="tenant-row"><span class="summary-attr"><b>Service Level:</b> <span id="service-level-value"> </span> </span><br></div><div class="tenant-row"><span class="summary-attr"><b>Image:</b> <span id="slice-image-value"> </span> </span><br></div><div class="btn btn-high btn-info" id="advanced-tenant">Go to Advanced View</div>';
114 var advSliceData = '';
115 advSliceData += '<div class="adv-tenant-row"><span class="summary-attr"><b>Slice Name:</b> <span id="adv-slice-name-value"> </span> </span><br><br></div><div class="tenant-row"><span class="summary-attr"><b>Service Level:</b> <span id="adv-service-level-value"> </span> </span><br></div><div class="tenant-row"><span class="summary-attr"><b>Image:</b> <span id="adv-slice-image-value"> </span> </span><br></div><div class="tenant-row"><span class="summary-attr"><b>Network:</b> <span id="adv-slice-network-value"> </span> </span></div><div class="btn btn-high btn-info" id="basic-tenant">Go to Basic View</div>';
116 $('#tenantSliceDataWrapper').append(sliceData);
117 $('#advancedTenantSliceDataWrapper').append(advSliceData);
118 $("#advancedTenantSliceDataWrapper").css("display", "none");
119 $("<select></select>").attr('id', 'tenantSliceDropDown').appendTo('#slice-name-value');
120 for (row in rows) {
121 $("#tenantSliceDropDown").append("<option>" + rows[row]['sliceName'] + "</option>");
122 }
Scott Baker590f83a2014-04-09 00:11:23 -0700[diff] [blame]123 $("<div></div>").attr('id', 'tenantSiteTable').appendTo('#tabs-5');
124 $("<div></div>").attr('id', 'advTenantSiteTable').appendTo('#tabs-5').css("display", "none");
125 $('<div class="btn btn-success" id="create-slice-btn"><i class="icon-plus-sign icon-white"></i>&nbsp;Create New Slice</div>').appendTo("#tabs-5");
126 $('<div class="btn btn-success" id="sliver-btn"><i class="icon-plus-sign icon-white"></i>&nbsp;Add/Remove Slivers</div>').appendTo("#tabs-5");
127 $('<div class="btn btn-high btn-info" id="save-btn">Save</div>').appendTo("#tabs-5").css("display", "none");
Scott Baker537d8232014-04-08 23:40:56 -0700[diff] [blame]128 $('#tenantSliceDropDown').on('change', function () {
129 showSliceData(data);
130 });
131 $("#advanced-tenant").click(function () {
Scott Baker6253dfc2014-04-14 09:29:30 -0700[diff] [blame]132 var selectedValue = $("#tenantSliceDropDown").val();
Scott Baker537d8232014-04-08 23:40:56 -0700[diff] [blame]133 $("#tenantSliceDataWrapper").toggle();
134 $("#advancedTenantSliceDataWrapper").toggle();
135 $("#advTenantSiteTable").toggle();
136 $("#tenantSiteTable").toggle();
137 $("#sliver-btn").toggle();
138 $("#save-btn").toggle();
Scott Baker6253dfc2014-04-14 09:29:30 -0700[diff] [blame]139 //$('#adv-slice-name-value').empty();
Scott Baker537d8232014-04-08 23:40:56 -0700[diff] [blame]140 $("<select></select>").attr('id', 'advTenantSliceDropDown').appendTo('#adv-slice-name-value');
141 for (row in rows) {
142 $("#advTenantSliceDropDown").append("<option>" + rows[row]['sliceName'] + "</option>");
143 }
Scott Baker6253dfc2014-04-14 09:29:30 -0700[diff] [blame]144 $("#advTenantSliceDropDown").val(selectedValue);
Scott Baker537d8232014-04-08 23:40:56 -0700[diff] [blame]145 advShowSliceData(data);
146 editSliverAdv();
147 $('#advTenantSliceDropDown').on('change', function () {
148 advShowSliceData(data);
149 editSliverAdv();
150 });
151
152 function editSliverAdv() {
153 $(".edit-view").click(function () {
154 var allocatedSlivers = parseInt($(this).parent().siblings(".allocated").html());
Scott Baker6253dfc2014-04-14 09:29:30 -0700[diff] [blame]155 var td = $(this).parent().siblings(".allocated");
156 var pos = oTable.fnGetPosition(td[0]);
157 $("#adv-dialog-form").dialog({
Scott Baker537d8232014-04-08 23:40:56 -0700[diff] [blame]158 autoOpen: false,
159 height: 200,
160 width: 350,
161 modal: true,
162 buttons: {
163 "Add": function () {
164 allocatedSlivers += parseInt($("#advNumOfSlivers").val());
Scott Baker6253dfc2014-04-14 09:29:30 -0700[diff] [blame]165 $(this).dialog("close");
Scott Baker537d8232014-04-08 23:40:56 -0700[diff] [blame]166 td.html(allocatedSlivers);
167 },
168 "Remove": function () {
Scott Baker6253dfc2014-04-14 09:29:30 -0700[diff] [blame]169 allocatedSlivers -= parseInt($("#advNumOfSlivers").val());
170 $(this).dialog("close");
171 td.html(allocatedSlivers);
Scott Baker537d8232014-04-08 23:40:56 -0700[diff] [blame]172 }
173 }
174 });
175 $("#adv-dialog-form").dialog("open");
176 });
177 }
178
179 function advShowSliceData(data) {
180 var value = $("#advTenantSliceDropDown").val();
181 var serviceLevelData = data['sliceServiceClass']['rows'];
182 var imageData = data['image']['rows'];
183 var networkData = data['network']['rows'];
184 var siteRows = data['sites']['rows'];
185 $("#adv-service-level-value").empty();
186 $("#adv-slice-image-value").empty();
187 $("#adv-slice-network-value").empty();
188 $("<select></select>").attr('id', 'adv-service-level-dropdown').appendTo('#adv-service-level-value');
189 $("<select></select>").attr('id', 'adv-image-dropdown').appendTo('#adv-slice-image-value');
190 $("<select></select>").attr('id', 'adv-network-dropdown').appendTo('#adv-slice-network-value');
191 $('#advTenantSiteTable').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="advTenantSiteTableData"></table>');
192 var rows = data['userSliceInfo']['rows'];
193 var siteNames = [];
194 var sliverCount;
Scott Baker6253dfc2014-04-14 09:29:30 -0700[diff] [blame]195 var tableData = {};
Scott Baker537d8232014-04-08 23:40:56 -0700[diff] [blame]196 for (row in rows) {
197 if (rows[row]['sliceName'] == value) {
198 var innerRows = rows[row]['sliceSite'];
199 for (innerRow in innerRows) {
Scott Baker6253dfc2014-04-14 09:29:30 -0700[diff] [blame]200 tableData[innerRow] = innerRows[innerRow];
Scott Baker537d8232014-04-08 23:40:56 -0700[diff] [blame]201 }
202 }
203 }
204 for (row in siteRows) {
Scott Baker6253dfc2014-04-14 09:29:30 -0700[diff] [blame]205 var entry = siteRows[row]['siteName'];
Scott Baker537d8232014-04-08 23:40:56 -0700[diff] [blame]206 if (!(entry in tableData)) {
207 tableData[siteRows[row]['siteName']] = 0;
208 }
209 }
Scott Baker6253dfc2014-04-14 09:29:30 -0700[diff] [blame]210 for (row in tableData) {
Scott Baker537d8232014-04-08 23:40:56 -0700[diff] [blame]211 siteNames.push([row, tableData[row], '<a href="#" class="edit-view">Edit</a>']);
212 }
Scott Baker6253dfc2014-04-14 09:29:30 -0700[diff] [blame]213 $("#save-btn").click(function () {
214 var newTableData={};
215 var newSite = $(".siteName");
216 var newAllocated = $(".allocated");
217 for(i=1; i<newSite.length; i++){
218 newTableData[$($(".siteName")[i]).text()]=$($(".allocated")[i]).text();
219 }
220 for(newRow in newTableData){
221 if(newTableData[newRow] > tableData[newRow]){
222 $.ajax({
223 url : '/tenantaddorremsliver/',
224 dataType : 'json',
225 data: {
226 siteName: newRow,
227 count : newTableData[newRow] - tableData[newRow],
228 slice : $("#advTenantSliceDropDown").val(),
229 actionToDo: "add",
Scott Bakerc96b43a2014-04-15 10:42:36 -0700[diff] [blame]230 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
Scott Baker6253dfc2014-04-14 09:29:30 -0700[diff] [blame]231 state:"inactive" },
232 type : 'POST',
233 complete:function(){
234 location.reload();
235 }
236 });
237 }
238 else if(newTableData[newRow] < tableData[newRow]){
239 $.ajax({
240 url : '/tenantaddorremsliver/',
241 dataType : 'json',
242 data: {
243 siteName: newRow,
244 count : tableData[newRow] - newTableData[newRow],
245 slice : $("#advTenantSliceDropDown").val(),
246 actionToDo: "rem",
247 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
248 state:"inactive" },
249 type : 'POST',
250 complete:function(){
251 location.reload();
252 }
253 });
254 }
255
256 }
257 });
Scott Baker537d8232014-04-08 23:40:56 -0700[diff] [blame]258 oTable = $('#advTenantSiteTableData').dataTable({
259 "bJQueryUI": true,
260 "bFilter": false,
261 "bInfo": false,
262 "bLengthChange": false,
Scott Baker6253dfc2014-04-14 09:29:30 -0700[diff] [blame]263 "bPaginate": false,
Scott Baker537d8232014-04-08 23:40:56 -0700[diff] [blame]264 "aaData": siteNames,
265 "bStateSave": true,
266 "aoColumns": [{
Scott Baker6253dfc2014-04-14 09:29:30 -0700[diff] [blame]267 "sTitle": "Site Name",
268 sClass: "siteName"
Scott Baker537d8232014-04-08 23:40:56 -0700[diff] [blame]269 }, {
270 "sTitle": "Allocated",
271 sClass: "alignCenter allocated"
272 }, {
273 "sTitle": "Edit",
274 sClass: "alignCenter"
275 }]
276 });
277 for (row in serviceLevelData) {
278 $("#adv-service-level-dropdown").append("<option>" + serviceLevelData[row]['serviceClass'] + "</option>");
279 }
280 for (row in imageData) {
281 $("#adv-image-dropdown").append("<option>" + imageData[row]['Image'] + "</option>");
282 }
283 for (row in networkData) {
284 $("#adv-network-dropdown").append("<option>" + networkData[row]['Network'] + "</option>");
285 }
286 }
287 });
288 $("#basic-tenant").click(function () {
289 $("#tenantSliceDataWrapper").toggle();
290 $("#advancedTenantSliceDataWrapper").toggle();
291 $("#advTenantSiteTable").toggle();
292 $("#tenantSiteTable").toggle();
293 $("#sliver-btn").toggle();
294 $("#save-btn").toggle();
295 });
296 $("#sliver-btn").click(function () {
297 $("#dialog-form").dialog({
298 autoOpen: false,
299 height: 200,
300 width: 350,
301 modal: true,
302 buttons: {
Scott Bakerc96b43a2014-04-15 10:42:36 -0700[diff] [blame]303 "Add": function () {
304 delta = parseInt($("#numOfSlivers").val());
305 $(this).dialog("close");
306 $.ajax({
307 url : '/tenantaddorremsliver/',
308 dataType : 'json',
309 data: {
310 count : delta,
311 slice : $("#tenantSliceDropDown").val(),
312 actionToDo: "add",
313 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
314 state:"inactive" },
315 type : 'POST',
316 complete:function(){
317 location.reload();
318 }
319 });
320 },
321 "Remove": function () {
322 delta = parseInt($("#numOfSlivers").val());
323 $(this).dialog("close");
324 $.ajax({
325 url : '/tenantaddorremsliver/',
326 dataType : 'json',
327 data: {
328 count : delta,
329 slice : $("#tenantSliceDropDown").val(),
330 actionToDo: "rem",
331 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
332 state:"inactive" },
333 type : 'POST',
334 complete:function(){
335 location.reload();
336 }
337 });
338 },
Scott Baker537d8232014-04-08 23:40:56 -0700[diff] [blame]339 Cancel: function () {
340 $(this).dialog("close");
341 }
342 }
343 });
344 $("#dialog-form").dialog("open");
345 });
346 $("#create-slice-btn").click(function () {
347 var serviceLevelData = data['sliceServiceClass']['rows'];
348 var imageData = data['image']['rows'];
349 for (row in serviceLevelData) {
350 $("#new-service-class").append("<option>" + serviceLevelData[row]['serviceClass'] + "</option>");
351 }
352 for (row in imageData) {
353 $("#new-image").append("<option>" + imageData[row]['Image'] + "</option>");
354 }
Scott Baker6253dfc2014-04-14 09:29:30 -0700[diff] [blame]355 var nameOfSlice = $("#new-slice-name").val();
Scott Baker537d8232014-04-08 23:40:56 -0700[diff] [blame]356 var nameOfServiceClass = $("#new-service-class").val();
357 var nameOfImage = $("#new-image").val();
358 $("#create-slice-form").dialog({
Scott Baker6253dfc2014-04-14 09:29:30 -0700[diff] [blame]359 autoOpen: false,
360 height: 300,
361 width: 350,
362 modal: true,
363 buttons: {
364 "Submit": function () {
365 $.ajax({
366 url: '/createnewslice/',
367 dataType: 'json',
368 data: {
369 sliceName: $("#new-slice-name").val(),
370 serviceClass: nameOfServiceClass,
371 imageName: nameOfImage,
372 actionToDo: "add",
373 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
374 state: "inactive"
375 },
376 type: 'POST',
377 beforeSend: function () {
378 if (!$("#new-slice-name").val()) {
379 $("#tooltip").css("display", "block");
380 return false;
381 } else {
382 return true;
383 }
384 },
385 success: function (response) {},
386 complete: function () {
387 location.reload();
388 }
389 });
390 },
391 Cancel: function () {
392 $(this).dialog("close");
Scott Baker537d8232014-04-08 23:40:56 -0700[diff] [blame]393 }
Scott Baker6253dfc2014-04-14 09:29:30 -0700[diff] [blame]394 }
395 });
396 $("#create-slice-form").dialog("open");
Scott Baker537d8232014-04-08 23:40:56 -0700[diff] [blame]397 });
398 }
399 }
400 initTenant();
401});
402</script>
403
404</html>