| <!doctype html> |
| <style> |
| #tenantSliceDataWrapper { |
| padding: 1% 0; |
| } |
| </style> |
| <script type="text/javascript" src="http://www.google.com/jsapi"></script> |
| <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> |
| <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> |
| <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"> |
| </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"> |
| </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"> |
| </div> |
| <div class="create-slice-row"> |
| <label for="new-service-class">Service Class</label> |
| <select id="new-service-class"></select> |
| </div> |
| <div class="create-slice-row"> |
| <label for="new-image">Image</label> |
| <select id="new-image"></select> |
| </div> |
| <div id=tooltip>Slice Name cannot be empty</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) { |
| var value = $("#tenantSliceDropDown").val(); |
| 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>'); |
| var rows = data['userSliceInfo']['rows']; |
| var siteNames = []; |
| var sliverCount; |
| for (row in rows) { |
| if (rows[row]['sliceName'] == value) { |
| sliceImageData = rows[row]['sliceImage']; |
| $("#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"}, |
| ] |
| }); |
| } |
| |
| function initTenant() { |
| jQuery.ajax({ |
| url: '/tenantview', |
| dataType: 'json', |
| success: function (data) { |
| UserSliceTable(data); |
| showSliceData(data); |
| $("#tooltip").css("display","none"); |
| }, |
| complete: function () {} |
| }); |
| |
| 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><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>'; |
| $('#tenantSliceDataWrapper').append(sliceData); |
| $('#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>"); |
| } |
| $("<div></div>").attr('id', 'tenantSiteTable').appendTo('#tabs-5'); |
| $("<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="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"); |
| $('#tenantSliceDropDown').on('change', function () { |
| showSliceData(data); |
| }); |
| $("#advanced-tenant").click(function () { |
| $("#tenantSliceDataWrapper").toggle(); |
| $("#advancedTenantSliceDataWrapper").toggle(); |
| $("#advTenantSiteTable").toggle(); |
| $("#tenantSiteTable").toggle(); |
| $("#sliver-btn").toggle(); |
| $("#save-btn").toggle(); |
| $('#adv-slice-name-value').empty(); |
| $("<select></select>").attr('id', 'advTenantSliceDropDown').appendTo('#adv-slice-name-value'); |
| for (row in rows) { |
| $("#advTenantSliceDropDown").append("<option>" + rows[row]['sliceName'] + "</option>"); |
| } |
| advShowSliceData(data); |
| editSliverAdv(); |
| $('#advTenantSliceDropDown').on('change', function () { |
| advShowSliceData(data); |
| editSliverAdv(); |
| }); |
| |
| 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-dialog-form").dialog({ |
| autoOpen: false, |
| height: 200, |
| width: 350, |
| modal: true, |
| buttons: { |
| "Add": function () { |
| allocatedSlivers += parseInt($("#advNumOfSlivers").val()); |
| $(this).dialog("close"); |
| td.html(allocatedSlivers); |
| }, |
| "Remove": function () { |
| allocatedSlivers -= parseInt($("#advNumOfSlivers").val()); |
| $(this).dialog("close"); |
| td.html(allocatedSlivers); |
| } |
| } |
| }); |
| $("#adv-dialog-form").dialog("open"); |
| }); |
| } |
| |
| function advShowSliceData(data) { |
| var value = $("#advTenantSliceDropDown").val(); |
| var serviceLevelData = data['sliceServiceClass']['rows']; |
| var imageData = data['image']['rows']; |
| var networkData = data['network']['rows']; |
| var siteRows = data['sites']['rows']; |
| $("#adv-service-level-value").empty(); |
| $("#adv-slice-image-value").empty(); |
| $("#adv-slice-network-value").empty(); |
| $("<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'); |
| $('#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 rows) { |
| if (rows[row]['sliceName'] == value) { |
| var innerRows = rows[row]['sliceSite']; |
| 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>']); |
| } |
| |
| oTable = $('#advTenantSiteTableData').dataTable({ |
| "bJQueryUI": true, |
| "bFilter": false, |
| "bInfo": false, |
| "bLengthChange": false, |
| "aaData": siteNames, |
| "bStateSave": true, |
| "aoColumns": [{ |
| "sTitle": "Site Name" |
| }, { |
| "sTitle": "Allocated", |
| sClass: "alignCenter allocated" |
| }, { |
| "sTitle": "Edit", |
| sClass: "alignCenter" |
| }] |
| }); |
| 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>"); |
| } |
| } |
| }); |
| $("#basic-tenant").click(function () { |
| $("#tenantSliceDataWrapper").toggle(); |
| $("#advancedTenantSliceDataWrapper").toggle(); |
| $("#advTenantSiteTable").toggle(); |
| $("#tenantSiteTable").toggle(); |
| $("#sliver-btn").toggle(); |
| $("#save-btn").toggle(); |
| }); |
| $("#sliver-btn").click(function () { |
| $("#dialog-form").dialog({ |
| autoOpen: false, |
| height: 200, |
| width: 350, |
| modal: true, |
| buttons: { |
| "Submit": function () { |
| /************Code to add or remove slivers for a slice will go here*******/ |
| }, |
| Cancel: function () { |
| $(this).dialog("close"); |
| } |
| } |
| }); |
| $("#dialog-form").dialog("open"); |
| }); |
| $("#create-slice-btn").click(function () { |
| var serviceLevelData = data['sliceServiceClass']['rows']; |
| var imageData = data['image']['rows']; |
| 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>"); |
| } |
| var nameOfSlice= $("#new-slice-name").val(); |
| var nameOfServiceClass = $("#new-service-class").val(); |
| var nameOfImage = $("#new-image").val(); |
| $("#create-slice-form").dialog({ |
| autoOpen: false, |
| height: 300, |
| width: 350, |
| modal: true, |
| buttons: { |
| "Submit": function () { |
| $.ajax({ |
| url: '/createnewslice/', |
| dataType: 'json', |
| data: { |
| sliceName: $("#new-slice-name").val(), |
| serviceClass: nameOfServiceClass, |
| imageName: nameOfImage, |
| actionToDo: "add", |
| csrfmiddlewaretoken: "{{ csrf_token }}", // < here |
| state: "inactive" |
| }, |
| 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(); |
| } |
| }); |
| }, |
| Cancel: function () { |
| $(this).dialog("close"); |
| } |
| } |
| }); |
| $("#create-slice-form").dialog("open"); |
| }); |
| } |
| } |
| initTenant(); |
| }); |
| </script> |
| |
| </html> |