diff options
Diffstat (limited to 'portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html')
| -rw-r--r-- | portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html | 607 |
1 files changed, 607 insertions, 0 deletions
diff --git a/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html b/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html new file mode 100644 index 00000000..89a521aa --- /dev/null +++ b/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html @@ -0,0 +1,607 @@ +<!--
+
+ Copyright 2016, Huawei Technologies Co., Ltd.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Lifecycle Manager</title>
+ <link href="css/bootstrap.min.css" rel="stylesheet"/>
+ <link href="css/VMMain.css" rel="stylesheet"/>
+ <link href="css/bootstrap-table.min.css" rel="stylesheet"/>
+ <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
+ <script type="text/javascript" src="js/bootstrap.min.js"></script>
+ <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="../common/thirdparty/bootbox/bootbox.min.js"></script>
+ <script type="text/javascript" src="../common/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>
+ <script type="text/javascript" src="js/jquery.bootstrap-growl.min.js"></script>
+ <script type="text/javascript" src="js/jquery.isloading.min.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" src="js/bootstrap-table-filter-control.min.js"></script>
+ <script type="text/javascript">
+ $(document).ready(function () {
+ new lcmHandler();
+
+ $('.modal-dialog').draggable();
+ // $("#detailCont").show();
+ var jsondata = loadGetServiceData();
+
+ $.each(jsondata,function(k,v){
+ jsondata[k].createTime= new Date(jsondata[k].createTime).toUTCString();
+ });
+
+ $('#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").show();
+ $("#topoContMod").hide();
+ $("#detailContMod").hide();
+ $("#inpContMod").show();
+
+ $('#sai').bootstrapTable({}) .on('click-row.bs.table', function (e, row, $element) {
+ var newURL = "accorTables.html?serviceId="+row.serviceId + "&serviceType="+row.serviceType;
+ // 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("detailContDlg").setAttribute('data', newURL);
+ document.getElementById("tabContainer").style.display = "block";
+
+ //loadIframe("topoFrame", "chartTopo.html?serviceId="+row.serviceId);
+ document.getElementById("topoContObj").setAttribute('data', 'TopoAccor.html?serviceId='+row.serviceId);
+ document.getElementById("topoContDlg").setAttribute('data', 'TopoAccor.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));
+ });
+
+ });
+
+ function operateFormatter(value, row, index) {
+ 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) {
+ // TO DO ajex call for delete
+ var result = deleteNe(row.id, row);
+ }
+ };
+
+ function hideBasic() {
+ $("#basicInfoTab").hide();
+ initParameterTab();
+ $("#templateParameterTab").show();
+ }
+
+ function showBasic() {
+ $("#basicInfoTab").show();
+ $("#templateParameterTab").hide();
+ }
+
+ function serviceTemplateChanged() {
+ templateParameters.changed = true;
+ }
+
+ 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;
+ }
+ .isloading-wrapper.isloading-right{
+ margin-left:10px;
+ }
+ .isloading-overlay{
+ position:relative;
+ text-align:center;
+ }
+ .isloading-overlay .isloading-wrapper{
+ background: url("images/loading.gif") 90% 50% no-repeat #FFFFFF;
+ padding:15px 30px;
+ -webkit-border-radius:7px;
+ -webkit-background-clip:padding-box;
+ -moz-border-radius:7px;
+ -moz-background-clip:padding;
+ border-radius:7px;
+ background-clip:padding-box;
+ display:inline-block;
+ margin:0 auto;
+ top:10%;
+ z-index:9000;
+ }
+ .icon-refresh{
+ background: url("images/loading.gif") 50% 50% no-repeat;
+ }
+ </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">
+ <div class="openo openo-widget-button openoButton_buttonClass_parent ng-isolate-scope openoButton_buttonClass defaultbutton openoButton_button_default"
+ tabindex="0" id="false" text="res.brApp_ui_res_btn_create" icon-url="./images/add.png"
+ cls="defaultbutton" click="clickAdd"
+ style="display: inline-block; padding-left: 0px; padding-right: 0px;">
+ <div class="openoButton_buttonInnerClass openo-corner-all openoButton_Image" id="false_button">
+ <span class="openo-widget-button-image openoButton_buttonLeftImg"
+ style="background-image: url(images/add.png);"></span>
+ <span class="openoButton_buttonCenterText openoButton_buttonCenterTextFont">Create</span>
+ <span class="openo-widget-button-image openoButton_buttonImgDefault"></span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row-fluid" data-name="table_zone">
+ <div id='ict_virtualApplication_table_div'>
+ <div>
+ <div class="top">
+ <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" data-filter-control="true">
+ <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-formatter="operateFormatterServiceName" data-field="serviceName"
+ data-sortable="true" data-filter-control="input">
+ <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>
+ </th>
+
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
+ data-field="templateName" data-sortable="true" data-filter-control="input">
+ <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>
+ </th>
+
+ <!-- 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>
+ </div>
+ </th -->
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
+ data-field="createTime" data-sortable="true" data-filter-control="input">
+ <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>
+ </div>
+ </th>
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
+ data-field="creator" data-sortable="true" data-filter-control="input">
+ <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>
+ </div>
+ </th>
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
+ data-field="overlayOperation" align="center" data-formatter="operateFormatter"
+ data-events="operateEvents">
+ <div class="openo-table-th-border"></div>
+ <div class="DataTables_sort_wrapper openo-ellipsis ">
+ <span id="portAction_sorticon"
+ class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Action</span>
+ </div>
+ </th>
+ </tr>
+ </thead>
+
+ <tbody>
+
+
+ </tbody>
+
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <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" style="background:#fafafa;">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
+ </button>
+ <h4 class="modal-title" id="">
+ <span>Service Info</span>
+ </h4>
+ </div>
+
+ <div class="detail" style="margin:10px;border-radius:5px;">
+ <div class="detail-top" style="margin-top:10px;border-radius:5px;">
+ <span><h2 style="margin-left: 1%">Detailed Info</h2></span>
+
+
+
+
+ <!-- <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 id="detailContDlg" data="accorTables.html" width="100%" height="300" type="text/html">
+
+ </object>
+ </div>
+ <div id="topoContMod" style="display:none;">
+ <object id="topoContDlg" data="TopoAccor.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 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>
+ <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;">
+
+ <span><h2 style="margin-left: 1%">Detailed Info</h2></span>
+
+ <div id="inpCont" style="display:none;">
+ <object id="inputcontent" src="InputData.html" width="100%" height="300" type="text/html">
+ </object>
+ </div>
+ <!-- <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>-->
+ <object id="topoContObj" data="TopoAccor.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="svcDesc" 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" onchange="serviceTemplateChanged();">
+ <option value="select">--select--</option>
+ <option value="1.1">1.1</option>
+ <option value="1.2">1.2</option>
+ </select>
+ </div>
+ </div>
+ </div>
+
+ <div id="templateParameterTab">
+
+ </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" data-dismiss="modal">
+ <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;">
+ <div class="openo-select-item openo-ellipsis " id="filterTpLogicalType_openo-select-id_0">
+ <label class="openo-ellipsis openo-select-blank-item"
+ style="width: 100%; display: block; height: 20px;"></label>
+ </div>
+ <div class="openo-select-item openo-ellipsis " id="filterTpLogicalType_openo-select-id_1">
+ <label class="openo-ellipsis " style="width: 100%; display: block; height: 20px;">ETH</label>
+ </div>
+ <div class="openo-select-item openo-ellipsis " id="filterTpLogicalType_openo-select-id_2">
+ <label class="openo-ellipsis " style="width: 100%; display: block; height: 20px;" title="POS">POS</label>
+ </div>
+ <div class="openo-select-item openo-ellipsis " id="filterTpLogicalType_openo-select-id_3">
+ <label class="openo-ellipsis " style="width: 100%; display: block; height: 20px;">Trunk</label>
+ </div>
+ <div class="openo-select-item openo-ellipsis " id="filterTpLogicalType_openo-select-id_4">
+ <label class="openo-ellipsis " style="width: 100%; display: block; height: 20px;">Loopback</label>
+ </div>
+</div>
+
+
+</body>
+</html>
|