blob: a87be93eba84b1a24cb93de194d570dba1dcc0b1 [file] [log] [blame]
<!--
Copyright 2017-present Open Networking Foundation
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!doctype html>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<div id="dialog-form" title="Add/Remove Instances" style="display: none;">
<form>
<fieldset>
<label for="numberOfInstances">Number of Instances</label>
<input type="text" name="numberOfInstances" id="numOfInstances" class="text ui-widget-content ui-corner-all">
<div id=basic-tooltip>Please enter number of instances</div>
</fieldset>
</form>
</div>
<div id="adv-dialog-form" title="Add/Remove Instances" style="display: none;">
<form>
<fieldset>
<label for="numberOfInstances">Number of Instances</label>
<input type="text" name="numberOfInstances" id="advNumOfInstances" class="text ui-widget-content ui-corner-all">
<div id=adv-tooltip>Please enter number of instances</div>
</fieldset>
</form>
</div>
<div id="add-user-form" title="Add User" style="display: none;">
<form>
<fieldset>
<div class="create-slice-row">
<label for="add-slice-user">Add User</label>
<select id="add-slice-user" class="tenant-create-slice"></select>
</div>
</fieldset>
</form>
</div>
<div id="create-slice-form" title="Create New Slice" style="display: none;">
<form>
<fieldset>
<div class="create-slice-row">
<label for="new-slice-name">Name</label>
<input type="text" name="new-slice-name" id="new-slice-name">
</div>
<div class="create-slice-row">
<label for="new-service-class">Service Class</label>
<select id="new-service-class" class="tenant-create-slice"></select>
</div>
<div class="create-slice-row">
<label for="new-image">Image</label>
<select id="new-image" class="tenant-create-slice"></select>
</div>
<div class="create-slice-row">
<label for="new-network">Network Ports</label>
<input type="text" name="new-network" id="new-network">
</div>
<div class="create-slice-row">
<label for="private-vol">Include Private Vol</label>
<input type="checkbox" name="checkbox" id="private-vol" value="value">
</div>
<div class="create-slice-row">
<label for="add-user">Add User</label>
<select id="add-user" class="tenant-create-slice"></select>
</div>
<div class="create-slice-row">
<label for="mount-data-sets">Data Set</label>
<select id="mount-data-sets" class="tenant-create-slice"></select>
</div>
<div class="create-slice-row">
<label for="number-of-instances">Number Of Instances</label>
<input type="text" name="number-of-instances" id="number-of-instances">
</div>
<div id=tooltip>Slice Name cannot be empty</div>
</fieldset>
</form>
</div>
<div id="delete-slice-form" title="Delete a Slice" style="display: none;">
<form>
<fieldset>
<div class="create-slice-row">
<label for="delete-slice">Choose a Slice</label>
<select id="delete-slice"></select>
</div>
</fieldset>
</form>
</div>
<script type="text/javascript">
google.load('visualization', '1', {
'packages': ['controls', 'table', 'corechart', 'geochart']
});
</script>
<script>
$(document).ready(function () {
function showSliceData(rows,imageData,serviceLevelData,siteRows,dataSet,value) {
$("#service-level-value").empty();
$("#slice-image-value").empty();
$("#tenantSiteTable").empty();
$('#tenantSiteTable').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="tenantSiteTableData"></table>');
$("#tenantSliceDropDown").val(value);
var siteNames = [];
var instanceCount;
for (row in rows) {
if (rows[row]['sliceName'] == value) {
sliceImageData = rows[row]['preferredImage'];
$("#slice-image-value").html(sliceImageData);
serviceLevelDataBasic = rows[row]['sliceServiceClass'];
$("#service-level-value").html(serviceLevelDataBasic);
var innerRows = rows[row]['sliceSite'];
for (innerRow in innerRows) {
instanceCount = innerRows[innerRow];
siteNames.push([innerRow, instanceCount]);
}
}
}
oTable = $('#tenantSiteTableData').dataTable({
"bJQueryUI": true,
"bFilter": false,
"bInfo": false,
"bLengthChange": false,
"aaData": siteNames,
"bStateSave": true,
"aoColumns": [{
"sTitle": "Site Name"
}, {
"sTitle": "Allocated",
sClass: "alignCenter"
}
]
});
$('#tenantSliceDropDown').on('change', function () {
var value = $("#tenantSliceDropDown").val();
//alert(value);
checkForBasicAdvView(value,rows,imageData,serviceLevelData,siteRows,dataSet);
});
}
function downloadSliceInfo(rows,imageData,serviceLevelData,siteRows,dataSet,value){
$("#download-details").unbind().click(function(){
function download(filename, text) {
var sliceDetails = document.createElement('a');
sliceDetails.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
sliceDetails.setAttribute('download', filename);
sliceDetails.click();
}
var sliceInfo;
for (row in rows){
if(rows[row]['sliceName']==value){
sliceInfo = "Slice Name: "+rows[row]['sliceName']+"\nNumber of Instances: "+rows[row]['numOfInstances']+"\nService Level: "+rows[row]['sliceServiceClass']+"\nImage: "+rows[row]['preferredImage']+"\n";
for (instanceNodePairs in rows[row]['instanceNodePair']){
sliceInfo += instanceNodePairs+"@"+rows[row]['instanceNodePair'][instanceNodePairs]+"\n";
}
}
}
download('slice.txt', sliceInfo);
});
}
function editInstanceAdv() {
$(".edit-view").click(function () {
var allocatedInstances = parseInt($(this).parent().siblings(".allocated").html());
var td = $(this).parent().siblings(".allocated");
var pos = oTable.fnGetPosition(td[0]);
$("#numOfInstances").val("");;
$("#advNumOfInstances").val("");;
$("#adv-tooltip").css("display", "none");
$("#adv-dialog-form").dialog({
autoOpen: false,
height: 200,
width: 350,
modal: true,
dialogClass: "tenantDialog",
buttons: {
"Add": function () {
allocatedInstances += parseInt($("#advNumOfInstances").val());
$("#adv-tooltip").css("display", "block");
$(this).dialog("close");
td.html(allocatedInstances);
},
"Remove": function () {
allocatedInstances -= parseInt($("#advNumOfInstances").val());
$("#adv-tooltip").css("display", "block");
$(this).dialog("close");
td.html(allocatedInstances);
}
}
});
$("#adv-dialog-form").dialog("open");
});
}
function advShowSliceData(rows,imageData,serviceLevelData,siteRows,dataSet,value) {
$("#adv-service-level-value").empty();
$("#adv-slice-image-value").empty();
$("#adv-slice-data-set-value").empty();
$("#advTenantSliceDropDown").val(value);
$("<select></select>").attr('id', 'adv-service-level-dropdown').appendTo('#adv-service-level-value');
$("<select></select>").attr('id', 'adv-image-dropdown').appendTo('#adv-slice-image-value');
$("<select></select>").attr('id', 'adv-dataset-dropdown').appendTo('#adv-slice-data-set-value');
$('#advTenantSiteTable').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="advTenantSiteTableData"></table>');
var siteNames = [];
var instanceCount;
var tableData = {};
for (row in serviceLevelData) {
$("#adv-service-level-dropdown").append("<option>" + serviceLevelData[row]['serviceClass'] + "</option>");
}
for (row in imageData) {
$("#adv-image-dropdown").append("<option>" + imageData[row] + "</option>");
}
for (row in dataSet) {
$("#adv-dataset-dropdown").append("<option>" + dataSet[row]['DataSet'] + "</option>");
}
for (row in rows) {
if (rows[row]['sliceName'] == value) {
var innerRows = rows[row]['sliceSite'];
$("#adv-service-level-dropdown").val(rows[row]['sliceServiceClass']);
$("#adv-image-dropdown").val(rows[row]['preferredImage']);
$("#adv-dataset-dropdown").val(rows[row]['sliceDataSet']);
for (innerRow in innerRows) {
tableData[innerRow] = innerRows[innerRow];
}
}
}
for (row in siteRows) {
//var entry = siteRows[row]['siteName'];
var entry = siteRows[row];
if (!(entry in tableData)) {
//tableData[siteRows[row]['siteName']] = 0;
tableData[siteRows[row]] = 0;
}
}
for (row in tableData) {
siteNames.push([row, tableData[row], '<a href="#" class="edit-view">Edit</a>']);
}
$("#save-btn").unbind().click(function () {
var newTableData = {};
var newSite = $(".siteName");
var newAllocated = $(".allocated");
for (i = 1; i < newSite.length; i++) {
newTableData[$($(".siteName")[i]).text()] = parseInt($($(".allocated")[i]).text());
}
for (newRow in newTableData) {
if (newTableData[newRow] > tableData[newRow]) {
$.ajax({
url: '/tenantaddorreminstance/',
dataType: 'json',
data: {
siteName: newRow,
count: newTableData[newRow] - tableData[newRow],
slice: $("#advTenantSliceDropDown").val(),
image: $("#adv-image-dropdown").val(),
actionToDo: "add",
csrfmiddlewaretoken: "{{ csrf_token }}", // < here
state: "inactive"
},
type: 'POST',
complete: function () {
//location.reload();
}
});
} else if (newTableData[newRow] < tableData[newRow]) {
$.ajax({
url: '/tenantaddorreminstance/',
dataType: 'json',
data: {
siteName: newRow,
count: tableData[newRow] - newTableData[newRow],
slice: $("#advTenantSliceDropDown").val(),
image: $("#adv-image-dropdown").val(),
actionToDo: "rem",
csrfmiddlewaretoken: "{{ csrf_token }}", // < here
state: "inactive"
},
type: 'POST',
complete: function () {
//location.reload();
}
});
}
}
$.ajax({
url: '/updateslice/',
dataType: 'json',
data: {
sliceName: $("#advTenantSliceDropDown").val(),
serviceClass: $("#adv-service-level-dropdown").val(),
imageName: $("#adv-image-dropdown").val(),
dataSet: $("#adv-dataset-dropdown").val(),
networkPorts: $("#adv-network-value").val(),
privateVolume: $("#private-vol-checkbox").is(":checked"),
actionToDo: "update",
csrfmiddlewaretoken: "{{ csrf_token }}", // < here
state: "inactive"
},
type: 'POST',
success: function () {
$("#tabs-5").empty();
initTenant(); //location.reload();
},
error:function (xhr, textStatus, thrownError){
errorDialog("Error:", textStatus + " " + xhr.responseText);
}
});
});
oTable = $('#advTenantSiteTableData').dataTable({
"bJQueryUI": true,
"bFilter": false,
"bInfo": false,
"bLengthChange": false,
"bPaginate": false,
"aaData": siteNames,
"bStateSave": true,
"aoColumns": [{
"sTitle": "Site Name",
sClass: "siteName"
}, {
"sTitle": "Allocated",
sClass: "alignCenter allocated"
}, {
"sTitle": "Edit",
sClass: "alignCenter"
}]
});
editInstanceAdv();
$('#advTenantSliceDropDown').on('change', function () {
var selectedValue = $("#advTenantSliceDropDown").val();
checkForBasicAdvView(selectedValue, rows,imageData,serviceLevelData,siteRows,dataSet);
});
}
function checkForBasicAdvView(value, rows,imageData,serviceLevelData,siteRows,dataSet) {
for (row in rows) {
if (rows[row]['sliceName'] == value) {
if (rows[row]['numOfSites'] > 1) {
advShowSliceData(rows,imageData,serviceLevelData,siteRows,dataSet,value);
downloadSliceInfo(rows,imageData,serviceLevelData,siteRows,dataSet,value);
$("#tenantSliceDataWrapper").css("display","none");
$("#advancedTenantSliceDataWrapper").css("display","block");
$("#advTenantSiteTable").css("display","block");
$("#tenantSiteTable").css("display","none");
$("#instance-btn").css("display","none");
$("#save-btn").css("display","block");
break;
} else if(rows[row]['numOfSites'] <= 1){
showSliceData(rows,imageData,serviceLevelData,siteRows,dataSet,value);
downloadSliceInfo(rows,imageData,serviceLevelData,siteRows,dataSet,value);
$("#tenantSliceDataWrapper").css("display","block");
$("#advancedTenantSliceDataWrapper").css("display","none");
$("#advTenantSiteTable").css("display","none");
$("#tenantSiteTable").css("display","block");
$("#instance-btn").css("display","block");
$("#save-btn").css("display","none");
break;
}break;
}
}
}
function UserSliceTable(rows,imageData,serviceLevelData,siteRows,dataSet,siteUsers) {
//Add check for #dynamicusersliceinfo_filter label-> input having focus here
$("<div></div>").attr('id', 'tenantSliceDataWrapper').appendTo('#tabs-5');
$("<div></div>").attr('id', 'advancedTenantSliceDataWrapper').appendTo('#tabs-5');
var sliceData = '';
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>';
var advSliceData = '';
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 instances</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 instances</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>';
$('#tenantSliceDataWrapper').append(sliceData).css("display", "none");
$('#advancedTenantSliceDataWrapper').append(advSliceData);
$("#advancedTenantSliceDataWrapper").css("display", "none");
$("<select></select>").attr('id', 'tenantSliceDropDown').appendTo('#slice-name-value');
for (row in rows) {
$("#tenantSliceDropDown").append("<option>" + rows[row]['sliceName'] + "</option>");
}
$("<select></select>").attr('id', 'advTenantSliceDropDown').appendTo('#adv-slice-name-value');
for (row in rows) {
$("#advTenantSliceDropDown").append("<option>" + rows[row]['sliceName'] + "</option>");
}
$("<div></div>").attr('id', 'tenantSiteTable').appendTo('#tabs-5').css("display","none");
$("<div></div>").attr('id', 'advTenantSiteTable').appendTo('#tabs-5').css("display", "none");
$('<div class="btn btn-success" id="create-slice-btn"><i class="icon-plus-sign icon-white"></i>&nbsp;Create New Slice</div>').appendTo("#tabs-5");
$('<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");
$('<div class="btn btn-success" id="add-user-btn"><i class="icon-plus-sign icon-white"></i>&nbsp;Add User</div>').appendTo("#tabs-5");
$('<div class="btn btn-high btn-info" id="download-details">Download Slice Details</div>').appendTo("#tabs-5");
$('<div class="btn btn-success" id="instance-btn"><i class="icon-plus-sign icon-white"></i>&nbsp;Add/Remove Instances</div>').appendTo("#tabs-5");
$('<div class="btn btn-high btn-info" id="save-btn">Save</div>').appendTo("#tabs-5").css("display", "none");
$("#advanced-tenant").unbind().click(function () {
var value = $("#tenantSliceDropDown").val();
advShowSliceData(rows,imageData,serviceLevelData,siteRows,dataSet,value);
$("#tenantSliceDataWrapper").css("display","none");
$("#advancedTenantSliceDataWrapper").css("display","block");
$("#advTenantSiteTable").css("display","block");
$("#tenantSiteTable").css("display","none");
$("#instance-btn").toggle();
$("#save-btn").toggle();
});
$("#instance-btn").click(function () {
$("#basic-tooltip").css("display", "none");
$("#dialog-form").dialog({
autoOpen: false,
height: 200,
width: 400,
modal: true,
dialogClass: "tenantDialog",
buttons: {
"Add": function () {
$.ajax({
url: '/tenantaddorreminstance/',
dataType: 'json',
data: {
count: parseInt($("#numOfInstances").val()),
slice: $("#tenantSliceDropDown").val(),
image: $("#slice-image-value").html(),
actionToDo: "add",
csrfmiddlewaretoken: "{{ csrf_token }}", // < here
state: "inactive"
},
type: 'POST',
beforeSend: function () {
if (!$("#numOfInstances").val()) {
$("#basic-tooltip").css("display", "block");
return false;
} else {
return true;
}
},
success: function () {
location.reload();
$("#dialog-form").dialog("close");
}
});
},
Remove: function () {
$.ajax({
url: '/tenantaddorreminstance/',
dataType: 'json',
data: {
count: parseInt($("#numOfInstances").val()),
slice: $("#tenantSliceDropDown").val(),
image: $("#slice-image-value").html(),
actionToDo: "rem",
csrfmiddlewaretoken: "{{ csrf_token }}", // < here
state: "inactive"
},
type: 'POST',
beforeSend: function () {
if (!$("#numOfInstances").val()) {
$("#basic-tooltip").css("display", "block");
return false;
} else {
return true;
}
},
success: function () {
$("#dialog-form").dialog("close");
location.reload();
}
});
}
}
});
$("#dialog-form").dialog("open");
});
$("#add-user-btn").unbind().click(function(){
$("#add-slice-user").empty();
for (row in siteUsers) {
$("#add-slice-user").append("<option>" + siteUsers[row] + "</option>");
}
$("#add-user-form").dialog({
autoOpen: false,
height: 200,
width: 350,
modal: true,
dialogClass: "tenantDialog",
buttons: {
"Submit": function () {
$.ajax({
url: '/adduser/',
dataType: 'json',
data: {
sliceName: $("#advTenantSliceDropDown").val(),
userEmail: $("#add-slice-user").val(),
csrfmiddlewaretoken: "{{ csrf_token }}", // < here
state: "inactive"
},
async: false,
type: 'POST',
success: function () {
location.reload();
}
});
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#add-user-form").dialog("open");
});
$("#create-slice-btn").unbind().click(function () {
$("#new-service-class").empty();
$("#new-image").empty();
$("#add-user").empty();
$("#mount-data-sets").empty();
$("#new-network").empty();
for (row in serviceLevelData) {
$("#new-service-class").append("<option>" + serviceLevelData[row]['serviceClass'] + "</option>");
}
for (row in imageData) {
$("#new-image").append("<option>" + imageData[row] + "</option>");
}
for (row in dataSet) {
$("#mount-data-sets").append("<option>" + dataSet[row]['DataSet'] + "</option>");
}
for (row in siteUsers) {
$("#add-user").append("<option>" + siteUsers[row] + "</option>");
}
var nameOfSlice = $("#new-slice-name").val();
var nameOfServiceClass = $("#new-service-class").val();
var nameOfImage = $("#new-image").val();
$("#create-slice-form").dialog({
autoOpen: false,
height: 420,
width: 400,
modal: true,
dialogClass: "tenantDialog",
buttons: {
"Submit": function () {
$.ajax({
url: '/createnewslice/',
dataType: 'json',
data: {
sliceName: $("#new-slice-name").val(),
serviceClass: nameOfServiceClass,
imageName: $("#new-image").val(),
network: $("#new-network").val(),
privateVolume: $("#private-vol").is(":checked"),
mountDataSets: $("#mount-data-sets").val(),
userEmail: $("#add-user").val(),
actionToDo: "add",
csrfmiddlewaretoken: "{{ csrf_token }}", // < here
state: "inactive"
},
async: false,
type: 'POST',
beforeSend: function () {
if (!$("#new-slice-name").val()) {
$("#tooltip").css("display", "block");
return false;
} else {
return true;
}
},
success: function () {
location.reload();
}
});
$.ajax({
url: '/tenantaddorreminstance/',
dataType: 'json',
data: {
count: parseInt($("#number-of-instances").val()),
slice: $("#new-slice-name").val(),
image: $("#new-image").val(),
actionToDo: "add",
csrfmiddlewaretoken: "{{ csrf_token }}", // < here
state: "inactive"
},
async: false,
type: 'POST',
success: function () {
location.reload();
}
});
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#create-slice-form").dialog("open");
});
$("#delete-slice-btn").unbind().click(function () {
$("#delete-slice").empty();
for (row in rows) {
$("#delete-slice").append("<option>" + rows[row]['sliceName'] + "</option>");
}
$("#delete-slice-form").dialog({
autoOpen: false,
height: 200,
width: 350,
modal: true,
dialogClass: "tenantDialog",
buttons: {
"Delete": function () {
$.ajax({
url: '/tenantdeleteslice/',
dataType: 'json',
data: {
sliceName: $("#delete-slice").val(),
csrfmiddlewaretoken: "{{ csrf_token }}", // < here
state: "inactive"
},
type: 'POST',
success: function () {
location.reload();
},
error:function (xhr, textStatus, thrownError){
errorDialog("Error:", textStatus + " " + xhr.responseText);
}
});
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#delete-slice-form").dialog("open");
});
}
function initTenant() {
jQuery.ajax({
url: '/tenantview',
dataType: 'json',
success: function (data) {
var rows = data['userSliceInfo']['rows'];
var imageData = data['image']['rows'];
//var networkData = data['network']['rows'];
var serviceLevelData = data['sliceServiceClass']['rows'];
//var siteRows = data['sites']['rows'];
var siteRows = data['availableSites']['rows'];
var dataSet = data['mountDataSets']['rows'];
var siteUsers = data['siteUsers'];
UserSliceTable(rows,imageData,serviceLevelData,siteRows,dataSet,siteUsers);
if(!(data['publicKey'])){
$(".public-key-warning").css("display","block");
}
var value = $("#tenantSliceDropDown").val();
checkForBasicAdvView(value,rows,imageData,serviceLevelData,siteRows,dataSet);
$("#tooltip").css("display", "none");
$("#basic-tooltip").css("display", "none");
$("#adv-tooltip").css("display", "none");
if(!(data['role']=="pi"||data['role']=="admin")){
$("#create-slice-btn").off();
$("#create-slice-btn").css('background','grey');
$("#delete-slice-btn").off();
$("#delete-slice-btn").css('background','grey');
$("#add-user-btn").off();
$("#add-user-btn").css('background','grey');
}
},
complete: function () {}
});
}
initTenant();
});
</script>
</html>