From: Scott Baker <smbaker@gmail.com>
Date: Wed, 9 Apr 2014 06:40:56 +0000 (-0700)
Subject: merge Amisha's changes
X-Git-Url: http://git.onelab.eu/?a=commitdiff_plain;ds=sidebyside;h=537d823597fc37a0f648f69b08c3f0d4d654d775;p=plstackapi.git

merge Amisha's changes
---

diff --git a/planetstack/core/models/slice.py b/planetstack/core/models/slice.py
index 7bffe83..d031766 100644
--- a/planetstack/core/models/slice.py
+++ b/planetstack/core/models/slice.py
@@ -24,6 +24,7 @@ class Slice(PlCoreBase):
     network_id = models.CharField(null=True, blank=True, max_length=256, help_text="Quantum network")
     router_id = models.CharField(null=True, blank=True, max_length=256, help_text="Quantum router id")
     subnet_id = models.CharField(null=True, blank=True, max_length=256, help_text="Quantum subnet id")
+    imagePreference = models.CharField(default="abc",null=True, blank=True, max_length=256)
     service = models.ForeignKey(Service, related_name='service', null=True, blank=True)
 
     tags = generic.GenericRelation(Tag)
diff --git a/planetstack/core/plus/sites.py b/planetstack/core/plus/sites.py
index 6fd278b..c5dde52 100644
--- a/planetstack/core/plus/sites.py
+++ b/planetstack/core/plus/sites.py
@@ -12,13 +12,15 @@ class AdminMixin(object):
     def get_urls(self):
         """Add our dashboard view to the admin urlconf. Deleted the default index."""
         from django.conf.urls import patterns, url
-        from views import DashboardWelcomeView, DashboardAjaxView, SimulatorView, DashboardSummaryAjaxView, DashboardAddOrRemoveSliverView, DashboardUserSiteView, DashboardAnalyticsAjaxView
+        from views import DashboardWelcomeView, DashboardAjaxView, SimulatorView, DashboardSummaryAjaxView, DashboardAddOrRemoveSliverView, DashboardUserSiteView, DashboardAnalyticsAjaxView, TenantViewData,TenantCreateSlice
 
         urls = super(AdminMixin, self).get_urls()
         del urls[0]
         custom_url = patterns('',
                url(r'^$', self.admin_view(DashboardWelcomeView.as_view()),
                     name="index"),
+               url(r'^test/', self.admin_view(DashboardUserSiteView.as_view()),
+                    name="test"),
                url(r'^hpcdashuserslices/', self.admin_view(DashboardUserSiteView.as_view()),
                     name="hpcdashuserslices"),
                url(r'^hpcdashboard/', self.admin_view(DashboardAjaxView.as_view()),        # DEPRECATED
@@ -30,7 +32,11 @@ class AdminMixin(object):
                url(r'^analytics/(?P<name>\w+)/$', DashboardAnalyticsAjaxView.as_view(),
                     name="analytics"),
                url(r'^dashboardaddorremsliver/$', self.admin_view(DashboardAddOrRemoveSliverView.as_view()),
-                    name="addorremsliver")
+                    name="addorremsliver"),
+               url(r'^tenantview/$', self.admin_view(TenantViewData.as_view()),
+                    name="tenantview"),
+               url(r'^createnewslice/$', self.admin_view(TenantCreateSlice.as_view()),
+                    name="createnewslice")
         )
 
         return custom_url + urls
diff --git a/planetstack/core/plus/views.py b/planetstack/core/plus/views.py
index a50d946..0078d91 100644
--- a/planetstack/core/plus/views.py
+++ b/planetstack/core/plus/views.py
@@ -5,8 +5,9 @@ from django.views.generic import TemplateView, View
 import datetime
 from pprint import pprint
 import json
-from core.models import Slice,SliceRole,SlicePrivilege,Site,Reservation,Sliver
+from core.models import *
 from django.http import HttpResponse
+from django.core import urlresolvers
 import traceback
 
 if os.path.exists("/home/smbaker/projects/vicci/cdn/bigquery"):
@@ -47,6 +48,64 @@ def getUserSliceInfo(user, tableFormat = False):
 #        pprint( userDetails)
         return userDetails
 
