blob: 2819fe207f3f511cf84cf0056d3eb297eaa7b3ca [file] [log] [blame]
<!doctype html>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<div id="dialog-form" title="Add/Remove Slivers" style="display: none;">
<form>
<fieldset>
<label for="numberOfSlivers">Number of Slivers</label>
<input type="text" name="numberOfSlivers" id="numOfSlivers" class="text ui-widget-content ui-corner-all">
<div id=basic-tooltip>Please enter number of slivers</div>
</fieldset>
</form>
</div>
<div id="adv-dialog-form" title="Add/Remove Slivers" style="display: none;">
<form>
<fieldset>
<label for="numberOfSlivers">Number of Slivers</label>
<input type="text" name="numberOfSlivers" id="advNumOfSlivers" class="text ui-widget-content ui-corner-all">
<div id=adv-tooltip>Please enter number of slivers</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</label>
<select id="new-network" class="tenant-create-slice"></select>
</div>
<div class="create-slice-row">
<label for="mount-data-sets">Data Sets</label>
<select id="mount-data-sets" class="tenant-create-slice"></select>
</div>
<div class="create-slice-row">
<label for="number-of-slivers">Number Of Slivers</label>
<input type="text" name="number-of-slivers" id="number-of-slivers">
</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(data,value) {
var imageData = data['image']['rows'];
var networkData = data['network']['rows'];
$("#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 rows = data['userSliceInfo']['rows'];
var siteNames = [];
var sliverCount;
for (row in rows) {
if (rows[row]['sliceName'] == value) {
sliceImageData = rows[row]['preferredImage'];
$("#slice-image-value").html(sliceImageData);
serviceLevelData = rows[row]['sliceServiceClass'];
$("#service-level-value").html(serviceLevelData);
var innerRows = rows[row]['sliceSite'];
for (innerRow in innerRows) {
sliverCount = innerRows[innerRow];
siteNames.push([innerRow, sliverCount]);
}
}
}
oTable = $('#tenantSiteTableData').dataTable({
"bJQueryUI": true,
"bFilter": false,
"bInfo": false,
"bLengthChange": false,
"aaData": siteNames,
"bStateSave": true,
"aoColumns": [{
"sTitle": "Site Name"
}, {
"sTitle": "Allocated",
sClass: "alignCenter"
}
//{ "sTitle": "Allocated" , sClass: "alignCenter"},
//{ "sTitle": "Desired" , sClass: "alignCenter"},
]
});
$('#tenantSliceDropDown').on('change', function () {
var value = $("#tenantSliceDropDown").val();
//alert(value);
checkForBasicAdvView(value, data);
});
}
function downloadSliceInfo(data,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 rows = data['userSliceInfo']['rows'];
var sliceInfo;
for (row in rows){
if(rows[row]['sliceName']==value){
sliceInfo = "Slice Name: "+rows[row]['sliceName']+"\nNumber of Slivers: "+rows[row]['numOfSlivers']+"\nService Level: "+rows[row]['sliceServiceClass']+"\nImage: "+rows[row]['sliceImage']+"\n";
for (instanceNodePairs in rows[row]['instanceNodePair']){
sliceInfo += instanceNodePairs+"@"+rows[row]['instanceNodePair'][instanceNodePairs]+"\n";
}
}
}
download('slice.txt', sliceInfo);
});
}
function editSliverAdv() {
$(".edit-view").click(function () {
var allocatedSlivers = parseInt($(this).parent().siblings(".allocated").html());
var td = $(this).parent().siblings(".allocated");
var pos = oTable.fnGetPosition(td[0]);
$("#adv-tooltip").css("display", "none");
$("#numOfSlivers").empty();
$("#adv-dialog-form").dialog({
autoOpen: false,
height: 200,
width: 350,
modal: true,
dialogClass: "tenantDialog",
buttons: {
"Add": function () {
allocatedSlivers += parseInt($("#advNumOfSlivers").val());
//if (!(parseInt($("#numOfSlivers").val()))) {
$("#adv-tooltip").css("display", "block");
//} else {
$(this).dialog("close");
td.html(allocatedSlivers);
//}
},
"Remove": function () {
allocatedSlivers -= parseInt($("#advNumOfSlivers").val());
// if (!(parseInt($("#numOfSlivers").val()))) {
$("#adv-tooltip").css("display", "block");
// } else {
$(this).dialog("close");
td.html(allocatedSlivers);
// }
}
}
});
$("#adv-dialog-form").dialog("open");
});
}
function advShowSliceData(data,value) {
var serviceLevelData = data['sliceServiceClass']['rows'];
var imageData = data['image']['rows'];
var networkData = data['network']['rows'];
var siteRows = data['sites']['rows'];
var dataSet = data['mountDataSets']['rows'];
$("#adv-service-level-value").empty();
$("#adv-slice-image-value").empty();
$("#adv-slice-data-set-value").empty();
$("#adv-slice-network-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-network-dropdown').appendTo('#adv-slice-network-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 rows = data['userSliceInfo']['rows'];
var siteNames = [];
var sliverCount;
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]['Image'] + "</option>");
}
for (row in networkData) {
$("#adv-network-dropdown").append("<option>" + networkData[row]['Network'] + "</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']);
$("#adv-network-dropdown").val(rows[row]['sliceNetwork']);
for (innerRow in innerRows) {
tableData[innerRow] = innerRows[innerRow];
}
}
}
for (row in siteRows) {
var entry = siteRows[row]['siteName'];
if (!(entry in tableData)) {
tableData[siteRows[row]['siteName']] = 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: '/tenantaddorremsliver/',
dataType: 'json',
data: {
siteName: newRow,
count: newTableData[newRow] - tableData[newRow],
slice: $("#advTenantSliceDropDown").val(),
actionToDo: "add",
csrfmiddlewaretoken: "{{ csrf_token }}", // < here
state: "inactive"
},
type: 'POST',
complete: function () {
//oTable.fnReloadAjax();
location.reload();
}
});
} else if (newTableData[newRow] < tableData[newRow]) {
$.ajax({
url: '/tenantaddorremsliver/',
dataType: 'json',
data: {
siteName: newRow,
count: tableData[newRow] - newTableData[newRow],
slice: $("#advTenantSliceDropDown").val(),
actionToDo: "rem",
csrfmiddlewaretoken: "{{ csrf_token }}", // < here
state: "inactive"
},
type: 'POST',
complete: function () {
// oTable.fnReloadAjax();
location.reload();
}
});
}
}
$.ajax({
url: '/updateslice/',
dataType: 'json',
data: {
sliceName: $("#advTenantSliceDropDown").val(),
serviceClass: $("#adv-service-level-dropdown").val(),
imageName: $("#adv-image-dropdown").val(),
network: $("#adv-network-dropdown").val(),
dataSet: $("#adv-dataset-dropdown").val(),
actionToDo: "update",
csrfmiddlewaretoken: "{{ csrf_token }}", // < here
state: "inactive"
},
type: 'POST',
complete: function () {
//oTable.fnReloadAjax();
location.reload();
}
});
});
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"
}]
});
editSliverAdv();
$('#advTenantSliceDropDown').on('change', function () {
var selectedValue = $("#advTenantSliceDropDown").val();
//alert(selectedValue);
checkForBasicAdvView(selectedValue, data);
//editSliverAdv();
});
}
function checkForBasicAdvView(value, data) {
var rows = data['userSliceInfo']['rows'];
for (row in rows) {
if (rows[row]['sliceName'] == value) {
if (rows[row]['numOfSites'] > 1) {
advShowSliceData(data,value);
downloadSliceInfo(data,value);
$("#tenantSliceDataWrapper").css("display","none");
$("#advancedTenantSliceDataWrapper").css("display","block");
$("#advTenantSiteTable").css("display","block");
$("#tenantSiteTable").css("display","none");
$("#sliver-btn").css("display","none");
$("#save-btn").css("display","block");
break;
} else if(rows[row]['numOfSites'] <= 1){
showSliceData(data,value);
downloadSliceInfo(data,value);
//editSliverAdv();
$("#tenantSliceDataWrapper").css("display","block");
$("#advancedTenantSliceDataWrapper").css("display","none");
$("#advTenantSiteTable").css("display","none");
$("#tenantSiteTable").css("display","block");
$("#sliver-btn").css("display","block");
$("#save-btn").css("display","none");
break;
}break;
}
}
}
function UserSliceTable(data) {
//Add check for #dynamicusersliceinfo_filter label-> input having focus here
var rows = data['userSliceInfo']['rows'];
$("<div></div>").attr('id', 'tenantSliceDataWrapper').appendTo('#tabs-5');
$("<div></div>").attr('id', 'advancedTenantSliceDataWrapper').appendTo('#tabs-5');
var sliceData = '';
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>';
var advSliceData = '';
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 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> <span id="adv-slice-network-value"> </span> <span class="help-inline">Changes are potentially disruptive to existing slivers</span></span></div><div class="tenant-row"><span class="summary-attr"><b>Data Sets:</b> <span id="adv-slice-data-set-value"> </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-high btn-info" id="download-details">Download Slice Details</div>').appendTo("#tabs-5");
$('<div class="btn btn-success" id="sliver-btn"><i class="icon-plus-sign icon-white"></i>&nbsp;Add/Remove Slivers</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(data,value);
$("#tenantSliceDataWrapper").css("display","none");
$("#advancedTenantSliceDataWrapper").css("display","block");
$("#advTenantSiteTable").css("display","block");
$("#tenantSiteTable").css("display","none");
$("#sliver-btn").toggle();
$("#save-btn").toggle();
});
$("#sliver-btn").click(function () {
$("#numOfSlivers").empty();
$("#basic-tooltip").css("display", "none");
$("#dialog-form").dialog({
autoOpen: false,
height: 200,
width: 400,
modal: true,
dialogClass: "tenantDialog",
buttons: {
"Add": function () {
$.ajax({
url: '/tenantaddorremsliver/',
dataType: 'json',
data: {
count: parseInt($("#numOfSlivers").val()),
slice: $("#tenantSliceDropDown").val(),
actionToDo: "add",
csrfmiddlewaretoken: "{{ csrf_token }}", // < here
state: "inactive"
},
type: 'POST',
beforeSend: function () {
if (!$("#numOfSlivers").val()) {
$("#basic-tooltip").css("display", "block");
return false;
} else {
return true;
}
},
complete: function () {
location.reload();
}
});
},
Remove: function () {
$.ajax({
url: '/tenantaddorremsliver/',
dataType: 'json',
data: {
count: parseInt($("#numOfSlivers").val()),
slice: $("#tenantSliceDropDown").val(),
actionToDo: "rem",
csrfmiddlewaretoken: "{{ csrf_token }}", // < here
state: "inactive"
},
type: 'POST',
beforeSend: function () {
if (!$("#numOfSlivers").val()) {
$("#basic-tooltip").css("display", "block");
return false;
} else {
return true;
}
},
complete: function () {
location.reload();
}
});
}
}
});
$("#dialog-form").dialog("open");
});
$("#create-slice-btn").unbind().click(function () {
var serviceLevelData = data['sliceServiceClass']['rows'];
var imageData = data['image']['rows'];
var dataSet = data['mountDataSets']['rows'];
var networkData = data['network']['rows'];
$("#new-service-class").empty();
$("#new-image").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]['Image'] + "</option>");
}
for (row in dataSet) {
$("#mount-data-sets").append("<option>" + dataSet[row]['DataSet'] + "</option>");
}
for (row in networkData) {
$("#new-network").append("<option>" + networkData[row]['Network'] + "</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: 400,
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(),
mountDataSets: $("#mount-data-sets").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 (response) {},
complete: function () {
location.reload();
}
});
$.ajax({
url: '/tenantaddorremsliver/',
dataType: 'json',
data: {
count: parseInt($("#number-of-slivers").val()),
slice: $("#new-slice-name").val(),
actionToDo: "add",
csrfmiddlewaretoken: "{{ csrf_token }}", // < here
state: "inactive"
},
async: false,
type: 'POST',
complete: function () {
location.reload();
}
});
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#create-slice-form").dialog("open");
});
$("#delete-slice-btn").unbind().click(function () {
var rows = data['userSliceInfo']['rows'];
$("#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 (response) {},
complete: function () {
location.reload();
}
});
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#delete-slice-form").dialog("open");
});
}
function initTenant() {
jQuery.ajax({
url: '/tenantview',
dataType: 'json',
success: function (data) {
UserSliceTable(data);
var value = $("#tenantSliceDropDown").val();
checkForBasicAdvView(value, data);
$("#tooltip").css("display", "none");
$("#basic-tooltip").css("display", "none");
$("#adv-tooltip").css("display", "none");
},
complete: function () {}
});
}
initTenant();
});
</script>
</html>