merge Amisha's changes
diff --git a/planetstack/templates/admin/dashboard/tenant.html b/planetstack/templates/admin/dashboard/tenant.html
new file mode 100644
index 0000000..8bcd5ce
--- /dev/null
+++ b/planetstack/templates/admin/dashboard/tenant.html
@@ -0,0 +1,325 @@
+<!doctype html>
+<style>
+#tenantSliceDataWrapper {
+ padding: 1% 0;
+}
+</style>
+<script type="text/javascript" src="http://www.google.com/jsapi"></script>
+<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
+<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
+<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">
+ </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">
+ </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" class="text">
+ </div>
+ <div class="create-slice-row">
+ <label for="new-service-class">Service Class</label>
+ <select id="new-service-class"></select>
+ </div>
+ <div class="create-slice-row">
+ <label for="new-image">Image</label>
+ <select id="new-image"></select>
+ </div>
+ <div id=tooltip>Slice Name cannot be empty</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) {
+ var value = $("#tenantSliceDropDown").val();
+ 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>');
+ var rows = data['userSliceInfo']['rows'];
+ var siteNames = [];
+ var sliverCount;
+ for (row in rows) {
+ if (rows[row]['sliceName'] == value) {
+ sliceImageData = rows[row]['sliceImage'];
+ $("#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"},
+ ]
+ });
+ }
+
+ function initTenant() {
+ jQuery.ajax({
+ url: '/tenantview',
+ dataType: 'json',
+ success: function (data) {
+ UserSliceTable(data);
+ showSliceData(data);
+ $("#tooltip").css("display","none");
+ },
+ complete: function () {}
+ });
+
+ 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-4');
+ $("<div></div>").attr('id', 'advancedTenantSliceDataWrapper').appendTo('#tabs-4');
+ 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><br></div><div class="tenant-row"><span class="summary-attr"><b>Image:</b> <span id="adv-slice-image-value"> </span> </span><br></div><div class="tenant-row"><span class="summary-attr"><b>Network:</b> <span id="adv-slice-network-value"> </span> </span></div><div class="btn btn-high btn-info" id="basic-tenant">Go to Basic View</div>';
+ $('#tenantSliceDataWrapper').append(sliceData);
+ $('#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>");
+ }
+ $("<div></div>").attr('id', 'tenantSiteTable').appendTo('#tabs-4');
+ $("<div></div>").attr('id', 'advTenantSiteTable').appendTo('#tabs-4').css("display", "none");
+ $('<div class="btn btn-success" id="create-slice-btn"><i class="icon-plus-sign icon-white"></i> Create New Slice</div>').appendTo("#tabs-4");
+ $('<div class="btn btn-success" id="sliver-btn"><i class="icon-plus-sign icon-white"></i> Add/Remove Slivers</div>').appendTo("#tabs-4");
+ $('<div class="btn btn-high btn-info" id="save-btn">Save</div>').appendTo("#tabs-4").css("display", "none");
+ $('#tenantSliceDropDown').on('change', function () {
+ showSliceData(data);
+ });
+ $("#advanced-tenant").click(function () {
+ $("#tenantSliceDataWrapper").toggle();
+ $("#advancedTenantSliceDataWrapper").toggle();
+ $("#advTenantSiteTable").toggle();
+ $("#tenantSiteTable").toggle();
+ $("#sliver-btn").toggle();
+ $("#save-btn").toggle();
+ $('#adv-slice-name-value').empty();
+ $("<select></select>").attr('id', 'advTenantSliceDropDown').appendTo('#adv-slice-name-value');
+ for (row in rows) {
+ $("#advTenantSliceDropDown").append("<option>" + rows[row]['sliceName'] + "</option>");
+ }
+ advShowSliceData(data);
+ editSliverAdv();
+ $('#advTenantSliceDropDown').on('change', function () {
+ advShowSliceData(data);
+ editSliverAdv();
+ });
+
+ 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-dialog-form").dialog({
+ autoOpen: false,
+ height: 200,
+ width: 350,
+ modal: true,
+ buttons: {
+ "Add": function () {
+ allocatedSlivers += parseInt($("#advNumOfSlivers").val());
+ $(this).dialog("close");
+ td.html(allocatedSlivers);
+ },
+ "Remove": function () {
+ allocatedSlivers -= parseInt($("#advNumOfSlivers").val());
+ $(this).dialog("close");
+ td.html(allocatedSlivers);
+ }
+ }
+ });
+ $("#adv-dialog-form").dialog("open");
+ });
+ }
+
+ function advShowSliceData(data) {
+ var value = $("#advTenantSliceDropDown").val();
+ var serviceLevelData = data['sliceServiceClass']['rows'];
+ var imageData = data['image']['rows'];
+ var networkData = data['network']['rows'];
+ var siteRows = data['sites']['rows'];
+ $("#adv-service-level-value").empty();
+ $("#adv-slice-image-value").empty();
+ $("#adv-slice-network-value").empty();
+ $("<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');
+ $('#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 rows) {
+ if (rows[row]['sliceName'] == value) {
+ var innerRows = rows[row]['sliceSite'];
+ 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>']);
+ }
+
+ oTable = $('#advTenantSiteTableData').dataTable({
+ "bJQueryUI": true,
+ "bFilter": false,
+ "bInfo": false,
+ "bLengthChange": false,
+ "aaData": siteNames,
+ "bStateSave": true,
+ "aoColumns": [{
+ "sTitle": "Site Name"
+ }, {
+ "sTitle": "Allocated",
+ sClass: "alignCenter allocated"
+ }, {
+ "sTitle": "Edit",
+ sClass: "alignCenter"
+ }]
+ });
+ 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>");
+ }
+ }
+ });
+ $("#basic-tenant").click(function () {
+ $("#tenantSliceDataWrapper").toggle();
+ $("#advancedTenantSliceDataWrapper").toggle();
+ $("#advTenantSiteTable").toggle();
+ $("#tenantSiteTable").toggle();
+ $("#sliver-btn").toggle();
+ $("#save-btn").toggle();
+ });
+ $("#sliver-btn").click(function () {
+ $("#dialog-form").dialog({
+ autoOpen: false,
+ height: 200,
+ width: 350,
+ modal: true,
+ buttons: {
+ "Submit": function () {
+ /************Code to add or remove slivers for a slice will go here*******/
+ },
+ Cancel: function () {
+ $(this).dialog("close");
+ }
+ }
+ });
+ $("#dialog-form").dialog("open");
+ });
+ $("#create-slice-btn").click(function () {
+ var serviceLevelData = data['sliceServiceClass']['rows'];
+ var imageData = data['image']['rows'];
+ 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>");
+ }
+ var nameOfSlice= $("#new-slice-name").val();
+ var nameOfServiceClass = $("#new-service-class").val();
+ var nameOfImage = $("#new-image").val();
+ $("#create-slice-form").dialog({
+ autoOpen: false,
+ height: 300,
+ width: 350,
+ modal: true,
+ buttons: {
+ "Submit": function () {
+ $.ajax({
+ url: '/createnewslice/',
+ dataType: 'json',
+ data: {
+ sliceName: $("#new-slice-name").val(),
+ serviceClass: nameOfServiceClass,
+ imageName: nameOfImage,
+ actionToDo: "add",
+ csrfmiddlewaretoken: "{{ csrf_token }}", // < here
+ state: "inactive"
+ },
+ 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();
+ }
+ });
+ },
+ Cancel: function () {
+ $(this).dialog("close");
+ }
+ }
+ });
+ $("#create-slice-form").dialog("open");
+ });
+ }
+ }
+ initTenant();
+});
+</script>
+
+</html>