2 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
3 <div id="dialog-form" title="Add/Remove Slivers" style="display: none;">
6 <label for="numberOfSlivers">Number of Slivers</label>
7 <input type="text" name="numberOfSlivers" id="numOfSlivers" class="text ui-widget-content ui-corner-all">
8 <div id=basic-tooltip>Please enter number of slivers</div>
12 <div id="adv-dialog-form" title="Add/Remove Slivers" style="display: none;">
15 <label for="numberOfSlivers">Number of Slivers</label>
16 <input type="text" name="numberOfSlivers" id="advNumOfSlivers" class="text ui-widget-content ui-corner-all">
17 <div id=adv-tooltip>Please enter number of slivers</div>
21 <div id="create-slice-form" title="Create New Slice" style="display: none;">
24 <div class="create-slice-row">
25 <label for="new-slice-name">Name</label>
26 <input type="text" name="new-slice-name" id="new-slice-name">
28 <div class="create-slice-row">
29 <label for="new-service-class">Service Class</label>
30 <select id="new-service-class" class="tenant-create-slice"></select>
32 <div class="create-slice-row">
33 <label for="new-image">Image</label>
34 <select id="new-image" class="tenant-create-slice"></select>
36 <div class="create-slice-row">
37 <label for="new-network">Network Ports</label>
38 <input type="text" name="new-network" id="new-network">
40 <div class="create-slice-row">
41 <label for="private-vol">Include Private Vol</label>
42 <input type="checkbox" name="checkbox" id="private-vol" value="value">
44 <div class="create-slice-row">
45 <label for="mount-data-sets">Data Sets</label>
46 <select id="mount-data-sets" class="tenant-create-slice"></select>
48 <div class="create-slice-row">
49 <label for="number-of-slivers">Number Of Slivers</label>
50 <input type="text" name="number-of-slivers" id="number-of-slivers">
52 <div id=tooltip>Slice Name cannot be empty</div>
56 <div id="delete-slice-form" title="Delete a Slice" style="display: none;">
59 <div class="create-slice-row">
60 <label for="delete-slice">Choose a Slice</label>
61 <select id="delete-slice"></select>
66 <script type="text/javascript">
67 google.load('visualization', '1', {
68 'packages': ['controls', 'table', 'corechart', 'geochart']
72 $(document).ready(function () {
73 function showSliceData(rows,imageData,serviceLevelData,siteRows,dataSet,value) {
74 $("#service-level-value").empty();
75 $("#slice-image-value").empty();
76 $("#tenantSiteTable").empty();
77 $('#tenantSiteTable').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="tenantSiteTableData"></table>');
78 $("#tenantSliceDropDown").val(value);
82 if (rows[row]['sliceName'] == value) {
83 sliceImageData = rows[row]['preferredImage'];
84 $("#slice-image-value").html(sliceImageData);
85 serviceLevelDataBasic = rows[row]['sliceServiceClass'];
86 $("#service-level-value").html(serviceLevelDataBasic);
87 var innerRows = rows[row]['sliceSite'];
88 for (innerRow in innerRows) {
89 sliverCount = innerRows[innerRow];
90 siteNames.push([innerRow, sliverCount]);
94 oTable = $('#tenantSiteTableData').dataTable({
98 "bLengthChange": false,
102 "sTitle": "Site Name"
104 "sTitle": "Allocated",
105 sClass: "alignCenter"
109 $('#tenantSliceDropDown').on('change', function () {
110 var value = $("#tenantSliceDropDown").val();
112 checkForBasicAdvView(value,rows,imageData,serviceLevelData,siteRows,dataSet);
116 function downloadSliceInfo(rows,imageData,serviceLevelData,siteRows,dataSet,value){
117 $("#download-details").unbind().click(function(){
118 function download(filename, text) {
119 var sliceDetails = document.createElement('a');
120 sliceDetails.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
121 sliceDetails.setAttribute('download', filename);
122 sliceDetails.click();
126 if(rows[row]['sliceName']==value){
127 sliceInfo = "Slice Name: "+rows[row]['sliceName']+"\nNumber of Slivers: "+rows[row]['numOfSlivers']+"\nService Level: "+rows[row]['sliceServiceClass']+"\nImage: "+rows[row]['preferredImage']+"\n";
128 for (instanceNodePairs in rows[row]['instanceNodePair']){
129 sliceInfo += instanceNodePairs+"@"+rows[row]['instanceNodePair'][instanceNodePairs]+"\n";
133 download('slice.txt', sliceInfo);
136 function editSliverAdv() {
137 $(".edit-view").click(function () {
138 var allocatedSlivers = parseInt($(this).parent().siblings(".allocated").html());
139 var td = $(this).parent().siblings(".allocated");
140 var pos = oTable.fnGetPosition(td[0]);
141 $("#numOfSlivers").val("");;
142 $("#advNumOfSlivers").val("");;
143 $("#adv-tooltip").css("display", "none");
144 $("#adv-dialog-form").dialog({
149 dialogClass: "tenantDialog",
152 allocatedSlivers += parseInt($("#advNumOfSlivers").val());
153 $("#adv-tooltip").css("display", "block");
154 $(this).dialog("close");
155 td.html(allocatedSlivers);
157 "Remove": function () {
158 allocatedSlivers -= parseInt($("#advNumOfSlivers").val());
159 $("#adv-tooltip").css("display", "block");
160 $(this).dialog("close");
161 td.html(allocatedSlivers);
165 $("#adv-dialog-form").dialog("open");
169 function advShowSliceData(rows,imageData,serviceLevelData,siteRows,dataSet,value) {
170 $("#adv-service-level-value").empty();
171 $("#adv-slice-image-value").empty();
172 $("#adv-slice-data-set-value").empty();
173 $("#advTenantSliceDropDown").val(value);
174 $("<select></select>").attr('id', 'adv-service-level-dropdown').appendTo('#adv-service-level-value');
175 $("<select></select>").attr('id', 'adv-image-dropdown').appendTo('#adv-slice-image-value');
176 $("<select></select>").attr('id', 'adv-dataset-dropdown').appendTo('#adv-slice-data-set-value');
177 $('#advTenantSiteTable').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="advTenantSiteTableData"></table>');
181 for (row in serviceLevelData) {
182 $("#adv-service-level-dropdown").append("<option>" + serviceLevelData[row]['serviceClass'] + "</option>");
184 for (row in imageData) {
185 $("#adv-image-dropdown").append("<option>" + imageData[row]['Image'] + "</option>");
187 for (row in dataSet) {
188 $("#adv-dataset-dropdown").append("<option>" + dataSet[row]['DataSet'] + "</option>");
192 if (rows[row]['sliceName'] == value) {
193 var innerRows = rows[row]['sliceSite'];
194 $("#adv-service-level-dropdown").val(rows[row]['sliceServiceClass']);
195 $("#adv-image-dropdown").val(rows[row]['preferredImage']);
196 $("#adv-dataset-dropdown").val(rows[row]['sliceDataSet']);
197 for (innerRow in innerRows) {
198 tableData[innerRow] = innerRows[innerRow];
202 for (row in siteRows) {
203 var entry = siteRows[row]['siteName'];
204 if (!(entry in tableData)) {
205 tableData[siteRows[row]['siteName']] = 0;
208 for (row in tableData) {
209 siteNames.push([row, tableData[row], '<a href="#" class="edit-view">Edit</a>']);
211 $("#save-btn").unbind().click(function () {
212 var newTableData = {};
213 var newSite = $(".siteName");
214 var newAllocated = $(".allocated");
215 for (i = 1; i < newSite.length; i++) {
216 newTableData[$($(".siteName")[i]).text()] = parseInt($($(".allocated")[i]).text());
218 for (newRow in newTableData) {
219 if (newTableData[newRow] > tableData[newRow]) {
221 url: '/tenantaddorremsliver/',
225 count: newTableData[newRow] - tableData[newRow],
226 slice: $("#advTenantSliceDropDown").val(),
228 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
232 complete: function () {
237 } else if (newTableData[newRow] < tableData[newRow]) {
239 url: '/tenantaddorremsliver/',
243 count: tableData[newRow] - newTableData[newRow],
244 slice: $("#advTenantSliceDropDown").val(),
246 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
250 complete: function () {
257 url: '/updateslice/',
260 sliceName: $("#advTenantSliceDropDown").val(),
261 serviceClass: $("#adv-service-level-dropdown").val(),
262 imageName: $("#adv-image-dropdown").val(),
263 dataSet: $("#adv-dataset-dropdown").val(),
264 networkPorts: $("#adv-network-value").val(),
265 privateVolume: $("#private-vol-checkbox").is(":checked"),
266 actionToDo: "update",
267 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
271 complete: function () {
272 $("#tabs-5").empty();
273 initTenant(); //location.reload();
278 oTable = $('#advTenantSiteTableData').dataTable({
282 "bLengthChange": false,
287 "sTitle": "Site Name",
290 "sTitle": "Allocated",
291 sClass: "alignCenter allocated"
294 sClass: "alignCenter"
298 $('#advTenantSliceDropDown').on('change', function () {
299 var selectedValue = $("#advTenantSliceDropDown").val();
300 checkForBasicAdvView(selectedValue, rows,imageData,serviceLevelData,siteRows,dataSet);
304 function checkForBasicAdvView(value, rows,imageData,serviceLevelData,siteRows,dataSet) {
306 if (rows[row]['sliceName'] == value) {
307 if (rows[row]['numOfSites'] > 1) {
308 advShowSliceData(rows,imageData,serviceLevelData,siteRows,dataSet,value);
309 downloadSliceInfo(rows,imageData,serviceLevelData,siteRows,dataSet,value);
310 $("#tenantSliceDataWrapper").css("display","none");
311 $("#advancedTenantSliceDataWrapper").css("display","block");
312 $("#advTenantSiteTable").css("display","block");
313 $("#tenantSiteTable").css("display","none");
314 $("#sliver-btn").css("display","none");
315 $("#save-btn").css("display","block");
317 } else if(rows[row]['numOfSites'] <= 1){
318 showSliceData(rows,imageData,serviceLevelData,siteRows,dataSet,value);
319 downloadSliceInfo(rows,imageData,serviceLevelData,siteRows,dataSet,value);
320 $("#tenantSliceDataWrapper").css("display","block");
321 $("#advancedTenantSliceDataWrapper").css("display","none");
322 $("#advTenantSiteTable").css("display","none");
323 $("#tenantSiteTable").css("display","block");
324 $("#sliver-btn").css("display","block");
325 $("#save-btn").css("display","none");
332 function UserSliceTable(rows,imageData,serviceLevelData,siteRows,dataSet) {
333 //Add check for #dynamicusersliceinfo_filter label-> input having focus here
334 $("<div></div>").attr('id', 'tenantSliceDataWrapper').appendTo('#tabs-5');
335 $("<div></div>").attr('id', 'advancedTenantSliceDataWrapper').appendTo('#tabs-5');
337 sliceData += '<div class="tenant-row public-key-warning"><span class="summary-attr">You have not uploaded your Public Key. <a href="http://{{ request.get_host}}/admin/core/user/{{user.id}}">Click here</a> to upload it now.</span></div><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>';
338 var advSliceData = '';
339 advSliceData += '<div class="tenant-row public-key-warning"><span class="summary-attr">You have not uploaded your Public Key. <a href="http://{{ request.get_host}}/admin/core/user/{{user.id}}">Click here</a> to upload it now.</span></div><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 class="help-inline">Changes are potentially disruptive to existing slivers</span> </span><br></div><div class="tenant-row"><span class="summary-attr"><b>Image:</b> <span id="adv-slice-image-value"> </span><span class="help-inline">Changes are potentially disruptive to existing slivers</span> </span><br></div><div class="tenant-row"><span class="summary-attr"><b>Network:</b> <input type="text" name="adv-network-value" id="adv-network-value"> <span class="help-inline">List of port ranges(if any) e.g. 1021-1026,1029</span><br></div><div class="tenant-row"><span class="summary-attr"><b>Data Sets:</b> <span id="adv-slice-data-set-value"> </span> <input type="checkbox" name="checkbox" id="private-vol-checkbox" value="value"><span class="help-inline">Include Private Volume</span></span></div>';
340 $('#tenantSliceDataWrapper').append(sliceData).css("display", "none");
341 $('#advancedTenantSliceDataWrapper').append(advSliceData);
342 $("#advancedTenantSliceDataWrapper").css("display", "none");
343 $("<select></select>").attr('id', 'tenantSliceDropDown').appendTo('#slice-name-value');
345 $("#tenantSliceDropDown").append("<option>" + rows[row]['sliceName'] + "</option>");
347 $("<select></select>").attr('id', 'advTenantSliceDropDown').appendTo('#adv-slice-name-value');
349 $("#advTenantSliceDropDown").append("<option>" + rows[row]['sliceName'] + "</option>");
351 $("<div></div>").attr('id', 'tenantSiteTable').appendTo('#tabs-5').css("display","none");
352 $("<div></div>").attr('id', 'advTenantSiteTable').appendTo('#tabs-5').css("display", "none");
353 $('<div class="btn btn-success" id="create-slice-btn"><i class="icon-plus-sign icon-white"></i> Create New Slice</div>').appendTo("#tabs-5");
354 $('<div class="btn btn-success" id="delete-slice-btn"><i class="icon-plus-sign icon-white"></i> Delete a Slice</div>').appendTo("#tabs-5");
355 $('<div class="btn btn-high btn-info" id="download-details">Download Slice Details</div>').appendTo("#tabs-5");
356 $('<div class="btn btn-success" id="sliver-btn"><i class="icon-plus-sign icon-white"></i> Add/Remove Slivers</div>').appendTo("#tabs-5");
357 $('<div class="btn btn-high btn-info" id="save-btn">Save</div>').appendTo("#tabs-5").css("display", "none");
358 $("#advanced-tenant").unbind().click(function () {
359 var value = $("#tenantSliceDropDown").val();
360 advShowSliceData(rows,imageData,serviceLevelData,siteRows,dataSet,value);
361 $("#tenantSliceDataWrapper").css("display","none");
362 $("#advancedTenantSliceDataWrapper").css("display","block");
363 $("#advTenantSiteTable").css("display","block");
364 $("#tenantSiteTable").css("display","none");
365 $("#sliver-btn").toggle();
366 $("#save-btn").toggle();
369 $("#sliver-btn").click(function () {
370 $("#basic-tooltip").css("display", "none");
371 $("#dialog-form").dialog({
376 dialogClass: "tenantDialog",
380 url: '/tenantaddorremsliver/',
383 count: parseInt($("#numOfSlivers").val()),
384 slice: $("#tenantSliceDropDown").val(),
386 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
390 beforeSend: function () {
391 if (!$("#numOfSlivers").val()) {
392 $("#basic-tooltip").css("display", "block");
398 success: function () {
400 $("#dialog-form").dialog("close");
404 Remove: function () {
406 url: '/tenantaddorremsliver/',
409 count: parseInt($("#numOfSlivers").val()),
410 slice: $("#tenantSliceDropDown").val(),
412 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
416 beforeSend: function () {
417 if (!$("#numOfSlivers").val()) {
418 $("#basic-tooltip").css("display", "block");
424 success: function () {
425 $("#dialog-form").dialog("close");
433 $("#dialog-form").dialog("open");
435 $("#create-slice-btn").unbind().click(function () {
436 $("#new-service-class").empty();
437 $("#new-image").empty();
438 $("#mount-data-sets").empty();
439 $("#new-network").empty();
440 for (row in serviceLevelData) {
441 $("#new-service-class").append("<option>" + serviceLevelData[row]['serviceClass'] + "</option>");
443 for (row in imageData) {
444 $("#new-image").append("<option>" + imageData[row]['Image'] + "</option>");
446 for (row in dataSet) {
447 $("#mount-data-sets").append("<option>" + dataSet[row]['DataSet'] + "</option>");
449 var nameOfSlice = $("#new-slice-name").val();
450 var nameOfServiceClass = $("#new-service-class").val();
451 var nameOfImage = $("#new-image").val();
452 $("#create-slice-form").dialog({
457 dialogClass: "tenantDialog",
459 "Submit": function () {
461 url: '/createnewslice/',
464 sliceName: $("#new-slice-name").val(),
465 serviceClass: nameOfServiceClass,
466 imageName: $("#new-image").val(),
467 network: $("#new-network").val(),
468 privateVolume: $("#private-vol").is(":checked"),
469 mountDataSets: $("#mount-data-sets").val(),
471 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
476 beforeSend: function () {
477 if (!$("#new-slice-name").val()) {
478 $("#tooltip").css("display", "block");
484 success: function (response) {},
485 complete: function () {
490 url: '/tenantaddorremsliver/',
493 count: parseInt($("#number-of-slivers").val()),
494 slice: $("#new-slice-name").val(),
496 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
501 complete: function () {
507 Cancel: function () {
508 $(this).dialog("close");
512 $("#create-slice-form").dialog("open");
514 $("#delete-slice-btn").unbind().click(function () {
515 $("#delete-slice").empty();
517 $("#delete-slice").append("<option>" + rows[row]['sliceName'] + "</option>");
519 $("#delete-slice-form").dialog({
524 dialogClass: "tenantDialog",
526 "Delete": function () {
528 url: '/tenantdeleteslice/',
531 sliceName: $("#delete-slice").val(),
532 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
536 success: function (response) {},
537 complete: function () {
542 Cancel: function () {
543 $(this).dialog("close");
547 $("#delete-slice-form").dialog("open");
552 function initTenant() {
556 success: function (data) {
557 var rows = data['userSliceInfo']['rows'];
558 var imageData = data['image']['rows'];
559 //var networkData = data['network']['rows'];
560 var serviceLevelData = data['sliceServiceClass']['rows'];
561 var siteRows = data['sites']['rows'];
562 var dataSet = data['mountDataSets']['rows'];
563 UserSliceTable(rows,imageData,serviceLevelData,siteRows,dataSet);
564 if(!(data['publicKey'])){
565 $(".public-key-warning").css("display","block");
567 var value = $("#tenantSliceDropDown").val();
568 checkForBasicAdvView(value,rows,imageData,serviceLevelData,siteRows,dataSet);
569 $("#tooltip").css("display", "none");
570 $("#basic-tooltip").css("display", "none");
571 $("#adv-tooltip").css("display", "none");
573 complete: function () {}