3 #tenantSliceDataWrapper {
7 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
8 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
9 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
10 <div id="dialog-form" title="Add/Remove Slivers" style="display: none;">
13 <label for="numberOfSlivers">Number of Slivers</label>
14 <input type="text" name="numberOfSlivers" id="numOfSlivers" class="text ui-widget-content ui-corner-all">
18 <div id="adv-dialog-form" title="Add/Remove Slivers" style="display: none;">
21 <label for="numberOfSlivers">Number of Slivers</label>
22 <input type="text" name="numberOfSlivers" id="advNumOfSlivers" class="text ui-widget-content ui-corner-all">
26 <div id="create-slice-form" title="Create New Slice" style="display: none;">
29 <div class="create-slice-row">
30 <label for="new-slice-name">Name</label>
31 <input type="text" name="new-slice-name" id="new-slice-name" class="text">
33 <div class="create-slice-row">
34 <label for="new-service-class">Service Class</label>
35 <select id="new-service-class"></select>
37 <div class="create-slice-row">
38 <label for="new-image">Image</label>
39 <select id="new-image"></select>
41 <div id=tooltip>Slice Name cannot be empty</div>
45 <script type="text/javascript">
46 google.load('visualization', '1', {
47 'packages': ['controls', 'table', 'corechart', 'geochart']
51 $(document).ready(function () {
52 function showSliceData(data) {
53 var value = $("#tenantSliceDropDown").val();
54 var imageData = data['image']['rows'];
55 var networkData = data['network']['rows'];
56 $("#service-level-value").empty();
57 $("#slice-image-value").empty();
58 $("#tenantSiteTable").empty();
59 $('#tenantSiteTable').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="tenantSiteTableData"></table>');
60 var rows = data['userSliceInfo']['rows'];
64 if (rows[row]['sliceName'] == value) {
65 sliceImageData = rows[row]['sliceImage'];
66 $("#slice-image-value").html(sliceImageData);
67 serviceLevelData = rows[row]['sliceServiceClass'];
68 $("#service-level-value").html(serviceLevelData);
69 var innerRows = rows[row]['sliceSite'];
70 for (innerRow in innerRows) {
71 sliverCount = innerRows[innerRow];
72 siteNames.push([innerRow, sliverCount]);
76 oTable = $('#tenantSiteTableData').dataTable({
80 "bLengthChange": false,
86 "sTitle": "Allocated",
89 //{ "sTitle": "Allocated" , sClass: "alignCenter"},
90 //{ "sTitle": "Desired" , sClass: "alignCenter"},
95 function initTenant() {
99 success: function (data) {
100 UserSliceTable(data);
102 $("#tooltip").css("display","none");
104 complete: function () {}
107 function UserSliceTable(data) {
108 //Add check for #dynamicusersliceinfo_filter label-> input having focus here
109 var rows = data['userSliceInfo']['rows'];
110 $("<div></div>").attr('id', 'tenantSliceDataWrapper').appendTo('#tabs-5');
111 $("<div></div>").attr('id', 'advancedTenantSliceDataWrapper').appendTo('#tabs-5');
113 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>';
114 var advSliceData = '';
115 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>';
116 $('#tenantSliceDataWrapper').append(sliceData);
117 $('#advancedTenantSliceDataWrapper').append(advSliceData);
118 $("#advancedTenantSliceDataWrapper").css("display", "none");
119 $("<select></select>").attr('id', 'tenantSliceDropDown').appendTo('#slice-name-value');
121 $("#tenantSliceDropDown").append("<option>" + rows[row]['sliceName'] + "</option>");
123 $("<div></div>").attr('id', 'tenantSiteTable').appendTo('#tabs-5');
124 $("<div></div>").attr('id', 'advTenantSiteTable').appendTo('#tabs-5').css("display", "none");
125 $('<div class="btn btn-success" id="create-slice-btn"><i class="icon-plus-sign icon-white"></i> Create New Slice</div>').appendTo("#tabs-5");
126 $('<div class="btn btn-success" id="sliver-btn"><i class="icon-plus-sign icon-white"></i> Add/Remove Slivers</div>').appendTo("#tabs-5");
127 $('<div class="btn btn-high btn-info" id="save-btn">Save</div>').appendTo("#tabs-5").css("display", "none");
128 $('#tenantSliceDropDown').on('change', function () {
131 $("#advanced-tenant").click(function () {
132 $("#tenantSliceDataWrapper").toggle();
133 $("#advancedTenantSliceDataWrapper").toggle();
134 $("#advTenantSiteTable").toggle();
135 $("#tenantSiteTable").toggle();
136 $("#sliver-btn").toggle();
137 $("#save-btn").toggle();
138 $('#adv-slice-name-value').empty();
139 $("<select></select>").attr('id', 'advTenantSliceDropDown').appendTo('#adv-slice-name-value');
141 $("#advTenantSliceDropDown").append("<option>" + rows[row]['sliceName'] + "</option>");
143 advShowSliceData(data);
145 $('#advTenantSliceDropDown').on('change', function () {
146 advShowSliceData(data);
150 function editSliverAdv() {
151 $(".edit-view").click(function () {
152 var allocatedSlivers = parseInt($(this).parent().siblings(".allocated").html());
153 var td=$(this).parent().siblings(".allocated");
154 var pos =oTable.fnGetPosition(td[0]);
155 $("#adv-dialog-form").dialog({
162 allocatedSlivers += parseInt($("#advNumOfSlivers").val());
163 $(this).dialog("close");
164 td.html(allocatedSlivers);
166 "Remove": function () {
167 allocatedSlivers -= parseInt($("#advNumOfSlivers").val());
168 $(this).dialog("close");
169 td.html(allocatedSlivers);
173 $("#adv-dialog-form").dialog("open");
177 function advShowSliceData(data) {
178 var value = $("#advTenantSliceDropDown").val();
179 var serviceLevelData = data['sliceServiceClass']['rows'];
180 var imageData = data['image']['rows'];
181 var networkData = data['network']['rows'];
182 var siteRows = data['sites']['rows'];
183 $("#adv-service-level-value").empty();
184 $("#adv-slice-image-value").empty();
185 $("#adv-slice-network-value").empty();
186 $("<select></select>").attr('id', 'adv-service-level-dropdown').appendTo('#adv-service-level-value');
187 $("<select></select>").attr('id', 'adv-image-dropdown').appendTo('#adv-slice-image-value');
188 $("<select></select>").attr('id', 'adv-network-dropdown').appendTo('#adv-slice-network-value');
189 $('#advTenantSiteTable').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="advTenantSiteTableData"></table>');
190 var rows = data['userSliceInfo']['rows'];
195 if (rows[row]['sliceName'] == value) {
196 var innerRows = rows[row]['sliceSite'];
197 for (innerRow in innerRows) {
198 tableData[innerRow]=innerRows[innerRow];
202 for (row in siteRows) {
203 var entry =siteRows[row]['siteName'];
204 if (!(entry in tableData)) {
205 tableData[siteRows[row]['siteName']] = 0;
208 for (row in tableData){
209 siteNames.push([row, tableData[row], '<a href="#" class="edit-view">Edit</a>']);
212 oTable = $('#advTenantSiteTableData').dataTable({
216 "bLengthChange": false,
220 "sTitle": "Site Name"
222 "sTitle": "Allocated",
223 sClass: "alignCenter allocated"
226 sClass: "alignCenter"
229 for (row in serviceLevelData) {
230 $("#adv-service-level-dropdown").append("<option>" + serviceLevelData[row]['serviceClass'] + "</option>");
232 for (row in imageData) {
233 $("#adv-image-dropdown").append("<option>" + imageData[row]['Image'] + "</option>");
235 for (row in networkData) {
236 $("#adv-network-dropdown").append("<option>" + networkData[row]['Network'] + "</option>");
240 $("#basic-tenant").click(function () {
241 $("#tenantSliceDataWrapper").toggle();
242 $("#advancedTenantSliceDataWrapper").toggle();
243 $("#advTenantSiteTable").toggle();
244 $("#tenantSiteTable").toggle();
245 $("#sliver-btn").toggle();
246 $("#save-btn").toggle();
248 $("#sliver-btn").click(function () {
249 $("#dialog-form").dialog({
255 "Submit": function () {
256 /************Code to add or remove slivers for a slice will go here*******/
258 Cancel: function () {
259 $(this).dialog("close");
263 $("#dialog-form").dialog("open");
265 $("#create-slice-btn").click(function () {
266 var serviceLevelData = data['sliceServiceClass']['rows'];
267 var imageData = data['image']['rows'];
268 for (row in serviceLevelData) {
269 $("#new-service-class").append("<option>" + serviceLevelData[row]['serviceClass'] + "</option>");
271 for (row in imageData) {
272 $("#new-image").append("<option>" + imageData[row]['Image'] + "</option>");
274 var nameOfSlice= $("#new-slice-name").val();
275 var nameOfServiceClass = $("#new-service-class").val();
276 var nameOfImage = $("#new-image").val();
277 $("#create-slice-form").dialog({
283 "Submit": function () {
285 url: '/createnewslice/',
288 sliceName: $("#new-slice-name").val(),
289 serviceClass: nameOfServiceClass,
290 imageName: nameOfImage,
292 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
296 beforeSend: function(){
297 if (!$("#new-slice-name").val()) {
298 $("#tooltip").css("display","block");
305 success: function (response) {
307 complete: function () {
312 Cancel: function () {
313 $(this).dialog("close");
317 $("#create-slice-form").dialog("open");