X-Git-Url: http://git.onelab.eu/?a=blobdiff_plain;f=planetstack%2Ftemplates%2Fadmin%2Fdashboard%2Ftenant.html;h=88933a37a7f7f018f0b2f19f72fcce831ca3c1e9;hb=449bc43035b7b018471d2c9f5fd372deefa0666d;hp=83556fd4616883f18bd9b0b7bff6f23327ce9d2d;hpb=6253dfcf6768ea61c3f4ae50e54194ef7c5618f5;p=plstackapi.git

diff --git a/planetstack/templates/admin/dashboard/tenant.html b/planetstack/templates/admin/dashboard/tenant.html
index 83556fd..88933a3 100644
--- a/planetstack/templates/admin/dashboard/tenant.html
+++ b/planetstack/templates/admin/dashboard/tenant.html
@@ -1,17 +1,11 @@
 <!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">
+			<div id=basic-tooltip>Please enter number of slivers</div>
 		</fieldset>
 	</form>
 </div>
@@ -20,6 +14,7 @@
 		<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>
@@ -28,305 +23,436 @@
 		<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">
+				<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"></select>
+				<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"></select>
+				<select id="new-image" class="tenant-create-slice"></select>
 			</div>
+			<div class="create-slice-row">
+                                <label for="new-network">Network</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="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) {
-		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]);
+	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 sliverCount;
+			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) {
+						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"
+					}
+				]
+			});
+				$('#tenantSliceDropDown').on('change', function () {
+					var value = $("#tenantSliceDropDown").val();
+	//alert(value);
+					checkForBasicAdvView(value,rows,imageData,serviceLevelData,siteRows,dataSet);
+				});
 		}
-		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 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 Slivers: "+rows[row]['numOfSlivers']+"\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 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]);
+				$("#numOfSlivers").val("");;
+				$("#advNumOfSlivers").val("");;
+				$("#adv-tooltip").css("display", "none");
+				$("#adv-dialog-form").dialog({
+					autoOpen: false,
+					height: 200,
+					width: 350,
+					modal: true,
+					dialogClass: "tenantDialog",
+					buttons: {
+						"Add": function () {
+							allocatedSlivers += parseInt($("#advNumOfSlivers").val());
+								$("#adv-tooltip").css("display", "block");
+								$(this).dialog("close");
+								td.html(allocatedSlivers);
+						},
+						"Remove": function () {
+							allocatedSlivers -= parseInt($("#advNumOfSlivers").val());
+								$("#adv-tooltip").css("display", "block");
+								$(this).dialog("close");
+								td.html(allocatedSlivers);
+						}
+					}
+				});
+				$("#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 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 dataSet) {
+                                $("#adv-dataset-dropdown").append("<option>" + dataSet[row]['DataSet'] + "</option>");
+                        }
 
-		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><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>");
+				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];
+					}
+				}
 			}
-			$("<div></div>").attr('id', 'tenantSiteTable').appendTo('#tabs-5');
-			$("<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="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");
-			$('#tenantSliceDropDown').on('change', function () {
-				showSliceData(data);
-			});
-			$("#advanced-tenant").click(function () {
-				var selectedValue = $("#tenantSliceDropDown").val();
-				$("#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>");
+			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());
 				}
-				$("#advTenantSliceDropDown").val(selectedValue);
-				advShowSliceData(data);
-				editSliverAdv();
+				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 () {
+								//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 () {
+								//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(),
+                                                                actionToDo: "update",
+                                                                csrfmiddlewaretoken: "{{ csrf_token }}", // < here
+                                                                state: "inactive"
+                                                        },
+                                                        type: 'POST',
+                                                        complete: function () {
+								$("#tabs-5").empty();
+                                                                initTenant();    //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 () {
-					advShowSliceData(data);
-					editSliverAdv();
+					var selectedValue = $("#advTenantSliceDropDown").val();
+					checkForBasicAdvView(selectedValue, rows,imageData,serviceLevelData,siteRows,dataSet);
 				});
+		}
 
-				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 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");
+						$("#sliver-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");
+						$("#sliver-btn").css("display","block");
+                                                $("#save-btn").css("display","none");
+						break;
+					}break;
 				}
+			}
+		}
 
-				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 = {};
+		function UserSliceTable(rows,imageData,serviceLevelData,siteRows,dataSet) {
+				//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 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 Sets:</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) {
-						if (rows[row]['sliceName'] == value) {
-							var innerRows = rows[row]['sliceSite'];
-							for (innerRow in innerRows) {
-								tableData[innerRow] = innerRows[innerRow];
-							}
-						}
+						$("#advTenantSliceDropDown").append("<option>" + rows[row]['sliceName'] + "</option>");
 					}
-					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").click(function () {
-                                                  	var newTableData={};
-							var newSite = $(".siteName");
-							var newAllocated = $(".allocated");
-							for(i=1; i<newSite.length; i++){
-								newTableData[$($(".siteName")[i]).text()]=$($(".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(){
-            										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(){
-                                                                                        location.reload();
-                                                                                }
-                                                                        });
-                                                                }
+				$("<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(rows,imageData,serviceLevelData,siteRows,dataSet,value);
+                                                $("#tenantSliceDataWrapper").css("display","none");
+                                                $("#advancedTenantSliceDataWrapper").css("display","block");
+                                                $("#advTenantSiteTable").css("display","block");
+                                                $("#tenantSiteTable").css("display","none");
+                                                $("#sliver-btn").toggle();
+                                                $("#save-btn").toggle();
 
-							}
-                        		});
-					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"
-						}]
-					});
-					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 () {
+				$("#basic-tooltip").css("display", "none");
 				$("#dialog-form").dialog({
 					autoOpen: false,
 					height: 200,
-					width: 350,
+					width: 400,
 					modal: true,
+					dialogClass: "tenantDialog",
 					buttons: {
-						"Submit": function () {
-							/************Code to add or remove slivers for a slice will go here*******/
+						"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;
+									}
+								},
+								success: function () {
+									location.reload();
+$("#dialog-form").dialog("close");
+								}
+							});
 						},
-						Cancel: function () {
-							$(this).dialog("close");
+						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;
+									}
+								},
+								success: function () {
+$("#dialog-form").dialog("close");								
+location.reload();
+
+								}
+							});
 						}
 					}
 				});
 				$("#dialog-form").dialog("open");
 			});
-			$("#create-slice-btn").click(function () {
-				var serviceLevelData = data['sliceServiceClass']['rows'];
-				var imageData = data['image']['rows'];
+			$("#create-slice-btn").unbind().click(function () {
+				$("#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>");
+                                }
 				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,
+					height: 400,
+					width: 400,
 					modal: true,
+					dialogClass: "tenantDialog",
 					buttons: {
 						"Submit": function () {
 							$.ajax({
@@ -335,11 +461,14 @@ $(document).ready(function () {
 								data: {
 									sliceName: $("#new-slice-name").val(),
 									serviceClass: nameOfServiceClass,
-									imageName: nameOfImage,
+									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()) {
@@ -354,6 +483,23 @@ $(document).ready(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");
@@ -362,8 +508,69 @@ $(document).ready(function () {
 				});
 				$("#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 (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) {
+				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 dataSet = data['mountDataSets']['rows'];
+				UserSliceTable(rows,imageData,serviceLevelData,siteRows,dataSet);
+				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");
+			},
+			complete: function () {}
+		});
 	}
+		
 	initTenant();
 });
 </script>
