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-4');
 111                         $("<div></div>").attr('id', 'advancedTenantSliceDataWrapper').appendTo('#tabs-4');
 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-4');
 124                         $("<div></div>").attr('id', 'advTenantSiteTable').appendTo('#tabs-4').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-4");
 126                         $('<div class="btn btn-success" id="sliver-btn"><i class="icon-plus-sign icon-white"></i>&nbsp;Add/Remove Slivers</div>').appendTo("#tabs-4");
 127                         $('<div class="btn btn-high btn-info" id="save-btn">Save</div>').appendTo("#tabs-4").css("display", "none");
 128                         $('#tenantSliceDropDown').on('change', function () {
 129                                 showSliceData(data);
 130                         });
 131                         $("#advanced-tenant").click(function () {
 132                                 $("#tenantSliceDataWrapper").toggle();
 133                                 $("#advancedTenantSliceDataWrapper").toggle();
 134                                 $("#advTenantSiteTable").toggle();
 135                                 $("#tenantSiteTable").toggle();
 136                                 $("#sliver-btn").toggle();
 137                                 $("#save-btn").toggle();
 138                                 $('#adv-slice-name-value').empty();
 139                                 $("<select></select>").attr('id', 'advTenantSliceDropDown').appendTo('#adv-slice-name-value');
 140                                 for (row in rows) {
 141                                         $("#advTenantSliceDropDown").append("<option>" + rows[row]['sliceName'] + "</option>");
 142                                 }
 143                                 advShowSliceData(data);
 144                                 editSliverAdv();
 145                                 $('#advTenantSliceDropDown').on('change', function () {
 146                                         advShowSliceData(data);
 147                                         editSliverAdv();
 148                                 });
 149
 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                                                 $("#adv-dialog-form").dialog({
 156                                                         autoOpen: false,
 157                                                         height: 200,
 158                                                         width: 350,
 159                                                         modal: true,
 160                                                         buttons: {
 161                                                                 "Add": function () {
 162                                                                         allocatedSlivers += parseInt($("#advNumOfSlivers").val());
 163                                                                         $(this).dialog("close");
 164                                                                         td.html(allocatedSlivers);
 165                                                                 },
 166                                                                 "Remove": function () {
 167                                                                         allocatedSlivers -= parseInt($("#advNumOfSlivers").val());
 168                                                                         $(this).dialog("close");
 169                                                                         td.html(allocatedSlivers);
 170                                                                 }
 171                                                         }
 172                                                 });
 173                                                 $("#adv-dialog-form").dialog("open");
 174                                         });
 175                                 }
 176
 177                                 function advShowSliceData(data) {
 178                                         var value = $("#advTenantSliceDropDown").val();
 179                                         var serviceLevelData = data['sliceServiceClass']['rows'];
 180                                         var imageData = data['image']['rows'];
 181                                         var networkData = data['network']['rows'];
 182                                         var siteRows = data['sites']['rows'];
 183                                         $("#adv-service-level-value").empty();
 184                                         $("#adv-slice-image-value").empty();
 185                                         $("#adv-slice-network-value").empty();
 186                                         $("<select></select>").attr('id', 'adv-service-level-dropdown').appendTo('#adv-service-level-value');
 187                                         $("<select></select>").attr('id', 'adv-image-dropdown').appendTo('#adv-slice-image-value');
 188                                         $("<select></select>").attr('id', 'adv-network-dropdown').appendTo('#adv-slice-network-value');
 189                                         $('#advTenantSiteTable').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="advTenantSiteTableData"></table>');
 190                                         var rows = data['userSliceInfo']['rows'];
 191                                         var siteNames = [];
 192                                         var sliverCount;
 193                                         var tableData ={};
 194                                         for (row in rows) {
 195                                                 if (rows[row]['sliceName'] == value) {
 196                                                         var innerRows = rows[row]['sliceSite'];
 197                                                         for (innerRow in innerRows) {
 198                                                                 tableData[innerRow]=innerRows[innerRow];
 199                                                         }
 200                                                 }
 201                                         }
 202                                         for (row in siteRows) {
 203                                                 var entry =siteRows[row]['siteName'];
 204                                                 if (!(entry in tableData)) {
 205                                                         tableData[siteRows[row]['siteName']] = 0;
 206                                                 }
 207                                         }
 208                                         for (row in tableData){
 209                                                 siteNames.push([row, tableData[row], '<a href="#" class="edit-view">Edit</a>']);
 210                                         }
 211
 212                                         oTable = $('#advTenantSiteTableData').dataTable({
 213                                                 "bJQueryUI": true,
 214                                                 "bFilter": false,
 215                                                 "bInfo": false,
 216                                                 "bLengthChange": false,
 217                                                 "aaData": siteNames,
 218                                                 "bStateSave": true,
 219                                                 "aoColumns": [{
 220                                                         "sTitle": "Site Name"
 221                                                 }, {
 222                                                         "sTitle": "Allocated",
 223                                                         sClass: "alignCenter allocated"
 224                                                 }, {
 225                                                         "sTitle": "Edit",
 226                                                         sClass: "alignCenter"
 227                                                 }]
 228                                         });
 229                                         for (row in serviceLevelData) {
 230                                                 $("#adv-service-level-dropdown").append("<option>" + serviceLevelData[row]['serviceClass'] + "</option>");
 231                                         }
 232                                         for (row in imageData) {
 233                                                 $("#adv-image-dropdown").append("<option>" + imageData[row]['Image'] + "</option>");
 234                                         }
 235                                         for (row in networkData) {
 236                                                 $("#adv-network-dropdown").append("<option>" + networkData[row]['Network'] + "</option>");
 237                                         }
 238                                 }
 239                         });
 240                         $("#basic-tenant").click(function () {
 241                                 $("#tenantSliceDataWrapper").toggle();
 242                                 $("#advancedTenantSliceDataWrapper").toggle();
 243                                 $("#advTenantSiteTable").toggle();
 244                                 $("#tenantSiteTable").toggle();
 245                                 $("#sliver-btn").toggle();
 246                                 $("#save-btn").toggle();
 247                         });
 248                         $("#sliver-btn").click(function () {
 249                                 $("#dialog-form").dialog({
 250                                         autoOpen: false,
 251                                         height: 200,
 252                                         width: 350,
 253                                         modal: true,
 254                                         buttons: {
 255                                                 "Submit": function () {
 256                                                         /************Code to add or remove slivers for a slice will go here*******/
 257                                                 },
 258                                                 Cancel: function () {
 259                                                         $(this).dialog("close");
 260                                                 }
 261                                         }
 262                                 });
 263                                 $("#dialog-form").dialog("open");
 264                         });
 265                         $("#create-slice-btn").click(function () {
 266                                 var serviceLevelData = data['sliceServiceClass']['rows'];
 267                                 var imageData = data['image']['rows'];
 268                                 for (row in serviceLevelData) {
 269                                         $("#new-service-class").append("<option>" + serviceLevelData[row]['serviceClass'] + "</option>");
 270                                 }
 271                                 for (row in imageData) {
 272                                         $("#new-image").append("<option>" + imageData[row]['Image'] + "</option>");
 273                                 }
 274                                 var nameOfSlice= $("#new-slice-name").val();
 275                                 var nameOfServiceClass = $("#new-service-class").val();
 276                                 var nameOfImage = $("#new-image").val();
 277                                 $("#create-slice-form").dialog({
 278                                                 autoOpen: false,
 279                                                 height: 300,
 280                                                 width: 350,
 281                                                 modal: true,
 282                                                 buttons: {
 283                                                         "Submit": function () {
 284                                                                 $.ajax({
 285                                                                         url: '/createnewslice/',
 286                                                                         dataType: 'json',
 287                                                                         data: {
 288                                                                                 sliceName: $("#new-slice-name").val(),
 289                                                                                 serviceClass: nameOfServiceClass,
 290                                                                                 imageName: nameOfImage,
 291                                                                                 actionToDo: "add",
 292                                                                                 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
 293                                                                                 state: "inactive"
 294                                                                         },
 295                                                                         type: 'POST',
 296                                                                         beforeSend: function(){
 297                                                                                 if (!$("#new-slice-name").val()) {
 298                                                                                         $("#tooltip").css("display","block");
 299                                                                                         return false;
 300                                                                                 }
 301                                                                                 else{
 302                                                                                         return true;
 303                                                                                 }
 304                                                                         },
 305                                                                         success: function (response) {
 306                                                                         },
 307                                                                         complete: function () {
 308                                                                              location.reload();
 309                                                                         }
 310                                                                 });
 311                                                         },
 312                                                         Cancel: function () {
 313                                                                 $(this).dialog("close");
 314                                                         }
 315                                                 }
 316                                         });
 317                                         $("#create-slice-form").dialog("open");
 318                         });
 319                 }
 320         }
 321         initTenant();
 322 });
 323 </script>
 324
 325 </html>