summaryrefslogtreecommitdiffstats
path: root/usecaseui-lcm
diff options
context:
space:
mode:
authorLuji7 <lu.ji3@zte.com.cn>2017-09-18 15:39:24 +0800
committerLuji7 <lu.ji3@zte.com.cn>2017-09-18 15:39:36 +0800
commit20b443f877ad93ef52de6fe8bc1af48546dc8c86 (patch)
tree4c6fe8b4cbb547964c3fa5de34e5cf71113bc380 /usecaseui-lcm
parent6f219158ff490d3484d578deaa77c11222360a75 (diff)
ns and vnf package distribution ui
Change-Id: Id08458ba85b5d4a87c2c3e1e083fef17d334fff0 Issue-id: USECASEUI-40 Signed-off-by: Luji7 <lu.ji3@zte.com.cn>
Diffstat (limited to 'usecaseui-lcm')
-rw-r--r--usecaseui-lcm/src/main/webapp/html/lifecyclemanager.html89
-rw-r--r--usecaseui-lcm/src/main/webapp/static/fusion/js/lifecyclemanager.js58
2 files changed, 138 insertions, 9 deletions
diff --git a/usecaseui-lcm/src/main/webapp/html/lifecyclemanager.html b/usecaseui-lcm/src/main/webapp/html/lifecyclemanager.html
index 4f8874d4..0bd9a8d6 100644
--- a/usecaseui-lcm/src/main/webapp/html/lifecyclemanager.html
+++ b/usecaseui-lcm/src/main/webapp/html/lifecyclemanager.html
@@ -62,18 +62,46 @@
<h1 style="margin-bottom:40px">Life Cycle Manager</h1>
- <div class="container">
+ <!--div class="container" style="padding:0px">
<div class="row">
<div class="col-md-2">
<button id="createService" class="btn btn-primary">Create Service</button>
</div>
<div class="col-md-offset-6 col-md-2">
- <button class="btn btn-primary">Onboard Vnf/NS Package</button>
- </div>
- <div class="col-md-2">
- <button class="btn btn-primary">Delete Vnf/NS Package</button>
- </div>
- </div>
+ <button class="btn btn-primary show-onboard">Vnf/NS Package Onboarding</button>
+ </div-->
+ <!--div class="col-md-2">
+ <button class="btn btn-primary show-onboard">Delete Vnf/NS Package</button>
+ </div-->
+ <!--/div>
+ </div-->
+
+ <div id="onboard">
+ </div>
+
+ <!--ul class="nav nav-tabs nav-justified vmapp-margin"-->
+ <ul class="nav nav-tabs nav-justified vmapp-margin" style="border-bottom-color:#66B3FF">
+ <li class="active basic">
+ <a href="#" style="margin-left:1px" onclick="showService();" id="serviceTab"
+ data-toggle="tab">
+ <span>Services</span>
+ </a>
+ </li>
+ <li style="padding-right:2px;" class="para">
+ <a href="#vnf-ns-onboard" onclick="hideService();" data-toggle="tab" id="vnfNsTab">
+ <span>Vnf/NS Packages</span>
+ </a>
+ </li>
+ </ul>
+
+ <div id="vnf-ns-onboard">
+ <table id="onbaordTable" class="table table-striped table-hover table-bordered">
+ <thead><tr><th>Name</th><th>Type</th><th>Action</th></tr></thead>
+ <tbody>
+ <tr><td>vBras</td><td>VNF</td><td><button class="btn btn-primary onboard-button">Onboard</button></td></tr>
+ <tr><td>network service</td><td>NS</td><td><button class="btn btn-primary onboard-button">Onboard</button></td></tr>
+ </tbody>
+ </table>
</div>
@@ -82,7 +110,12 @@
<li><button class="btn btn-primary">Onboard Vnf/NS Package</button></li>
<li><button class="btn btn-primary">Delete Vnf/NS Package</button></li>
</ul-->
- <table class="table table-striped table-hover table-bordered">
+ <div id="service-table">
+ <!--button id="createService" style="margin-top: 20px" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></button-->
+ <a id="createService" href="#" style="font-size:20px">
+ <span class="glyphicon glyphicon-plus" style="margin-top:20px;width:80px;margin-left:20px"></span>
+ </a>
+ <table class="table table-striped table-hover table-bordered" style="margin:2px">
<thead>
<tr>
<th>Service Instance Id</th>
@@ -121,6 +154,9 @@
<li><a href="#">5 <span class="sr-only">(current)</span></a></li>
<li><a href="#">&raquo;</a></li>
</ul>
+ </div>
+
+
</div>
</div>
</div>
@@ -232,7 +268,41 @@
</div>
</div>
</div>
-</div>
+ </div>
+
+
+ <div id="vnf-ns-onboard-dialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="content">
+ <div class="modal-header" style="margin-bottom: 15px;">
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
+ </button>
+ <h4 class="modal-title" id="myModalLabel">
+ <span>Select VIM Onboard Image</span>
+ </h4>
+ </div>
+ <form class="form-horizontal" role="form" id="neForm">
+ <div id="wizard">
+ <div class="modal-body">
+ <div id="vnf-ns-vim-table"></div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" style="width:80px;" class="btn SDBtn" data-dismiss="modal"
+ aria-hidden="true" id="startToCreateService">
+ <span id="nfv-virtualApplication-iui-text-cancelBtn">OK</span>
+ </button>
+ <button type="button" style="width:80px;" class="btn button-previous SDBtn" data-dismiss="modal">
+ <span id="nfv-virtualApplication-iui-text-previousBtn">Cancel</span>
+ </button>
+
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
@@ -241,6 +311,7 @@
<script type="text/javascript">
$(document).ready(function () {
new lcmHandler();
+ showService();
})
</script>
</body>
diff --git a/usecaseui-lcm/src/main/webapp/static/fusion/js/lifecyclemanager.js b/usecaseui-lcm/src/main/webapp/static/fusion/js/lifecyclemanager.js
index aa26bb04..84863a58 100644
--- a/usecaseui-lcm/src/main/webapp/static/fusion/js/lifecyclemanager.js
+++ b/usecaseui-lcm/src/main/webapp/static/fusion/js/lifecyclemanager.js
@@ -24,12 +24,28 @@ var lcmHandler = function() {
};
lcmHandler.prototype = {
+ showOnboardSelection: false,
+
_addOwnEvents : function() {
$('#createService').click(function() {
console.log("create service...");
$('#createServiceDialog').modal();
});
$('#startToCreateService').click(this.okAction);
+ // $('.show-onboard').click(function () {
+ // this.showOnboard = !this.showOnboard;
+ // if(this.showOnboard) {
+ // document.getElementById("onboard").innerHTML = generateVnfNsOnboardDialog({});
+ // }else {
+ // document.getElementById("onboard").innerHTML = '';
+ // }
+ //
+ // });
+ $('.onboard-button').click(function () {
+ console.log("show vnf ns vims...");
+ document.getElementById("vnf-ns-vim-table").innerHTML = generateVnfNsOnboardDialog({});
+ $("#vnf-ns-onboard-dialog").modal();
+ });
},
okAction : function() {
if (!checkInputs('create', templateParameters.paramJsonObj)) {
@@ -62,6 +78,22 @@ function showBasic() {
$("#templateParameterTab").hide();
}
+function hideService() {
+ console.log("hide service...");
+ $("#serviceTab").css({"margin-left":"1px","border-bottom-style":"solid", "border-color": "", "background-color":"#F2F2F2", "border-bottom-color": "#66B3FF"});
+ $("#service-table").hide();
+ $("#vnfNsTab").css({"border-bottom-style":"none","border-color": "#66B3FF","background-color":"#F2F2F2"});
+ $("#vnf-ns-onboard").show();
+}
+
+function showService() {
+ console.log("show service...");
+ $("#serviceTab").css({"margin-left":"1px","border-bottom-style":"none","border-color": "#66B3FF", "background-color":"#F2F2F2"});
+ $("#service-table").show();
+ $("#vnfNsTab").css({"border-bottom-style":"solid", "border-color": "", "background-color":"#F2F2F2", "border-bottom-color": "#66B3FF"});
+ $("#vnf-ns-onboard").hide();
+}
+
function serviceTemplateChanged() {
templateParameters.changed = true;
}
@@ -637,3 +669,29 @@ function queryService(serviceId) {
url : uri
});
}
+
+// function generateVnfNsOnboardDialog(onboardData) {
+// var component = '<div>'
+// + '<table id="onbaordTable" class="table table-striped table-hover table-bordered">'
+// + '<thead><tr><th>Name</th><th>Type</th><th>Action</th></tr></thead>'
+// + '<tbody>'
+// +'<tr><td>vBras</td><td>VNF</td><td><button class="btn btn-primary onboard-button">Onboard</button></td></tr>'
+// +'<tr><td>network service</td><td>NS</td><td><button class="btn btn-primary onboard-button">Onboard</button></td></tr>'
+// +'</tbody>'
+// +'</table>'
+// +'</div>';
+// return component;
+// }
+
+function generateVnfNsOnboardDialog(onboardData) {
+ var component = '<div>'
+ + '<table id="vnfVimNsSelection" class="table table-striped table-hover table-bordered">'
+ + '<thead><tr><th>VIM Name</th><th>Test Environment</th><th>Product Environment</th></tr></thead>'
+ + '<tbody>'
+ +'<tr><td>VIM1</td><td><input type="radio" name="test-env" /></td><td><input type="checkbox" /></td></tr>'
+ +'<tr><td>VIM2</td><td><input type="radio" name="test-env" /></td><td><input type="checkbox" /></td></tr>'
+ +'</tbody>'
+ +'</table>'
+ +'</div>';
+ return component;
+}