+class TenantCreateSlice(View):
+    def post(self, request, *args, **kwargs):
+        sliceName = request.POST.get("sliceName", "0")
+        serviceClass = request.POST.get("serviceClass", "0")
+        imageName = request.POST.get("imageName", "0")
+        actionToDo = request.POST.get("actionToDo", "0")
+        print sliceName
+        if (actionToDo == "add"):
+           serviceClass = ServiceClass.objects.get(name=serviceClass)
+           site = request.user.site
+           #image = Image.objects.get(name=imageName)
+           newSlice = Slice(name=sliceName,serviceClass=serviceClass,site=site,imagePreference=imageName)
+           newSlice.save()
+        return newSlice
+
+
+def getTenantSliceInfo(user, tableFormat = False):
+    tenantSliceDetails = {}
+    tenantSliceData = getTenantInfo(user)
+    tenantServiceClassData = getServiceClassInfo(user)
+    if (tableFormat):
+       tenantSliceDetails['userSliceInfo'] = userSliceTableFormatter(tenantSliceData)
+       tenantSliceDetails['sliceServiceClass']=userSliceTableFormatter(tenantServiceClassData)
+    else:
+       tenantSliceDetails['userSliceInfo'] = tenantSliceData
+    tenantSliceDetails['sliceServiceClass']=userSliceTableFormatter(tenantServiceClassData)
+    tenantSliceDetails['image']=userSliceTableFormatter(getImageInfo(user))
+    tenantSliceDetails['network']=userSliceTableFormatter(getNetworkInfo(user))
+    tenantSliceDetails['deploymentSites']=userSliceTableFormatter(getDeploymentSites())
+    tenantSliceDetails['sites'] = userSliceTableFormatter(getTenantSitesInfo());
+    return tenantSliceDetails
+
+
+def getTenantInfo(user):
+    slices =Slice.objects.all()
+    userSliceInfo = []
+    for entry in slices:
+       sliceName = Slice.objects.get(id=entry.id).name
+       slice = Slice.objects.get(name=Slice.objects.get(id=entry.id).name)
+       sliceServiceClass = entry.serviceClass.name
+       preferredImage =  entry.imagePreference
+       numSliver = 0
+       sliceImage=""
+       sliceSite = {}
+       for sliver in slice.slivers.all():
+            numSliver +=sliver.numberCores
+           # sliceSite[sliver.deploymentNetwork.name] =sliceSite.get(sliver.deploymentNetwork.name,0) + 1
+            sliceSite[sliver.node.site.name] = sliceSite.get(sliver.node.site.name,0) + 1
+	    sliceImage = sliver.image.name
+       userSliceInfo.append({'sliceName': sliceName,'sliceServiceClass': sliceServiceClass,'preferredImage':preferredImage, 'sliceSite':sliceSite,'sliceImage':sliceImage,'numOfSlivers':numSliver})
+    return userSliceInfo
+
+def getTenantSitesInfo():
+	tenantSiteInfo=[]
+        for entry in Site.objects.all():
+		tenantSiteInfo.append({'siteName':entry.name})
+	return tenantSiteInfo
+
 def userSliceTableFormatter(data):
 #    pprint(data)
     formattedData = {
@@ -54,6 +113,36 @@ def userSliceTableFormatter(data):
                     }
     return formattedData
 
+def getServiceClassInfo(user):
+    serviceClassList = ServiceClass.objects.all()
+    sliceInfo = []
+    for entry in serviceClassList:
+          sliceInfo.append({'serviceClass':entry.name})
+    return sliceInfo
+
+def getImageInfo(user):
+    imageList = Image.objects.all()
+    imageInfo = []
+    for imageEntry in imageList:
+          imageInfo.append({'Image':imageEntry.name})
+    return imageInfo
+
+def getNetworkInfo(user):
+   #networkList = Network.objects.all()
+    networkList = ['Private Only','Private and Publicly Routable']
+    networkInfo = []
+    for networkEntry in networkList:
+          #networkInfo.append({'Network':networkEntry.name})
+          networkInfo.append({'Network':networkEntry})
+    return networkInfo
+
+def getDeploymentSites():
+    deploymentList = Deployment.objects.all()
+    deploymentInfo = []
+    for entry in deploymentList:
+        deploymentInfo.append({'DeploymentSite':entry.name})
+    return deploymentInfo
+
 def getSliceInfo(user):
     sliceList = Slice.objects.all()
     slicePrivs = SlicePrivilege.objects.filter(user=user)
@@ -61,6 +150,13 @@ def getSliceInfo(user):
     for entry in slicePrivs:
 
         slicename = Slice.objects.get(id=entry.slice.id).name
+        slice = Slice.objects.get(name=Slice.objects.get(id=entry.slice.id).name)
+        sliverList=Sliver.objects.all()
+        sites_used = {}
+        for sliver in slice.slivers.all():
+             #sites_used['deploymentSites'] = sliver.node.deployment.name
+             # sites_used[sliver.image.name] = sliver.image.name
+             sites_used[sliver.node.site.name] = sliver.numberCores
         sliceid = Slice.objects.get(id=entry.slice.id).id
         try:
             sliverList = Sliver.objects.filter(slice=entry.slice.id)
