Submit catalog gui
authornancylizi <li.zi30@zte.com.cn>
Wed, 14 Sep 2016 03:54:45 +0000 (11:54 +0800)
committernancylizi <li.zi30@zte.com.cn>
Wed, 14 Sep 2016 03:54:45 +0000 (11:54 +0800)
Change-Id: I0fe4b7f8453f61f126ec639bd1f2603f0c4ee64a
Signed-off-by: nancylizi <li.zi30@zte.com.cn>
40 files changed:
openo-portal/portal-catalog/pom.xml [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/csarPackage.html [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/css/datatable-sort.css [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/css/fileupload.css [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/css/hostMirror.css [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/css/package.css [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/css/platform/animate.min.css [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/css/platform/skill.css [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/css/software.css [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/css/template.css [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/css/templateDetail.css [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/css/topology.css [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/css/virtualApplication.css [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/css/vnfm.css [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/i18n/nfv-nso-iui-i18n-en-US.properties [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/i18n/nfv-nso-iui-i18n-zh-CN.properties [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/image/details_close.png [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/image/details_open.png [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/image/down.png [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/image/pointes_blue.png [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/image/pointes_green.png [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_asc.png [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_asc_disabled.png [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_both.png [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_desc.png [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_desc_disabled.png [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/image/up.png [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/js/component/commonUtil.js [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/js/component/loadi18n_nsoc.js [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/js/component/serverPageTable.js [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/js/package/pmController.js [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/js/package/pmUtil.js [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmController.js [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmDetailController.js [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmDetailUtil.js [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmUtil.js [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/js/template/topoUtil.js [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/template.html [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/templateDetail.html [new file with mode: 0644]
openo-portal/portal-catalog/src/main/webapp/catalog/topology.html [new file with mode: 0644]

diff --git a/openo-portal/portal-catalog/pom.xml b/openo-portal/portal-catalog/pom.xml
new file mode 100644 (file)
index 0000000..cca1acb
--- /dev/null
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+    Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)
+
+    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.
+
+-->
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+    <parent>
+        <groupId>org.openo.gso.gui</groupId>
+        <artifactId>openo-portal</artifactId>
+        <version>1.0.0-SNAPSHOT</version>
+    </parent>
+    <groupId>oopeno-portal.catalog</groupId>
+    <artifactId>catalog</artifactId>
+       <version>1.0.0-SNAPSHOT</version>
+    <packaging>pom</packaging>
+</project>
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/csarPackage.html b/openo-portal/portal-catalog/src/main/webapp/catalog/csarPackage.html
new file mode 100644 (file)
index 0000000..3509c94
--- /dev/null
@@ -0,0 +1,303 @@
+<!--\r
+\r
+    Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+\r
+    Licensed under the Apache License, Version 2.0 (the "License");\r
+    you may not use this file except in compliance with the License.\r
+    You may obtain a copy of the License at\r
+\r
+            http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+    Unless required by applicable law or agreed to in writing, software\r
+    distributed under the License is distributed on an "AS IS" BASIS,\r
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+    See the License for the specific language governing permissions and\r
+    limitations under the License.\r
+\r
+-->\r
+<!DOCTYPE html>\r
+<html>\r
+<head>\r
+       <head lang="en">\r
+       <meta charset="UTF-8">\r
+       <title></title>\r
+       <link href="../component/thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" />\r
+       <link href="../component/thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet" />\r
+       <link href="../component/thirdparty/uniform/css/uniform.default.min.css" rel="stylesheet" />\r
+       <link href="../component/css/ZteIctIcons/style.css" rel="stylesheet"/>\r
+       <link href="../framework/css/ngict-component.css" rel="stylesheet"/>\r
+       <link href="../framework/css/plugins.css" rel="stylesheet"/>\r
+       <link href="../vendor/jQuery-File-Upload/css/jquery.fileupload.css" rel="stylesheet" />\r
+       <link href="css/fileupload.css" rel="stylesheet" />\r
+       <link href="css/package.css" rel="stylesheet" />\r
+       <style>\r
+               .ms-controller{ visibility: hidden }\r
+       </style>\r
+</head>\r
+<body>\r
+       <div class="container-fluid ms-controller" ms-controller="pmController">\r
+               <div class="container upload">\r
+                       <form id="fileupload" role="form" enctype="multipart/form-data">\r
+                               <div class="file-preview">\r
+                                       <div id="dropzone" class="file-drop-zone">\r
+                                       <div class="file-drop-zone-title">\r
+                                                       <span id="nfv-package-iui-drop-zone-title" name_i18n="com_zte_nfv_nsoc_i18n"></span>\r
+                                       </div>\r
+                               </div>\r
+                               </div>\r
+                       <div class="input-group fileupload-btn">\r
+                          <div id="fileName" class="form-control file-caption">\r
+                          </div>\r
+                          <span class="input-group-btn">\r
+                                       <span class="btn btn-primary fileinput-button">\r
+                                       <span id="nfv-package-iui-drop-zone-selectBtn" name_i18n="com_zte_nfv_nsoc_i18n"></span>\r
+                                       <input type="file" name="file" multiple>\r
+                               </span>\r
+                                       <button id="fileremove" class="btn btn-default" type="button" disabled>\r
+                                       <span id="nfv-package-iui-drop-zone-removeBtn" name_i18n="com_zte_nfv_nsoc_i18n"></span>\r
+                               </button>\r
+                               <button id="filesubmit" class="btn btn-default" type="submit" disabled>\r
+                                       <span id="nfv-package-iui-drop-zone-uploadBtn" name_i18n="com_zte_nfv_nsoc_i18n"></span>\r
+                               </button>                       \r
+                          </span>\r
+                       </div>              \r
+                           <div class="fileupload-progress">\r
+                                   <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">\r
+                                       <div id="bar" class="progress-bar progress-bar-success" style="width:0%;"></div><span id="persent"></span>\r
+                                   </div>\r
+                               </div>   \r
+                       </form>         \r
+               </div>\r
+               <div class="row" style=" margin-top: 15px;"> \r
+                   <div class="col-xs-6 col-md-6 col-sm-6 col-lg-6 titlefont">\r
+                       <span id="nfv-package-iui-title" name_i18n="com_zte_nfv_nsoc_i18n"></span>\r
+                   </div> \r
+               </div> \r
+               <div class="separator-line"></div>\r
+               <div>\r
+                       <table class="table table-striped table-bordered dataTable ">\r
+                               <thead>\r
+                               <tr class="heading">\r
+                                       <th id="nfv-package-iui-field-sn" name_i18n="com_zte_nfv_nsoc_i18n"\r
+                                               style="width: 80px;">\r
+                                       </th>\r
+                                       <th id="nfv-package-iui-field-name" name_i18n="com_zte_nfv_nsoc_i18n"></th>\r
+                                       <th id="nfv-package-iui-field-type" name_i18n="com_zte_nfv_nsoc_i18n"></th>\r
+                                       <th id="nfv-package-iui-field-usagestate" name_i18n="com_zte_nfv_nsoc_i18n"></th>\r
+                                       <th id="nfv-package-iui-field-processstate" name_i18n="com_zte_nfv_nsoc_i18n"></th>\r
+                                       <th id="nfv-package-iui-field-operationalstate" name_i18n="com_zte_nfv_nsoc_i18n"></th>\r
+                                       <th id="nfv-package-iui-field-onboardstate" name_i18n="com_zte_nfv_nsoc_i18n"></th>\r
+                                       <th id="nfv-package-iui-field-operation" name_i18n="com_zte_nfv_nsoc_i18n"></th>\r
+                               </tr>\r
+                               </thead>\r
+                               <tbody ms-each-res="vm.resource.packageInfo">\r
+                               <tr>\r
+                                       <td ms-text="$index+1"></td>\r
+                                       <td>\r
+                                               <a href="#" ms-click="vm.packageDetail.$showDetails('block',$index,res.name)">\r
+                                                       {{res.name}}\r
+                                               </a>\r
+                                       </td>\r
+                                       <td ms-text="res.type"></td>\r
+                                       <td ms-text="res.usageState"></td>\r
+                                       <td ms-text="res.processState"></td>\r
+                                       <td ms-text="res.operationalState"></td>\r
+                                       <td>\r
+                                               <span class="label label-info status" data-toggle="tooltip" title="nfv-package-iui-status-tip"\r
+                                                         ms-click="vm.onBoardPackage(res.csarId,res.type)">\r
+                                               {{res.onBoardState}}\r
+                                               </span>\r
+                                       </td>\r
+                                       <td>\r
+                                               <a href="#" class="btn-xs grey btn-editable" ms-click="vm.$delPackage(res.csarId,res.type)">\r
+                                                       <i class="ict-delete"></i>\r
+                                                       <i id="nfv-software-iui-action-delete" name_i18n="com_zte_nfv_nsoc_i18n"></i>\r
+                                               </a>\r
+                                       </td>\r
+                               </tr>\r
+                               </tbody>\r
+                       </table>\r
+               </div>\r
+               <div id="right-menu" ms-css-display="packageDetail.isShow">\r
+                       <div>\r
+                               <div class="title">\r
+                                       <h4>\r
+                                               {{packageDetail.detailTitle}}\r
+                                       </h4>\r
+                                       <div class="rigth right-button-pointer" ms-click="packageDetail.$showDetails('none')">\r
+                                               <button type="button" class="btn btn-default">\r
+                                                       <span id="nfv-package-iui_packageview_btn_close" name_i18n="com_zte_nfv_nsoc_i18n"></span>\r
+                                               </button>\r
+                                       </div>\r
+                               </div>\r
+                               <div class="row-fluid" data-name="table_zone">\r
+                                       <div id='ict_table_general_div' class="packageDetail">\r
+                                               <table class="table table-striped table-bordered dataTable ">\r
+                                                       <thead>\r
+                                                       <tr class="heading">\r
+                                                               <th id="nfv-package-iui_packageview_key" name_i18n="com_zte_nfv_nsoc_i18n"></th>\r
+                                                               <th id="nfv-package-iui_packageview_value" name_i18n="com_zte_nfv_nsoc_i18n"></th>\r
+                                                       </tr>\r
+                                                       </thead>\r
+                                                       <tbody>\r
+                                                       <tr>\r
+                                                               <td id="nfv-package-iui-field-detail-csarid" name_i18n="com_zte_nfv_nsoc_i18n"></td>\r
+                                                               <td ms-text="resource.packageDetails.csarId"></td>\r
+                                                       </tr>\r
+                                                       <tr>\r
+                                                               <td id="nfv-package-iui-field-detail-name" name_i18n="com_zte_nfv_nsoc_i18n"></td>\r
+                                                               <td ms-text="resource.packageDetails.name"></td>\r
+                                                       </tr>\r
+                                                       <tr>\r
+                                                               <td id="nfv-package-iui-field-detail-type" name_i18n="com_zte_nfv_nsoc_i18n"></td>\r
+                                                               <td ms-text="resource.packageDetails.type"></td>\r
+                                                       </tr>\r
+                                                       <tr>\r
+                                                               <td id="nfv-package-iui-field-detail-provider" name_i18n="com_zte_nfv_nsoc_i18n"></td>\r
+                                                               <td ms-text="resource.packageDetails.provider"></td>\r
+                                                       </tr>\r
+                                                       <tr>\r
+                                                               <td id="nfv-package-iui-field-detail-version" name_i18n="com_zte_nfv_nsoc_i18n"></td>\r
+                                                               <td ms-text="resource.packageDetails.version"></td>\r
+                                                       </tr>\r
+                                                       <tr>\r
+                                                               <td id="nfv-package-iui-field-detail-size" name_i18n="com_zte_nfv_nsoc_i18n"></td>\r
+                                                               <td ms-text="resource.packageDetails.size"></td>\r
+                                                       </tr>\r
+                                                       <tr>\r
+                                                               <td id="nfv-package-iui-field-detail-createtime" name_i18n="com_zte_nfv_nsoc_i18n"></td>\r
+                                                               <td ms-text="resource.packageDetails.createTime"></td>\r
+                                                       </tr>\r
+                                                       <tr>\r
+                                                               <td id="nfv-package-iui-field-detail-modifytime" name_i18n="com_zte_nfv_nsoc_i18n"></td>\r
+                                                               <td ms-text="resource.packageDetails.modifyTime"></td>\r
+                                                       </tr>\r
+                                                       <tr>\r
+                                                               <td id="nfv-package-iui-field-detail-deletionpending" name_i18n="com_zte_nfv_nsoc_i18n"></td>\r
+                                                               <td ms-text="resource.packageDetails.deletionPending"></td>\r
+                                                       </tr>\r
+                                                       <tr>\r
+                                                               <td id="nfv-package-iui-field-detail-operationalstate" name_i18n="com_zte_nfv_nsoc_i18n"></td>\r
+                                                               <td ms-text="resource.packageDetails.operationalState"></td>\r
+                                                       </tr>\r
+                                                       <tr>\r
+                                                               <td id="nfv-package-iui-field-detail-usagestate" name_i18n="com_zte_nfv_nsoc_i18n"></td>\r
+                                                               <td ms-text="resource.packageDetails.usageState"></td>\r
+                                                       </tr>\r
+                                                       <tr>\r
+                                                               <td id="nfv-package-iui-field-detail-onboardstate" name_i18n="com_zte_nfv_nsoc_i18n"></td>\r
+                                                               <td ms-text="resource.packageDetails.onBoardState"></td>\r
+                                                       </tr>\r
+                                                       <tr>\r
+                                                               <td id="nfv-package-iui-field-detail-processstate" name_i18n="com_zte_nfv_nsoc_i18n"></td>\r
+                                                               <td ms-text="resource.packageDetails.processState"></td>\r
+                                                       </tr>\r
+                                                       <tr>\r
+                                                               <td id="nfv-package-iui-field-detail-format" name_i18n="com_zte_nfv_nsoc_i18n"></td>\r
+                                                               <td ms-text="resource.packageDetails.format"></td>\r
+                                                       </tr>\r
+                                                       <tr>\r
+                                                               <td id="nfv-package-iui-field-detail-downloaduri" name_i18n="com_zte_nfv_nsoc_i18n"></td>\r
+                                                               <td ms-text="resource.packageDetails.downloadUri"></td>\r
+                                                       </tr>\r
+                                                       </tbody>\r
+                                               </table>\r
+                                       </div>\r
+                               </div>\r
+                       </div>\r
+               </div>\r
+\r
+               <div id="selectVimDialog" class="modal fade" tabindex="-1" role="dialog"\r
+                        aria-labelledby="myModalLabel" aria-hidden="true">\r
+                       <div class="modal-dialog">\r
+                               <div class="modal-content">\r
+                                       <div class="modal-header">\r
+                                               <h4 class="modal-title" id="myModalLabel">\r
+                                                       <span id="nfv-package-iui-selectvim-title" name_i18n="com_zte_nfv_nsoc_i18n"></span>\r
+                                               </h4>\r
+                                       </div>\r
+                                       <div class="modal-body">\r
+                                               <table class="table table-striped table-bordered dataTable ">\r
+                                                       <thead>\r
+                                                       <tr class="heading">\r
+                                                               <th id="nfv-package-iui-onboard-dialog-vimname" name_i18n="com_zte_nfv_nsoc_i18n"></th>\r
+                                                               <th id="nfv-package-iui-test-env" name_i18n="com_zte_nfv_nsoc_i18n"></th>\r
+                                                               <th id="nfv-package-iui-product-env" name_i18n="com_zte_nfv_nsoc_i18n"></th>\r
+                                                       </tr>\r
+                                                       </thead>\r
+                                                       <tbody ms-each-rest="resource.vimSelectItems">\r
+                                                               <tr>\r
+                                                                       <td ms-text="rest.vimName"></td>\r
+                                                                       <td>\r
+                                                                               <div class="checkbox">\r
+                                                                                       <input type="radio" name="testEnvRadios" ms-attr-id="testEnvRadios{{$index}}"\r
+                                                                                                  ms-click="vm.selectVimDialog.$radioClicked($index)">\r
+                                                                               </div>\r
+                                                                       </td>\r
+                                                                       <td>\r
+                                                                               <div class="checkbox">\r
+                                                                                       <input type="checkbox" name="produceChecbox"  ms-attr-id="produceEnvChecks{{$index}}" value="">\r
+                                                                               </div>\r
+                                                                       </td>\r
+                                                               </tr>\r
+                                                       </tbody>\r
+                                               </table>\r
+                                               <!--    <div class="form-group">\r
+                                <div class="col-sm-3"></div>\r
+                                <div class="col-sm-3" id="nfv-package-iui-product-env" name_i18n="com_zte_nfv_nsoc_i18n"></div>\r
+                                <div class="col-sm-3" id="nfv-package-iui-test-env" name_i18n="com_zte_nfv_nsoc_i18n"></div>\r
+                            </div>\r
+                            <form class="form-horizontal" role="form" id="vimForm">\r
+                                <div ms-each-rest="resource.vimSelectItems">\r
+                                    <div class="form-group">\r
+                                        <label class="col-sm-3 control-label" ms-text="rest.vimName"></label>\r
+                                        <div class="col-sm-3">\r
+                                            <select  class="form-control" ms-attr-id='vim{{$index}}'>\r
+                                                <option value="1" id="nfv-package-iui-product-env" name_i18n="com_zte_nfv_nsoc_i18n"></option>\r
+                                                <option value="2" id="nfv-package-iui-test-env" name_i18n="com_zte_nfv_nsoc_i18n"></option>\r
+                                            </select>\r
+                                                                       </div>\r
+                                                               </div>\r
+                                                       </div>\r
+                                               </form>-->\r
+                                       </div>\r
+                                       <div class="modal-footer">\r
+                                               <button type="button" class="btn" data-dismiss="modal">\r
+                                                       <span id="nfv-package-iui-btn-cancel" name_i18n="com_zte_nfv_nsoc_i18n"></span>\r
+                                               </button>\r
+                                               <button type="button" class="btn btn-primary" id="onBoardBtn"  ms-click="vm.selectVimDialog.$confirmBtnClick()">\r
+                                                       <span id="nfv-package-iui-btn-ok" name_i18n="com_zte_nfv_nsoc_i18n"></span>\r
+                                               </button>\r
+                                       </div>\r
+                               </div>\r
+                       </div>\r
+               </div>\r
+       </div>\r
+\r
+\r
+    <script type="text/javascript" src="../component/thirdparty/jquery/jquery-1.10.2.min.js"></script>\r
+    <script type="text/javascript" src="../component/thirdparty/bootstrap/js/bootstrap.min.js"></script>\r
+    <script type="text/javascript" src="../component/thirdparty/bootbox/bootbox.min.js"></script>  \r
+    <script type="text/javascript" src="../component/thirdparty/data-tables/jquery.dataTables.min.js"></script>\r
+    <script type="text/javascript" src="../component/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>\r
+\r
+       <script type="text/javascript" src="../vendor/cometd/cometd.js"></script>\r
+       <script type="text/javascript" src="../vendor/cometd/jquery.cometd.js"></script>\r
+       <script type="text/javascript" src="../vendor/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>\r
+    <script type="text/javascript" src="../vendor/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>\r
+    <script type="text/javascript" src="../vendor/jQuery-File-Upload/js/jquery.fileupload.js"></script>\r
+    <script type="text/javascript" src="../vendor/bootstrap-growl/bootstrap-growl.min.js"></script>\r
+       <script type="text/javascript" src="../framework/js/core/hk.min.js"></script>\r
+       <script src="../vendor/echarts/echarts-all.js"></script>\r
+       <script type="text/javascript" src="../vendor/avalon/avalon.modern.js"></script>\r
+       <script src="../vendor/avalon/avalon.js"></script>\r
+\r
+       <script type="text/javascript" src="../framework/js/tools.js"></script>\r
+\r
+       <script type="text/javascript" src="js/component/commonUtil.js"></script>\r
+       <script type="text/javascript" src="js/component/serverPageTable.js"></script>\r
+       <script type="text/javascript" src="js/component/loadi18n_nsoc.js"></script>\r
+       <script type="text/javascript" src="js/package/pmUtil.js"></script>\r
+       <script type="text/javascript" src="js/package/pmController.js"></script>\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/css/datatable-sort.css b/openo-portal/portal-catalog/src/main/webapp/catalog/css/datatable-sort.css
new file mode 100644 (file)
index 0000000..09af1d0
--- /dev/null
@@ -0,0 +1,30 @@
+/**
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)
+ *
+ * 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.
+ */
+table.table thead .sorting,
+table.table thead .sorting_asc,
+table.table thead .sorting_desc,
+table.table thead .sorting_asc_disabled,
+table.table thead .sorting_desc_disabled {
+       cursor: pointer;
+       *cursor: hand;
+}
+
+table.table thead .sorting { background: url('../image/sort_both.png') no-repeat center right; }
+table.table thead .sorting_asc { background: url('../image/sort_asc.png') no-repeat center right; }
+table.table thead .sorting_desc { background: url('../image/sort_desc.png') no-repeat center right; }
+
+table.table thead .sorting_asc_disabled { background: url('../image/sort_asc_disabled.png') no-repeat center right; }
+table.table thead .sorting_desc_disabled { background: url('../image/sort_desc_disabled.png') no-repeat center right; }
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/css/fileupload.css b/openo-portal/portal-catalog/src/main/webapp/catalog/css/fileupload.css
new file mode 100644 (file)
index 0000000..220b517
--- /dev/null
@@ -0,0 +1,81 @@
+/**\r
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ *         http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ */\r
+@charset "UTF-8";\r
+\r
+.file-caption {\r
+    display: inline-block;\r
+    overflow: hidden;\r
+    text-overflow: ellipsis;\r
+}\r
+\r
+.file-caption .glyphicon {\r
+    display: inline-block;\r
+    min-width: 18px;\r
+    margin-top: 2px;\r
+}\r
+\r
+.file-caption-name {\r
+    display: inline-block;\r
+    overflow: hidden;\r
+    max-height: 20px;\r
+    padding-right: 10px;\r
+    word-break: break-all;\r
+}\r
+\r
+.file-caption-ellipsis {\r
+    position: absolute;\r
+    right: 10px;\r
+    margin-top: -6px;\r
+    font-size: 1.2em;\r
+    display: none;\r
+    font-weight: bold;\r
+    cursor: default;\r
+}\r
+\r
+.file-drop-zone{\r
+    border:1px dashed #aaa;\r
+    border-radius:4px;\r
+    height:100%;\r
+    text-align:center;\r
+    vertical-align:middle;\r
+    margin:12px 15px 12px 12px;\r
+    padding:5px\r
+}\r
+.file-drop-zone-title{\r
+    color:#aaa;\r
+    font-size:20px;\r
+    padding:20px 10px\r
+}\r
+.fileupload-btn {\r
+    padding-bottom: 10px;\r
+}\r
+\r
+.fileupload-input {\r
+    position: relative;\r
+    display: table;\r
+}\r
+\r
+.file-preview {\r
+    border-radius:5px;\r
+    border:1px solid #ddd;\r
+    padding:5px;\r
+    width:100%;\r
+    margin-bottom:5px\r
+}\r
+\r
+.upload {\r
+    width: 50%;\r
+}
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/css/hostMirror.css b/openo-portal/portal-catalog/src/main/webapp/catalog/css/hostMirror.css
new file mode 100644 (file)
index 0000000..2f99e68
--- /dev/null
@@ -0,0 +1,447 @@
+/**\r
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ *         http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ */\r
+body {\r
+       font-family: microsoft yahei !important;\r
+}\r
+\r
+/* blue pill (inspired by iTunes)\r
+*******************************************************************************/\r
+.redFont{\r
+       color:red;\r
+}\r
+.blue {\r
+\r
+       background-color: #5b9bd1;\r
+       border-radius: 20px;\r
+       color: #fff;\r
+       font-weight: bold;\r
+       padding: 8px 0;\r
+       text-align: center;\r
+       width: 100px;\r
+}\r
+\r
+.blue:hover {\r
+       background-color: #e8f3fd;\r
+       color: #5b9bd1;\r
+}\r
+\r
+.blue.selected {\r
+       border: 0;\r
+       background-color: #5b9bd1;\r
+       color: #fff;\r
+}\r
+\r
+.blue.selected:hover {\r
+       border: 0;\r
+       background-color: #5b9bd1;\r
+       color: #fff;\r
+}\r
+\r
+p {\r
+       color: #444;\r
+       font-size: 14px;\r
+       font-weight: normal;\r
+       line-height: 21px;\r
+       margin: 0 0 12px 0;\r
+}\r
+\r
+p.credit {\r
+       border-top: 1px solid #ccc;\r
+       font-size: 14px;\r
+       line-height: 140%;\r
+       margin: 36px 0 12px 0;\r
+       padding: 8px 0 0 0;\r
+       text-align: center;\r
+}\r
+\r
+ul.column {\r
+       float: left;\r
+       list-style: none;\r
+       width: 675px;\r
+}\r
+\r
+ul.column li {\r
+       background: #eee;\r
+       -webkit-border-radius: 5px;\r
+       border-radius: 5px;\r
+       -webkit-box-shadow: inset 0 1px 1px 0 #c7c7c7;\r
+       box-shadow: inset 0 1px 1px 0 #c7c7c7;\r
+       float: left;\r
+       margin: 10px 0 0 10px;\r
+       display: block;\r
+       height: 150px;\r
+       text-align: center;\r
+       width: 215px;\r
+}\r
+\r
+/* Clear Floated Elements\r
+------------------------------------------------------------------------------*/\r
+.column:after,.button-collection:after,.clearfix:after,div.project-info:after\r
+       {\r
+       clear: both;\r
+       content: ' ';\r
+       display: block;\r
+       font-size: 0;\r
+       line-height: 0;\r
+       visibility: hidden;\r
+       width: 0;\r
+       height: 0;\r
+}\r
+\r
+.container-fluid {\r
+       background-color:white !important;\r
+       min-height:500px;\r
+}\r
+\r
+.nav-tabs {\r
+       border: 0;\r
+}\r
+\r
+.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus\r
+       {\r
+       border: 0;\r
+       border-top: 3px solid #F3565D;\r
+}\r
+\r
+.nav-tabs>li>a {\r
+       border-radius: 0;\r
+}\r
+\r
+.nav-tabs>li>a:hover {\r
+       background-color: #f1f3fa;\r
+       border: 1Px solid #f1f3fa;\r
+}\r
+\r
+.c3 {\r
+       margin-top: 120px;\r
+}\r
+\r
+.skills-chart-breadcrumb {\r
+       \r
+}\r
+\r
+.blue:selected {\r
+       border: 0;\r
+       background-color: #5b9bd1;\r
+}\r
+\r
+.btn {\r
+       /* border-width: 0; */\r
+       /* padding: 7px 14px; */\r
+       /* font-size: 14px; */\r
+       /* outline: none !important; */\r
+       /* background-image: none !important; */\r
+       /* filter: none; */\r
+       /* -webkit-box-shadow: none; */\r
+       -moz-box-shadow: none;\r
+       /* box-shadow: none; */\r
+       /* text-shadow: none; */\r
+}\r
+\r
+select {\r
+       border-width: 1px;\r
+       padding: 4px 1px;\r
+       border-radius: 4px;\r
+} \r
+\r
+.input-sm {\r
+       padding: 4px 10px;\r
+}\r
+\r
+.btn-block {\r
+       display: block;\r
+       width: 100%;\r
+       padding-left: 0;\r
+       padding-right: 0;\r
+}\r
+\r
+/* Bootstrap buttons */\r
+.btn-default {\r
+       color: #5b9bd1;\r
+       background-color: #fff;\r
+       border-color: #ccc;\r
+}\r
+\r
+.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active\r
+       {\r
+       color: #333;\r
+       background-color: #ededed;\r
+       border-color: #b3b3b3;\r
+}\r
+\r
+.open .btn-default.dropdown-toggle {\r
+       color: #333;\r
+       background-color: #ededed;\r
+       border-color: #b3b3b3;\r
+}\r
+\r
+.btn-default:active,.btn-default.active {\r
+       background-image: none;\r
+       background-color: #e0e0e0;\r
+       font-weight: bold;\r
+}\r
+\r
+.btn-default:active:hover,.btn-default.active:hover {\r
+       background-color: #e6e6e6;\r
+}\r
+\r
+.open .btn-default.dropdown-toggle {\r
+       background-image: none;\r
+}\r
+\r
+.btn-default.disabled,.btn-default.disabled:hover,.btn-default.disabled:focus,.btn-default.disabled:active,.btn-default.disabled.active,.btn-default[disabled],.btn-default[disabled]:hover,.btn-default[disabled]:focus,.btn-default[disabled]:active,.btn-default[disabled].active,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default:hover,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default.active\r
+       {\r
+       background-color: #fff;\r
+       border-color: #ccc;\r
+}\r
+\r
+.btn-default .badge {\r
+       color: #fff;\r
+       background-color: #333;\r
+}\r
+\r
+.btn-default>i {\r
+       color: #aaa;\r
+}\r
+\r
+.btn-default>i[class^="icon-"],.btn-default>i[class*="icon-"] {\r
+       color: #8c8c8c;\r
+}\r
+\r
+div[data-name="tab_zone"] div {\r
+       background-color: #f1f3fa;\r
+       padding: 0px;\r
+}\r
+\r
+div[data-name="cond_zone"] div {\r
+       background-color: #fff;\r
+       margin-top: 15px;\r
+       margin-bottom: 15px;\r
+}\r
+\r
+div[data-name="res-conds-zone"] {\r
+       display: inline;\r
+}\r
+\r
+div[data-name="res-conds-zone"] select,div[data-name="res-conds-zone"] span\r
+       {\r
+       /**height:33px;*/\r
+       margin-left: 15px;\r
+       color: #5b9bd1;\r
+       border-color: #ccc;\r
+       font-weight: bold;\r
+}\r
+\r
+.input{\r
+       width:250px;\r
+  height: 34px;\r
+  padding: 6px 12px;\r
+  font-size: 14px;\r
+  line-height: 1.42857143;\r
+  color: #555;\r
+  background-color: #fff;\r
+  background-image: none;\r
+  border: 1px solid #ccc;\r
+  border-radius: 4px;\r
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);\r
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);\r
+  -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;\r
+  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;\r
+}\r
+\r
+div.separator {\r
+       margin: 20px;\r
+}\r
+\r
+div.separator div {\r
+       text-align: center;\r
+       line-height: 0;\r
+}\r
+\r
+div.separator-line {\r
+       height: 1px !important;\r
+       width: 100%;\r
+       background: #ddd;\r
+       overflow: hidden;\r
+}\r
+\r
+.dropdown-toggle {\r
+       color: #5b9bd1;\r
+}\r
+\r
+.calendar-date {\r
+       color: #5b9bd1;\r
+}\r
+\r
+.range_inputs {\r
+       color: #5b9bd1;\r
+}\r
+\r
+.btn.dropdown-toggle,.btn-group .btn.dropdown-toggle,.btn:hover,.btn:disabled,.btn[disabled],.btn:focus,.btn:active,.btn.active\r
+       {\r
+       outline: none !important;\r
+       background-image: none !important;\r
+       filter: none;\r
+       -webkit-box-shadow: none;\r
+       -moz-box-shadow: none;\r
+       box-shadow: none;\r
+       text-shadow: none;\r
+}\r
+\r
+#skills-chart-breadcrumb {\r
+       margin-bottom: 10px\r
+}\r
+\r
+/*增加daterangepicker的css*/\r
+input[name="daterange"] {\r
+       width: 220px;\r
+       line-height: 0;\r
+       height: 31px;\r
+       vertical-align: top;\r
+       margin-top: 2px;\r
+}\r
+\r
+.daterangepicker .ranges {\r
+       width: 205px;\r
+}\r
+\r
+.daterangepicker .ranges input {\r
+       width: 95px !important;\r
+}\r
+\r
+td.details-control {\r
+       background: url('../image/details_open.png') no-repeat center center;\r
+       cursor: pointer;\r
+}\r
+\r
+tr.shown td.details-control {\r
+       background: url('../image/details_close.png') no-repeat center center;\r
+}\r
+\r
+.details table td {\r
+       word-wrap: break-word;\r
+       word-break: normal;\r
+       border-top: 1px solid #dddddd;\r
+}\r
+\r
+.details table  tr:first-child td {\r
+       border-top: none;\r
+}\r
+\r
+.details table {\r
+       table-layout: fixed;\r
+       width: 100%;\r
+}\r
+\r
+td.title {\r
+       width: 10%;\r
+}\r
+\r
+table.dataTable tbody th,table.dataTable tbody td {\r
+       padding: 8px 10px;\r
+}\r
+\r
+div.dataTables_length,div.dataTables_info {\r
+       display: inline;\r
+}\r
+\r
+div.dataTables_paginate {\r
+       display: inline;\r
+       float: right;\r
+}\r
+\r
+div.pagination-panel {\r
+       margin-right: 10px;\r
+}\r
+\r
+input.pagination-panel-input {\r
+       width: 50px;\r
+}\r
+\r
+.daterangepicker .daterangepicker_start_input label,.daterangepicker .daterangepicker_end_input label\r
+       {\r
+       color: #5b9bd1;\r
+}\r
+\r
+.daterangepicker .ranges .input-mini {\r
+       color: #5b9bd1;\r
+}\r
+\r
+.cancelBtn {\r
+       padding: 5px 10px 5px 10px;\r
+}\r
+\r
+.btn:focus,.btn:active:focus,.btn.active:focus {\r
+       outline: 0;\r
+}\r
+\r
+#ict_host_table_div {\r
+       margin-top: 15px;\r
+}\r
+\r
+#ict_host_table_div label {\r
+       font-weight: 100;\r
+}s\r
+\r
+#ict_host_table_div  table {\r
+       width: 100% !important;\r
+}\r
+\r
+.upload {\r
+       width:60%;\r
+}\r
+.myPreview {\r
+       height: 100px;\r
+}\r
+\r
+.uploadBtn {\r
+       margin-top:10px;\r
+}\r
+\r
+.input-group .form-control {\r
+       height: 34px !important;\r
+}\r
+\r
+.input-group .btn {\r
+       font-size: 14px !important;\r
+}\r
+\r
+.form-horizontal .btn-center {\r
+       text-align: center;\r
+       margin-bottom: 15px;\r
+}\r
+\r
+.blueactive {\r
+    color: #ffffff !important;\r
+    background-color: #5b9bd1;\r
+}\r
+\r
+/* .process-modal {\r
+    position:fixed;\r
+    top:0;\r
+    right:0;\r
+    bottom:0;\r
+    left:0;\r
+    z-index:1000;\r
+}\r
+.process-content {\r
+    width: 200px;\r
+    margin: 200px auto;\r
+    padding:15px;\r
+    border: 1px solid #ddd;\r
+    background-color: #eee;\r
+    text-align:center;\r
+} */
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/css/package.css b/openo-portal/portal-catalog/src/main/webapp/catalog/css/package.css
new file mode 100644 (file)
index 0000000..9ff4aef
--- /dev/null
@@ -0,0 +1,461 @@
+/**\r
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ *         http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ */\r
+body {\r
+       font-family: microsoft yahei !important;\r
+}\r
+\r
+/* blue pill (inspired by iTunes)\r
+*******************************************************************************/\r
+.redFont{\r
+       color:red;\r
+}\r
+.blue {\r
+\r
+       background-color: #5b9bd1;\r
+       border-radius: 20px;\r
+       color: #fff;\r
+       font-weight: bold;\r
+       padding: 8px 0;\r
+       text-align: center;\r
+       width: 100px;\r
+}\r
+\r
+.blue:hover {\r
+       background-color: #e8f3fd;\r
+       color: #5b9bd1;\r
+}\r
+\r
+.blue.selected {\r
+       border: 0;\r
+       background-color: #5b9bd1;\r
+       color: #fff;\r
+}\r
+\r
+.blue.selected:hover {\r
+       border: 0;\r
+       background-color: #5b9bd1;\r
+       color: #fff;\r
+}\r
+\r
+p {\r
+       color: #444;\r
+       font-size: 14px;\r
+       font-weight: normal;\r
+       line-height: 21px;\r
+       margin: 0 0 12px 0;\r
+}\r
+\r
+p.credit {\r
+       border-top: 1px solid #ccc;\r
+       font-size: 14px;\r
+       line-height: 140%;\r
+       margin: 36px 0 12px 0;\r
+       padding: 8px 0 0 0;\r
+       text-align: center;\r
+}\r
+\r
+ul.column {\r
+       float: left;\r
+       list-style: none;\r
+       width: 675px;\r
+}\r
+\r
+ul.column li {\r
+       background: #eee;\r
+       -webkit-border-radius: 5px;\r
+       border-radius: 5px;\r
+       -webkit-box-shadow: inset 0 1px 1px 0 #c7c7c7;\r
+       box-shadow: inset 0 1px 1px 0 #c7c7c7;\r
+       float: left;\r
+       margin: 10px 0 0 10px;\r
+       display: block;\r
+       height: 150px;\r
+       text-align: center;\r
+       width: 215px;\r
+}\r
+\r
+/* Clear Floated Elements\r
+------------------------------------------------------------------------------*/\r
+.column:after,.button-collection:after,.clearfix:after,div.project-info:after\r
+       {\r
+       clear: both;\r
+       content: ' ';\r
+       display: block;\r
+       font-size: 0;\r
+       line-height: 0;\r
+       visibility: hidden;\r
+       width: 0;\r
+       height: 0;\r
+}\r
+\r
+.container-fluid {\r
+       background-color:white !important;\r
+       min-height:500px;\r
+}\r
+\r
+.nav-tabs {\r
+       border: 0;\r
+}\r
+\r
+.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus\r
+       {\r
+       border: 0;\r
+       border-top: 3px solid #F3565D;\r
+}\r
+\r
+.nav-tabs>li>a {\r
+       border-radius: 0;\r
+}\r
+\r
+.nav-tabs>li>a:hover {\r
+       background-color: #f1f3fa;\r
+       border: 1Px solid #f1f3fa;\r
+}\r
+\r
+.c3 {\r
+       margin-top: 120px;\r
+}\r
+\r
+.skills-chart-breadcrumb {\r
+       \r
+}\r
+\r
+.blue:selected {\r
+       border: 0;\r
+       background-color: #5b9bd1;\r
+}\r
+\r
+select {\r
+       border-width: 1px;\r
+       padding: 4px 1px;\r
+       border-radius: 4px;\r
+} \r
+\r
+.input-sm {\r
+       padding: 4px 10px;\r
+}\r
+\r
+.btn-block {\r
+       display: block;\r
+       width: 100%;\r
+       padding-left: 0;\r
+       padding-right: 0;\r
+}\r
+\r
+/* Bootstrap buttons */\r
+.btn-default {\r
+       color: #5b9bd1;\r
+       background-color: #fff;\r
+       border-color: #ccc;\r
+}\r
+\r
+.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active\r
+       {\r
+       color: #333;\r
+       background-color: #ededed;\r
+       border-color: #b3b3b3;\r
+}\r
+\r
+.open .btn-default.dropdown-toggle {\r
+       color: #333;\r
+       background-color: #ededed;\r
+       border-color: #b3b3b3;\r
+}\r
+\r
+.btn-default:active,.btn-default.active {\r
+       background-image: none;\r
+       background-color: #e0e0e0;\r
+       font-weight: bold;\r
+}\r
+\r
+.btn-default:active:hover,.btn-default.active:hover {\r
+       background-color: #e6e6e6;\r
+}\r
+\r
+.open .btn-default.dropdown-toggle {\r
+       background-image: none;\r
+}\r
+\r
+.btn-default.disabled,.btn-default.disabled:hover,.btn-default.disabled:focus,.btn-default.disabled:active,.btn-default.disabled.active,.btn-default[disabled],.btn-default[disabled]:hover,.btn-default[disabled]:focus,.btn-default[disabled]:active,.btn-default[disabled].active,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default:hover,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default.active\r
+       {\r
+       background-color: #fff;\r
+       border-color: #ccc;\r
+}\r
+\r
+.btn-default .badge {\r
+       color: #fff;\r
+       background-color: #333;\r
+}\r
+\r
+.btn-default>i {\r
+       color: #aaa;\r
+}\r
+\r
+.btn-default>i[class^="icon-"],.btn-default>i[class*="icon-"] {\r
+       color: #8c8c8c;\r
+}\r
+\r
+div[data-name="tab_zone"] div {\r
+       background-color: #f1f3fa;\r
+       padding: 0px;\r
+}\r
+\r
+div[data-name="cond_zone"] div {\r
+       background-color: #fff;\r
+       margin-top: 15px;\r
+       margin-bottom: 15px;\r
+}\r
+\r
+div[data-name="res-conds-zone"] {\r
+       display: inline;\r
+}\r
+\r
+div[data-name="res-conds-zone"] select,div[data-name="res-conds-zone"] span\r
+       {\r
+       /**height:33px;*/\r
+       margin-left: 15px;\r
+       color: #5b9bd1;\r
+       border-color: #ccc;\r
+       font-weight: bold;\r
+}\r
+\r
+.input{\r
+       width:250px;\r
+  height: 34px;\r
+  padding: 6px 12px;\r
+  font-size: 14px;\r
+  line-height: 1.42857143;\r
+  color: #555;\r
+  background-color: #fff;\r
+  background-image: none;\r
+  border: 1px solid #ccc;\r
+  border-radius: 4px;\r
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);\r
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);\r
+  -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;\r
+  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;\r
+}\r
+\r
+div.separator {\r
+       margin: 20px;\r
+}\r
+\r
+div.separator div {\r
+       text-align: center;\r
+       line-height: 0;\r
+}\r
+\r
+div.separator-line {\r
+       height: 1px !important;\r
+       width: 100%;\r
+       background: #ddd;\r
+       overflow: hidden;\r
+}\r
+\r
+.dropdown-toggle {\r
+       color: #5b9bd1;\r
+}\r
+\r
+.calendar-date {\r
+       color: #5b9bd1;\r
+}\r
+\r
+.range_inputs {\r
+       color: #5b9bd1;\r
+}\r
+\r
+.btn.dropdown-toggle,.btn-group .btn.dropdown-toggle,.btn:hover,.btn:disabled,.btn[disabled],.btn:focus,.btn:active,.btn.active\r
+       {\r
+       outline: none !important;\r
+       background-image: none !important;\r
+       filter: none;\r
+       -webkit-box-shadow: none;\r
+       -moz-box-shadow: none;\r
+       box-shadow: none;\r
+       text-shadow: none;\r
+}\r
+\r
+#skills-chart-breadcrumb {\r
+       margin-bottom: 10px\r
+}\r
+\r
+/*����daterangepicker��css*/\r
+input[name="daterange"] {\r
+       width: 220px;\r
+       line-height: 0;\r
+       height: 31px;\r
+       vertical-align: top;\r
+       margin-top: 2px;\r
+}\r
+\r
+.daterangepicker .ranges {\r
+       width: 205px;\r
+}\r
+\r
+.daterangepicker .ranges input {\r
+       width: 95px !important;\r
+}\r
+\r
+td.details-control {\r
+       background: url('../image/details_open.png') no-repeat center center;\r
+       cursor: pointer;\r
+}\r
+\r
+tr.shown td.details-control {\r
+       background: url('../image/details_close.png') no-repeat center center;\r
+}\r
+\r
+.details table td {\r
+       word-wrap: break-word;\r
+       word-break: normal;\r
+       border-top: 1px solid #dddddd;\r
+}\r
+\r
+.details table  tr:first-child td {\r
+       border-top: none;\r
+}\r
+\r
+.details table {\r
+       table-layout: fixed;\r
+       width: 100%;\r
+}\r
+\r
+td.title {\r
+       width: 10%;\r
+}\r
+\r
+table.dataTable tbody th,table.dataTable tbody td {\r
+       padding: 8px 10px;\r
+}\r
+\r
+div.dataTables_length,div.dataTables_info {\r
+       display: inline;\r
+}\r
+\r
+div.dataTables_paginate {\r
+       display: inline;\r
+       float: right;\r
+}\r
+\r
+div.pagination-panel {\r
+       margin-right: 10px;\r
+}\r
+\r
+input.pagination-panel-input {\r
+       width: 50px;\r
+}\r
+\r
+#ict_package_table_div {\r
+       margin-top: 15px;\r
+}\r
+\r
+#ict_package_table_div label {\r
+       font-weight: 100;\r
+}\r
+\r
+.daterangepicker .daterangepicker_start_input label,.daterangepicker .daterangepicker_end_input label\r
+       {\r
+       color: #5b9bd1;\r
+}\r
+\r
+.daterangepicker .ranges .input-mini {\r
+       color: #5b9bd1;\r
+}\r
+\r
+.cancelBtn {\r
+       padding: 5px 10px 5px 10px;\r
+}\r
+\r
+.btn:focus,.btn:active:focus,.btn.active:focus {\r
+       outline: 0;\r
+}\r
+\r
+#ict_package_table_div  table {\r
+       width: 100% !important;\r
+}\r
+\r
+.upload {\r
+       width:60%;\r
+       margin-top: 10px;\r
+}\r
+.myPreview {\r
+       height: 100px;\r
+}\r
+\r
+span.status:hover {\r
+       color: #2A69AC;\r
+       cursor: pointer;\r
+}\r
+\r
+.input-group .form-control {\r
+       height: 34px !important;\r
+}\r
+\r
+.input-group .btn {\r
+       font-size: 14px !important;\r
+}\r
+\r
+.package-drop-zone-title{\r
+       color:#aaa;\r
+       font-size:20px;\r
+       padding:15px 10px\r
+}\r
+\r
+#right-menu {\r
+       position:absolute;\r
+       top:0;\r
+       right:0;\r
+       width:420px;\r
+       height:100%;\r
+       border-left:4px solid rgb(58,174,218);\r
+       background-color:rgba(255,255,255,.95);\r
+       padding-left:19px;\r
+       padding-right:15px;\r
+       padding-top:20px;\r
+       z-index:9999;\r
+       overflow-y: auto;\r
+}\r
+\r
+#right-menu .btn{\r
+       min-width: 30px !important;\r
+       letter-spacing :normal !important;\r
+}\r
+\r
+.rigth {\r
+       float: right;\r
+}\r
+.right-button-pointer {\r
+       display:inline-block;\r
+       cursor:pointer\r
+}\r
+.floating-panel {\r
+       width:400px;\r
+       display:none\r
+}\r
+\r
+.packageDetail {\r
+       margin-top:15px;\r
+}\r
+\r
+.packageDetail label {\r
+       font-weight: 100;\r
+}\r
+\r
+.packageDetail table {\r
+       width:100%;\r
+       table-layout: fixed;\r
+       word-wrap:break-word;\r
+}
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/css/platform/animate.min.css b/openo-portal/portal-catalog/src/main/webapp/catalog/css/platform/animate.min.css
new file mode 100644 (file)
index 0000000..5fb2089
--- /dev/null
@@ -0,0 +1,21 @@
+/**
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)
+ *
+ * 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.
+ */
+@charset "UTF-8";/*!
+Animate.css - http://daneden.me/animate
+Licensed under the MIT license - http://opensource.org/licenses/MIT
+
+Copyright (c) 2014 Daniel Eden
+*/.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);-ms-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);-ms-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);-ms-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);-ms-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);-ms-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);-ms-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);-ms-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);-ms-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);-ms-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);-ms-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);-ms-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes tada{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;-ms-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);-ms-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);-ms-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);-ms-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);-ms-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);-ms-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);-ms-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);-ms-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);-ms-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);-ms-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);-ms-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);-ms-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);-ms-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);-ms-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);-ms-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);-ms-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);-ms-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);-ms-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);-ms-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);-ms-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);-ms-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);-ms-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);-ms-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);-ms-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);-ms-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);-ms-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);-ms-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);-ms-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);-ms-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);-ms-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);-ms-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);-ms-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0,0,1,45deg);transform:rotate(0,0,1,45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0,0,1,45deg);-ms-transform:rotate(0,0,1,45deg);transform:rotate(0,0,1,45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);-ms-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);-ms-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);-ms-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);-ms-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);-ms-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}@keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);-ms-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);-ms-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);-ms-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/css/platform/skill.css b/openo-portal/portal-catalog/src/main/webapp/catalog/css/platform/skill.css
new file mode 100644 (file)
index 0000000..4beeda7
--- /dev/null
@@ -0,0 +1,89 @@
+/**
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)
+ *
+ * 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.
+ */
+body {
+  font-family: 'Open Sans', sans-serif;  
+  background-color: #f1f3fa;
+  width: '100%';
+  height: '100%';
+  margin-top: 10px;
+}
+div.skills-sunburst{
+       font-size: 12px;
+       font-weight: 400;
+       text-align:center;
+}
+
+#skillmap .skills-wrapper {
+  margin-top: 10px;
+  overflow: auto;
+}
+#skillmap .skills-sunburst {
+  float: left;
+  width: 500px;
+  margin-left: -80px;
+}
+#skillmap .skills-sunburst svg {
+  font: 11px 'Source Sans Pro', sans-serif;
+  font-weight: 900;
+  
+  cursor: pointer;
+}
+#skillmap .skills-chart {
+  float: right;
+  font-family: 'Source Sans Pro', sans-serif;
+  font-size: 15px;
+  margin: 80px 20px 0 0;
+}
+#skillmap .skills-chart .breadcumb-text {
+  font-size: 13px;
+  font-weight: 700;
+}
+#skillmap .skills-chart #skills-chart-line {
+  fill: none;
+  stroke-width: 3.5px;
+}
+#skillmap .skills-chart .axis path,
+#skillmap .skills-chart .axis line {
+  fill: none;
+}
+#skillmap .skills-chart .x-axis path,
+#skillmap .skills-chart .y-axis path {
+  stroke: #444;
+  stroke-width: 1px;
+  shape-rendering: geometricPrecision;
+}
+
+#explanation {
+  position: absolute;
+  top: 165px;
+  left: 170px;
+  width: 140px;
+  text-align: center;
+  color: #666;
+  margin-top:30px;
+}
+
+#percentage {
+  font-size: 2em;
+}
+
+#endlabel{
+       font-sizte:1.5em;
+}
+
+div.skills-sunburst text{
+        text-anchor: middle;
+}
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/css/software.css b/openo-portal/portal-catalog/src/main/webapp/catalog/css/software.css
new file mode 100644 (file)
index 0000000..ea561ef
--- /dev/null
@@ -0,0 +1,423 @@
+/**
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)
+ *
+ * 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.
+ */
+body {
+       font-family: microsoft yahei !important;
+}
+
+/* blue pill (inspired by iTunes)
+*******************************************************************************/
+.redFont{
+       color:red;
+}
+.blue {
+
+       background-color: #5b9bd1;
+       border-radius: 20px;
+       color: #fff;
+       font-weight: bold;
+       padding: 8px 0;
+       text-align: center;
+       width: 100px;
+}
+
+.blue:hover {
+       background-color: #e8f3fd;
+       color: #5b9bd1;
+}
+
+.blue.selected {
+       border: 0;
+       background-color: #5b9bd1;
+       color: #fff;
+}
+
+.blue.selected:hover {
+       border: 0;
+       background-color: #5b9bd1;
+       color: #fff;
+}
+
+p {
+       color: #444;
+       font-size: 14px;
+       font-weight: normal;
+       line-height: 21px;
+       margin: 0 0 12px 0;
+}
+
+p.credit {
+       border-top: 1px solid #ccc;
+       font-size: 14px;
+       line-height: 140%;
+       margin: 36px 0 12px 0;
+       padding: 8px 0 0 0;
+       text-align: center;
+}
+
+ul.column {
+       float: left;
+       list-style: none;
+       width: 675px;
+}
+
+ul.column li {
+       background: #eee;
+       -webkit-border-radius: 5px;
+       border-radius: 5px;
+       -webkit-box-shadow: inset 0 1px 1px 0 #c7c7c7;
+       box-shadow: inset 0 1px 1px 0 #c7c7c7;
+       float: left;
+       margin: 10px 0 0 10px;
+       display: block;
+       height: 150px;
+       text-align: center;
+       width: 215px;
+}
+
+/* Clear Floated Elements
+------------------------------------------------------------------------------*/
+.column:after,.button-collection:after,.clearfix:after,div.project-info:after
+       {
+       clear: both;
+       content: ' ';
+       display: block;
+       font-size: 0;
+       line-height: 0;
+       visibility: hidden;
+       width: 0;
+       height: 0;
+}
+
+.container-fluid {
+       background-color:white !important;
+       min-height:500px;
+}
+
+.nav-tabs {
+       border: 0;
+}
+
+.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus
+       {
+       border: 0;
+       border-top: 3px solid #F3565D;
+}
+
+.nav-tabs>li>a {
+       border-radius: 0;
+}
+
+.nav-tabs>li>a:hover {
+       background-color: #f1f3fa;
+       border: 1Px solid #f1f3fa;
+}
+
+.c3 {
+       margin-top: 120px;
+}
+
+.skills-chart-breadcrumb {
+       
+}
+
+.blue:selected {
+       border: 0;
+       background-color: #5b9bd1;
+}
+
+.btn {
+       /* border-width: 0; */
+       /* padding: 7px 14px; */
+       /* font-size: 14px; */
+       /* outline: none !important; */
+       /* background-image: none !important; */
+       /* filter: none; */
+       /* -webkit-box-shadow: none; */
+       -moz-box-shadow: none;
+       /* box-shadow: none; */
+       /* text-shadow: none; */
+}
+
+select {
+       border-width: 1px;
+       padding: 4px 1px;
+       border-radius: 4px;
+} 
+
+.input-sm {
+       padding: 4px 10px;
+}
+
+.btn-block {
+       display: block;
+       width: 100%;
+       padding-left: 0;
+       padding-right: 0;
+}
+
+/* Bootstrap buttons */
+.btn-default {
+       color: #5b9bd1;
+       background-color: #fff;
+       border-color: #ccc;
+}
+
+.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active
+       {
+       color: #333;
+       background-color: #ededed;
+       border-color: #b3b3b3;
+}
+
+.open .btn-default.dropdown-toggle {
+       color: #333;
+       background-color: #ededed;
+       border-color: #b3b3b3;
+}
+
+.btn-default:active,.btn-default.active {
+       background-image: none;
+       background-color: #e0e0e0;
+       font-weight: bold;
+}
+
+.btn-default:active:hover,.btn-default.active:hover {
+       background-color: #e6e6e6;
+}
+
+.open .btn-default.dropdown-toggle {
+       background-image: none;
+}
+
+.btn-default.disabled,.btn-default.disabled:hover,.btn-default.disabled:focus,.btn-default.disabled:active,.btn-default.disabled.active,.btn-default[disabled],.btn-default[disabled]:hover,.btn-default[disabled]:focus,.btn-default[disabled]:active,.btn-default[disabled].active,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default:hover,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default.active
+       {
+       background-color: #fff;
+       border-color: #ccc;
+}
+
+.btn-default .badge {
+       color: #fff;
+       background-color: #333;
+}
+
+.btn-default>i {
+       color: #aaa;
+}
+
+.btn-default>i[class^="icon-"],.btn-default>i[class*="icon-"] {
+       color: #8c8c8c;
+}
+
+div[data-name="tab_zone"] div {
+       background-color: #f1f3fa;
+       padding: 0px;
+}
+
+div[data-name="cond_zone"] div {
+       background-color: #fff;
+       margin-top: 15px;
+       margin-bottom: 15px;
+}
+
+div[data-name="res-conds-zone"] {
+       display: inline;
+}
+
+div[data-name="res-conds-zone"] select,div[data-name="res-conds-zone"] span
+       {
+       /**height:33px;*/
+       margin-left: 15px;
+       color: #5b9bd1;
+       border-color: #ccc;
+       font-weight: bold;
+}
+
+.input{
+       width:250px;
+  height: 34px;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #555;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+}
+
+div.separator {
+       margin: 20px;
+}
+
+div.separator div {
+       text-align: center;
+       line-height: 0;
+}
+
+div.separator-line {
+       height: 1px !important;
+       width: 100%;
+       background: #ddd;
+       overflow: hidden;
+}
+
+.dropdown-toggle {
+       color: #5b9bd1;
+}
+
+.calendar-date {
+       color: #5b9bd1;
+}
+
+.range_inputs {
+       color: #5b9bd1;
+}
+
+.btn.dropdown-toggle,.btn-group .btn.dropdown-toggle,.btn:hover,.btn:disabled,.btn[disabled],.btn:focus,.btn:active,.btn.active
+       {
+       outline: none !important;
+       background-image: none !important;
+       filter: none;
+       -webkit-box-shadow: none;
+       -moz-box-shadow: none;
+       box-shadow: none;
+       text-shadow: none;
+}
+
+#skills-chart-breadcrumb {
+       margin-bottom: 10px
+}
+
+/*增加daterangepicker的css*/
+input[name="daterange"] {
+       width: 220px;
+       line-height: 0;
+       height: 31px;
+       vertical-align: top;
+       margin-top: 2px;
+}
+
+.daterangepicker .ranges {
+       width: 205px;
+}
+
+.daterangepicker .ranges input {
+       width: 95px !important;
+}
+
+td.details-control {
+       background: url('../image/details_open.png') no-repeat center center;
+       cursor: pointer;
+}
+
+tr.shown td.details-control {
+       background: url('../image/details_close.png') no-repeat center center;
+}
+
+.details table td {
+       word-wrap: break-word;
+       word-break: normal;
+       border-top: 1px solid #dddddd;
+}
+
+.details table  tr:first-child td {
+       border-top: none;
+}
+
+.details table {
+       table-layout: fixed;
+       width: 100%;
+}
+
+td.title {
+       width: 10%;
+}
+
+table.dataTable tbody th,table.dataTable tbody td {
+       padding: 8px 10px;
+}
+
+div.dataTables_length,div.dataTables_info {
+       display: inline;
+}
+
+div.dataTables_paginate {
+       display: inline;
+       float: right;
+}
+
+div.pagination-panel {
+       margin-right: 10px;
+}
+
+input.pagination-panel-input {
+       width: 50px;
+}
+
+.daterangepicker .daterangepicker_start_input label,.daterangepicker .daterangepicker_end_input label
+       {
+       color: #5b9bd1;
+}
+
+.daterangepicker .ranges .input-mini {
+       color: #5b9bd1;
+}
+
+.cancelBtn {
+       padding: 5px 10px 5px 10px;
+}
+
+.btn:focus,.btn:active:focus,.btn.active:focus {
+       outline: 0;
+}
+
+#ict_software_table_div {
+       margin-top: 10px;
+}
+
+#ict_software_table_div label {
+       font-weight: 100;
+}s
+
+#ict_software_table_div  table {
+       width: 100% !important;
+}
+
+.upload {
+       width:60%;
+}
+.myPreview {
+       height: 100px;
+}
+
+.uploadBtn {
+       margin-top:10px;
+}
+
+.file-input {
+    display: inline;   
+    overflow: hidden; 
+    word-break: break-all;
+    text-overflow: ellipsis;
+}
+
+.input-group .btn {
+       font-size: 14px !important;
+}
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/css/template.css b/openo-portal/portal-catalog/src/main/webapp/catalog/css/template.css
new file mode 100644 (file)
index 0000000..ba7a988
--- /dev/null
@@ -0,0 +1,405 @@
+/**
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)
+ *
+ * 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.
+ */
+body {
+       font-family: microsoft yahei !important;
+}
+
+/* blue pill (inspired by iTunes)
+*******************************************************************************/
+.redFont{
+       color:red;
+}
+.blue {
+
+       background-color: #5b9bd1;
+       border-radius: 20px;
+       color: #fff;
+       font-weight: bold;
+       padding: 8px 0;
+       text-align: center;
+       width: 100px;
+}
+
+.blue:hover {
+       background-color: #e8f3fd;
+       color: #5b9bd1;
+}
+
+.blue.selected {
+       border: 0;
+       background-color: #5b9bd1;
+       color: #fff;
+}
+
+.blue.selected:hover {
+       border: 0;
+       background-color: #5b9bd1;
+       color: #fff;
+}
+
+a {
+       text-decoration: none !important;
+}
+
+p {
+       color: #444;
+       font-size: 14px;
+       font-weight: normal;
+       line-height: 21px;
+       margin: 0 0 12px 0;
+}
+
+p.credit {
+       border-top: 1px solid #ccc;
+       font-size: 14px;
+       line-height: 140%;
+       margin: 36px 0 12px 0;
+       padding: 8px 0 0 0;
+       text-align: center;
+}
+
+ul.column {
+       float: left;
+       list-style: none;
+       width: 675px;
+}
+
+ul.column li {
+       background: #eee;
+       -webkit-border-radius: 5px;
+       border-radius: 5px;
+       -webkit-box-shadow: inset 0 1px 1px 0 #c7c7c7;
+       box-shadow: inset 0 1px 1px 0 #c7c7c7;
+       float: left;
+       margin: 10px 0 0 10px;
+       display: block;
+       height: 150px;
+       text-align: center;
+       width: 215px;
+}
+
+/* Clear Floated Elements
+------------------------------------------------------------------------------*/
+.column:after,.button-collection:after,.clearfix:after,div.project-info:after
+       {
+       clear: both;
+       content: ' ';
+       display: block;
+       font-size: 0;
+       line-height: 0;
+       visibility: hidden;
+       width: 0;
+       height: 0;
+}
+
+.container-fluid {
+       background-color:white !important;
+       min-height:500px;
+}
+
+.nav-tabs {
+       border: 0;
+}
+
+.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus
+       {
+       border: 0;
+       border-top: 3px solid #F3565D;
+}
+
+.nav-tabs>li>a {
+       border-radius: 0;
+}
+
+.nav-tabs>li>a:hover {
+       background-color: #f1f3fa;
+       border: 1Px solid #f1f3fa;
+}
+
+.c3 {
+       margin-top: 120px;
+}
+
+.skills-chart-breadcrumb {
+       
+}
+
+.blue:selected {
+       border: 0;
+       background-color: #5b9bd1;
+}
+
+.btn {
+       /* border-width: 0; */
+       /* padding: 7px 14px; */
+       /* font-size: 14px; */
+       /* outline: none !important; */
+       /* background-image: none !important; */
+       /* filter: none; */
+       /* -webkit-box-shadow: none; */
+       -moz-box-shadow: none;
+       /* box-shadow: none; */
+       /* text-shadow: none; */
+}
+
+select {
+       border-width: 1px;
+       padding: 4px 1px;
+       border-radius: 4px;
+} 
+
+.input-sm {
+       padding: 4px 10px;
+}
+
+.btn-block {
+       display: block;
+       width: 100%;
+       padding-left: 0;
+       padding-right: 0;
+}
+
+/* Bootstrap buttons */
+.btn-default {
+       color: #5b9bd1;
+       background-color: #fff;
+       border-color: #ccc;
+}
+
+.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active
+       {
+       color: #333;
+       background-color: #ededed;
+       border-color: #b3b3b3;
+}
+
+.open .btn-default.dropdown-toggle {
+       color: #333;
+       background-color: #ededed;
+       border-color: #b3b3b3;
+}
+
+.btn-default:active,.btn-default.active {
+       background-image: none;
+       background-color: #e0e0e0;
+       font-weight: bold;
+}
+
+.btn-default:active:hover,.btn-default.active:hover {
+       background-color: #e6e6e6;
+}
+
+.open .btn-default.dropdown-toggle {
+       background-image: none;
+}
+
+.btn-default.disabled,.btn-default.disabled:hover,.btn-default.disabled:focus,.btn-default.disabled:active,.btn-default.disabled.active,.btn-default[disabled],.btn-default[disabled]:hover,.btn-default[disabled]:focus,.btn-default[disabled]:active,.btn-default[disabled].active,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default:hover,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default.active
+       {
+       background-color: #fff;
+       border-color: #ccc;
+}
+
+.btn-default .badge {
+       color: #fff;
+       background-color: #333;
+}
+
+.btn-default>i {
+       color: #aaa;
+}
+
+.btn-default>i[class^="icon-"],.btn-default>i[class*="icon-"] {
+       color: #8c8c8c;
+}
+
+div[data-name="tab_zone"] div {
+       background-color: #f1f3fa;
+       padding: 0px;
+}
+
+div[data-name="cond_zone"] div {
+       background-color: #fff;
+       margin-top: 15px;
+       margin-bottom: 15px;
+}
+
+div[data-name="res-conds-zone"] {
+       display: inline;
+}
+
+div[data-name="res-conds-zone"] select,div[data-name="res-conds-zone"] span
+       {
+       /**height:33px;*/
+       margin-left: 15px;
+       color: #5b9bd1;
+       border-color: #ccc;
+       font-weight: bold;
+}
+
+.input{
+       width:250px;
+  height: 34px;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #555;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+}
+
+div.separator {
+       margin: 20px;
+}
+
+div.separator div {
+       text-align: center;
+       line-height: 0;
+}
+
+div.separator-line {
+       height: 1px !important;
+       width: 100%;
+       background: #ddd;
+       overflow: hidden;
+}
+
+.dropdown-toggle {
+       color: #5b9bd1;
+}
+
+.calendar-date {
+       color: #5b9bd1;
+}
+
+.range_inputs {
+       color: #5b9bd1;
+}
+
+.btn.dropdown-toggle,.btn-group .btn.dropdown-toggle,.btn:hover,.btn:disabled,.btn[disabled],.btn:focus,.btn:active,.btn.active
+       {
+       outline: none !important;
+       background-image: none !important;
+       filter: none;
+       -webkit-box-shadow: none;
+       -moz-box-shadow: none;
+       box-shadow: none;
+       text-shadow: none;
+}
+
+#skills-chart-breadcrumb {
+       margin-bottom: 10px
+}
+
+/*����daterangepicker��css*/
+input[name="daterange"] {
+       width: 220px;
+       line-height: 0;
+       height: 31px;
+       vertical-align: top;
+       margin-top: 2px;
+}
+
+.daterangepicker .ranges {
+       width: 205px;
+}
+
+.daterangepicker .ranges input {
+       width: 95px !important;
+}
+
+td.details-control {
+       background: url('../image/details_open.png') no-repeat center center;
+       cursor: pointer;
+}
+
+tr.shown td.details-control {
+       background: url('../image/details_close.png') no-repeat center center;
+}
+
+.details table td {
+       word-wrap: break-word;
+       word-break: normal;
+       border-top: 1px solid #dddddd;
+}
+
+.details table  tr:first-child td {
+       border-top: none;
+}
+
+.details table {
+       table-layout: fixed;
+       width: 100%;
+}
+
+td.title {
+       width: 10%;
+}
+
+table.dataTable tbody th,table.dataTable tbody td {
+       padding: 8px 10px;
+}
+
+div.dataTables_length,div.dataTables_info {
+       display: inline;
+}
+
+div.dataTables_paginate {
+       display: inline;
+       float: right;
+}
+
+div.pagination-panel {
+       margin-right: 10px;
+}
+
+input.pagination-panel-input {
+       width: 50px;
+}
+
+#ict_template_table_div {
+       margin-top: 15px;
+}
+
+#ict_template_table_div label {
+       font-weight: 100;
+}
+
+.daterangepicker .daterangepicker_start_input label,.daterangepicker .daterangepicker_end_input label
+       {
+       color: #5b9bd1;
+}
+
+.daterangepicker .ranges .input-mini {
+       color: #5b9bd1;
+}
+
+.cancelBtn {
+       padding: 5px 10px 5px 10px;
+}
+
+.btn:focus,.btn:active:focus,.btn.active:focus {
+       outline: 0;
+}
+
+#ict_template_table_div  table {
+       width: 100% !important;
+}
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/css/templateDetail.css b/openo-portal/portal-catalog/src/main/webapp/catalog/css/templateDetail.css
new file mode 100644 (file)
index 0000000..bc048e6
--- /dev/null
@@ -0,0 +1,480 @@
+/**\r
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ *         http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ */\r
+body {\r
+       font-family: microsoft yahei !important;\r
+}\r
+\r
+/* blue pill (inspired by iTunes)\r
+*******************************************************************************/\r
+.redFont{\r
+       color:red;\r
+}\r
+.blue {\r
+\r
+       background-color: #5b9bd1;\r
+       border-radius: 20px;\r
+       color: #fff;\r
+       font-weight: bold;\r
+       padding: 8px 0;\r
+       text-align: center;\r
+       width: 100px;\r
+}\r
+\r
+.blue:hover {\r
+       background-color: #e8f3fd;\r
+       color: #5b9bd1;\r
+}\r
+\r
+.blue.selected {\r
+       border: 0;\r
+       background-color: #5b9bd1;\r
+       color: #fff;\r
+}\r
+\r
+.blue.selected:hover {\r
+       border: 0;\r
+       background-color: #5b9bd1;\r
+       color: #fff;\r
+}\r
+\r
+a {\r
+       text-decoration: none !important;\r
+}\r
+\r
+p {\r
+       color: #444;\r
+       font-size: 14px;\r
+       font-weight: normal;\r
+       line-height: 21px;\r
+       margin: 0 0 12px 0;\r
+}\r
+\r
+p.credit {\r
+       border-top: 1px solid #ccc;\r
+       font-size: 14px;\r
+       line-height: 140%;\r
+       margin: 36px 0 12px 0;\r
+       padding: 8px 0 0 0;\r
+       text-align: center;\r
+}\r
+\r
+ul.column {\r
+       float: left;\r
+       list-style: none;\r
+       width: 675px;\r
+}\r
+\r
+ul.column li {\r
+       background: #eee;\r
+       -webkit-border-radius: 5px;\r
+       border-radius: 5px;\r
+       -webkit-box-shadow: inset 0 1px 1px 0 #c7c7c7;\r
+       box-shadow: inset 0 1px 1px 0 #c7c7c7;\r
+       float: left;\r
+       margin: 10px 0 0 10px;\r
+       display: block;\r
+       height: 150px;\r
+       text-align: center;\r
+       width: 215px;\r
+}\r
+\r
+/* Clear Floated Elements\r
+------------------------------------------------------------------------------*/\r
+.column:after,.button-collection:after,.clearfix:after,div.project-info:after\r
+       {\r
+       clear: both;\r
+       content: ' ';\r
+       display: block;\r
+       font-size: 0;\r
+       line-height: 0;\r
+       visibility: hidden;\r
+       width: 0;\r
+       height: 0;\r
+}\r
+\r
+.container-fluid {\r
+       background-color:white !important;\r
+       min-height:800px;\r
+}\r
+\r
+.nav-tabs {\r
+       border: 0;\r
+}\r
+\r
+.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus\r
+       {\r
+       border: 0;\r
+       border-top: 3px solid #F3565D;\r
+}\r
+\r
+.nav-tabs>li>a {\r
+       border-radius: 0;\r
+}\r
+\r
+.nav-tabs>li>a:hover {\r
+       background-color: #f1f3fa;\r
+       border: 1Px solid #f1f3fa;\r
+}\r
+\r
+.c3 {\r
+       margin-top: 120px;\r
+}\r
+\r
+.skills-chart-breadcrumb {\r
+       \r
+}\r
+\r
+.blue:selected {\r
+       border: 0;\r
+       background-color: #5b9bd1;\r
+}\r
+\r
+.btn {\r
+       /* border-width: 0; */\r
+       /* padding: 7px 14px; */\r
+       /* font-size: 14px; */\r
+       /* outline: none !important; */\r
+       /* background-image: none !important; */\r
+       /* filter: none; */\r
+       /* -webkit-box-shadow: none; */\r
+       -moz-box-shadow: none;\r
+       /* box-shadow: none; */\r
+       /* text-shadow: none; */\r
+}\r
+\r
+select {\r
+       border-width: 1px;\r
+       padding: 4px 1px;\r
+       border-radius: 4px;\r
+}\r
+\r
+.input-sm {\r
+       padding: 4px 10px;\r
+}\r
+\r
+.btn-block {\r
+       display: block;\r
+       width: 100%;\r
+       padding-left: 0;\r
+       padding-right: 0;\r
+}\r
+\r
+/* Bootstrap buttons */\r
+.btn-default {\r
+       color: #5b9bd1;\r
+       background-color: #fff;\r
+       border-color: #ccc;\r
+}\r
+\r
+.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active\r
+       {\r
+       color: #333;\r
+       background-color: #ededed;\r
+       border-color: #b3b3b3;\r
+}\r
+\r
+.open .btn-default.dropdown-toggle {\r
+       color: #333;\r
+       background-color: #ededed;\r
+       border-color: #b3b3b3;\r
+}\r
+\r
+.btn-default:active,.btn-default.active {\r
+       background-image: none;\r
+       background-color: #e0e0e0;\r
+       font-weight: bold;\r
+}\r
+\r
+.btn-default:active:hover,.btn-default.active:hover {\r
+       background-color: #e6e6e6;\r
+}\r
+\r
+.open .btn-default.dropdown-toggle {\r
+       background-image: none;\r
+}\r
+\r
+.btn-default.disabled,.btn-default.disabled:hover,.btn-default.disabled:focus,.btn-default.disabled:active,.btn-default.disabled.active,.btn-default[disabled],.btn-default[disabled]:hover,.btn-default[disabled]:focus,.btn-default[disabled]:active,.btn-default[disabled].active,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default:hover,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default.active\r
+       {\r
+       background-color: #fff;\r
+       border-color: #ccc;\r
+}\r
+\r
+.btn-default .badge {\r
+       color: #fff;\r
+       background-color: #333;\r
+}\r
+\r
+.btn-default>i {\r
+       color: #aaa;\r
+}\r
+\r
+.btn-default>i[class^="icon-"],.btn-default>i[class*="icon-"] {\r
+       color: #8c8c8c;\r
+}\r
+\r
+div[data-name="tab_zone"] div {\r
+       background-color: #f1f3fa;\r
+       padding: 0px;\r
+}\r
+\r
+div[data-name="cond_zone"] div {\r
+       background-color: #fff;\r
+       margin-top: 15px;\r
+       margin-bottom: 15px;\r
+}\r
+\r
+div[data-name="detail-conds-zone"] {\r
+       display: inline;\r
+}\r
+\r
+div[data-name="detail-conds-zone"] select,div[data-name="detail-conds-zone"] span\r
+       {\r
+       /**height:33px;*/\r
+       margin-left: 15px;\r
+       color: #5b9bd1;\r
+       border-color: #ccc;\r
+       font-weight: bold;\r
+}\r
+\r
+.input{\r
+       width:250px;\r
+  height: 34px;\r
+  padding: 6px 12px;\r
+  font-size: 14px;\r
+  line-height: 1.42857143;\r
+  color: #555;\r
+  background-color: #fff;\r
+  background-image: none;\r
+  border: 1px solid #ccc;\r
+  border-radius: 4px;\r
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);\r
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);\r
+  -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;\r
+  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;\r
+}\r
+\r
+div.separator {\r
+       margin: 20px;\r
+}\r
+\r
+div.separator div {\r
+       text-align: center;\r
+       line-height: 0;\r
+}\r
+\r
+div.separator-line {\r
+       height: 1px !important;\r
+       width: 100%;\r
+       background: #ddd;\r
+       overflow: hidden;\r
+}\r
+\r
+.dropdown-toggle {\r
+       color: #5b9bd1;\r
+}\r
+\r
+.calendar-date {\r
+       color: #5b9bd1;\r
+}\r
+\r
+.range_inputs {\r
+       color: #5b9bd1;\r
+}\r
+\r
+.btn.dropdown-toggle,.btn-group .btn.dropdown-toggle,.btn:hover,.btn:disabled,.btn[disabled],.btn:focus,.btn:active,.btn.active\r
+       {\r
+       outline: none !important;\r
+       background-image: none !important;\r
+       filter: none;\r
+       -webkit-box-shadow: none;\r
+       -moz-box-shadow: none;\r
+       box-shadow: none;\r
+       text-shadow: none;\r
+}\r
+\r
+#skills-chart-breadcrumb {\r
+       margin-bottom: 10px\r
+}\r
+\r
+/*����daterangepicker��css*/\r
+input[name="daterange"] {\r
+       width: 220px;\r
+       line-height: 0;\r
+       height: 31px;\r
+       vertical-align: top;\r
+       margin-top: 2px;\r
+}\r
+\r
+.daterangepicker .ranges {\r
+       width: 205px;\r
+}\r
+\r
+.daterangepicker .ranges input {\r
+       width: 95px !important;\r
+}\r
+\r
+td.details-control {\r
+       background: url('../image/details_open.png') no-repeat center center;\r
+       cursor: pointer;\r
+}\r
+\r
+tr.shown td.details-control {\r
+       background: url('../image/details_close.png') no-repeat center center;\r
+}\r
+\r
+.details table td {\r
+       word-wrap: break-word;\r
+       word-break: normal;\r
+       border-top: 1px solid #dddddd;\r
+}\r
+\r
+.details table  tr:first-child td {\r
+       border-top: none;\r
+}\r
+\r
+.details table {\r
+       table-layout: fixed;\r
+       width: 100%;\r
+}\r
+\r
+td.title {\r
+       width: 10%;\r
+}\r
+\r
+table.dataTable tbody th,table.dataTable tbody td {\r
+       padding: 8px 10px;\r
+}\r
+\r
+div.dataTables_length,div.dataTables_info {\r
+       display: inline;\r
+}\r
+\r
+div.dataTables_paginate {\r
+       display: inline;\r
+       float: right;\r
+}\r
+\r
+div.pagination-panel {\r
+       margin-right: 10px;\r
+}\r
+\r
+input.pagination-panel-input {\r
+       width: 50px;\r
+}\r
+\r
+.daterangepicker .daterangepicker_start_input label,.daterangepicker .daterangepicker_end_input label\r
+       {\r
+       color: #5b9bd1;\r
+}\r
+\r
+.daterangepicker .ranges .input-mini {\r
+       color: #5b9bd1;\r
+}\r
+\r
+.cancelBtn {\r
+       padding: 5px 10px 5px 10px;\r
+}\r
+\r
+.btn:focus,.btn:active:focus,.btn.active:focus {\r
+       outline: 0;\r
+}\r
+\r
+#right-menu {\r
+       position:absolute;\r
+       top:0;\r
+       right:0;\r
+       width:420px;\r
+       height:100%;\r
+       border-left:4px solid rgb(58,174,218);\r
+       background-color:rgba(255,255,255,.95);\r
+       padding-left:19px;\r
+       padding-right:15px;\r
+       padding-top:20px;\r
+       z-index:9999;\r
+       overflow-y: auto;\r
+}\r
+\r
+#right-menu .btn{\r
+       min-width: 30px !important;\r
+       letter-spacing :normal !important;\r
+}\r
+\r
+.rigth {\r
+       float: right;\r
+}\r
+.right-button-pointer {\r
+       display:inline-block;\r
+       cursor:pointer\r
+}\r
+.floating-panel {\r
+       width:400px;\r
+       display:none\r
+}\r
+\r
+title{height:25px;position:relative;top:20px;font-size:15px}\r
+\r
+#ict_nodes_table_div {\r
+       margin-top: 15px;\r
+}\r
+\r
+#ict_nodes_table_div label {\r
+       font-weight: 100;\r
+}\r
+\r
+#ict_nodes_table_div  table {\r
+       width: 100% !important;\r
+}\r
+\r
+.nodesDetail {\r
+       margin-top: 15px;\r
+}\r
+\r
+.nodesDetail label {\r
+       font-weight: 100;\r
+}\r
+\r
+.nodesDetail table {\r
+       width:100%;\r
+       table-layout: fixed;\r
+       word-wrap:break-word;\r
+}\r
+\r
+.step {\r
+       text-align: center;\r
+       padding-top: 60px;\r
+}\r
+\r
+.step div {\r
+       text-align: left;\r
+}\r
+\r
+div.separator-sline {\r
+       height:28px ;\r
+       width:3px;\r
+}\r
+\r
+.titlefont {\r
+       font-size:16px;\r
+}\r
+\r
+.td_nodeId {\r
+       font-size: small;\r
+}\r
+\r
+.iconBtn {\r
+       margin-left:15px;\r
+       min-width:30px;\r
+}
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/css/topology.css b/openo-portal/portal-catalog/src/main/webapp/catalog/css/topology.css
new file mode 100644 (file)
index 0000000..a4e1d3d
--- /dev/null
@@ -0,0 +1,393 @@
+/**\r
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ *         http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ */\r
+.container-fluid {\r
+  background-color: #fff;\r
+  padding: 0;\r
+}\r
+\r
+\r
+div[data-name="topo_zone"]  {\r
+  background-color: #fff;\r
+  margin-top: 15px;\r
+  margin-bottom: 15px;\r
+}\r
+\r
+p[tooltip], div[tooltip], td {\r
+  overflow: hidden;\r
+  text-overflow: ellipsis;\r
+}\r
+\r
+\r
+\r
+.bpContainer {\r
+  position: relative;\r
+  display: block;\r
+  height: 100%;\r
+  padding: 40px;\r
+}\r
+\r
+\r
+.box {\r
+  position: relative;\r
+  display: inline-block;\r
+  min-width: 260px;\r
+  min-height: 170px;\r
+  border-width: 2px;\r
+  border-color: #136e9d;\r
+  border-style: solid;\r
+  background-color: #fff;\r
+  vertical-align: top;\r
+  padding: 2px;\r
+  border-radius: 6px;\r
+  margin: 0 60px 40px 0;\r
+}\r
+\r
+\r
+.box .piProgress, .line .piProgress {\r
+  position: absolute;\r
+  top: -12px;\r
+  left: -27px;\r
+  z-index: 1;\r
+}\r
+/* .piProgress {\r
+  position: relative;\r
+  display: inline-block;\r
+} */\r
+.box .piProgress .circle, .line .piProgress .circle {\r
+  background: #136e9d;\r
+  border: 2px solid #d3dfe2;\r
+  width: 43px; \r
+  height: 43px; \r
+  top: 5.5px; \r
+  left: 5.5px;\r
+  border-radius: 21px; \r
+  font-size: 14px;\r
+}\r
+.box .piProgress .smallCircle {\r
+  background: #136e9d;\r
+  border: 2px solid #d3dfe2;\r
+  width: 30px; \r
+  height: 30px;\r
+  left: 11px;\r
+  border-radius: 21px; \r
+  font-size: 12px;\r
+  cursor: pointer;\r
+}\r
+.piProgress .circle, .piProgress .smallCircle {\r
+  position: absolute;\r
+  display: box;\r
+  box-pack: center;\r
+  box-align: center;\r
+  background-color: #46b8da;\r
+  color: #fff;\r
+  font-size: 100%;\r
+  z-index: 3;\r
+}\r
+\r
+.bpContainer i.gs-node-icon {\r
+  position: absolute;\r
+  top: 10px;\r
+  left: 9px;\r
+  font-size: 23px;\r
+}\r
+\r
+.bpContainer i.gs-cp-icon {\r
+  position: absolute;\r
+  top: 5px;\r
+  left: 5px;\r
+  font-size: 15px;\r
+}\r
+\r
+.bpContainer .box .head, .bpContainer .line .head {\r
+  display: block;\r
+  background-color: #136e9d;\r
+  color: #fff;\r
+  padding: 2px 10px 3px 25px;\r
+  border-radius: 3px;\r
+  font-size: 20px;\r
+  height: 35px;\r
+}\r
+\r
+.bpContainer .box .holder {\r
+  display: block;\r
+  padding: 5px 25px;\r
+  margin-top: 1px;\r
+  background-color: #fff;\r
+}\r
+\r
+.bpContainer .box .nest {\r
+  min-height:130px;\r
+  cursor:pointer;\r
+}\r
+\r
+.bpContainer .box .nest .plus {\r
+  position: absolute;\r
+  bottom:0;\r
+  right:5px;\r
+}\r
+\r
+.bpContainer .box .boxHover~div {\r
+ background-color:#eaf1f7;\r
+}\r
+\r
+.bpContainer .boxHover{ \r
+  cursor:pointer;\r
+}\r
+\r
+.bpContainer .box .box .appHover{ \r
+  cursor:pointer;\r
+}\r
+\r
+\r
+.bpContainer .box .box .appHover p {\r
+ background-color:#eaf1f7;\r
+}\r
+\r
+.bpContainer .box .box {\r
+  border-color: #3aaeda;\r
+  min-width: 170px;\r
+  margin: 15px;\r
+}\r
+\r
+.bpContainer .box .box .head {\r
+  background-color: #3aaeda;\r
+}\r
+\r
+.bpContainer .box .box .piProgress .circle {\r
+  background-color: #3aaeda;\r
+}\r
+\r
+.bpContainer .box .box .holder {\r
+  text-align: center;\r
+  background-color: #fff;\r
+  min-height: 126px;\r
+}\r
+\r
+.bpContainer .box .box .boxHover~div {\r
+ background-color:#eaf1f7;\r
+}\r
+\r
+.bpContainer .app {\r
+  position: relative;\r
+  display: inline-block;\r
+  width: 47px;\r
+  height: 47px;\r
+  text-align: center;\r
+  border-radius: 3px;\r
+  margin: 10px 0;\r
+}\r
+\r
+.bpContainer .app .piProgress {\r
+  top: 0;\r
+  left: -6px;\r
+}\r
+\r
+.bpContainer .box .box .piProgress .circle{\r
+  background-color: #3aaeda;\r
+}\r
+\r
+.bpContainer .app p {\r
+  position: relative;\r
+  top: 50px;\r
+  margin: 0;\r
+  color: #555869;\r
+  text-align: center;\r
+  font-size: 15px;\r
+}\r
+\r
+\r
+ .coordinates {\r
+  position: absolute;\r
+  top: 0;\r
+  left: 0;\r
+  width: 100%;\r
+  height: 100%;\r
+  pointer-events: none;\r
+}\r
+\r
+.bpContainer .box .piProgress .circle>.badge, .bpContainer .line .piProgress .circle>.badge {\r
+  position:absolute;\r
+  display:inline-block;\r
+  z-index:1;\r
+  top:-8px;\r
+  left:20px;\r
+  min-width:20px;\r
+  border-radius:10px;\r
+  padding:3px!important;\r
+  vertical-align:baseline;\r
+  white-space:nowrap;\r
+  text-align:center;\r
+  background-color:#2f3334;\r
+  text-decoration:none;\r
+  font-size:14px;\r
+  color:#fff;\r
+  line-height:15px;\r
+  font-style:normal;\r
+  font-weight:400;\r
+  opacity:1\r
+}\r
+\r
+.header {\r
+  border-top:2px solid #4b6b8b;\r
+  background-color:#e8edf2;\r
+  height:40px;\r
+  padding:5px 20px\r
+}\r
+\r
+.header .title {\r
+  display:inline-block;\r
+  font-size:18px;\r
+  color:#29AAEE;\r
+  line-height:28px\r
+}\r
+\r
+.containList {\r
+  overflow-y:scroll;\r
+}\r
+\r
+div.separator-icon {\r
+  text-align: center;\r
+  line-height: 0\r
+}\r
+\r
+.networksContainer{\r
+  white-space:nowrap;\r
+  margin:40px 0 0 20px;\r
+  height:100%\r
+}\r
+\r
+.networksContainer .network{\r
+  position: relative;\r
+  display:inline-block;\r
+  text-align:center;\r
+  min-width:70px;\r
+  margin:0 10px 0 0\r
+}\r
+\r
+.networksContainer .subnet{\r
+  display:inline-block;\r
+  text-align:center;\r
+  min-width:70px;\r
+  margin:0 10px 0 0\r
+}\r
+\r
+.networksContainer .subnet .line{\r
+  position:relative;\r
+  display:inline-block;\r
+  vertical-align:top\r
+}\r
+\r
+.networksContainer .name {\r
+  display:block;\r
+  width:100%;\r
+  background-color:#797B86;\r
+  color:#fff;\r
+  padding:2px 6px;\r
+  border-radius:5px;\r
+  text-align:center;\r
+  margin:0 0 10px;\r
+  overflow:hidden;\r
+  cursor: pointer;\r
+  text-overflow:ellipsis\r
+}\r
+\r
+.networksContainer .network .name>.badge {\r
+  position:absolute;\r
+  display:inline-block;\r
+  z-index:1;\r
+  top:-9px;\r
+  right:-9px;\r
+  min-width:20px;\r
+  border-radius:10px;\r
+  padding:3px!important;\r
+  vertical-align:baseline;\r
+  white-space:nowrap;\r
+  text-align:center;\r
+  background-color:#2f3334;\r
+  text-decoration:none;\r
+  font-size:14px;\r
+  color:#fff;\r
+  line-height:15px;\r
+  font-style:normal;\r
+  font-weight:400;\r
+  opacity:1\r
+}\r
+\r
+.networksContainer .subnet .line .vlan{\r
+  position:relative;\r
+  display:inline-block;\r
+  width:21px;\r
+  height:500px;\r
+  background-color:#149bdf;\r
+  color:#fff;\r
+  border-radius:5px;\r
+  vertical-align:top;\r
+  margin:0 10px 0 0;\r
+  cursor:pointer\r
+}\r
+\r
+.networksContainer .subnet .vlan .badge {\r
+  position:absolute;\r
+  display:inline-block;\r
+  z-index:1;\r
+  top:-8px;\r
+  left:10px;\r
+  min-width:20px;\r
+  border-radius:10px;\r
+  padding:3px!important;\r
+  vertical-align:baseline;\r
+  white-space:nowrap;\r
+  text-align:center;\r
+  background-color:#2f3334;\r
+  text-decoration:none;\r
+  font-size:14px;\r
+  color:#fff;\r
+  line-height:15px;\r
+  font-style:normal;\r
+  font-weight:400;\r
+  opacity:1\r
+}\r
+\r
+.networksContainer .subnet .line .vlan:last-child{\r
+  margin:0\r
+}\r
+\r
+.networksContainer .subnet .line .vlan>p{\r
+  position:absolute;\r
+  display:block;\r
+  transform:rotate(90deg);\r
+  -ms-transform:rotate(90deg);\r
+  -webkit-transform:rotate(90deg);\r
+  white-space:nowrap;\r
+  color:#fff;\r
+  top:5px;\r
+  right:0;\r
+  left:1px\r
+}\r
+\r
+.networksContainer .subnet .line .vlan>p.cidr{\r
+  width:200px;\r
+  top:auto;\r
+  left:-90px;\r
+  bottom:85px;\r
+  color:#fff;\r
+  text-align:right\r
+}\r
+\r
+.topoZone {\r
+  display: inline-block;\r
+  float: left;\r
+}
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/css/virtualApplication.css b/openo-portal/portal-catalog/src/main/webapp/catalog/css/virtualApplication.css
new file mode 100644 (file)
index 0000000..38ae620
--- /dev/null
@@ -0,0 +1,502 @@
+/**\r
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ *         http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ */\r
+body {\r
+       font-family: microsoft yahei !important;\r
+}\r
+\r
+/* blue pill (inspired by iTunes)\r
+*******************************************************************************/\r
+.redFont{\r
+       color:red;\r
+}\r
+.blue {\r
+\r
+       background-color: #5b9bd1;\r
+       border-radius: 20px;\r
+       color: #fff;\r
+       font-weight: bold;\r
+       padding: 8px 0;\r
+       text-align: center;\r
+       width: 100px;\r
+}\r
+\r
+.blue:hover {\r
+       background-color: #e8f3fd;\r
+       color: #5b9bd1;\r
+}\r
+\r
+.blue.selected {\r
+       border: 0;\r
+       background-color: #5b9bd1;\r
+       color: #fff;\r
+}\r
+\r
+.blue.selected:hover {\r
+       border: 0;\r
+       background-color: #5b9bd1;\r
+       color: #fff;\r
+}\r
+\r
+a {\r
+       text-decoration: none !important;\r
+}\r
+\r
+p {\r
+       color: #444;\r
+       font-size: 14px;\r
+       font-weight: normal;\r
+       line-height: 21px;\r
+       margin: 0 0 12px 0;\r
+}\r
+\r
+p.credit {\r
+       border-top: 1px solid #ccc;\r
+       font-size: 14px;\r
+       line-height: 140%;\r
+       margin: 36px 0 12px 0;\r
+       padding: 8px 0 0 0;\r
+       text-align: center;\r
+}\r
+\r
+ul.column {\r
+       float: left;\r
+       list-style: none;\r
+       width: 675px;\r
+}\r
+\r
+ul.column li {\r
+       background: #eee;\r
+       -webkit-border-radius: 5px;\r
+       border-radius: 5px;\r
+       -webkit-box-shadow: inset 0 1px 1px 0 #c7c7c7;\r
+       box-shadow: inset 0 1px 1px 0 #c7c7c7;\r
+       float: left;\r
+       margin: 10px 0 0 10px;\r
+       display: block;\r
+       height: 150px;\r
+       text-align: center;\r
+       width: 215px;\r
+}\r
+\r
+/* Clear Floated Elements\r
+------------------------------------------------------------------------------*/\r
+.column:after,.button-collection:after,.clearfix:after,div.project-info:after\r
+       {\r
+       clear: both;\r
+       content: ' ';\r
+       display: block;\r
+       font-size: 0;\r
+       line-height: 0;\r
+       visibility: hidden;\r
+       width: 0;\r
+       height: 0;\r
+}\r
+\r
+.container-fluid {\r
+       background-color:white !important;\r
+       min-height:500px;\r
+}\r
+\r
+.nav-tabs {\r
+       border: 0;\r
+}\r
+\r
+.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus\r
+       {\r
+       border: 0;\r
+       border-top: 3px solid #F3565D;\r
+}\r
+\r
+.nav-tabs>li>a {\r
+       border-radius: 0;\r
+}\r
+\r
+.nav-tabs>li>a:hover {\r
+       background-color: #f1f3fa;\r
+       border: 1Px solid #f1f3fa;\r
+}\r
+\r
+.c3 {\r
+       margin-top: 120px;\r
+}\r
+\r
+.skills-chart-breadcrumb {\r
+       \r
+}\r
+\r
+.blue:selected {\r
+       border: 0;\r
+       background-color: #5b9bd1;\r
+}\r
+\r
+select {\r
+       border-width: 1px;\r
+       padding: 2px 1px;\r
+       border-radius: 4px;\r
+} \r
+\r
+.input-sm {\r
+       padding: 4px 10px;\r
+}\r
+\r
+.btn-block {\r
+       display: block;\r
+       width: 100%;\r
+       padding-left: 0;\r
+       padding-right: 0;\r
+}\r
+\r
+/* Bootstrap buttons */\r
+.btn-default {\r
+       color: #5b9bd1;\r
+       background-color: #fff;\r
+       border-color: #ccc;\r
+}\r
+\r
+.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active\r
+       {\r
+       color: #333;\r
+       background-color: #ededed;\r
+       border-color: #b3b3b3;\r
+}\r
+\r
+.open .btn-default.dropdown-toggle {\r
+       color: #333;\r
+       background-color: #ededed;\r
+       border-color: #b3b3b3;\r
+}\r
+\r
+.btn-default:active,.btn-default.active {\r
+       background-image: none;\r
+       background-color: #e0e0e0;\r
+       font-weight: bold;\r
+}\r
+\r
+.btn-default:active:hover,.btn-default.active:hover {\r
+       background-color: #e6e6e6;\r
+}\r
+\r
+.open .btn-default.dropdown-toggle {\r
+       background-image: none;\r
+}\r
+\r
+.btn-default.disabled,.btn-default.disabled:hover,.btn-default.disabled:focus,.btn-default.disabled:active,.btn-default.disabled.active,.btn-default[disabled],.btn-default[disabled]:hover,.btn-default[disabled]:focus,.btn-default[disabled]:active,.btn-default[disabled].active,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default:hover,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default.active\r
+       {\r
+       background-color: #fff;\r
+       border-color: #ccc;\r
+}\r
+\r
+.btn-default .badge {\r
+       color: #fff;\r
+       background-color: #333;\r
+}\r
+\r
+.btn-default>i {\r
+       color: #aaa;\r
+}\r
+\r
+.btn-default>i[class^="icon-"],.btn-default>i[class*="icon-"] {\r
+       color: #8c8c8c;\r
+}\r
+\r
+div[data-name="tab_zone"] div {\r
+       background-color: #f1f3fa;\r
+       padding: 0px;\r
+}\r
+\r
+div[data-name="cond_zone"] div {\r
+       background-color: #fff;\r
+       margin-top: 15px;\r
+       margin-bottom: 15px;\r
+}\r
+\r
+div[data-name="res-conds-zone"] {\r
+       display: inline;\r
+}\r
+\r
+div[data-name="res-conds-zone"] select,div[data-name="res-conds-zone"] span\r
+       {\r
+       /**height:33px;*/\r
+       margin-left: 15px;\r
+       color: #5b9bd1;\r
+       border-color: #ccc;\r
+       font-weight: bold;\r
+}\r
+\r
+.input{\r
+       width:250px;\r
+       height: 34px;\r
+       padding: 6px 12px;\r
+       font-size: 14px;\r
+       line-height: 1.42857143;\r
+       color: #555;\r
+       background-color: #fff;\r
+       background-image: none;\r
+       border: 1px solid #ccc;\r
+       border-radius: 4px;\r
+       -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);\r
+       box-shadow: inset 0 1px 1px rgba(0,0,0,.075);\r
+       -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;\r
+       transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;\r
+}\r
+\r
+div.separator {\r
+       margin: 20px;\r
+}\r
+\r
+div.separator div {\r
+       text-align: center;\r
+       line-height: 0;\r
+}\r
+\r
+div.separator-line {\r
+       height: 1px !important;\r
+       width: 100%;\r
+       background: #ddd;\r
+       overflow: hidden;\r
+}\r
+\r
+.dropdown-toggle {\r
+       color: #5b9bd1;\r
+}\r
+\r
+.calendar-date {\r
+       color: #5b9bd1;\r
+}\r
+\r
+.range_inputs {\r
+       color: #5b9bd1;\r
+}\r
+\r
+.btn.dropdown-toggle,.btn-group .btn.dropdown-toggle,.btn:hover,.btn:disabled,.btn[disabled],.btn:focus,.btn:active,.btn.active\r
+       {\r
+       outline: none !important;\r
+       background-image: none !important;\r
+       filter: none;\r
+       -webkit-box-shadow: none;\r
+       -moz-box-shadow: none;\r
+       box-shadow: none;\r
+       text-shadow: none;\r
+}\r
+\r
+#skills-chart-breadcrumb {\r
+       margin-bottom: 10px\r
+}\r
+\r
+/*����daterangepicker��css*/\r
+input[name="daterange"] {\r
+       width: 220px;\r
+       line-height: 0;\r
+       height: 31px;\r
+       vertical-align: top;\r
+       margin-top: 2px;\r
+}\r
+\r
+.daterangepicker .ranges {\r
+       width: 205px;\r
+}\r
+\r
+.daterangepicker .ranges input {\r
+       width: 95px !important;\r
+}\r
+\r
+td.details-control {\r
+       background: url('../image/details_open.png') no-repeat center center;\r
+       cursor: pointer;\r
+}\r
+\r
+tr.shown td.details-control {\r
+       background: url('../image/details_close.png') no-repeat center center;\r
+}\r
+\r
+.details table td {\r
+       word-wrap: break-word;\r
+       word-break: normal;\r
+       border-top: 1px solid #dddddd;\r
+}\r
+\r
+.details table  tr:first-child td {\r
+       border-top: none;\r
+}\r
+\r
+.details table {\r
+       table-layout: fixed;\r
+       width: 100%;\r
+}\r
+\r
+td.title {\r
+       width: 10%;\r
+}\r
+\r
+table.dataTable tbody th,table.dataTable tbody td {\r
+       padding: 8px 10px;\r
+}\r
+\r
+div.dataTables_length,div.dataTables_info {\r
+       display: inline;\r
+}\r
+\r
+div.dataTables_paginate {\r
+       display: inline;\r
+       float: right;\r
+}\r
+\r
+div.pagination-panel {\r
+       margin-right: 10px;\r
+}\r
+\r
+input.pagination-panel-input {\r
+       width: 50px;\r
+}\r
+\r
+#ict_virtualApplication_table_div {\r
+       margin-top: 15px;\r
+}\r
+\r
+#ict_virtualApplication_table_div label {\r
+       font-weight: 100;\r
+}\r
+\r
+.daterangepicker .daterangepicker_start_input label,.daterangepicker .daterangepicker_end_input label\r
+       {\r
+       color: #5b9bd1;\r
+}\r
+\r
+.daterangepicker .ranges .input-mini {\r
+       color: #5b9bd1;\r
+}\r
+\r
+.cancelBtn {\r
+       padding: 5px 10px 5px 10px;\r
+}\r
+\r
+.btn:focus,.btn:active:focus,.btn.active:focus {\r
+       outline: 0;\r
+}\r
+\r
+#ict_virtualApplication_table_div  table {\r
+       width: 100% !important;\r
+}\r
+\r
+.uploadBtn {\r
+       margin-top:10px;\r
+}\r
+\r
+.btn-operation {\r
+       min-width: 30px;\r
+       line-height: 1;\r
+}\r
+\r
+tr select {\r
+       width: 80px;\r
+}  \r
+\r
+.span-action {\r
+       float:left;\r
+}\r
+\r
+.btn i {\r
+       padding-right: 0 !important;\r
+}\r
+\r
+.vmapp-margin {\r
+       margin-bottom: 20px;\r
+}\r
+\r
+.vmapp-form-title {\r
+       padding:8px;\r
+       margin-bottom:5px;\r
+       margin-left:20px;\r
+       border-left: 2px solid #5b9bd1;\r
+       color:#1A78CA;\r
+}\r
+\r
+.input-group .input-control {\r
+       height : 34px !important;\r
+}\r
+\r
+.input-group .input-control[disabled] {\r
+       cursor: default;\r
+       background-color: #fff;\r
+}\r
+\r
+.input-group .input-group-btn .btn-default {\r
+       color: #333;\r
+    font-size: 14px;\r
+    min-width: 34px;\r
+}\r
+\r
+.modal-scrollable {\r
+       overflow: auto !important;\r
+}\r
+\r
+td.icheckbox {\r
+       text-align: center;\r
+}\r
+\r
+td .icheckbox_square-aero {\r
+       margin-right: 0;\r
+}\r
+\r
+/*卡片面板样式*/\r
+.hpanel {\r
+       background-color: none;\r
+       border: none;\r
+       box-shadow: none;\r
+       margin-bottom: 5px;\r
+}\r
+\r
+.hpanel .panel-body {\r
+       border: 1px solid #e4e5e7;\r
+       border-radius: 2px;\r
+       position: relative;\r
+}\r
+\r
+.hpanel > .panel-footer {\r
+       color: inherit;\r
+       border: 1px solid #e4e5e7;\r
+       border-top: none;\r
+       font-size: 90%;\r
+       background: #f7f9fa;\r
+       height:40px;\r
+       padding: 5px 10px;\r
+}\r
+\r
+.hpanel > .panel-footer .pull-right a{\r
+       margin-left: 5px;\r
+}\r
+\r
+.hpanel > .panel-footer .pull-right .btn{\r
+       min-width: 30px !important;\r
+}\r
+\r
+.hpanel_show {\r
+       background-color: #f7f9fa;\r
+}\r
+\r
+.hpanel .panel-info {\r
+       overflow:hidden;\r
+       white-space:nowrap;\r
+       text-overflow:ellipsis;\r
+}\r
+\r
+.tipArea {\r
+    border-bottom: 1px solid #d4d4d4;\r
+       width: 95%;\r
+       margin-bottom: 15px;\r
+       margin-left: 15px;\r
+       padding-bottom: 5px;\r
+}
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/css/vnfm.css b/openo-portal/portal-catalog/src/main/webapp/catalog/css/vnfm.css
new file mode 100644 (file)
index 0000000..a3848f6
--- /dev/null
@@ -0,0 +1,492 @@
+/**
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)
+ *
+ * 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.
+ */
+body {
+       font-family: microsoft yahei !important;
+}
+
+/* blue pill (inspired by iTunes)
+*******************************************************************************/
+
+.grey {
+  background-color: #e5e5e5;
+  color: #333;
+}
+
+.blue {
+
+       background-color: #5b9bd1;
+       border-radius: 20px;
+       color: #fff;
+       font-weight: bold;
+       padding: 8px 0;
+       text-align: center;
+       width: 100px;
+}
+
+.blue:hover {
+       background-color: #e8f3fd;
+       color: #5b9bd1;
+}
+
+.blue.selected {
+       border: 0;
+       background-color: #5b9bd1;
+       color: #fff;
+}
+
+.blue.selected:hover {
+       border: 0;
+       background-color: #5b9bd1;
+       color: #fff;
+}
+
+p {
+       color: #444;
+       font-size: 14px;
+       font-weight: normal;
+       line-height: 21px;
+       margin: 0 0 12px 0;
+}
+
+p.credit {
+       border-top: 1px solid #ccc;
+       font-size: 14px;
+       line-height: 140%;
+       margin: 36px 0 12px 0;
+       padding: 8px 0 0 0;
+       text-align: center;
+}
+
+ul.column {
+       float: left;
+       list-style: none;
+       width: 675px;
+}
+
+ul.column li {
+       background: #eee;
+       -webkit-border-radius: 5px;
+       border-radius: 5px;
+       -webkit-box-shadow: inset 0 1px 1px 0 #c7c7c7;
+       box-shadow: inset 0 1px 1px 0 #c7c7c7;
+       float: left;
+       margin: 10px 0 0 10px;
+       display: block;
+       height: 150px;
+       text-align: center;
+       width: 215px;
+}
+
+/* Clear Floated Elements
+------------------------------------------------------------------------------*/
+.column:after,.button-collection:after,.clearfix:after,div.project-info:after
+       {
+       clear: both;
+       content: ' ';
+       display: block;
+       font-size: 0;
+       line-height: 0;
+       visibility: hidden;
+       width: 0;
+       height: 0;
+}
+
+.container-fluid {
+       background-color:white !important;
+       min-height:500px;
+}
+
+.nav-tabs {
+       border: 0;
+}
+
+.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus
+       {
+       border: 0;
+       border-top: 3px solid #F3565D;
+}
+
+.nav-tabs>li>a {
+       border-radius: 0;
+}
+
+.nav-tabs>li>a:hover {
+       background-color: #f1f3fa;
+       border: 1Px solid #f1f3fa;
+}
+
+.c3 {
+       margin-top: 120px;
+}
+
+.skills-chart-breadcrumb {
+       
+}
+
+.blue:selected {
+       border: 0;
+       background-color: #5b9bd1;
+}
+
+.btn {
+       /* border-width: 0; */
+       /* padding: 7px 14px; */
+       /* font-size: 14px; */
+       /* outline: none !important; */
+       /* background-image: none !important; */
+       /* filter: none; */
+       /* -webkit-box-shadow: none; */
+       -moz-box-shadow: none;
+       /* box-shadow: none; */
+       /* text-shadow: none; */
+}
+
+select {
+       border-width: 1px;
+       padding: 4px 1px;
+       border-radius: 4px;
+}
+
+.input-sm {
+       padding: 4px 10px;
+}
+
+.btn-block {
+       display: block;
+       width: 100%;
+       padding-left: 0;
+       padding-right: 0;
+}
+
+/* Bootstrap buttons */
+
+
+.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active
+       {
+       color: #333;
+       background-color: #ededed;
+       border-color: #b3b3b3;
+}
+
+.open .btn-default.dropdown-toggle {
+       color: #333;
+       background-color: #ededed;
+       border-color: #b3b3b3;
+}
+
+.btn-default:active,.btn-default.active {
+       background-image: none;
+       background-color: #e0e0e0;
+       font-weight: bold;
+}
+
+.btn-default:active:hover,.btn-default.active:hover {
+       background-color: #e6e6e6;
+}
+
+.open .btn-default.dropdown-toggle {
+       background-image: none;
+}
+
+.btn-default.disabled,.btn-default.disabled:hover,.btn-default.disabled:focus,.btn-default.disabled:active,.btn-default.disabled.active,.btn-default[disabled],.btn-default[disabled]:hover,.btn-default[disabled]:focus,.btn-default[disabled]:active,.btn-default[disabled].active,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default:hover,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default.active
+       {
+       background-color: #fff;
+       border-color: #ccc;
+}
+
+.btn-default .badge {
+       color: #fff;
+       background-color: #333;
+}
+
+
+.btn-default>i[class^="icon-"],.btn-default>i[class*="icon-"] {
+       color: #8c8c8c;
+}
+
+div[data-name="tab_zone"] div {
+       background-color: #f1f3fa;
+       padding: 0px;
+}
+
+div[data-name="cond_zone"] div {
+       background-color: #fff;
+       margin-top: 15px;
+       margin-bottom: 15px;
+}
+
+div[data-name="res-conds-zone"] {
+       display: inline;
+}
+
+div[data-name="res-conds-zone"] select,div[data-name="res-conds-zone"] span
+       {
+       /**height:33px;*/
+       margin-left: 15px;
+       color: #5b9bd1;
+       border-color: #ccc;
+       font-weight: bold;
+}
+
+.input{
+       width:250px;
+  height: 34px;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #555;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+}
+
+div.separator {
+       margin: 20px;
+}
+
+div.separator div {
+       text-align: center;
+       line-height: 0;
+}
+
+div.separator-line {
+       height: 1px !important;
+       width: 100%;
+       background: #ddd;
+       overflow: hidden;
+}
+
+.dropdown-toggle {
+       color: #5b9bd1;
+}
+
+.calendar-date {
+       color: #5b9bd1;
+}
+
+.range_inputs {
+       color: #5b9bd1;
+}
+
+.btn.dropdown-toggle,.btn-group .btn.dropdown-toggle,.btn:hover,.btn:disabled,.btn[disabled],.btn:focus,.btn:active,.btn.active
+       {
+       outline: none !important;
+       background-image: none !important;
+       filter: none;
+       -webkit-box-shadow: none;
+       -moz-box-shadow: none;
+       box-shadow: none;
+       text-shadow: none;
+}
+
+#skills-chart-breadcrumb {
+       margin-bottom: 10px
+}
+
+/*增加daterangepicker的css*/
+input[name="daterange"] {
+       width: 220px;
+       line-height: 0;
+       height: 31px;
+       vertical-align: top;
+       margin-top: 2px;
+}
+
+.daterangepicker .ranges {
+       width: 205px;
+}
+
+.daterangepicker .ranges input {
+       width: 95px !important;
+}
+
+td.details-control {
+       background: url('../image/details_open.png') no-repeat center center;
+       cursor: pointer;
+}
+
+tr.shown td.details-control {
+       background: url('../image/details_close.png') no-repeat center center;
+}
+
+.details table td {
+       word-wrap: break-word;
+       word-break: normal;
+       border-top: 1px solid #dddddd;
+}
+
+.details table  tr:first-child td {
+       border-top: none;
+}
+
+.details table {
+       table-layout: fixed;
+       width: 100%;
+}
+
+td.title {
+       width: 10%;
+}
+
+table.dataTable tbody th,table.dataTable tbody td {
+       padding: 8px 10px;
+}
+
+div.dataTables_length,div.dataTables_info {
+       display: inline;
+}
+
+div.dataTables_paginate {
+       display: inline;
+       float: right;
+}
+
+div.pagination-panel {
+       margin-right: 10px;
+}
+
+input.pagination-panel-input {
+       width: 50px;
+}
+
+#ict_res_table_div {
+       margin-top: 15px;
+}
+
+#ict_res_table_div label {
+       font-weight: 100;
+}
+
+.daterangepicker .daterangepicker_start_input label,.daterangepicker .daterangepicker_end_input label
+       {
+       color: #5b9bd1;
+}
+
+.daterangepicker .ranges .input-mini {
+       color: #5b9bd1;
+}
+
+.cancelBtn {
+       padding: 5px 10px 5px 10px;
+}
+
+.btn:focus,.btn:active:focus,.btn.active:focus {
+       outline: 0;
+}
+
+#ict_res_table_div  table {
+       width: 100% !important;
+}
+
+.control-label .required {
+  color: #e02222;
+  font-size: 12px;
+  padding-left: 2px;
+}
+
+#ict_vim_table tbody tr{
+       cursor:pointer;
+}
+
+
+/*卡片面板样式*/
+.animated-panel {
+  -webkit-animation-duration: .5s;
+  animation-duration: .5s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.hpanel {
+  background-color: none;
+  border: none;
+  box-shadow: none;
+  margin-bottom: 25px;
+    
+}
+
+.hpanel .panel-body {
+  border: 1px solid #e4e5e7;
+  border-radius: 2px;
+  padding: 20px;
+  position: relative;
+}
+.h-200 {
+  min-height: 220px;
+}
+
+.m-t-xl {
+  margin-top: 40px;
+}
+
+.m-t-xl div {
+  margin-bottom: 15px;
+}
+
+.text-success {
+  color: #0d638f;
+}
+.hpanel > .panel-footer {
+  color: inherit;
+  border: 1px solid #e4e5e7;
+  border-top: none;
+  font-size: 90%;
+  background: #f7f9fa;
+  height:40px;
+  padding: 5px 15px;
+}
+.color_cloud{
+       color:#ccc;
+}
+.stats-title{
+
+}
+
+h3{
+  margin-top: 10px;
+  margin-bottom: 40px;
+  font-weight: 200;
+}
+
+.blue-font{
+       color:#428bca;
+}
+
+.hpanel > .panel-footer .pull-right a{
+       margin-left: 5px;
+}
+
+.hpanel > .panel-footer .pull-right .btn{
+       min-width: 30px !important;
+}
+
+.font-bold {
+  font-weight: 600;
+  margin-bottom: 15px;
+}
+
+.hpanel_show{
+       background-color: #f7f9fa;
+}
+
+.vnfm-padding {
+       padding-left: 0;
+}
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/i18n/nfv-nso-iui-i18n-en-US.properties b/openo-portal/portal-catalog/src/main/webapp/catalog/i18n/nfv-nso-iui-i18n-en-US.properties
new file mode 100644 (file)
index 0000000..33c6154
--- /dev/null
@@ -0,0 +1,358 @@
+#\r
+# Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+#\r
+# Licensed under the Apache License, Version 2.0 (the "License");\r
+# you may not use this file except in compliance with the License.\r
+# You may obtain a copy of the License at\r
+#\r
+#         http://www.apache.org/licenses/LICENSE-2.0\r
+#\r
+# Unless required by applicable law or agreed to in writing, software\r
+# distributed under the License is distributed on an "AS IS" BASIS,\r
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+# See the License for the specific language governing permissions and\r
+# limitations under the License.\r
+#\r
+\r
+//table\r
+nfv-nso-iui-table-sLengthMenu=View _MENU_ records\r
+nfv-nso-iui-table-sZeroRecords=No matching records found\r
+nfv-nso-iui-table-sInfo=Found total _TOTAL_ records\r
+nfv-nso-iui-table-sInfoEmpty=No records found to show\r
+nfv-nso-iui-table-sGroupActions=_TOTAL_ records selected:  \r
+nfv-nso-iui-table-sAjaxRequestGeneralError=Could not complete request. Please check your internet connection.\r
+nfv-nso-iui-table-sEmptyTable=No data available in table\r
+nfv-nso-iui-table-sPrevious=Prev\r
+nfv-nso-iui-table-sNext=Next\r
+nfv-nso-iui-table-sPage=Page\r
+nfv-nso-iui-table-sPageOf=of\r
+nfv-nso-iui-table-sProcess=Processing...\r
+\r
+//common\r
+nfv-nso-iui-common-tip=Tip:  \r
+\r
+//package table colums\r
+nfv-package-iui-title=Package\r
+nfv-package-iui-field-sn=Index\r
+nfv-package-iui-field-name=Name\r
+nfv-package-iui-field-type=Type\r
+nfv-package-iui-field-usagestate=Usage State\r
+nfv-package-iui-field-processstate=Process State\r
+nfv-package-iui-field-operationalstate=Operational State\r
+nfv-package-iui-field-onboardstate=OnBoard State\r
+nfv-package-iui-field-deletionpending=Deletion Pending\r
+nfv-package-iui-field-operation=Operation\r
+\r
+nfv-package-iui-field-detail-name=Name\r
+nfv-package-iui-field-detail-type=Type\r
+nfv-package-iui-field-detail-usagestate=Usage State\r
+nfv-package-iui-field-detail-processstate=Process State\r
+nfv-package-iui-field-detail-operationalstate=Operational State\r
+nfv-package-iui-field-detail-onboardstate=Onboard State\r
+nfv-package-iui-field-detail-deletionpending=Deletion Pending\r
+nfv-package-iui-field-detail-operation=Operation\r
+nfv-package-iui-field-detail-size=Size\r
+nfv-package-iui-field-detail-csarid=ID\r
+nfv-package-iui-field-detail-version=Version\r
+nfv-package-iui-field-detail-provider=Provider\r
+nfv-package-iui-field-detail-downloaduri=Download Uri\r
+nfv-package-iui-field-detail-createtime=Create Time\r
+nfv-package-iui-field-detail-modifytime=Modify Time\r
+nfv-package-iui-field-detail-format=Format\r
+\r
+nfv-package-iui-status-tip=Taps to Activate\r
+nfv-package-iui-status-active=Activate\r
+nfv-package-iui-status-activating=Activating\r
+nfv-package-iui-status-inactive=Nonactivate\r
+nfv-package-iui-status-deleting =Deleting\r
+nfv-package-iui-status-deletefail = Delete Fail\r
+nfv-package-iui-status-onBoarding = Onboarding\r
+\r
+nfv-package-iui_packageview_packageDetail=Package Detail\r
+nfv-package-iui_packageview_btn_close=Close\r
+nfv-package-iui_packageview_key=Key\r
+nfv-package-iui_packageview_value=Value\r
+nfv-package-iui-selectvim-title=Select VIM Onboard Image\r
+nfv-package-iui-btn-cancel=Cancel\r
+nfv-package-iui-btn-ok=Ok\r
+\r
+nfv-package-iui-message-upload-success=Csar package imported successfully.\r
+nfv-package-iui-message-upload-fail=Csar package imported failed.\r
+nfv-package-iui-message-delete-confirm=Do you want to delete the current package?\r
+nfv-package-iui-message-delete-success=Csar package deleted successfully.\r
+nfv-package-iui-message-upload-csar-exist=The package already exists, whether to re upload?\r
+nfv-package-iui-message-upload-csar-deletionpending=This package is referenced in an instance. whether to re upload?\r
+nfv-package-iui-message-onBoarded = Already onBoarded, no need for onBoarding.\r
+nfv-package-iui-message-onBoard-error = Onboarding error.\r
+nfv-package-iui-message-select-vim-error = Can not select more than one VIM to be test environment.\r
+nfv-package-iui-onboard-dialog-vimname = VIM Name\r
+nfv-package-iui-product-env = Product Environment\r
+nfv-package-iui-test-env = Test Environment\r
+\r
+nfv-package-iui-drop-zone-title=Drag & drop files here …\r
+nfv-package-iui-drop-zone-selectBtn=Browse\r
+nfv-package-iui-drop-zone-removeBtn=Remove\r
+nfv-package-iui-drop-zone-uploadBtn=Upload\r
+\r
+//template table colums\r
+nfv-template-iui-title=Service Template\r
+nfv-template-iui-field-order=Order\r
+nfv-template-iui-field-templatename=Name\r
+nfv-template-iui-field-producttype=Type\r
+nfv-template-iui-field-vendor=Vendor\r
+nfv-template-iui-field-version=Version\r
+nfv-template-iui-field-inputs=Inputs\r
+nfv-template-iui-field-outputs=Outputs\r
+nfv-template-iui-field-operations=Operations\r
+nfv-template-iui-field-download-uri=Download Uri\r
+nfv-template-iui-field-type=Node Type\r
+\r
+//template detail table colums\r
+nfv-templateDetail-iui-index=Index\r
+nfv-templateDetail-iui-title=Node Template\r
+nfv-templateDetail-iui-field-nodeId=ID\r
+nfv-templateDetail-iui-field-nodetypename=Name\r
+nfv-templateDetail-iui-field-type=Type\r
+nfv-templateDetail-iui-field-containedin=Contained In\r
+nfv-templateDetail-iui-field-deployedon=Deployed On\r
+nfv-templateDetail-iui-field-connectedto=Conected To\r
+nfv-templateDetail-iui-field-virtuallinksto=Virtual Links To\r
+\r
+nfv-templateDetail-nodesTab-iui-tab-general=General\r
+nfv-templateDetail-nodesTab-iui-tab-properties=Properties\r
+nfv-templateDetail-nodesTab-iui-tab-relationShips=RelationShips\r
+nfv-templateDetail-nodesTab-iui-field-key=Key\r
+nfv-templateDetail-nodesTab-iui-field-value=Value\r
+nfv-templateDetail-nodesTab-iui-field-property=Property\r
+nfv-templateDetail-nodesTab-iui-field-sourceNodeName=Source Node\r
+nfv-templateDetail-nodesTab-iui-field-targetNodeName=Target Node\r
+nfv-templateDetail-nodesTab-iui-field-type=Type\r
+nfv-templateDetail-nodesTab-iui-btn-close=Close\r
+nfv-templateDetail-nodesTab-iui-title-nodeDetail=Node Detail\r
+\r
+nfv-templateDetail-executionTab-iui-field-currentStepName=Name\r
+nfv-templateDetail-executionTab-iui-field-currentStepStatus=Status\r
+nfv-templateDetail-executionTab-iui-field-currentStepDesc=Description\r
+nfv-templateDetail-executionTab-iui-field-executionTime=Execution Time\r
+\r
+//topo\r
+nfv-topology-iui-vnf-tip=Click to view the nested topology\r
+nfv-topology-iui-btn-return-tip=Return\r
+nfv-topology-iui-message-error=Query Topology Information failed.\r
+\r
+//virtual application table colums\r
+nfv-virtualApplication-iui-title=Lifecycle\r
+nfv-virtualApplication-iui-field-name=Name\r
+nfv-virtualApplication-iui-field-template=Template\r
+nfv-virtualApplication-iui-field-createDate=Create Time\r
+nfv-virtualApplication-iui-field-status=Status\r
+nfv-virtualApplication-iui-field-updateDate=Update Time\r
+nfv-virtualApplication-iui-field-action=Action\r
+nfv-virtualApplication-iui-field-operation=Operation\r
+\r
+nfv-virtualApplication-iui-scale-field-type=Type\r
+nfv-virtualApplication-iui-scale-field-num=Number\r
+nfv-virtualApplication-iui-scale-field-name=Name\r
+nfv-virtualApplication-iui-scale-field-operation=Operation\r
+\r
+nfv-virtualApplication-iui-operation-init=init\r
+nfv-virtualApplication-iui-operation-conf=configure\r
+nfv-virtualApplication-iui-operation-start=start\r
+nfv-virtualApplication-iui-operation-stop=stop\r
+nfv-virtualApplication-iui-operation-scaleIn=scale-in\r
+nfv-virtualApplication-iui-operation-scaleOut=scale-out\r
+nfv-virtualApplication-iui-operation-delete=delete\r
+\r
+nfv-virtualApplication-iui-status-normal=Deployed\r
+nfv-virtualApplication-iui-status-finish=Finish\r
+nfv-virtualApplication-iui-status-failed=Failed\r
+\r
+nfv-virtualApplication-iui-status-processing=Deploying\r
+nfv-virtualApplication-iui-status-init=Deploying\r
+nfv-virtualApplication-iui-status-conf=Configuring\r
+nfv-virtualApplication-iui-status-start=Starting\r
+nfv-virtualApplication-iui-status-stop=Stoping\r
+nfv-virtualApplication-iui-status-scaleIn=Scaling in\r
+nfv-virtualApplication-iui-status-scaleOut=Scaling out\r
+nfv-virtualApplication-iui-status-execute=Executing\r
+nfv-virtualApplication-iui-status-delete=Deleting\r
+\r
+nfv-virtualApplication-iui-text-title=Create Application\r
+nfv-virtualApplication-iui-text-createVm=Create\r
+nfv-virtualApplication-iui-text-name=Name\r
+nfv-virtualApplication-iui-text-description=Description\r
+nfv-virtualApplication-iui-text-template=Template\r
+nfv-virtualApplication-iui-text-templateDes=Template Description\r
+nfv-virtualApplication-iui-text-vnfm=VNFM\r
+nfv-virtualApplication-iui-text-tab-basic=Basic Info\r
+nfv-virtualApplication-iui-text-tab-flavor=Flavor Parameters\r
+nfv-virtualApplication-iui-text-tab-operationParam=Operation Parameters\r
+\r
+nfv-virtualApplication-iui-text-flavor=Flavor\r
+nfv-virtualApplication-iui-text-flavorDesc=Flavor Description\r
+nfv-virtualApplication-iui-text-flavor-numberOfInstances=NumberOfInstances\r
+nfv-virtualApplication-iui-text-flavor-refNodeFlavor=RefNodeFlavor\r
+nfv-virtualApplication-iui-text-flavor-affinity=Affinity\r
+nfv-virtualApplication-iui-text-flavor-redundancyModel=RedundancyModel\r
+nfv-virtualApplication-iui-text-flavor-capability=Capability\r
+nfv-virtualApplication-iui-text-input-planTitle=Plan\r
+\r
+nfv-virtualApplication-iui-text-scale-name=VNF Name\r
+nfv-virtualApplication-iui-text-scale-oeprationType=Operation Type\r
+nfv-virtualApplication-iui-text-scale-oeprationType-type=Type\r
+nfv-virtualApplication-iui-text-scale-oeprationType-instance=Instance\r
+nfv-virtualApplication-iui-text-scale-vduBtn-title=Add VDU\r
+nfv-virtualApplication-iui-text-scale-vnf-title=VNF List\r
+nfv-virtualApplication-iui-text-scale-vnf-name=VNF\r
+nfv-virtualApplication-iui-text-scale-vnf-vduType=VDU Type\r
+nfv-virtualApplication-iui-text-scale-vnf-num=Number\r
+nfv-virtualApplication-iui-text-scale-vnf-vduInstance=VDU Instance\r
+nfv-virtualApplication-iui-text-scale-vnf-numTip=Number\r
+nfv-virtualApplication-iui-text-scale-vnf-nameTip=Name\r
+nfv-virtualApplication-iui-text-scale-type-title=VDU Type\r
+nfv-virtualApplication-iui-text-scale-instance-title=VDU Instance\r
+nfv-virtualApplication-iui-text-scale-instance-cancelBtn=Cancel\r
+nfv-virtualApplication-iui-text-scale-instance-confirmBtn=Confirm\r
+nfv-virtualApplication-iui-text-scale-validate-message=The VNF is already selected\r
+nfv-virtualApplication-iui-text-scale-out-modal-title=ScaleOut Parameters\r
+nfv-virtualApplication-iui-text-scale-in-modal-title=ScaleIn Parameters\r
+\r
+nfv-virtualApplication-iui-text-createBtn=Create\r
+nfv-virtualApplication-iui-text-cancelBtn=Cancel\r
+nfv-virtualApplication-iui-text-confirmBtn=Confirm\r
+nfv-virtualApplication-iui-text-previousBtn=Previous\r
+nfv-virtualApplication-iui-text-nextBtn=Next\r
+nfv-virtualApplication-iui-text-params=Parameters\r
+\r
+nfv-virtualApplication-iui-message-delete-confirm=Do you want to delete the current application?\r
+nfv-virtualApplication-iui-message-delete-success=Application deleted successfully.\r
+nfv-virtualApplication-iui-message-delete-fail = Application deleted failed.\r
+nfv-virtualApplication-iui-message-create-success=Application created successfully.\r
+nfv-virtualApplication-iui-message-create-fail=Application created failed.\r
+\r
+nfv-virtualApplication-iui-validate-instanceName=Please enter a name\r
+nfv-virtualApplication-iui-validate-serviceTemplateName=Please select a service tempalte\r
+nfv-virtualApplication-iui-validate-flavor=Please select a flavor\r
+nfv-virtualApplication-iui-validate-vimId=Please select a VIM\r
+nfv-virtualApplication-iui-validate-vnfmId=Please select a VNFM\r
+nfv-virtualApplication-iui-validate-inputParam=This field is required\r
+nfv-virtualApplication-iui-validate-noinputParam=Don't need to input parameters\r
+nfv-virtualApplication-iui-validate-digits=Please enter only digits\r
+nfv-virtualApplication-iui-validate-range=Please enter a value between {0} and {1}\r
+\r
+//virtual application detail table colums\r
+nfv-virtualApplicationDetail-iui-field-nodeId=ID\r
+nfv-virtualApplicationDetail-iui-field-nodeName=Name\r
+nfv-virtualApplicationDetail-iui-field-nodeType=Node Type\r
+nfv-virtualApplicationDetail-iui-field-templateType=Template Type\r
+nfv-virtualApplicationDetail-iui-field-host=IP\r
+nfv-virtualApplicationDetail-iui-field-createTime=Create Time\r
+\r
+nfv-virtualApplicationDetail-iui-field-currentStepName=Name\r
+nfv-virtualApplicationDetail-iui-field-currentStepStatus=Status\r
+nfv-virtualApplicationDetail-iui-field-percent=Progress\r
+nfv-virtualApplicationDetail-iui-field-currentStepDesc=Description\r
+nfv-virtualApplicationDetail-iui-field-executionTime=Execution Time\r
+\r
+nfv-virtualApplicationDetail-iui-text-events=Events\r
+nfv-virtualApplicationDetail-iui-text-nodeDetail=Node Detail\r
+nfv-virtualApplicationDetail-iui-btn-close=Close\r
+\r
+//host image table colums\r
+nfv-host-iui-title=Image\r
+nfv-host-iui-field-name=Name\r
+nfv-host-iui-field-size=Size\r
+nfv-host-iui-field-vimUser=Tenant\r
+nfv-host-iui-field-createTime=Create Time\r
+nfv-host-iui-field-status=Status\r
+nfv-host-iui-field-progress=Progress\r
+nfv-host-iui-field-operation=Operation\r
+\r
+nfv-host-iui-operation-delete=Delete\r
+\r
+nfv-host-iui-text-title=Upload Image\r
+nfv-host-iui-text-uploadImage=Upload\r
+nfv-host-iui-text-local=Local\r
+nfv-host-iui-text-url=Url\r
+nfv-host-iui-text-image=Image File\r
+nfv-host-iui-text-imageurl=Image Url\r
+nfv-host-iui-text-name=Image Name\r
+nfv-host-iui-text-tenant=Tenant\r
+nfv-host-iui-btn-upload=Upload\r
+nfv-host-iui-btn-cancel=Cancel\r
+\r
+nfv-host-iui-validate-file=Please select a host file\r
+nfv-host-iui-validate-hosturl-required=Please enter a url\r
+nfv-host-iui-validate-hosturl-url=Please enter the right url\r
+nfv-host-iui-validate-hostName=Please enter a host name\r
+nfv-host-iui-validate-vim=Please select a vim\r
+\r
+nfv-host-iui-message-upload-success=Image upload successfully.\r
+nfv-host-iui-message-upload-failed=Image upload fails.\r
+nfv-host-iui-message-delete-confirm=Do you want to delete the current image?\r
+nfv-host-iui-message-delete-success=Image deleted successfully.\r
+nfv-host-iui-message-delete-failed=Image deleted fails.\r
+\r
+nfv-host-iui-progress-uploading=uploading\r
+nfv-host-iui-progress-success=upload success\r
+nfv-host-iui-progress-fail=upload failed\r
+\r
+//software image table colums\r
+nfv-software-iui-title=Software Image\r
+nfv-software-iui-field-name=Name\r
+nfv-software-iui-field-size=Size\r
+nfv-software-iui-field-type=Type\r
+nfv-software-iui-field-version=Version\r
+nfv-software-iui-field-location=Location\r
+nfv-software-iui-field-createTime=Create Time\r
+nfv-software-iui-field-operation=Operation\r
+\r
+nfv-software-iui-action-delete=Delete\r
+nfv-software-iui-action-onboard=Onboard\r
+\r
+nfv-software-iui-text-title=Upload Image\r
+nfv-software-iui-text-uploadImage=Upload\r
+nfv-software-iui-text-image=Image File\r
+nfv-software-iui-text-image-select=Browse\r
+nfv-software-iui-text-image-remove=Remove\r
+nfv-software-iui-text-type=Type\r
+nfv-software-iui-text-version=Version\r
+nfv-software-iui-btn-upload=Upload\r
+nfv-software-iui-btn-cancel=Cancel\r
+\r
+nfv-software-iui-message-delete-confirm=Do you want to delete the current image?\r
+nfv-software-iui-message-delete-success=Image deleted successfully.\r
+\r
+//vnfm\r
+nfv-vnfm-iui-title=VNFM Manage\r
+nfv-vnfm-iui-message-title=vnfm info\r
+nfv-vnfm-iui-message-query-fail=Query vnfm failed.\r
+nfv-vnfm-iui-message-save-success=Save successfully.\r
+nfv-vnfm-iui-message-save-fail=Save failed.\r
+nfv-vnfm-iui-message-update-success=Update successfully.\r
+nfv-vnfm-iui-message-update-fail=Update failed.\r
+nfv-vnfm-iui-message-delete-confirm=Do you want to delete the current vnfm?\r
+nfv-vnfm-iui-message-delete-success=Vnfm deleted successfully.\r
+nfv-vnfm-iui-message-delete-fail=Vnfm deleted failed.\r
+\r
+nfv-vnfm-iui-test-update=Modify vnfm info\r
+nfv-vnfm-iui-text-register=Register vnfm info\r
+nfv-vnfm-iui-text-name=Name\r
+nfv-vnfm-iui-text-moc=Type\r
+nfv-vnfm-iui-text-vendor=Vendor\r
+nfv-vnfm-iui-text-userName=Username\r
+nfv-vnfm-iui-text-password=Password\r
+nfv-vnfm-iui-text-cancelBtn=cancel\r
+nfv-vnfm-iui-text-saveBtn=save\r
+nfv-vnfm-iui-text-registerBtn=Register\r
+nfv-vnfm-iui-text-status-normal=Normal\r
+nfv-vnfm-iui-text-status-fail=Alarm\r
+nfv-vnfm-iui-text-total=Total\r
+nfv-vnfm-iui-text-total-vnfm= of vnfm\r
+\r
+nfv-vnfm-iui-validate-name=Please enter a name\r
+nfv-vnfm-iui-validate-moc=Please enter the vnfm type\r
+nfv-vnfm-iui-validate-vim=Please select a VIM\r
+nfv-vnfm-iui-validate-url-required=Please enter the URL\r
+nfv-vnfm-iui-validate-url=Please enter the right URL\r
+nfv-vnfm-iui-text-url-tip=Example: http://10.0.0.1
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/i18n/nfv-nso-iui-i18n-zh-CN.properties b/openo-portal/portal-catalog/src/main/webapp/catalog/i18n/nfv-nso-iui-i18n-zh-CN.properties
new file mode 100644 (file)
index 0000000..f3c4584
--- /dev/null
@@ -0,0 +1,360 @@
+#\r
+# Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+#\r
+# Licensed under the Apache License, Version 2.0 (the "License");\r
+# you may not use this file except in compliance with the License.\r
+# You may obtain a copy of the License at\r
+#\r
+#         http://www.apache.org/licenses/LICENSE-2.0\r
+#\r
+# Unless required by applicable law or agreed to in writing, software\r
+# distributed under the License is distributed on an "AS IS" BASIS,\r
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+# See the License for the specific language governing permissions and\r
+# limitations under the License.\r
+#\r
+\r
+//表格相关\r
+nfv-nso-iui-table-sLengthMenu=每页 _MENU_ 条结果\r
+nfv-nso-iui-table-sZeroRecords=没有匹配结果\r
+nfv-nso-iui-table-sInfo=总共找到 _TOTAL_ 条结果\r
+nfv-nso-iui-table-sInfoEmpty=共 0 项\r
+nfv-nso-iui-table-sGroupActions=_TOTAL_ 条结果被选择:\r
+nfv-nso-iui-table-sAjaxRequestGeneralError=不能完成请求,请检查您的网络连接情况。\r
+nfv-nso-iui-table-sEmptyTable=表中数据为空\r
+nfv-nso-iui-table-sPrevious=前页\r
+nfv-nso-iui-table-sNext=下页\r
+nfv-nso-iui-table-sPage=第\r
+nfv-nso-iui-table-sPageOf=页,总页数:\r
+nfv-nso-iui-table-sProcess=处理中...\r
+\r
+//common\r
+nfv-nso-iui-common-tip=提示: \r
+\r
+//包管理表格字段名称定义\r
+nfv-package-iui-title=包管理\r
+nfv-package-iui-field-sn=序号\r
+nfv-package-iui-field-name=名称\r
+nfv-package-iui-field-type=类型\r
+nfv-package-iui-field-usagestate=使用状态\r
+nfv-package-iui-field-processstate=中间状态\r
+nfv-package-iui-field-operationalstate=操作状态\r
+nfv-package-iui-field-onboardstate=上载状态\r
+nfv-package-iui-field-deletionpending=待删除\r
+nfv-package-iui-field-operation=操作\r
+\r
+//包详细信息字段\r
+nfv-package-iui-field-detail-name=名称\r
+nfv-package-iui-field-detail-type=类型\r
+nfv-package-iui-field-detail-usagestate=使用状态\r
+nfv-package-iui-field-detail-processstate=中间状态\r
+nfv-package-iui-field-detail-operationalstate=操作状态\r
+nfv-package-iui-field-detail-onboardstate=上载状态\r
+nfv-package-iui-field-detail-deletionpending=待删除状态\r
+nfv-package-iui-field-detail-operation=操作\r
+nfv-package-iui-field-detail-size=大小\r
+nfv-package-iui-field-detail-csarid=ID\r
+nfv-package-iui-field-detail-version=版本\r
+nfv-package-iui-field-detail-provider=提供商\r
+nfv-package-iui-field-detail-downloaduri=下载Uri\r
+nfv-package-iui-field-detail-createtime=创建时间\r
+nfv-package-iui-field-detail-modifytime=更改时间\r
+nfv-package-iui-field-detail-format=格式\r
+\r
+nfv-package-iui-status-tip=点击激活\r
+nfv-package-iui-status-active=激活\r
+nfv-package-iui-status-activating=激活中\r
+nfv-package-iui-status-inactive=未激活\r
+nfv-package-iui-status-deleting=删除中\r
+nfv-package-iui-status-deletefail=删除失败\r
+nfv-package-iui-status-onBoarding=正在上载\r
+\r
+nfv-package-iui_packageview_packageDetail=包详情\r
+nfv-package-iui_packageview_btn_close=关闭\r
+nfv-package-iui_packageview_key=关键字\r
+nfv-package-iui_packageview_value=值\r
+nfv-package-iui-selectvim-title=选择VIM上载镜像\r
+nfv-package-iui-btn-cancel=取消\r
+nfv-package-iui-btn-ok=确认\r
+\r
+nfv-package-iui-message-upload-success=包导入成功。\r
+nfv-package-iui-message-upload-fail=包导入失败。\r
+nfv-package-iui-message-delete-confirm=确定要删除当前包?\r
+nfv-package-iui-message-delete-success=包删除成功。\r
+nfv-package-iui-message-upload-csar-exist=包已经存在,是否重新上传?\r
+nfv-package-iui-message-upload-csar-deletionpending=实例中引用了此包,是否重新上传?\r
+nfv-package-iui-message-onBoarded = 已经上载,无需再次上载。\r
+nfv-package-iui-message-onBoard-error = 上载失败。\r
+nfv-package-iui-message-select-vim-error = 最多只能选择一个VIM做为测试环境\r
+nfv-package-iui-onboard-dialog-vimname = VIM名称\r
+nfv-package-iui-product-env = 生产环境\r
+nfv-package-iui-test-env = 测试环境\r
+\r
+\r
+nfv-package-iui-drop-zone-title=拖拽文件到这里 …\r
+nfv-package-iui-drop-zone-selectBtn=选择\r
+nfv-package-iui-drop-zone-removeBtn=移除\r
+nfv-package-iui-drop-zone-uploadBtn=上传\r
+\r
+//模板管理表格字段名称定义\r
+nfv-template-iui-title=模板管理\r
+nfv-template-iui-field-order=序号\r
+nfv-template-iui-field-templatename=名称\r
+nfv-template-iui-field-producttype=类型\r
+nfv-template-iui-field-vendor=厂商\r
+nfv-template-iui-field-version=版本\r
+nfv-template-iui-field-inputs=输入\r
+nfv-template-iui-field-outputs=输出\r
+nfv-template-iui-field-operations=操作\r
+nfv-template-iui-field-download-uri=下载Uri\r
+nfv-template-iui-field-type=节点类型\r
+\r
+//模板明细表格字段名称定义\r
+nfv-templateDetail-iui-index=序号\r
+nfv-templateDetail-iui-title=节点模板\r
+nfv-templateDetail-iui-field-nodeId=ID\r
+nfv-templateDetail-iui-field-nodetypename=名称\r
+nfv-templateDetail-iui-field-type=类型\r
+nfv-templateDetail-iui-field-containedin=归属\r
+nfv-templateDetail-iui-field-deployedon=部署\r
+nfv-templateDetail-iui-field-connectedto=业务连接\r
+nfv-templateDetail-iui-field-virtuallinksto=网络连接\r
+\r
+nfv-templateDetail-nodesTab-iui-tab-general=概况\r
+nfv-templateDetail-nodesTab-iui-tab-properties=属性\r
+nfv-templateDetail-nodesTab-iui-tab-relationShips=关系\r
+nfv-templateDetail-nodesTab-iui-field-key=关键字\r
+nfv-templateDetail-nodesTab-iui-field-value=值\r
+nfv-templateDetail-nodesTab-iui-field-property=属性\r
+nfv-templateDetail-nodesTab-iui-field-sourceNodeName=源节点\r
+nfv-templateDetail-nodesTab-iui-field-targetNodeName=目标节点\r
+nfv-templateDetail-nodesTab-iui-field-type=类型\r
+nfv-templateDetail-nodesTab-iui-btn-close=关闭\r
+nfv-templateDetail-nodesTab-iui-title-nodeDetail=节点详情\r
+\r
+nfv-templateDetail-executionTab-iui-field-currentStepName=名称\r
+nfv-templateDetail-executionTab-iui-field-currentStepStatus=状态\r
+nfv-templateDetail-executionTab-iui-field-currentStepDesc=描述\r
+nfv-templateDetail-executionTab-iui-field-executionTime=执行时间\r
+\r
+//topo\r
+nfv-topology-iui-vnf-tip=点击查看嵌套拓扑图\r
+nfv-topology-iui-btn-return-tip=返回\r
+nfv-topology-iui-message-error=查询拓扑图模板信息失败\r
+\r
+//虚拟应用表格字段名称定义\r
+nfv-virtualApplication-iui-title=生命周期管理\r
+nfv-virtualApplication-iui-field-name=名称\r
+nfv-virtualApplication-iui-field-template=模板\r
+nfv-virtualApplication-iui-field-createDate=创建时间\r
+nfv-virtualApplication-iui-field-status=状态\r
+nfv-virtualApplication-iui-field-updateDate=更新时间\r
+nfv-virtualApplication-iui-field-action=动作\r
+nfv-virtualApplication-iui-field-operation=操作\r
+\r
+nfv-virtualApplication-iui-scale-field-type=类型\r
+nfv-virtualApplication-iui-scale-field-num=数量\r
+nfv-virtualApplication-iui-scale-field-name=名称\r
+nfv-virtualApplication-iui-scale-field-operation=操作\r
+\r
+nfv-virtualApplication-iui-operation-init=部署\r
+nfv-virtualApplication-iui-operation-conf=配置\r
+nfv-virtualApplication-iui-operation-start=启动\r
+nfv-virtualApplication-iui-operation-stop=停止\r
+nfv-virtualApplication-iui-operation-scaleIn=缩容\r
+nfv-virtualApplication-iui-operation-scaleOut=扩容\r
+nfv-virtualApplication-iui-operation-delete=删除\r
+\r
+nfv-virtualApplication-iui-status-normal=已部署\r
+nfv-virtualApplication-iui-status-finish=执行完成\r
+nfv-virtualApplication-iui-status-failed=执行失败\r
+\r
+nfv-virtualApplication-iui-status-processing=部署中\r
+nfv-virtualApplication-iui-status-execute=执行中\r
+nfv-virtualApplication-iui-status-init=部署中\r
+nfv-virtualApplication-iui-status-conf=配置执行中\r
+nfv-virtualApplication-iui-status-start=启动执行中\r
+nfv-virtualApplication-iui-status-stop=停止执行中\r
+nfv-virtualApplication-iui-status-scaleIn=缩容执行中\r
+nfv-virtualApplication-iui-status-scaleOut=扩容执行中\r
+nfv-virtualApplication-iui-status-delete=删除执行中\r
+\r
+nfv-virtualApplication-iui-text-title=创建应用\r
+nfv-virtualApplication-iui-text-createVm=创建应用\r
+nfv-virtualApplication-iui-text-name=名称\r
+nfv-virtualApplication-iui-text-description=描述\r
+nfv-virtualApplication-iui-text-template=模板\r
+nfv-virtualApplication-iui-text-templateDes=模板描述\r
+nfv-virtualApplication-iui-text-vnfm=VNFM\r
+nfv-virtualApplication-iui-text-tab-basic=基本信息\r
+nfv-virtualApplication-iui-text-tab-flavor=规格参数\r
+nfv-virtualApplication-iui-text-tab-operationParam=输入参数\r
+\r
+nfv-virtualApplication-iui-text-flavor=规格\r
+nfv-virtualApplication-iui-text-flavorDesc=规格描述\r
+nfv-virtualApplication-iui-text-flavor-numberOfInstances=实例数\r
+nfv-virtualApplication-iui-text-flavor-refNodeFlavor=引用规格\r
+nfv-virtualApplication-iui-text-flavor-affinity=亲和力\r
+nfv-virtualApplication-iui-text-flavor-redundancyModel=容灾模式\r
+nfv-virtualApplication-iui-text-flavor-capability=能力\r
+nfv-virtualApplication-iui-text-input-planTitle=Plan\r
+\r
+nfv-virtualApplication-iui-text-scale-name=VNF名称\r
+nfv-virtualApplication-iui-text-scale-oeprationType=操作类型\r
+nfv-virtualApplication-iui-text-scale-oeprationType-type=类型\r
+nfv-virtualApplication-iui-text-scale-oeprationType-instance=实例\r
+nfv-virtualApplication-iui-text-scale-vduBtn-title=添加VDU\r
+nfv-virtualApplication-iui-text-scale-vnf-title=已选择的VNF\r
+nfv-virtualApplication-iui-text-scale-vnf-name=VNF\r
+nfv-virtualApplication-iui-text-scale-vnf-vduType=VDU类型\r
+nfv-virtualApplication-iui-text-scale-vnf-num=数量\r
+nfv-virtualApplication-iui-text-scale-vnf-vduInstance=VDU实例\r
+nfv-virtualApplication-iui-text-scale-vnf-numTip=实例数\r
+nfv-virtualApplication-iui-text-scale-vnf-nameTip=名称\r
+nfv-virtualApplication-iui-text-scale-type-title=VDU类型\r
+nfv-virtualApplication-iui-text-scale-instance-title=VDU实例\r
+nfv-virtualApplication-iui-text-scale-instance-cancelBtn=取消\r
+nfv-virtualApplication-iui-text-scale-instance-confirmBtn=确定\r
+nfv-virtualApplication-iui-text-scale-validate-message=该VNF已选择\r
+nfv-virtualApplication-iui-text-scale-out-modal-title=扩容参数\r
+nfv-virtualApplication-iui-text-scale-in-modal-title=缩容参数\r
+\r
+nfv-virtualApplication-iui-text-createBtn=创建\r
+nfv-virtualApplication-iui-text-cancelBtn=取消\r
+nfv-virtualApplication-iui-text-previousBtn=上一步\r
+nfv-virtualApplication-iui-text-nextBtn=下一步\r
+nfv-virtualApplication-iui-text-confirmBtn=确定\r
+nfv-virtualApplication-iui-text-params=参数\r
+\r
+nfv-virtualApplication-iui-message-delete-confirm=确定要删除当前应用?\r
+nfv-virtualApplication-iui-message-delete-success=应用删除成功。\r
+nfv-virtualApplication-iui-message-delete-fail=应用删除失败。\r
+nfv-virtualApplication-iui-message-create-success=应用创建成功。\r
+nfv-virtualApplication-iui-message-create-fail=应用创建失败。\r
+\r
+nfv-virtualApplication-iui-validate-instanceName=请输入名称\r
+nfv-virtualApplication-iui-validate-serviceTemplateName=请选择服务模板\r
+nfv-virtualApplication-iui-validate-flavor=请选择规格\r
+nfv-virtualApplication-iui-validate-vimId=请选择VIM\r
+nfv-virtualApplication-iui-validate-vnfmId=请选择VNFM\r
+nfv-virtualApplication-iui-validate-inputParam=请输入参数\r
+nfv-virtualApplication-iui-validate-noinputParam=无需输入参数\r
+nfv-virtualApplication-iui-validate-digits=只能输入整数\r
+nfv-virtualApplication-iui-validate-range=请输入在 {0} 和 {1} 之间的值\r
+\r
+//节点明细表格字段名称定义\r
+nfv-virtualApplicationDetail-iui-field-nodeId=ID\r
+nfv-virtualApplicationDetail-iui-field-nodeName=名称\r
+nfv-virtualApplicationDetail-iui-field-nodeType=节点类型\r
+nfv-virtualApplicationDetail-iui-field-templateType=模板类型\r
+nfv-virtualApplicationDetail-iui-field-host=IP\r
+nfv-virtualApplicationDetail-iui-field-createTime=创建时间\r
+\r
+nfv-virtualApplicationDetail-iui-field-currentStepName=名称\r
+nfv-virtualApplicationDetail-iui-field-currentStepStatus=状态\r
+nfv-virtualApplicationDetail-iui-field-percent=当前进度\r
+nfv-virtualApplicationDetail-iui-field-currentStepDesc=描述\r
+nfv-virtualApplicationDetail-iui-field-executionTime=执行时间\r
+\r
+nfv-virtualApplicationDetail-iui-text-events=事件\r
+nfv-virtualApplicationDetail-iui-text-nodeDetail=节点详情\r
+nfv-virtualApplicationDetail-iui-btn-close=关闭\r
+\r
+//主机镜像表格字段名称定义\r
+nfv-host-iui-title=主机镜像\r
+nfv-host-iui-field-name=名称\r
+nfv-host-iui-field-size=大小\r
+nfv-host-iui-field-vimUser=租户\r
+nfv-host-iui-field-createTime=创建时间\r
+nfv-host-iui-field-status=状态\r
+nfv-host-iui-field-progress=进度\r
+nfv-host-iui-field-operation=操作\r
+\r
+nfv-host-iui-operation-delete=删除\r
+\r
+nfv-host-iui-text-title=上传镜像\r
+nfv-host-iui-text-uploadImage=上传镜像\r
+nfv-host-iui-text-local=本地上传\r
+nfv-host-iui-text-url=URL上传\r
+nfv-host-iui-text-image=镜像文件\r
+nfv-host-iui-text-imageurl=镜像URL\r
+nfv-host-iui-text-name=镜像名称\r
+nfv-host-iui-text-tenant=租户\r
+nfv-host-iui-btn-upload=上传\r
+nfv-host-iui-btn-cancel=取消\r
+\r
+nfv-host-iui-validate-file=请选择镜像文件\r
+nfv-host-iui-validate-hosturl-required=请输入URL地址\r
+nfv-host-iui-validate-hosturl-url=请输入正确的URL地址\r
+nfv-host-iui-validate-hostName=请输入镜像名称\r
+nfv-host-iui-validate-vim=请选择VIM\r
+\r
+nfv-host-iui-message-upload-success=镜像上传成功。\r
+nfv-host-iui-message-upload-failed=镜像上传失败。\r
+nfv-host-iui-message-delete-confirm=确定要删除当前镜像?\r
+nfv-host-iui-message-delete-success=镜像删除成功。\r
+nfv-host-iui-message-delete-failed=镜像删除失败。\r
+\r
+nfv-host-iui-progress-uploading=上传中\r
+nfv-host-iui-progress-success=上传成功\r
+nfv-host-iui-progress-fail=上传失败\r
+\r
+//软件镜像表格字段名称定义\r
+nfv-software-iui-title=软件镜像\r
+nfv-software-iui-field-name=名称\r
+nfv-software-iui-field-size=大小\r
+nfv-software-iui-field-type=类型\r
+nfv-software-iui-field-version=版本\r
+nfv-software-iui-field-location=位置\r
+nfv-software-iui-field-createTime=创建时间\r
+nfv-software-iui-field-operation=操作\r
+\r
+nfv-software-iui-action-delete=删除\r
+nfv-software-iui-action-onboard=Onboard\r
+\r
+nfv-software-iui-text-title=上传镜像\r
+nfv-software-iui-text-uploadImage=上传镜像\r
+nfv-software-iui-text-image=镜像文件\r
+nfv-software-iui-text-image-select=选择\r
+nfv-software-iui-text-image-remove=移除\r
+nfv-software-iui-text-type=类型\r
+nfv-software-iui-text-version=版本\r
+nfv-software-iui-btn-upload=上传\r
+nfv-software-iui-btn-cancel=取消\r
+\r
+nfv-software-iui-message-delete-confirm=确定要删除当前镜像?\r
+nfv-software-iui-message-delete-success=镜像删除成功。\r
+\r
+//vnfm\r
+nfv-vnfm-iui-title=VNFM管理\r
+nfv-vnfm-iui-message-title=vnfm信息\r
+nfv-vnfm-iui-message-query-fail=查询vnfm失败。\r
+nfv-vnfm-iui-message-save-success=保存成功。\r
+nfv-vnfm-iui-message-save-fail=保存失败。\r
+nfv-vnfm-iui-message-update-success=修改成功。\r
+nfv-vnfm-iui-message-update-fail=修改失败。\r
+nfv-vnfm-iui-message-delete-confirm=确定删除所选vnfm信息?\r
+nfv-vnfm-iui-message-delete-success=删除成功\r
+nfv-vnfm-iui-message-delete-fail=删除失败\r
+\r
+nfv-vnfm-iui-test-update=修改vnfm信息\r
+nfv-vnfm-iui-text-register=注册vnfm信息\r
+nfv-vnfm-iui-text-name=名称\r
+nfv-vnfm-iui-text-moc=类型\r
+nfv-vnfm-iui-text-vendor=厂商\r
+nfv-vnfm-iui-text-userName=接入用户\r
+nfv-vnfm-iui-text-password=接入密码\r
+nfv-vnfm-iui-text-cancelBtn=取消\r
+nfv-vnfm-iui-text-saveBtn=保存\r
+nfv-vnfm-iui-text-registerBtn=注册vnfm\r
+nfv-vnfm-iui-text-status-normal=正常\r
+nfv-vnfm-iui-text-status-fail=报警\r
+nfv-vnfm-iui-text-total=共\r
+nfv-vnfm-iui-text-total-vnfm= vnfm\r
+\r
+nfv-vnfm-iui-validate-name=请输入名称\r
+nfv-vnfm-iui-validate-moc=请输入vnfm类型\r
+nfv-vnfm-iui-validate-vim=请选择VIM\r
+nfv-vnfm-iui-validate-url-required=请输入URL\r
+nfv-vnfm-iui-validate-url=请输入正确的URL\r
+nfv-vnfm-iui-text-url-tip=例如:http://10.0.0.1
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/image/details_close.png b/openo-portal/portal-catalog/src/main/webapp/catalog/image/details_close.png
new file mode 100644 (file)
index 0000000..e6281ba
Binary files /dev/null and b/openo-portal/portal-catalog/src/main/webapp/catalog/image/details_close.png differ
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/image/details_open.png b/openo-portal/portal-catalog/src/main/webapp/catalog/image/details_open.png
new file mode 100644 (file)
index 0000000..5bf4389
Binary files /dev/null and b/openo-portal/portal-catalog/src/main/webapp/catalog/image/details_open.png differ
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/image/down.png b/openo-portal/portal-catalog/src/main/webapp/catalog/image/down.png
new file mode 100644 (file)
index 0000000..f7732ba
Binary files /dev/null and b/openo-portal/portal-catalog/src/main/webapp/catalog/image/down.png differ
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/image/pointes_blue.png b/openo-portal/portal-catalog/src/main/webapp/catalog/image/pointes_blue.png
new file mode 100644 (file)
index 0000000..cdba2df
Binary files /dev/null and b/openo-portal/portal-catalog/src/main/webapp/catalog/image/pointes_blue.png differ
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/image/pointes_green.png b/openo-portal/portal-catalog/src/main/webapp/catalog/image/pointes_green.png
new file mode 100644 (file)
index 0000000..18ba67e
Binary files /dev/null and b/openo-portal/portal-catalog/src/main/webapp/catalog/image/pointes_green.png differ
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_asc.png b/openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_asc.png
new file mode 100644 (file)
index 0000000..a88d797
Binary files /dev/null and b/openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_asc.png differ
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_asc_disabled.png b/openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_asc_disabled.png
new file mode 100644 (file)
index 0000000..fb11dfe
Binary files /dev/null and b/openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_asc_disabled.png differ
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_both.png b/openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_both.png
new file mode 100644 (file)
index 0000000..1867040
Binary files /dev/null and b/openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_both.png differ
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_desc.png b/openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_desc.png
new file mode 100644 (file)
index 0000000..def071e
Binary files /dev/null and b/openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_desc.png differ
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_desc_disabled.png b/openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_desc_disabled.png
new file mode 100644 (file)
index 0000000..c9fdd8a
Binary files /dev/null and b/openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_desc_disabled.png differ
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/image/up.png b/openo-portal/portal-catalog/src/main/webapp/catalog/image/up.png
new file mode 100644 (file)
index 0000000..8bd5374
Binary files /dev/null and b/openo-portal/portal-catalog/src/main/webapp/catalog/image/up.png differ
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/js/component/commonUtil.js b/openo-portal/portal-catalog/src/main/webapp/catalog/js/component/commonUtil.js
new file mode 100644 (file)
index 0000000..abc4cd6
--- /dev/null
@@ -0,0 +1,128 @@
+/*\r
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ *         http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ */\r
+var commonUtil = {};\r
+commonUtil.arrayRemove = function( aryInstance , index ){\r
+    if(aryInstance == undefined || aryInstance == null){\r
+        return;\r
+    }\r
+    for(var i=0,n=0;i<aryInstance.length;i++) {\r
+        if(aryInstance[i]!=aryInstance[dx]) {\r
+            aryInstance[n++]=aryInstance[i];\r
+        }\r
+    }\r
+    aryInstance.length-=1;\r
+};\r
+\r
+//For the expansion of the Date, convert the Date to specify the format String\r
+// examples:\r
+// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423\r
+// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18\r
+commonUtil.parseDate = function( dateObj , format){\r
+    var o = {\r
+        "M+" : dateObj.getMonth()+1, //month\r
+        "d+" : dateObj.getDate(),    //day\r
+        "h+" : dateObj.getHours(),   //hour\r
+        "m+" : dateObj.getMinutes(), //minute\r
+        "s+" : dateObj.getSeconds(), //second\r
+        "q+" : Math.floor((dateObj.getMonth()+3)/3),  //quarter\r
+        "S" : dateObj.getMilliseconds() //millisecond\r
+    }\r
+    if(/(y+)/.test(format)) format=format.replace(RegExp.$1,\r
+        (dateObj.getFullYear()+"").substr(4 - RegExp.$1.length));\r
+    for(var k in o)\r
+        if(new RegExp("("+ k +")").test(format))\r
+            format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] :\r
+                    ("00"+ o[k]).substr((""+ o[k]).length));\r
+    return format;\r
+};\r
+\r
+//tooltip\r
+commonUtil.showMessage = function(message, type) {\r
+    $.growl({\r
+        icon: "fa fa-envelope-o fa-lg",\r
+        title: "&nbsp;&nbsp;" + $.i18n.prop("nfv-nso-iui-common-tip"),\r
+        message: message\r
+    },{\r
+        type: type\r
+    });\r
+};\r
+\r
+commonUtil.registerCometdMessage = function(url, channel, callback) {\r
+    var cometd = new $.Cometd();\r
+    var cometdURL = location.protocol + "//" + location.host + url;\r
+    cometd.configure({\r
+        url : cometdURL,\r
+        logLevel : "info"\r
+    });\r
+    // unregister websocket transport, use long-polling transport\r
+    cometd.unregisterTransport('websocket');\r
+    // store channel object parameters(this object include channel and callback function), start from arguments[1]\r
+    var _args = arguments;  \r
+\r
+    cometd.addListener("/meta/handshake", function(handshake){\r
+        if(handshake.successful === true) {\r
+            cometd.batch(function() {\r
+                //subscribe channel\r
+                cometd.subscribe(channel, function(message){\r
+                    callback.call(this, message.data);\r
+                });\r
+            });\r
+        }\r
+    });\r
+    cometd.handshake();\r
+}\r
+\r
+commonUtil.format = function() {\r
+    if(arguments.length == 0) {\r
+        return null;\r
+    }\r
+    var str = arguments[0];\r
+    for(var i=0; i<arguments.length; i++) {\r
+        var reg = new RegExp("\\{" + (i - 1) + "\\}" , "gm");\r
+        str = str.replace(reg, arguments[i]);\r
+    }\r
+    return str;\r
+}\r
+\r
+commonUtil.get = function(url, params, callback) {\r
+    $.ajax({\r
+        type : "GET",\r
+        url : url,\r
+        //contentType : contentType || "application/x-www-form-urlencoded; charset=UTF-8",\r
+        dataType : "json",\r
+        data : params || {},\r
+        success : callback\r
+    });\r
+}\r
+\r
+commonUtil.post = function(url, params, callback, contentType) {\r
+    $.ajax({\r
+        type : "POST",\r
+        url : url,\r
+        contentType : contentType || "application/x-www-form-urlencoded; charset=UTF-8",\r
+        data : params || {},\r
+        success : callback\r
+    });\r
+}\r
+\r
+commonUtil.delete = function(url, callback, contentType) {\r
+    $.ajax({\r
+        type : "DELETE",\r
+        url : url,\r
+        contentType : contentType || "application/x-www-form-urlencoded; charset=UTF-8",\r
+        success : callback\r
+    });\r
+}
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/js/component/loadi18n_nsoc.js b/openo-portal/portal-catalog/src/main/webapp/catalog/js/component/loadi18n_nsoc.js
new file mode 100644 (file)
index 0000000..d49d223
--- /dev/null
@@ -0,0 +1,23 @@
+function loadPropertiesSideMenu(lang, fileNamePrefix, filePath){
+       jQuery.i18n.properties({
+           language:lang,
+           name:fileNamePrefix,
+           path:filePath,
+           mode:'map',
+           callback: function() {
+               var i18nItems = $("[name_i18n=com_zte_nfv_nsoc_i18n]");
+               for(var i=0;i<i18nItems.length;i++) {
+                       var $item = $(i18nItems.eq(i));
+                       var itemId = $item.attr("id");
+                       var itemTitle = $item.attr("title");
+                       if(typeof(itemTitle) != "undefined") {
+                               $item.attr("title", $.i18n.prop(itemId));
+                       } else {
+                               $item.text($.i18n.prop(itemId));
+                       }
+               }
+           }
+       });
+}
+var lang = getLanguage();
+loadPropertiesSideMenu(lang, 'nfv-nso-iui-i18n', 'i18n/');
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/js/component/serverPageTable.js b/openo-portal/portal-catalog/src/main/webapp/catalog/js/component/serverPageTable.js
new file mode 100644 (file)
index 0000000..5a7b390
--- /dev/null
@@ -0,0 +1,490 @@
+/*\r
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ *         http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ */\r
+var serverPageTable = {};\r
+/* Bootstrap style full number pagination control */\r
+$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )\r
+{\r
+    return {\r
+        "iStart":         oSettings._iDisplayStart,\r
+        "iEnd":           oSettings.fnDisplayEnd(),\r
+        "iLength":        oSettings._iDisplayLength,\r
+        "iTotal":         oSettings.fnRecordsTotal(),\r
+        "iFilteredTotal": oSettings.fnRecordsDisplay(),\r
+        "iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),\r
+        "iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )\r
+    };\r
+};\r
+\r
+$.extend( $.fn.dataTableExt.oPagination, {\r
+    "bootstrap_extended": {\r
+        "fnInit": function( oSettings, nPaging, fnDraw ) {\r
+            var oLang = oSettings.oLanguage.oPaginate;\r
+            var oPaging = oSettings.oInstance.fnPagingInfo();\r
+\r
+            var fnClickHandler = function ( e ) {\r
+                e.preventDefault();\r
+                if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {\r
+                    fnDraw( oSettings );\r
+                }\r
+            };\r
+\r
+            $(nPaging).append(\r
+                '<div class="pagination-panel"> ' + oLang.sPage + ' ' +\r
+                '<a href="#" class="btn btn-sm default prev disabled" title="' + oLang.sPrevious + '"><i class="fa fa-angle-left"></i></a>' +\r
+                '<input type="text" class="pagination-panel-input input-mini input-inline input-sm" maxlenght="5" style="text-align:center; margin: 0 4px; border: 1px solid rgb(169, 169, 169);height: 28px;">' +\r
+                '<a href="#" class="btn btn-sm default next disabled" title="' + oLang.sNext + '"><i class="fa fa-angle-right"></i></a> ' +\r
+                oLang.sPageOf + ' <span class="pagination-panel-total"></span>' +\r
+                '</div>'\r
+            );\r
+\r
+            var els = $('a', nPaging);\r
+\r
+            $(els[0]).bind('click.DT', { action: "previous" }, fnClickHandler );\r
+            $(els[1]).bind('click.DT', { action: "next" }, fnClickHandler);\r
+\r
+            $('.pagination-panel-input', nPaging).bind('change.DT', function(e) {\r
+                var oPaging = oSettings.oInstance.fnPagingInfo();\r
+                e.preventDefault();\r
+                var page = parseInt($(this).val());\r
+                if (page > 0 && page < oPaging.iTotalPages) {\r
+                    if ( oSettings.oApi._fnPageChange(oSettings, page-1) ) {\r
+                        fnDraw( oSettings );\r
+                    }\r
+                } else {\r
+                    $(this).val(oPaging.iPage + 1);\r
+                }\r
+            });\r
+\r
+            $('.pagination-panel-input', nPaging).bind('keypress.DT', function(e) {\r
+                var oPaging = oSettings.oInstance.fnPagingInfo();\r
+                if (e.which == 13) {\r
+                    var page = parseInt($(this).val());\r
+                    if (page > 0 && page < oSettings.oInstance.fnPagingInfo().iTotalPages) {\r
+                        if ( oSettings.oApi._fnPageChange(oSettings, page-1) ) {\r
+                            fnDraw( oSettings );\r
+                        }\r
+                    } else {\r
+                        $(this).val(oPaging.iPage + 1);\r
+                    }\r
+                    e.preventDefault();\r
+                }\r
+            });\r
+        },\r
+\r
+        "fnUpdate": function ( oSettings, fnDraw ) {\r
+            var iListLength = 5;\r
+            var oPaging = oSettings.oInstance.fnPagingInfo();\r
+            var an = oSettings.aanFeatures.p;\r
+            var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);\r
+\r
+            if ( oPaging.iTotalPages < iListLength) {\r
+                iStart = 1;\r
+                iEnd = oPaging.iTotalPages;\r
+            }\r
+            else if ( oPaging.iPage <= iHalf ) {\r
+                iStart = 1;\r
+                iEnd = iListLength;\r
+            } else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {\r
+                iStart = oPaging.iTotalPages - iListLength + 1;\r
+                iEnd = oPaging.iTotalPages;\r
+            } else {\r
+                iStart = oPaging.iPage - iHalf + 1;\r
+                iEnd = iStart + iListLength - 1;\r
+            }\r
+\r
+\r
+            for ( i=0, iLen=an.length ; i<iLen ; i++ ) {\r
+                var wrapper = $(an[i]).parents(".dataTables_wrapper");\r
+\r
+                if (oPaging.iTotalPages <= 0) {\r
+                    $('.pagination-panel, .dataTables_length', wrapper).hide();\r
+                } else {\r
+                    $('.pagination-panel, .dataTables_length', wrapper).show();\r
+                }\r
+\r
+                $('.pagination-panel-total', an[i]).html(oPaging.iTotalPages);\r
+                $('.pagination-panel-input', an[i]).val(oPaging.iPage + 1);\r
+\r
+                // Remove the middle elements\r
+                $('li:gt(1)', an[i]).filter(':not(.next)').remove();\r
+\r
+                // Add the new list items and their event handlers\r
+                for ( j=iStart ; j<=iEnd ; j++ ) {\r
+                    sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';\r
+                    $('<li '+sClass+'><a href="#">'+j+'</a></li>')\r
+                        .insertBefore( $('li.next:first', an[i])[0] )\r
+                        .bind('click', function (e) {\r
+                            e.preventDefault();\r
+                            oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;\r
+                            fnDraw( oSettings );\r
+                        } );\r
+                }\r
+\r
+                // Add / remove disabled classes from the static elements\r
+                if ( oPaging.iPage === 0 ) {\r
+                    $('a.prev', an[i]).addClass('disabled');\r
+                } else {\r
+                    $('a.prev', an[i]).removeClass('disabled');\r
+                }\r
+\r
+                if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {\r
+                    $('a.next', an[i]).addClass('disabled');\r
+                } else {\r
+                    $('a.next', an[i]).removeClass('disabled');\r
+                }\r
+            }\r
+        }\r
+    }\r
+} );\r
+\r
+serverPageTable.getRestPara = function( cond , tableSetting ){\r
+    var pageNo=tableSetting._iDisplayStart/tableSetting._iDisplayLength+1;\r
+    var pageSize = tableSetting._iDisplayLength;\r
+    var queryParameter={"pageNo":pageNo,"pageSize":tableSetting._iDisplayLength,groupId:["it.group.database=02","it.group.server=01"]},\r
+        newData={"data":JSON.stringify(queryParameter)};\r
+    //put the pageinfo in cond if there is a pageinfo \r
+    var pageInfo = vm.logInfo[vm.logType].pageInfo;\r
+    if(pageInfo != null && serverPageTable.perpagenumber == pageSize){ \r
+        cond.idEnd = pageInfo.pageStart[pageNo - 1];\r
+        cond.idStart = pageInfo.pageStart[pageNo];\r
+        if(!cond.idStart){ //the last page\r
+            cond.idStart = 0;\r
+        }\r
+\r
+    }else{\r
+        delete cond.idStart;\r
+        delete cond.idEnd;\r
+        vm.logInfo[vm.logType].pageInfo = null;\r
+        pageNo = 1;\r
+        tableSetting._iDisplayStart = 0;\r
+    }\r
+    var data = {\r
+        cond:JSON.stringify(cond),\r
+        perpagenumber:pageSize,\r
+        pageNo:pageNo,\r
+        needPageInfo:vm.logInfo[vm.logType].pageInfo == null\r
+    };\r
+    serverPageTable.perpagenumber = pageSize;\r
+    return data;\r
+};\r
+\r
+serverPageTable.initTableWithoutLib = function( setting ,cond , divId) {\r
+    //transform colomn\r
+    var column = setting.columns;\r
+    //empty table\r
+    $('#'+ divId).children().remove();\r
+    var tableId = setting.tableId;\r
+    var tableEleStr = '<table class="table table-striped table-bordered table-hover" id= '+ tableId + '>'\r
+        + '<thead>'\r
+        +'<tr role="row" class="heading" >'\r
+        + '</tr>'\r
+        + '</thead>'\r
+        +'<tbody>'\r
+        +'</tbody>'\r
+        +'</table>';\r
+    $('#'+ divId).append(tableEleStr);\r
+    //$('#'+ tableId).append(' <thead><tr role="row" class="heading" ></tr></thead><tbody></tbody>');\r
+    var trEle = $('#'+ tableId  + ' > thead >tr');\r
+    //var dataTableColumn = [];\r
+    for ( var one in column){\r
+        var th = '<th>' + column[one].name + '</th>';\r
+        trEle.append(th);\r
+    }\r
+    var table = $("#" + tableId).dataTable({\r
+        //"sDom" : "tr<'row'<'col-md-6 col-sm-12'><'col-md-6 col-sm-12'pli>>", // datatable layout\r
+        //"sDom" : "<'row'<'col-md-12 col-sm-12'lip>r><'table-scrollable't>>",\r
+        //"sDom": '<"top"rt><"bottom"lip>',\r
+        "sDom": '<"top"rt>',\r
+        "oLanguage": setting.language,//language\r
+        //"bJQueryUI": true,\r
+        "bPaginate": setting.paginate,// page button\r
+        "bFilter": false,// search bar\r
+        "bAutoWidth":true,//automatically set colum width\r
+        "bLengthChange": true,// record number in each row\r
+        "iDisplayLength": 10,// row number in each page\r
+        "bSort": setting.sort ? true : false,// sort\r
+        "bInfo": setting.info,// Showing 1 to 10 of 23 entries\r
+        "bWidth": true,\r
+        "bScrollCollapse": true,\r
+        "sPaginationType": "bootstrap_extended", // page, a total of two kinds of style, another one is two_button\r
+        "bProcessing": true,\r
+        "bServerSide": false,\r
+        "bDestroy": true,\r
+        "bSortCellsTop": true,\r
+        "sAjaxSource": setting.restUrl,\r
+        "aoColumns": setting.columns,\r
+        "aoColumnDefs": [\r
+            {\r
+                sDefaultContent: '',\r
+                aTargets: [ '_all' ]\r
+            }\r
+        ],\r
+        "fnServerData": function (sSource, aoData, fnCallback, oSettings) {\r
+            oSettings.jqXHR = $.ajax({\r
+                "type": 'get',\r
+                "url": sSource,\r
+                "dataType": "json",\r
+                //"data":serverPageTable.getRestPara(cond,oSettings),\r
+                "success": function (resp) {\r
+                    oSettings.iDraw = oSettings.iDraw + 1;\r
+\r
+                    resp = resp || [];\r
+                    var data = {};\r
+                    data.aaData = resp;\r
+                    var totalCounts = resp.length;\r
+\r
+                    data.iTotalRecords = totalCounts;\r
+                    data.iTotalDisplayRecords = totalCounts;\r
+                    data.sEcho = oSettings;\r
+                    fnCallback(data);\r
+                },\r
+                "error": function(resp) {\r
+                    var data = {};\r
+                    data.aaData = [];\r
+                    var totalCounts = 0;\r
+\r
+                    data.iTotalRecords = totalCounts;\r
+                    data.iTotalDisplayRecords = totalCounts;\r
+                    data.sEcho = oSettings;\r
+                    fnCallback(data);\r
+                }\r
+            });\r
+        }\r
+    });\r
+};\r
+\r
+serverPageTable.initDataTable = function( setting ,cond , divId) {\r
+    //transform colomn\r
+    var column = setting.columns;\r
+    //empty table\r
+    $('#'+ divId).children().remove();\r
+    var tableId = setting.tableId;\r
+    var tableEleStr = '<table class="table table-striped table-bordered table-hover" id= '+ tableId + '>'\r
+        + '<thead>'\r
+        +'<tr role="row" class="heading" >'\r
+        + '</tr>'\r
+        + '</thead>'\r
+        +'<tbody>'\r
+        +'</tbody>'\r
+        +'</table>';\r
+    $('#'+ divId).append(tableEleStr);\r
+    //$('#'+ tableId).append(' <thead><tr role="row" class="heading" ></tr></thead><tbody></tbody>');\r
+    var trEle = $('#'+ tableId  + ' > thead >tr');\r
+    //var dataTableColumn = [];\r
+    for ( var one in column){\r
+        var th = '<th>' + column[one].name + '</th>';\r
+        trEle.append(th);\r
+    }\r
+    var table = $("#" + tableId).dataTable({\r
+        //"sDom" : "tr<'row'<'col-md-6 col-sm-12'><'col-md-6 col-sm-12'pli>>", // datatable layout\r
+        //"sDom" : "<'row'<'col-md-12 col-sm-12'lip>r><'table-scrollable't>>",\r
+        "sDom": '<"top"rt><"bottom"lip>',\r
+        "oLanguage": setting.language,//language\r
+        //"bJQueryUI": true,\r
+        "bPaginate": setting.paginate,// page button\r
+        "bFilter": false,// search bar\r
+        "bAutoWidth":true,//automatically set colum width\r
+        "bLengthChange": true,// record number in each row\r
+        "iDisplayLength": 10,// row number in each page\r
+        "bSort": setting.sort ? true : false,// sort\r
+        "bInfo": setting.info,// Showing 1 to 10 of 23 entries \r
+        "bWidth": true,\r
+        "bScrollCollapse": true,\r
+        "sPaginationType": "bootstrap_extended", // page, a total of two kinds of style, another one is two_button\r
+        "bProcessing": true,\r
+        "bServerSide": false,\r
+        "bDestroy": true,\r
+        "bSortCellsTop": true,\r
+        "sAjaxSource": setting.restUrl,\r
+        "aoColumns": setting.columns,\r
+        "aoColumnDefs": [\r
+            {\r
+                sDefaultContent: '',\r
+                aTargets: [ '_all' ]\r
+            }\r
+        ],\r
+        "fnServerData": function (sSource, aoData, fnCallback, oSettings) {\r
+            oSettings.jqXHR = $.ajax({\r
+                "type": 'get',\r
+                "url": sSource,\r
+                "dataType": "json",\r
+                //"data":serverPageTable.getRestPara(cond,oSettings),\r
+                "success": function (resp) {                                       \r
+                    oSettings.iDraw = oSettings.iDraw + 1;\r
+                    \r
+                    resp = resp || [];\r
+                    var data = {};\r
+                    data.aaData = resp;\r
+                    var totalCounts = resp.length;\r
+                    \r
+                    data.iTotalRecords = totalCounts;\r
+                    data.iTotalDisplayRecords = totalCounts;\r
+                    data.sEcho = oSettings;\r
+                    fnCallback(data);\r
+                },\r
+                "error": function(resp) {\r
+                    var data = {};\r
+                    data.aaData = [];\r
+                    var totalCounts = 0;\r
+                    \r
+                    data.iTotalRecords = totalCounts;\r
+                    data.iTotalDisplayRecords = totalCounts;\r
+                    data.sEcho = oSettings;\r
+                    fnCallback(data);\r
+                }\r
+            });\r
+        }\r
+    });\r
+};\r
+\r
+serverPageTable.initTableWithData = function( setting , divId , tableData) {\r
+    //transform colomn\r
+    var column = setting.columns;\r
+    //empty table\r
+    $('#'+ divId).children().remove();\r
+    var tableId = setting.tableId;\r
+    var tableEleStr = '<table class="table table-striped table-bordered table-hover" id= '+ tableId + '>'\r
+        + '<thead>'\r
+        +'<tr role="row" class="heading" >'\r
+        + '</tr>'\r
+        + '</thead>'\r
+        +'<tbody>'\r
+        +'</tbody>'\r
+        +'</table>';\r
+    $('#'+ divId).append(tableEleStr);\r
+    var trEle = $('#'+ tableId  + ' > thead >tr');\r
+    for ( var one in column){\r
+        var th = '<th>' + column[one].name + '</th>';\r
+        trEle.append(th);\r
+    }\r
+    var table = $("#" + tableId).dataTable({\r
+        "sDom" : "<'row'<'col-md-12 col-sm-12'lip>r>>",\r
+        "oLanguage": setting.language,//language\r
+        //"bJQueryUI": true,\r
+        "bPaginate": setting.paginate,// page button\r
+        "bFilter": false,// search bar\r
+        "bAutoWidth":true,//automatically set the column width\r
+        "bLengthChange": true,// record number in each row\r
+        "iDisplayLength": 10,// row number in each page\r
+        "bSort": setting.sort ? true : false,// sort\r
+        "bInfo": setting.info,// Showing 1 to 10 of 23 entries\r
+        "bWidth": true,\r
+        "bScrollCollapse": true,\r
+        "sPaginationType": "bootstrap_extended", // page, a total of two kinds of style, another one is two_button\r
+        "bProcessing": false,\r
+        "bServerSide": false,\r
+        "bDestroy": true,\r
+        "bSortCellsTop": true,\r
+        "sAjaxSource": tableData,\r
+        "aoColumns": setting.columns,\r
+        "fnServerData": function (sSource, aoData, fnCallback, oSettings) {                    \r
+            oSettings.iDraw = oSettings.iDraw + 1;            \r
+            var resp = tableData || [];\r
+            var data = {};\r
+            data.aaData = resp;\r
+            var totalCounts = resp.length;\r
+            \r
+            data.iTotalRecords = totalCounts;\r
+            data.iTotalDisplayRecords = totalCounts;\r
+            data.sEcho = oSettings;\r
+            fnCallback(data); \r
+        }\r
+    });\r
+};\r
+\r
+\r
+serverPageTable.initDataTableForEvent = function( setting ,cond , divId) {\r
+    //transform colomn\r
+    var column = setting.columns;\r
+    //empty table\r
+    $('#'+ divId).children().remove();\r
+    var tableId = setting.tableId;\r
+    var tableEleStr = '<table class="table table-striped table-bordered table-hover" id= '+ tableId + '>'\r
+        + '<thead>'\r
+        +'<tr role="row" class="heading" >'\r
+        + '</tr>'\r
+        + '</thead>'\r
+        +'<tbody>'\r
+        +'</tbody>'\r
+        +'</table>';\r
+    $('#'+ divId).append(tableEleStr);\r
+    var trEle = $('#'+ tableId  + ' > thead >tr');\r
+    for ( var one in column){\r
+        var th = '<th>' + column[one].name + '</th>';\r
+        trEle.append(th);\r
+    }\r
+    var table = $("#" + tableId).dataTable({\r
+        "sDom": '<"top"rt><"bottom"lip>',\r
+        "oLanguage": setting.language,//language\r
+        //"bJQueryUI": true,\r
+        "bPaginate": setting.paginate,// page button\r
+        "bFilter": false,// search bar\r
+        "bAutoWidth":true,//automatically set the column width\r
+        "bLengthChange": true,// record number in each row\r
+        "iDisplayLength": 10,// row number in each page\r
+        "bSort": setting.sort ? true : false,// 排序\r
+        "bInfo": setting.info,// Showing 1 to 10 of 23 entries \r
+        "bWidth": true,\r
+        "bScrollCollapse": true,\r
+        "sPaginationType": "bootstrap_extended", // page, a total of two kinds of style, another one is two_button\r
+        "bProcessing": true,\r
+        "bServerSide": false,\r
+        "bDestroy": true,\r
+        "bSortCellsTop": true,\r
+        "sAjaxSource": setting.restUrl,\r
+        "aoColumns": setting.columns,\r
+        "aoColumnDefs": [\r
+            {\r
+                sDefaultContent: '',\r
+                aTargets: [ '_all' ]\r
+            }\r
+        ],\r
+        "fnServerData": function (sSource, aoData, fnCallback, oSettings) {\r
+            oSettings.jqXHR = $.ajax({\r
+                "type": 'get',\r
+                "url": sSource,\r
+                "dataType": "json",\r
+                //"data":serverPageTable.getRestPara(cond,oSettings),\r
+                "success": function (resp) {                                       \r
+                    oSettings.iDraw = oSettings.iDraw + 1;\r
+                    \r
+                    var result = [];\r
+                    for(var i=0;i<resp.length;i++) {\r
+                        result.push(resp[i].currentStepInfo);\r
+                    }\r
+                    var data = {};\r
+                    data.aaData = result;\r
+                    var totalCounts = result.length;\r
+                    \r
+                    data.iTotalRecords = totalCounts;\r
+                    data.iTotalDisplayRecords = totalCounts;\r
+                    data.sEcho = oSettings;\r
+                    fnCallback(data);\r
+                },\r
+                "error": function(resp) {\r
+                    var data = {};\r
+                    data.aaData = [];\r
+                    var totalCounts = 0;\r
+                    \r
+                    data.iTotalRecords = totalCounts;\r
+                    data.iTotalDisplayRecords = totalCounts;\r
+                    data.sEcho = oSettings;\r
+                    fnCallback(data);\r
+                }\r
+            });\r
+        }\r
+    });\r
+};
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/js/package/pmController.js b/openo-portal/portal-catalog/src/main/webapp/catalog/js/package/pmController.js
new file mode 100644 (file)
index 0000000..7011a65
--- /dev/null
@@ -0,0 +1,332 @@
+/*\r
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ *         http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ */\r
+\r
+var vm = avalon.define({\r
+       $id : "pmController",\r
+    resource : {\r
+        packageInfo : [],\r
+        packageDetails : "",\r
+        vimSelectItems : [\r
+            {vimName:"test1", oid:"123456"},\r
+            {vimName:"test2",oid:"987654"}\r
+        ]\r
+    },\r
+    csarIdSelected : "",\r
+       $packageTableFields : {// table columns\r
+               table: [\r
+            {"mData": "name", name: $.i18n.prop("nfv-package-iui-field-name")},\r
+            {"mData": "type", name: $.i18n.prop("nfv-package-iui-field-type")},\r
+            {"mData": "size", name: $.i18n.prop("nfv-package-iui-field-size")},\r
+            {"mData": "createTime", name: $.i18n.prop("nfv-package-iui-field-createTime")},\r
+            {"mData": "status", name: $.i18n.prop("nfv-package-iui-field-status"), "fnRender" : pmUtil.statusRender},\r
+            {"mData": null, name: $.i18n.prop("nfv-package-iui-field-operation"), "fnRender" : pmUtil.actionRender}\r
+               ]\r
+       },\r
+       $language: {\r
+        "sProcessing": "<img src='../component/thirdparty/data-tables/images/loading-spinner-grey.gif'/><span>&nbsp;&nbsp;"\r
+                        +$.i18n.prop("nfv-nso-iui-table-sProcess")+"</span>",\r
+        "sLengthMenu": $.i18n.prop("nfv-nso-iui-table-sLengthMenu"),\r
+        "sZeroRecords": $.i18n.prop("nfv-nso-iui-table-sZeroRecords"),\r
+        "sInfo": "<span class='seperator'>  </span>" + $.i18n.prop("nfv-nso-iui-table-sInfo"),\r
+        "sInfoEmpty": $.i18n.prop("nfv-nso-iui-table-sInfoEmpty"),\r
+        "sGroupActions": $.i18n.prop("nfv-nso-iui-table-sGroupActions"),\r
+        "sAjaxRequestGeneralError":$.i18n.prop("nfv-nso-iui-table-sAjaxRequestGeneralError"),\r
+        "sEmptyTable": $.i18n.prop("nfv-nso-iui-table-sEmptyTable"),\r
+        "oPaginate": {\r
+            "sPrevious": $.i18n.prop("nfv-nso-iui-table-sPrevious"),\r
+            "sNext": $.i18n.prop("nfv-nso-iui-table-sNext"),\r
+            "sPage": $.i18n.prop("nfv-nso-iui-table-sPage"),\r
+            "sPageOf": $.i18n.prop("nfv-nso-iui-table-sPageOf")\r
+        }\r
+    },\r
+    $restUrl:{\r
+        queryPackageInfoUrl: "/openoapi/catalog/v1/csars",\r
+        uploadPackageUrl: "/openoapi/catalog/v1/csars",\r
+        gsarDelPackageUrl: "/openoapi/gsolcm/v1.0/nspackage",\r
+        ssarDelPackageUrl: "/openoapi/catalog/v1/csars",\r
+        nsarDelPackageUrl: "/openoapi/nslcm/v1.0/nspackage",\r
+        nfarDelPackageUrl: "/openoapi/nslcm/v1.0/vnfpackage",\r
+        gsarOnboardUrl: "/openoapi/gsolcm/v1.0/nspackage",\r
+        ssarOnboardUrl: "/openoapi/nslcm/v1.0/nspackage",\r
+        nsarOnboardUrl: "/openoapi/nslcm/v1.0/nspackage",\r
+        nfarOnboardUrl: "/openoapi/nslcm/v1.0/vnfpackage",\r
+        changePackageStatusUrl : "/openoapi/catalog/v1/csars",\r
+        queryVimInfoUrl : "/api/roc/v1/resource/vims"\r
+    },\r
+    $getPackageCond: function() {\r
+       var cond = {};\r
+               return cond;\r
+    },\r
+       $initTable: function() {\r
+        var url=vm.$restUrl.queryPackageInfoUrl;\r
+        commonUtil.get(url,null,function(resp) {\r
+            if (resp) {\r
+                vm.resource.packageInfo=resp;\r
+            }\r
+        })\r
+       },\r
+    packageDetail : {\r
+        detailTitle : "",\r
+        isShow : "none",\r
+        detailIndex : 0,\r
+        detailData : [{\r
+            id : "general",\r
+            name : $.i18n.prop("com_zte_ums_eco_roc_rsview_info"),\r
+            isActive : true\r
+        }, {\r
+            id : "relationShips",\r
+            name : $.i18n.prop("com_zte_ums_eco_roc_rsview_relation"),\r
+            isActive : false\r
+        }\r
+        ],\r
+        $showDetails : function (isShow, sn, name) {\r
+            vm.packageDetail.isShow = isShow;\r
+            vm.packageDetail.detailCondChange(0);\r
+            if (isShow == "block") {\r
+                vm.packageDetail.detailTitle = name + "-" + $.i18n.prop("nfv-package-iui_packageview_packageDetail"),\r
+                    $('#' + vm.packageDetail.detailData[0].id).click();\r
+                vm.packageDetail.detailData[0].isActive = true;\r
+                vm.packageDetail.$initPackageDetailTable(sn);\r
+            }\r
+        },\r
+        detailCondChange : function (index) {\r
+            vm.packageDetail.detailIndex = index;\r
+            for (var i = 0; i < vm.packageDetail.detailData.length; i++) {\r
+                vm.packageDetail.detailData[i].isActive = false;\r
+            }\r
+            vm.packageDetail.detailData[index].isActive = true;\r
+        },\r
+        $initPackageDetailTable : function (sn) {\r
+            vm.resource.packageDetails = vm.resource.packageInfo[sn];\r
+            vm.resource.relationInfo = [];\r
+        },\r
+        $isRowDeletingStatus : function(name) {\r
+            var table = $("#" + vm.$tableId).dataTable();\r
+            var tableData = table.fnGetData();\r
+            for (var i=0; i<tableData.length; i++) {\r
+                if(tableData[i]["name"] == name &&\r
+                    tableData[i]["status"].indexOf($.i18n.prop("nfv-package-iui-status-deleting")) > -1) {\r
+                    return true;\r
+                }\r
+            }\r
+            return false;\r
+        },\r
+    },\r
+    selectVimDialog : {\r
+        currentRadioClicked : [],\r
+        clickedIndex : "",\r
+        nfarOnBoardParam : {\r
+            csarId : "",\r
+            vimIds : [],\r
+            labVimId : "",\r
+        },\r
+        $initData : function(csarId) {\r
+            vm.resource.vimSelectItems = [\r
+                {vimName:"test1", oid:"123456"},\r
+                {vimName:"test2", oid:"987654"},\r
+                {vimName:"test3", oid:"123qwe"}\r
+            ];\r
+            vm.selectVimDialog.nfarOnBoardParam.csarId = csarId;\r
+        },\r
+        $confirmBtnClick : function () {\r
+            var labVimId = "";\r
+            var vimIds = [];\r
+            var testEnvCount = 0;\r
+            for(var i=0; i<vm.resource.vimSelectItems.length; i++) {\r
+                var radioId = "testEnvRadios" + i;\r
+                var checkboxId = "produceEnvChecks" + i;\r
+                if(document.getElementById(radioId).checked) {\r
+                    labVimId = vm.resource.vimSelectItems[i].oid;\r
+                }\r
+                if(document.getElementById(checkboxId).checked) {\r
+                    vimIds.push(vm.resource.vimSelectItems[i].oid);\r
+                }\r
+            }\r
+            vm.selectVimDialog.nfarOnBoardParam.labVimId = labVimId;\r
+            vm.selectVimDialog.nfarOnBoardParam.vimIds = vimIds;\r
+            var extData = vm.selectVimDialog.nfarOnBoardParam;\r
+            pmUtil.doNFAROnboard(extData);\r
+            $("#selectVimDialog").modal("hide");\r
+        },\r
+        $radioClicked : function(index) {\r
+            var radioId = "testEnvRadios" + index;\r
+            var checkboxId = "produceEnvChecks" + index;\r
+            if(vm.selectVimDialog.currentRadioClicked[index] && vm.selectVimDialog.clickedIndex == index) {\r
+                vm.selectVimDialog.currentRadioClicked[index] = false;\r
+                document.getElementById(radioId).checked = false;\r
+                document.getElementById(checkboxId).disabled = false;\r
+            } else {\r
+                for(var i=0; i<vm.resource.vimSelectItems.length; i++) {\r
+                    var uncheckId = "produceEnvChecks" + i;\r
+                    document.getElementById(uncheckId).disabled = false;\r
+                }\r
+                document.getElementById(checkboxId).checked = false;\r
+                document.getElementById(checkboxId).disabled = true;\r
+                vm.selectVimDialog.currentRadioClicked[index] = true;\r
+                vm.selectVimDialog.clickedIndex = index;\r
+            }\r
+        }\r
+    },\r
+\r
+    $delPackage : function(csarId,type) {\r
+        bootbox.confirm($.i18n.prop("nfv-package-iui-message-delete-confirm"), function(result){\r
+            var url = "";\r
+            if(result) {\r
+                if(type == "NSAR") {\r
+                    url = vm.$restUrl.nsarDelPackageUrl + "/" + csarId;\r
+                    //commonUtil.delete(url, function(resp) {\r
+                    //    vm.gotoPackageListPage();\r
+                    //});\r
+                } else if(type == "NFAR") {\r
+                    url = vm.$restUrl.nfarDelPackageUrl + "/" + csarId;\r
+                    //commonUtil.delete(url, function(resp) {\r
+                    //    vm.gotoPackageListPage();\r
+                    //});\r
+                } else if(type == "GSAR") {\r
+                    url = vm.$restUrl.gsarDelPackageUrl + "/" + csarId;\r
+                    //commonUtil.delete(url, function(resp) {\r
+                    //    vm.gotoPackageListPage();\r
+                    //});\r
+                } else if(type == "SSAR") {\r
+                    url = vm.$restUrl.ssarDelPackageUrl + "/" + csarId;\r
+                    //commonUtil.delete(url, function(resp) {\r
+                    //    vm.gotoPackageListPage();\r
+                    //});\r
+                }\r
+                commonUtil.delete(url, function(resp) {\r
+                    vm.gotoPackageListPage();\r
+                });\r
+            }\r
+        });\r
+    },\r
+    isRowOnBoardingStatus : function(csarId) {\r
+        var table = $("#" + vm.$tableId).dataTable();\r
+        var tableData = table.fnGetData();\r
+        for (var i=0; i<tableData.length; i++) {\r
+            if(tableData[i]["name"] == name &&\r
+                tableData[i]["status"].indexOf($.i18n.prop("nfv-package-iui-status-onboarding")) > -1) {\r
+                return true;\r
+            }\r
+        }\r
+        return false;\r
+    },\r
+\r
+    onBoardPackage : function(csarId,type) {\r
+        var param = {\r
+            csarId : csarId\r
+        };\r
+        if(type == "NSAR") {\r
+            //vm.csarIdSelected = csarId;\r
+            //vm.showOnboardDialog(csarId);\r
+            var url = vm.$restUrl.nsarOnboardUrl;\r
+            pmUtil.doOnBoard(url, param);\r
+        } else if(type == "NFAR") {\r
+            //var url = vm.$restUrl.nfarOnboardUrl;\r
+            //pmUtil.doOnBoard(url, param);\r
+            vm.csarIdSelected = csarId;\r
+            vm.showOnboardDialog(csarId);\r
+        } else if(type == "GSAR") {\r
+            var url = vm.$restUrl.gsarOnboardUrl;\r
+            pmUtil.doOnBoard(url, param);\r
+        } else if(type == "SSAR") {\r
+            var url = vm.$restUrl.ssarOnboardUrl;\r
+            pmUtil.doOnBoard(url, param);\r
+        }\r
+    },\r
+    showOnboardDialog : function(csarId) {\r
+        vm.selectVimDialog.$initData(csarId);\r
+        $("#selectVimDialog").modal("show");\r
+    },\r
+    $initUpload : function() {\r
+        $("#fileupload").fileupload({\r
+            url : vm.$restUrl.uploadPackageUrl,\r
+            dropZone: $('#dropzone'),\r
+            maxNumberOfFiles : 1,\r
+            maxChunkSize : 20000000, //20M\r
+            autoUpload : false,\r
+            add : function(e, data) {\r
+                $("#bar").css('width', '0%');\r
+                $("#persent").text('0%');\r
+                $("#fileName").text(data.files[0].name);\r
+                $("#fileremove").attr("disabled", false);\r
+                $("#filesubmit").attr("disabled", false);\r
+\r
+                $("#filesubmit").remove();\r
+                $('<button id="filesubmit" class="btn btn-default" type="button"/>').text("上传")\r
+                    .appendTo($(".input-group-btn")[0])\r
+                    .click(function () {\r
+                        var fileName = data.files[0].name;\r
+                        var existPackage = pmUtil.getExistPackageByName(fileName);\r
+                        if(existPackage == 0){//0:package is not exist\r
+                            $(".progress").addClass("active");\r
+                            data.submit();\r
+                        } else {\r
+                            var msg = "";\r
+                            if(existPackage == 1){//1:package not exist, instance reference this csar\r
+                                msg = $.i18n.prop("nfv-package-iui-message-upload-csar-deletionpending");\r
+                            }\r
+                            if(existPackage == 2){//2:package exist\r
+                                msg = $.i18n.prop("nfv-package-iui-message-upload-csar-exist");\r
+                            }\r
+\r
+                            bootbox.confirm(msg, function(result){\r
+                                if(result) {\r
+                                    $(".progress").addClass("active");\r
+                                    data.submit();\r
+                                }\r
+                            });\r
+                        }\r
+                    });\r
+                $("#fileremove").click(function(){\r
+                    $("#bar").css('width', '0%');\r
+                    $("#persent").text("");\r
+                    $("#fileName").text("");\r
+                    $("#filesubmit").attr("disabled", true);\r
+                    $("#fileremove").attr("disabled", true);\r
+                });\r
+            },\r
+            done : function(e, data) {\r
+                commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-upload-success"), 'success');\r
+            },\r
+            fail : function(e, data) {\r
+                commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-upload-fail"), 'danger');\r
+            },\r
+            always : function(e, data) {\r
+                refreshByCond();\r
+                $(".progress").removeClass("active");\r
+                $("#bar").css('width', '100%');\r
+                $("#persent").text('100%');\r
+            },\r
+            progressall : function(e ,data) {\r
+                var progress = parseInt(data.loaded / data.total * 80, 10);\r
+                $("#bar").css('width', progress + '%');\r
+                $("#persent").text(progress + '%');\r
+            }\r
+        });\r
+    },\r
+    gotoPackageListPage:function(){\r
+        window.location.href="./csarPackage.html";\r
+    }\r
+});\r
+avalon.scan();\r
+vm.$initUpload();\r
+\r
+$(function(){\r
+    vm.$initTable();\r
+});\r
+var refreshByCond = function() {\r
+    vm.$initTable();\r
+};
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/js/package/pmUtil.js b/openo-portal/portal-catalog/src/main/webapp/catalog/js/package/pmUtil.js
new file mode 100644 (file)
index 0000000..610eb2e
--- /dev/null
@@ -0,0 +1,179 @@
+/*\r
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ *         http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ */\r
+var pmUtil = {};\r
+\r
+pmUtil.changeStatus = function(csarId, status) {\r
+       pmUtil.changeTableStatus(csarId, "activating");\r
+    $.ajax({\r
+        type : "PUT",\r
+        url : vm.$restUrl.changePackageStatusUrl + csarId + "?csarName="  + "&status=" + status,\r
+        success : function() {\r
+            refreshByCond();\r
+        },\r
+        error : function() {\r
+               refreshByCond();\r
+        }\r
+    });\r
+}\r
+\r
+pmUtil.changeTableStatus = function(name, status) {\r
+       var table = $("#" + vm.$tableId).dataTable();\r
+       var tableData = table.fnGetData();\r
+       for (var i=0; i<tableData.length; i++) {\r
+        if(tableData[i]["name"] == name) {\r
+               table.fnUpdate(status, i, 4, false, false);\r
+               break;\r
+        }\r
+    }\r
+}\r
+\r
+pmUtil.isRowDeletingStatus = function(name) {\r
+    var table = $("#" + vm.$tableId).dataTable();\r
+    var tableData = table.fnGetData();\r
+    for (var i=0; i<tableData.length; i++) {\r
+        if(tableData[i]["name"] == name && \r
+           tableData[i]["status"].indexOf($.i18n.prop("nfv-package-iui-status-deleting")) > -1) {\r
+            return true;            \r
+        }\r
+    }\r
+    return false;\r
+}\r
+\r
+pmUtil.delPackage = function(csarId) {\r
+    if(pmUtil.isRowDeletingStatus(csarId)){\r
+        return;\r
+    }\r
+       bootbox.confirm($.i18n.prop("nfv-package-iui-message-delete-confirm"), function(result){\r
+               if(result) {\r
+            pmUtil.changeTableStatus(csarId, "deleting");\r
+                       var url = vm.$restUrl.delPackageUrl + csarId;\r
+                       commonUtil.delete(url, function(resp) {\r
+                               \r
+                       });\r
+               }\r
+       });             \r
+}\r
+\r
+pmUtil.isRowOnBoardingStatus = function(name) {\r
+    var table = $("#" + vm.$tableId).dataTable();\r
+    var tableData = table.fnGetData();\r
+    for (var i=0; i<tableData.length; i++) {\r
+        if(tableData[i]["name"] == name &&\r
+            tableData[i]["status"].indexOf($.i18n.prop("nfv-package-iui-status-onboarding")) > -1) {\r
+            return true;\r
+        }\r
+    }\r
+    return false;\r
+}\r
+\r
+pmUtil.onBoardPackage = function(name) {\r
+    if(pmUtil.isRowOnBoardingStatus(name)){\r
+        return;\r
+    }\r
+    pmUtil.changeTableStatus(name, "onboarding");\r
+    var url = vm.$restUrl.delPackageUrl + "?csarName=" + name;\r
+    commonUtil.delete(url, function(resp) {\r
+    });\r
+}\r
+//query packages exist\r
+//0: the package does not exist \r
+//1: the package does not exist, but the instance cite this package\r
+//2: the package exists\r
+pmUtil.getExistPackageByName = function(name) {\r
+    var index = name.indexOf(".csar") || name.indexOf(".zip");\r
+    if(index > 0){\r
+        name = name.substring(0, index);\r
+    }\r
+    var result = $.ajax({\r
+        type : "GET",\r
+        url : vm.$restUrl.queryPackageInfoUrl + "?csarName=" + name,\r
+        async: false\r
+    });        \r
+    var data = result.responseJSON;\r
+    if(data != undefined && data.length == 0){\r
+        return 0;\r
+    }\r
+    var result = data[0];\r
+    if(result.deletionPending != undefined && result.deletionPending == "true"){                \r
+        return 1;\r
+    }            \r
+\r
+    return 2;\r
+}\r
+\r
+pmUtil.updateDeletedPackageStatus = function(message) {\r
+    if(message.status == "true" || message.status == "deletionPending") {                \r
+        commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-delete-success"), "success");\r
+        refreshByCond();\r
+    } else {\r
+        pmUtil.changeTableStatus(message.csarid, "deletefail");\r
+    }\r
+}\r
+\r
+pmUtil.queryVimInfo = function() {\r
+    $.get(\r
+        vm.$restUrl.queryVimInfoUrl,\r
+        function (resp) {\r
+            if (resp.data) {\r
+                vm.selectVim.vimSelectItems = resp.data || [{\r
+                        vimName: "test1",\r
+                        oid: "123456"\r
+                    },\r
+                        {\r
+                            vimName: "test2",\r
+                            oid: "987654"\r
+                        }];\r
+            }\r
+        },\r
+        "json"\r
+    )\r
+}\r
+\r
+pmUtil.doOnBoard = function(url,param) {\r
+        $.ajax({\r
+            type : "POST",\r
+            url : url,\r
+            data : JSON.stringify(param),\r
+            contentType : "application/json",\r
+            dataType : "json",\r
+            success : function(resp) {\r
+                if(resp.data.status == "failed") {\r
+                    commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-onBoarded"), "failed");\r
+                }\r
+                refreshByCond();\r
+            },\r
+            error : function() {\r
+                commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-onBoard-error"), "failed");\r
+            }\r
+        });\r
+    }\r
+\r
+pmUtil.doNFAROnboard = function(extData) {\r
+    extData.csarId = vm.csarIdSelected;\r
+    $.ajax({\r
+        type : "POST",\r
+        url : vm.$restUrl.nfarOnboardUrl,\r
+        data : JSON.stringify(extData),\r
+        contentType : "application/json",\r
+        dataType : "json",\r
+        success : function(resp) {\r
+            refreshByCond();\r
+        },\r
+        error : function() {\r
+            commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-onBoard-error"), "failed");\r
+        }\r
+    });\r
+}\r
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmController.js b/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmController.js
new file mode 100644 (file)
index 0000000..2724fc0
--- /dev/null
@@ -0,0 +1,85 @@
+/*\r
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ *         http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ */\r
+avalon.config({\r
+       interpolate: ["<!--", "-->"]\r
+});\r
+\r
+var vm = avalon.define({\r
+       $id: "tmController",\r
+    $tableId : "ict_template_table",\r
+       $templateTableFields : {// table columns\r
+               table: [\r
+            {"mData": "serviceTemplateId", name: "ID", "bVisible": false},\r
+            {"mData": "templateName", name: $.i18n.prop("nfv-template-iui-field-templatename"), "fnRender" : tmUtil.nameRender},\r
+           // {"mData": "producttype", name: $.i18n.prop("nfv-template-iui-field-producttype")},\r
+            {"mData": "vendor", name: $.i18n.prop("nfv-template-iui-field-vendor")},\r
+            {"mData": "version", name: $.i18n.prop("nfv-template-iui-field-version")},\r
+            {"mData":"csarId", name: "packageID","bVisible": false},\r
+            {"mData": "type", name: $.i18n.prop("nfv-template-iui-field-type")},\r
+            //{"mData":"downloadUri", name: $.i18n.prop("nfv-template-iui-field-download-uri")},\r
+            //{"mData": "inputs", name: $.i18n.prop("nfv-template-iui-field-inputs"), "fnRender" : tmUtil.inputsRender}\r
+               ]\r
+       },\r
+    $language: {\r
+            "sProcessing": "<img src='../component/thirdparty/data-tables/images/loading-spinner-grey.gif'/><span>&nbsp;&nbsp;"\r
+                        +$.i18n.prop("nfv-nso-iui-table-sProcess")+"</span>",\r
+            "sLengthMenu": $.i18n.prop("nfv-nso-iui-table-sLengthMenu"),\r
+            "sZeroRecords": $.i18n.prop("nfv-nso-iui-table-sZeroRecords"),\r
+            "sInfo": "<span class='seperator'>  </span>" + $.i18n.prop("nfv-nso-iui-table-sInfo"),\r
+            "sInfoEmpty": $.i18n.prop("nfv-nso-iui-table-sInfoEmpty"),\r
+            "sGroupActions": $.i18n.prop("nfv-nso-iui-table-sGroupActions"),\r
+            "sAjaxRequestGeneralError":$.i18n.prop("nfv-nso-iui-table-sAjaxRequestGeneralError"),\r
+            "sEmptyTable": $.i18n.prop("nfv-nso-iui-table-sEmptyTable"),\r
+            "oPaginate": {\r
+                "sPrevious": $.i18n.prop("nfv-nso-iui-table-sPrevious"),\r
+                "sNext": $.i18n.prop("nfv-nso-iui-table-sNext"),\r
+                "sPage": $.i18n.prop("nfv-nso-iui-table-sPage"),\r
+                "sPageOf": $.i18n.prop("nfv-nso-iui-table-sPageOf")\r
+            }\r
+    },\r
+    $restUrl : {\r
+        queryTemplateInfoUrl : "/openoapi/catalog/v1/servicetemplates"\r
+    },\r
+    $getTemplateCond: function() {\r
+       var cond = {};\r
+               return cond;\r
+    },\r
+       $initTable: function() {\r
+               var setting = {};\r
+               setting.language = vm.$language;\r
+        setting.paginate = true;\r
+        setting.info = true;\r
+               setting.columns = vm.$templateTableFields.table;\r
+               setting.restUrl = vm.$restUrl.queryTemplateInfoUrl;\r
+               setting.tableId = vm.$tableId;\r
+               serverPageTable.initDataTable(setting, vm.$getTemplateCond(),\r
+                               vm.$tableId + '_div');\r
+       },\r
+    $openDetail : function(templateId, rowId) {\r
+        var oSelect = $("tbody tr select").eq(rowId);\r
+        var flavor = "";\r
+        if(oSelect.length) {\r
+            oSelect.find("option:selected").val();\r
+        }\r
+        window.open("./templateDetail.html?templateId="+templateId+"&flavor="+flavor,"_self");\r
+    },\r
+});\r
+avalon.scan();\r
+vm.$initTable();\r
+\r
+var refreshByCond = function() {\r
+    vm.$initTable();\r
+};
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmDetailController.js b/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmDetailController.js
new file mode 100644 (file)
index 0000000..0d04e7c
--- /dev/null
@@ -0,0 +1,342 @@
+/*\r
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ *         http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ */\r
+\r
+var vm = avalon.define({\r
+    $id : "tmDetailController",\r
+    templateId : "",\r
+    templateData : [\r
+        {href: "#topology", name: "Topology", value: true},\r
+        {href: "#nodes", name: "Nodes", value: false}\r
+    ],\r
+    $language: {\r
+        "sProcessing": "<img src='../component/thirdparty/data-tables/images/loading-spinner-grey.gif'/><span>&nbsp;&nbsp;"\r
+                        +$.i18n.prop("nfv-nso-iui-table-sProcess")+"</span>",\r
+        "sLengthMenu": $.i18n.prop("nfv-nso-iui-table-sLengthMenu"),\r
+        "sZeroRecords": $.i18n.prop("nfv-nso-iui-table-sZeroRecords"),\r
+        "sInfo": "<span class='seperator'>  </span>" + $.i18n.prop("nfv-nso-iui-table-sInfo"),\r
+        "sInfoEmpty": $.i18n.prop("nfv-nso-iui-table-sInfoEmpty"),\r
+        "sGroupActions": $.i18n.prop("nfv-nso-iui-table-sGroupActions"),\r
+        "sAjaxRequestGeneralError":$.i18n.prop("nfv-nso-iui-table-sAjaxRequestGeneralError"),\r
+        "sEmptyTable": $.i18n.prop("nfv-nso-iui-table-sEmptyTable"),\r
+        "oPaginate": {\r
+            "sPrevious": $.i18n.prop("nfv-nso-iui-table-sPrevious"),\r
+            "sNext": $.i18n.prop("nfv-nso-iui-table-sNext"),\r
+            "sPage": $.i18n.prop("nfv-nso-iui-table-sPage"),\r
+            "sPageOf": $.i18n.prop("nfv-nso-iui-table-sPageOf")\r
+        }\r
+    },\r
+    $restUrl : {\r
+        queryNodeTemplateUrl : "/openoapi/catalog/v1/servicetemplates/{0}/nodetemplates",\r
+        queryTemplateInfoUrl : "/openoapi/catalog/v1/servicetemplates"\r
+    },\r
+    $init : function() {\r
+        vm.$initTemplateData();\r
+        vm.$initTopoNodesData();\r
+    },\r
+    $initTemplateData : function() {\r
+        $.ajax({\r
+            type : "GET",\r
+            url : vm.$restUrl.queryTemplateInfoUrl,\r
+            success : function(resp) {\r
+                if(resp) {\r
+                    vm.nodesTab.servicesTemplateData = [];\r
+                    for(var i=0; i<resp.length; i++) {\r
+                        //generate node table display data\r
+                        vm.nodesTab.servicesTemplateData.push(resp[i]);\r
+                    }\r
+                    vm.nodesTab.$initNfvNodesTab();\r
+                }\r
+            },\r
+            error : function() {\r
+                commonUtil.showMessage($.i18n.prop("nfv-topology-iui-message-error"), "danger");\r
+            }\r
+        });\r
+    },\r
+    $initTopoNodesData : function() {\r
+        $.ajax({\r
+            type : "GET",\r
+            url : vm.$restUrl.queryNodeTemplateUrl,\r
+            success : function(resp) {\r
+                if(resp) {\r
+                    vm.nodesTab.nodesDetail.nodesTemplateDetailData = [];\r
+                    for(var i=0; i<resp.length; i++) {\r
+                        //generate node table display data\r
+                        var nodeTemplate = topoUtil.generateNodeTemplate(resp[i]);\r
+                        vm.nodesTab.nodesList.nodesData.push(nodeTemplate);\r
+                    }\r
+                    vm.nodesTab.nodesDetail.nodesTemplateDetailData = resp;\r
+                    //generate topology graph display data\r
+                    vm.topologyTab.topoTemplateData = topoUtil.generateTopoTemplate(vm.nodesTab.nodesList.nodesData.$model);\r
+                    //initialize topology data\r
+                    topoUtil.initTopoData(vm.topologyTab.topoTemplateData.$model);\r
+                    //vm.nodesTab.nodesList.$initNodesTable();\r
+                }\r
+            },\r
+            error : function() {\r
+                commonUtil.showMessage($.i18n.prop("nfv-topology-iui-message-error"), "danger");\r
+            }\r
+        });\r
+    },\r
+    $initNodesData : function() {\r
+        $.ajax({\r
+            type: "GET",\r
+            url: vm.$restUrl.queryNodeTemplateUrl,\r
+            success: function (resp) {\r
+                if (resp) {\r
+                    vm.nodesTab.nodesDetail.nodesTemplateDetailData = [];\r
+                    for (var i = 0; i < resp.length; i++) {\r
+                        //generate node table display data\r
+                        var nodeTemplate = topoUtil.generateNodeTemplate(resp[i]);\r
+                        vm.nodesTab.nodesList.nodesData.push(nodeTemplate);\r
+                    }\r
+                    vm.nodesTab.nodesDetail.nodesTemplateDetailData = resp;\r
+                    //generate topology graph display data\r
+                    //vm.topologyTab.topoTemplateData = topoUtil.generateTopoTemplate(vm.nodesTab.nodesList.nodesData.$model);\r
+                    //initialize topology data\r
+                    //topoUtil.initTopoData(vm.topologyTab.topoTemplateData.$model);\r
+                    vm.nodesTab.nodesList.$initNodesTable();\r
+                }\r
+            },\r
+            error: function () {\r
+                commonUtil.showMessage($.i18n.prop("nfv-topology-iui-message-error"), "danger");\r
+            }\r
+        });\r
+    },\r
+    topologyTab : {\r
+        topology : "topology.html",\r
+        vnfTip : $.i18n.prop("nfv-topology-iui-vnf-tip"),\r
+        btnTip : $.i18n.prop("nfv-topology-iui-btn-return-tip"),\r
+        topoTemplateData:[],\r
+        boxTopoDatas:[],\r
+        networkTopoDatas:[],\r
+        isShowNum: false,\r
+        returnBtnVisible : false,\r
+        $getColor: function(index) {\r
+            return topoUtil.getColor(index);\r
+        },\r
+        $getCidr: function(properties){\r
+            return topoUtil.getCidr(properties);\r
+        },\r
+        $getCpTop: function(index, parentBoxId){\r
+            return topoUtil.getCpTop(index, parentBoxId);\r
+        },\r
+        $initTopology : function() {\r
+            topoUtil.initTopoData(vm.topologyTab.topoTemplateData.$model);\r
+        },          \r
+        $showTopo:function(id, name){\r
+            vm.nodesTab.nodesDetail.$showDetails("block", id, name);\r
+        },\r
+        $showVnfTopo: function(templateId) {\r
+            vm.topologyTab.returnBtnVisible = true;\r
+            vm.$restUrl.queryNodeTemplateUrl = "/openoapi/catalog/v1/servicetemplates/" + templateId + "/nodetemplates";\r
+            vm.$init();\r
+        },\r
+        $returnNS: function() {\r
+            vm.topologyTab.returnBtnVisible = false;\r
+            vm.$restUrl.queryNodeTemplateUrl = "/openoapi/catalog/v1/servicetemplates/" + vm.templateId + "/nodetemplates";\r
+            vm.$init();\r
+        }\r
+    },\r
+    nodesTab : {\r
+        servicesTemplateData: [],\r
+        $nodesTabId : "ict_nodes_template_table",\r
+        $nodesTemplateTabFields : {// table columns\r
+            table: [\r
+                {"mData": "serviceTemplateId", name: "ID","bVisible": false},\r
+                {"mData": "", name: "","sClass": 'details-control'},\r
+                {"mData": "templateName", name: $.i18n.prop("nfv-template-iui-field-templatename")},\r
+                {"mData": "vendor", name: $.i18n.prop("nfv-template-iui-field-vendor")},\r
+                {"mData": "version", name: $.i18n.prop("nfv-template-iui-field-version")},\r
+                {"mData":"csarid", name: "packageID","bVisible": false},\r
+                {"mData": "type", name: $.i18n.prop("nfv-template-iui-field-type")},\r
+                //{"mData": "inputs", name: $.i18n.prop("nfv-template-iui-field-inputs"),"fnRender" : tmDetailUtil.inputsRender},\r
+                //{"mData": "outputs", name: $.i18n.prop("nfv-template-iui-field-outputs"),"fnRender" : tmDetailUtil.outputsRender},\r
+                //{"mData": "operations", name: $.i18n.prop("nfv-template-iui-field-operations")}\r
+            ]\r
+        },\r
+        $initNfvNodesTab: function() {\r
+            var setting = {};\r
+            setting.language = vm.$language;\r
+            setting.paginate = true;\r
+            setting.info = true;\r
+            //setting.sort = true;\r
+            setting.columns = vm.nodesTab.$nodesTemplateTabFields.table;\r
+            setting.restUrl = vm.$restUrl.queryTemplateInfoUrl;\r
+            setting.tableId = vm.nodesTab.$nodesTabId;\r
+            //serverPageTable.initTableWithData(setting,vm.nodesTab.$nodesTabId + '_div',vm.nodesTab.servicesTemplateData.$model);\r
+            serverPageTable.initDataTable(setting,{},vm.nodesTab.$nodesTabId + '_div');\r
+            $('#' + vm.nodesTab.$nodesTabId + '>tbody').on("click", 'td.details-control', function () {\r
+                var tr = $(this).closest('tr');\r
+                var table =  $('#' + vm.nodesTab.$nodesTabId).dataTable();\r
+                if (table.fnIsOpen(tr[0])) {\r
+                    table.fnClose(tr[0]);\r
+                    tr.removeClass('shown');\r
+                }\r
+                else {\r
+                    table.fnOpen(tr[0], vm.nodesTab.nodesList.$format_Detail(), 'details');\r
+                    tr.addClass('shown');\r
+                }\r
+            });\r
+        },\r
+\r
+        //nodes list table\r
+        nodesList :{\r
+            nodesData: [],\r
+            $nodesTabDataId : "ict_nodes_table",\r
+            $nodesTabFields : {// table columns\r
+                table: [\r
+                    {"mData": "id", name: "ID", "bVisible": false},\r
+                    {"mData": "name", name: $.i18n.prop("nfv-templateDetail-iui-field-nodetypename"), "bSortable": true, "fnRender" : tmDetailUtil.nameRender},\r
+                    {"mData": "type", name: $.i18n.prop("nfv-templateDetail-iui-field-type"), "bSortable": false},\r
+                    {"mData": "containedin", name: $.i18n.prop("nfv-templateDetail-iui-field-containedin"), "bSortable": false},\r
+                    {"mData": "deployedon", name: $.i18n.prop("nfv-templateDetail-iui-field-deployedon"), "bSortable": false},\r
+                    {"mData": "connectedto", name: $.i18n.prop("nfv-templateDetail-iui-field-connectedto"), "bSortable": false},\r
+                    {"mData": "virtuallinksto", name: $.i18n.prop("nfv-templateDetail-iui-field-virtuallinksto"), "bSortable": false}\r
+                ]\r
+            },\r
+            $initNodesTable: function () {\r
+                var setting = {};\r
+                setting.language = vm.$language;\r
+                setting.paginate = true;\r
+                setting.info = true;\r
+                //setting.sort = true;\r
+                setting.columns = vm.nodesTab.nodesList.$nodesTabFields.table;\r
+                setting.restUrl = vm.$restUrl.queryNodeTemplateUrl;\r
+                setting.tableId = vm.nodesTab.nodesList.$nodesTabDataId;\r
+                //serverPageTable.initTableWithData(setting,vm.nodesTab.nodesList.$nodesTabDataId + '_div',vm.nodesTab.nodesList.nodesData.$model);\r
+                serverPageTable.initTableWithoutLib(setting,{},vm.nodesTab.nodesList.$nodesTabDataId + '_div');\r
+            },\r
+            $format_Detail: function() {\r
+                var sOut = '<div class="row-fluid" data-name="table_zone"><div class="col-xs-12" id="ict_nodes_table_div"></div></div>'\r
+                vm.$initNodesData();\r
+                return sOut;\r
+            },\r
+        },\r
+        //Nodes Details\r
+        nodesDetail : {\r
+            nodesTemplateDetailData: [],\r
+            detailTitle : "",\r
+            isShow : "none",\r
+            detailIndex : 0,\r
+            detailData : [\r
+                {id: "general", name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-general"), isActive: true},\r
+                {id: "properties", name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-properties"), isActive: false},\r
+                {id: "relationShips", name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-relationShips"), isActive: false}\r
+            ],\r
+            $showDetails : function(isShow, nodetypeid, nodetypename) {\r
+                vm.nodesTab.nodesDetail.isShow = isShow;\r
+                if (isShow == "block") {\r
+                    vm.nodesTab.nodesDetail.detailTitle = nodetypename + " " + $.i18n.prop("nfv-templateDetail-nodesTab-iui-title-nodeDetail"),\r
+                    $('#' + vm.nodesTab.nodesDetail.detailData[0].id).click();\r
+                    vm.nodesTab.nodesDetail.detailData[0].isActive = true;\r
+                    vm.nodesTab.nodesDetail.$initNodeDetailTable(nodetypeid);\r
+                }\r
+            },\r
+            detailCondChange : function(index) {\r
+                vm.nodesTab.nodesDetail.detailIndex = index;\r
+                for(var i=0; i<vm.nodesTab.nodesDetail.detailData.length; i++) {\r
+                    vm.nodesTab.nodesDetail.detailData[i].isActive = false;\r
+                }\r
+                vm.nodesTab.nodesDetail.detailData[index].isActive = true;\r
+            },\r
+            $tableFields : {// table columns\r
+                general: [\r
+                    {"mData": "key", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-key"), "bSortable" : false},\r
+                    {"mData": "value", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-value"), "bSortable" : false}\r
+                ],\r
+                properties: [\r
+                    {"mData": "key", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-key"), "bSortable" : false},\r
+                    {"mData": "value", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-value"), "bSortable" : false}\r
+                ],\r
+                relationShips: [\r
+                    {"mData": "sourceNodeName", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-sourceNodeName"), "bSortable" : false},\r
+                    {"mData": "targetNodeName", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-targetNodeName"), "bSortable" : false},\r
+                    {"mData": "type", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-type"), "bSortable" : false}\r
+                ]\r
+            },\r
+            $initNodeDetailTable: function(nodetemplateid) {\r
+                var data = topoUtil.getCurrentDetailData(vm.nodesTab.nodesDetail.nodesTemplateDetailData.$model, nodetemplateid);\r
+                //initialize three tables of nodedetail\r
+                $.each(vm.nodesTab.nodesDetail.$tableFields, function(key, value){\r
+                    var setting = {};\r
+                    setting.language = vm.$language;\r
+                    setting.paginate = false;\r
+                    setting.info = false;\r
+                    setting.columns = value;\r
+                    setting.tableId = "ict_table_" + key;\r
+                    serverPageTable.initTableWithData(setting, setting.tableId + '_div', data[key]);\r
+                });\r
+            }\r
+        }\r
+    },\r
+    executionTab : {\r
+        $eventsTabId : "ict_events_table",\r
+        $eventsTabFields : {// table columns\r
+            table: [\r
+                {"mData": "currentStepId", name: "ID", "bVisible": false},\r
+                {"mData": "currentStepName", name: $.i18n.prop("nfv-templateDetail-executionTab-iui-field-currentStepName")},\r
+                {"mData": "currentStepStatus", name: $.i18n.prop("nfv-templateDetail-executionTab-iui-field-currentStepStatus")},\r
+                {"mData": "currentStepDesc", name: $.i18n.prop("nfv-templateDetail-executionTab-iui-field-currentStepDesc")},\r
+                {"mData": "currentTime", name: $.i18n.prop("nfv-templateDetail-executionTab-iui-field-executionTime")},\r
+                {"mData": "allSteps", name: "allSteps", "bVisible": false}\r
+            ]\r
+        },\r
+        $queryEventsInfoUrl: "/api/nsoc/appinstance/operateschedule?instanceId=",\r
+        $queryStepUrl: "",\r
+        $getEventsCond: function() {\r
+            var cond = {};\r
+            return cond;\r
+        },\r
+        $initEventsTable: function() {\r
+            console.log("initEventsTable ");\r
+            var setting = {};\r
+            setting.language = vm.$language;\r
+            setting.paginate = false;\r
+            setting.info = false;\r
+            setting.columns = vm.executionTab.$eventsTabFields.table;\r
+            setting.restUrl = vm.executionTab.$queryEventsInfoUrl;\r
+            setting.tableId = vm.executionTab.$eventsTabId;\r
+            serverPageTable.initDataTable(setting, vm.executionTab.$getEventsCond(),\r
+                    vm.executionTab.$eventsTabId + '_div');\r
+        },\r
+        $operation : "",\r
+        steps : [],\r
+        $init: function() {\r
+            vm.executionTab.$initEventsTable();\r
+        }\r
+    },\r
+\r
+});\r
+\r
+var initParam = function() { //initialize template detail params\r
+    var paramStr = window.location.search.substring(1);\r
+    if(paramStr.length > 0) {\r
+        var params = paramStr.split("&");\r
+        var templateId = params[0].substring(params[0].indexOf('=') + 1);\r
+        var flavor = params[1].substring(params[1].indexOf('=') + 1);\r
+        avalon.scan();\r
+          \r
+        vm.templateId = templateId;\r
+        vm.$restUrl.queryNodeTemplateUrl = commonUtil.format(vm.$restUrl.queryNodeTemplateUrl, templateId);\r
+\r
+        if(flavor) {\r
+            vm.$restUrl.queryNodeTemplateUrl += "?flavor=" + flavor;\r
+        }\r
+\r
+        vm.$init();\r
+    }\r
+};\r
+initParam();
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmDetailUtil.js b/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmDetailUtil.js
new file mode 100644 (file)
index 0000000..40980c0
--- /dev/null
@@ -0,0 +1,72 @@
+/*\r
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ *         http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ */\r
+var tmDetailUtil = {};\r
+tmDetailUtil.timer = null;\r
+\r
+tmDetailUtil.nameRender = function(obj) {\r
+    return '<a href="#" onclick="vm.nodesTab.nodesDetail.$showDetails('\r
+    + '\'block\',\'' + obj.aData.id + '\', \'' + obj.aData.name + '\')">' + obj.aData.name + '</a>';\r
+}\r
+\r
+tmDetailUtil.inputsRender = function(obj) {\r
+       var inputs = obj.aData.inputs;\r
+       var result = "";\r
+       //if(inputs && inputs.length) {\r
+       //      var optionHtml = "";\r
+       //      for(var i=0;i<inputs.length;i++) {\r
+       //              optionHtml += '<option>' + inputs[i].name + '</option>';\r
+       //      }\r
+       //      result = '<select>' + optionHtml + '</select>';\r
+       //}\r
+       result = JSON.stringify(inputs);\r
+       return result;\r
+}\r
+\r
+tmDetailUtil.outputsRender = function(obj) {\r
+       var outputs = obj.aData.outputs;\r
+       var result = "";\r
+       //if(inputs && inputs.length) {\r
+       //      var optionHtml = "";\r
+       //      for(var i=0;i<inputs.length;i++) {\r
+       //              optionHtml += '<option>' + inputs[i].name + '</option>';\r
+       //      }\r
+       //      result = '<select>' + optionHtml + '</select>';\r
+       //}\r
+       result = JSON.stringify(outputs);\r
+       return result;\r
+}\r
+\r
+tmDetailUtil.initSteps = function() {\r
+       $.ajax({\r
+               type : "GET",\r
+               url : vm.executionTab.$queryEventsInfoUrl,\r
+               data : "json",\r
+               success : function(data) {\r
+                       console.log("initSteps");\r
+                       if (data) {\r
+                               var step = $(".step");\r
+                   if (step.getStep().length == 0) {\r
+                       vm.executionTab.steps = [{title : "start"}, {title : "install VM"}, {title : "execute"}, {title : "complete"}];\r
+                       step.loadStep({\r
+                           size : "large",\r
+                           color : "blue",\r
+                           steps : vm.executionTab.steps\r
+                       });\r
+                   }\r
+                       }\r
+               }\r
+       });\r
+}\r
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmUtil.js b/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmUtil.js
new file mode 100644 (file)
index 0000000..f604225
--- /dev/null
@@ -0,0 +1,37 @@
+/*\r
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ *         http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ */\r
+var tmUtil = {};\r
+\r
+tmUtil.nameRender = function(obj) {\r
+    return '<a href="#" onclick="vm.$openDetail(\'' + obj.aData.serviceTemplateId\r
+        + '\',' + obj.iDataRow + ')">' + obj.aData.templateName + '</a>';\r
+}\r
+\r
+tmUtil.elasticRender = function(obj) {\r
+    return null;\r
+}\r
+\r
+/*tmUtil.openDetail = function(obj) {\r
+    if (obj) {\r
+        var framework;\r
+        if(window.parent.ZteFrameWork){\r
+            framework = window.parent.ZteFrameWork;\r
+        }else{\r
+            return;\r
+        }\r
+        framework.goToURLByIDAndNewAction('eco-nsoc-templateDetail', 'initParam("' + obj.templateid + '")');\r
+    }\r
+}*/
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/topoUtil.js b/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/topoUtil.js
new file mode 100644 (file)
index 0000000..8e0b850
--- /dev/null
@@ -0,0 +1,619 @@
+/*\r
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ *         http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ */\r
+var topoUtil = {};\r
+topoUtil.topoDatas=[];\r
+topoUtil.svgOffsetWidth = 0;\r
+\r
+/**\r
+ * recursive generate tree structure of the topology graph data\r
+ * @param  {[type]} rootName [description]\r
+ * @param  {[type]} rootNode [description]\r
+ * @return {[type]}          [description]\r
+ */\r
+topoUtil.generateSortData = function(rootName,rootNode) {\r
+    for(var i=0;i<topoUtil.topoDatas.length;i++) {\r
+               if(topoUtil.topoDatas[i].containIn == rootName){\r
+                       rootNode["children"].push(topoUtil.topoDatas[i]);       \r
+                       var currentNum = rootNode["children"].length-1; \r
+                       topoUtil.generateSortData(topoUtil.topoDatas[i].id, rootNode["children"][currentNum])\r
+               }\r
+    }\r
+}\r
+\r
+/**\r
+ * generate CP data, CP is inserted into the VDU or VNF child nodes\r
+ * @param  {[type]} cpNode   [description]\r
+ * @param  {[type]} rootNode [description]\r
+ * @return {[type]}          [description]\r
+ */\r
+topoUtil.generateCpData = function(cpNode, rootNode) {\r
+    for(var i=0;i<cpNode.length;i++){\r
+               for(var j=0;j<rootNode.length;j++) {\r
+                       var node = rootNode[j];\r
+                       if(cpNode[i].virtualbindsto == node.id) {\r
+                               rootNode[j].cp.push(cpNode[i]);\r
+                               break;\r
+                       }                                       \r
+               }\r
+    }\r
+}\r
+\r
+/**\r
+ * generate NETWORK and VL data, VL is inserted into the NETWORK child nodes\r
+ * @param  {[type]} rootNode [description]\r
+ * @return {[type]}          [description]\r
+ */\r
+topoUtil.generateNetworkData = function(vlanNode, networkNode) {\r
+       if(networkNode.length == 0) {\r
+               //no NETWORK, just VL\r
+               var network = {\r
+                       subnets : vlanNode\r
+               }\r
+               networkNode.push(network);\r
+       } else {\r
+               //NETWORK and VL\r
+               for(var i=0;i<networkNode.length;i++) {\r
+                       networkNode[i].subnets = [];\r
+                       for(var j=0;j<vlanNode.length;j++){\r
+                               var network = vlanNode[j].virtuallinksto;\r
+                               if(network == networkNode[i].id) {\r
+                                       networkNode[i].subnets.push(vlanNode[j]);\r
+                               }\r
+                   }\r
+               }\r
+       }\r
+}\r
+\r
+/**\r
+ * initialize topology graph data\r
+ * @param  {[type]} resp             [description]\r
+ * @param  {[type]} nodeInstanceData [description]\r
+ * @return {[type]}                  [description]\r
+ */\r
+topoUtil.initTopoData = function(resp, nodeInstanceData) {\r
+       if(resp && resp.length > 0) {\r
+               var datas = resp;\r
+               var boxData = [];\r
+               var networks = [];\r
+               var vlanData = [];\r
+               var cpData = [];\r
+        for(var i=0;i<datas.length;i++){               \r
+               if (datas[i]["containIn"] == "") {\r
+                       datas[i]["containIn"] = "--";\r
+               }\r
+               //add the property of children for all nodes\r
+            datas[i]["children"] = [];\r
+            datas[i]["cp"] = [];\r
+            //count instances number\r
+            if (nodeInstanceData) {\r
+               datas[i]["num"] = topoUtil.getInstanceNum(datas[i], nodeInstanceData);\r
+            }\r
+            //empty currentLinkNum\r
+            datas[i]["currentLinkNum"] = 0; \r
+            //distinguish VL, CP, NETWORK, VNF, VDU, VNFC from nodes to display topology graph\r
+            var type = datas[i]["type"];\r
+                       if (type.toUpperCase().indexOf(".VL") > -1) {\r
+                               vlanData.push(datas[i]);\r
+                       } else if (type.toUpperCase().indexOf(".CP") > -1) {\r
+                               cpData.push(datas[i]);\r
+                       } else if(type.toUpperCase().indexOf(".NETWORK") > -1) {\r
+                               networks.push(datas[i]);\r
+                       } else if ((type.toUpperCase().indexOf(".VNF") > -1) || (type.toUpperCase().indexOf(".VDU") > -1) \r
+                               || (type.toUpperCase().indexOf(".VNFC") > -1)) {\r
+                               boxData.push(datas[i]);\r
+                       } else {\r
+                               boxData.push(datas[i]);\r
+                       }\r
+        }\r
+        \r
+               //generate CP nodes\r
+               topoUtil.generateCpData(cpData, boxData);\r
+               //generate VNF/NS tree data\r
+        var rootNode = {"children":[]};\r
+        topoUtil.topoDatas = boxData;\r
+               topoUtil.generateSortData("--", rootNode);\r
+               vm.topologyTab.boxTopoDatas = rootNode.children;\r
+               //generate NETWORK and VL nodes\r
+               topoUtil.generateNetworkData(vlanData, networks);\r
+               vm.topologyTab.networkTopoDatas = networks;\r
+\r
+        //draw topology graph\r
+        topoUtil.topoDatas = datas;\r
+        setTimeout("topoUtil.generateLine()", 100);\r
+        //bind window object events\r
+        topoUtil.initWindowEvent();\r
+       }\r
+}\r
+\r
+/**\r
+ * get node instances number\r
+ * @param  {[type]} nodeTemplate     [description]\r
+ * @param  {[type]} nodeInstanceData [description]\r
+ * @return {[type]}                  [description]\r
+ */\r
+topoUtil.getInstanceNum = function(nodeTemplate, nodeInstanceData) {\r
+       var num = 0;\r
+       var id;\r
+       if(nodeTemplate.properties && nodeTemplate.properties.vnfdid) {\r
+               //ns嵌套vnf,ns中vnf的nodetemplate的属性vnfdid才是嵌套vnf的真实id\r
+               id = nodeTemplate.properties.vnfdid;\r
+       } else {\r
+               id = nodeTemplate.id;\r
+       }\r
+       \r
+       if(nodeInstanceData && nodeInstanceData.length > 0) {\r
+               for (var j=0;j<nodeInstanceData.length;j++) {\r
+                       if(nodeInstanceData[j].nodeTemplateId == id) {\r
+                               num++;\r
+                       }\r
+               }\r
+       }\r
+       return num;\r
+}\r
+\r
+topoUtil.getLineOffset = function(index) {\r
+       return  index*15;\r
+}\r
+/**\r
+ * get node y coordinate offset, it is based on the total number of connections and the number of connections to \r
+ * calculate the Y coordinate offset current connection\r
+ * here's the connection refers connectsto relationship between VNC and VNC\r
+ * @param  {[type]} node   current node object\r
+ * @param  {[type]} height current DOM object cliengtHeight\r
+ * @return {[type]}        Y coordinate offset\r
+ */\r
+topoUtil.getNodeOffset = function(node, height) {\r
+       var toNodeLinkNum = ++node.currentLinkNum;\r
+       var totalLinkNum = node.inLinks.length + node.outLinks.length;\r
+       totalLinkNum++;\r
+       return (height/totalLinkNum)*toNodeLinkNum;\r
+}\r
+/**\r
+ * get node object by name\r
+ * @param  {[type]} name node name\r
+ * @return {[type]}      node object data\r
+ */\r
+topoUtil.getTopoDataById = function(id) {\r
+       var node;\r
+       for(var i=0;i<topoUtil.topoDatas.length;i++) {\r
+               if(id == topoUtil.topoDatas[i].id) {\r
+                       node = topoUtil.topoDatas[i];\r
+               }\r
+       }\r
+       return  node;\r
+}\r
+\r
+topoUtil.pageX = function(elem) {\r
+       return  elem.offsetParent ? (elem.offsetLeft + topoUtil.pageX(elem.offsetParent)) : elem.offsetLeft;\r
+}\r
+\r
+topoUtil.pageY = function(elem) {\r
+       return  elem.offsetParent ? (elem.offsetTop + topoUtil.pageY(elem.offsetParent)) : elem.offsetTop;\r
+}\r
+\r
+topoUtil.getHorizontalOffset = function(elem, elemArray) {\r
+       var horizontalOffset = 0;\r
+       for(var i=0;i<elemArray.length;i++) {\r
+               var nodeTop = topoUtil.pageY(elemArray[i]);\r
+               var fromTop = topoUtil.pageY(elem);\r
+               if(fromTop == nodeTop) {\r
+                       horizontalOffset = topoUtil.getLineOffset(++horizontalIndex);\r
+               }\r
+       }\r
+       return horizontalOffset;\r
+}\r
+\r
+topoUtil.getParentNode = function(elem) {\r
+       return elem.className == "app" ? topoUtil.getParentNode(elem.offsetParent) : elem.offsetParent;\r
+}\r
+\r
+topoUtil.initElementSize = function() {\r
+       var height=$(".bpContainer").height();\r
+    $(".vlan").height() < height ? $(".vlan").height(height) : height;\r
+\r
+    var networkWidth = $("#networks").width();\r
+    var topoWidth = $("#topo").width();\r
+    var bodyWidth = $("body").width();\r
+    (networkWidth+topoWidth+50) > bodyWidth ? $("body").width(networkWidth+topoWidth+topoUtil.svgOffsetWidth+10) : $("body").width($("html").width());\r
+\r
+    var containerHeight=$(".container-fluid").height();\r
+    $(".coordinates").height(containerHeight).width($("body").width());\r
+}\r
+\r
+/**\r
+ * get the widest VDU or VNF node to generate connect lines\r
+ * @return {[type]} [description]\r
+ */\r
+topoUtil.getMaxNodeRight = function() {\r
+       var maxNode = {offsetWidth : 0};\r
+       for(var i=0;i<topoUtil.topoDatas.length;i++) {\r
+               var node = document.getElementById(topoUtil.topoDatas[i].id);\r
+               if(node && (maxNode.offsetWidth < node.offsetWidth)) {\r
+                       maxNode = node;\r
+               }\r
+       }\r
+       return topoUtil.pageX(maxNode) + maxNode.offsetWidth;\r
+}\r
+\r
+topoUtil.initWindowEvent = function() {\r
+       $(window.frameElement).attr('scrolling', 'auto');\r
+       $('body').css('overflow', 'scroll');\r
+       $(window).scroll(function(){\r
+               $("#right-menu").css("top",$(window).scrollTop()); //vertical scroll\r
+               $("#right-menu").css("right",-1*$(window).scrollLeft()); //horizontal scroll\r
+       }).unload(function(){\r
+               $(window.frameElement).attr('scrolling', 'no');\r
+       });\r
+       //$(window).resize(topoUtil.generateLine);\r
+}\r
+\r
+/**\r
+ * generate topology attachment\r
+ * connectedto represent the connection between the VNFC and VNFC, virtuallinksto represent the connection between the VLAN and VDU\r
+ * @return {[type]} [description]\r
+ */\r
+topoUtil.generateLine = function() { \r
+       topoUtil.initElementSize();\r
+       var vduPath='';\r
+       var vlPath='';\r
+       var vduIndex=0;\r
+       var vlIndex=0;\r
+       var fromNodeArray = [];\r
+       var horizontalIndex = 0;\r
+       var maxNodeParentRight = topoUtil.getMaxNodeRight();\r
+       for(var i=0;i<topoUtil.topoDatas.length;i++) {\r
+               //connectedto\r
+               if(topoUtil.topoDatas[i].connectedto !=""){                     \r
+                       var fromNode = document.getElementById(topoUtil.topoDatas[i].id); \r
+                       var horizontalOffset = 0;\r
+                       for(var k=0;k<fromNodeArray.length;k++) {\r
+                               //VNFC node in the same VDU, coordinate offset\r
+                               var nodeTop = topoUtil.pageY(fromNodeArray[k]);\r
+                               var fromTop = topoUtil.pageY(fromNode);\r
+                               if(fromTop == nodeTop) {\r
+                                       horizontalOffset = topoUtil.getLineOffset(++horizontalIndex);\r
+                               }\r
+                       }\r
+                       fromNodeArray.push(fromNode);                   \r
+                       var fromNodeParent = topoUtil.getParentNode(fromNode);\r
+                       var toArray = topoUtil.topoDatas[i].connectedto.split(",");                     \r
+                       for (var j=0;j<toArray.length;j++) {                            \r
+                               var toNode = document.getElementById(toArray[j]); \r
+                               var toNodeParent = topoUtil.getParentNode(toNode);\r
+                               //Computing connection point and the connection point Y coordinate offset\r
+                               var fromNodeOffset = topoUtil.getNodeOffset(topoUtil.topoDatas[i], fromNode.clientHeight); \r
+                               var toNodeTopoData = topoUtil.getTopoDataById(toArray[j]);\r
+                               var toNodeOffset = topoUtil.getNodeOffset(toNodeTopoData, toNode.clientHeight); \r
+                               //X coordinate offset calculation link\r
+                               var xLineOffset = topoUtil.getLineOffset(++vduIndex); \r
+                               //Get the largest X coordinate offset is used to set the width of the body\r
+                               topoUtil.svgOffsetWidth = Math.max(xLineOffset, topoUtil.svgOffsetWidth);\r
+                                                               \r
+                               var fromNodeLeft = topoUtil.pageX(fromNode);                            \r
+                               var fromNodeRight = topoUtil.pageX(fromNode) + fromNode.offsetWidth;\r
+                               var fromNodeTop = topoUtil.pageY(fromNode);\r
+\r
+                               var toNodeLeft = topoUtil.pageX(toNode);\r
+                               var toNodeRight = topoUtil.pageX(toNode) + toNode.offsetWidth;\r
+                               var toNodeTop = topoUtil.pageY(toNode);                         \r
+\r
+                               var coord = '';\r
+                               if(fromNodeTop == toNodeTop) {\r
+                                       if(fromNodeLeft < toNodeLeft) {\r
+                                               coord = "M"+fromNodeRight+","+(fromNodeTop+horizontalOffset+fromNodeOffset)\r
+                                                       +" L"+toNodeLeft+","+(fromNodeTop+horizontalOffset+fromNodeOffset)\r
+                                       } else {\r
+                                               coord = "M"+fromNodeLeft+","+(fromNodeTop+horizontalOffset+fromNodeOffset)                                                      \r
+                                                       +" L"+toNodeRight+","+(fromNodeTop+horizontalOffset+fromNodeOffset);\r
+                                       }\r
+                               } else {\r
+                                       var nodeRight = maxNodeParentRight + xLineOffset;\r
+                                       coord = "M"+fromNodeRight+","+(fromNodeTop+horizontalOffset+fromNodeOffset)\r
+                                                       +" L"+nodeRight+","+(fromNodeTop+horizontalOffset+fromNodeOffset)\r
+                                                       +" L"+nodeRight+","+(toNodeTop+toNodeOffset)\r
+                                                       +" L"+toNodeRight+","+(toNodeTop+toNodeOffset);                         \r
+                               }\r
+                               vduPath +='<path d="'+coord+'" marker-end="url(#arrowhead)" fill="none" stroke-dasharray="5,5" stroke="#7A7A7A" stroke-width="3px" shape-rendering="geometricPrecision"></path>';       \r
+                       }\r
+               }\r
+\r
+               //virtuallinksto                \r
+               if(topoUtil.topoDatas[i].virtuallinksto !=""){\r
+                       var fromNode = document.getElementById(topoUtil.topoDatas[i].id); \r
+                       var toArray = topoUtil.topoDatas[i].virtuallinksto.split(",");                  \r
+                       for (var j=0;j<toArray.length;j++) {\r
+                               var toNode = document.getElementById(toArray[j]);\r
+                               if(toNode) {\r
+                                       var yLineOffset = topoUtil.getLineOffset(j); \r
+                                       var xLineOffset = topoUtil.getLineOffset(++vlIndex); \r
+\r
+                                       var fromNodeLeft = topoUtil.pageX(fromNode);\r
+                                       var fromNodeTop = topoUtil.pageY(fromNode);\r
+\r
+                                       var toNodeRight = topoUtil.pageX(toNode) + toNode.offsetWidth;\r
+                                       var toNodeTop = topoUtil.pageY(toNode);\r
+\r
+                                       var coord = "";\r
+                                       if(fromNodeTop == toNodeTop) {\r
+                                               coord = "M"+fromNodeLeft+","+(fromNodeTop+fromNode.clientHeight/2+xLineOffset)\r
+                                                       +" L"+toNodeRight+","+(fromNodeTop+fromNode.clientHeight/2+xLineOffset);\r
+                                       } else {\r
+                                               coord = "M"+fromNodeLeft+","+(fromNodeTop+fromNode.clientHeight/2+yLineOffset)\r
+                                                       +" L"+toNodeRight+","+(fromNodeTop+fromNode.clientHeight/2+yLineOffset);\r
+                                       }\r
+                                       vlPath +='<path d="'+coord+'" fill="none" stroke="'+toNode.style.backgroundColor+'" stroke-width="4px"></path>';\r
+                               }                                       \r
+                       }\r
+               }\r
+       }\r
+       \r
+       $("#svg_vdu g").html(vduPath);\r
+       $("#svg_vl g").html(vlPath);\r
+}\r
+\r
+/**\r
+ * generate node table data\r
+ * @param  {[type]} data [description]\r
+ * @return {[type]}      [description]\r
+ */\r
+topoUtil.generateNodeTemplate = function(data) {\r
+       var nodeTemplate = {};\r
+       nodeTemplate.id = data.id;\r
+       nodeTemplate.name = data.name;\r
+       nodeTemplate.type = data.type;\r
+       nodeTemplate.parentType = data.parentType;\r
+       nodeTemplate.vnfdid = ""; //only nested VNF node has value\r
+       nodeTemplate.properties = data.properties;\r
+       nodeTemplate.flavors = data.flavors;     \r
+       nodeTemplate.containIn = ""; //containIn relation which the front-end custom is used to display the topo relations of the graph\r
+       nodeTemplate.containedin = ""; //the relation between VNF and VNFC\r
+       nodeTemplate.deployedon = ""; //the relation between VDU and VNFC\r
+       nodeTemplate.connectedto = ""; //the relation between VNFC and VNFC\r
+       nodeTemplate.virtuallinksto = ""; //the relation between VL and CP or between VL and VDU\r
+       nodeTemplate.virtualbindsto = ""; //the relation between CP and VDU\r
+       nodeTemplate.outLinks = []; //a collection of connected nodes connectedto\r
+       nodeTemplate.inLinks = []; //nodes are connected connectedto relationship collection\r
+       nodeTemplate.currentLinkNum = 0;\r
+       var relationShips = data.relationShips || []; //some nodes may not have relationships\r
+       $.each(relationShips, function(index, obj){\r
+               if (obj.sourceNodeId == data.id) {\r
+                       switch(obj.type) {\r
+                               case "containedIn" :\r
+                               case "tosca.relationships.nfv.ContainedIn" :\r
+                               case "tosca.relationships.nfv.BelongTo" :\r
+                                       nodeTemplate.containedin = obj.targetNodeId;\r
+                                       break;\r
+                               case "deployedOn" :\r
+                               case "tosca.relationships.nfv.DeployedOn" :\r
+                                       nodeTemplate.deployedon = obj.targetNodeId;\r
+                                       break;\r
+                               case "connectedTo" : \r
+                               case "tosca.relationships.nfv.ConnectsTo" :\r
+                                       nodeTemplate.connectedto += "," + obj.targetNodeId;\r
+                                       nodeTemplate.outLinks.push(obj.targetNodeId);\r
+                                       break;\r
+                               case "virtualLinksTo" :\r
+                               case "tosca.relationships.nfv.VirtualLinksTo" :\r
+                                       nodeTemplate.virtuallinksto += "," + obj.targetNodeId;\r
+                                       break;\r
+                               case "virtualBindsTo" :\r
+                               case "tosca.relationships.nfv.VirtualBindsTo" :\r
+                                       nodeTemplate.virtualbindsto += "," + obj.targetNodeId;\r
+                                       break;\r
+                       }\r
+               }\r
+               if (obj.targetNodeId == data.id) {\r
+                       switch(obj.type) {\r
+                               case "connectedTo" : \r
+                               case "tosca.relationships.nfv.ConnectsTo" :\r
+                                       nodeTemplate.inLinks.push(obj.sourceNodeId);\r
+                                       break;\r
+                       }\r
+               }\r
+       });\r
+       nodeTemplate.connectedto = nodeTemplate.connectedto.substring(1);\r
+       nodeTemplate.virtuallinksto = nodeTemplate.virtuallinksto.substring(1);\r
+       nodeTemplate.virtualbindsto = nodeTemplate.virtualbindsto.substring(1);\r
+\r
+       if(topoUtil.isVNFType(data.type)) {\r
+        $.each(data.properties, function(key, value) {\r
+            if(key == "vnfdid" && value) {\r
+                nodeTemplate.vnfdid = value;\r
+            }\r
+        });\r
+       }\r
+       return nodeTemplate;\r
+}\r
+\r
+/**\r
+ * generate topology data\r
+ * deployedon is used to display the relation between VNFC and VDU\r
+ * containedin is used to display the relation between VNFC and VNF\r
+ * transform relations between VDU and VNF, containIn is used to display the relation between VDU and VNF\r
+ * @param  {[type]} data [description]\r
+ * @return {[type]}      [description]\r
+ */\r
+topoUtil.generateTopoTemplate = function(data) {\r
+       for(var i=0;i<data.length;i++) {\r
+               if(data[i].containedin){\r
+                       //assignment is designed to compatible with no VDU, only VNF and VNFC situations\r
+                       data[i].containIn = data[i].containedin;\r
+                       for(var j=0;j<data.length;j++) {\r
+                               if(data[i].deployedon == data[j].id) {\r
+                                       data[j].containIn = data[i].containedin;\r
+                                       break;\r
+                               }\r
+                       }\r
+               }\r
+               //the relationship between VNFC and VDU deployedon replace with containIn\r
+               if(data[i].deployedon){\r
+                       data[i].containIn = data[i].deployedon;\r
+               }\r
+       }\r
+       return data;    \r
+}\r
+\r
+/**\r
+ * generate nodetemplate detail\r
+ * @param  {[type]} data [description]\r
+ * @return {[type]}      [description]\r
+ */\r
+topoUtil.generateNodeTemplateDetail = function(data) {\r
+       var nodeTemplateDetail = {};\r
+       nodeTemplateDetail.properties = [];\r
+       var properties = data.properties;\r
+       for(var key in properties) {\r
+               var property = {};\r
+               property.key = key;\r
+               property.value = properties[key];\r
+               nodeTemplateDetail.properties.push(property);\r
+       }\r
+       //add flavor to nodetempalte properties\r
+       var flavors = data.flavors;\r
+       if(flavors && flavors.length) {\r
+               var flavor = flavors[0];\r
+               for(var key in flavor) {\r
+                       var property = {};\r
+                       property.key = key;\r
+                       property.value = flavor[key];\r
+                       nodeTemplateDetail.properties.push(property);\r
+               }\r
+       }\r
+\r
+       nodeTemplateDetail.relationShips = data.relationShips;  \r
+\r
+       nodeTemplateDetail.general = [];\r
+       var general = {};\r
+       general.key = "name";\r
+       general.value = data.name;\r
+       nodeTemplateDetail.general.push(general);\r
+       var general = {};\r
+       general.key = "type";\r
+       general.value = data.type;\r
+       nodeTemplateDetail.general.push(general);\r
+\r
+       return nodeTemplateDetail;\r
+}\r
+\r
+topoUtil.getCurrentDetailData = function(detailDatas, nodetemplateid) {\r
+    var data;\r
+    for(var i=0; i<detailDatas.length; i++) {\r
+        if (detailDatas[i].id == nodetemplateid) {\r
+            data = topoUtil.generateNodeTemplateDetail(detailDatas[i]);\r
+            break;\r
+        }\r
+    }\r
+    return data;\r
+}\r
+\r
+/**\r
+ * generate node instance detail\r
+ * a node template may correspond to multiple node instances, their properties are not the same\r
+ * @param  {[type]} data [description]\r
+ * @return {[type]}      [description]\r
+ */\r
+topoUtil.generateNodeInstanceDetail = function(data) {\r
+       var nodeInstanceDetail = [];\r
+       nodeInstanceDetail.properties = [];\r
+       nodeInstanceDetail.general = [];        \r
+\r
+       var properties = data.properties;\r
+       for(var i=0;i<properties.length;i++) {\r
+               var nodeDetail = {};\r
+               var name = data.name;           \r
+               for(var key in properties[i]) {\r
+                       var property = {};\r
+                       property.key = key;\r
+                       property.value = properties[i][key];                    \r
+                       nodeDetail.properties.push(property);\r
+\r
+                       if(key == "name") {\r
+                               name = properties[i][key];\r
+                       }\r
+               }\r
+               var general = {};\r
+               general.key = "name";\r
+               general.value = name;\r
+               nodeDetail.general.push(general);\r
+               var general = {};\r
+               general.key = "type";\r
+               general.value = data.type;\r
+               nodeDetail.general.push(general);\r
+\r
+               nodeDetail.relationShips = data.relationShips;\r
+               nodeInstanceDetail.push(nodeDetail);\r
+       }\r
+       return nodeInstanceDetail;\r
+}\r
+\r
+topoUtil.getCurrentNodeInstanceDetail = function(detailDatas, nodetemplateid) {\r
+    var data;\r
+    for(var i=0; i<detailDatas.length; i++) {\r
+        if (detailDatas[i].id == nodetemplateid) {\r
+            data = topoUtil.generateNodeInstanceDetail(detailDatas[i]);\r
+            break;\r
+        }\r
+    }\r
+    return data;\r
+}\r
+\r
+topoUtil.getCidr = function(properties) {\r
+       for(var key in properties) {\r
+        if(key == "cidr") {\r
+               return properties[key];\r
+        }\r
+    }\r
+}\r
+\r
+topoUtil.getColor = function(index) {\r
+       var colors = ['#1F77B4','#FF7F0E','#2CA02C','#D62728','#9467BD','#8C564B','#4b6c8b','#550000','#dc322f','#FF6600'];\r
+       return colors[index%10];\r
+}\r
+\r
+topoUtil.getCpTop = function(index, parentBoxId) {\r
+    var newTop = "";\r
+    var height = 0;\r
+    if(index == 0) {\r
+        var circle_top = $(".circle").css("top");\r
+        var circle_height = $(".circle").css("height");\r
+        var top = circle_top.substring(0, circle_top.length-2) - 0;\r
+        height = circle_height.substring(0, circle_height.length-2) - 0;\r
+        newTop = (top+height+10);\r
+    } else {\r
+        var circle_top = $(".smallCircle").css("top");\r
+        var circle_height = $(".smallCircle").css("height");\r
+        var top = circle_top.substring(0, circle_top.length-2) - 0;\r
+        height = circle_height.substring(0, circle_height.length-2) - 0;\r
+        newTop = (top+height*(index));\r
+    }\r
+    //if the length of cp over the box which cp is virtualbindsto, set the box min-heght attribute\r
+    var $box = $("#" + parentBoxId);\r
+       var min_height = $box.css("min-height");\r
+       var box_min_height = min_height.substring(0, min_height.length-2) - 0;\r
+       var cp_height = newTop + height;\r
+       if(cp_height > box_min_height) {\r
+               $box.css("min-height", cp_height);\r
+       }\r
+\r
+    return newTop + "px";\r
+}\r
+\r
+topoUtil.isVNFType = function(type) {\r
+       if((type.toUpperCase().indexOf(".VNF") > -1) && (type.toUpperCase().indexOf(".VNFC") < 0)) {\r
+               return true;\r
+       }\r
+       return false;\r
+}
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/template.html b/openo-portal/portal-catalog/src/main/webapp/catalog/template.html
new file mode 100644 (file)
index 0000000..cbc6528
--- /dev/null
@@ -0,0 +1,71 @@
+<!--\r
+\r
+    Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+\r
+    Licensed under the Apache License, Version 2.0 (the "License");\r
+    you may not use this file except in compliance with the License.\r
+    You may obtain a copy of the License at\r
+\r
+            http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+    Unless required by applicable law or agreed to in writing, software\r
+    distributed under the License is distributed on an "AS IS" BASIS,\r
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+    See the License for the specific language governing permissions and\r
+    limitations under the License.\r
+\r
+-->\r
+<!DOCTYPE html>\r
+<html>\r
+<head>\r
+       <head lang="en">\r
+       <meta charset="UTF-8">\r
+       <title></title>\r
+       <link href="../component/thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" />\r
+       <link href="../component/thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet" />\r
+       <link href="../component/thirdparty/uniform/css/uniform.default.min.css" rel="stylesheet" />\r
+       <link href="../component/css/ZteIctIcons/style.css" rel="stylesheet"/>\r
+       <link href="../framework/css/ngict-component.css" rel="stylesheet"/>\r
+       <link href="../framework/css/plugins.css" rel="stylesheet"/>\r
+       <link href="css/template.css" rel="stylesheet" />\r
+       <style type="text/css">\r
+       .ms-controller {\r
+               visibility: hidden;\r
+       }\r
+       .btnTemp {\r
+               min-width: 30px;\r
+               letter-spacing: 0px;\r
+       }\r
+       </style>\r
+</head>\r
+<body>\r
+       <div ms-controller="tmController" class="container-fluid ms-controller">\r
+               <div class="row"> \r
+                   <div class="col-xs-6 col-md-6 col-sm-6 col-lg-6 titlefont">\r
+                       <span id="nfv-template-iui-title" name_i18n="com_zte_nfv_nsoc_i18n"></span>\r
+                   </div> \r
+               </div>\r
+               <div class="separator-line"></div>\r
+               <div class="row-fluid" data-name="table_zone">\r
+                       <div id='ict_template_table_div'></div>\r
+               </div>\r
+       </div>\r
+\r
+       <script type="text/javascript" src="../component/thirdparty/jquery/jquery-1.10.2.min.js"></script>\r
+    <script type="text/javascript" src="../component/thirdparty/bootstrap/js/bootstrap.min.js"></script>\r
+    <script type="text/javascript" src="../component/thirdparty/bootbox/bootbox.min.js"></script>  \r
+    <script type="text/javascript" src="../component/thirdparty/data-tables/jquery.dataTables.min.js"></script>\r
+    <script type="text/javascript" src="../component/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>\r
+\r
+    <script type="text/javascript" src="../vendor/avalon/avalon.modern.js"></script>\r
+\r
+    <script type="text/javascript" src="../framework/js/tools.js"></script>\r
+    \r
+       <script type="text/javascript" src="js/component/commonUtil.js"></script>\r
+       <script type="text/javascript" src="js/component/serverPageTable.js"></script>\r
+       <script type="text/javascript" src="js/component/loadi18n_nsoc.js"></script>\r
+       \r
+       <script type="text/javascript" src="js/template/tmUtil.js"></script>\r
+       <script type="text/javascript" src="js/template/tmController.js"></script>\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/templateDetail.html b/openo-portal/portal-catalog/src/main/webapp/catalog/templateDetail.html
new file mode 100644 (file)
index 0000000..8937d3b
--- /dev/null
@@ -0,0 +1,129 @@
+<!--\r
+\r
+    Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+\r
+    Licensed under the Apache License, Version 2.0 (the "License");\r
+    you may not use this file except in compliance with the License.\r
+    You may obtain a copy of the License at\r
+\r
+            http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+    Unless required by applicable law or agreed to in writing, software\r
+    distributed under the License is distributed on an "AS IS" BASIS,\r
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+    See the License for the specific language governing permissions and\r
+    limitations under the License.\r
+\r
+-->\r
+<!DOCTYPE html>\r
+<html>\r
+<head>\r
+       <head lang="en">\r
+       <meta charset="UTF-8">\r
+       <title></title>\r
+       <link href="../component/thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" />\r
+       <link href="../component/thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet" />\r
+       <link href="../component/thirdparty/uniform/css/uniform.default.min.css" rel="stylesheet" />\r
+       <link href="../component/css/ZteIctIcons/style.css" rel="stylesheet"/>\r
+       <link href="../framework/css/ngict-component.css" rel="stylesheet"/>\r
+       <link href="../framework/css/plugins.css" rel="stylesheet"/>\r
+       <link href="css/platform/animate.min.css" rel="stylesheet"/>\r
+       <link href="css/datatable-sort.css" rel="stylesheet"/>\r
+       <link href="css/templateDetail.css" rel="stylesheet" />\r
+       <link href="css/topology.css" rel="stylesheet" />\r
+       <style type="text/css">\r
+       .ms-controller {\r
+               visibility: hidden;\r
+       }\r
+       .ms-nodedetail {\r
+               display: none;\r
+       }\r
+       </style>\r
+</head>\r
+<body>\r
+       <div ms-controller="tmDetailController" class="container-fluid ms-controller">\r
+           <div data-name="tab_zone">\r
+            <div class="col-xs-12">\r
+                <ul class="nav nav-tabs" ms-each-tab="templateData" id="tab">\r
+                    <li ms-class-active="tab.value">\r
+                       <a ms-attr-href="tab.href" ms-text="tab.name" data-toggle="tab"></a>\r
+                    </li>\r
+                </ul>\r
+            </div>\r
+        </div>\r
+               <div class="tab-content">\r
+                       <div class="tab-pane active" id="topology">\r
+                               <div class="row" style=" margin-top: 50px;"> \r
+                                   <div class="col-xs-12 col-md-12 col-sm-12 col-lg-12 titlefont">\r
+                                       <button ms-visible="topologyTab.returnBtnVisible" class="btn white iconBtn"\r
+                                               ms-click="topologyTab.$returnNS" ms-attr-title="topologyTab.btnTip">\r
+                                                       <i class="fa fa-arrow-left"></i>\r
+                                               </button>\r
+                                   </div>\r
+                               </div>\r
+                               <div ms-include-src="topologyTab.topology"></div>\r
+                       </div>\r
+                       <div class="tab-pane" id="nodes">\r
+                               <div class="row-fluid" data-name="table_zone">\r
+                                       <div class="col-xs-12" id='ict_nodes_template_table_div'></div>\r
+                               </div>\r
+                       </div>                  \r
+               </div>\r
+               \r
+               <div id="right-menu" class="ms-nodedetail" ms-css-display="nodesTab.nodesDetail.isShow">\r
+                       <div>\r
+                               <div class="title"><h4>{{nodesTab.nodesDetail.detailTitle}}</h4>\r
+                                       <div class="rigth right-button-pointer" ms-click="nodesTab.nodesDetail.$showDetails('none')">\r
+                                       <button type="button" class="btn btn-default">\r
+                                               <span id="nfv-templateDetail-nodesTab-iui-btn-close" name_i18n="com_zte_nfv_nsoc_i18n"></span>\r
+                                       </button>\r
+                                       </div>\r
+                               </div>\r
+                               <div>\r
+                                       <div class="btn-group" >\r
+                                               <button type="button" class="btn btn-default" ms-repeat="nodesTab.nodesDetail.detailData" ms-click="nodesTab.nodesDetail.detailCondChange($index)" ms-attr-id="el.id"\r
+                                               ms-class="active: el.isActive">{{el.name}}\r
+                                               </button>\r
+                                       </div>\r
+                                       <div ms-if="nodesTab.nodesDetail.detailIndex === 0">\r
+                                               <div class="row-fluid" data-name="table_zone">\r
+                                                       <div id='ict_table_general_div' class="nodesDetail"></div>\r
+                                               </div>\r
+                                       </div>\r
+                                       <div ms-if="nodesTab.nodesDetail.detailIndex === 1">\r
+                                               <div class="row-fluid" data-name="table_zone">\r
+                                                       <div id='ict_table_properties_div' class="nodesDetail"></div>\r
+                                               </div>\r
+                                       </div>\r
+                                       <div ms-if="nodesTab.nodesDetail.detailIndex === 2">\r
+                                               <div class="row-fluid" data-name="table_zone">\r
+                                                       <div id='ict_table_relationShips_div' class="nodesDetail"></div>\r
+                                               </div>\r
+                                       </div>\r
+                               </div>\r
+                       </div>\r
+               </div>\r
+       </div>\r
+\r
+       <script type="text/javascript" src="../component/thirdparty/jquery/jquery-1.10.2.min.js"></script>\r
+    <script type="text/javascript" src="../component/thirdparty/bootstrap/js/bootstrap.min.js"></script>\r
+       <script type="text/javascript" src="../component/thirdparty/data-tables/jquery.dataTables.js"></script>\r
+       <script type="text/javascript" src="../component/thirdparty/data-tables/jquery.dataTables.min.js"></script>\r
+       <script type="text/javascript" src="../component/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>\r
+\r
+       <script type="text/javascript" src="../vendor/bootstrap-growl/bootstrap-growl.min.js"></script>\r
+       <script type="text/javascript" src="../vendor/avalon/avalon.modern.js"></script>\r
+\r
+       <script type="text/javascript" src="../framework/js/tools.js"></script>\r
+       \r
+       <script type="text/javascript" src="js/component/commonUtil.js"></script>\r
+       <script type="text/javascript" src="js/component/serverPageTable.js"></script>\r
+       <script type="text/javascript" src="js/component/loadi18n_nsoc.js"></script>\r
+\r
+       <script type="text/javascript" src="js/template/tmDetailUtil.js"></script>\r
+       <script type="text/javascript" src="js/template/tmUtil.js"></script>\r
+       <script type="text/javascript" src="js/template/tmDetailController.js"></script>\r
+       <script type="text/javascript" src="js/template/topoUtil.js"></script>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/topology.html b/openo-portal/portal-catalog/src/main/webapp/catalog/topology.html
new file mode 100644 (file)
index 0000000..661ae23
--- /dev/null
@@ -0,0 +1,122 @@
+<!--\r
+\r
+    Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+\r
+    Licensed under the Apache License, Version 2.0 (the "License");\r
+    you may not use this file except in compliance with the License.\r
+    You may obtain a copy of the License at\r
+\r
+            http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+    Unless required by applicable law or agreed to in writing, software\r
+    distributed under the License is distributed on an "AS IS" BASIS,\r
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+    See the License for the specific language governing permissions and\r
+    limitations under the License.\r
+\r
+-->\r
+<div class="container-fluid">\r
+       <div id="networks" style="float:left;display:inline-block">             \r
+               <div class="networksContainer"> \r
+                       <div class="network" ms-repeat-network="topologyTab.networkTopoDatas">\r
+                               <div class="name" tooltip="" ms-attr-title="network.name" ms-if="network.name"\r
+                                        ms-click="topologyTab.$showTopo(network.id, network.name)">\r
+                                        <div ms-if="topologyTab.isShowNum" ms-text="network.num" class="badge">0</div>\r
+                                        <span>{{network.name}}</span>\r
+                               </div>\r
+                               <div class="subnet" ms-repeat-subnet="network.subnets">                         \r
+                                       <div class="line">\r
+                                               <div class="vlan" ms-attr-id="subnet.id" ms-css-background-color="topologyTab.$getColor($index+$outer.$index)" ms-attr-title="subnet.name" ms-click="topologyTab.$showTopo(subnet.id, subnet.name)">\r
+                                                       <div ms-if="topologyTab.isShowNum" ms-text="subnet.num" class="badge">0</div>\r
+                                                       <p>{{subnet.name}}</p>\r
+                                                       <p class="cidr" ms-text="topologyTab.$getCidr(subnet.properties)"></p>\r
+                                               </div>\r
+                                       </div>\r
+                               </div><!--end repeat network.subnets-->\r
+                       </div><!--end repeat topologyTab.networkTopoDatas-->\r
+               </div>\r
+       </div>\r
+       <div id="topo" style="float:left;display:inline-block">\r
+               <div class="row-fluid" data-name="topo_zone">           \r
+                       <div class="bpContainer" ms-each-host="topologyTab.boxTopoDatas">       \r
+                               <div>\r
+                               <div class="box" ms-attr-id="host.id">\r
+                                       <div class="piProgress" size="55">                              \r
+                                       <div class="circle">\r
+                                       <i class="gs-node-icon fa fa-desktop" ></i>     \r
+                                       <div ms-if="topologyTab.isShowNum" ms-text="host.num" class="badge">1</div>\r
+                                       </div> \r
+                                       <div class="smallCircle" ms-repeat-cp="host.cp" ms-attr-id="cp.id" ms-title="cp.name" \r
+                                                ms-click="topologyTab.$showTopo(cp.id,cp.name)" ms-css-top="topologyTab.$getCpTop($index,host.id)">\r
+                                       <i class="gs-cp-icon fa fa-credit-card" ></i>\r
+                                       </div>                          \r
+                               </div>\r
+                               <div class="head"  ms-hover="boxHover" tooltip  ms-attr-title="host.name" ms-text="host.name" ms-click="topologyTab.$showTopo(host.id, host.name)">                     \r
+                               </div>\r
+                               <div class="holder">\r
+                                       <div class="nest" ms-if="host.vnfdid" ms-click="topologyTab.$showVnfTopo(host.vnfdid)"\r
+                                                ms-attr-title="topologyTab.vnfTip"><!-- only display nested ns template  -->\r
+                                               <div class="plus">\r
+                                                       <i class="fa fa-plus" style="color: #3aaeda;"></i>\r
+                                               </div>\r
+                                       </div>\r
+                                       <div ms-each-box="host.children" ><!-- ngRepeat: node in map track by node.name --> \r
+                                               <div>            \r
+                                       <div class="box" ms-attr-id="box.id">                                           \r
+                                                       <div class="piProgress" size="55">                     \r
+                                                               <div class="circle">\r
+                                                                       <i class="gs-node-icon fa fa-cogs"></i>\r
+                                                                       <div ms-if="topologyTab.isShowNum" ms-text="box.num" class="badge">1</div>\r
+                                                               </div>\r
+                                                               <div class="smallCircle" ms-repeat-cp="box.cp" ms-attr-id="cp.id" ms-title="cp.name" ms-click="topologyTab.$showTopo(cp.id,cp.name)" ms-css-top="topologyTab.$getCpTop($index,box.id)">\r
+                                                               <i class="gs-cp-icon fa fa-credit-card" ></i>\r
+                                                               </div> \r
+                                               </div>  \r
+                                                               <div class="head"  ms-hover="boxHover" \r
+                                                                tooltip="" ms-click="topologyTab.$showTopo(box.id, box.name)" ms-attr-title="box.name" ms-text="box.name"></div> \r
+                                                       <div class="holder" >\r
+                                                               <div ms-each-app="box.children">\r
+                                                                       <!-- ngRepeat: node in map track by node.name -->\r
+                                                                       <div>\r
+                                                                       <div  class="app" ms-attr-id="app.id"  ms-click="topologyTab.$showTopo(app.id, app.name)" ms-hover="appHover">\r
+                                                                               <div class="piProgress" size="55">                                              \r
+                                                                                       <div class="circle" >\r
+                                                                                       <i class="gs-node-icon fa fa-cog" ></i>\r
+                                                                                       <div ms-if="topologyTab.isShowNum" ms-text="app.num" class="badge">1</div>          \r
+                                                                                       </div>\r
+                                                                               </div>\r
+                                                                               <p tooltip="" ms-attr-id="app.id" ms-attr-title="app.name" ms-text="app.name"></p>\r
+                                                                               </div>             \r
+                                                                               </div>\r
+                                                                               <!-- end ngRepeat: node in map track by node.name -->\r
+                                                                       </div>\r
+                                                       </div><!-- end ngIf: node.isApp == false -->\r
+                                                       </div><!-- end ngRepeat: node in map track by node.name -->\r
+                                               </div>\r
+                                               </div>\r
+                               </div>  \r
+                               </div>\r
+                               </div>   \r
+                       </div>\r
+               </div>\r
+       </div>\r
+       <div>\r
+               <div class="coordinates">\r
+                       <svg id="svg_vl" width="100%" height="100%" fill="silver">\r
+                               <g transform="translate(0, 0)" >\r
+                               </g>\r
+                       </svg>\r
+               </div>\r
+               <div class="coordinates" style="z-index:3;">\r
+                       <svg id="svg_vdu" width="100%" height="100%" fill="silver">\r
+                               <g transform="translate(0, 0)" >\r
+                               </g>\r
+                               <defs>\r
+                               <marker id="arrowhead" viewBox="0 0 20 20" refX="16" refY="10" markerUnits="userSpaceOnUse" markerWidth="16" markerHeight="12" orient="auto" fill="#7A7A7A">\r
+                               <path d="M 0 0 L 20 10 L 0 20 z"></path>\r
+                               </marker>\r
+                               </defs>\r
+                        </svg>\r
+               </div>\r
+       </div>\r
+</div>
\ No newline at end of file