planetstack/templates/admin/dashboard/tenant.html

   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);
 102                                 $("#tooltip").css("display", "none");
 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'];
 110                         $("<div></div>").attr('id', 'tenantSliceDataWrapper').appendTo('#tabs-5');
 111                         $("<div></div>").attr('id', 'advancedTenantSliceDataWrapper').appendTo('#tabs-5');
 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                         }
 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>&nbsp;Create New Slice</div>').appendTo("#tabs-5");
 126                         $('<div class="btn btn-success" id="sliver-btn"><i class="icon-plus-sign icon-white"></i>&nbsp;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");
 128                         $('#tenantSliceDropDown').on('change', function () {
 129                                 showSliceData(data);
 130                         });
 131                         $("#advanced-tenant").click(function () {
 132                                 var selectedValue = $("#tenantSliceDropDown").val();
 133                                 $("#tenantSliceDataWrapper").toggle();
 134                                 $("#advancedTenantSliceDataWrapper").toggle();
 135                                 $("#advTenantSiteTable").toggle();
 136                                 $("#tenantSiteTable").toggle();
 137                                 $("#sliver-btn").toggle();
 138                                 $("#save-btn").toggle();
 139                                 //$('#adv-slice-name-value').empty();
 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                                 }
 144                                 $("#advTenantSliceDropDown").val(selectedValue);
 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());
 155                                                 var td = $(this).parent().siblings(".allocated");
 156                                                 var pos = oTable.fnGetPosition(td[0]);
 157                                                 $("#adv-dialog-form").dialog({
 158                                                         autoOpen: false,
 159                                                         height: 200,
 160                                                         width: 350,
 161                                                         modal: true,
 162                                                         buttons: {
 163                                                                 "Add": function () {
 164                                                                         allocatedSlivers += parseInt($("#advNumOfSlivers").val());
 165                                                                         $(this).dialog("close");
 166                                                                         td.html(allocatedSlivers);
 167                                                                 },
 168                                                                 "Remove": function () {
 169                                                                         allocatedSlivers -= parseInt($("#advNumOfSlivers").val());
 170                                                                         $(this).dialog("close");
 171                                                                         td.html(allocatedSlivers);
 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;
 195                                         var tableData = {};
 196                                         for (row in rows) {
 197                                                 if (rows[row]['sliceName'] == value) {
 198                                                         var innerRows = rows[row]['sliceSite'];
 199                                                         for (innerRow in innerRows) {
 200                                                                 tableData[innerRow] = innerRows[innerRow];
 201                                                         }
 202                                                 }
 203                                         }
 204                                         for (row in siteRows) {
 205                                                 var entry = siteRows[row]['siteName'];
 206                                                 if (!(entry in tableData)) {
 207                                                         tableData[siteRows[row]['siteName']] = 0;
 208                                                 }
 209                                         }
 210                                         for (row in tableData) {
 211                                                 siteNames.push([row, tableData[row], '<a href="#" class="edit-view">Edit</a>']);
 212                                         }
 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",
 230                                                                                 csrfmiddlewaretoken: "{{ csrf_token }}",   // < here
 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                                         });
 258                                         oTable = $('#advTenantSiteTableData').dataTable({
 259                                                 "bJQueryUI": true,
 260                                                 "bFilter": false,
 261                                                 "bInfo": false,
 262                                                 "bLengthChange": false,
 263                                                 "bPaginate": false,
 264                                                 "aaData": siteNames,
 265                                                 "bStateSave": true,
 266                                                 "aoColumns": [{
 267                                                         "sTitle": "Site Name",
 268                                                         sClass: "siteName"
 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: {
 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                                                 },
 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                                 }
 355                                 var nameOfSlice = $("#new-slice-name").val();
 356                                 var nameOfServiceClass = $("#new-service-class").val();
 357                                 var nameOfImage = $("#new-image").val();
 358                                 $("#create-slice-form").dialog({
 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");
 393                                                 }
 394                                         }
 395                                 });
 396                                 $("#create-slice-form").dialog("open");
 397                         });
 398                 }
 399         }
 400         initTenant();
 401 });
 402 </script>
 403
 404 </html>