Scott Baker | 537d823 | 2014-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"> |
| 46 | google.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 Baker | 6253dfc | 2014-04-14 09:29:30 -0700 | [diff] [blame] | 102 | $("#tooltip").css("display", "none"); |
Scott Baker | 537d823 | 2014-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 Baker | 590f83a | 2014-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 Baker | 537d823 | 2014-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 Baker | 590f83a | 2014-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> Create New Slice</div>').appendTo("#tabs-5"); |
| 126 | $('<div class="btn btn-success" id="sliver-btn"><i class="icon-plus-sign icon-white"></i> 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 Baker | 537d823 | 2014-04-08 23:40:56 -0700 | [diff] [blame] | 128 | $('#tenantSliceDropDown').on('change', function () { |
| 129 | showSliceData(data); |
| 130 | }); |
| 131 | $("#advanced-tenant").click(function () { |
Scott Baker | 6253dfc | 2014-04-14 09:29:30 -0700 | [diff] [blame] | 132 | var selectedValue = $("#tenantSliceDropDown").val(); |
Scott Baker | 537d823 | 2014-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 Baker | 6253dfc | 2014-04-14 09:29:30 -0700 | [diff] [blame] | 139 | //$('#adv-slice-name-value').empty(); |
Scott Baker | 537d823 | 2014-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 Baker | 6253dfc | 2014-04-14 09:29:30 -0700 | [diff] [blame] | 144 | $("#advTenantSliceDropDown").val(selectedValue); |
Scott Baker | 537d823 | 2014-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 Baker | 6253dfc | 2014-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 Baker | 537d823 | 2014-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 Baker | 6253dfc | 2014-04-14 09:29:30 -0700 | [diff] [blame] | 165 | $(this).dialog("close"); |
Scott Baker | 537d823 | 2014-04-08 23:40:56 -0700 | [diff] [blame] | 166 | td.html(allocatedSlivers); |
| 167 | }, |
| 168 | "Remove": function () { |
Scott Baker | 6253dfc | 2014-04-14 09:29:30 -0700 | [diff] [blame] | 169 | allocatedSlivers -= parseInt($("#advNumOfSlivers").val()); |
| 170 | $(this).dialog("close"); |
| 171 | td.html(allocatedSlivers); |
Scott Baker | 537d823 | 2014-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 Baker | 6253dfc | 2014-04-14 09:29:30 -0700 | [diff] [blame] | 195 | var tableData = {}; |
Scott Baker | 537d823 | 2014-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 Baker | 6253dfc | 2014-04-14 09:29:30 -0700 | [diff] [blame] | 200 | tableData[innerRow] = innerRows[innerRow]; |
Scott Baker | 537d823 | 2014-04-08 23:40:56 -0700 | [diff] [blame] | 201 | } |
| 202 | } |
| 203 | } |
| 204 | for (row in siteRows) { |
Scott Baker | 6253dfc | 2014-04-14 09:29:30 -0700 | [diff] [blame] | 205 | var entry = siteRows[row]['siteName']; |
Scott Baker | 537d823 | 2014-04-08 23:40:56 -0700 | [diff] [blame] | 206 | if (!(entry in tableData)) { |
| 207 | tableData[siteRows[row]['siteName']] = 0; |
| 208 | } |
| 209 | } |
Scott Baker | 6253dfc | 2014-04-14 09:29:30 -0700 | [diff] [blame] | 210 | for (row in tableData) { |
Scott Baker | 537d823 | 2014-04-08 23:40:56 -0700 | [diff] [blame] | 211 | siteNames.push([row, tableData[row], '<a href="#" class="edit-view">Edit</a>']); |
| 212 | } |
Scott Baker | 6253dfc | 2014-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 Baker | c96b43a | 2014-04-15 10:42:36 -0700 | [diff] [blame] | 230 | csrfmiddlewaretoken: "{{ csrf_token }}", // < here |
Scott Baker | 6253dfc | 2014-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 Baker | 537d823 | 2014-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 Baker | 6253dfc | 2014-04-14 09:29:30 -0700 | [diff] [blame] | 263 | "bPaginate": false, |
Scott Baker | 537d823 | 2014-04-08 23:40:56 -0700 | [diff] [blame] | 264 | "aaData": siteNames, |
| 265 | "bStateSave": true, |
| 266 | "aoColumns": [{ |
Scott Baker | 6253dfc | 2014-04-14 09:29:30 -0700 | [diff] [blame] | 267 | "sTitle": "Site Name", |
| 268 | sClass: "siteName" |
Scott Baker | 537d823 | 2014-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 Baker | c96b43a | 2014-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 Baker | 537d823 | 2014-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 Baker | 6253dfc | 2014-04-14 09:29:30 -0700 | [diff] [blame] | 355 | var nameOfSlice = $("#new-slice-name").val(); |
Scott Baker | 537d823 | 2014-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 Baker | 6253dfc | 2014-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 Baker | 537d823 | 2014-04-08 23:40:56 -0700 | [diff] [blame] | 393 | } |
Scott Baker | 6253dfc | 2014-04-14 09:29:30 -0700 | [diff] [blame] | 394 | } |
| 395 | }); |
| 396 | $("#create-slice-form").dialog("open"); |
Scott Baker | 537d823 | 2014-04-08 23:40:56 -0700 | [diff] [blame] | 397 | }); |
| 398 | } |
| 399 | } |
| 400 | initTenant(); |
| 401 | }); |
| 402 | </script> |
| 403 | |
| 404 | </html> |