diff options
| author |   Luji <lu.ji3@zte.com.cn> | 2016-09-14 13:47:11 +0000 |
|---|---|---|
| committer |   Gerrit Code Review <gerrit@open-o.org> | 2016-09-14 13:47:11 +0000 |
| commit | dceeba6d13b4a8bb12a2e3f20fa0dbc52ef3093e (patch) | |
| tree | 064ad301299e0e38598bf3b6984a299b3aa9e8b7 | |
| parent | 9c9d3ca1e077c44143bf4725584b431cf79a39e7 (diff) | |
| parent | 1fcf98ed5c209eace20d28acce228200b998d05f (diff) | |
Merge "Submit catalog gui"
40 files changed, 7504 insertions, 0 deletions
diff --git a/openo-portal/portal-catalog/pom.xml b/openo-portal/portal-catalog/pom.xml new file mode 100644 index 00000000..cca1acb8 --- /dev/null +++ b/openo-portal/portal-catalog/pom.xml @@ -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 index 00000000..3509c94e --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/csarPackage.html @@ -0,0 +1,303 @@ +<!--
+
+ 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.
+
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <head lang="en">
+ <meta charset="UTF-8">
+ <title></title>
+ <link href="../component/thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
+ <link href="../component/thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
+ <link href="../component/thirdparty/uniform/css/uniform.default.min.css" rel="stylesheet" />
+ <link href="../component/css/ZteIctIcons/style.css" rel="stylesheet"/>
+ <link href="../framework/css/ngict-component.css" rel="stylesheet"/>
+ <link href="../framework/css/plugins.css" rel="stylesheet"/>
+ <link href="../vendor/jQuery-File-Upload/css/jquery.fileupload.css" rel="stylesheet" />
+ <link href="css/fileupload.css" rel="stylesheet" />
+ <link href="css/package.css" rel="stylesheet" />
+ <style>
+ .ms-controller{ visibility: hidden }
+ </style>
+</head>
+<body>
+ <div class="container-fluid ms-controller" ms-controller="pmController">
+ <div class="container upload">
+ <form id="fileupload" role="form" enctype="multipart/form-data">
+ <div class="file-preview">
+ <div id="dropzone" class="file-drop-zone">
+ <div class="file-drop-zone-title">
+ <span id="nfv-package-iui-drop-zone-title" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </div>
+ </div>
+ </div>
+ <div class="input-group fileupload-btn">
+ <div id="fileName" class="form-control file-caption">
+ </div>
+ <span class="input-group-btn">
+ <span class="btn btn-primary fileinput-button">
+ <span id="nfv-package-iui-drop-zone-selectBtn" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ <input type="file" name="file" multiple>
+ </span>
+ <button id="fileremove" class="btn btn-default" type="button" disabled>
+ <span id="nfv-package-iui-drop-zone-removeBtn" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </button>
+ <button id="filesubmit" class="btn btn-default" type="submit" disabled>
+ <span id="nfv-package-iui-drop-zone-uploadBtn" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </button>
+ </span>
+ </div>
+ <div class="fileupload-progress">
+ <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
+ <div id="bar" class="progress-bar progress-bar-success" style="width:0%;"></div><span id="persent"></span>
+ </div>
+ </div>
+ </form>
+ </div>
+ <div class="row" style=" margin-top: 15px;">
+ <div class="col-xs-6 col-md-6 col-sm-6 col-lg-6 titlefont">
+ <span id="nfv-package-iui-title" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </div>
+ </div>
+ <div class="separator-line"></div>
+ <div>
+ <table class="table table-striped table-bordered dataTable ">
+ <thead>
+ <tr class="heading">
+ <th id="nfv-package-iui-field-sn" name_i18n="com_zte_nfv_nsoc_i18n"
+ style="width: 80px;">
+ </th>
+ <th id="nfv-package-iui-field-name" name_i18n="com_zte_nfv_nsoc_i18n"></th>
+ <th id="nfv-package-iui-field-type" name_i18n="com_zte_nfv_nsoc_i18n"></th>
+ <th id="nfv-package-iui-field-usagestate" name_i18n="com_zte_nfv_nsoc_i18n"></th>
+ <th id="nfv-package-iui-field-processstate" name_i18n="com_zte_nfv_nsoc_i18n"></th>
+ <th id="nfv-package-iui-field-operationalstate" name_i18n="com_zte_nfv_nsoc_i18n"></th>
+ <th id="nfv-package-iui-field-onboardstate" name_i18n="com_zte_nfv_nsoc_i18n"></th>
+ <th id="nfv-package-iui-field-operation" name_i18n="com_zte_nfv_nsoc_i18n"></th>
+ </tr>
+ </thead>
+ <tbody ms-each-res="vm.resource.packageInfo">
+ <tr>
+ <td ms-text="$index+1"></td>
+ <td>
+ <a href="#" ms-click="vm.packageDetail.$showDetails('block',$index,res.name)">
+ {{res.name}}
+ </a>
+ </td>
+ <td ms-text="res.type"></td>
+ <td ms-text="res.usageState"></td>
+ <td ms-text="res.processState"></td>
+ <td ms-text="res.operationalState"></td>
+ <td>
+ <span class="label label-info status" data-toggle="tooltip" title="nfv-package-iui-status-tip"
+ ms-click="vm.onBoardPackage(res.csarId,res.type)">
+ {{res.onBoardState}}
+ </span>
+ </td>
+ <td>
+ <a href="#" class="btn-xs grey btn-editable" ms-click="vm.$delPackage(res.csarId,res.type)">
+ <i class="ict-delete"></i>
+ <i id="nfv-software-iui-action-delete" name_i18n="com_zte_nfv_nsoc_i18n"></i>
+ </a>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div id="right-menu" ms-css-display="packageDetail.isShow">
+ <div>
+ <div class="title">
+ <h4>
+ {{packageDetail.detailTitle}}
+ </h4>
+ <div class="rigth right-button-pointer" ms-click="packageDetail.$showDetails('none')">
+ <button type="button" class="btn btn-default">
+ <span id="nfv-package-iui_packageview_btn_close" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </button>
+ </div>
+ </div>
+ <div class="row-fluid" data-name="table_zone">
+ <div id='ict_table_general_div' class="packageDetail">
+ <table class="table table-striped table-bordered dataTable ">
+ <thead>
+ <tr class="heading">
+ <th id="nfv-package-iui_packageview_key" name_i18n="com_zte_nfv_nsoc_i18n"></th>
+ <th id="nfv-package-iui_packageview_value" name_i18n="com_zte_nfv_nsoc_i18n"></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td id="nfv-package-iui-field-detail-csarid" name_i18n="com_zte_nfv_nsoc_i18n"></td>
+ <td ms-text="resource.packageDetails.csarId"></td>
+ </tr>
+ <tr>
+ <td id="nfv-package-iui-field-detail-name" name_i18n="com_zte_nfv_nsoc_i18n"></td>
+ <td ms-text="resource.packageDetails.name"></td>
+ </tr>
+ <tr>
+ <td id="nfv-package-iui-field-detail-type" name_i18n="com_zte_nfv_nsoc_i18n"></td>
+ <td ms-text="resource.packageDetails.type"></td>
+ </tr>
+ <tr>
+ <td id="nfv-package-iui-field-detail-provider" name_i18n="com_zte_nfv_nsoc_i18n"></td>
+ <td ms-text="resource.packageDetails.provider"></td>
+ </tr>
+ <tr>
+ <td id="nfv-package-iui-field-detail-version" name_i18n="com_zte_nfv_nsoc_i18n"></td>
+ <td ms-text="resource.packageDetails.version"></td>
+ </tr>
+ <tr>
+ <td id="nfv-package-iui-field-detail-size" name_i18n="com_zte_nfv_nsoc_i18n"></td>
+ <td ms-text="resource.packageDetails.size"></td>
+ </tr>
+ <tr>
+ <td id="nfv-package-iui-field-detail-createtime" name_i18n="com_zte_nfv_nsoc_i18n"></td>
+ <td ms-text="resource.packageDetails.createTime"></td>
+ </tr>
+ <tr>
+ <td id="nfv-package-iui-field-detail-modifytime" name_i18n="com_zte_nfv_nsoc_i18n"></td>
+ <td ms-text="resource.packageDetails.modifyTime"></td>
+ </tr>
+ <tr>
+ <td id="nfv-package-iui-field-detail-deletionpending" name_i18n="com_zte_nfv_nsoc_i18n"></td>
+ <td ms-text="resource.packageDetails.deletionPending"></td>
+ </tr>
+ <tr>
+ <td id="nfv-package-iui-field-detail-operationalstate" name_i18n="com_zte_nfv_nsoc_i18n"></td>
+ <td ms-text="resource.packageDetails.operationalState"></td>
+ </tr>
+ <tr>
+ <td id="nfv-package-iui-field-detail-usagestate" name_i18n="com_zte_nfv_nsoc_i18n"></td>
+ <td ms-text="resource.packageDetails.usageState"></td>
+ </tr>
+ <tr>
+ <td id="nfv-package-iui-field-detail-onboardstate" name_i18n="com_zte_nfv_nsoc_i18n"></td>
+ <td ms-text="resource.packageDetails.onBoardState"></td>
+ </tr>
+ <tr>
+ <td id="nfv-package-iui-field-detail-processstate" name_i18n="com_zte_nfv_nsoc_i18n"></td>
+ <td ms-text="resource.packageDetails.processState"></td>
+ </tr>
+ <tr>
+ <td id="nfv-package-iui-field-detail-format" name_i18n="com_zte_nfv_nsoc_i18n"></td>
+ <td ms-text="resource.packageDetails.format"></td>
+ </tr>
+ <tr>
+ <td id="nfv-package-iui-field-detail-downloaduri" name_i18n="com_zte_nfv_nsoc_i18n"></td>
+ <td ms-text="resource.packageDetails.downloadUri"></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div id="selectVimDialog" class="modal fade" tabindex="-1" role="dialog"
+ aria-labelledby="myModalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h4 class="modal-title" id="myModalLabel">
+ <span id="nfv-package-iui-selectvim-title" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </h4>
+ </div>
+ <div class="modal-body">
+ <table class="table table-striped table-bordered dataTable ">
+ <thead>
+ <tr class="heading">
+ <th id="nfv-package-iui-onboard-dialog-vimname" name_i18n="com_zte_nfv_nsoc_i18n"></th>
+ <th id="nfv-package-iui-test-env" name_i18n="com_zte_nfv_nsoc_i18n"></th>
+ <th id="nfv-package-iui-product-env" name_i18n="com_zte_nfv_nsoc_i18n"></th>
+ </tr>
+ </thead>
+ <tbody ms-each-rest="resource.vimSelectItems">
+ <tr>
+ <td ms-text="rest.vimName"></td>
+ <td>
+ <div class="checkbox">
+ <input type="radio" name="testEnvRadios" ms-attr-id="testEnvRadios{{$index}}"
+ ms-click="vm.selectVimDialog.$radioClicked($index)">
+ </div>
+ </td>
+ <td>
+ <div class="checkbox">
+ <input type="checkbox" name="produceChecbox" ms-attr-id="produceEnvChecks{{$index}}" value="">
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <!-- <div class="form-group">
+ <div class="col-sm-3"></div>
+ <div class="col-sm-3" id="nfv-package-iui-product-env" name_i18n="com_zte_nfv_nsoc_i18n"></div>
+ <div class="col-sm-3" id="nfv-package-iui-test-env" name_i18n="com_zte_nfv_nsoc_i18n"></div>
+ </div>
+ <form class="form-horizontal" role="form" id="vimForm">
+ <div ms-each-rest="resource.vimSelectItems">
+ <div class="form-group">
+ <label class="col-sm-3 control-label" ms-text="rest.vimName"></label>
+ <div class="col-sm-3">
+ <select class="form-control" ms-attr-id='vim{{$index}}'>
+ <option value="1" id="nfv-package-iui-product-env" name_i18n="com_zte_nfv_nsoc_i18n"></option>
+ <option value="2" id="nfv-package-iui-test-env" name_i18n="com_zte_nfv_nsoc_i18n"></option>
+ </select>
+ </div>
+ </div>
+ </div>
+ </form>-->
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn" data-dismiss="modal">
+ <span id="nfv-package-iui-btn-cancel" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </button>
+ <button type="button" class="btn btn-primary" id="onBoardBtn" ms-click="vm.selectVimDialog.$confirmBtnClick()">
+ <span id="nfv-package-iui-btn-ok" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+ <script type="text/javascript" src="../component/thirdparty/jquery/jquery-1.10.2.min.js"></script>
+ <script type="text/javascript" src="../component/thirdparty/bootstrap/js/bootstrap.min.js"></script>
+ <script type="text/javascript" src="../component/thirdparty/bootbox/bootbox.min.js"></script>
+ <script type="text/javascript" src="../component/thirdparty/data-tables/jquery.dataTables.min.js"></script>
+ <script type="text/javascript" src="../component/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>
+
+ <script type="text/javascript" src="../vendor/cometd/cometd.js"></script>
+ <script type="text/javascript" src="../vendor/cometd/jquery.cometd.js"></script>
+ <script type="text/javascript" src="../vendor/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../vendor/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
+ <script type="text/javascript" src="../vendor/jQuery-File-Upload/js/jquery.fileupload.js"></script>
+ <script type="text/javascript" src="../vendor/bootstrap-growl/bootstrap-growl.min.js"></script>
+ <script type="text/javascript" src="../framework/js/core/hk.min.js"></script>
+ <script src="../vendor/echarts/echarts-all.js"></script>
+ <script type="text/javascript" src="../vendor/avalon/avalon.modern.js"></script>
+ <script src="../vendor/avalon/avalon.js"></script>
+
+ <script type="text/javascript" src="../framework/js/tools.js"></script>
+
+ <script type="text/javascript" src="js/component/commonUtil.js"></script>
+ <script type="text/javascript" src="js/component/serverPageTable.js"></script>
+ <script type="text/javascript" src="js/component/loadi18n_nsoc.js"></script>
+ <script type="text/javascript" src="js/package/pmUtil.js"></script>
+ <script type="text/javascript" src="js/package/pmController.js"></script>
+</body>
+</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 index 00000000..09af1d0d --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/css/datatable-sort.css @@ -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 index 00000000..220b5172 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/css/fileupload.css @@ -0,0 +1,81 @@ +/**
+ * 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";
+
+.file-caption {
+ display: inline-block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.file-caption .glyphicon {
+ display: inline-block;
+ min-width: 18px;
+ margin-top: 2px;
+}
+
+.file-caption-name {
+ display: inline-block;
+ overflow: hidden;
+ max-height: 20px;
+ padding-right: 10px;
+ word-break: break-all;
+}
+
+.file-caption-ellipsis {
+ position: absolute;
+ right: 10px;
+ margin-top: -6px;
+ font-size: 1.2em;
+ display: none;
+ font-weight: bold;
+ cursor: default;
+}
+
+.file-drop-zone{
+ border:1px dashed #aaa;
+ border-radius:4px;
+ height:100%;
+ text-align:center;
+ vertical-align:middle;
+ margin:12px 15px 12px 12px;
+ padding:5px
+}
+.file-drop-zone-title{
+ color:#aaa;
+ font-size:20px;
+ padding:20px 10px
+}
+.fileupload-btn {
+ padding-bottom: 10px;
+}
+
+.fileupload-input {
+ position: relative;
+ display: table;
+}
+
+.file-preview {
+ border-radius:5px;
+ border:1px solid #ddd;
+ padding:5px;
+ width:100%;
+ margin-bottom:5px
+}
+
+.upload {
+ width: 50%;
+}
\ 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 index 00000000..2f99e682 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/css/hostMirror.css @@ -0,0 +1,447 @@ +/**
+ * 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_host_table_div {
+ margin-top: 15px;
+}
+
+#ict_host_table_div label {
+ font-weight: 100;
+}s
+
+#ict_host_table_div table {
+ width: 100% !important;
+}
+
+.upload {
+ width:60%;
+}
+.myPreview {
+ height: 100px;
+}
+
+.uploadBtn {
+ margin-top:10px;
+}
+
+.input-group .form-control {
+ height: 34px !important;
+}
+
+.input-group .btn {
+ font-size: 14px !important;
+}
+
+.form-horizontal .btn-center {
+ text-align: center;
+ margin-bottom: 15px;
+}
+
+.blueactive {
+ color: #ffffff !important;
+ background-color: #5b9bd1;
+}
+
+/* .process-modal {
+ position:fixed;
+ top:0;
+ right:0;
+ bottom:0;
+ left:0;
+ z-index:1000;
+}
+.process-content {
+ width: 200px;
+ margin: 200px auto;
+ padding:15px;
+ border: 1px solid #ddd;
+ background-color: #eee;
+ text-align:center;
+} */
\ 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 index 00000000..9ff4aefa --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/css/package.css @@ -0,0 +1,461 @@ +/**
+ * 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;
+}
+
+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_package_table_div {
+ margin-top: 15px;
+}
+
+#ict_package_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_package_table_div table {
+ width: 100% !important;
+}
+
+.upload {
+ width:60%;
+ margin-top: 10px;
+}
+.myPreview {
+ height: 100px;
+}
+
+span.status:hover {
+ color: #2A69AC;
+ cursor: pointer;
+}
+
+.input-group .form-control {
+ height: 34px !important;
+}
+
+.input-group .btn {
+ font-size: 14px !important;
+}
+
+.package-drop-zone-title{
+ color:#aaa;
+ font-size:20px;
+ padding:15px 10px
+}
+
+#right-menu {
+ position:absolute;
+ top:0;
+ right:0;
+ width:420px;
+ height:100%;
+ border-left:4px solid rgb(58,174,218);
+ background-color:rgba(255,255,255,.95);
+ padding-left:19px;
+ padding-right:15px;
+ padding-top:20px;
+ z-index:9999;
+ overflow-y: auto;
+}
+
+#right-menu .btn{
+ min-width: 30px !important;
+ letter-spacing :normal !important;
+}
+
+.rigth {
+ float: right;
+}
+.right-button-pointer {
+ display:inline-block;
+ cursor:pointer
+}
+.floating-panel {
+ width:400px;
+ display:none
+}
+
+.packageDetail {
+ margin-top:15px;
+}
+
+.packageDetail label {
+ font-weight: 100;
+}
+
+.packageDetail table {
+ width:100%;
+ table-layout: fixed;
+ word-wrap:break-word;
+}
\ 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 index 00000000..5fb20898 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/css/platform/animate.min.css @@ -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 index 00000000..4beeda78 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/css/platform/skill.css @@ -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 index 00000000..ea561efc --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/css/software.css @@ -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 index 00000000..ba7a9889 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/css/template.css @@ -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 index 00000000..bc048e69 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/css/templateDetail.css @@ -0,0 +1,480 @@ +/**
+ * 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:800px;
+}
+
+.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="detail-conds-zone"] {
+ display: inline;
+}
+
+div[data-name="detail-conds-zone"] select,div[data-name="detail-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;
+}
+
+#right-menu {
+ position:absolute;
+ top:0;
+ right:0;
+ width:420px;
+ height:100%;
+ border-left:4px solid rgb(58,174,218);
+ background-color:rgba(255,255,255,.95);
+ padding-left:19px;
+ padding-right:15px;
+ padding-top:20px;
+ z-index:9999;
+ overflow-y: auto;
+}
+
+#right-menu .btn{
+ min-width: 30px !important;
+ letter-spacing :normal !important;
+}
+
+.rigth {
+ float: right;
+}
+.right-button-pointer {
+ display:inline-block;
+ cursor:pointer
+}
+.floating-panel {
+ width:400px;
+ display:none
+}
+
+title{height:25px;position:relative;top:20px;font-size:15px}
+
+#ict_nodes_table_div {
+ margin-top: 15px;
+}
+
+#ict_nodes_table_div label {
+ font-weight: 100;
+}
+
+#ict_nodes_table_div table {
+ width: 100% !important;
+}
+
+.nodesDetail {
+ margin-top: 15px;
+}
+
+.nodesDetail label {
+ font-weight: 100;
+}
+
+.nodesDetail table {
+ width:100%;
+ table-layout: fixed;
+ word-wrap:break-word;
+}
+
+.step {
+ text-align: center;
+ padding-top: 60px;
+}
+
+.step div {
+ text-align: left;
+}
+
+div.separator-sline {
+ height:28px ;
+ width:3px;
+}
+
+.titlefont {
+ font-size:16px;
+}
+
+.td_nodeId {
+ font-size: small;
+}
+
+.iconBtn {
+ margin-left:15px;
+ min-width:30px;
+}
\ 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 index 00000000..a4e1d3dd --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/css/topology.css @@ -0,0 +1,393 @@ +/**
+ * 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.
+ */
+.container-fluid {
+ background-color: #fff;
+ padding: 0;
+}
+
+
+div[data-name="topo_zone"] {
+ background-color: #fff;
+ margin-top: 15px;
+ margin-bottom: 15px;
+}
+
+p[tooltip], div[tooltip], td {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+
+
+.bpContainer {
+ position: relative;
+ display: block;
+ height: 100%;
+ padding: 40px;
+}
+
+
+.box {
+ position: relative;
+ display: inline-block;
+ min-width: 260px;
+ min-height: 170px;
+ border-width: 2px;
+ border-color: #136e9d;
+ border-style: solid;
+ background-color: #fff;
+ vertical-align: top;
+ padding: 2px;
+ border-radius: 6px;
+ margin: 0 60px 40px 0;
+}
+
+
+.box .piProgress, .line .piProgress {
+ position: absolute;
+ top: -12px;
+ left: -27px;
+ z-index: 1;
+}
+/* .piProgress {
+ position: relative;
+ display: inline-block;
+} */
+.box .piProgress .circle, .line .piProgress .circle {
+ background: #136e9d;
+ border: 2px solid #d3dfe2;
+ width: 43px;
+ height: 43px;
+ top: 5.5px;
+ left: 5.5px;
+ border-radius: 21px;
+ font-size: 14px;
+}
+.box .piProgress .smallCircle {
+ background: #136e9d;
+ border: 2px solid #d3dfe2;
+ width: 30px;
+ height: 30px;
+ left: 11px;
+ border-radius: 21px;
+ font-size: 12px;
+ cursor: pointer;
+}
+.piProgress .circle, .piProgress .smallCircle {
+ position: absolute;
+ display: box;
+ box-pack: center;
+ box-align: center;
+ background-color: #46b8da;
+ color: #fff;
+ font-size: 100%;
+ z-index: 3;
+}
+
+.bpContainer i.gs-node-icon {
+ position: absolute;
+ top: 10px;
+ left: 9px;
+ font-size: 23px;
+}
+
+.bpContainer i.gs-cp-icon {
+ position: absolute;
+ top: 5px;
+ left: 5px;
+ font-size: 15px;
+}
+
+.bpContainer .box .head, .bpContainer .line .head {
+ display: block;
+ background-color: #136e9d;
+ color: #fff;
+ padding: 2px 10px 3px 25px;
+ border-radius: 3px;
+ font-size: 20px;
+ height: 35px;
+}
+
+.bpContainer .box .holder {
+ display: block;
+ padding: 5px 25px;
+ margin-top: 1px;
+ background-color: #fff;
+}
+
+.bpContainer .box .nest {
+ min-height:130px;
+ cursor:pointer;
+}
+
+.bpContainer .box .nest .plus {
+ position: absolute;
+ bottom:0;
+ right:5px;
+}
+
+.bpContainer .box .boxHover~div {
+ background-color:#eaf1f7;
+}
+
+.bpContainer .boxHover{
+ cursor:pointer;
+}
+
+.bpContainer .box .box .appHover{
+ cursor:pointer;
+}
+
+
+.bpContainer .box .box .appHover p {
+ background-color:#eaf1f7;
+}
+
+.bpContainer .box .box {
+ border-color: #3aaeda;
+ min-width: 170px;
+ margin: 15px;
+}
+
+.bpContainer .box .box .head {
+ background-color: #3aaeda;
+}
+
+.bpContainer .box .box .piProgress .circle {
+ background-color: #3aaeda;
+}
+
+.bpContainer .box .box .holder {
+ text-align: center;
+ background-color: #fff;
+ min-height: 126px;
+}
+
+.bpContainer .box .box .boxHover~div {
+ background-color:#eaf1f7;
+}
+
+.bpContainer .app {
+ position: relative;
+ display: inline-block;
+ width: 47px;
+ height: 47px;
+ text-align: center;
+ border-radius: 3px;
+ margin: 10px 0;
+}
+
+.bpContainer .app .piProgress {
+ top: 0;
+ left: -6px;
+}
+
+.bpContainer .box .box .piProgress .circle{
+ background-color: #3aaeda;
+}
+
+.bpContainer .app p {
+ position: relative;
+ top: 50px;
+ margin: 0;
+ color: #555869;
+ text-align: center;
+ font-size: 15px;
+}
+
+
+ .coordinates {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+}
+
+.bpContainer .box .piProgress .circle>.badge, .bpContainer .line .piProgress .circle>.badge {
+ position:absolute;
+ display:inline-block;
+ z-index:1;
+ top:-8px;
+ left:20px;
+ min-width:20px;
+ border-radius:10px;
+ padding:3px!important;
+ vertical-align:baseline;
+ white-space:nowrap;
+ text-align:center;
+ background-color:#2f3334;
+ text-decoration:none;
+ font-size:14px;
+ color:#fff;
+ line-height:15px;
+ font-style:normal;
+ font-weight:400;
+ opacity:1
+}
+
+.header {
+ border-top:2px solid #4b6b8b;
+ background-color:#e8edf2;
+ height:40px;
+ padding:5px 20px
+}
+
+.header .title {
+ display:inline-block;
+ font-size:18px;
+ color:#29AAEE;
+ line-height:28px
+}
+
+.containList {
+ overflow-y:scroll;
+}
+
+div.separator-icon {
+ text-align: center;
+ line-height: 0
+}
+
+.networksContainer{
+ white-space:nowrap;
+ margin:40px 0 0 20px;
+ height:100%
+}
+
+.networksContainer .network{
+ position: relative;
+ display:inline-block;
+ text-align:center;
+ min-width:70px;
+ margin:0 10px 0 0
+}
+
+.networksContainer .subnet{
+ display:inline-block;
+ text-align:center;
+ min-width:70px;
+ margin:0 10px 0 0
+}
+
+.networksContainer .subnet .line{
+ position:relative;
+ display:inline-block;
+ vertical-align:top
+}
+
+.networksContainer .name {
+ display:block;
+ width:100%;
+ background-color:#797B86;
+ color:#fff;
+ padding:2px 6px;
+ border-radius:5px;
+ text-align:center;
+ margin:0 0 10px;
+ overflow:hidden;
+ cursor: pointer;
+ text-overflow:ellipsis
+}
+
+.networksContainer .network .name>.badge {
+ position:absolute;
+ display:inline-block;
+ z-index:1;
+ top:-9px;
+ right:-9px;
+ min-width:20px;
+ border-radius:10px;
+ padding:3px!important;
+ vertical-align:baseline;
+ white-space:nowrap;
+ text-align:center;
+ background-color:#2f3334;
+ text-decoration:none;
+ font-size:14px;
+ color:#fff;
+ line-height:15px;
+ font-style:normal;
+ font-weight:400;
+ opacity:1
+}
+
+.networksContainer .subnet .line .vlan{
+ position:relative;
+ display:inline-block;
+ width:21px;
+ height:500px;
+ background-color:#149bdf;
+ color:#fff;
+ border-radius:5px;
+ vertical-align:top;
+ margin:0 10px 0 0;
+ cursor:pointer
+}
+
+.networksContainer .subnet .vlan .badge {
+ position:absolute;
+ display:inline-block;
+ z-index:1;
+ top:-8px;
+ left:10px;
+ min-width:20px;
+ border-radius:10px;
+ padding:3px!important;
+ vertical-align:baseline;
+ white-space:nowrap;
+ text-align:center;
+ background-color:#2f3334;
+ text-decoration:none;
+ font-size:14px;
+ color:#fff;
+ line-height:15px;
+ font-style:normal;
+ font-weight:400;
+ opacity:1
+}
+
+.networksContainer .subnet .line .vlan:last-child{
+ margin:0
+}
+
+.networksContainer .subnet .line .vlan>p{
+ position:absolute;
+ display:block;
+ transform:rotate(90deg);
+ -ms-transform:rotate(90deg);
+ -webkit-transform:rotate(90deg);
+ white-space:nowrap;
+ color:#fff;
+ top:5px;
+ right:0;
+ left:1px
+}
+
+.networksContainer .subnet .line .vlan>p.cidr{
+ width:200px;
+ top:auto;
+ left:-90px;
+ bottom:85px;
+ color:#fff;
+ text-align:right
+}
+
+.topoZone {
+ display: inline-block;
+ float: left;
+}
\ 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 index 00000000..38ae6202 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/css/virtualApplication.css @@ -0,0 +1,502 @@ +/**
+ * 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;
+}
+
+select {
+ border-width: 1px;
+ padding: 2px 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_virtualApplication_table_div {
+ margin-top: 15px;
+}
+
+#ict_virtualApplication_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_virtualApplication_table_div table {
+ width: 100% !important;
+}
+
+.uploadBtn {
+ margin-top:10px;
+}
+
+.btn-operation {
+ min-width: 30px;
+ line-height: 1;
+}
+
+tr select {
+ width: 80px;
+}
+
+.span-action {
+ float:left;
+}
+
+.btn i {
+ padding-right: 0 !important;
+}
+
+.vmapp-margin {
+ margin-bottom: 20px;
+}
+
+.vmapp-form-title {
+ padding:8px;
+ margin-bottom:5px;
+ margin-left:20px;
+ border-left: 2px solid #5b9bd1;
+ color:#1A78CA;
+}
+
+.input-group .input-control {
+ height : 34px !important;
+}
+
+.input-group .input-control[disabled] {
+ cursor: default;
+ background-color: #fff;
+}
+
+.input-group .input-group-btn .btn-default {
+ color: #333;
+ font-size: 14px;
+ min-width: 34px;
+}
+
+.modal-scrollable {
+ overflow: auto !important;
+}
+
+td.icheckbox {
+ text-align: center;
+}
+
+td .icheckbox_square-aero {
+ margin-right: 0;
+}
+
+/*卡片面板样式*/
+.hpanel {
+ background-color: none;
+ border: none;
+ box-shadow: none;
+ margin-bottom: 5px;
+}
+
+.hpanel .panel-body {
+ border: 1px solid #e4e5e7;
+ border-radius: 2px;
+ position: relative;
+}
+
+.hpanel > .panel-footer {
+ color: inherit;
+ border: 1px solid #e4e5e7;
+ border-top: none;
+ font-size: 90%;
+ background: #f7f9fa;
+ height:40px;
+ padding: 5px 10px;
+}
+
+.hpanel > .panel-footer .pull-right a{
+ margin-left: 5px;
+}
+
+.hpanel > .panel-footer .pull-right .btn{
+ min-width: 30px !important;
+}
+
+.hpanel_show {
+ background-color: #f7f9fa;
+}
+
+.hpanel .panel-info {
+ overflow:hidden;
+ white-space:nowrap;
+ text-overflow:ellipsis;
+}
+
+.tipArea {
+ border-bottom: 1px solid #d4d4d4;
+ width: 95%;
+ margin-bottom: 15px;
+ margin-left: 15px;
+ padding-bottom: 5px;
+}
\ 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 index 00000000..a3848f67 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/css/vnfm.css @@ -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 index 00000000..33c6154d --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/i18n/nfv-nso-iui-i18n-en-US.properties @@ -0,0 +1,358 @@ +#
+# 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
+nfv-nso-iui-table-sLengthMenu=View _MENU_ records
+nfv-nso-iui-table-sZeroRecords=No matching records found
+nfv-nso-iui-table-sInfo=Found total _TOTAL_ records
+nfv-nso-iui-table-sInfoEmpty=No records found to show
+nfv-nso-iui-table-sGroupActions=_TOTAL_ records selected:
+nfv-nso-iui-table-sAjaxRequestGeneralError=Could not complete request. Please check your internet connection.
+nfv-nso-iui-table-sEmptyTable=No data available in table
+nfv-nso-iui-table-sPrevious=Prev
+nfv-nso-iui-table-sNext=Next
+nfv-nso-iui-table-sPage=Page
+nfv-nso-iui-table-sPageOf=of
+nfv-nso-iui-table-sProcess=Processing...
+
+//common
+nfv-nso-iui-common-tip=Tip:
+
+//package table colums
+nfv-package-iui-title=Package
+nfv-package-iui-field-sn=Index
+nfv-package-iui-field-name=Name
+nfv-package-iui-field-type=Type
+nfv-package-iui-field-usagestate=Usage State
+nfv-package-iui-field-processstate=Process State
+nfv-package-iui-field-operationalstate=Operational State
+nfv-package-iui-field-onboardstate=OnBoard State
+nfv-package-iui-field-deletionpending=Deletion Pending
+nfv-package-iui-field-operation=Operation
+
+nfv-package-iui-field-detail-name=Name
+nfv-package-iui-field-detail-type=Type
+nfv-package-iui-field-detail-usagestate=Usage State
+nfv-package-iui-field-detail-processstate=Process State
+nfv-package-iui-field-detail-operationalstate=Operational State
+nfv-package-iui-field-detail-onboardstate=Onboard State
+nfv-package-iui-field-detail-deletionpending=Deletion Pending
+nfv-package-iui-field-detail-operation=Operation
+nfv-package-iui-field-detail-size=Size
+nfv-package-iui-field-detail-csarid=ID
+nfv-package-iui-field-detail-version=Version
+nfv-package-iui-field-detail-provider=Provider
+nfv-package-iui-field-detail-downloaduri=Download Uri
+nfv-package-iui-field-detail-createtime=Create Time
+nfv-package-iui-field-detail-modifytime=Modify Time
+nfv-package-iui-field-detail-format=Format
+
+nfv-package-iui-status-tip=Taps to Activate
+nfv-package-iui-status-active=Activate
+nfv-package-iui-status-activating=Activating
+nfv-package-iui-status-inactive=Nonactivate
+nfv-package-iui-status-deleting =Deleting
+nfv-package-iui-status-deletefail = Delete Fail
+nfv-package-iui-status-onBoarding = Onboarding
+
+nfv-package-iui_packageview_packageDetail=Package Detail
+nfv-package-iui_packageview_btn_close=Close
+nfv-package-iui_packageview_key=Key
+nfv-package-iui_packageview_value=Value
+nfv-package-iui-selectvim-title=Select VIM Onboard Image
+nfv-package-iui-btn-cancel=Cancel
+nfv-package-iui-btn-ok=Ok
+
+nfv-package-iui-message-upload-success=Csar package imported successfully.
+nfv-package-iui-message-upload-fail=Csar package imported failed.
+nfv-package-iui-message-delete-confirm=Do you want to delete the current package?
+nfv-package-iui-message-delete-success=Csar package deleted successfully.
+nfv-package-iui-message-upload-csar-exist=The package already exists, whether to re upload?
+nfv-package-iui-message-upload-csar-deletionpending=This package is referenced in an instance. whether to re upload?
+nfv-package-iui-message-onBoarded = Already onBoarded, no need for onBoarding.
+nfv-package-iui-message-onBoard-error = Onboarding error.
+nfv-package-iui-message-select-vim-error = Can not select more than one VIM to be test environment.
+nfv-package-iui-onboard-dialog-vimname = VIM Name
+nfv-package-iui-product-env = Product Environment
+nfv-package-iui-test-env = Test Environment
+
+nfv-package-iui-drop-zone-title=Drag & drop files here …
+nfv-package-iui-drop-zone-selectBtn=Browse
+nfv-package-iui-drop-zone-removeBtn=Remove
+nfv-package-iui-drop-zone-uploadBtn=Upload
+
+//template table colums
+nfv-template-iui-title=Service Template
+nfv-template-iui-field-order=Order
+nfv-template-iui-field-templatename=Name
+nfv-template-iui-field-producttype=Type
+nfv-template-iui-field-vendor=Vendor
+nfv-template-iui-field-version=Version
+nfv-template-iui-field-inputs=Inputs
+nfv-template-iui-field-outputs=Outputs
+nfv-template-iui-field-operations=Operations
+nfv-template-iui-field-download-uri=Download Uri
+nfv-template-iui-field-type=Node Type
+
+//template detail table colums
+nfv-templateDetail-iui-index=Index
+nfv-templateDetail-iui-title=Node Template
+nfv-templateDetail-iui-field-nodeId=ID
+nfv-templateDetail-iui-field-nodetypename=Name
+nfv-templateDetail-iui-field-type=Type
+nfv-templateDetail-iui-field-containedin=Contained In
+nfv-templateDetail-iui-field-deployedon=Deployed On
+nfv-templateDetail-iui-field-connectedto=Conected To
+nfv-templateDetail-iui-field-virtuallinksto=Virtual Links To
+
+nfv-templateDetail-nodesTab-iui-tab-general=General
+nfv-templateDetail-nodesTab-iui-tab-properties=Properties
+nfv-templateDetail-nodesTab-iui-tab-relationShips=RelationShips
+nfv-templateDetail-nodesTab-iui-field-key=Key
+nfv-templateDetail-nodesTab-iui-field-value=Value
+nfv-templateDetail-nodesTab-iui-field-property=Property
+nfv-templateDetail-nodesTab-iui-field-sourceNodeName=Source Node
+nfv-templateDetail-nodesTab-iui-field-targetNodeName=Target Node
+nfv-templateDetail-nodesTab-iui-field-type=Type
+nfv-templateDetail-nodesTab-iui-btn-close=Close
+nfv-templateDetail-nodesTab-iui-title-nodeDetail=Node Detail
+
+nfv-templateDetail-executionTab-iui-field-currentStepName=Name
+nfv-templateDetail-executionTab-iui-field-currentStepStatus=Status
+nfv-templateDetail-executionTab-iui-field-currentStepDesc=Description
+nfv-templateDetail-executionTab-iui-field-executionTime=Execution Time
+
+//topo
+nfv-topology-iui-vnf-tip=Click to view the nested topology
+nfv-topology-iui-btn-return-tip=Return
+nfv-topology-iui-message-error=Query Topology Information failed.
+
+//virtual application table colums
+nfv-virtualApplication-iui-title=Lifecycle
+nfv-virtualApplication-iui-field-name=Name
+nfv-virtualApplication-iui-field-template=Template
+nfv-virtualApplication-iui-field-createDate=Create Time
+nfv-virtualApplication-iui-field-status=Status
+nfv-virtualApplication-iui-field-updateDate=Update Time
+nfv-virtualApplication-iui-field-action=Action
+nfv-virtualApplication-iui-field-operation=Operation
+
+nfv-virtualApplication-iui-scale-field-type=Type
+nfv-virtualApplication-iui-scale-field-num=Number
+nfv-virtualApplication-iui-scale-field-name=Name
+nfv-virtualApplication-iui-scale-field-operation=Operation
+
+nfv-virtualApplication-iui-operation-init=init
+nfv-virtualApplication-iui-operation-conf=configure
+nfv-virtualApplication-iui-operation-start=start
+nfv-virtualApplication-iui-operation-stop=stop
+nfv-virtualApplication-iui-operation-scaleIn=scale-in
+nfv-virtualApplication-iui-operation-scaleOut=scale-out
+nfv-virtualApplication-iui-operation-delete=delete
+
+nfv-virtualApplication-iui-status-normal=Deployed
+nfv-virtualApplication-iui-status-finish=Finish
+nfv-virtualApplication-iui-status-failed=Failed
+
+nfv-virtualApplication-iui-status-processing=Deploying
+nfv-virtualApplication-iui-status-init=Deploying
+nfv-virtualApplication-iui-status-conf=Configuring
+nfv-virtualApplication-iui-status-start=Starting
+nfv-virtualApplication-iui-status-stop=Stoping
+nfv-virtualApplication-iui-status-scaleIn=Scaling in
+nfv-virtualApplication-iui-status-scaleOut=Scaling out
+nfv-virtualApplication-iui-status-execute=Executing
+nfv-virtualApplication-iui-status-delete=Deleting
+
+nfv-virtualApplication-iui-text-title=Create Application
+nfv-virtualApplication-iui-text-createVm=Create
+nfv-virtualApplication-iui-text-name=Name
+nfv-virtualApplication-iui-text-description=Description
+nfv-virtualApplication-iui-text-template=Template
+nfv-virtualApplication-iui-text-templateDes=Template Description
+nfv-virtualApplication-iui-text-vnfm=VNFM
+nfv-virtualApplication-iui-text-tab-basic=Basic Info
+nfv-virtualApplication-iui-text-tab-flavor=Flavor Parameters
+nfv-virtualApplication-iui-text-tab-operationParam=Operation Parameters
+
+nfv-virtualApplication-iui-text-flavor=Flavor
+nfv-virtualApplication-iui-text-flavorDesc=Flavor Description
+nfv-virtualApplication-iui-text-flavor-numberOfInstances=NumberOfInstances
+nfv-virtualApplication-iui-text-flavor-refNodeFlavor=RefNodeFlavor
+nfv-virtualApplication-iui-text-flavor-affinity=Affinity
+nfv-virtualApplication-iui-text-flavor-redundancyModel=RedundancyModel
+nfv-virtualApplication-iui-text-flavor-capability=Capability
+nfv-virtualApplication-iui-text-input-planTitle=Plan
+
+nfv-virtualApplication-iui-text-scale-name=VNF Name
+nfv-virtualApplication-iui-text-scale-oeprationType=Operation Type
+nfv-virtualApplication-iui-text-scale-oeprationType-type=Type
+nfv-virtualApplication-iui-text-scale-oeprationType-instance=Instance
+nfv-virtualApplication-iui-text-scale-vduBtn-title=Add VDU
+nfv-virtualApplication-iui-text-scale-vnf-title=VNF List
+nfv-virtualApplication-iui-text-scale-vnf-name=VNF
+nfv-virtualApplication-iui-text-scale-vnf-vduType=VDU Type
+nfv-virtualApplication-iui-text-scale-vnf-num=Number
+nfv-virtualApplication-iui-text-scale-vnf-vduInstance=VDU Instance
+nfv-virtualApplication-iui-text-scale-vnf-numTip=Number
+nfv-virtualApplication-iui-text-scale-vnf-nameTip=Name
+nfv-virtualApplication-iui-text-scale-type-title=VDU Type
+nfv-virtualApplication-iui-text-scale-instance-title=VDU Instance
+nfv-virtualApplication-iui-text-scale-instance-cancelBtn=Cancel
+nfv-virtualApplication-iui-text-scale-instance-confirmBtn=Confirm
+nfv-virtualApplication-iui-text-scale-validate-message=The VNF is already selected
+nfv-virtualApplication-iui-text-scale-out-modal-title=ScaleOut Parameters
+nfv-virtualApplication-iui-text-scale-in-modal-title=ScaleIn Parameters
+
+nfv-virtualApplication-iui-text-createBtn=Create
+nfv-virtualApplication-iui-text-cancelBtn=Cancel
+nfv-virtualApplication-iui-text-confirmBtn=Confirm
+nfv-virtualApplication-iui-text-previousBtn=Previous
+nfv-virtualApplication-iui-text-nextBtn=Next
+nfv-virtualApplication-iui-text-params=Parameters
+
+nfv-virtualApplication-iui-message-delete-confirm=Do you want to delete the current application?
+nfv-virtualApplication-iui-message-delete-success=Application deleted successfully.
+nfv-virtualApplication-iui-message-delete-fail = Application deleted failed.
+nfv-virtualApplication-iui-message-create-success=Application created successfully.
+nfv-virtualApplication-iui-message-create-fail=Application created failed.
+
+nfv-virtualApplication-iui-validate-instanceName=Please enter a name
+nfv-virtualApplication-iui-validate-serviceTemplateName=Please select a service tempalte
+nfv-virtualApplication-iui-validate-flavor=Please select a flavor
+nfv-virtualApplication-iui-validate-vimId=Please select a VIM
+nfv-virtualApplication-iui-validate-vnfmId=Please select a VNFM
+nfv-virtualApplication-iui-validate-inputParam=This field is required
+nfv-virtualApplication-iui-validate-noinputParam=Don't need to input parameters
+nfv-virtualApplication-iui-validate-digits=Please enter only digits
+nfv-virtualApplication-iui-validate-range=Please enter a value between {0} and {1}
+
+//virtual application detail table colums
+nfv-virtualApplicationDetail-iui-field-nodeId=ID
+nfv-virtualApplicationDetail-iui-field-nodeName=Name
+nfv-virtualApplicationDetail-iui-field-nodeType=Node Type
+nfv-virtualApplicationDetail-iui-field-templateType=Template Type
+nfv-virtualApplicationDetail-iui-field-host=IP
+nfv-virtualApplicationDetail-iui-field-createTime=Create Time
+
+nfv-virtualApplicationDetail-iui-field-currentStepName=Name
+nfv-virtualApplicationDetail-iui-field-currentStepStatus=Status
+nfv-virtualApplicationDetail-iui-field-percent=Progress
+nfv-virtualApplicationDetail-iui-field-currentStepDesc=Description
+nfv-virtualApplicationDetail-iui-field-executionTime=Execution Time
+
+nfv-virtualApplicationDetail-iui-text-events=Events
+nfv-virtualApplicationDetail-iui-text-nodeDetail=Node Detail
+nfv-virtualApplicationDetail-iui-btn-close=Close
+
+//host image table colums
+nfv-host-iui-title=Image
+nfv-host-iui-field-name=Name
+nfv-host-iui-field-size=Size
+nfv-host-iui-field-vimUser=Tenant
+nfv-host-iui-field-createTime=Create Time
+nfv-host-iui-field-status=Status
+nfv-host-iui-field-progress=Progress
+nfv-host-iui-field-operation=Operation
+
+nfv-host-iui-operation-delete=Delete
+
+nfv-host-iui-text-title=Upload Image
+nfv-host-iui-text-uploadImage=Upload
+nfv-host-iui-text-local=Local
+nfv-host-iui-text-url=Url
+nfv-host-iui-text-image=Image File
+nfv-host-iui-text-imageurl=Image Url
+nfv-host-iui-text-name=Image Name
+nfv-host-iui-text-tenant=Tenant
+nfv-host-iui-btn-upload=Upload
+nfv-host-iui-btn-cancel=Cancel
+
+nfv-host-iui-validate-file=Please select a host file
+nfv-host-iui-validate-hosturl-required=Please enter a url
+nfv-host-iui-validate-hosturl-url=Please enter the right url
+nfv-host-iui-validate-hostName=Please enter a host name
+nfv-host-iui-validate-vim=Please select a vim
+
+nfv-host-iui-message-upload-success=Image upload successfully.
+nfv-host-iui-message-upload-failed=Image upload fails.
+nfv-host-iui-message-delete-confirm=Do you want to delete the current image?
+nfv-host-iui-message-delete-success=Image deleted successfully.
+nfv-host-iui-message-delete-failed=Image deleted fails.
+
+nfv-host-iui-progress-uploading=uploading
+nfv-host-iui-progress-success=upload success
+nfv-host-iui-progress-fail=upload failed
+
+//software image table colums
+nfv-software-iui-title=Software Image
+nfv-software-iui-field-name=Name
+nfv-software-iui-field-size=Size
+nfv-software-iui-field-type=Type
+nfv-software-iui-field-version=Version
+nfv-software-iui-field-location=Location
+nfv-software-iui-field-createTime=Create Time
+nfv-software-iui-field-operation=Operation
+
+nfv-software-iui-action-delete=Delete
+nfv-software-iui-action-onboard=Onboard
+
+nfv-software-iui-text-title=Upload Image
+nfv-software-iui-text-uploadImage=Upload
+nfv-software-iui-text-image=Image File
+nfv-software-iui-text-image-select=Browse
+nfv-software-iui-text-image-remove=Remove
+nfv-software-iui-text-type=Type
+nfv-software-iui-text-version=Version
+nfv-software-iui-btn-upload=Upload
+nfv-software-iui-btn-cancel=Cancel
+
+nfv-software-iui-message-delete-confirm=Do you want to delete the current image?
+nfv-software-iui-message-delete-success=Image deleted successfully.
+
+//vnfm
+nfv-vnfm-iui-title=VNFM Manage
+nfv-vnfm-iui-message-title=vnfm info
+nfv-vnfm-iui-message-query-fail=Query vnfm failed.
+nfv-vnfm-iui-message-save-success=Save successfully.
+nfv-vnfm-iui-message-save-fail=Save failed.
+nfv-vnfm-iui-message-update-success=Update successfully.
+nfv-vnfm-iui-message-update-fail=Update failed.
+nfv-vnfm-iui-message-delete-confirm=Do you want to delete the current vnfm?
+nfv-vnfm-iui-message-delete-success=Vnfm deleted successfully.
+nfv-vnfm-iui-message-delete-fail=Vnfm deleted failed.
+
+nfv-vnfm-iui-test-update=Modify vnfm info
+nfv-vnfm-iui-text-register=Register vnfm info
+nfv-vnfm-iui-text-name=Name
+nfv-vnfm-iui-text-moc=Type
+nfv-vnfm-iui-text-vendor=Vendor
+nfv-vnfm-iui-text-userName=Username
+nfv-vnfm-iui-text-password=Password
+nfv-vnfm-iui-text-cancelBtn=cancel
+nfv-vnfm-iui-text-saveBtn=save
+nfv-vnfm-iui-text-registerBtn=Register
+nfv-vnfm-iui-text-status-normal=Normal
+nfv-vnfm-iui-text-status-fail=Alarm
+nfv-vnfm-iui-text-total=Total
+nfv-vnfm-iui-text-total-vnfm= of vnfm
+
+nfv-vnfm-iui-validate-name=Please enter a name
+nfv-vnfm-iui-validate-moc=Please enter the vnfm type
+nfv-vnfm-iui-validate-vim=Please select a VIM
+nfv-vnfm-iui-validate-url-required=Please enter the URL
+nfv-vnfm-iui-validate-url=Please enter the right URL
+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 index 00000000..f3c45845 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/i18n/nfv-nso-iui-i18n-zh-CN.properties @@ -0,0 +1,360 @@ +#
+# 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.
+#
+
+//表格相关
+nfv-nso-iui-table-sLengthMenu=每页 _MENU_ 条结果
+nfv-nso-iui-table-sZeroRecords=没有匹配结果
+nfv-nso-iui-table-sInfo=总共找到 _TOTAL_ 条结果
+nfv-nso-iui-table-sInfoEmpty=共 0 项
+nfv-nso-iui-table-sGroupActions=_TOTAL_ 条结果被选择:
+nfv-nso-iui-table-sAjaxRequestGeneralError=不能完成请求，请检查您的网络连接情况。
+nfv-nso-iui-table-sEmptyTable=表中数据为空
+nfv-nso-iui-table-sPrevious=前页
+nfv-nso-iui-table-sNext=下页
+nfv-nso-iui-table-sPage=第
+nfv-nso-iui-table-sPageOf=页，总页数：
+nfv-nso-iui-table-sProcess=处理中...
+
+//common
+nfv-nso-iui-common-tip=提示：
+
+//包管理表格字段名称定义
+nfv-package-iui-title=包管理
+nfv-package-iui-field-sn=序号
+nfv-package-iui-field-name=名称
+nfv-package-iui-field-type=类型
+nfv-package-iui-field-usagestate=使用状态
+nfv-package-iui-field-processstate=中间状态
+nfv-package-iui-field-operationalstate=操作状态
+nfv-package-iui-field-onboardstate=上载状态
+nfv-package-iui-field-deletionpending=待删除
+nfv-package-iui-field-operation=操作
+
+//包详细信息字段
+nfv-package-iui-field-detail-name=名称
+nfv-package-iui-field-detail-type=类型
+nfv-package-iui-field-detail-usagestate=使用状态
+nfv-package-iui-field-detail-processstate=中间状态
+nfv-package-iui-field-detail-operationalstate=操作状态
+nfv-package-iui-field-detail-onboardstate=上载状态
+nfv-package-iui-field-detail-deletionpending=待删除状态
+nfv-package-iui-field-detail-operation=操作
+nfv-package-iui-field-detail-size=大小
+nfv-package-iui-field-detail-csarid=ID
+nfv-package-iui-field-detail-version=版本
+nfv-package-iui-field-detail-provider=提供商
+nfv-package-iui-field-detail-downloaduri=下载Uri
+nfv-package-iui-field-detail-createtime=创建时间
+nfv-package-iui-field-detail-modifytime=更改时间
+nfv-package-iui-field-detail-format=格式
+
+nfv-package-iui-status-tip=点击激活
+nfv-package-iui-status-active=激活
+nfv-package-iui-status-activating=激活中
+nfv-package-iui-status-inactive=未激活
+nfv-package-iui-status-deleting=删除中
+nfv-package-iui-status-deletefail=删除失败
+nfv-package-iui-status-onBoarding=正在上载
+
+nfv-package-iui_packageview_packageDetail=包详情
+nfv-package-iui_packageview_btn_close=关闭
+nfv-package-iui_packageview_key=关键字
+nfv-package-iui_packageview_value=值
+nfv-package-iui-selectvim-title=选择VIM上载镜像
+nfv-package-iui-btn-cancel=取消
+nfv-package-iui-btn-ok=确认
+
+nfv-package-iui-message-upload-success=包导入成功。
+nfv-package-iui-message-upload-fail=包导入失败。
+nfv-package-iui-message-delete-confirm=确定要删除当前包？
+nfv-package-iui-message-delete-success=包删除成功。
+nfv-package-iui-message-upload-csar-exist=包已经存在，是否重新上传？
+nfv-package-iui-message-upload-csar-deletionpending=实例中引用了此包，是否重新上传？
+nfv-package-iui-message-onBoarded = 已经上载，无需再次上载。
+nfv-package-iui-message-onBoard-error = 上载失败。
+nfv-package-iui-message-select-vim-error = 最多只能选择一个VIM做为测试环境
+nfv-package-iui-onboard-dialog-vimname = VIM名称
+nfv-package-iui-product-env = 生产环境
+nfv-package-iui-test-env = 测试环境
+
+
+nfv-package-iui-drop-zone-title=拖拽文件到这里 …
+nfv-package-iui-drop-zone-selectBtn=选择
+nfv-package-iui-drop-zone-removeBtn=移除
+nfv-package-iui-drop-zone-uploadBtn=上传
+
+//模板管理表格字段名称定义
+nfv-template-iui-title=模板管理
+nfv-template-iui-field-order=序号
+nfv-template-iui-field-templatename=名称
+nfv-template-iui-field-producttype=类型
+nfv-template-iui-field-vendor=厂商
+nfv-template-iui-field-version=版本
+nfv-template-iui-field-inputs=输入
+nfv-template-iui-field-outputs=输出
+nfv-template-iui-field-operations=操作
+nfv-template-iui-field-download-uri=下载Uri
+nfv-template-iui-field-type=节点类型
+
+//模板明细表格字段名称定义
+nfv-templateDetail-iui-index=序号
+nfv-templateDetail-iui-title=节点模板
+nfv-templateDetail-iui-field-nodeId=ID
+nfv-templateDetail-iui-field-nodetypename=名称
+nfv-templateDetail-iui-field-type=类型
+nfv-templateDetail-iui-field-containedin=归属
+nfv-templateDetail-iui-field-deployedon=部署
+nfv-templateDetail-iui-field-connectedto=业务连接
+nfv-templateDetail-iui-field-virtuallinksto=网络连接
+
+nfv-templateDetail-nodesTab-iui-tab-general=概况
+nfv-templateDetail-nodesTab-iui-tab-properties=属性
+nfv-templateDetail-nodesTab-iui-tab-relationShips=关系
+nfv-templateDetail-nodesTab-iui-field-key=关键字
+nfv-templateDetail-nodesTab-iui-field-value=值
+nfv-templateDetail-nodesTab-iui-field-property=属性
+nfv-templateDetail-nodesTab-iui-field-sourceNodeName=源节点
+nfv-templateDetail-nodesTab-iui-field-targetNodeName=目标节点
+nfv-templateDetail-nodesTab-iui-field-type=类型
+nfv-templateDetail-nodesTab-iui-btn-close=关闭
+nfv-templateDetail-nodesTab-iui-title-nodeDetail=节点详情
+
+nfv-templateDetail-executionTab-iui-field-currentStepName=名称
+nfv-templateDetail-executionTab-iui-field-currentStepStatus=状态
+nfv-templateDetail-executionTab-iui-field-currentStepDesc=描述
+nfv-templateDetail-executionTab-iui-field-executionTime=执行时间
+
+//topo
+nfv-topology-iui-vnf-tip=点击查看嵌套拓扑图
+nfv-topology-iui-btn-return-tip=返回
+nfv-topology-iui-message-error=查询拓扑图模板信息失败
+
+//虚拟应用表格字段名称定义
+nfv-virtualApplication-iui-title=生命周期管理
+nfv-virtualApplication-iui-field-name=名称
+nfv-virtualApplication-iui-field-template=模板
+nfv-virtualApplication-iui-field-createDate=创建时间
+nfv-virtualApplication-iui-field-status=状态
+nfv-virtualApplication-iui-field-updateDate=更新时间
+nfv-virtualApplication-iui-field-action=动作
+nfv-virtualApplication-iui-field-operation=操作
+
+nfv-virtualApplication-iui-scale-field-type=类型
+nfv-virtualApplication-iui-scale-field-num=数量
+nfv-virtualApplication-iui-scale-field-name=名称
+nfv-virtualApplication-iui-scale-field-operation=操作
+
+nfv-virtualApplication-iui-operation-init=部署
+nfv-virtualApplication-iui-operation-conf=配置
+nfv-virtualApplication-iui-operation-start=启动
+nfv-virtualApplication-iui-operation-stop=停止
+nfv-virtualApplication-iui-operation-scaleIn=缩容
+nfv-virtualApplication-iui-operation-scaleOut=扩容
+nfv-virtualApplication-iui-operation-delete=删除
+
+nfv-virtualApplication-iui-status-normal=已部署
+nfv-virtualApplication-iui-status-finish=执行完成
+nfv-virtualApplication-iui-status-failed=执行失败
+
+nfv-virtualApplication-iui-status-processing=部署中
+nfv-virtualApplication-iui-status-execute=执行中
+nfv-virtualApplication-iui-status-init=部署中
+nfv-virtualApplication-iui-status-conf=配置执行中
+nfv-virtualApplication-iui-status-start=启动执行中
+nfv-virtualApplication-iui-status-stop=停止执行中
+nfv-virtualApplication-iui-status-scaleIn=缩容执行中
+nfv-virtualApplication-iui-status-scaleOut=扩容执行中
+nfv-virtualApplication-iui-status-delete=删除执行中
+
+nfv-virtualApplication-iui-text-title=创建应用
+nfv-virtualApplication-iui-text-createVm=创建应用
+nfv-virtualApplication-iui-text-name=名称
+nfv-virtualApplication-iui-text-description=描述
+nfv-virtualApplication-iui-text-template=模板
+nfv-virtualApplication-iui-text-templateDes=模板描述
+nfv-virtualApplication-iui-text-vnfm=VNFM
+nfv-virtualApplication-iui-text-tab-basic=基本信息
+nfv-virtualApplication-iui-text-tab-flavor=规格参数
+nfv-virtualApplication-iui-text-tab-operationParam=输入参数
+
+nfv-virtualApplication-iui-text-flavor=规格
+nfv-virtualApplication-iui-text-flavorDesc=规格描述
+nfv-virtualApplication-iui-text-flavor-numberOfInstances=实例数
+nfv-virtualApplication-iui-text-flavor-refNodeFlavor=引用规格
+nfv-virtualApplication-iui-text-flavor-affinity=亲和力
+nfv-virtualApplication-iui-text-flavor-redundancyModel=容灾模式
+nfv-virtualApplication-iui-text-flavor-capability=能力
+nfv-virtualApplication-iui-text-input-planTitle=Plan
+
+nfv-virtualApplication-iui-text-scale-name=VNF名称
+nfv-virtualApplication-iui-text-scale-oeprationType=操作类型
+nfv-virtualApplication-iui-text-scale-oeprationType-type=类型
+nfv-virtualApplication-iui-text-scale-oeprationType-instance=实例
+nfv-virtualApplication-iui-text-scale-vduBtn-title=添加VDU
+nfv-virtualApplication-iui-text-scale-vnf-title=已选择的VNF
+nfv-virtualApplication-iui-text-scale-vnf-name=VNF
+nfv-virtualApplication-iui-text-scale-vnf-vduType=VDU类型
+nfv-virtualApplication-iui-text-scale-vnf-num=数量
+nfv-virtualApplication-iui-text-scale-vnf-vduInstance=VDU实例
+nfv-virtualApplication-iui-text-scale-vnf-numTip=实例数
+nfv-virtualApplication-iui-text-scale-vnf-nameTip=名称
+nfv-virtualApplication-iui-text-scale-type-title=VDU类型
+nfv-virtualApplication-iui-text-scale-instance-title=VDU实例
+nfv-virtualApplication-iui-text-scale-instance-cancelBtn=取消
+nfv-virtualApplication-iui-text-scale-instance-confirmBtn=确定
+nfv-virtualApplication-iui-text-scale-validate-message=该VNF已选择
+nfv-virtualApplication-iui-text-scale-out-modal-title=扩容参数
+nfv-virtualApplication-iui-text-scale-in-modal-title=缩容参数
+
+nfv-virtualApplication-iui-text-createBtn=创建
+nfv-virtualApplication-iui-text-cancelBtn=取消
+nfv-virtualApplication-iui-text-previousBtn=上一步
+nfv-virtualApplication-iui-text-nextBtn=下一步
+nfv-virtualApplication-iui-text-confirmBtn=确定
+nfv-virtualApplication-iui-text-params=参数
+
+nfv-virtualApplication-iui-message-delete-confirm=确定要删除当前应用？
+nfv-virtualApplication-iui-message-delete-success=应用删除成功。
+nfv-virtualApplication-iui-message-delete-fail=应用删除失败。
+nfv-virtualApplication-iui-message-create-success=应用创建成功。
+nfv-virtualApplication-iui-message-create-fail=应用创建失败。
+
+nfv-virtualApplication-iui-validate-instanceName=请输入名称
+nfv-virtualApplication-iui-validate-serviceTemplateName=请选择服务模板
+nfv-virtualApplication-iui-validate-flavor=请选择规格
+nfv-virtualApplication-iui-validate-vimId=请选择VIM
+nfv-virtualApplication-iui-validate-vnfmId=请选择VNFM
+nfv-virtualApplication-iui-validate-inputParam=请输入参数
+nfv-virtualApplication-iui-validate-noinputParam=无需输入参数
+nfv-virtualApplication-iui-validate-digits=只能输入整数
+nfv-virtualApplication-iui-validate-range=请输入在 {0} 和 {1} 之间的值
+
+//节点明细表格字段名称定义
+nfv-virtualApplicationDetail-iui-field-nodeId=ID
+nfv-virtualApplicationDetail-iui-field-nodeName=名称
+nfv-virtualApplicationDetail-iui-field-nodeType=节点类型
+nfv-virtualApplicationDetail-iui-field-templateType=模板类型
+nfv-virtualApplicationDetail-iui-field-host=IP
+nfv-virtualApplicationDetail-iui-field-createTime=创建时间
+
+nfv-virtualApplicationDetail-iui-field-currentStepName=名称
+nfv-virtualApplicationDetail-iui-field-currentStepStatus=状态
+nfv-virtualApplicationDetail-iui-field-percent=当前进度
+nfv-virtualApplicationDetail-iui-field-currentStepDesc=描述
+nfv-virtualApplicationDetail-iui-field-executionTime=执行时间
+
+nfv-virtualApplicationDetail-iui-text-events=事件
+nfv-virtualApplicationDetail-iui-text-nodeDetail=节点详情
+nfv-virtualApplicationDetail-iui-btn-close=关闭
+
+//主机镜像表格字段名称定义
+nfv-host-iui-title=主机镜像
+nfv-host-iui-field-name=名称
+nfv-host-iui-field-size=大小
+nfv-host-iui-field-vimUser=租户
+nfv-host-iui-field-createTime=创建时间
+nfv-host-iui-field-status=状态
+nfv-host-iui-field-progress=进度
+nfv-host-iui-field-operation=操作
+
+nfv-host-iui-operation-delete=删除
+
+nfv-host-iui-text-title=上传镜像
+nfv-host-iui-text-uploadImage=上传镜像
+nfv-host-iui-text-local=本地上传
+nfv-host-iui-text-url=URL上传
+nfv-host-iui-text-image=镜像文件
+nfv-host-iui-text-imageurl=镜像URL
+nfv-host-iui-text-name=镜像名称
+nfv-host-iui-text-tenant=租户
+nfv-host-iui-btn-upload=上传
+nfv-host-iui-btn-cancel=取消
+
+nfv-host-iui-validate-file=请选择镜像文件
+nfv-host-iui-validate-hosturl-required=请输入URL地址
+nfv-host-iui-validate-hosturl-url=请输入正确的URL地址
+nfv-host-iui-validate-hostName=请输入镜像名称
+nfv-host-iui-validate-vim=请选择VIM
+
+nfv-host-iui-message-upload-success=镜像上传成功。
+nfv-host-iui-message-upload-failed=镜像上传失败。
+nfv-host-iui-message-delete-confirm=确定要删除当前镜像？
+nfv-host-iui-message-delete-success=镜像删除成功。
+nfv-host-iui-message-delete-failed=镜像删除失败。
+
+nfv-host-iui-progress-uploading=上传中
+nfv-host-iui-progress-success=上传成功
+nfv-host-iui-progress-fail=上传失败
+
+//软件镜像表格字段名称定义
+nfv-software-iui-title=软件镜像
+nfv-software-iui-field-name=名称
+nfv-software-iui-field-size=大小
+nfv-software-iui-field-type=类型
+nfv-software-iui-field-version=版本
+nfv-software-iui-field-location=位置
+nfv-software-iui-field-createTime=创建时间
+nfv-software-iui-field-operation=操作
+
+nfv-software-iui-action-delete=删除
+nfv-software-iui-action-onboard=Onboard
+
+nfv-software-iui-text-title=上传镜像
+nfv-software-iui-text-uploadImage=上传镜像
+nfv-software-iui-text-image=镜像文件
+nfv-software-iui-text-image-select=选择
+nfv-software-iui-text-image-remove=移除
+nfv-software-iui-text-type=类型
+nfv-software-iui-text-version=版本
+nfv-software-iui-btn-upload=上传
+nfv-software-iui-btn-cancel=取消
+
+nfv-software-iui-message-delete-confirm=确定要删除当前镜像？
+nfv-software-iui-message-delete-success=镜像删除成功。
+
+//vnfm
+nfv-vnfm-iui-title=VNFM管理
+nfv-vnfm-iui-message-title=vnfm信息
+nfv-vnfm-iui-message-query-fail=查询vnfm失败。
+nfv-vnfm-iui-message-save-success=保存成功。
+nfv-vnfm-iui-message-save-fail=保存失败。
+nfv-vnfm-iui-message-update-success=修改成功。
+nfv-vnfm-iui-message-update-fail=修改失败。
+nfv-vnfm-iui-message-delete-confirm=确定删除所选vnfm信息？
+nfv-vnfm-iui-message-delete-success=删除成功
+nfv-vnfm-iui-message-delete-fail=删除失败
+
+nfv-vnfm-iui-test-update=修改vnfm信息
+nfv-vnfm-iui-text-register=注册vnfm信息
+nfv-vnfm-iui-text-name=名称
+nfv-vnfm-iui-text-moc=类型
+nfv-vnfm-iui-text-vendor=厂商
+nfv-vnfm-iui-text-userName=接入用户
+nfv-vnfm-iui-text-password=接入密码
+nfv-vnfm-iui-text-cancelBtn=取消
+nfv-vnfm-iui-text-saveBtn=保存
+nfv-vnfm-iui-text-registerBtn=注册vnfm
+nfv-vnfm-iui-text-status-normal=正常
+nfv-vnfm-iui-text-status-fail=报警
+nfv-vnfm-iui-text-total=共
+nfv-vnfm-iui-text-total-vnfm= vnfm
+
+nfv-vnfm-iui-validate-name=请输入名称
+nfv-vnfm-iui-validate-moc=请输入vnfm类型
+nfv-vnfm-iui-validate-vim=请选择VIM
+nfv-vnfm-iui-validate-url-required=请输入URL
+nfv-vnfm-iui-validate-url=请输入正确的URL
+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 Binary files differnew file mode 100644 index 00000000..e6281bae --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/image/details_close.png 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 Binary files differnew file mode 100644 index 00000000..5bf4389c --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/image/details_open.png 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 Binary files differnew file mode 100644 index 00000000..f7732ba8 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/image/down.png 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 Binary files differnew file mode 100644 index 00000000..cdba2dfc --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/image/pointes_blue.png 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 Binary files differnew file mode 100644 index 00000000..18ba67ed --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/image/pointes_green.png 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 Binary files differnew file mode 100644 index 00000000..a88d7975 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_asc.png 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 Binary files differnew file mode 100644 index 00000000..fb11dfe2 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_asc_disabled.png 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 Binary files differnew file mode 100644 index 00000000..18670406 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_both.png 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 Binary files differnew file mode 100644 index 00000000..def071ed --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_desc.png 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 Binary files differnew file mode 100644 index 00000000..c9fdd8a1 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/image/sort_desc_disabled.png 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 Binary files differnew file mode 100644 index 00000000..8bd53741 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/image/up.png 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 index 00000000..abc4cd63 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/js/component/commonUtil.js @@ -0,0 +1,128 @@ +/*
+ * 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.
+ */
+var commonUtil = {};
+commonUtil.arrayRemove = function( aryInstance , index ){
+ if(aryInstance == undefined || aryInstance == null){
+ return;
+ }
+ for(var i=0,n=0;i<aryInstance.length;i++) {
+ if(aryInstance[i]!=aryInstance[dx]) {
+ aryInstance[n++]=aryInstance[i];
+ }
+ }
+ aryInstance.length-=1;
+};
+
+//For the expansion of the Date, convert the Date to specify the format String
+// examples：
+// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
+// (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
+commonUtil.parseDate = function( dateObj , format){
+ var o = {
+ "M+" : dateObj.getMonth()+1, //month
+ "d+" : dateObj.getDate(), //day
+ "h+" : dateObj.getHours(), //hour
+ "m+" : dateObj.getMinutes(), //minute
+ "s+" : dateObj.getSeconds(), //second
+ "q+" : Math.floor((dateObj.getMonth()+3)/3), //quarter
+ "S" : dateObj.getMilliseconds() //millisecond
+ }
+ if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
+ (dateObj.getFullYear()+"").substr(4 - RegExp.$1.length));
+ for(var k in o)
+ if(new RegExp("("+ k +")").test(format))
+ format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] :
+ ("00"+ o[k]).substr((""+ o[k]).length));
+ return format;
+};
+
+//tooltip
+commonUtil.showMessage = function(message, type) {
+ $.growl({
+ icon: "fa fa-envelope-o fa-lg",
+ title: " " + $.i18n.prop("nfv-nso-iui-common-tip"),
+ message: message
+ },{
+ type: type
+ });
+};
+
+commonUtil.registerCometdMessage = function(url, channel, callback) {
+ var cometd = new $.Cometd();
+ var cometdURL = location.protocol + "//" + location.host + url;
+ cometd.configure({
+ url : cometdURL,
+ logLevel : "info"
+ });
+ // unregister websocket transport, use long-polling transport
+ cometd.unregisterTransport('websocket');
+ // store channel object parameters(this object include channel and callback function), start from arguments[1]
+ var _args = arguments;
+
+ cometd.addListener("/meta/handshake", function(handshake){
+ if(handshake.successful === true) {
+ cometd.batch(function() {
+ //subscribe channel
+ cometd.subscribe(channel, function(message){
+ callback.call(this, message.data);
+ });
+ });
+ }
+ });
+ cometd.handshake();
+}
+
+commonUtil.format = function() {
+ if(arguments.length == 0) {
+ return null;
+ }
+ var str = arguments[0];
+ for(var i=0; i<arguments.length; i++) {
+ var reg = new RegExp("\\{" + (i - 1) + "\\}" , "gm");
+ str = str.replace(reg, arguments[i]);
+ }
+ return str;
+}
+
+commonUtil.get = function(url, params, callback) {
+ $.ajax({
+ type : "GET",
+ url : url,
+ //contentType : contentType || "application/x-www-form-urlencoded; charset=UTF-8",
+ dataType : "json",
+ data : params || {},
+ success : callback
+ });
+}
+
+commonUtil.post = function(url, params, callback, contentType) {
+ $.ajax({
+ type : "POST",
+ url : url,
+ contentType : contentType || "application/x-www-form-urlencoded; charset=UTF-8",
+ data : params || {},
+ success : callback
+ });
+}
+
+commonUtil.delete = function(url, callback, contentType) {
+ $.ajax({
+ type : "DELETE",
+ url : url,
+ contentType : contentType || "application/x-www-form-urlencoded; charset=UTF-8",
+ success : callback
+ });
+}
\ 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 index 00000000..d49d2234 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/js/component/loadi18n_nsoc.js @@ -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 index 00000000..5a7b3901 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/js/component/serverPageTable.js @@ -0,0 +1,490 @@ +/*
+ * 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.
+ */
+var serverPageTable = {};
+/* Bootstrap style full number pagination control */
+$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
+{
+ return {
+ "iStart": oSettings._iDisplayStart,
+ "iEnd": oSettings.fnDisplayEnd(),
+ "iLength": oSettings._iDisplayLength,
+ "iTotal": oSettings.fnRecordsTotal(),
+ "iFilteredTotal": oSettings.fnRecordsDisplay(),
+ "iPage": Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
+ "iTotalPages": Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
+ };
+};
+
+$.extend( $.fn.dataTableExt.oPagination, {
+ "bootstrap_extended": {
+ "fnInit": function( oSettings, nPaging, fnDraw ) {
+ var oLang = oSettings.oLanguage.oPaginate;
+ var oPaging = oSettings.oInstance.fnPagingInfo();
+
+ var fnClickHandler = function ( e ) {
+ e.preventDefault();
+ if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
+ fnDraw( oSettings );
+ }
+ };
+
+ $(nPaging).append(
+ '<div class="pagination-panel"> ' + oLang.sPage + ' ' +
+ '<a href="#" class="btn btn-sm default prev disabled" title="' + oLang.sPrevious + '"><i class="fa fa-angle-left"></i></a>' +
+ '<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;">' +
+ '<a href="#" class="btn btn-sm default next disabled" title="' + oLang.sNext + '"><i class="fa fa-angle-right"></i></a> ' +
+ oLang.sPageOf + ' <span class="pagination-panel-total"></span>' +
+ '</div>'
+ );
+
+ var els = $('a', nPaging);
+
+ $(els[0]).bind('click.DT', { action: "previous" }, fnClickHandler );
+ $(els[1]).bind('click.DT', { action: "next" }, fnClickHandler);
+
+ $('.pagination-panel-input', nPaging).bind('change.DT', function(e) {
+ var oPaging = oSettings.oInstance.fnPagingInfo();
+ e.preventDefault();
+ var page = parseInt($(this).val());
+ if (page > 0 && page < oPaging.iTotalPages) {
+ if ( oSettings.oApi._fnPageChange(oSettings, page-1) ) {
+ fnDraw( oSettings );
+ }
+ } else {
+ $(this).val(oPaging.iPage + 1);
+ }
+ });
+
+ $('.pagination-panel-input', nPaging).bind('keypress.DT', function(e) {
+ var oPaging = oSettings.oInstance.fnPagingInfo();
+ if (e.which == 13) {
+ var page = parseInt($(this).val());
+ if (page > 0 && page < oSettings.oInstance.fnPagingInfo().iTotalPages) {
+ if ( oSettings.oApi._fnPageChange(oSettings, page-1) ) {
+ fnDraw( oSettings );
+ }
+ } else {
+ $(this).val(oPaging.iPage + 1);
+ }
+ e.preventDefault();
+ }
+ });
+ },
+
+ "fnUpdate": function ( oSettings, fnDraw ) {
+ var iListLength = 5;
+ var oPaging = oSettings.oInstance.fnPagingInfo();
+ var an = oSettings.aanFeatures.p;
+ var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);
+
+ if ( oPaging.iTotalPages < iListLength) {
+ iStart = 1;
+ iEnd = oPaging.iTotalPages;
+ }
+ else if ( oPaging.iPage <= iHalf ) {
+ iStart = 1;
+ iEnd = iListLength;
+ } else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
+ iStart = oPaging.iTotalPages - iListLength + 1;
+ iEnd = oPaging.iTotalPages;
+ } else {
+ iStart = oPaging.iPage - iHalf + 1;
+ iEnd = iStart + iListLength - 1;
+ }
+
+
+ for ( i=0, iLen=an.length ; i<iLen ; i++ ) {
+ var wrapper = $(an[i]).parents(".dataTables_wrapper");
+
+ if (oPaging.iTotalPages <= 0) {
+ $('.pagination-panel, .dataTables_length', wrapper).hide();
+ } else {
+ $('.pagination-panel, .dataTables_length', wrapper).show();
+ }
+
+ $('.pagination-panel-total', an[i]).html(oPaging.iTotalPages);
+ $('.pagination-panel-input', an[i]).val(oPaging.iPage + 1);
+
+ // Remove the middle elements
+ $('li:gt(1)', an[i]).filter(':not(.next)').remove();
+
+ // Add the new list items and their event handlers
+ for ( j=iStart ; j<=iEnd ; j++ ) {
+ sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
+ $('<li '+sClass+'><a href="#">'+j+'</a></li>')
+ .insertBefore( $('li.next:first', an[i])[0] )
+ .bind('click', function (e) {
+ e.preventDefault();
+ oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
+ fnDraw( oSettings );
+ } );
+ }
+
+ // Add / remove disabled classes from the static elements
+ if ( oPaging.iPage === 0 ) {
+ $('a.prev', an[i]).addClass('disabled');
+ } else {
+ $('a.prev', an[i]).removeClass('disabled');
+ }
+
+ if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
+ $('a.next', an[i]).addClass('disabled');
+ } else {
+ $('a.next', an[i]).removeClass('disabled');
+ }
+ }
+ }
+ }
+} );
+
+serverPageTable.getRestPara = function( cond , tableSetting ){
+ var pageNo=tableSetting._iDisplayStart/tableSetting._iDisplayLength+1;
+ var pageSize = tableSetting._iDisplayLength;
+ var queryParameter={"pageNo":pageNo,"pageSize":tableSetting._iDisplayLength,groupId:["it.group.database=02","it.group.server=01"]},
+ newData={"data":JSON.stringify(queryParameter)};
+ //put the pageinfo in cond if there is a pageinfo
+ var pageInfo = vm.logInfo[vm.logType].pageInfo;
+ if(pageInfo != null && serverPageTable.perpagenumber == pageSize){
+ cond.idEnd = pageInfo.pageStart[pageNo - 1];
+ cond.idStart = pageInfo.pageStart[pageNo];
+ if(!cond.idStart){ //the last page
+ cond.idStart = 0;
+ }
+
+ }else{
+ delete cond.idStart;
+ delete cond.idEnd;
+ vm.logInfo[vm.logType].pageInfo = null;
+ pageNo = 1;
+ tableSetting._iDisplayStart = 0;
+ }
+ var data = {
+ cond:JSON.stringify(cond),
+ perpagenumber:pageSize,
+ pageNo:pageNo,
+ needPageInfo:vm.logInfo[vm.logType].pageInfo == null
+ };
+ serverPageTable.perpagenumber = pageSize;
+ return data;
+};
+
+serverPageTable.initTableWithoutLib = function( setting ,cond , divId) {
+ //transform colomn
+ var column = setting.columns;
+ //empty table
+ $('#'+ divId).children().remove();
+ var tableId = setting.tableId;
+ var tableEleStr = '<table class="table table-striped table-bordered table-hover" id= '+ tableId + '>'
+ + '<thead>'
+ +'<tr role="row" class="heading" >'
+ + '</tr>'
+ + '</thead>'
+ +'<tbody>'
+ +'</tbody>'
+ +'</table>';
+ $('#'+ divId).append(tableEleStr);
+ //$('#'+ tableId).append(' <thead><tr role="row" class="heading" ></tr></thead><tbody></tbody>');
+ var trEle = $('#'+ tableId + ' > thead >tr');
+ //var dataTableColumn = [];
+ for ( var one in column){
+ var th = '<th>' + column[one].name + '</th>';
+ trEle.append(th);
+ }
+ var table = $("#" + tableId).dataTable({
+ //"sDom" : "tr<'row'<'col-md-6 col-sm-12'><'col-md-6 col-sm-12'pli>>", // datatable layout
+ //"sDom" : "<'row'<'col-md-12 col-sm-12'lip>r><'table-scrollable't>>",
+ //"sDom": '<"top"rt><"bottom"lip>',
+ "sDom": '<"top"rt>',
+ "oLanguage": setting.language,//language
+ //"bJQueryUI": true,
+ "bPaginate": setting.paginate,// page button
+ "bFilter": false,// search bar
+ "bAutoWidth":true,//automatically set colum width
+ "bLengthChange": true,// record number in each row
+ "iDisplayLength": 10,// row number in each page
+ "bSort": setting.sort ? true : false,// sort
+ "bInfo": setting.info,// Showing 1 to 10 of 23 entries
+ "bWidth": true,
+ "bScrollCollapse": true,
+ "sPaginationType": "bootstrap_extended", // page, a total of two kinds of style, another one is two_button
+ "bProcessing": true,
+ "bServerSide": false,
+ "bDestroy": true,
+ "bSortCellsTop": true,
+ "sAjaxSource": setting.restUrl,
+ "aoColumns": setting.columns,
+ "aoColumnDefs": [
+ {
+ sDefaultContent: '',
+ aTargets: [ '_all' ]
+ }
+ ],
+ "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
+ oSettings.jqXHR = $.ajax({
+ "type": 'get',
+ "url": sSource,
+ "dataType": "json",
+ //"data":serverPageTable.getRestPara(cond,oSettings),
+ "success": function (resp) {
+ oSettings.iDraw = oSettings.iDraw + 1;
+
+ resp = resp || [];
+ var data = {};
+ data.aaData = resp;
+ var totalCounts = resp.length;
+
+ data.iTotalRecords = totalCounts;
+ data.iTotalDisplayRecords = totalCounts;
+ data.sEcho = oSettings;
+ fnCallback(data);
+ },
+ "error": function(resp) {
+ var data = {};
+ data.aaData = [];
+ var totalCounts = 0;
+
+ data.iTotalRecords = totalCounts;
+ data.iTotalDisplayRecords = totalCounts;
+ data.sEcho = oSettings;
+ fnCallback(data);
+ }
+ });
+ }
+ });
+};
+
+serverPageTable.initDataTable = function( setting ,cond , divId) {
+ //transform colomn
+ var column = setting.columns;
+ //empty table
+ $('#'+ divId).children().remove();
+ var tableId = setting.tableId;
+ var tableEleStr = '<table class="table table-striped table-bordered table-hover" id= '+ tableId + '>'
+ + '<thead>'
+ +'<tr role="row" class="heading" >'
+ + '</tr>'
+ + '</thead>'
+ +'<tbody>'
+ +'</tbody>'
+ +'</table>';
+ $('#'+ divId).append(tableEleStr);
+ //$('#'+ tableId).append(' <thead><tr role="row" class="heading" ></tr></thead><tbody></tbody>');
+ var trEle = $('#'+ tableId + ' > thead >tr');
+ //var dataTableColumn = [];
+ for ( var one in column){
+ var th = '<th>' + column[one].name + '</th>';
+ trEle.append(th);
+ }
+ var table = $("#" + tableId).dataTable({
+ //"sDom" : "tr<'row'<'col-md-6 col-sm-12'><'col-md-6 col-sm-12'pli>>", // datatable layout
+ //"sDom" : "<'row'<'col-md-12 col-sm-12'lip>r><'table-scrollable't>>",
+ "sDom": '<"top"rt><"bottom"lip>',
+ "oLanguage": setting.language,//language
+ //"bJQueryUI": true,
+ "bPaginate": setting.paginate,// page button
+ "bFilter": false,// search bar
+ "bAutoWidth":true,//automatically set colum width
+ "bLengthChange": true,// record number in each row
+ "iDisplayLength": 10,// row number in each page
+ "bSort": setting.sort ? true : false,// sort
+ "bInfo": setting.info,// Showing 1 to 10 of 23 entries
+ "bWidth": true,
+ "bScrollCollapse": true,
+ "sPaginationType": "bootstrap_extended", // page, a total of two kinds of style, another one is two_button
+ "bProcessing": true,
+ "bServerSide": false,
+ "bDestroy": true,
+ "bSortCellsTop": true,
+ "sAjaxSource": setting.restUrl,
+ "aoColumns": setting.columns,
+ "aoColumnDefs": [
+ {
+ sDefaultContent: '',
+ aTargets: [ '_all' ]
+ }
+ ],
+ "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
+ oSettings.jqXHR = $.ajax({
+ "type": 'get',
+ "url": sSource,
+ "dataType": "json",
+ //"data":serverPageTable.getRestPara(cond,oSettings),
+ "success": function (resp) {
+ oSettings.iDraw = oSettings.iDraw + 1;
+
+ resp = resp || [];
+ var data = {};
+ data.aaData = resp;
+ var totalCounts = resp.length;
+
+ data.iTotalRecords = totalCounts;
+ data.iTotalDisplayRecords = totalCounts;
+ data.sEcho = oSettings;
+ fnCallback(data);
+ },
+ "error": function(resp) {
+ var data = {};
+ data.aaData = [];
+ var totalCounts = 0;
+
+ data.iTotalRecords = totalCounts;
+ data.iTotalDisplayRecords = totalCounts;
+ data.sEcho = oSettings;
+ fnCallback(data);
+ }
+ });
+ }
+ });
+};
+
+serverPageTable.initTableWithData = function( setting , divId , tableData) {
+ //transform colomn
+ var column = setting.columns;
+ //empty table
+ $('#'+ divId).children().remove();
+ var tableId = setting.tableId;
+ var tableEleStr = '<table class="table table-striped table-bordered table-hover" id= '+ tableId + '>'
+ + '<thead>'
+ +'<tr role="row" class="heading" >'
+ + '</tr>'
+ + '</thead>'
+ +'<tbody>'
+ +'</tbody>'
+ +'</table>';
+ $('#'+ divId).append(tableEleStr);
+ var trEle = $('#'+ tableId + ' > thead >tr');
+ for ( var one in column){
+ var th = '<th>' + column[one].name + '</th>';
+ trEle.append(th);
+ }
+ var table = $("#" + tableId).dataTable({
+ "sDom" : "<'row'<'col-md-12 col-sm-12'lip>r>>",
+ "oLanguage": setting.language,//language
+ //"bJQueryUI": true,
+ "bPaginate": setting.paginate,// page button
+ "bFilter": false,// search bar
+ "bAutoWidth":true,//automatically set the column width
+ "bLengthChange": true,// record number in each row
+ "iDisplayLength": 10,// row number in each page
+ "bSort": setting.sort ? true : false,// sort
+ "bInfo": setting.info,// Showing 1 to 10 of 23 entries
+ "bWidth": true,
+ "bScrollCollapse": true,
+ "sPaginationType": "bootstrap_extended", // page, a total of two kinds of style, another one is two_button
+ "bProcessing": false,
+ "bServerSide": false,
+ "bDestroy": true,
+ "bSortCellsTop": true,
+ "sAjaxSource": tableData,
+ "aoColumns": setting.columns,
+ "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
+ oSettings.iDraw = oSettings.iDraw + 1;
+ var resp = tableData || [];
+ var data = {};
+ data.aaData = resp;
+ var totalCounts = resp.length;
+
+ data.iTotalRecords = totalCounts;
+ data.iTotalDisplayRecords = totalCounts;
+ data.sEcho = oSettings;
+ fnCallback(data);
+ }
+ });
+};
+
+
+serverPageTable.initDataTableForEvent = function( setting ,cond , divId) {
+ //transform colomn
+ var column = setting.columns;
+ //empty table
+ $('#'+ divId).children().remove();
+ var tableId = setting.tableId;
+ var tableEleStr = '<table class="table table-striped table-bordered table-hover" id= '+ tableId + '>'
+ + '<thead>'
+ +'<tr role="row" class="heading" >'
+ + '</tr>'
+ + '</thead>'
+ +'<tbody>'
+ +'</tbody>'
+ +'</table>';
+ $('#'+ divId).append(tableEleStr);
+ var trEle = $('#'+ tableId + ' > thead >tr');
+ for ( var one in column){
+ var th = '<th>' + column[one].name + '</th>';
+ trEle.append(th);
+ }
+ var table = $("#" + tableId).dataTable({
+ "sDom": '<"top"rt><"bottom"lip>',
+ "oLanguage": setting.language,//language
+ //"bJQueryUI": true,
+ "bPaginate": setting.paginate,// page button
+ "bFilter": false,// search bar
+ "bAutoWidth":true,//automatically set the column width
+ "bLengthChange": true,// record number in each row
+ "iDisplayLength": 10,// row number in each page
+ "bSort": setting.sort ? true : false,// 排序
+ "bInfo": setting.info,// Showing 1 to 10 of 23 entries
+ "bWidth": true,
+ "bScrollCollapse": true,
+ "sPaginationType": "bootstrap_extended", // page, a total of two kinds of style, another one is two_button
+ "bProcessing": true,
+ "bServerSide": false,
+ "bDestroy": true,
+ "bSortCellsTop": true,
+ "sAjaxSource": setting.restUrl,
+ "aoColumns": setting.columns,
+ "aoColumnDefs": [
+ {
+ sDefaultContent: '',
+ aTargets: [ '_all' ]
+ }
+ ],
+ "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
+ oSettings.jqXHR = $.ajax({
+ "type": 'get',
+ "url": sSource,
+ "dataType": "json",
+ //"data":serverPageTable.getRestPara(cond,oSettings),
+ "success": function (resp) {
+ oSettings.iDraw = oSettings.iDraw + 1;
+
+ var result = [];
+ for(var i=0;i<resp.length;i++) {
+ result.push(resp[i].currentStepInfo);
+ }
+ var data = {};
+ data.aaData = result;
+ var totalCounts = result.length;
+
+ data.iTotalRecords = totalCounts;
+ data.iTotalDisplayRecords = totalCounts;
+ data.sEcho = oSettings;
+ fnCallback(data);
+ },
+ "error": function(resp) {
+ var data = {};
+ data.aaData = [];
+ var totalCounts = 0;
+
+ data.iTotalRecords = totalCounts;
+ data.iTotalDisplayRecords = totalCounts;
+ data.sEcho = oSettings;
+ fnCallback(data);
+ }
+ });
+ }
+ });
+};
\ 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 index 00000000..7011a650 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/js/package/pmController.js @@ -0,0 +1,332 @@ +/*
+ * 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.
+ */
+
+var vm = avalon.define({
+ $id : "pmController",
+ resource : {
+ packageInfo : [],
+ packageDetails : "",
+ vimSelectItems : [
+ {vimName:"test1", oid:"123456"},
+ {vimName:"test2",oid:"987654"}
+ ]
+ },
+ csarIdSelected : "",
+ $packageTableFields : {// table columns
+ table: [
+ {"mData": "name", name: $.i18n.prop("nfv-package-iui-field-name")},
+ {"mData": "type", name: $.i18n.prop("nfv-package-iui-field-type")},
+ {"mData": "size", name: $.i18n.prop("nfv-package-iui-field-size")},
+ {"mData": "createTime", name: $.i18n.prop("nfv-package-iui-field-createTime")},
+ {"mData": "status", name: $.i18n.prop("nfv-package-iui-field-status"), "fnRender" : pmUtil.statusRender},
+ {"mData": null, name: $.i18n.prop("nfv-package-iui-field-operation"), "fnRender" : pmUtil.actionRender}
+ ]
+ },
+ $language: {
+ "sProcessing": "<img src='../component/thirdparty/data-tables/images/loading-spinner-grey.gif'/><span> "
+ +$.i18n.prop("nfv-nso-iui-table-sProcess")+"</span>",
+ "sLengthMenu": $.i18n.prop("nfv-nso-iui-table-sLengthMenu"),
+ "sZeroRecords": $.i18n.prop("nfv-nso-iui-table-sZeroRecords"),
+ "sInfo": "<span class='seperator'> </span>" + $.i18n.prop("nfv-nso-iui-table-sInfo"),
+ "sInfoEmpty": $.i18n.prop("nfv-nso-iui-table-sInfoEmpty"),
+ "sGroupActions": $.i18n.prop("nfv-nso-iui-table-sGroupActions"),
+ "sAjaxRequestGeneralError":$.i18n.prop("nfv-nso-iui-table-sAjaxRequestGeneralError"),
+ "sEmptyTable": $.i18n.prop("nfv-nso-iui-table-sEmptyTable"),
+ "oPaginate": {
+ "sPrevious": $.i18n.prop("nfv-nso-iui-table-sPrevious"),
+ "sNext": $.i18n.prop("nfv-nso-iui-table-sNext"),
+ "sPage": $.i18n.prop("nfv-nso-iui-table-sPage"),
+ "sPageOf": $.i18n.prop("nfv-nso-iui-table-sPageOf")
+ }
+ },
+ $restUrl:{
+ queryPackageInfoUrl: "/openoapi/catalog/v1/csars",
+ uploadPackageUrl: "/openoapi/catalog/v1/csars",
+ gsarDelPackageUrl: "/openoapi/gsolcm/v1.0/nspackage",
+ ssarDelPackageUrl: "/openoapi/catalog/v1/csars",
+ nsarDelPackageUrl: "/openoapi/nslcm/v1.0/nspackage",
+ nfarDelPackageUrl: "/openoapi/nslcm/v1.0/vnfpackage",
+ gsarOnboardUrl: "/openoapi/gsolcm/v1.0/nspackage",
+ ssarOnboardUrl: "/openoapi/nslcm/v1.0/nspackage",
+ nsarOnboardUrl: "/openoapi/nslcm/v1.0/nspackage",
+ nfarOnboardUrl: "/openoapi/nslcm/v1.0/vnfpackage",
+ changePackageStatusUrl : "/openoapi/catalog/v1/csars",
+ queryVimInfoUrl : "/api/roc/v1/resource/vims"
+ },
+ $getPackageCond: function() {
+ var cond = {};
+ return cond;
+ },
+ $initTable: function() {
+ var url=vm.$restUrl.queryPackageInfoUrl;
+ commonUtil.get(url,null,function(resp) {
+ if (resp) {
+ vm.resource.packageInfo=resp;
+ }
+ })
+ },
+ packageDetail : {
+ detailTitle : "",
+ isShow : "none",
+ detailIndex : 0,
+ detailData : [{
+ id : "general",
+ name : $.i18n.prop("com_zte_ums_eco_roc_rsview_info"),
+ isActive : true
+ }, {
+ id : "relationShips",
+ name : $.i18n.prop("com_zte_ums_eco_roc_rsview_relation"),
+ isActive : false
+ }
+ ],
+ $showDetails : function (isShow, sn, name) {
+ vm.packageDetail.isShow = isShow;
+ vm.packageDetail.detailCondChange(0);
+ if (isShow == "block") {
+ vm.packageDetail.detailTitle = name + "-" + $.i18n.prop("nfv-package-iui_packageview_packageDetail"),
+ $('#' + vm.packageDetail.detailData[0].id).click();
+ vm.packageDetail.detailData[0].isActive = true;
+ vm.packageDetail.$initPackageDetailTable(sn);
+ }
+ },
+ detailCondChange : function (index) {
+ vm.packageDetail.detailIndex = index;
+ for (var i = 0; i < vm.packageDetail.detailData.length; i++) {
+ vm.packageDetail.detailData[i].isActive = false;
+ }
+ vm.packageDetail.detailData[index].isActive = true;
+ },
+ $initPackageDetailTable : function (sn) {
+ vm.resource.packageDetails = vm.resource.packageInfo[sn];
+ vm.resource.relationInfo = [];
+ },
+ $isRowDeletingStatus : function(name) {
+ var table = $("#" + vm.$tableId).dataTable();
+ var tableData = table.fnGetData();
+ for (var i=0; i<tableData.length; i++) {
+ if(tableData[i]["name"] == name &&
+ tableData[i]["status"].indexOf($.i18n.prop("nfv-package-iui-status-deleting")) > -1) {
+ return true;
+ }
+ }
+ return false;
+ },
+ },
+ selectVimDialog : {
+ currentRadioClicked : [],
+ clickedIndex : "",
+ nfarOnBoardParam : {
+ csarId : "",
+ vimIds : [],
+ labVimId : "",
+ },
+ $initData : function(csarId) {
+ vm.resource.vimSelectItems = [
+ {vimName:"test1", oid:"123456"},
+ {vimName:"test2", oid:"987654"},
+ {vimName:"test3", oid:"123qwe"}
+ ];
+ vm.selectVimDialog.nfarOnBoardParam.csarId = csarId;
+ },
+ $confirmBtnClick : function () {
+ var labVimId = "";
+ var vimIds = [];
+ var testEnvCount = 0;
+ for(var i=0; i<vm.resource.vimSelectItems.length; i++) {
+ var radioId = "testEnvRadios" + i;
+ var checkboxId = "produceEnvChecks" + i;
+ if(document.getElementById(radioId).checked) {
+ labVimId = vm.resource.vimSelectItems[i].oid;
+ }
+ if(document.getElementById(checkboxId).checked) {
+ vimIds.push(vm.resource.vimSelectItems[i].oid);
+ }
+ }
+ vm.selectVimDialog.nfarOnBoardParam.labVimId = labVimId;
+ vm.selectVimDialog.nfarOnBoardParam.vimIds = vimIds;
+ var extData = vm.selectVimDialog.nfarOnBoardParam;
+ pmUtil.doNFAROnboard(extData);
+ $("#selectVimDialog").modal("hide");
+ },
+ $radioClicked : function(index) {
+ var radioId = "testEnvRadios" + index;
+ var checkboxId = "produceEnvChecks" + index;
+ if(vm.selectVimDialog.currentRadioClicked[index] && vm.selectVimDialog.clickedIndex == index) {
+ vm.selectVimDialog.currentRadioClicked[index] = false;
+ document.getElementById(radioId).checked = false;
+ document.getElementById(checkboxId).disabled = false;
+ } else {
+ for(var i=0; i<vm.resource.vimSelectItems.length; i++) {
+ var uncheckId = "produceEnvChecks" + i;
+ document.getElementById(uncheckId).disabled = false;
+ }
+ document.getElementById(checkboxId).checked = false;
+ document.getElementById(checkboxId).disabled = true;
+ vm.selectVimDialog.currentRadioClicked[index] = true;
+ vm.selectVimDialog.clickedIndex = index;
+ }
+ }
+ },
+
+ $delPackage : function(csarId,type) {
+ bootbox.confirm($.i18n.prop("nfv-package-iui-message-delete-confirm"), function(result){
+ var url = "";
+ if(result) {
+ if(type == "NSAR") {
+ url = vm.$restUrl.nsarDelPackageUrl + "/" + csarId;
+ //commonUtil.delete(url, function(resp) {
+ // vm.gotoPackageListPage();
+ //});
+ } else if(type == "NFAR") {
+ url = vm.$restUrl.nfarDelPackageUrl + "/" + csarId;
+ //commonUtil.delete(url, function(resp) {
+ // vm.gotoPackageListPage();
+ //});
+ } else if(type == "GSAR") {
+ url = vm.$restUrl.gsarDelPackageUrl + "/" + csarId;
+ //commonUtil.delete(url, function(resp) {
+ // vm.gotoPackageListPage();
+ //});
+ } else if(type == "SSAR") {
+ url = vm.$restUrl.ssarDelPackageUrl + "/" + csarId;
+ //commonUtil.delete(url, function(resp) {
+ // vm.gotoPackageListPage();
+ //});
+ }
+ commonUtil.delete(url, function(resp) {
+ vm.gotoPackageListPage();
+ });
+ }
+ });
+ },
+ isRowOnBoardingStatus : function(csarId) {
+ var table = $("#" + vm.$tableId).dataTable();
+ var tableData = table.fnGetData();
+ for (var i=0; i<tableData.length; i++) {
+ if(tableData[i]["name"] == name &&
+ tableData[i]["status"].indexOf($.i18n.prop("nfv-package-iui-status-onboarding")) > -1) {
+ return true;
+ }
+ }
+ return false;
+ },
+
+ onBoardPackage : function(csarId,type) {
+ var param = {
+ csarId : csarId
+ };
+ if(type == "NSAR") {
+ //vm.csarIdSelected = csarId;
+ //vm.showOnboardDialog(csarId);
+ var url = vm.$restUrl.nsarOnboardUrl;
+ pmUtil.doOnBoard(url, param);
+ } else if(type == "NFAR") {
+ //var url = vm.$restUrl.nfarOnboardUrl;
+ //pmUtil.doOnBoard(url, param);
+ vm.csarIdSelected = csarId;
+ vm.showOnboardDialog(csarId);
+ } else if(type == "GSAR") {
+ var url = vm.$restUrl.gsarOnboardUrl;
+ pmUtil.doOnBoard(url, param);
+ } else if(type == "SSAR") {
+ var url = vm.$restUrl.ssarOnboardUrl;
+ pmUtil.doOnBoard(url, param);
+ }
+ },
+ showOnboardDialog : function(csarId) {
+ vm.selectVimDialog.$initData(csarId);
+ $("#selectVimDialog").modal("show");
+ },
+ $initUpload : function() {
+ $("#fileupload").fileupload({
+ url : vm.$restUrl.uploadPackageUrl,
+ dropZone: $('#dropzone'),
+ maxNumberOfFiles : 1,
+ maxChunkSize : 20000000, //20M
+ autoUpload : false,
+ add : function(e, data) {
+ $("#bar").css('width', '0%');
+ $("#persent").text('0%');
+ $("#fileName").text(data.files[0].name);
+ $("#fileremove").attr("disabled", false);
+ $("#filesubmit").attr("disabled", false);
+
+ $("#filesubmit").remove();
+ $('<button id="filesubmit" class="btn btn-default" type="button"/>').text("上传")
+ .appendTo($(".input-group-btn")[0])
+ .click(function () {
+ var fileName = data.files[0].name;
+ var existPackage = pmUtil.getExistPackageByName(fileName);
+ if(existPackage == 0){//0:package is not exist
+ $(".progress").addClass("active");
+ data.submit();
+ } else {
+ var msg = "";
+ if(existPackage == 1){//1:package not exist, instance reference this csar
+ msg = $.i18n.prop("nfv-package-iui-message-upload-csar-deletionpending");
+ }
+ if(existPackage == 2){//2:package exist
+ msg = $.i18n.prop("nfv-package-iui-message-upload-csar-exist");
+ }
+
+ bootbox.confirm(msg, function(result){
+ if(result) {
+ $(".progress").addClass("active");
+ data.submit();
+ }
+ });
+ }
+ });
+ $("#fileremove").click(function(){
+ $("#bar").css('width', '0%');
+ $("#persent").text("");
+ $("#fileName").text("");
+ $("#filesubmit").attr("disabled", true);
+ $("#fileremove").attr("disabled", true);
+ });
+ },
+ done : function(e, data) {
+ commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-upload-success"), 'success');
+ },
+ fail : function(e, data) {
+ commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-upload-fail"), 'danger');
+ },
+ always : function(e, data) {
+ refreshByCond();
+ $(".progress").removeClass("active");
+ $("#bar").css('width', '100%');
+ $("#persent").text('100%');
+ },
+ progressall : function(e ,data) {
+ var progress = parseInt(data.loaded / data.total * 80, 10);
+ $("#bar").css('width', progress + '%');
+ $("#persent").text(progress + '%');
+ }
+ });
+ },
+ gotoPackageListPage:function(){
+ window.location.href="./csarPackage.html";
+ }
+});
+avalon.scan();
+vm.$initUpload();
+
+$(function(){
+ vm.$initTable();
+});
+var refreshByCond = function() {
+ vm.$initTable();
+};
\ 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 index 00000000..610eb2ef --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/js/package/pmUtil.js @@ -0,0 +1,179 @@ +/*
+ * 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.
+ */
+var pmUtil = {};
+
+pmUtil.changeStatus = function(csarId, status) {
+ pmUtil.changeTableStatus(csarId, "activating");
+ $.ajax({
+ type : "PUT",
+ url : vm.$restUrl.changePackageStatusUrl + csarId + "?csarName=" + "&status=" + status,
+ success : function() {
+ refreshByCond();
+ },
+ error : function() {
+ refreshByCond();
+ }
+ });
+}
+
+pmUtil.changeTableStatus = function(name, status) {
+ var table = $("#" + vm.$tableId).dataTable();
+ var tableData = table.fnGetData();
+ for (var i=0; i<tableData.length; i++) {
+ if(tableData[i]["name"] == name) {
+ table.fnUpdate(status, i, 4, false, false);
+ break;
+ }
+ }
+}
+
+pmUtil.isRowDeletingStatus = function(name) {
+ var table = $("#" + vm.$tableId).dataTable();
+ var tableData = table.fnGetData();
+ for (var i=0; i<tableData.length; i++) {
+ if(tableData[i]["name"] == name &&
+ tableData[i]["status"].indexOf($.i18n.prop("nfv-package-iui-status-deleting")) > -1) {
+ return true;
+ }
+ }
+ return false;
+}
+
+pmUtil.delPackage = function(csarId) {
+ if(pmUtil.isRowDeletingStatus(csarId)){
+ return;
+ }
+ bootbox.confirm($.i18n.prop("nfv-package-iui-message-delete-confirm"), function(result){
+ if(result) {
+ pmUtil.changeTableStatus(csarId, "deleting");
+ var url = vm.$restUrl.delPackageUrl + csarId;
+ commonUtil.delete(url, function(resp) {
+
+ });
+ }
+ });
+}
+
+pmUtil.isRowOnBoardingStatus = function(name) {
+ var table = $("#" + vm.$tableId).dataTable();
+ var tableData = table.fnGetData();
+ for (var i=0; i<tableData.length; i++) {
+ if(tableData[i]["name"] == name &&
+ tableData[i]["status"].indexOf($.i18n.prop("nfv-package-iui-status-onboarding")) > -1) {
+ return true;
+ }
+ }
+ return false;
+}
+
+pmUtil.onBoardPackage = function(name) {
+ if(pmUtil.isRowOnBoardingStatus(name)){
+ return;
+ }
+ pmUtil.changeTableStatus(name, "onboarding");
+ var url = vm.$restUrl.delPackageUrl + "?csarName=" + name;
+ commonUtil.delete(url, function(resp) {
+ });
+}
+//query packages exist
+//0: the package does not exist
+//1: the package does not exist, but the instance cite this package
+//2: the package exists
+pmUtil.getExistPackageByName = function(name) {
+ var index = name.indexOf(".csar") || name.indexOf(".zip");
+ if(index > 0){
+ name = name.substring(0, index);
+ }
+ var result = $.ajax({
+ type : "GET",
+ url : vm.$restUrl.queryPackageInfoUrl + "?csarName=" + name,
+ async: false
+ });
+ var data = result.responseJSON;
+ if(data != undefined && data.length == 0){
+ return 0;
+ }
+ var result = data[0];
+ if(result.deletionPending != undefined && result.deletionPending == "true"){
+ return 1;
+ }
+
+ return 2;
+}
+
+pmUtil.updateDeletedPackageStatus = function(message) {
+ if(message.status == "true" || message.status == "deletionPending") {
+ commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-delete-success"), "success");
+ refreshByCond();
+ } else {
+ pmUtil.changeTableStatus(message.csarid, "deletefail");
+ }
+}
+
+pmUtil.queryVimInfo = function() {
+ $.get(
+ vm.$restUrl.queryVimInfoUrl,
+ function (resp) {
+ if (resp.data) {
+ vm.selectVim.vimSelectItems = resp.data || [{
+ vimName: "test1",
+ oid: "123456"
+ },
+ {
+ vimName: "test2",
+ oid: "987654"
+ }];
+ }
+ },
+ "json"
+ )
+}
+
+pmUtil.doOnBoard = function(url,param) {
+ $.ajax({
+ type : "POST",
+ url : url,
+ data : JSON.stringify(param),
+ contentType : "application/json",
+ dataType : "json",
+ success : function(resp) {
+ if(resp.data.status == "failed") {
+ commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-onBoarded"), "failed");
+ }
+ refreshByCond();
+ },
+ error : function() {
+ commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-onBoard-error"), "failed");
+ }
+ });
+ }
+
+pmUtil.doNFAROnboard = function(extData) {
+ extData.csarId = vm.csarIdSelected;
+ $.ajax({
+ type : "POST",
+ url : vm.$restUrl.nfarOnboardUrl,
+ data : JSON.stringify(extData),
+ contentType : "application/json",
+ dataType : "json",
+ success : function(resp) {
+ refreshByCond();
+ },
+ error : function() {
+ commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-onBoard-error"), "failed");
+ }
+ });
+}
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 index 00000000..2724fc06 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmController.js @@ -0,0 +1,85 @@ +/*
+ * 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.
+ */
+avalon.config({
+ interpolate: ["<!--", "-->"]
+});
+
+var vm = avalon.define({
+ $id: "tmController",
+ $tableId : "ict_template_table",
+ $templateTableFields : {// table columns
+ table: [
+ {"mData": "serviceTemplateId", name: "ID", "bVisible": false},
+ {"mData": "templateName", name: $.i18n.prop("nfv-template-iui-field-templatename"), "fnRender" : tmUtil.nameRender},
+ // {"mData": "producttype", name: $.i18n.prop("nfv-template-iui-field-producttype")},
+ {"mData": "vendor", name: $.i18n.prop("nfv-template-iui-field-vendor")},
+ {"mData": "version", name: $.i18n.prop("nfv-template-iui-field-version")},
+ {"mData":"csarId", name: "packageID","bVisible": false},
+ {"mData": "type", name: $.i18n.prop("nfv-template-iui-field-type")},
+ //{"mData":"downloadUri", name: $.i18n.prop("nfv-template-iui-field-download-uri")},
+ //{"mData": "inputs", name: $.i18n.prop("nfv-template-iui-field-inputs"), "fnRender" : tmUtil.inputsRender}
+ ]
+ },
+ $language: {
+ "sProcessing": "<img src='../component/thirdparty/data-tables/images/loading-spinner-grey.gif'/><span> "
+ +$.i18n.prop("nfv-nso-iui-table-sProcess")+"</span>",
+ "sLengthMenu": $.i18n.prop("nfv-nso-iui-table-sLengthMenu"),
+ "sZeroRecords": $.i18n.prop("nfv-nso-iui-table-sZeroRecords"),
+ "sInfo": "<span class='seperator'> </span>" + $.i18n.prop("nfv-nso-iui-table-sInfo"),
+ "sInfoEmpty": $.i18n.prop("nfv-nso-iui-table-sInfoEmpty"),
+ "sGroupActions": $.i18n.prop("nfv-nso-iui-table-sGroupActions"),
+ "sAjaxRequestGeneralError":$.i18n.prop("nfv-nso-iui-table-sAjaxRequestGeneralError"),
+ "sEmptyTable": $.i18n.prop("nfv-nso-iui-table-sEmptyTable"),
+ "oPaginate": {
+ "sPrevious": $.i18n.prop("nfv-nso-iui-table-sPrevious"),
+ "sNext": $.i18n.prop("nfv-nso-iui-table-sNext"),
+ "sPage": $.i18n.prop("nfv-nso-iui-table-sPage"),
+ "sPageOf": $.i18n.prop("nfv-nso-iui-table-sPageOf")
+ }
+ },
+ $restUrl : {
+ queryTemplateInfoUrl : "/openoapi/catalog/v1/servicetemplates"
+ },
+ $getTemplateCond: function() {
+ var cond = {};
+ return cond;
+ },
+ $initTable: function() {
+ var setting = {};
+ setting.language = vm.$language;
+ setting.paginate = true;
+ setting.info = true;
+ setting.columns = vm.$templateTableFields.table;
+ setting.restUrl = vm.$restUrl.queryTemplateInfoUrl;
+ setting.tableId = vm.$tableId;
+ serverPageTable.initDataTable(setting, vm.$getTemplateCond(),
+ vm.$tableId + '_div');
+ },
+ $openDetail : function(templateId, rowId) {
+ var oSelect = $("tbody tr select").eq(rowId);
+ var flavor = "";
+ if(oSelect.length) {
+ oSelect.find("option:selected").val();
+ }
+ window.open("./templateDetail.html?templateId="+templateId+"&flavor="+flavor,"_self");
+ },
+});
+avalon.scan();
+vm.$initTable();
+
+var refreshByCond = function() {
+ vm.$initTable();
+};
\ 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 index 00000000..0d04e7cc --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmDetailController.js @@ -0,0 +1,342 @@ +/*
+ * 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.
+ */
+
+var vm = avalon.define({
+ $id : "tmDetailController",
+ templateId : "",
+ templateData : [
+ {href: "#topology", name: "Topology", value: true},
+ {href: "#nodes", name: "Nodes", value: false}
+ ],
+ $language: {
+ "sProcessing": "<img src='../component/thirdparty/data-tables/images/loading-spinner-grey.gif'/><span> "
+ +$.i18n.prop("nfv-nso-iui-table-sProcess")+"</span>",
+ "sLengthMenu": $.i18n.prop("nfv-nso-iui-table-sLengthMenu"),
+ "sZeroRecords": $.i18n.prop("nfv-nso-iui-table-sZeroRecords"),
+ "sInfo": "<span class='seperator'> </span>" + $.i18n.prop("nfv-nso-iui-table-sInfo"),
+ "sInfoEmpty": $.i18n.prop("nfv-nso-iui-table-sInfoEmpty"),
+ "sGroupActions": $.i18n.prop("nfv-nso-iui-table-sGroupActions"),
+ "sAjaxRequestGeneralError":$.i18n.prop("nfv-nso-iui-table-sAjaxRequestGeneralError"),
+ "sEmptyTable": $.i18n.prop("nfv-nso-iui-table-sEmptyTable"),
+ "oPaginate": {
+ "sPrevious": $.i18n.prop("nfv-nso-iui-table-sPrevious"),
+ "sNext": $.i18n.prop("nfv-nso-iui-table-sNext"),
+ "sPage": $.i18n.prop("nfv-nso-iui-table-sPage"),
+ "sPageOf": $.i18n.prop("nfv-nso-iui-table-sPageOf")
+ }
+ },
+ $restUrl : {
+ queryNodeTemplateUrl : "/openoapi/catalog/v1/servicetemplates/{0}/nodetemplates",
+ queryTemplateInfoUrl : "/openoapi/catalog/v1/servicetemplates"
+ },
+ $init : function() {
+ vm.$initTemplateData();
+ vm.$initTopoNodesData();
+ },
+ $initTemplateData : function() {
+ $.ajax({
+ type : "GET",
+ url : vm.$restUrl.queryTemplateInfoUrl,
+ success : function(resp) {
+ if(resp) {
+ vm.nodesTab.servicesTemplateData = [];
+ for(var i=0; i<resp.length; i++) {
+ //generate node table display data
+ vm.nodesTab.servicesTemplateData.push(resp[i]);
+ }
+ vm.nodesTab.$initNfvNodesTab();
+ }
+ },
+ error : function() {
+ commonUtil.showMessage($.i18n.prop("nfv-topology-iui-message-error"), "danger");
+ }
+ });
+ },
+ $initTopoNodesData : function() {
+ $.ajax({
+ type : "GET",
+ url : vm.$restUrl.queryNodeTemplateUrl,
+ success : function(resp) {
+ if(resp) {
+ vm.nodesTab.nodesDetail.nodesTemplateDetailData = [];
+ for(var i=0; i<resp.length; i++) {
+ //generate node table display data
+ var nodeTemplate = topoUtil.generateNodeTemplate(resp[i]);
+ vm.nodesTab.nodesList.nodesData.push(nodeTemplate);
+ }
+ vm.nodesTab.nodesDetail.nodesTemplateDetailData = resp;
+ //generate topology graph display data
+ vm.topologyTab.topoTemplateData = topoUtil.generateTopoTemplate(vm.nodesTab.nodesList.nodesData.$model);
+ //initialize topology data
+ topoUtil.initTopoData(vm.topologyTab.topoTemplateData.$model);
+ //vm.nodesTab.nodesList.$initNodesTable();
+ }
+ },
+ error : function() {
+ commonUtil.showMessage($.i18n.prop("nfv-topology-iui-message-error"), "danger");
+ }
+ });
+ },
+ $initNodesData : function() {
+ $.ajax({
+ type: "GET",
+ url: vm.$restUrl.queryNodeTemplateUrl,
+ success: function (resp) {
+ if (resp) {
+ vm.nodesTab.nodesDetail.nodesTemplateDetailData = [];
+ for (var i = 0; i < resp.length; i++) {
+ //generate node table display data
+ var nodeTemplate = topoUtil.generateNodeTemplate(resp[i]);
+ vm.nodesTab.nodesList.nodesData.push(nodeTemplate);
+ }
+ vm.nodesTab.nodesDetail.nodesTemplateDetailData = resp;
+ //generate topology graph display data
+ //vm.topologyTab.topoTemplateData = topoUtil.generateTopoTemplate(vm.nodesTab.nodesList.nodesData.$model);
+ //initialize topology data
+ //topoUtil.initTopoData(vm.topologyTab.topoTemplateData.$model);
+ vm.nodesTab.nodesList.$initNodesTable();
+ }
+ },
+ error: function () {
+ commonUtil.showMessage($.i18n.prop("nfv-topology-iui-message-error"), "danger");
+ }
+ });
+ },
+ topologyTab : {
+ topology : "topology.html",
+ vnfTip : $.i18n.prop("nfv-topology-iui-vnf-tip"),
+ btnTip : $.i18n.prop("nfv-topology-iui-btn-return-tip"),
+ topoTemplateData:[],
+ boxTopoDatas:[],
+ networkTopoDatas:[],
+ isShowNum: false,
+ returnBtnVisible : false,
+ $getColor: function(index) {
+ return topoUtil.getColor(index);
+ },
+ $getCidr: function(properties){
+ return topoUtil.getCidr(properties);
+ },
+ $getCpTop: function(index, parentBoxId){
+ return topoUtil.getCpTop(index, parentBoxId);
+ },
+ $initTopology : function() {
+ topoUtil.initTopoData(vm.topologyTab.topoTemplateData.$model);
+ },
+ $showTopo:function(id, name){
+ vm.nodesTab.nodesDetail.$showDetails("block", id, name);
+ },
+ $showVnfTopo: function(templateId) {
+ vm.topologyTab.returnBtnVisible = true;
+ vm.$restUrl.queryNodeTemplateUrl = "/openoapi/catalog/v1/servicetemplates/" + templateId + "/nodetemplates";
+ vm.$init();
+ },
+ $returnNS: function() {
+ vm.topologyTab.returnBtnVisible = false;
+ vm.$restUrl.queryNodeTemplateUrl = "/openoapi/catalog/v1/servicetemplates/" + vm.templateId + "/nodetemplates";
+ vm.$init();
+ }
+ },
+ nodesTab : {
+ servicesTemplateData: [],
+ $nodesTabId : "ict_nodes_template_table",
+ $nodesTemplateTabFields : {// table columns
+ table: [
+ {"mData": "serviceTemplateId", name: "ID","bVisible": false},
+ {"mData": "", name: "","sClass": 'details-control'},
+ {"mData": "templateName", name: $.i18n.prop("nfv-template-iui-field-templatename")},
+ {"mData": "vendor", name: $.i18n.prop("nfv-template-iui-field-vendor")},
+ {"mData": "version", name: $.i18n.prop("nfv-template-iui-field-version")},
+ {"mData":"csarid", name: "packageID","bVisible": false},
+ {"mData": "type", name: $.i18n.prop("nfv-template-iui-field-type")},
+ //{"mData": "inputs", name: $.i18n.prop("nfv-template-iui-field-inputs"),"fnRender" : tmDetailUtil.inputsRender},
+ //{"mData": "outputs", name: $.i18n.prop("nfv-template-iui-field-outputs"),"fnRender" : tmDetailUtil.outputsRender},
+ //{"mData": "operations", name: $.i18n.prop("nfv-template-iui-field-operations")}
+ ]
+ },
+ $initNfvNodesTab: function() {
+ var setting = {};
+ setting.language = vm.$language;
+ setting.paginate = true;
+ setting.info = true;
+ //setting.sort = true;
+ setting.columns = vm.nodesTab.$nodesTemplateTabFields.table;
+ setting.restUrl = vm.$restUrl.queryTemplateInfoUrl;
+ setting.tableId = vm.nodesTab.$nodesTabId;
+ //serverPageTable.initTableWithData(setting,vm.nodesTab.$nodesTabId + '_div',vm.nodesTab.servicesTemplateData.$model);
+ serverPageTable.initDataTable(setting,{},vm.nodesTab.$nodesTabId + '_div');
+ $('#' + vm.nodesTab.$nodesTabId + '>tbody').on("click", 'td.details-control', function () {
+ var tr = $(this).closest('tr');
+ var table = $('#' + vm.nodesTab.$nodesTabId).dataTable();
+ if (table.fnIsOpen(tr[0])) {
+ table.fnClose(tr[0]);
+ tr.removeClass('shown');
+ }
+ else {
+ table.fnOpen(tr[0], vm.nodesTab.nodesList.$format_Detail(), 'details');
+ tr.addClass('shown');
+ }
+ });
+ },
+
+ //nodes list table
+ nodesList :{
+ nodesData: [],
+ $nodesTabDataId : "ict_nodes_table",
+ $nodesTabFields : {// table columns
+ table: [
+ {"mData": "id", name: "ID", "bVisible": false},
+ {"mData": "name", name: $.i18n.prop("nfv-templateDetail-iui-field-nodetypename"), "bSortable": true, "fnRender" : tmDetailUtil.nameRender},
+ {"mData": "type", name: $.i18n.prop("nfv-templateDetail-iui-field-type"), "bSortable": false},
+ {"mData": "containedin", name: $.i18n.prop("nfv-templateDetail-iui-field-containedin"), "bSortable": false},
+ {"mData": "deployedon", name: $.i18n.prop("nfv-templateDetail-iui-field-deployedon"), "bSortable": false},
+ {"mData": "connectedto", name: $.i18n.prop("nfv-templateDetail-iui-field-connectedto"), "bSortable": false},
+ {"mData": "virtuallinksto", name: $.i18n.prop("nfv-templateDetail-iui-field-virtuallinksto"), "bSortable": false}
+ ]
+ },
+ $initNodesTable: function () {
+ var setting = {};
+ setting.language = vm.$language;
+ setting.paginate = true;
+ setting.info = true;
+ //setting.sort = true;
+ setting.columns = vm.nodesTab.nodesList.$nodesTabFields.table;
+ setting.restUrl = vm.$restUrl.queryNodeTemplateUrl;
+ setting.tableId = vm.nodesTab.nodesList.$nodesTabDataId;
+ //serverPageTable.initTableWithData(setting,vm.nodesTab.nodesList.$nodesTabDataId + '_div',vm.nodesTab.nodesList.nodesData.$model);
+ serverPageTable.initTableWithoutLib(setting,{},vm.nodesTab.nodesList.$nodesTabDataId + '_div');
+ },
+ $format_Detail: function() {
+ var sOut = '<div class="row-fluid" data-name="table_zone"><div class="col-xs-12" id="ict_nodes_table_div"></div></div>'
+ vm.$initNodesData();
+ return sOut;
+ },
+ },
+ //Nodes Details
+ nodesDetail : {
+ nodesTemplateDetailData: [],
+ detailTitle : "",
+ isShow : "none",
+ detailIndex : 0,
+ detailData : [
+ {id: "general", name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-general"), isActive: true},
+ {id: "properties", name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-properties"), isActive: false},
+ {id: "relationShips", name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-relationShips"), isActive: false}
+ ],
+ $showDetails : function(isShow, nodetypeid, nodetypename) {
+ vm.nodesTab.nodesDetail.isShow = isShow;
+ if (isShow == "block") {
+ vm.nodesTab.nodesDetail.detailTitle = nodetypename + " " + $.i18n.prop("nfv-templateDetail-nodesTab-iui-title-nodeDetail"),
+ $('#' + vm.nodesTab.nodesDetail.detailData[0].id).click();
+ vm.nodesTab.nodesDetail.detailData[0].isActive = true;
+ vm.nodesTab.nodesDetail.$initNodeDetailTable(nodetypeid);
+ }
+ },
+ detailCondChange : function(index) {
+ vm.nodesTab.nodesDetail.detailIndex = index;
+ for(var i=0; i<vm.nodesTab.nodesDetail.detailData.length; i++) {
+ vm.nodesTab.nodesDetail.detailData[i].isActive = false;
+ }
+ vm.nodesTab.nodesDetail.detailData[index].isActive = true;
+ },
+ $tableFields : {// table columns
+ general: [
+ {"mData": "key", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-key"), "bSortable" : false},
+ {"mData": "value", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-value"), "bSortable" : false}
+ ],
+ properties: [
+ {"mData": "key", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-key"), "bSortable" : false},
+ {"mData": "value", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-value"), "bSortable" : false}
+ ],
+ relationShips: [
+ {"mData": "sourceNodeName", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-sourceNodeName"), "bSortable" : false},
+ {"mData": "targetNodeName", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-targetNodeName"), "bSortable" : false},
+ {"mData": "type", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-type"), "bSortable" : false}
+ ]
+ },
+ $initNodeDetailTable: function(nodetemplateid) {
+ var data = topoUtil.getCurrentDetailData(vm.nodesTab.nodesDetail.nodesTemplateDetailData.$model, nodetemplateid);
+ //initialize three tables of nodedetail
+ $.each(vm.nodesTab.nodesDetail.$tableFields, function(key, value){
+ var setting = {};
+ setting.language = vm.$language;
+ setting.paginate = false;
+ setting.info = false;
+ setting.columns = value;
+ setting.tableId = "ict_table_" + key;
+ serverPageTable.initTableWithData(setting, setting.tableId + '_div', data[key]);
+ });
+ }
+ }
+ },
+ executionTab : {
+ $eventsTabId : "ict_events_table",
+ $eventsTabFields : {// table columns
+ table: [
+ {"mData": "currentStepId", name: "ID", "bVisible": false},
+ {"mData": "currentStepName", name: $.i18n.prop("nfv-templateDetail-executionTab-iui-field-currentStepName")},
+ {"mData": "currentStepStatus", name: $.i18n.prop("nfv-templateDetail-executionTab-iui-field-currentStepStatus")},
+ {"mData": "currentStepDesc", name: $.i18n.prop("nfv-templateDetail-executionTab-iui-field-currentStepDesc")},
+ {"mData": "currentTime", name: $.i18n.prop("nfv-templateDetail-executionTab-iui-field-executionTime")},
+ {"mData": "allSteps", name: "allSteps", "bVisible": false}
+ ]
+ },
+ $queryEventsInfoUrl: "/api/nsoc/appinstance/operateschedule?instanceId=",
+ $queryStepUrl: "",
+ $getEventsCond: function() {
+ var cond = {};
+ return cond;
+ },
+ $initEventsTable: function() {
+ console.log("initEventsTable ");
+ var setting = {};
+ setting.language = vm.$language;
+ setting.paginate = false;
+ setting.info = false;
+ setting.columns = vm.executionTab.$eventsTabFields.table;
+ setting.restUrl = vm.executionTab.$queryEventsInfoUrl;
+ setting.tableId = vm.executionTab.$eventsTabId;
+ serverPageTable.initDataTable(setting, vm.executionTab.$getEventsCond(),
+ vm.executionTab.$eventsTabId + '_div');
+ },
+ $operation : "",
+ steps : [],
+ $init: function() {
+ vm.executionTab.$initEventsTable();
+ }
+ },
+
+});
+
+var initParam = function() { //initialize template detail params
+ var paramStr = window.location.search.substring(1);
+ if(paramStr.length > 0) {
+ var params = paramStr.split("&");
+ var templateId = params[0].substring(params[0].indexOf('=') + 1);
+ var flavor = params[1].substring(params[1].indexOf('=') + 1);
+ avalon.scan();
+
+ vm.templateId = templateId;
+ vm.$restUrl.queryNodeTemplateUrl = commonUtil.format(vm.$restUrl.queryNodeTemplateUrl, templateId);
+
+ if(flavor) {
+ vm.$restUrl.queryNodeTemplateUrl += "?flavor=" + flavor;
+ }
+
+ vm.$init();
+ }
+};
+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 index 00000000..40980c05 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmDetailUtil.js @@ -0,0 +1,72 @@ +/*
+ * 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.
+ */
+var tmDetailUtil = {};
+tmDetailUtil.timer = null;
+
+tmDetailUtil.nameRender = function(obj) {
+ return '<a href="#" onclick="vm.nodesTab.nodesDetail.$showDetails('
+ + '\'block\',\'' + obj.aData.id + '\', \'' + obj.aData.name + '\')">' + obj.aData.name + '</a>';
+}
+
+tmDetailUtil.inputsRender = function(obj) {
+ var inputs = obj.aData.inputs;
+ var result = "";
+ //if(inputs && inputs.length) {
+ // var optionHtml = "";
+ // for(var i=0;i<inputs.length;i++) {
+ // optionHtml += '<option>' + inputs[i].name + '</option>';
+ // }
+ // result = '<select>' + optionHtml + '</select>';
+ //}
+ result = JSON.stringify(inputs);
+ return result;
+}
+
+tmDetailUtil.outputsRender = function(obj) {
+ var outputs = obj.aData.outputs;
+ var result = "";
+ //if(inputs && inputs.length) {
+ // var optionHtml = "";
+ // for(var i=0;i<inputs.length;i++) {
+ // optionHtml += '<option>' + inputs[i].name + '</option>';
+ // }
+ // result = '<select>' + optionHtml + '</select>';
+ //}
+ result = JSON.stringify(outputs);
+ return result;
+}
+
+tmDetailUtil.initSteps = function() {
+ $.ajax({
+ type : "GET",
+ url : vm.executionTab.$queryEventsInfoUrl,
+ data : "json",
+ success : function(data) {
+ console.log("initSteps");
+ if (data) {
+ var step = $(".step");
+ if (step.getStep().length == 0) {
+ vm.executionTab.steps = [{title : "start"}, {title : "install VM"}, {title : "execute"}, {title : "complete"}];
+ step.loadStep({
+ size : "large",
+ color : "blue",
+ steps : vm.executionTab.steps
+ });
+ }
+ }
+ }
+ });
+}
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 index 00000000..f604225c --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmUtil.js @@ -0,0 +1,37 @@ +/*
+ * 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.
+ */
+var tmUtil = {};
+
+tmUtil.nameRender = function(obj) {
+ return '<a href="#" onclick="vm.$openDetail(\'' + obj.aData.serviceTemplateId
+ + '\',' + obj.iDataRow + ')">' + obj.aData.templateName + '</a>';
+}
+
+tmUtil.elasticRender = function(obj) {
+ return null;
+}
+
+/*tmUtil.openDetail = function(obj) {
+ if (obj) {
+ var framework;
+ if(window.parent.ZteFrameWork){
+ framework = window.parent.ZteFrameWork;
+ }else{
+ return;
+ }
+ framework.goToURLByIDAndNewAction('eco-nsoc-templateDetail', 'initParam("' + obj.templateid + '")');
+ }
+}*/
\ 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 index 00000000..8e0b850b --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/topoUtil.js @@ -0,0 +1,619 @@ +/*
+ * 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.
+ */
+var topoUtil = {};
+topoUtil.topoDatas=[];
+topoUtil.svgOffsetWidth = 0;
+
+/**
+ * recursive generate tree structure of the topology graph data
+ * @param {[type]} rootName [description]
+ * @param {[type]} rootNode [description]
+ * @return {[type]} [description]
+ */
+topoUtil.generateSortData = function(rootName,rootNode) {
+ for(var i=0;i<topoUtil.topoDatas.length;i++) {
+ if(topoUtil.topoDatas[i].containIn == rootName){
+ rootNode["children"].push(topoUtil.topoDatas[i]);
+ var currentNum = rootNode["children"].length-1;
+ topoUtil.generateSortData(topoUtil.topoDatas[i].id, rootNode["children"][currentNum])
+ }
+ }
+}
+
+/**
+ * generate CP data, CP is inserted into the VDU or VNF child nodes
+ * @param {[type]} cpNode [description]
+ * @param {[type]} rootNode [description]
+ * @return {[type]} [description]
+ */
+topoUtil.generateCpData = function(cpNode, rootNode) {
+ for(var i=0;i<cpNode.length;i++){
+ for(var j=0;j<rootNode.length;j++) {
+ var node = rootNode[j];
+ if(cpNode[i].virtualbindsto == node.id) {
+ rootNode[j].cp.push(cpNode[i]);
+ break;
+ }
+ }
+ }
+}
+
+/**
+ * generate NETWORK and VL data, VL is inserted into the NETWORK child nodes
+ * @param {[type]} rootNode [description]
+ * @return {[type]} [description]
+ */
+topoUtil.generateNetworkData = function(vlanNode, networkNode) {
+ if(networkNode.length == 0) {
+ //no NETWORK, just VL
+ var network = {
+ subnets : vlanNode
+ }
+ networkNode.push(network);
+ } else {
+ //NETWORK and VL
+ for(var i=0;i<networkNode.length;i++) {
+ networkNode[i].subnets = [];
+ for(var j=0;j<vlanNode.length;j++){
+ var network = vlanNode[j].virtuallinksto;
+ if(network == networkNode[i].id) {
+ networkNode[i].subnets.push(vlanNode[j]);
+ }
+ }
+ }
+ }
+}
+
+/**
+ * initialize topology graph data
+ * @param {[type]} resp [description]
+ * @param {[type]} nodeInstanceData [description]
+ * @return {[type]} [description]
+ */
+topoUtil.initTopoData = function(resp, nodeInstanceData) {
+ if(resp && resp.length > 0) {
+ var datas = resp;
+ var boxData = [];
+ var networks = [];
+ var vlanData = [];
+ var cpData = [];
+ for(var i=0;i<datas.length;i++){
+ if (datas[i]["containIn"] == "") {
+ datas[i]["containIn"] = "--";
+ }
+ //add the property of children for all nodes
+ datas[i]["children"] = [];
+ datas[i]["cp"] = [];
+ //count instances number
+ if (nodeInstanceData) {
+ datas[i]["num"] = topoUtil.getInstanceNum(datas[i], nodeInstanceData);
+ }
+ //empty currentLinkNum
+ datas[i]["currentLinkNum"] = 0;
+ //distinguish VL, CP, NETWORK, VNF, VDU, VNFC from nodes to display topology graph
+ var type = datas[i]["type"];
+ if (type.toUpperCase().indexOf(".VL") > -1) {
+ vlanData.push(datas[i]);
+ } else if (type.toUpperCase().indexOf(".CP") > -1) {
+ cpData.push(datas[i]);
+ } else if(type.toUpperCase().indexOf(".NETWORK") > -1) {
+ networks.push(datas[i]);
+ } else if ((type.toUpperCase().indexOf(".VNF") > -1) || (type.toUpperCase().indexOf(".VDU") > -1)
+ || (type.toUpperCase().indexOf(".VNFC") > -1)) {
+ boxData.push(datas[i]);
+ } else {
+ boxData.push(datas[i]);
+ }
+ }
+
+ //generate CP nodes
+ topoUtil.generateCpData(cpData, boxData);
+ //generate VNF/NS tree data
+ var rootNode = {"children":[]};
+ topoUtil.topoDatas = boxData;
+ topoUtil.generateSortData("--", rootNode);
+ vm.topologyTab.boxTopoDatas = rootNode.children;
+ //generate NETWORK and VL nodes
+ topoUtil.generateNetworkData(vlanData, networks);
+ vm.topologyTab.networkTopoDatas = networks;
+
+ //draw topology graph
+ topoUtil.topoDatas = datas;
+ setTimeout("topoUtil.generateLine()", 100);
+ //bind window object events
+ topoUtil.initWindowEvent();
+ }
+}
+
+/**
+ * get node instances number
+ * @param {[type]} nodeTemplate [description]
+ * @param {[type]} nodeInstanceData [description]
+ * @return {[type]} [description]
+ */
+topoUtil.getInstanceNum = function(nodeTemplate, nodeInstanceData) {
+ var num = 0;
+ var id;
+ if(nodeTemplate.properties && nodeTemplate.properties.vnfdid) {
+ //ns嵌套vnf，ns中vnf的nodetemplate的属性vnfdid才是嵌套vnf的真实id
+ id = nodeTemplate.properties.vnfdid;
+ } else {
+ id = nodeTemplate.id;
+ }
+
+ if(nodeInstanceData && nodeInstanceData.length > 0) {
+ for (var j=0;j<nodeInstanceData.length;j++) {
+ if(nodeInstanceData[j].nodeTemplateId == id) {
+ num++;
+ }
+ }
+ }
+ return num;
+}
+
+topoUtil.getLineOffset = function(index) {
+ return index*15;
+}
+/**
+ * get node y coordinate offset, it is based on the total number of connections and the number of connections to
+ * calculate the Y coordinate offset current connection
+ * here's the connection refers connectsto relationship between VNC and VNC
+ * @param {[type]} node current node object
+ * @param {[type]} height current DOM object cliengtHeight
+ * @return {[type]} Y coordinate offset
+ */
+topoUtil.getNodeOffset = function(node, height) {
+ var toNodeLinkNum = ++node.currentLinkNum;
+ var totalLinkNum = node.inLinks.length + node.outLinks.length;
+ totalLinkNum++;
+ return (height/totalLinkNum)*toNodeLinkNum;
+}
+/**
+ * get node object by name
+ * @param {[type]} name node name
+ * @return {[type]} node object data
+ */
+topoUtil.getTopoDataById = function(id) {
+ var node;
+ for(var i=0;i<topoUtil.topoDatas.length;i++) {
+ if(id == topoUtil.topoDatas[i].id) {
+ node = topoUtil.topoDatas[i];
+ }
+ }
+ return node;
+}
+
+topoUtil.pageX = function(elem) {
+ return elem.offsetParent ? (elem.offsetLeft + topoUtil.pageX(elem.offsetParent)) : elem.offsetLeft;
+}
+
+topoUtil.pageY = function(elem) {
+ return elem.offsetParent ? (elem.offsetTop + topoUtil.pageY(elem.offsetParent)) : elem.offsetTop;
+}
+
+topoUtil.getHorizontalOffset = function(elem, elemArray) {
+ var horizontalOffset = 0;
+ for(var i=0;i<elemArray.length;i++) {
+ var nodeTop = topoUtil.pageY(elemArray[i]);
+ var fromTop = topoUtil.pageY(elem);
+ if(fromTop == nodeTop) {
+ horizontalOffset = topoUtil.getLineOffset(++horizontalIndex);
+ }
+ }
+ return horizontalOffset;
+}
+
+topoUtil.getParentNode = function(elem) {
+ return elem.className == "app" ? topoUtil.getParentNode(elem.offsetParent) : elem.offsetParent;
+}
+
+topoUtil.initElementSize = function() {
+ var height=$(".bpContainer").height();
+ $(".vlan").height() < height ? $(".vlan").height(height) : height;
+
+ var networkWidth = $("#networks").width();
+ var topoWidth = $("#topo").width();
+ var bodyWidth = $("body").width();
+ (networkWidth+topoWidth+50) > bodyWidth ? $("body").width(networkWidth+topoWidth+topoUtil.svgOffsetWidth+10) : $("body").width($("html").width());
+
+ var containerHeight=$(".container-fluid").height();
+ $(".coordinates").height(containerHeight).width($("body").width());
+}
+
+/**
+ * get the widest VDU or VNF node to generate connect lines
+ * @return {[type]} [description]
+ */
+topoUtil.getMaxNodeRight = function() {
+ var maxNode = {offsetWidth : 0};
+ for(var i=0;i<topoUtil.topoDatas.length;i++) {
+ var node = document.getElementById(topoUtil.topoDatas[i].id);
+ if(node && (maxNode.offsetWidth < node.offsetWidth)) {
+ maxNode = node;
+ }
+ }
+ return topoUtil.pageX(maxNode) + maxNode.offsetWidth;
+}
+
+topoUtil.initWindowEvent = function() {
+ $(window.frameElement).attr('scrolling', 'auto');
+ $('body').css('overflow', 'scroll');
+ $(window).scroll(function(){
+ $("#right-menu").css("top",$(window).scrollTop()); //vertical scroll
+ $("#right-menu").css("right",-1*$(window).scrollLeft()); //horizontal scroll
+ }).unload(function(){
+ $(window.frameElement).attr('scrolling', 'no');
+ });
+ //$(window).resize(topoUtil.generateLine);
+}
+
+/**
+ * generate topology attachment
+ * connectedto represent the connection between the VNFC and VNFC, virtuallinksto represent the connection between the VLAN and VDU
+ * @return {[type]} [description]
+ */
+topoUtil.generateLine = function() {
+ topoUtil.initElementSize();
+ var vduPath='';
+ var vlPath='';
+ var vduIndex=0;
+ var vlIndex=0;
+ var fromNodeArray = [];
+ var horizontalIndex = 0;
+ var maxNodeParentRight = topoUtil.getMaxNodeRight();
+ for(var i=0;i<topoUtil.topoDatas.length;i++) {
+ //connectedto
+ if(topoUtil.topoDatas[i].connectedto !=""){
+ var fromNode = document.getElementById(topoUtil.topoDatas[i].id);
+ var horizontalOffset = 0;
+ for(var k=0;k<fromNodeArray.length;k++) {
+ //VNFC node in the same VDU, coordinate offset
+ var nodeTop = topoUtil.pageY(fromNodeArray[k]);
+ var fromTop = topoUtil.pageY(fromNode);
+ if(fromTop == nodeTop) {
+ horizontalOffset = topoUtil.getLineOffset(++horizontalIndex);
+ }
+ }
+ fromNodeArray.push(fromNode);
+ var fromNodeParent = topoUtil.getParentNode(fromNode);
+ var toArray = topoUtil.topoDatas[i].connectedto.split(",");
+ for (var j=0;j<toArray.length;j++) {
+ var toNode = document.getElementById(toArray[j]);
+ var toNodeParent = topoUtil.getParentNode(toNode);
+ //Computing connection point and the connection point Y coordinate offset
+ var fromNodeOffset = topoUtil.getNodeOffset(topoUtil.topoDatas[i], fromNode.clientHeight);
+ var toNodeTopoData = topoUtil.getTopoDataById(toArray[j]);
+ var toNodeOffset = topoUtil.getNodeOffset(toNodeTopoData, toNode.clientHeight);
+ //X coordinate offset calculation link
+ var xLineOffset = topoUtil.getLineOffset(++vduIndex);
+ //Get the largest X coordinate offset is used to set the width of the body
+ topoUtil.svgOffsetWidth = Math.max(xLineOffset, topoUtil.svgOffsetWidth);
+
+ var fromNodeLeft = topoUtil.pageX(fromNode);
+ var fromNodeRight = topoUtil.pageX(fromNode) + fromNode.offsetWidth;
+ var fromNodeTop = topoUtil.pageY(fromNode);
+
+ var toNodeLeft = topoUtil.pageX(toNode);
+ var toNodeRight = topoUtil.pageX(toNode) + toNode.offsetWidth;
+ var toNodeTop = topoUtil.pageY(toNode);
+
+ var coord = '';
+ if(fromNodeTop == toNodeTop) {
+ if(fromNodeLeft < toNodeLeft) {
+ coord = "M"+fromNodeRight+","+(fromNodeTop+horizontalOffset+fromNodeOffset)
+ +" L"+toNodeLeft+","+(fromNodeTop+horizontalOffset+fromNodeOffset)
+ } else {
+ coord = "M"+fromNodeLeft+","+(fromNodeTop+horizontalOffset+fromNodeOffset)
+ +" L"+toNodeRight+","+(fromNodeTop+horizontalOffset+fromNodeOffset);
+ }
+ } else {
+ var nodeRight = maxNodeParentRight + xLineOffset;
+ coord = "M"+fromNodeRight+","+(fromNodeTop+horizontalOffset+fromNodeOffset)
+ +" L"+nodeRight+","+(fromNodeTop+horizontalOffset+fromNodeOffset)
+ +" L"+nodeRight+","+(toNodeTop+toNodeOffset)
+ +" L"+toNodeRight+","+(toNodeTop+toNodeOffset);
+ }
+ vduPath +='<path d="'+coord+'" marker-end="url(#arrowhead)" fill="none" stroke-dasharray="5,5" stroke="#7A7A7A" stroke-width="3px" shape-rendering="geometricPrecision"></path>';
+ }
+ }
+
+ //virtuallinksto
+ if(topoUtil.topoDatas[i].virtuallinksto !=""){
+ var fromNode = document.getElementById(topoUtil.topoDatas[i].id);
+ var toArray = topoUtil.topoDatas[i].virtuallinksto.split(",");
+ for (var j=0;j<toArray.length;j++) {
+ var toNode = document.getElementById(toArray[j]);
+ if(toNode) {
+ var yLineOffset = topoUtil.getLineOffset(j);
+ var xLineOffset = topoUtil.getLineOffset(++vlIndex);
+
+ var fromNodeLeft = topoUtil.pageX(fromNode);
+ var fromNodeTop = topoUtil.pageY(fromNode);
+
+ var toNodeRight = topoUtil.pageX(toNode) + toNode.offsetWidth;
+ var toNodeTop = topoUtil.pageY(toNode);
+
+ var coord = "";
+ if(fromNodeTop == toNodeTop) {
+ coord = "M"+fromNodeLeft+","+(fromNodeTop+fromNode.clientHeight/2+xLineOffset)
+ +" L"+toNodeRight+","+(fromNodeTop+fromNode.clientHeight/2+xLineOffset);
+ } else {
+ coord = "M"+fromNodeLeft+","+(fromNodeTop+fromNode.clientHeight/2+yLineOffset)
+ +" L"+toNodeRight+","+(fromNodeTop+fromNode.clientHeight/2+yLineOffset);
+ }
+ vlPath +='<path d="'+coord+'" fill="none" stroke="'+toNode.style.backgroundColor+'" stroke-width="4px"></path>';
+ }
+ }
+ }
+ }
+
+ $("#svg_vdu g").html(vduPath);
+ $("#svg_vl g").html(vlPath);
+}
+
+/**
+ * generate node table data
+ * @param {[type]} data [description]
+ * @return {[type]} [description]
+ */
+topoUtil.generateNodeTemplate = function(data) {
+ var nodeTemplate = {};
+ nodeTemplate.id = data.id;
+ nodeTemplate.name = data.name;
+ nodeTemplate.type = data.type;
+ nodeTemplate.parentType = data.parentType;
+ nodeTemplate.vnfdid = ""; //only nested VNF node has value
+ nodeTemplate.properties = data.properties;
+ nodeTemplate.flavors = data.flavors;
+ nodeTemplate.containIn = ""; //containIn relation which the front-end custom is used to display the topo relations of the graph
+ nodeTemplate.containedin = ""; //the relation between VNF and VNFC
+ nodeTemplate.deployedon = ""; //the relation between VDU and VNFC
+ nodeTemplate.connectedto = ""; //the relation between VNFC and VNFC
+ nodeTemplate.virtuallinksto = ""; //the relation between VL and CP or between VL and VDU
+ nodeTemplate.virtualbindsto = ""; //the relation between CP and VDU
+ nodeTemplate.outLinks = []; //a collection of connected nodes connectedto
+ nodeTemplate.inLinks = []; //nodes are connected connectedto relationship collection
+ nodeTemplate.currentLinkNum = 0;
+ var relationShips = data.relationShips || []; //some nodes may not have relationships
+ $.each(relationShips, function(index, obj){
+ if (obj.sourceNodeId == data.id) {
+ switch(obj.type) {
+ case "containedIn" :
+ case "tosca.relationships.nfv.ContainedIn" :
+ case "tosca.relationships.nfv.BelongTo" :
+ nodeTemplate.containedin = obj.targetNodeId;
+ break;
+ case "deployedOn" :
+ case "tosca.relationships.nfv.DeployedOn" :
+ nodeTemplate.deployedon = obj.targetNodeId;
+ break;
+ case "connectedTo" :
+ case "tosca.relationships.nfv.ConnectsTo" :
+ nodeTemplate.connectedto += "," + obj.targetNodeId;
+ nodeTemplate.outLinks.push(obj.targetNodeId);
+ break;
+ case "virtualLinksTo" :
+ case "tosca.relationships.nfv.VirtualLinksTo" :
+ nodeTemplate.virtuallinksto += "," + obj.targetNodeId;
+ break;
+ case "virtualBindsTo" :
+ case "tosca.relationships.nfv.VirtualBindsTo" :
+ nodeTemplate.virtualbindsto += "," + obj.targetNodeId;
+ break;
+ }
+ }
+ if (obj.targetNodeId == data.id) {
+ switch(obj.type) {
+ case "connectedTo" :
+ case "tosca.relationships.nfv.ConnectsTo" :
+ nodeTemplate.inLinks.push(obj.sourceNodeId);
+ break;
+ }
+ }
+ });
+ nodeTemplate.connectedto = nodeTemplate.connectedto.substring(1);
+ nodeTemplate.virtuallinksto = nodeTemplate.virtuallinksto.substring(1);
+ nodeTemplate.virtualbindsto = nodeTemplate.virtualbindsto.substring(1);
+
+ if(topoUtil.isVNFType(data.type)) {
+ $.each(data.properties, function(key, value) {
+ if(key == "vnfdid" && value) {
+ nodeTemplate.vnfdid = value;
+ }
+ });
+ }
+ return nodeTemplate;
+}
+
+/**
+ * generate topology data
+ * deployedon is used to display the relation between VNFC and VDU
+ * containedin is used to display the relation between VNFC and VNF
+ * transform relations between VDU and VNF, containIn is used to display the relation between VDU and VNF
+ * @param {[type]} data [description]
+ * @return {[type]} [description]
+ */
+topoUtil.generateTopoTemplate = function(data) {
+ for(var i=0;i<data.length;i++) {
+ if(data[i].containedin){
+ //assignment is designed to compatible with no VDU, only VNF and VNFC situations
+ data[i].containIn = data[i].containedin;
+ for(var j=0;j<data.length;j++) {
+ if(data[i].deployedon == data[j].id) {
+ data[j].containIn = data[i].containedin;
+ break;
+ }
+ }
+ }
+ //the relationship between VNFC and VDU deployedon replace with containIn
+ if(data[i].deployedon){
+ data[i].containIn = data[i].deployedon;
+ }
+ }
+ return data;
+}
+
+/**
+ * generate nodetemplate detail
+ * @param {[type]} data [description]
+ * @return {[type]} [description]
+ */
+topoUtil.generateNodeTemplateDetail = function(data) {
+ var nodeTemplateDetail = {};
+ nodeTemplateDetail.properties = [];
+ var properties = data.properties;
+ for(var key in properties) {
+ var property = {};
+ property.key = key;
+ property.value = properties[key];
+ nodeTemplateDetail.properties.push(property);
+ }
+ //add flavor to nodetempalte properties
+ var flavors = data.flavors;
+ if(flavors && flavors.length) {
+ var flavor = flavors[0];
+ for(var key in flavor) {
+ var property = {};
+ property.key = key;
+ property.value = flavor[key];
+ nodeTemplateDetail.properties.push(property);
+ }
+ }
+
+ nodeTemplateDetail.relationShips = data.relationShips;
+
+ nodeTemplateDetail.general = [];
+ var general = {};
+ general.key = "name";
+ general.value = data.name;
+ nodeTemplateDetail.general.push(general);
+ var general = {};
+ general.key = "type";
+ general.value = data.type;
+ nodeTemplateDetail.general.push(general);
+
+ return nodeTemplateDetail;
+}
+
+topoUtil.getCurrentDetailData = function(detailDatas, nodetemplateid) {
+ var data;
+ for(var i=0; i<detailDatas.length; i++) {
+ if (detailDatas[i].id == nodetemplateid) {
+ data = topoUtil.generateNodeTemplateDetail(detailDatas[i]);
+ break;
+ }
+ }
+ return data;
+}
+
+/**
+ * generate node instance detail
+ * a node template may correspond to multiple node instances, their properties are not the same
+ * @param {[type]} data [description]
+ * @return {[type]} [description]
+ */
+topoUtil.generateNodeInstanceDetail = function(data) {
+ var nodeInstanceDetail = [];
+ nodeInstanceDetail.properties = [];
+ nodeInstanceDetail.general = [];
+
+ var properties = data.properties;
+ for(var i=0;i<properties.length;i++) {
+ var nodeDetail = {};
+ var name = data.name;
+ for(var key in properties[i]) {
+ var property = {};
+ property.key = key;
+ property.value = properties[i][key];
+ nodeDetail.properties.push(property);
+
+ if(key == "name") {
+ name = properties[i][key];
+ }
+ }
+ var general = {};
+ general.key = "name";
+ general.value = name;
+ nodeDetail.general.push(general);
+ var general = {};
+ general.key = "type";
+ general.value = data.type;
+ nodeDetail.general.push(general);
+
+ nodeDetail.relationShips = data.relationShips;
+ nodeInstanceDetail.push(nodeDetail);
+ }
+ return nodeInstanceDetail;
+}
+
+topoUtil.getCurrentNodeInstanceDetail = function(detailDatas, nodetemplateid) {
+ var data;
+ for(var i=0; i<detailDatas.length; i++) {
+ if (detailDatas[i].id == nodetemplateid) {
+ data = topoUtil.generateNodeInstanceDetail(detailDatas[i]);
+ break;
+ }
+ }
+ return data;
+}
+
+topoUtil.getCidr = function(properties) {
+ for(var key in properties) {
+ if(key == "cidr") {
+ return properties[key];
+ }
+ }
+}
+
+topoUtil.getColor = function(index) {
+ var colors = ['#1F77B4','#FF7F0E','#2CA02C','#D62728','#9467BD','#8C564B','#4b6c8b','#550000','#dc322f','#FF6600'];
+ return colors[index%10];
+}
+
+topoUtil.getCpTop = function(index, parentBoxId) {
+ var newTop = "";
+ var height = 0;
+ if(index == 0) {
+ var circle_top = $(".circle").css("top");
+ var circle_height = $(".circle").css("height");
+ var top = circle_top.substring(0, circle_top.length-2) - 0;
+ height = circle_height.substring(0, circle_height.length-2) - 0;
+ newTop = (top+height+10);
+ } else {
+ var circle_top = $(".smallCircle").css("top");
+ var circle_height = $(".smallCircle").css("height");
+ var top = circle_top.substring(0, circle_top.length-2) - 0;
+ height = circle_height.substring(0, circle_height.length-2) - 0;
+ newTop = (top+height*(index));
+ }
+ //if the length of cp over the box which cp is virtualbindsto, set the box min-heght attribute
+ var $box = $("#" + parentBoxId);
+ var min_height = $box.css("min-height");
+ var box_min_height = min_height.substring(0, min_height.length-2) - 0;
+ var cp_height = newTop + height;
+ if(cp_height > box_min_height) {
+ $box.css("min-height", cp_height);
+ }
+
+ return newTop + "px";
+}
+
+topoUtil.isVNFType = function(type) {
+ if((type.toUpperCase().indexOf(".VNF") > -1) && (type.toUpperCase().indexOf(".VNFC") < 0)) {
+ return true;
+ }
+ return false;
+}
\ 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 index 00000000..cbc6528c --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/template.html @@ -0,0 +1,71 @@ +<!--
+
+ 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.
+
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <head lang="en">
+ <meta charset="UTF-8">
+ <title></title>
+ <link href="../component/thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
+ <link href="../component/thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
+ <link href="../component/thirdparty/uniform/css/uniform.default.min.css" rel="stylesheet" />
+ <link href="../component/css/ZteIctIcons/style.css" rel="stylesheet"/>
+ <link href="../framework/css/ngict-component.css" rel="stylesheet"/>
+ <link href="../framework/css/plugins.css" rel="stylesheet"/>
+ <link href="css/template.css" rel="stylesheet" />
+ <style type="text/css">
+ .ms-controller {
+ visibility: hidden;
+ }
+ .btnTemp {
+ min-width: 30px;
+ letter-spacing: 0px;
+ }
+ </style>
+</head>
+<body>
+ <div ms-controller="tmController" class="container-fluid ms-controller">
+ <div class="row">
+ <div class="col-xs-6 col-md-6 col-sm-6 col-lg-6 titlefont">
+ <span id="nfv-template-iui-title" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </div>
+ </div>
+ <div class="separator-line"></div>
+ <div class="row-fluid" data-name="table_zone">
+ <div id='ict_template_table_div'></div>
+ </div>
+ </div>
+
+ <script type="text/javascript" src="../component/thirdparty/jquery/jquery-1.10.2.min.js"></script>
+ <script type="text/javascript" src="../component/thirdparty/bootstrap/js/bootstrap.min.js"></script>
+ <script type="text/javascript" src="../component/thirdparty/bootbox/bootbox.min.js"></script>
+ <script type="text/javascript" src="../component/thirdparty/data-tables/jquery.dataTables.min.js"></script>
+ <script type="text/javascript" src="../component/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>
+
+ <script type="text/javascript" src="../vendor/avalon/avalon.modern.js"></script>
+
+ <script type="text/javascript" src="../framework/js/tools.js"></script>
+
+ <script type="text/javascript" src="js/component/commonUtil.js"></script>
+ <script type="text/javascript" src="js/component/serverPageTable.js"></script>
+ <script type="text/javascript" src="js/component/loadi18n_nsoc.js"></script>
+
+ <script type="text/javascript" src="js/template/tmUtil.js"></script>
+ <script type="text/javascript" src="js/template/tmController.js"></script>
+</body>
+</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 index 00000000..8937d3b1 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/templateDetail.html @@ -0,0 +1,129 @@ +<!--
+
+ 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.
+
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <head lang="en">
+ <meta charset="UTF-8">
+ <title></title>
+ <link href="../component/thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
+ <link href="../component/thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
+ <link href="../component/thirdparty/uniform/css/uniform.default.min.css" rel="stylesheet" />
+ <link href="../component/css/ZteIctIcons/style.css" rel="stylesheet"/>
+ <link href="../framework/css/ngict-component.css" rel="stylesheet"/>
+ <link href="../framework/css/plugins.css" rel="stylesheet"/>
+ <link href="css/platform/animate.min.css" rel="stylesheet"/>
+ <link href="css/datatable-sort.css" rel="stylesheet"/>
+ <link href="css/templateDetail.css" rel="stylesheet" />
+ <link href="css/topology.css" rel="stylesheet" />
+ <style type="text/css">
+ .ms-controller {
+ visibility: hidden;
+ }
+ .ms-nodedetail {
+ display: none;
+ }
+ </style>
+</head>
+<body>
+ <div ms-controller="tmDetailController" class="container-fluid ms-controller">
+ <div data-name="tab_zone">
+ <div class="col-xs-12">
+ <ul class="nav nav-tabs" ms-each-tab="templateData" id="tab">
+ <li ms-class-active="tab.value">
+ <a ms-attr-href="tab.href" ms-text="tab.name" data-toggle="tab"></a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="tab-content">
+ <div class="tab-pane active" id="topology">
+ <div class="row" style=" margin-top: 50px;">
+ <div class="col-xs-12 col-md-12 col-sm-12 col-lg-12 titlefont">
+ <button ms-visible="topologyTab.returnBtnVisible" class="btn white iconBtn"
+ ms-click="topologyTab.$returnNS" ms-attr-title="topologyTab.btnTip">
+ <i class="fa fa-arrow-left"></i>
+ </button>
+ </div>
+ </div>
+ <div ms-include-src="topologyTab.topology"></div>
+ </div>
+ <div class="tab-pane" id="nodes">
+ <div class="row-fluid" data-name="table_zone">
+ <div class="col-xs-12" id='ict_nodes_template_table_div'></div>
+ </div>
+ </div>
+ </div>
+
+ <div id="right-menu" class="ms-nodedetail" ms-css-display="nodesTab.nodesDetail.isShow">
+ <div>
+ <div class="title"><h4>{{nodesTab.nodesDetail.detailTitle}}</h4>
+ <div class="rigth right-button-pointer" ms-click="nodesTab.nodesDetail.$showDetails('none')">
+ <button type="button" class="btn btn-default">
+ <span id="nfv-templateDetail-nodesTab-iui-btn-close" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </button>
+ </div>
+ </div>
+ <div>
+ <div class="btn-group" >
+ <button type="button" class="btn btn-default" ms-repeat="nodesTab.nodesDetail.detailData" ms-click="nodesTab.nodesDetail.detailCondChange($index)" ms-attr-id="el.id"
+ ms-class="active: el.isActive">{{el.name}}
+ </button>
+ </div>
+ <div ms-if="nodesTab.nodesDetail.detailIndex === 0">
+ <div class="row-fluid" data-name="table_zone">
+ <div id='ict_table_general_div' class="nodesDetail"></div>
+ </div>
+ </div>
+ <div ms-if="nodesTab.nodesDetail.detailIndex === 1">
+ <div class="row-fluid" data-name="table_zone">
+ <div id='ict_table_properties_div' class="nodesDetail"></div>
+ </div>
+ </div>
+ <div ms-if="nodesTab.nodesDetail.detailIndex === 2">
+ <div class="row-fluid" data-name="table_zone">
+ <div id='ict_table_relationShips_div' class="nodesDetail"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <script type="text/javascript" src="../component/thirdparty/jquery/jquery-1.10.2.min.js"></script>
+ <script type="text/javascript" src="../component/thirdparty/bootstrap/js/bootstrap.min.js"></script>
+ <script type="text/javascript" src="../component/thirdparty/data-tables/jquery.dataTables.js"></script>
+ <script type="text/javascript" src="../component/thirdparty/data-tables/jquery.dataTables.min.js"></script>
+ <script type="text/javascript" src="../component/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>
+
+ <script type="text/javascript" src="../vendor/bootstrap-growl/bootstrap-growl.min.js"></script>
+ <script type="text/javascript" src="../vendor/avalon/avalon.modern.js"></script>
+
+ <script type="text/javascript" src="../framework/js/tools.js"></script>
+
+ <script type="text/javascript" src="js/component/commonUtil.js"></script>
+ <script type="text/javascript" src="js/component/serverPageTable.js"></script>
+ <script type="text/javascript" src="js/component/loadi18n_nsoc.js"></script>
+
+ <script type="text/javascript" src="js/template/tmDetailUtil.js"></script>
+ <script type="text/javascript" src="js/template/tmUtil.js"></script>
+ <script type="text/javascript" src="js/template/tmDetailController.js"></script>
+ <script type="text/javascript" src="js/template/topoUtil.js"></script>
+
+</body>
+</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 index 00000000..661ae238 --- /dev/null +++ b/openo-portal/portal-catalog/src/main/webapp/catalog/topology.html @@ -0,0 +1,122 @@ +<!--
+
+ 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.
+
+-->
+<div class="container-fluid">
+ <div id="networks" style="float:left;display:inline-block">
+ <div class="networksContainer">
+ <div class="network" ms-repeat-network="topologyTab.networkTopoDatas">
+ <div class="name" tooltip="" ms-attr-title="network.name" ms-if="network.name"
+ ms-click="topologyTab.$showTopo(network.id, network.name)">
+ <div ms-if="topologyTab.isShowNum" ms-text="network.num" class="badge">0</div>
+ <span>{{network.name}}</span>
+ </div>
+ <div class="subnet" ms-repeat-subnet="network.subnets">
+ <div class="line">
+ <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)">
+ <div ms-if="topologyTab.isShowNum" ms-text="subnet.num" class="badge">0</div>
+ <p>{{subnet.name}}</p>
+ <p class="cidr" ms-text="topologyTab.$getCidr(subnet.properties)"></p>
+ </div>
+ </div>
+ </div><!--end repeat network.subnets-->
+ </div><!--end repeat topologyTab.networkTopoDatas-->
+ </div>
+ </div>
+ <div id="topo" style="float:left;display:inline-block">
+ <div class="row-fluid" data-name="topo_zone">
+ <div class="bpContainer" ms-each-host="topologyTab.boxTopoDatas">
+ <div>
+ <div class="box" ms-attr-id="host.id">
+ <div class="piProgress" size="55">
+ <div class="circle">
+ <i class="gs-node-icon fa fa-desktop" ></i>
+ <div ms-if="topologyTab.isShowNum" ms-text="host.num" class="badge">1</div>
+ </div>
+ <div class="smallCircle" ms-repeat-cp="host.cp" ms-attr-id="cp.id" ms-title="cp.name"
+ ms-click="topologyTab.$showTopo(cp.id,cp.name)" ms-css-top="topologyTab.$getCpTop($index,host.id)">
+ <i class="gs-cp-icon fa fa-credit-card" ></i>
+ </div>
+ </div>
+ <div class="head" ms-hover="boxHover" tooltip ms-attr-title="host.name" ms-text="host.name" ms-click="topologyTab.$showTopo(host.id, host.name)">
+ </div>
+ <div class="holder">
+ <div class="nest" ms-if="host.vnfdid" ms-click="topologyTab.$showVnfTopo(host.vnfdid)"
+ ms-attr-title="topologyTab.vnfTip"><!-- only display nested ns template -->
+ <div class="plus">
+ <i class="fa fa-plus" style="color: #3aaeda;"></i>
+ </div>
+ </div>
+ <div ms-each-box="host.children" ><!-- ngRepeat: node in map track by node.name -->
+ <div>
+ <div class="box" ms-attr-id="box.id">
+ <div class="piProgress" size="55">
+ <div class="circle">
+ <i class="gs-node-icon fa fa-cogs"></i>
+ <div ms-if="topologyTab.isShowNum" ms-text="box.num" class="badge">1</div>
+ </div>
+ <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)">
+ <i class="gs-cp-icon fa fa-credit-card" ></i>
+ </div>
+ </div>
+ <div class="head" ms-hover="boxHover"
+ tooltip="" ms-click="topologyTab.$showTopo(box.id, box.name)" ms-attr-title="box.name" ms-text="box.name"></div>
+ <div class="holder" >
+ <div ms-each-app="box.children">
+ <!-- ngRepeat: node in map track by node.name -->
+ <div>
+ <div class="app" ms-attr-id="app.id" ms-click="topologyTab.$showTopo(app.id, app.name)" ms-hover="appHover">
+ <div class="piProgress" size="55">
+ <div class="circle" >
+ <i class="gs-node-icon fa fa-cog" ></i>
+ <div ms-if="topologyTab.isShowNum" ms-text="app.num" class="badge">1</div>
+ </div>
+ </div>
+ <p tooltip="" ms-attr-id="app.id" ms-attr-title="app.name" ms-text="app.name"></p>
+ </div>
+ </div>
+ <!-- end ngRepeat: node in map track by node.name -->
+ </div>
+ </div><!-- end ngIf: node.isApp == false -->
+ </div><!-- end ngRepeat: node in map track by node.name -->
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div>
+ <div class="coordinates">
+ <svg id="svg_vl" width="100%" height="100%" fill="silver">
+ <g transform="translate(0, 0)" >
+ </g>
+ </svg>
+ </div>
+ <div class="coordinates" style="z-index:3;">
+ <svg id="svg_vdu" width="100%" height="100%" fill="silver">
+ <g transform="translate(0, 0)" >
+ </g>
+ <defs>
+ <marker id="arrowhead" viewBox="0 0 20 20" refX="16" refY="10" markerUnits="userSpaceOnUse" markerWidth="16" markerHeight="12" orient="auto" fill="#7A7A7A">
+ <path d="M 0 0 L 20 10 L 0 20 z"></path>
+ </marker>
+ </defs>
+ </svg>
+ </div>
+ </div>
+</div>
\ No newline at end of file |