@@ -76,7 +172,10 @@ def getSliceInfo(user):
             sitecount = 0
 
         userSliceInfo.append({'slicename': slicename, 'sliceid':sliceid,
-                           'role': SliceRole.objects.get(id=entry.role.id).role, 'slivercount': slivercount, 'sitecount':sitecount})
+                              'sitesUsed':sites_used,
+                              'role': SliceRole.objects.get(id=entry.role.id).role,
+                              'slivercount': slivercount,
+                              'sitecount':sitecount})
 
     return userSliceInfo
 
@@ -110,6 +209,10 @@ class DashboardUserSiteView(View):
     def get(self, request, **kwargs):
         return HttpResponse(json.dumps(getUserSliceInfo(request.user, True)), mimetype='application/javascript')
 
+class TenantViewData(View):
+    def get(self, request, **kwargs):
+        return HttpResponse(json.dumps(getTenantSliceInfo(request.user, True)), mimetype='application/javascript')
+
 class DashboardSummaryAjaxView(View):
     def get(self, request, **kwargs):
         return HttpResponse(json.dumps(hpc_wizard.get_hpc_wizard().get_summary_for_view()), mimetype='application/javascript')
diff --git a/planetstack/core/serializers.py b/planetstack/core/serializers.py
index b83157b..5bbe7aa 100644
--- a/planetstack/core/serializers.py
+++ b/planetstack/core/serializers.py
@@ -124,6 +124,7 @@ class SliceSerializer(serializers.HyperlinkedModelSerializer):
                   'network_id',
                   'router_id',
                   'subnet_id',
+                  'imagePreference',
                   'site',
                   'slivers',
                   'updated',
diff --git a/planetstack/core/static/planetstack.css b/planetstack/core/static/planetstack.css
index c780f5c..18b815e 100644
--- a/planetstack/core/static/planetstack.css
+++ b/planetstack/core/static/planetstack.css
@@ -1023,3 +1023,88 @@ div.chartContainer
     font-size: 24px;
     font-weight: bold;
 }
+
+.tenant-row{
+   padding-bottom: 0.7%;
+}
+
+
+/***********TENANT VIEW*************/
+
+#image-dropdown,#slice-image-value,#adv-slice-image-value{
+ margin-left: 5%;
+}
+
+#network-dropdown,#adv-network-dropdown{
+ margin-left: 3.7%;
+}
+
+#service-level-dropdown,#service-level-value,#adv-service-level-dropdown,#adv-service-level-value{
+ margin-left: 0.2% !important;
+}
+
+#slice-name-value,#adv-slice-name-value{
+   margin-left: 2%;
+}
+
+#advanced-tenant,#basic-tenant,#sliver-btn,#save-btn{
+  float:right;
+}
+
+#sliver-btn,#save-btn,#create-slice-btn{
+  margin-top:1%;
+}
+
+
+.ui-widget input{
+        border-radius: 0px !important;
+margin: 1.5% 0 0 5% !important;
+height: 20px !important;
+width: 100px !important;
+}
+
+.ui-dialog-buttonset .ui-button{
+border-radius: 0 !important;
+background-color: grey !important;
+font-weight: bold !important;
+font-size: 0.9em; !important
+}
+
+.ui-dialog-titlebar{
+border-radius: 0 !important;
+background-color: grey !important;
+}
+
+.create-slice-row{
+   margin-bottom:3%;
+}
+
+.create-slice-row label{
+   margin-right:1%;
+}
+
+.create-slice-row select{
+   height:24px;
+   width: 196px;
+   font-size: 0.9em !important;
+
+}
+
+#new-slice-name{
+     width: 194px !important;
+     margin-left: 16% !important;
+}
+
+#new-site-name{
+    margin-left: 20%;
+}
+
+#new-image{
+  margin-left: 15%;
+}
+
+#tooltip{
+font-size:0.7em;
+color:red;
+display:none;
+}
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>&nbsp;Create New Slice</div>').appendTo("#tabs-4");
+			$('<div class="btn btn-success" id="sliver-btn"><i class="icon-plus-sign icon-white"></i>&nbsp;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>
diff --git a/planetstack/templates/admin/dashboard/welcome.html b/planetstack/templates/admin/dashboard/welcome.html
index a4348ba..4967169 100644
--- a/planetstack/templates/admin/dashboard/welcome.html
+++ b/planetstack/templates/admin/dashboard/welcome.html
@@ -96,7 +96,7 @@ function confirmDialog(title,msg) {
 {% include "/opt/planetstack/templates/admin/dashboard/slice_interactions.html" %}
 </div>
 <div id="tabs-5">
-Coming Soon ...
+{% include "/opt/planetstack/templates/admin/dashboard/tenant.html" %}
 </div>
 </div>