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="add-user-form" title="Add User" style="display: none;">
24 <div class="create-slice-row">
25 <label for="add-slice-user">Add User</label>
26 <select id="add-slice-user" class="tenant-create-slice"></select>
31 <div id="create-slice-form" title="Create New Slice" style="display: none;">
34 <div class="create-slice-row">
35 <label for="new-slice-name">Name</label>
36 <input type="text" name="new-slice-name" id="new-slice-name">
38 <div class="create-slice-row">
39 <label for="new-service-class">Service Class</label>
40 <select id="new-service-class" class="tenant-create-slice"></select>
42 <div class="create-slice-row">
43 <label for="new-image">Image</label>
44 <select id="new-image" class="tenant-create-slice"></select>
46 <div class="create-slice-row">
47 <label for="new-network">Network Ports</label>
48 <input type="text" name="new-network" id="new-network">
50 <div class="create-slice-row">
51 <label for="private-vol">Include Private Vol</label>
52 <input type="checkbox" name="checkbox" id="private-vol" value="value">
54 <div class="create-slice-row">
55 <label for="add-user">Add User</label>
56 <select id="add-user" class="tenant-create-slice"></select>
58 <div class="create-slice-row">
59 <label for="mount-data-sets">Data Set</label>
60 <select id="mount-data-sets" class="tenant-create-slice"></select>
62 <div class="create-slice-row">
63 <label for="number-of-slivers">Number Of Slivers</label>
64 <input type="text" name="number-of-slivers" id="number-of-slivers">
66 <div id=tooltip>Slice Name cannot be empty</div>
70 <div id="delete-slice-form" title="Delete a Slice" style="display: none;">
73 <div class="create-slice-row">
74 <label for="delete-slice">Choose a Slice</label>
75 <select id="delete-slice"></select>
80 <script type="text/javascript">
81 google.load('visualization', '1', {
82 'packages': ['controls', 'table', 'corechart', 'geochart']
86 $(document).ready(function () {
87 function showSliceData(rows,imageData,serviceLevelData,siteRows,dataSet,value) {
88 $("#service-level-value").empty();
89 $("#slice-image-value").empty();
90 $("#tenantSiteTable").empty();
91 $('#tenantSiteTable').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="tenantSiteTableData"></table>');
92 $("#tenantSliceDropDown").val(value);
96 if (rows[row]['sliceName'] == value) {
97 sliceImageData = rows[row]['preferredImage'];
98 $("#slice-image-value").html(sliceImageData);
99 serviceLevelDataBasic = rows[row]['sliceServiceClass'];
100 $("#service-level-value").html(serviceLevelDataBasic);
101 var innerRows = rows[row]['sliceSite'];
102 for (innerRow in innerRows) {
103 sliverCount = innerRows[innerRow];
104 siteNames.push([innerRow, sliverCount]);
108 oTable = $('#tenantSiteTableData').dataTable({
112 "bLengthChange": false,
116 "sTitle": "Site Name"
118 "sTitle": "Allocated",
119 sClass: "alignCenter"
123 $('#tenantSliceDropDown').on('change', function () {
124 var value = $("#tenantSliceDropDown").val();
126 checkForBasicAdvView(value,rows,imageData,serviceLevelData,siteRows,dataSet);
130 function downloadSliceInfo(rows,imageData,serviceLevelData,siteRows,dataSet,value){
131 $("#download-details").unbind().click(function(){
132 function download(filename, text) {
133 var sliceDetails = document.createElement('a');
134 sliceDetails.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
135 sliceDetails.setAttribute('download', filename);
136 sliceDetails.click();
140 if(rows[row]['sliceName']==value){
141 sliceInfo = "Slice Name: "+rows[row]['sliceName']+"\nNumber of Slivers: "+rows[row]['numOfSlivers']+"\nService Level: "+rows[row]['sliceServiceClass']+"\nImage: "+rows[row]['preferredImage']+"\n";
142 for (instanceNodePairs in rows[row]['instanceNodePair']){
143 sliceInfo += instanceNodePairs+"@"+rows[row]['instanceNodePair'][instanceNodePairs]+"\n";
147 download('slice.txt', sliceInfo);
150 function editSliverAdv() {
151 $(".edit-view").click(function () {
152 var allocatedSlivers = parseInt($(this).parent().siblings(".allocated").html());
153 var td = $(this).parent().siblings(".allocated");
154 var pos = oTable.fnGetPosition(td[0]);
155 $("#numOfSlivers").val("");;
156 $("#advNumOfSlivers").val("");;
157 $("#adv-tooltip").css("display", "none");
158 $("#adv-dialog-form").dialog({
163 dialogClass: "tenantDialog",
166 allocatedSlivers += parseInt($("#advNumOfSlivers").val());
167 $("#adv-tooltip").css("display", "block");
168 $(this).dialog("close");
169 td.html(allocatedSlivers);
171 "Remove": function () {
172 allocatedSlivers -= parseInt($("#advNumOfSlivers").val());
173 $("#adv-tooltip").css("display", "block");
174 $(this).dialog("close");
175 td.html(allocatedSlivers);
179 $("#adv-dialog-form").dialog("open");
183 function advShowSliceData(rows,imageData,serviceLevelData,siteRows,dataSet,value) {
184 $("#adv-service-level-value").empty();
185 $("#adv-slice-image-value").empty();
186 $("#adv-slice-data-set-value").empty();
187 $("#advTenantSliceDropDown").val(value);
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-dataset-dropdown').appendTo('#adv-slice-data-set-value');
191 $('#advTenantSiteTable').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="advTenantSiteTableData"></table>');
195 for (row in serviceLevelData) {
196 $("#adv-service-level-dropdown").append("<option>" + serviceLevelData[row]['serviceClass'] + "</option>");
198 for (row in imageData) {
199 $("#adv-image-dropdown").append("<option>" + imageData[row] + "</option>");
201 for (row in dataSet) {
202 $("#adv-dataset-dropdown").append("<option>" + dataSet[row]['DataSet'] + "</option>");
206 if (rows[row]['sliceName'] == value) {
207 var innerRows = rows[row]['sliceSite'];
208 $("#adv-service-level-dropdown").val(rows[row]['sliceServiceClass']);
209 $("#adv-image-dropdown").val(rows[row]['preferredImage']);
210 $("#adv-dataset-dropdown").val(rows[row]['sliceDataSet']);
211 for (innerRow in innerRows) {
212 tableData[innerRow] = innerRows[innerRow];
216 for (row in siteRows) {
217 //var entry = siteRows[row]['siteName'];
218 var entry = siteRows[row];
219 if (!(entry in tableData)) {
220 //tableData[siteRows[row]['siteName']] = 0;
221 tableData[siteRows[row]] = 0;
224 for (row in tableData) {
225 siteNames.push([row, tableData[row], '<a href="#" class="edit-view">Edit</a>']);
227 $("#save-btn").unbind().click(function () {
228 var newTableData = {};
229 var newSite = $(".siteName");
230 var newAllocated = $(".allocated");
231 for (i = 1; i < newSite.length; i++) {
232 newTableData[$($(".siteName")[i]).text()] = parseInt($($(".allocated")[i]).text());
234 for (newRow in newTableData) {
235 if (newTableData[newRow] > tableData[newRow]) {
237 url: '/tenantaddorremsliver/',
241 count: newTableData[newRow] - tableData[newRow],
242 slice: $("#advTenantSliceDropDown").val(),
243 image: $("#adv-image-dropdown").val(),
245 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
249 complete: function () {
254 } else if (newTableData[newRow] < tableData[newRow]) {
256 url: '/tenantaddorremsliver/',
260 count: tableData[newRow] - newTableData[newRow],
261 slice: $("#advTenantSliceDropDown").val(),
262 image: $("#adv-image-dropdown").val(),
264 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
268 complete: function () {
275 url: '/updateslice/',
278 sliceName: $("#advTenantSliceDropDown").val(),
279 serviceClass: $("#adv-service-level-dropdown").val(),
280 imageName: $("#adv-image-dropdown").val(),
281 dataSet: $("#adv-dataset-dropdown").val(),
282 networkPorts: $("#adv-network-value").val(),
283 privateVolume: $("#private-vol-checkbox").is(":checked"),
284 actionToDo: "update",
285 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
289 success: function () {
290 $("#tabs-5").empty();
291 initTenant(); //location.reload();
293 error:function (xhr, textStatus, thrownError){
294 errorDialog("Error:", textStatus + " " + xhr.responseText);
300 oTable = $('#advTenantSiteTableData').dataTable({
304 "bLengthChange": false,
309 "sTitle": "Site Name",
312 "sTitle": "Allocated",
313 sClass: "alignCenter allocated"
316 sClass: "alignCenter"
320 $('#advTenantSliceDropDown').on('change', function () {
321 var selectedValue = $("#advTenantSliceDropDown").val();
322 checkForBasicAdvView(selectedValue, rows,imageData,serviceLevelData,siteRows,dataSet);
326 function checkForBasicAdvView(value, rows,imageData,serviceLevelData,siteRows,dataSet) {
328 if (rows[row]['sliceName'] == value) {
329 if (rows[row]['numOfSites'] > 1) {
330 advShowSliceData(rows,imageData,serviceLevelData,siteRows,dataSet,value);
331 downloadSliceInfo(rows,imageData,serviceLevelData,siteRows,dataSet,value);
332 $("#tenantSliceDataWrapper").css("display","none");
333 $("#advancedTenantSliceDataWrapper").css("display","block");
334 $("#advTenantSiteTable").css("display","block");
335 $("#tenantSiteTable").css("display","none");
336 $("#sliver-btn").css("display","none");
337 $("#save-btn").css("display","block");
339 } else if(rows[row]['numOfSites'] <= 1){
340 showSliceData(rows,imageData,serviceLevelData,siteRows,dataSet,value);
341 downloadSliceInfo(rows,imageData,serviceLevelData,siteRows,dataSet,value);
342 $("#tenantSliceDataWrapper").css("display","block");
343 $("#advancedTenantSliceDataWrapper").css("display","none");
344 $("#advTenantSiteTable").css("display","none");
345 $("#tenantSiteTable").css("display","block");
346 $("#sliver-btn").css("display","block");
347 $("#save-btn").css("display","none");
354 function UserSliceTable(rows,imageData,serviceLevelData,siteRows,dataSet,siteUsers) {
355 //Add check for #dynamicusersliceinfo_filter label-> input having focus here
356 $("<div></div>").attr('id', 'tenantSliceDataWrapper').appendTo('#tabs-5');
357 $("<div></div>").attr('id', 'advancedTenantSliceDataWrapper').appendTo('#tabs-5');
359 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>';
360 var advSliceData = '';
361 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 Set:</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>';
362 $('#tenantSliceDataWrapper').append(sliceData).css("display", "none");
363 $('#advancedTenantSliceDataWrapper').append(advSliceData);
364 $("#advancedTenantSliceDataWrapper").css("display", "none");
365 $("<select></select>").attr('id', 'tenantSliceDropDown').appendTo('#slice-name-value');
367 $("#tenantSliceDropDown").append("<option>" + rows[row]['sliceName'] + "</option>");
369 $("<select></select>").attr('id', 'advTenantSliceDropDown').appendTo('#adv-slice-name-value');
371 $("#advTenantSliceDropDown").append("<option>" + rows[row]['sliceName'] + "</option>");
373 $("<div></div>").attr('id', 'tenantSiteTable').appendTo('#tabs-5').css("display","none");
374 $("<div></div>").attr('id', 'advTenantSiteTable').appendTo('#tabs-5').css("display", "none");
375 $('<div class="btn btn-success" id="create-slice-btn"><i class="icon-plus-sign icon-white"></i> Create New Slice</div>').appendTo("#tabs-5");
376 $('<div class="btn btn-success" id="delete-slice-btn"><i class="icon-plus-sign icon-white"></i> Delete a Slice</div>').appendTo("#tabs-5");
377 $('<div class="btn btn-success" id="add-user-btn"><i class="icon-plus-sign icon-white"></i> Add User</div>').appendTo("#tabs-5");
378 $('<div class="btn btn-high btn-info" id="download-details">Download Slice Details</div>').appendTo("#tabs-5");
379 $('<div class="btn btn-success" id="sliver-btn"><i class="icon-plus-sign icon-white"></i> Add/Remove Slivers</div>').appendTo("#tabs-5");
380 $('<div class="btn btn-high btn-info" id="save-btn">Save</div>').appendTo("#tabs-5").css("display", "none");
381 $("#advanced-tenant").unbind().click(function () {
382 var value = $("#tenantSliceDropDown").val();
383 advShowSliceData(rows,imageData,serviceLevelData,siteRows,dataSet,value);
384 $("#tenantSliceDataWrapper").css("display","none");
385 $("#advancedTenantSliceDataWrapper").css("display","block");
386 $("#advTenantSiteTable").css("display","block");
387 $("#tenantSiteTable").css("display","none");
388 $("#sliver-btn").toggle();
389 $("#save-btn").toggle();
392 $("#sliver-btn").click(function () {
393 $("#basic-tooltip").css("display", "none");
394 $("#dialog-form").dialog({
399 dialogClass: "tenantDialog",
403 url: '/tenantaddorremsliver/',
406 count: parseInt($("#numOfSlivers").val()),
407 slice: $("#tenantSliceDropDown").val(),
408 image: $("#slice-image-value").html(),
410 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
414 beforeSend: function () {
415 if (!$("#numOfSlivers").val()) {
416 $("#basic-tooltip").css("display", "block");
422 success: function () {
424 $("#dialog-form").dialog("close");
428 Remove: function () {
430 url: '/tenantaddorremsliver/',
433 count: parseInt($("#numOfSlivers").val()),
434 slice: $("#tenantSliceDropDown").val(),
435 image: $("#slice-image-value").html(),
437 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
441 beforeSend: function () {
442 if (!$("#numOfSlivers").val()) {
443 $("#basic-tooltip").css("display", "block");
449 success: function () {
450 $("#dialog-form").dialog("close");
458 $("#dialog-form").dialog("open");
460 $("#add-user-btn").unbind().click(function(){
461 $("#add-slice-user").empty();
462 for (row in siteUsers) {
463 $("#add-slice-user").append("<option>" + siteUsers[row] + "</option>");
465 $("#add-user-form").dialog({
470 dialogClass: "tenantDialog",
472 "Submit": function () {
477 sliceName: $("#advTenantSliceDropDown").val(),
478 userEmail: $("#add-slice-user").val(),
479 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
484 success: function () {
490 Cancel: function () {
491 $(this).dialog("close");
495 $("#add-user-form").dialog("open");
499 $("#create-slice-btn").unbind().click(function () {
500 $("#new-service-class").empty();
501 $("#new-image").empty();
502 $("#add-user").empty();
503 $("#mount-data-sets").empty();
504 $("#new-network").empty();
505 for (row in serviceLevelData) {
506 $("#new-service-class").append("<option>" + serviceLevelData[row]['serviceClass'] + "</option>");
508 for (row in imageData) {
509 $("#new-image").append("<option>" + imageData[row] + "</option>");
511 for (row in dataSet) {
512 $("#mount-data-sets").append("<option>" + dataSet[row]['DataSet'] + "</option>");
514 for (row in siteUsers) {
515 $("#add-user").append("<option>" + siteUsers[row] + "</option>");
517 var nameOfSlice = $("#new-slice-name").val();
518 var nameOfServiceClass = $("#new-service-class").val();
519 var nameOfImage = $("#new-image").val();
520 $("#create-slice-form").dialog({
525 dialogClass: "tenantDialog",
527 "Submit": function () {
529 url: '/createnewslice/',
532 sliceName: $("#new-slice-name").val(),
533 serviceClass: nameOfServiceClass,
534 imageName: $("#new-image").val(),
535 network: $("#new-network").val(),
536 privateVolume: $("#private-vol").is(":checked"),
537 mountDataSets: $("#mount-data-sets").val(),
538 userEmail: $("#add-user").val(),
540 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
545 beforeSend: function () {
546 if (!$("#new-slice-name").val()) {
547 $("#tooltip").css("display", "block");
553 success: function () {
558 url: '/tenantaddorremsliver/',
561 count: parseInt($("#number-of-slivers").val()),
562 slice: $("#new-slice-name").val(),
563 image: $("#new-image").val(),
565 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
570 success: function () {
576 Cancel: function () {
577 $(this).dialog("close");
581 $("#create-slice-form").dialog("open");
583 $("#delete-slice-btn").unbind().click(function () {
584 $("#delete-slice").empty();
586 $("#delete-slice").append("<option>" + rows[row]['sliceName'] + "</option>");
588 $("#delete-slice-form").dialog({
593 dialogClass: "tenantDialog",
595 "Delete": function () {
597 url: '/tenantdeleteslice/',
600 sliceName: $("#delete-slice").val(),
601 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
605 success: function () {
608 error:function (xhr, textStatus, thrownError){
609 errorDialog("Error:", textStatus + " " + xhr.responseText);
613 Cancel: function () {
614 $(this).dialog("close");
618 $("#delete-slice-form").dialog("open");
623 function initTenant() {
627 success: function (data) {
628 var rows = data['userSliceInfo']['rows'];
629 var imageData = data['image']['rows'];
630 //var networkData = data['network']['rows'];
631 var serviceLevelData = data['sliceServiceClass']['rows'];
632 //var siteRows = data['sites']['rows'];
633 var siteRows = data['availableSites']['rows'];
634 var dataSet = data['mountDataSets']['rows'];
635 var siteUsers = data['siteUsers'];
636 UserSliceTable(rows,imageData,serviceLevelData,siteRows,dataSet,siteUsers);
637 if(!(data['publicKey'])){
638 $(".public-key-warning").css("display","block");
640 var value = $("#tenantSliceDropDown").val();
641 checkForBasicAdvView(value,rows,imageData,serviceLevelData,siteRows,dataSet);
642 $("#tooltip").css("display", "none");
643 $("#basic-tooltip").css("display", "none");
644 $("#adv-tooltip").css("display", "none");
645 if(!(data['role']=="pi"||data['role']=="admin")){
646 $("#create-slice-btn").off();
647 $("#create-slice-btn").css('background','grey');
648 $("#delete-slice-btn").off();
649 $("#delete-slice-btn").css('background','grey');
650 $("#add-user-btn").off();
651 $("#add-user-btn").css('background','grey');
654 complete: function () {}