diff options
Diffstat (limited to 'openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html')
| -rw-r--r-- | openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html | 504 |
1 files changed, 393 insertions, 111 deletions
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html index 507a8904..b373f3ae 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html @@ -28,14 +28,50 @@ <script type="text/javascript" src="js/rest.js"></script>
<script type="text/javascript" src="js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="js/gsolcm.js"></script>
+ <script type="text/javascript" src="js/jquery-ui-1.12.1.min.js">
+ </script>
+ <link href="css/jquery-ui-1.12.1.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
- var jsondata = [];
- //jsondata = loadNeData();
+ var url = "";
+ /* $('.modal-content').resizable({
+
+ minHeight: 300,
+ minWidth: 300
+ });*/
+ $('.modal-dialog').draggable();
+ $("#detailCont").show();
+ var jsondata = loadGetServiceData(url);
$('#sai').bootstrapTable({
//Assigning data to table
data: jsondata
});
+ $('.table tbody tr').click(function() {
+ $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');
+ })
+
+ $('.detail-top ul li').click(function() {
+ $(this).addClass('current').siblings().removeClass('current');
+ });
+ $("#topoCont").hide();
+ $("#inpCont").hide();
+ $("#topoContMod").hide();
+ $("#detailContMod").show();
+ $("#inpContMod").hide();
+
+ $('#sai').bootstrapTable({}) .on('click-row.bs.table', function (e, row, $element) {
+ var newURL = "accorTables.html?serviceId="+row.serviceId;
+ console.log("URL: "+newURL);
+ document.getElementById("tabContainer").style.display = "none";
+ document.getElementById("detailConObj").setAttribute('data', newURL);
+ document.getElementById("detailContMod").setAttribute('data', newURL);
+ document.getElementById("tabContainer").style.display = "block";
+
+ //loadIframe("topoFrame", "chartTopo.html?serviceId="+row.serviceId);
+ document.getElementById("topoCont").setAttribute('data', 'chartTopo.html?serviceId='+row.serviceId);
+ document.getElementById('inputcontent').setAttribute('data', 'inputData.html?json='+ JSON.stringify(row));
+ document.getElementById('inputcontentDlg').setAttribute('data', 'inputData.html?json='+ JSON.stringify(row));
+ });
new lcmHandler();
});
@@ -43,7 +79,13 @@ return [
'<img class="siteDeleteImg" src="images/delete.png" href="javascript:void(0)" style="cursor: pointer" name="title" title="Delete" />'
].join('');
-
+ }
+
+ function operateFormatterServiceName(value, row, index){
+ var temp = row.serviceId;
+ return [
+ '<a data-toggle="modal" href="#ModifyModal" style="text-decoration:underline" onclick="return anchorClick(' + temp + ')">' + value + '</a>'
+ ].join('');
}
window.operateEvents = {
'click .siteDeleteImg': function (e, value, row, index) {
@@ -52,12 +94,122 @@ }
};
+ function hideBasic() {
+ $("#basicInfoTab").hide();
+ }
+
+ function showBasic() {
+ $("#basicInfoTab").show();
+ }
+
+ function showTopoCont() {
+ $("#topoCont").show();
+ $("#detailCont").hide();
+ $("#inpCont").hide();
+ }
+
+ function showDetCont() {
+ $("#topoCont").hide();
+ $("#detailCont").show();
+ $("#inpCont").hide();
+ }
+
+ function showInpCont() {
+ $("#topoCont").hide();
+ $("#detailCont").hide();
+ $("#inpCont").show();
+ }
+
+ function showTopoContMod() {
+ $("#topoContMod").show();
+ $("#detailContMod").hide();
+ $("#inpContMod").hide();
+ }
+
+ function showDetContMod() {
+ $("#topoContMod").hide();
+ $("#detailContMod").show();
+ $("#inpContMod").hide();
+ }
+
+ function showInpContMod() {
+ $("#topoContMod").hide();
+ $("#detailContMod").hide();
+ $("#inpContMod").show();
+ }
+
+ function loadIframe(iframeName, url) {
+ var $iframe = $('#' + iframeName);
+ if ( $iframe.length ) {
+ $iframe.attr('src',url);
+ $iframe.style.height = "400px";
+ return false;
+ }
+ return true;
+ }
</script>
+ <style>
+ .nav-tabs {
+ border-bottom-style: none;
+ }
+ .mT15 {
+ margin-top: 15px;
+ }
+ .fixed-table-container tbody td .th-inner,
+ .fixed-table-container thead th .th-inner {
+ line-height: 4px;
+ }
+ .fixed-table-pagination .pagination-info {
+ display: none !important;
+ }
+ .table tbody tr:hover td,
+ .table tbody tr.odd:hover td {
+ background-color: #e6fbe0 !important;
+ }
+ /*.fixed-table-pagination .page-list{display:inline-block !important}*/
+ /*.detail-top ul{
+ background:#F8F6F6 !important;
+ }*/
+
+ .detail {
+ border-top-style: none;
+ }
+ .btn {
+ padding: 4px;
+ }
+ #ModifyModal .modal-dialog {
+ width: 1100px;
+ }
+ #vmAppDialog .modal-dialog {
+ width: 630px;
+ }
+ #ModifyModal .modal-dialog body {
+ margin: 10px;
+ }
+ .dropdown-menu {
+ min-width: 10px;
+ }
+ .nav-tabs.nav-justified>.active>a,
+ .nav-tabs.nav-justified>.active>a:hover,
+ .nav-tabs.nav-justified>.active>a:focus {
+ border-left: 1px solid #4AC9FF;
+ border-right: 1px solid #4AC9FF;
+ border-top: 1px solid #4AC9FF;
+ border-right: 1px solid #4AC9FF
+ }
+ .nav-tabs.nav-justified>li>a {
+ border-bottom: 1px solid #4AC9FF;
+ border-radius: 4px 4px 0 0
+ }
+ .clearfix {
+ display: none;
+ }
+ </style>
</head>
<body id="open_base_site_cotentBody" class="cotentBody ng-scope">
<div class="container-fluid ms-controller">
<h3> Life Cycle Manager </h3>
-
+ <div class="separator-line"></div>
<div class="uploadBtn">
<div id="open_base_tpL_userHeader" class="userHeader">
<div id="open_base_tpL_buttonGroup" class="openoButton_buttonGroupClass">
@@ -77,64 +229,57 @@ </div>
<div class="row-fluid" data-name="table_zone">
- <div id="ict_virtualApplication_table_div">
+ <div id='ict_virtualApplication_table_div'>
<div>
<div class="top">
- <table id="sai" data-pagination="true" data-page-size="5" data-pagination-first-text="First"
- data-pagination-pre-text="Previous" data-pagination-next-text="Next"
- data-pagination-last-text="Last">
- <thead id="soverlayTable_thead" class="openo-table-thead">
- <tr class="active">
- <!--<th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayName" data-sortable="true">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="overlayName_sorticon" class="openo-table-th-sorticon overflow_elip openoTable_sortable leftHeaderAlign openo-table-disable-element">Service ID
- </span>
- </div>
- </th>-->
+ <table class="table table-striped" id="sai" data-pagination="true" data-page-size="5"
+ data-pagination-first-text="First" data-pagination-pre-text="Previous"
+ data-pagination-next-text="Next" data-pagination-last-text="Last">
+ <thead id="soverlayTable_thead" class="openo-table-thead" style="background:#ECECEC">
+ <tr class="active" style="background:#D9D6D5">
+
<th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="overlayDesc" data-sortable="true">
+ data-formatter="operateFormatterServiceName" data-field="serviceName"
+ data-sortable="true">
<div class="openo-table-th-border"></div>
<div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="overlayDesc_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Service Name
- </span></div>
+ <span id="overlayDesc_sorticon"
+ class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Service Name
+ </span>
+ </div>
</th>
+
<th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="overlayThincCPE" data-sortable="true">
+ data-field="templateName" data-sortable="true">
<div class="openo-table-th-border"></div>
<div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="overlayThincCPE_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Template Name
- </span></div>
+ <span id="overlayThincCPE_sorticon"
+ class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Template Name
+ </span>
+ </div>
</th>
- <!--<th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayPortVlanID" data-sortable="true">
- <div class="openo-table-th-border"></div><div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="overlayPortVlanID_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Service Type
- </span></div></th> -->
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="overlayDCName" data-sortable="true">
+
+ <!-- th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayDCName" data-sortable="true">
<div class="openo-table-th-border"></div>
<div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="overlayDCName_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Service Instruction </span>
+ <span id="overlayDCName_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Service Instruction </span>
</div>
- </th>
+ </th -->
<th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="overlayVPC" data-sortable="true">
+ data-field="createTime" data-sortable="true">
<div class="openo-table-th-border"></div>
<div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="overlayVPC_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Create Time
+ <span id="overlayVPC_sorticon"
+ class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Create Time
</span>
</div>
</th>
<th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="overlayVPCCIDR" data-sortable="true">
+ data-field="creator" data-sortable="true">
<div class="openo-table-th-border"></div>
<div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="overlayVPCCIDR_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Creator
+ <span id="overlayVPCCIDR_sorticon"
+ class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Creator
</span>
</div>
</th>
@@ -150,97 +295,234 @@ </tr>
</thead>
+ <tbody>
+
+
+ </tbody>
+
</table>
</div>
</div>
</div>
</div>
- <!-- <div id="tpListopenotable_pagination_wrapper" class="openo-table-pagination-wrapper" style="display: block;"><div class="pagination-container openo-pagination-theme openo-pagination"><div class="openoPagination_openoPaginationLengthOptions" id="tpListopenotable_wrapper_div"><input readonly="true" class="openo-pagination-select openopaginationselect" value="" id="tpListopenotable_wrapper_input" actualval="20" style="width: 32px;"><span class="openo-pagination-selectspan openopaginationselectspan" id="tpListopenotable_wrapper_trigger"></span></div><label style="display: block;float:left;">Total records: 23</label><li class="active"><span class="current prev openo-disabled" id="tpListopenotable_wrapper_prev"> </span></li><ul><li class="active"><span class="current" id="tpListopenotable_wrapper_page_link_1">1</span></li><li><a class="page-link" id="tpListopenotable_wrapper_page_link_2">2</a></li><li><a class="page-link" id="tpListopenotable_wrapper_page_link_3">3</a></li><li><a class="page-link next" id="tpListopenotable_wrapper_next"> </a></li></ul></div></div> -->
- <div id="vmAppDialog" class="modal fade" tabindex="-1" role="dialog"
- aria-labelledby="myModalLabel" aria-hidden="false">
+ <div id="ModifyModal" 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="content" style="background:#fafafa;">
<div class="modal-header">
- <button type="button" class="close" data-dismiss="modal"
- aria-hidden="true">×
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
</button>
- <h4 class="modal-title" id="myModalLabel">
- <span>Create</span>
+ <h4 class="modal-title" id="">
+ <span>Service Info</span>
</h4>
</div>
- <form class="form-horizontal" role="form" id="neForm">
- <div id="wizard">
- <div class="modal-body">
- <ul class="nav nav-pills nav-justified vmapp-margin">
-
- </ul>
- <div class="tab-content">
- <ul class="nav nav-tabs">
- <li class="active"><a id="basicInfoTab" href="#basicTab" data-toggle="tab">Basic
- Info</a></li>
- <li><a id="parameterTabHeader" href="#parameterTab" data-toggle="tab">Template
- Parameters</a></li>
- </ul>
- <div id="myTabContent" class="tab-content">
- <div class="tab-pane active" id="basicTab">
- <div class="form-group" ms-class="has-error:vmAppDialog.name==''">
- <label class="col-sm-3 control-label">
- <span>Service Name</span>
- <span class="required">*</span>
- </label>
- <div class="col-sm-7">
- <input type="text" id="svcName" name="svcName" class="form-control"
- placeholder="Service Name"/>
- </div>
- </div>
- <div class="form-group">
- <label class="col-sm-3 control-label">
- <span>Service Description</span>
- </label>
- <div class="col-sm-7">
- <input type="text" id="svcDesc" name="svcDesc" class="form-control"
- placeholder="Service Description"/>
- </div>
- </div>
- <div class="form-group" ms-class="has-error:vmAppDialog.name==''">
- <label class="col-sm-3 control-label">
- <span>Service Template</span>
- <span class="required">*</span>
- </label>
- <div class="col-sm-7">
- <select class="form-control"
- style="padding-top: 0px;padding-bottom: 0px;" id="svcTempl"
- name="svcTempl">
- <option value="1.1">1.1</option>
- <option value="1.2">1.2</option>
- </select>
- </div>
- </div>
- </div>
- <div class="tab-pane" id="parameterTab">
-
- </div>
- </div>
- </div>
+
+ <div class="detail" style="margin:10px;border-radius:5px;">
+ <div class="detail-top" style="margin-top:10px;border-radius:5px;">
+ <ul class="nav nav-tabs nav-justified vmapp-margin">
+ <li class="active basic">
+ <a href="#" onClick="showDetContMod();" id="" data-toggle="tab">
+ <span>Detail Info</span>
+ </a>
+ </li>
+ <li class="">
+ <a href="#" onclick="showTopoContMod();" data-toggle="tab">
+ <span>Topo</span>
+ </a>
+ </li>
+ <li class="">
+ <a href="#" onclick="showInpContMod();" data-toggle="tab">
+ <span>Input Data</span>
+ </a>
+ </li>
+ </ul>
+
+ <div id="detailContMod">
+ <object data="accorTables.html" width="100%" height="300" type="text/html">
+
+ </object>
+ </div>
+ <div id="topoContMod" style="display:none;">
+ <object data="chartTopo.html" width="100%" height="300" type="text/html">
+
+ </object>
+ <!--<iframe id="topoFrame" src="chartTopo.html" name="" style="width:100%; height:400px;" allowTransparency="true" scrolling="no" frameborder="0">
+ </iframe>-->
</div>
- <div class="modal-footer">
- <button type="button" class="btn SDBtn" data-dismiss="modal" aria-hidden="true"
- id="createNS">
- <span id="nfv-virtualApplication-iui-text-cancelBtn">OK</span>
- </button>
- <button type="button" class="btn button-previous SDBtn">
- <span id="nfv-virtualApplication-iui-text-previousBtn">Cancel</span>
- </button>
+ <div id="inpContMod" style="display:none;">
+ <object id="inputcontentDlg" data="inputData.html" width="100%" height="300"
+ type="text/html">
+ </object>
+ <!--<iframe src="inputData.html" name="" style="width:100%" allowTransparency="true" scrolling="no" frameborder="0">
+ </iframe>
+ </iframe>-->
</div>
+
</div>
- </form>
+ <div class="detail-bottom"></div>
+
+ </div>
+ <div class="modal-footer">
+ <button type="button" style="width:80px;" class="btn SDBtn" data-dismiss="modal"
+ aria-hidden="true" id="">
+ <span id="nfv-virtualApplication-iui-text-cancelBtn">OK</span>
+ </button>
+ <button data-dismiss="modal" style="width:80px;" type="button"
+ class="btn button-previous SDBtn">
+ <span id="nfv-virtualApplication-iui-text-previousBtn">Cancel</span>
+ </button>
+
+ </div>
+ </br>
+
</div>
</div>
</div>
</div>
+
+ <div style="padding-top:20px;"></div>
+
+ <div id="tabContainer" class="detail" style="border-radius:5px;display: none">
+ <div class="detail-top" style="margin-top:2px;border-radius:5px;">
+ <ul class="nav nav-tabs nav-justified vmapp-margin">
+
+ <li class="active basic">
+ <a href="#" onClick="showDetCont();" id="detHov" data-toggle="tab">
+ <span>Detail Info</span>
+ </a>
+ </li>
+
+ <li class="">
+ <a href="#" onclick="showTopoCont();" data-toggle="tab">
+ <span>Topo</span>
+ </a>
+ </li>
+
+ <li class="">
+ <a href="#" onclick="showInpCont();" data-toggle="tab">
+ <span>Input Data</span>
+ </a>
+ </li>
+
+ </ul>
+ </div>
+
+ <div style="border-radius:5px;">
+ <div id="detailCont" style="display:none;">
+
+ <object id="detailConObj" data="accorTables.html" width="100%" height="300" type="text/html">
+
+ </object>
+ </div>
+ <div id="topoCont" style="display:none;">
+ <!--<iframe src="chartTopo.html" name="" style="width:100%" allowTransparency="true" scrolling="no" frameborder="0">
+ </iframe>-->
+ <object data="chartTopo.html" width="100%" height="300" type="text/html">
+
+ </object>
+ </div>
+ <div id="inpCont" style="display:none;">
+ <object id="inputcontent" src="inputData.html" width="100%" height="300" type="text/html">
+ </object>
+ </div>
+ </div>
+
+ </div>
+
+</div>
+</br>
+
+<div id="vmAppDialog" 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>Create</span>
+ </h4>
+ </div>
+ <form class="form-horizontal" role="form" id="neForm">
+ <div id="wizard">
+ <div class="modal-body">
+
+ <ul class="nav nav-tabs nav-justified vmapp-margin">
+ <li class="active basic">
+ <a href="#basicTab" style="margin-left:1px;" onclick="showBasic();" id="basicTab"
+ data-toggle="tab">
+ <span>Base</span>
+ </a>
+ </li>
+ <li style="padding-right:2px;" class="para">
+ <a href="#" onclick="hideBasic();" data-toggle="tab">
+ <span>Template Parameters</span>
+ </a>
+ </li>
+
+ </ul>
+
+ <div id="basicInfoTab">
+ <div class="mT15 form-group" style="margin-left:25px;"
+ ms-class="has-error:vmAppDialog.name==''">
+ <label class="col-sm-3 control-label">
+ <span>Service Name</span>
+ <span class="required">*</span>
+ </label>
+ <div class="col-sm-7">
+ <input type="text" id="svcName" name="svcName" class="form-control"
+ placeholder="Service Name" maxlength="256"/>
+ </div>
+ </div>
+ <div class="mT15 form-group" style="margin-left:25px;"
+ ms-class="has-error:vmAppDialog.name==''">
+ <label class="col-sm-3 control-label">
+ <span>Service Description</span>
+ <span class="required">*</span>
+ </label>
+ <div class="col-sm-7">
+ <input type="text" id="" name="" class="form-control"
+ placeholder="Service Description" maxlength="256"/>
+ </div>
+ </div>
+
+ <div class="form-group" style="margin-left:25px;margin-bottom:15px;"
+ ms-class="has-error:vmAppDialog.name==''">
+ <label class="col-sm-3 control-label">
+ <span>Service Template</span>
+ <span class="required">*</span>
+ </label>
+ <div class="col-sm-7">
+ <select class="form-control" style="padding-top: 0px;padding-bottom: 0px;"
+ id="svcTempl" name="svcTempl">
+ <option value="select">--select--</option>
+ <option value="1.1">1.1</option>
+ <option value="1.2">1.2</option>
+ </select>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ <div class="modal-footer">
+ <button type="button" style="width:80px;" class="btn SDBtn" data-dismiss="modal"
+ aria-hidden="true" id="createNS">
+ <span id="nfv-virtualApplication-iui-text-cancelBtn">OK</span>
+ </button>
+ <button type="button" style="width:80px;" class="btn button-previous SDBtn">
+ <span id="nfv-virtualApplication-iui-text-previousBtn">Cancel</span>
+ </button>
+
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+</div>
</div>
<div id="filterTpLogicalType_select_popupcontainer" class="openo openo-select-popup-container openo-hide"
style="width: 155px; max-height: 130px; left: 628px; top: 104px; z-index: 1761;">
|