| <!doctype html> |
| <script type="text/javascript" src="http://www.google.com/jsapi"></script> |
| <div id="dialog-form" title="Add/Remove Slivers" style="display: none;"> |
| <form> |
| <fieldset> |
| <label for="numberOfSlivers">Number of Slivers</label> |
| <input type="text" name="numberOfSlivers" id="numOfSlivers" class="text ui-widget-content ui-corner-all"> |
| <div id=basic-tooltip>Please enter number of slivers</div> |
| </fieldset> |
| </form> |
| </div> |
| <div id="adv-dialog-form" title="Add/Remove Slivers" style="display: none;"> |
| <form> |
| <fieldset> |
| <label for="numberOfSlivers">Number of Slivers</label> |
| <input type="text" name="numberOfSlivers" id="advNumOfSlivers" class="text ui-widget-content ui-corner-all"> |
| <div id=adv-tooltip>Please enter number of slivers</div> |
| </fieldset> |
| </form> |
| </div> |
| <div id="create-slice-form" title="Create New Slice" style="display: none;"> |
| <form> |
| <fieldset> |
| <div class="create-slice-row"> |
| <label for="new-slice-name">Name</label> |
| <input type="text" name="new-slice-name" id="new-slice-name" class="text tenant-create-slice"> |
| </div> |
| <div class="create-slice-row"> |
| <label for="new-service-class">Service Class</label> |
| <select id="new-service-class" class="tenant-create-slice"></select> |
| </div> |
| <div class="create-slice-row"> |
| <label for="new-image">Image</label> |
| <select id="new-image" class="tenant-create-slice"></select> |
| </div> |
| <div class="create-slice-row"> |
| <label for="new-network">Network</label> |
| <select id="new-network" class="tenant-create-slice"></select> |
| </div> |
| <div class="create-slice-row"> |
| <label for="mount-data-sets">Data Sets</label> |
| <select id="mount-data-sets" class="tenant-create-slice"></select> |
| </div> |
| <div class="create-slice-row"> |
| <label for="number-of-slivers">Number Of Slivers</label> |
| <input type="text" name="number-of-slivers" id="number-of-slivers" class="text tenant-create-slice"> |
| </div> |
| <div id=tooltip>Slice Name cannot be empty</div> |
| </fieldset> |
| </form> |
| </div> |
| <div id="delete-slice-form" title="Delete a Slice" style="display: none;"> |
| <form> |
| <fieldset> |
| <div class="create-slice-row"> |
| <label for="delete-slice">Choose a Slice</label> |
| <select id="delete-slice"></select> |
| </div> |
| </fieldset> |
| </form> |
| </div> |
| <script type="text/javascript"> |
| google.load('visualization', '1', { |
| 'packages': ['controls', 'table', 'corechart', 'geochart'] |
| }); |
| </script> |
| <script> |
| $(document).ready(function () { |
| function showSliceData(data,value) { |
| var imageData = data['image']['rows']; |
| var networkData = data['network']['rows']; |
| $("#service-level-value").empty(); |
| $("#slice-image-value").empty(); |
| $("#tenantSiteTable").empty(); |
| $('#tenantSiteTable').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="tenantSiteTableData"></table>'); |
| $("#tenantSliceDropDown").val(value); |
| var rows = data['userSliceInfo']['rows']; |
| var siteNames = []; |
| var sliverCount; |
| for (row in rows) { |
| if (rows[row]['sliceName'] == value) { |
| sliceImageData = rows[row]['preferredImage']; |
| $("#slice-image-value").html(sliceImageData); |
| serviceLevelData = rows[row]['sliceServiceClass']; |
| $("#service-level-value").html(serviceLevelData); |
| var innerRows = rows[row]['sliceSite']; |
| for (innerRow in innerRows) { |
| sliverCount = innerRows[innerRow]; |
| siteNames.push([innerRow, sliverCount]); |
| } |
| } |
| } |
| oTable = $('#tenantSiteTableData').dataTable({ |
| "bJQueryUI": true, |
| "bFilter": false, |
| "bInfo": false, |
| "bLengthChange": false, |
| "aaData": siteNames, |
| "bStateSave": true, |
| "aoColumns": [{ |
| "sTitle": "Site Name" |
| }, { |
| "sTitle": "Allocated", |
| sClass: "alignCenter" |
| } |
| //{ "sTitle": "Allocated" , sClass: "alignCenter"}, |
| //{ "sTitle": "Desired" , sClass: "alignCenter"}, |
| ] |
| }); |
| $('#tenantSliceDropDown').on('change', function () { |
| var value = $("#tenantSliceDropDown").val(); |
| //alert(value); |
| checkForBasicAdvView(value, data); |
| }); |
| } |
| |
| function downloadSliceInfo(data,value){ |
| $("#download-details").unbind().click(function(){ |
| function download(filename, text) { |
| var sliceDetails = document.createElement('a'); |
| sliceDetails.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); |
| sliceDetails.setAttribute('download', filename); |
| sliceDetails.click(); |
| } |
| var rows = data['userSliceInfo']['rows']; |
| var sliceInfo; |
| for (row in rows){ |
| if(rows[row]['sliceName']==value){ |
| sliceInfo = "Slice Name: "+rows[row]['sliceName']+"\nNumber of Slivers: "+rows[row]['numOfSlivers']+"\nService Level: "+rows[row]['sliceServiceClass']+"\nImage: "+rows[row]['sliceImage']+"\n"; |
| for (instanceNodePairs in rows[row]['instanceNodePair']){ |
| sliceInfo += instanceNodePairs+"@"+rows[row]['instanceNodePair'][instanceNodePairs]+"\n"; |
| } |
| } |
| } |
| download('slice.txt', sliceInfo); |
| }); |
| } |
| function editSliverAdv() { |
| $(".edit-view").click(function () { |
| var allocatedSlivers = parseInt($(this).parent().siblings(".allocated").html()); |
| var td = $(this).parent().siblings(".allocated"); |
| var pos = oTable.fnGetPosition(td[0]); |
| $("#adv-tooltip").css("display", "none"); |
| $("#numOfSlivers").empty(); |
| $("#adv-dialog-form").dialog({ |
| autoOpen: false, |
| height: 200, |
| width: 350, |
| modal: true, |
| dialogClass: "tenantDialog", |
| buttons: { |
| "Add": function () { |
| allocatedSlivers += parseInt($("#advNumOfSlivers").val()); |
| //if (!(parseInt($("#numOfSlivers").val()))) { |
| $("#adv-tooltip").css("display", "block"); |
| //} else { |
| $(this).dialog("close"); |
| td.html(allocatedSlivers); |
| //} |
| }, |
| "Remove": function () { |
| allocatedSlivers -= parseInt($("#advNumOfSlivers").val()); |
| // if (!(parseInt($("#numOfSlivers").val()))) { |
| $("#adv-tooltip").css("display", "block"); |
| // } else { |
| $(this).dialog("close"); |
| td.html(allocatedSlivers); |
| // } |
| } |
| } |
| }); |
| $("#adv-dialog-form").dialog("open"); |
| }); |
| } |
| |
| function advShowSliceData(data,value) { |
| var serviceLevelData = data['sliceServiceClass']['rows']; |
| var imageData = data['image']['rows']; |
| var networkData = data['network']['rows']; |
| var siteRows = data['sites']['rows']; |
| var dataSet = data['mountDataSets']['rows']; |
| $("#adv-service-level-value").empty(); |
| $("#adv-slice-image-value").empty(); |
| $("#adv-slice-data-set-value").empty(); |
| $("#adv-slice-network-value").empty(); |
| $("#advTenantSliceDropDown").val(value); |
| $("<select></select>").attr('id', 'adv-service-level-dropdown').appendTo('#adv-service-level-value'); |
| $("<select></select>").attr('id', 'adv-image-dropdown').appendTo('#adv-slice-image-value'); |
| $("<select></select>").attr('id', 'adv-network-dropdown').appendTo('#adv-slice-network-value'); |
| $("<select></select>").attr('id', 'adv-dataset-dropdown').appendTo('#adv-slice-data-set-value'); |
| $('#advTenantSiteTable').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="advTenantSiteTableData"></table>'); |
| var rows = data['userSliceInfo']['rows']; |
| var siteNames = []; |
| var sliverCount; |
| var tableData = {}; |
| for (row in serviceLevelData) { |
| $("#adv-service-level-dropdown").append("<option>" + serviceLevelData[row]['serviceClass'] + "</option>"); |
| } |
| for (row in imageData) { |
| $("#adv-image-dropdown").append("<option>" + imageData[row]['Image'] + "</option>"); |
| } |
| for (row in networkData) { |
| $("#adv-network-dropdown").append("<option>" + networkData[row]['Network'] + "</option>"); |
| } |
| for (row in dataSet) { |
| $("#adv-dataset-dropdown").append("<option>" + dataSet[row]['DataSet'] + "</option>"); |
| } |
| |
| for (row in rows) { |
| if (rows[row]['sliceName'] == value) { |
| var innerRows = rows[row]['sliceSite']; |
| $("#adv-service-level-dropdown").val(rows[row]['sliceServiceClass']); |
| $("#adv-image-dropdown").val(rows[row]['preferredImage']); |
| $("#adv-dataset-dropdown").val(rows[row]['sliceDataSet']); |
| $("#adv-network-dropdown").val(rows[row]['sliceNetwork']); |
| for (innerRow in innerRows) { |
| tableData[innerRow] = innerRows[innerRow]; |
| } |
| } |
| } |
| for (row in siteRows) { |
| var entry = siteRows[row]['siteName']; |
| if (!(entry in tableData)) { |
| tableData[siteRows[row]['siteName']] = 0; |
| } |
| } |
| for (row in tableData) { |
| siteNames.push([row, tableData[row], '<a href="#" class="edit-view">Edit</a>']); |
| } |
| $("#save-btn").unbind().click(function () { |
| var newTableData = {}; |
| var newSite = $(".siteName"); |
| var newAllocated = $(".allocated"); |
| for (i = 1; i < newSite.length; i++) { |
| newTableData[$($(".siteName")[i]).text()] = parseInt($($(".allocated")[i]).text()); |
| } |
| for (newRow in newTableData) { |
| if (newTableData[newRow] > tableData[newRow]) { |
| $.ajax({ |
| url: '/tenantaddorremsliver/', |
| dataType: 'json', |
| data: { |
| siteName: newRow, |
| count: newTableData[newRow] - tableData[newRow], |
| slice: $("#advTenantSliceDropDown").val(), |
| actionToDo: "add", |
| csrfmiddlewaretoken: "{{ csrf_token }}", // < here |
| state: "inactive" |
| }, |
| type: 'POST', |
| complete: function () { |
| //oTable.fnReloadAjax(); |
| location.reload(); |
| } |
| }); |
| } else if (newTableData[newRow] < tableData[newRow]) { |
| $.ajax({ |
| url: '/tenantaddorremsliver/', |
| dataType: 'json', |
| data: { |
| siteName: newRow, |
| count: tableData[newRow] - newTableData[newRow], |
| slice: $("#advTenantSliceDropDown").val(), |
| actionToDo: "rem", |
| csrfmiddlewaretoken: "{{ csrf_token }}", // < here |
| state: "inactive" |
| }, |
| type: 'POST', |
| complete: function () { |
| // oTable.fnReloadAjax(); |
| location.reload(); |
| } |
| }); |
| } |
| } |
| $.ajax({ |
| url: '/updateslice/', |
| dataType: 'json', |
| data: { |
| sliceName: $("#advTenantSliceDropDown").val(), |
| serviceClass: $("#adv-service-level-dropdown").val(), |
| imageName: $("#adv-image-dropdown").val(), |
| network: $("#adv-network-dropdown").val(), |
| actionToDo: "update", |
| csrfmiddlewaretoken: "{{ csrf_token }}", // < here |
| state: "inactive" |
| }, |
| type: 'POST', |
| complete: function () { |
| //oTable.fnReloadAjax(); |
| location.reload(); |
| } |
| }); |
| |
| }); |
| oTable = $('#advTenantSiteTableData').dataTable({ |
| "bJQueryUI": true, |
| "bFilter": false, |
| "bInfo": false, |
| "bLengthChange": false, |
| "bPaginate": false, |
| "aaData": siteNames, |
| "bStateSave": true, |
| "aoColumns": [{ |
| "sTitle": "Site Name", |
| sClass: "siteName" |
| }, { |
| "sTitle": "Allocated", |
| sClass: "alignCenter allocated" |
| }, { |
| "sTitle": "Edit", |
| sClass: "alignCenter" |
| }] |
| }); |
| editSliverAdv(); |
| $('#advTenantSliceDropDown').on('change', function () { |
| var selectedValue = $("#advTenantSliceDropDown").val(); |
| //alert(selectedValue); |
| checkForBasicAdvView(selectedValue, data); |
| //editSliverAdv(); |
| }); |
| } |
| |
| function checkForBasicAdvView(value, data) { |
| var rows = data['userSliceInfo']['rows']; |
| for (row in rows) { |
| if (rows[row]['sliceName'] == value) { |
| if (rows[row]['numOfSites'] > 1) { |
| advShowSliceData(data,value); |
| downloadSliceInfo(data,value); |
| $("#tenantSliceDataWrapper").css("display","none"); |
| $("#advancedTenantSliceDataWrapper").css("display","block"); |
| $("#advTenantSiteTable").css("display","block"); |
| $("#tenantSiteTable").css("display","none"); |
| $("#sliver-btn").css("display","none"); |
| $("#save-btn").css("display","block"); |
| break; |
| } else if(rows[row]['numOfSites'] <= 1){ |
| showSliceData(data,value); |
| downloadSliceInfo(data,value); |
| //editSliverAdv(); |
| $("#tenantSliceDataWrapper").css("display","block"); |
| $("#advancedTenantSliceDataWrapper").css("display","none"); |
| $("#advTenantSiteTable").css("display","none"); |
| $("#tenantSiteTable").css("display","block"); |
| $("#sliver-btn").css("display","block"); |
| $("#save-btn").css("display","none"); |
| break; |
| }break; |
| } |
| } |
| } |
| |
| function UserSliceTable(data) { |
| //Add check for #dynamicusersliceinfo_filter label-> input having focus here |
| var rows = data['userSliceInfo']['rows']; |
| $("<div></div>").attr('id', 'tenantSliceDataWrapper').appendTo('#tabs-5'); |
| $("<div></div>").attr('id', 'advancedTenantSliceDataWrapper').appendTo('#tabs-5'); |
| var sliceData = ''; |
| 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>'; |
| var advSliceData = ''; |
| 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 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> <span id="adv-slice-network-value"> </span> <span class="help-inline">Changes are potentially disruptive to existing slivers</span></span></div><div class="tenant-row"><span class="summary-attr"><b>Data Sets:</b> <span id="adv-slice-data-set-value"> </span> </span></div>'; |
| $('#tenantSliceDataWrapper').append(sliceData).css("display", "none"); |
| $('#advancedTenantSliceDataWrapper').append(advSliceData); |
| $("#advancedTenantSliceDataWrapper").css("display", "none"); |
| $("<select></select>").attr('id', 'tenantSliceDropDown').appendTo('#slice-name-value'); |
| for (row in rows) { |
| $("#tenantSliceDropDown").append("<option>" + rows[row]['sliceName'] + "</option>"); |
| } |
| $("<select></select>").attr('id', 'advTenantSliceDropDown').appendTo('#adv-slice-name-value'); |
| for (row in rows) { |
| $("#advTenantSliceDropDown").append("<option>" + rows[row]['sliceName'] + "</option>"); |
| } |
| $("<div></div>").attr('id', 'tenantSiteTable').appendTo('#tabs-5').css("display","none"); |
| $("<div></div>").attr('id', 'advTenantSiteTable').appendTo('#tabs-5').css("display", "none"); |
| $('<div class="btn btn-success" id="create-slice-btn"><i class="icon-plus-sign icon-white"></i> Create New Slice</div>').appendTo("#tabs-5"); |
| $('<div class="btn btn-success" id="delete-slice-btn"><i class="icon-plus-sign icon-white"></i> Delete a Slice</div>').appendTo("#tabs-5"); |
| $('<div class="btn btn-high btn-info" id="download-details">Download Slice Details</div>').appendTo("#tabs-5"); |
| $('<div class="btn btn-success" id="sliver-btn"><i class="icon-plus-sign icon-white"></i> Add/Remove Slivers</div>').appendTo("#tabs-5"); |
| $('<div class="btn btn-high btn-info" id="save-btn">Save</div>').appendTo("#tabs-5").css("display", "none"); |
| $("#advanced-tenant").click(function () { |
| var value = $("#advTenantSliceDropDown").val(); |
| advShowSliceData(data,value); |
| $("#tenantSliceDataWrapper").css("display","none"); |
| $("#advancedTenantSliceDataWrapper").css("display","block"); |
| $("#advTenantSiteTable").css("display","block"); |
| $("#tenantSiteTable").css("display","none"); |
| $("#sliver-btn").toggle(); |
| $("#save-btn").toggle(); |
| |
| //$("#advTenantSliceDropDown").val(selectedValue); |
| //advShowSliceData(data); |
| //editSliverAdv(); |
| }); |
| $("#sliver-btn").click(function () { |
| $("#numOfSlivers").empty(); |
| $("#basic-tooltip").css("display", "none"); |
| $("#dialog-form").dialog({ |
| autoOpen: false, |
| height: 200, |
| width: 350, |
| modal: true, |
| dialogClass: "tenantDialog", |
| buttons: { |
| "Add": function () { |
| $.ajax({ |
| url: '/tenantaddorremsliver/', |
| dataType: 'json', |
| data: { |
| count: parseInt($("#numOfSlivers").val()), |
| slice: $("#tenantSliceDropDown").val(), |
| actionToDo: "add", |
| csrfmiddlewaretoken: "{{ csrf_token }}", // < here |
| state: "inactive" |
| }, |
| type: 'POST', |
| beforeSend: function () { |
| if (!$("#numOfSlivers").val()) { |
| $("#basic-tooltip").css("display", "block"); |
| return false; |
| } else { |
| return true; |
| } |
| }, |
| complete: function () { |
| location.reload(); |
| } |
| }); |
| }, |
| Remove: function () { |
| $.ajax({ |
| url: '/tenantaddorremsliver/', |
| dataType: 'json', |
| data: { |
| count: parseInt($("#numOfSlivers").val()), |
| slice: $("#tenantSliceDropDown").val(), |
| actionToDo: "rem", |
| csrfmiddlewaretoken: "{{ csrf_token }}", // < here |
| state: "inactive" |
| }, |
| type: 'POST', |
| beforeSend: function () { |
| if (!$("#numOfSlivers").val()) { |
| $("#basic-tooltip").css("display", "block"); |
| return false; |
| } else { |
| return true; |
| } |
| }, |
| complete: function () { |
| location.reload(); |
| } |
| }); |
| } |
| } |
| }); |
| $("#dialog-form").dialog("open"); |
| }); |
| $("#create-slice-btn").unbind().click(function () { |
| var serviceLevelData = data['sliceServiceClass']['rows']; |
| var imageData = data['image']['rows']; |
| var dataSet = data['mountDataSets']['rows']; |
| var networkData = data['network']['rows']; |
| $("#new-service-class").empty(); |
| $("#new-image").empty(); |
| $("#mount-data-sets").empty(); |
| $("#new-network").empty(); |
| for (row in serviceLevelData) { |
| $("#new-service-class").append("<option>" + serviceLevelData[row]['serviceClass'] + "</option>"); |
| } |
| for (row in imageData) { |
| $("#new-image").append("<option>" + imageData[row]['Image'] + "</option>"); |
| } |
| for (row in dataSet) { |
| $("#mount-data-sets").append("<option>" + dataSet[row]['DataSet'] + "</option>"); |
| } |
| for (row in networkData) { |
| $("#new-network").append("<option>" + networkData[row]['Network'] + "</option>"); |
| } |
| var nameOfSlice = $("#new-slice-name").val(); |
| var nameOfServiceClass = $("#new-service-class").val(); |
| var nameOfImage = $("#new-image").val(); |
| $("#create-slice-form").dialog({ |
| autoOpen: false, |
| height: 400, |
| width: 400, |
| modal: true, |
| dialogClass: "tenantDialog", |
| buttons: { |
| "Submit": function () { |
| $.ajax({ |
| url: '/createnewslice/', |
| dataType: 'json', |
| data: { |
| sliceName: $("#new-slice-name").val(), |
| serviceClass: nameOfServiceClass, |
| imageName: $("#new-image").val(), |
| network: $("#new-network").val(), |
| mountDataSets: $("#mount-data-sets").val(), |
| actionToDo: "add", |
| csrfmiddlewaretoken: "{{ csrf_token }}", // < here |
| state: "inactive" |
| }, |
| async: false, |
| type: 'POST', |
| beforeSend: function () { |
| if (!$("#new-slice-name").val()) { |
| $("#tooltip").css("display", "block"); |
| return false; |
| } else { |
| return true; |
| } |
| }, |
| success: function (response) {}, |
| complete: function () { |
| location.reload(); |
| } |
| }); |
| $.ajax({ |
| url: '/tenantaddorremsliver/', |
| dataType: 'json', |
| data: { |
| count: parseInt($("#number-of-slivers").val()), |
| slice: $("#new-slice-name").val(), |
| actionToDo: "add", |
| csrfmiddlewaretoken: "{{ csrf_token }}", // < here |
| state: "inactive" |
| }, |
| async: false, |
| type: 'POST', |
| complete: function () { |
| location.reload(); |
| } |
| }); |
| |
| }, |
| Cancel: function () { |
| $(this).dialog("close"); |
| } |
| } |
| }); |
| $("#create-slice-form").dialog("open"); |
| }); |
| $("#delete-slice-btn").unbind().click(function () { |
| var rows = data['userSliceInfo']['rows']; |
| $("#delete-slice").empty(); |
| for (row in rows) { |
| $("#delete-slice").append("<option>" + rows[row]['sliceName'] + "</option>"); |
| } |
| $("#delete-slice-form").dialog({ |
| autoOpen: false, |
| height: 200, |
| width: 350, |
| modal: true, |
| dialogClass: "tenantDialog", |
| buttons: { |
| "Delete": function () { |
| $.ajax({ |
| url: '/tenantdeleteslice/', |
| dataType: 'json', |
| data: { |
| sliceName: $("#delete-slice").val(), |
| csrfmiddlewaretoken: "{{ csrf_token }}", // < here |
| state: "inactive" |
| }, |
| type: 'POST', |
| success: function (response) {}, |
| complete: function () { |
| location.reload(); |
| } |
| }); |
| }, |
| Cancel: function () { |
| $(this).dialog("close"); |
| } |
| } |
| }); |
| $("#delete-slice-form").dialog("open"); |
| }); |
| } |
| |
| |
| function initTenant() { |
| jQuery.ajax({ |
| url: '/tenantview', |
| dataType: 'json', |
| success: function (data) { |
| UserSliceTable(data); |
| var value = $("#tenantSliceDropDown").val(); |
| checkForBasicAdvView(value, data); |
| $("#tooltip").css("display", "none"); |
| $("#basic-tooltip").css("display", "none"); |
| $("#adv-tooltip").css("display", "none"); |
| }, |
| complete: function () {} |
| }); |
| } |
| |
| initTenant(); |
| }); |
| </script> |
| |
| </html> |