planetstack/templates/admin/dashboard/tenant.html

   1 <!doctype html>
   2 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
   3 <div id="dialog-form" title="Add/Remove Slivers" style="display: none;">
   4         <form>
   5                 <fieldset>
   6                         <label for="numberOfSlivers">Number of Slivers</label>
   7                         <input type="text" name="numberOfSlivers" id="numOfSlivers" class="text ui-widget-content ui-corner-all">
   8                         <div id=basic-tooltip>Please enter number of slivers</div>
   9                 </fieldset>
  10         </form>
  11 </div>
  12 <div id="adv-dialog-form" title="Add/Remove Slivers" style="display: none;">
  13         <form>
  14                 <fieldset>
  15                         <label for="numberOfSlivers">Number of Slivers</label>
  16                         <input type="text" name="numberOfSlivers" id="advNumOfSlivers" class="text ui-widget-content ui-corner-all">
  17                         <div id=adv-tooltip>Please enter number of slivers</div>
  18                 </fieldset>
  19         </form>
  20 </div>
  21 <div id="add-user-form" title="Add User" style="display: none;">
  22         <form>
  23                 <fieldset>
  24                         <div class="create-slice-row">
  25                                 <label for="add-slice-user">Add User</label>
  26                                 <select id="add-slice-user" class="tenant-create-slice"></select>
  27                         </div>
  28                 </fieldset>
  29         </form>
  30 </div>
  31 <div id="create-slice-form" title="Create New Slice" style="display: none;">
  32         <form>
  33                 <fieldset>
  34                         <div class="create-slice-row">
  35                                 <label for="new-slice-name">Name</label>
  36                                 <input type="text" name="new-slice-name" id="new-slice-name">
  37                         </div>
  38                         <div class="create-slice-row">
  39                                 <label for="new-service-class">Service Class</label>
  40                                 <select id="new-service-class" class="tenant-create-slice"></select>
  41                         </div>
  42                         <div class="create-slice-row">
  43                                 <label for="new-image">Image</label>
  44                                 <select id="new-image" class="tenant-create-slice"></select>
  45                         </div>
  46                         <div class="create-slice-row">
  47                                 <label for="new-network">Network Ports</label>
  48                                 <input type="text" name="new-network" id="new-network">
  49                         </div>
  50                         <div class="create-slice-row">
  51                                 <label for="private-vol">Include Private Vol</label>
  52                                 <input type="checkbox" name="checkbox" id="private-vol" value="value">
  53                         </div>
  54                         <div class="create-slice-row">
  55                                 <label for="add-user">Add User</label>
  56                                 <select id="add-user" class="tenant-create-slice"></select>
  57                         </div>
  58                         <div class="create-slice-row">
  59                                 <label for="mount-data-sets">Data Set</label>
  60                                 <select id="mount-data-sets" class="tenant-create-slice"></select>
  61                         </div>
  62                         <div class="create-slice-row">
  63                                 <label for="number-of-slivers">Number Of Slivers</label>
  64                                 <input type="text" name="number-of-slivers" id="number-of-slivers">
  65                         </div>
  66                         <div id=tooltip>Slice Name cannot be empty</div>
  67                 </fieldset>
  68         </form>
  69 </div>
  70 <div id="delete-slice-form" title="Delete a  Slice" style="display: none;">
  71         <form>
  72                 <fieldset>
  73                         <div class="create-slice-row">
  74                                 <label for="delete-slice">Choose a Slice</label>
  75                                 <select id="delete-slice"></select>
  76                         </div>
  77                 </fieldset>
  78         </form>
  79 </div>
  80 <script type="text/javascript">
  81         google.load('visualization', '1', {
  82                 'packages': ['controls', 'table', 'corechart', 'geochart']
  83         });
  84         </script>
  85         <script>
  86         $(document).ready(function () {
  87                 function showSliceData(rows,imageData,serviceLevelData,siteRows,dataSet,value) {
  88                         $("#service-level-value").empty();
  89                         $("#slice-image-value").empty();
  90                         $("#tenantSiteTable").empty();
  91                         $('#tenantSiteTable').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="tenantSiteTableData"></table>');
  92                         $("#tenantSliceDropDown").val(value);
  93                         var siteNames = [];
  94                         var sliverCount;
  95                         for (row in rows) {
  96                                 if (rows[row]['sliceName'] == value) {
  97                                         sliceImageData = rows[row]['preferredImage'];
  98                                         $("#slice-image-value").html(sliceImageData);
  99                                         serviceLevelDataBasic = rows[row]['sliceServiceClass'];
 100                                         $("#service-level-value").html(serviceLevelDataBasic);
 101                                         var innerRows = rows[row]['sliceSite'];
 102                                         for (innerRow in innerRows) {
 103                                                 sliverCount = innerRows[innerRow];
 104                                                 siteNames.push([innerRow, sliverCount]);
 105                                         }
 106                                 }
 107                         }
 108                         oTable = $('#tenantSiteTableData').dataTable({
 109                                 "bJQueryUI": true,
 110                                 "bFilter": false,
 111                                 "bInfo": false,
 112                                 "bLengthChange": false,
 113                                 "aaData": siteNames,
 114                                 "bStateSave": true,
 115                                 "aoColumns": [{
 116                                                 "sTitle": "Site Name"
 117                                         }, {
 118                                                 "sTitle": "Allocated",
 119                                                 sClass: "alignCenter"
 120                                         }
 121                                 ]
 122                         });
 123                                 $('#tenantSliceDropDown').on('change', function () {
 124                                         var value = $("#tenantSliceDropDown").val();
 125         //alert(value);
 126                                         checkForBasicAdvView(value,rows,imageData,serviceLevelData,siteRows,dataSet);
 127                                 });
 128                 }
 129
 130                 function downloadSliceInfo(rows,imageData,serviceLevelData,siteRows,dataSet,value){
 131                          $("#download-details").unbind().click(function(){
 132                                                 function download(filename, text) {
 133                                                 var sliceDetails = document.createElement('a');
 134                                                 sliceDetails.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
 135                                                 sliceDetails.setAttribute('download', filename);
 136                                                 sliceDetails.click();
 137                                         }
 138                                         var sliceInfo;
 139                                         for (row in rows){
 140                                                 if(rows[row]['sliceName']==value){
 141                                                         sliceInfo = "Slice Name: "+rows[row]['sliceName']+"\nNumber of Slivers: "+rows[row]['numOfSlivers']+"\nService Level: "+rows[row]['sliceServiceClass']+"\nImage: "+rows[row]['preferredImage']+"\n";
 142                                                 for (instanceNodePairs in rows[row]['instanceNodePair']){
 143                                                         sliceInfo += instanceNodePairs+"@"+rows[row]['instanceNodePair'][instanceNodePairs]+"\n";
 144                                                 }
 145                                                 }
 146                                         }
 147                                         download('slice.txt', sliceInfo);
 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                                 $("#numOfSlivers").val("");;
 156                                 $("#advNumOfSlivers").val("");;
 157                                 $("#adv-tooltip").css("display", "none");
 158                                 $("#adv-dialog-form").dialog({
 159                                         autoOpen: false,
 160                                         height: 200,
 161                                         width: 350,
 162                                         modal: true,
 163                                         dialogClass: "tenantDialog",
 164                                         buttons: {
 165                                                 "Add": function () {
 166                                                         allocatedSlivers += parseInt($("#advNumOfSlivers").val());
 167                                                                 $("#adv-tooltip").css("display", "block");
 168                                                                 $(this).dialog("close");
 169                                                                 td.html(allocatedSlivers);
 170                                                 },
 171                                                 "Remove": function () {
 172                                                         allocatedSlivers -= parseInt($("#advNumOfSlivers").val());
 173                                                                 $("#adv-tooltip").css("display", "block");
 174                                                                 $(this).dialog("close");
 175                                                                 td.html(allocatedSlivers);
 176                                                 }
 177                                         }
 178                                 });
 179                                 $("#adv-dialog-form").dialog("open");
 180                         });
 181                 }
 182
 183                 function advShowSliceData(rows,imageData,serviceLevelData,siteRows,dataSet,value) {
 184                         $("#adv-service-level-value").empty();
 185                         $("#adv-slice-image-value").empty();
 186                         $("#adv-slice-data-set-value").empty();
 187                         $("#advTenantSliceDropDown").val(value);
 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-dataset-dropdown').appendTo('#adv-slice-data-set-value');
 191                         $('#advTenantSiteTable').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="advTenantSiteTableData"></table>');
 192                         var siteNames = [];
 193                         var sliverCount;
 194                         var tableData = {};
 195                         for (row in serviceLevelData) {
 196                                 $("#adv-service-level-dropdown").append("<option>" + serviceLevelData[row]['serviceClass'] + "</option>");
 197                         }
 198                         for (row in imageData) {
 199                                 $("#adv-image-dropdown").append("<option>" + imageData[row] + "</option>");
 200                         }
 201                         for (row in dataSet) {
 202                                 $("#adv-dataset-dropdown").append("<option>" + dataSet[row]['DataSet'] + "</option>");
 203                         }
 204
 205                         for (row in rows) {
 206                                 if (rows[row]['sliceName'] == value) {
 207                                         var innerRows = rows[row]['sliceSite'];
 208                                         $("#adv-service-level-dropdown").val(rows[row]['sliceServiceClass']);
 209                                         $("#adv-image-dropdown").val(rows[row]['preferredImage']);
 210                                         $("#adv-dataset-dropdown").val(rows[row]['sliceDataSet']);
 211                                         for (innerRow in innerRows) {
 212                                                 tableData[innerRow] = innerRows[innerRow];
 213                                         }
 214                                 }
 215                         }
 216                         for (row in siteRows) {
 217                                 //var entry = siteRows[row]['siteName'];
 218                                 var entry = siteRows[row];
 219                                 if (!(entry in tableData)) {
 220                                         //tableData[siteRows[row]['siteName']] = 0;
 221                                         tableData[siteRows[row]] = 0;
 222                                 }
 223                         }
 224                         for (row in tableData) {
 225                                 siteNames.push([row, tableData[row], '<a href="#" class="edit-view">Edit</a>']);
 226                         }
 227                         $("#save-btn").unbind().click(function () {
 228                                 var newTableData = {};
 229                                 var newSite = $(".siteName");
 230                                 var newAllocated = $(".allocated");
 231                                 for (i = 1; i < newSite.length; i++) {
 232                                         newTableData[$($(".siteName")[i]).text()] = parseInt($($(".allocated")[i]).text());
 233                                 }
 234                                 for (newRow in newTableData) {
 235                                         if (newTableData[newRow] > tableData[newRow]) {
 236                                                 $.ajax({
 237                                                         url: '/tenantaddorremsliver/',
 238                                                         dataType: 'json',
 239                                                         data: {
 240                                                                 siteName: newRow,
 241                                                                 count: newTableData[newRow] - tableData[newRow],
 242                                                                 slice: $("#advTenantSliceDropDown").val(),
 243                                                                 image: $("#adv-image-dropdown").val(),
 244                                                                 actionToDo: "add",
 245                                                                 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
 246                                                                 state: "inactive"
 247                                                         },
 248                                                         type: 'POST',
 249                                                         complete: function () {
 250                                                                 //location.reload();
 251
 252                                                         }
 253                                                 });
 254                                         } else if (newTableData[newRow] < tableData[newRow]) {
 255                                                 $.ajax({
 256                                                         url: '/tenantaddorremsliver/',
 257                                                         dataType: 'json',
 258                                                         data: {
 259                                                                 siteName: newRow,
 260                                                                 count: tableData[newRow] - newTableData[newRow],
 261                                                                 slice: $("#advTenantSliceDropDown").val(),
 262                                                                 image: $("#adv-image-dropdown").val(),
 263                                                                 actionToDo: "rem",
 264                                                                 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
 265                                                                 state: "inactive"
 266                                                         },
 267                                                         type: 'POST',
 268                                                         complete: function () {
 269                                                                 //location.reload();
 270                                                         }
 271                                                 });
 272                                         }
 273                                 }
 274                                  $.ajax({
 275                                                         url: '/updateslice/',
 276                                                         dataType: 'json',
 277                                                         data: {
 278                                                                 sliceName: $("#advTenantSliceDropDown").val(),
 279                                                                 serviceClass: $("#adv-service-level-dropdown").val(),
 280                                                                 imageName: $("#adv-image-dropdown").val(),
 281                                                                 dataSet: $("#adv-dataset-dropdown").val(),
 282                                                                 networkPorts:  $("#adv-network-value").val(),
 283                                                                 privateVolume: $("#private-vol-checkbox").is(":checked"),
 284                                                                 actionToDo: "update",
 285                                                                 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
 286                                                                 state: "inactive"
 287                                                         },
 288                                                         type: 'POST',
 289                                                         success: function () {
 290                                                                 $("#tabs-5").empty();
 291                                                                 initTenant();    //location.reload();
 292                                                         },
 293                                                           error:function (xhr, textStatus, thrownError){
 294                                                                    errorDialog("Error:", textStatus + " " + xhr.responseText);
 295                                                         }
 296
 297                                                 });
 298
 299                         });
 300                         oTable = $('#advTenantSiteTableData').dataTable({
 301                                 "bJQueryUI": true,
 302                                 "bFilter": false,
 303                                 "bInfo": false,
 304                                 "bLengthChange": false,
 305                                 "bPaginate": false,
 306                                 "aaData": siteNames,
 307                                 "bStateSave": true,
 308                                 "aoColumns": [{
 309                                         "sTitle": "Site Name",
 310                                         sClass: "siteName"
 311                                 }, {
 312                                         "sTitle": "Allocated",
 313                                         sClass: "alignCenter allocated"
 314                                 }, {
 315                                         "sTitle": "Edit",
 316                                         sClass: "alignCenter"
 317                                 }]
 318                         });
 319                         editSliverAdv();
 320                                 $('#advTenantSliceDropDown').on('change', function () {
 321                                         var selectedValue = $("#advTenantSliceDropDown").val();
 322                                         checkForBasicAdvView(selectedValue, rows,imageData,serviceLevelData,siteRows,dataSet);
 323                                 });
 324                 }
 325
 326                 function checkForBasicAdvView(value, rows,imageData,serviceLevelData,siteRows,dataSet) {
 327                         for (row in rows) {
 328                                 if (rows[row]['sliceName'] == value) {
 329                                         if (rows[row]['numOfSites'] > 1) {
 330                                                 advShowSliceData(rows,imageData,serviceLevelData,siteRows,dataSet,value);
 331                                                 downloadSliceInfo(rows,imageData,serviceLevelData,siteRows,dataSet,value);
 332                                                 $("#tenantSliceDataWrapper").css("display","none");
 333                                                 $("#advancedTenantSliceDataWrapper").css("display","block");
 334                                                 $("#advTenantSiteTable").css("display","block");
 335                                                 $("#tenantSiteTable").css("display","none");
 336                                                 $("#sliver-btn").css("display","none");
 337                                                 $("#save-btn").css("display","block");
 338                                                 break;
 339                                         } else if(rows[row]['numOfSites'] <= 1){
 340                                                 showSliceData(rows,imageData,serviceLevelData,siteRows,dataSet,value);
 341                                                 downloadSliceInfo(rows,imageData,serviceLevelData,siteRows,dataSet,value);
 342                                                 $("#tenantSliceDataWrapper").css("display","block");
 343                                                 $("#advancedTenantSliceDataWrapper").css("display","none");
 344                                                 $("#advTenantSiteTable").css("display","none");
 345                                                 $("#tenantSiteTable").css("display","block");
 346                                                 $("#sliver-btn").css("display","block");
 347                                                 $("#save-btn").css("display","none");
 348                                                 break;
 349                                         }break;
 350                                 }
 351                         }
 352                 }
 353
 354                 function UserSliceTable(rows,imageData,serviceLevelData,siteRows,dataSet,siteUsers) {
 355                                 //Add check for #dynamicusersliceinfo_filter label-> input having focus here
 356                                 $("<div></div>").attr('id', 'tenantSliceDataWrapper').appendTo('#tabs-5');
 357                                 $("<div></div>").attr('id', 'advancedTenantSliceDataWrapper').appendTo('#tabs-5');
 358                                 var sliceData = '';
 359                                 sliceData += '<div class="tenant-row public-key-warning"><span class="summary-attr">You have not uploaded your Public Key. <a href="http://{{ request.get_host}}/admin/core/user/{{user.id}}">Click here</a> to upload it now.</span></div><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>';
 360                                 var advSliceData = '';
 361                                 advSliceData += '<div class="tenant-row public-key-warning"><span class="summary-attr">You have not uploaded your Public Key. <a href="http://{{ request.get_host}}/admin/core/user/{{user.id}}">Click here</a> to upload it now.</span></div><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> <input type="text" name="adv-network-value" id="adv-network-value"> <span class="help-inline">List of port ranges(if any) e.g. 1021-1026,1029</span><br></div><div class="tenant-row"><span class="summary-attr"><b>Data Set:</b> <span id="adv-slice-data-set-value"> </span>  <input type="checkbox" name="checkbox" id="private-vol-checkbox" value="value"><span class="help-inline">Include Private Volume</span></span></div>';
 362                                 $('#tenantSliceDataWrapper').append(sliceData).css("display", "none");
 363                                 $('#advancedTenantSliceDataWrapper').append(advSliceData);
 364                                 $("#advancedTenantSliceDataWrapper").css("display", "none");
 365                                 $("<select></select>").attr('id', 'tenantSliceDropDown').appendTo('#slice-name-value');
 366                                 for (row in rows) {
 367                                         $("#tenantSliceDropDown").append("<option>" + rows[row]['sliceName'] + "</option>");
 368                                 }
 369                                 $("<select></select>").attr('id', 'advTenantSliceDropDown').appendTo('#adv-slice-name-value');
 370                                         for (row in rows) {
 371                                                 $("#advTenantSliceDropDown").append("<option>" + rows[row]['sliceName'] + "</option>");
 372                                         }
 373                                 $("<div></div>").attr('id', 'tenantSiteTable').appendTo('#tabs-5').css("display","none");
 374                                 $("<div></div>").attr('id', 'advTenantSiteTable').appendTo('#tabs-5').css("display", "none");
 375                                 $('<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");
 376                                 $('<div class="btn btn-success" id="delete-slice-btn"><i class="icon-plus-sign icon-white"></i>&nbsp;Delete a Slice</div>').appendTo("#tabs-5");
 377                                 $('<div class="btn btn-success" id="add-user-btn"><i class="icon-plus-sign icon-white"></i>&nbsp;Add User</div>').appendTo("#tabs-5");
 378                                 $('<div class="btn btn-high btn-info" id="download-details">Download Slice Details</div>').appendTo("#tabs-5");
 379                                 $('<div class="btn btn-success" id="sliver-btn"><i class="icon-plus-sign icon-white"></i>&nbsp;Add/Remove Slivers</div>').appendTo("#tabs-5");
 380                                 $('<div class="btn btn-high btn-info" id="save-btn">Save</div>').appendTo("#tabs-5").css("display", "none");
 381                                 $("#advanced-tenant").unbind().click(function () {
 382                                         var value = $("#tenantSliceDropDown").val();
 383                                         advShowSliceData(rows,imageData,serviceLevelData,siteRows,dataSet,value);
 384                                                 $("#tenantSliceDataWrapper").css("display","none");
 385                                                 $("#advancedTenantSliceDataWrapper").css("display","block");
 386                                                 $("#advTenantSiteTable").css("display","block");
 387                                                 $("#tenantSiteTable").css("display","none");
 388                                                 $("#sliver-btn").toggle();
 389                                                 $("#save-btn").toggle();
 390
 391                         });
 392                         $("#sliver-btn").click(function () {
 393                                 $("#basic-tooltip").css("display", "none");
 394                                 $("#dialog-form").dialog({
 395                                         autoOpen: false,
 396                                         height: 200,
 397                                         width: 400,
 398                                         modal: true,
 399                                         dialogClass: "tenantDialog",
 400                                         buttons: {
 401                                                 "Add": function () {
 402                                                         $.ajax({
 403                                                                 url: '/tenantaddorremsliver/',
 404                                                                 dataType: 'json',
 405                                                                 data: {
 406                                                                         count: parseInt($("#numOfSlivers").val()),
 407                                                                         slice: $("#tenantSliceDropDown").val(),
 408                                                                         image: $("#slice-image-value").html(),
 409                                                                         actionToDo: "add",
 410                                                                         csrfmiddlewaretoken: "{{ csrf_token }}", // < here
 411                                                                         state: "inactive"
 412                                                                 },
 413                                                                 type: 'POST',
 414                                                                 beforeSend: function () {
 415                                                                         if (!$("#numOfSlivers").val()) {
 416                                                                                 $("#basic-tooltip").css("display", "block");
 417                                                                                 return false;
 418                                                                         } else {
 419                                                                                 return true;
 420                                                                         }
 421                                                                 },
 422                                                                 success: function () {
 423                                                                         location.reload();
 424 $("#dialog-form").dialog("close");
 425                                                                 }
 426                                                         });
 427                                                 },
 428                                                 Remove: function () {
 429                                                         $.ajax({
 430                                                                 url: '/tenantaddorremsliver/',
 431                                                                 dataType: 'json',
 432                                                                 data: {
 433                                                                         count: parseInt($("#numOfSlivers").val()),
 434                                                                         slice: $("#tenantSliceDropDown").val(),
 435                                                                         image: $("#slice-image-value").html(),
 436                                                                         actionToDo: "rem",
 437                                                                         csrfmiddlewaretoken: "{{ csrf_token }}", // < here
 438                                                                         state: "inactive"
 439                                                                 },
 440                                                                 type: 'POST',
 441                                                                 beforeSend: function () {
 442                                                                         if (!$("#numOfSlivers").val()) {
 443                                                                                 $("#basic-tooltip").css("display", "block");
 444                                                                                 return false;
 445                                                                         } else {
 446                                                                                 return true;
 447                                                                         }
 448                                                                 },
 449                                                                 success: function () {
 450 $("#dialog-form").dialog("close");
 451 location.reload();
 452
 453                                                                 }
 454                                                         });
 455                                                 }
 456                                         }
 457                                 });
 458                                 $("#dialog-form").dialog("open");
 459                         });
 460                         $("#add-user-btn").unbind().click(function(){
 461                                 $("#add-slice-user").empty();
 462                                 for (row in siteUsers) {
 463                                         $("#add-slice-user").append("<option>" + siteUsers[row] + "</option>");
 464                                 }
 465                                 $("#add-user-form").dialog({
 466                                         autoOpen: false,
 467                                         height: 200,
 468                                         width: 350,
 469                                         modal: true,
 470                                         dialogClass: "tenantDialog",
 471                                         buttons: {
 472                                                 "Submit": function () {
 473                                                         $.ajax({
 474                                                                 url: '/adduser/',
 475                                                                 dataType: 'json',
 476                                                                 data: {
 477                                                                         sliceName: $("#advTenantSliceDropDown").val(),
 478                                                                         userEmail: $("#add-slice-user").val(),
 479                                                                         csrfmiddlewaretoken: "{{ csrf_token }}", // < here
 480                                                                         state: "inactive"
 481                                                                 },
 482                                                                 async: false,
 483                                                                 type: 'POST',
 484                                                                 success: function () {
 485                                                                         location.reload();
 486                                                                 }
 487
 488                                                         });
 489                                                 },
 490                                                 Cancel: function () {
 491                                                         $(this).dialog("close");
 492                                                 }
 493                                         }
 494                                 });
 495                                 $("#add-user-form").dialog("open");
 496
 497
 498                         });
 499                         $("#create-slice-btn").unbind().click(function () {
 500                                 $("#new-service-class").empty();
 501                                 $("#new-image").empty();
 502                                 $("#add-user").empty();
 503                                 $("#mount-data-sets").empty();
 504                                 $("#new-network").empty();
 505                                 for (row in serviceLevelData) {
 506                                         $("#new-service-class").append("<option>" + serviceLevelData[row]['serviceClass'] + "</option>");
 507                                 }
 508                                 for (row in imageData) {
 509                                         $("#new-image").append("<option>" + imageData[row] + "</option>");
 510                                 }
 511                                 for (row in dataSet) {
 512                                         $("#mount-data-sets").append("<option>" + dataSet[row]['DataSet'] + "</option>");
 513                                 }
 514                                 for (row in siteUsers) {
 515                                         $("#add-user").append("<option>" + siteUsers[row] + "</option>");
 516                                 }
 517                                 var nameOfSlice = $("#new-slice-name").val();
 518                                 var nameOfServiceClass = $("#new-service-class").val();
 519                                 var nameOfImage = $("#new-image").val();
 520                                 $("#create-slice-form").dialog({
 521                                         autoOpen: false,
 522                                         height: 420,
 523                                         width: 400,
 524                                         modal: true,
 525                                         dialogClass: "tenantDialog",
 526                                         buttons: {
 527                                                 "Submit": function () {
 528                                                         $.ajax({
 529                                                                 url: '/createnewslice/',
 530                                                                 dataType: 'json',
 531                                                                 data: {
 532                                                                         sliceName: $("#new-slice-name").val(),
 533                                                                         serviceClass: nameOfServiceClass,
 534                                                                         imageName: $("#new-image").val(),
 535                                                                         network: $("#new-network").val(),
 536                                                                         privateVolume: $("#private-vol").is(":checked"),
 537                                                                         mountDataSets: $("#mount-data-sets").val(),
 538                                                                         userEmail: $("#add-user").val(),
 539                                                                         actionToDo: "add",
 540                                                                         csrfmiddlewaretoken: "{{ csrf_token }}", // < here
 541                                                                         state: "inactive"
 542                                                                 },
 543                                                                 async: false,
 544                                                                 type: 'POST',
 545                                                                 beforeSend: function () {
 546                                                                         if (!$("#new-slice-name").val()) {
 547                                                                                 $("#tooltip").css("display", "block");
 548                                                                                 return false;
 549                                                                         } else {
 550                                                                                 return true;
 551                                                                         }
 552                                                                 },
 553                                                                 success: function () {
 554                                                                         location.reload();
 555                                                                 }
 556                                                         });
 557                                                    $.ajax({
 558                                                                 url: '/tenantaddorremsliver/',
 559                                                                 dataType: 'json',
 560                                                                 data: {
 561                                                                         count: parseInt($("#number-of-slivers").val()),
 562                                                                         slice: $("#new-slice-name").val(),
 563                                                                         image: $("#new-image").val(),
 564                                                                         actionToDo: "add",
 565                                                                         csrfmiddlewaretoken: "{{ csrf_token }}", // < here
 566                                                                         state: "inactive"
 567                                                                 },
 568                                                                 async: false,
 569                                                                 type: 'POST',
 570                                                                 success: function () {
 571                                                                         location.reload();
 572                                                                 }
 573                                                         });
 574
 575                                                 },
 576                                                 Cancel: function () {
 577                                                         $(this).dialog("close");
 578                                                 }
 579                                         }
 580                                 });
 581                                 $("#create-slice-form").dialog("open");
 582                         });
 583                         $("#delete-slice-btn").unbind().click(function () {
 584                                 $("#delete-slice").empty();
 585                                 for (row in rows) {
 586                                         $("#delete-slice").append("<option>" + rows[row]['sliceName'] + "</option>");
 587                                 }
 588                                 $("#delete-slice-form").dialog({
 589                                         autoOpen: false,
 590                                         height: 200,
 591                                         width: 350,
 592                                         modal: true,
 593                                         dialogClass: "tenantDialog",
 594                                         buttons: {
 595                                                 "Delete": function () {
 596                                                         $.ajax({
 597                                                                 url: '/tenantdeleteslice/',
 598                                                                 dataType: 'json',
 599                                                                 data: {
 600                                                                         sliceName: $("#delete-slice").val(),
 601                                                                         csrfmiddlewaretoken: "{{ csrf_token }}", // < here
 602                                                                         state: "inactive"
 603                                                                 },
 604                                                                 type: 'POST',
 605                                                                 success: function () {
 606                                                                         location.reload();
 607                                                                 },
 608                                                           error:function (xhr, textStatus, thrownError){
 609                                                                    errorDialog("Error:", textStatus + " " + xhr.responseText);
 610                                                         }
 611                                                         });
 612                                                 },
 613                                                 Cancel: function () {
 614                                                         $(this).dialog("close");
 615                                                 }
 616                                         }
 617                                 });
 618                                 $("#delete-slice-form").dialog("open");
 619                         });
 620                 }
 621
 622
 623         function initTenant() {
 624                 jQuery.ajax({
 625                         url: '/tenantview',
 626                         dataType: 'json',
 627                         success: function (data) {
 628                                 var rows = data['userSliceInfo']['rows'];
 629                                 var imageData = data['image']['rows'];
 630                                 //var networkData = data['network']['rows'];
 631                                 var serviceLevelData = data['sliceServiceClass']['rows'];
 632                                 //var siteRows = data['sites']['rows'];
 633                                 var siteRows = data['availableSites']['rows'];
 634                                 var dataSet = data['mountDataSets']['rows'];
 635                                 var siteUsers = data['siteUsers'];
 636                                 UserSliceTable(rows,imageData,serviceLevelData,siteRows,dataSet,siteUsers);
 637                                 if(!(data['publicKey'])){
 638                                         $(".public-key-warning").css("display","block");
 639                                 }
 640                                 var value = $("#tenantSliceDropDown").val();
 641                                 checkForBasicAdvView(value,rows,imageData,serviceLevelData,siteRows,dataSet);
 642                                 $("#tooltip").css("display", "none");
 643                                 $("#basic-tooltip").css("display", "none");
 644                                 $("#adv-tooltip").css("display", "none");
 645                                 if(!(data['role']=="pi"||data['role']=="admin")){
 646                                         $("#create-slice-btn").off();
 647                                         $("#create-slice-btn").css('background','grey');
 648                                         $("#delete-slice-btn").off();
 649                                         $("#delete-slice-btn").css('background','grey');
 650                                         $("#add-user-btn").off();
 651                                         $("#add-user-btn").css('background','grey');
 652                                 }
 653                         },
 654                         complete: function () {}
 655                 });
 656         }
 657
 658         initTenant();
 659 });
 660 </script>
 661
 662 </html>