diff options
| author |   j00302280 <j00101220@huawei.com> | 2016-08-15 15:10:41 +0800 |
|---|---|---|
| committer | j00302280 <j00101220@huawei.com> | 2016-08-15 15:10:41 +0800 |
| commit | 86aeea2edb0dac0e049ec75ab6616e8d19e16e22 (patch) | |
| tree | 9cc5c815ad440e96cd31021a9f19b1df090f8570 /nsoc-iui | |
| parent | 8c940f2ab540e62c139498c16596bd306eac60b4 (diff) | |
upload the gso gui seed code
Change-Id: I7b91cadaf817d2c92280f9ff702a7ca679fa41eb
Signed-off-by: j00302280 <j00101220@huawei.com>
Diffstat (limited to 'nsoc-iui')
57 files changed, 10542 insertions, 0 deletions
diff --git a/nsoc-iui/pom.xml b/nsoc-iui/pom.xml new file mode 100644 index 00000000..a34ec340 --- /dev/null +++ b/nsoc-iui/pom.xml @@ -0,0 +1,31 @@ +<?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.orchestrator.openoiui</groupId>
+ <artifactId>openoiui-parent</artifactId>
+ <version>0.0.1-SNAPSHOT</version>
+ </parent>
+ <groupId>org.openo.orchestrator.openoiui</groupId>
+ <artifactId>nsoc-iui</artifactId>
+ <packaging>jar</packaging>
+ <name>openo/openoiui/nsoc-iui</name>
+ <description>Open-O nsoc-iui</description>
+</project>
diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/csarPackage.html b/nsoc-iui/src/main/resources/webroot/nsoc/csarPackage.html new file mode 100644 index 00000000..dff2a80a --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/csarPackage.html @@ -0,0 +1,116 @@ +<!--
+
+ 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 type="text/css">
+ .ms-controller {
+ visibility: hidden;
+ }
+ </style>
+</head>
+<body>
+ <div ms-controller="pmController" class="container-fluid ms-controller">
+ <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="upload-top htmleaf-container">
+ <div class="container kv-main upload">
+ <form id="uploadPackage">
+ <div class="form-group">
+ <input id="csarFile" type="file" name="file" class="file"/>
+ </div>
+ <div id="fileError" class="help-block"></div>
+ </form>
+ </div>
+ </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 class="row-fluid" data-name="table_zone">
+ <div id='ict_package_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/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="../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/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/nsoc-iui/src/main/resources/webroot/nsoc/css/datatable-sort.css b/nsoc-iui/src/main/resources/webroot/nsoc/css/datatable-sort.css new file mode 100644 index 00000000..18da5d3b --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/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('../images/sort_both.png') no-repeat center right; }
+table.table thead .sorting_asc { background: url('../images/sort_asc.png') no-repeat center right; }
+table.table thead .sorting_desc { background: url('../images/sort_desc.png') no-repeat center right; }
+
+table.table thead .sorting_asc_disabled { background: url('../images/sort_asc_disabled.png') no-repeat center right; }
+table.table thead .sorting_desc_disabled { background: url('../images/sort_desc_disabled.png') no-repeat center right; }
\ No newline at end of file diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/css/fileupload.css b/nsoc-iui/src/main/resources/webroot/nsoc/css/fileupload.css new file mode 100644 index 00000000..220b5172 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/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/nsoc-iui/src/main/resources/webroot/nsoc/css/hostMirror.css b/nsoc-iui/src/main/resources/webroot/nsoc/css/hostMirror.css new file mode 100644 index 00000000..b637e66d --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/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('../images/details_open.png') no-repeat center center;
+ cursor: pointer;
+}
+
+tr.shown td.details-control {
+ background: url('../images/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/nsoc-iui/src/main/resources/webroot/nsoc/css/package.css b/nsoc-iui/src/main/resources/webroot/nsoc/css/package.css new file mode 100644 index 00000000..e6be6b36 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/css/package.css @@ -0,0 +1,415 @@ +/**
+ * 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('../images/details_open.png') no-repeat center center;
+ cursor: pointer;
+}
+
+tr.shown td.details-control {
+ background: url('../images/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
+}
\ No newline at end of file diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/css/platform/animate.min.css b/nsoc-iui/src/main/resources/webroot/nsoc/css/platform/animate.min.css new file mode 100644 index 00000000..b007c1b9 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/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/nsoc-iui/src/main/resources/webroot/nsoc/css/platform/skill.css b/nsoc-iui/src/main/resources/webroot/nsoc/css/platform/skill.css new file mode 100644 index 00000000..6e452b2a --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/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/nsoc-iui/src/main/resources/webroot/nsoc/css/software.css b/nsoc-iui/src/main/resources/webroot/nsoc/css/software.css new file mode 100644 index 00000000..491a9d93 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/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('../images/details_open.png') no-repeat center center;
+ cursor: pointer;
+}
+
+tr.shown td.details-control {
+ background: url('../images/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/nsoc-iui/src/main/resources/webroot/nsoc/css/template.css b/nsoc-iui/src/main/resources/webroot/nsoc/css/template.css new file mode 100644 index 00000000..1de221a7 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/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('../images/details_open.png') no-repeat center center;
+ cursor: pointer;
+}
+
+tr.shown td.details-control {
+ background: url('../images/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/nsoc-iui/src/main/resources/webroot/nsoc/css/templateDetail.css b/nsoc-iui/src/main/resources/webroot/nsoc/css/templateDetail.css new file mode 100644 index 00000000..3eb721e6 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/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('../images/details_open.png') no-repeat center center;
+ cursor: pointer;
+}
+
+tr.shown td.details-control {
+ background: url('../images/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/nsoc-iui/src/main/resources/webroot/nsoc/css/topology.css b/nsoc-iui/src/main/resources/webroot/nsoc/css/topology.css new file mode 100644 index 00000000..a4e1d3dd --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/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/nsoc-iui/src/main/resources/webroot/nsoc/css/virtualApplication.css b/nsoc-iui/src/main/resources/webroot/nsoc/css/virtualApplication.css new file mode 100644 index 00000000..0458cc3d --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/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('../images/details_open.png') no-repeat center center;
+ cursor: pointer;
+}
+
+tr.shown td.details-control {
+ background: url('../images/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/nsoc-iui/src/main/resources/webroot/nsoc/css/vnfm.css b/nsoc-iui/src/main/resources/webroot/nsoc/css/vnfm.css new file mode 100644 index 00000000..c4b588b4 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/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('../images/details_open.png') no-repeat center center;
+ cursor: pointer;
+}
+
+tr.shown td.details-control {
+ background: url('../images/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/nsoc-iui/src/main/resources/webroot/nsoc/hostMirror.html b/nsoc-iui/src/main/resources/webroot/nsoc/hostMirror.html new file mode 100644 index 00000000..29503035 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/hostMirror.html @@ -0,0 +1,176 @@ +<!--
+
+ 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/hostMirror.css" rel="stylesheet" />
+ <style type="text/css">
+ .ms-controller {
+ visibility: hidden;
+ }
+ </style>
+</head>
+<body>
+ <div ms-controller="hmController" 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-host-iui-title" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </div>
+ </div>
+ <div class="separator-line"></div>
+ <div class="uploadBtn">
+ <button class="btn white radius_l" ms-click="uploadHostImage.$showUploadImage"><i class="ict-new"></i> <span id="nfv-host-iui-text-uploadImage" name_i18n="com_zte_nfv_nsoc_i18n"></span></button>
+ </div>
+ <div class="row-fluid" data-name="table_zone">
+ <div id='ict_host_table_div'></div>
+ </div>
+
+ <div id="uploadImage" 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-host-iui-text-title" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </h4>
+ </div>
+ <div class="modal-body">
+ <form class="form-horizontal" role="form" id="hostForm">
+ <div class="btn-center">
+ <div class="btn-group" data-toggle="buttons">
+ <label class="btn white" ms-class="blueactive: uploadHostImage.localVisible"
+ ms-click="uploadHostImage.$showLocalOrUrl('local')">
+ <input type="radio" name="options" id="option1"><span id="nfv-host-iui-text-local" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </label>
+ <label class="btn white" ms-class="blueactive: !uploadHostImage.localVisible"
+ ms-click="uploadHostImage.$showLocalOrUrl('url')">
+ <input type="radio" name="options" id="option2"><span id="nfv-host-iui-text-url" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </label>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-3 control-label" ms-visible="uploadHostImage.localVisible">
+ <span id="nfv-host-iui-text-image" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ <span class="required" aria-required="true">*</span>
+ </label>
+ <div class="col-sm-8" ms-visible="uploadHostImage.localVisible">
+ <!--<input id="hostfile" type="file" name="file" class="file"/>-->
+ <div class="input-group fileupload-input">
+ <div id="fileName" class="form-control file-input"
+ style="height: 34px !important;overflow-x: auto;"></div>
+ <span class="input-group-btn">
+ <span class="btn blue1 fileinput-button">
+ <span id="nfv-software-iui-text-image-select" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ <input type="file" name="file" multiple>
+ </span>
+ </span>
+ </div><!-- input-group -->
+ </div>
+ <label class="col-sm-3 control-label" ms-visible="!uploadHostImage.localVisible">
+ <span id="nfv-host-iui-text-imageurl" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ <span class="required" aria-required="true">*</span>
+ </label>
+ <div class="col-sm-8" ms-visible="!uploadHostImage.localVisible">
+ <input id="hosturl" name="hosturl" class="form-control" type="text" />
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-3 control-label">
+ <span id="nfv-host-iui-text-name" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ <span class="required" aria-required="true">*</span>
+ </label>
+ <div class="col-sm-8">
+ <input class="form-control" type="text" id="hostName" name="hostName" />
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-3 control-label">VIM<span class="required" aria-required="true">*</span></label>
+ <div class="col-sm-8">
+ <select class="form-control" id="vim" name="vim" ms-change="uploadHostImage.$changeEvent">
+ <option ms-repeat="uploadHostImage.vimSelectItems" ms-attr-value="$index"
+ data-repeat-rendered="initTenant">{{el.name}}</option>
+ </select>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-3 control-label">
+ <span id="nfv-host-iui-text-tenant" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </label>
+ <div class="col-sm-8">
+ <input class="form-control" type="text" disabled="true" id="tenant" name="tenant" />
+ </div>
+ </div>
+ </form>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn" data-dismiss="modal">
+ <span id="nfv-host-iui-btn-cancel" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </button>
+ <button type="button" class="btn btn-primary" id="uploadBtn">
+ <span id="nfv-host-iui-btn-upload" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!--
+ <div ms-visible="uploadHostImage.progressVisible" class="process-modal">
+ <div class="process-content">
+ <img src='../framework/img/loading-spinner-grey.gif'/>
+ <div><span ms-text="uploadHostImage.progress"></span></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="../component/thirdparty/jquery-validation/js/jquery.validate.min.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="../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/hostMirror/host-validate.js"></script>
+ <script type="text/javascript" src="js/hostMirror/hmUtil.js"></script>
+ <script type="text/javascript" src="js/hostMirror/hmController.js"></script>
+</body>
+</html>
\ No newline at end of file diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/i18n/nfv-nso-iui-i18n-en-US.properties b/nsoc-iui/src/main/resources/webroot/nsoc/i18n/nfv-nso-iui-i18n-en-US.properties new file mode 100644 index 00000000..77d757c4 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/i18n/nfv-nso-iui-i18n-en-US.properties @@ -0,0 +1,316 @@ +#
+# 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-name=Name
+nfv-package-iui-field-type=Type
+nfv-package-iui-field-size=Size
+nfv-package-iui-field-createTime=Create Time
+nfv-package-iui-field-status=Status
+nfv-package-iui-field-operation=Operation
+
+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-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-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-templatename=Name
+nfv-template-iui-field-producttype=Type
+nfv-template-iui-field-vendor=Vendor
+nfv-template-iui-field-version=Version
+nfv-template-iui-field-flavor=Flavor
+
+//template detail table colums
+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-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/nsoc-iui/src/main/resources/webroot/nsoc/i18n/nfv-nso-iui-i18n-zh-CN.properties b/nsoc-iui/src/main/resources/webroot/nsoc/i18n/nfv-nso-iui-i18n-zh-CN.properties new file mode 100644 index 00000000..961f7e60 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/i18n/nfv-nso-iui-i18n-zh-CN.properties @@ -0,0 +1,316 @@ +#
+# 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-name=名称
+nfv-package-iui-field-type=类型
+nfv-package-iui-field-size=大小
+nfv-package-iui-field-createTime=创建时间
+nfv-package-iui-field-status=状态
+nfv-package-iui-field-operation=操作
+
+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-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-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-templatename=名称
+nfv-template-iui-field-producttype=类型
+nfv-template-iui-field-vendor=厂商
+nfv-template-iui-field-version=版本
+nfv-template-iui-field-flavor=规格
+
+//模板明细表格字段名称定义
+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-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/nsoc-iui/src/main/resources/webroot/nsoc/images/down.png b/nsoc-iui/src/main/resources/webroot/nsoc/images/down.png Binary files differnew file mode 100644 index 00000000..f7732ba8 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/images/down.png diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/images/pointes_blue.png b/nsoc-iui/src/main/resources/webroot/nsoc/images/pointes_blue.png Binary files differnew file mode 100644 index 00000000..cdba2dfc --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/images/pointes_blue.png diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/images/pointes_green.png b/nsoc-iui/src/main/resources/webroot/nsoc/images/pointes_green.png Binary files differnew file mode 100644 index 00000000..18ba67ed --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/images/pointes_green.png diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/images/sort_asc.png b/nsoc-iui/src/main/resources/webroot/nsoc/images/sort_asc.png Binary files differnew file mode 100644 index 00000000..a88d7975 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/images/sort_asc.png diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/images/sort_asc_disabled.png b/nsoc-iui/src/main/resources/webroot/nsoc/images/sort_asc_disabled.png Binary files differnew file mode 100644 index 00000000..fb11dfe2 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/images/sort_asc_disabled.png diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/images/sort_both.png b/nsoc-iui/src/main/resources/webroot/nsoc/images/sort_both.png Binary files differnew file mode 100644 index 00000000..18670406 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/images/sort_both.png diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/images/sort_desc.png b/nsoc-iui/src/main/resources/webroot/nsoc/images/sort_desc.png Binary files differnew file mode 100644 index 00000000..def071ed --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/images/sort_desc.png diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/images/sort_desc_disabled.png b/nsoc-iui/src/main/resources/webroot/nsoc/images/sort_desc_disabled.png Binary files differnew file mode 100644 index 00000000..c9fdd8a1 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/images/sort_desc_disabled.png diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/images/up.png b/nsoc-iui/src/main/resources/webroot/nsoc/images/up.png Binary files differnew file mode 100644 index 00000000..8bd53741 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/images/up.png diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/js/component/commonUtil.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/component/commonUtil.js new file mode 100644 index 00000000..abc4cd63 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/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/nsoc-iui/src/main/resources/webroot/nsoc/js/component/loadi18n_nsoc.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/component/loadi18n_nsoc.js new file mode 100644 index 00000000..c809aa26 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/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/nsoc-iui/src/main/resources/webroot/nsoc/js/component/serverPageTable.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/component/serverPageTable.js new file mode 100644 index 00000000..f0cda72e --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/js/component/serverPageTable.js @@ -0,0 +1,407 @@ +/*
+ * 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.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/nsoc-iui/src/main/resources/webroot/nsoc/js/hostMirror/hmController.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/hostMirror/hmController.js new file mode 100644 index 00000000..1c1e39d9 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/js/hostMirror/hmController.js @@ -0,0 +1,254 @@ +/*
+ * 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: "hmController",
+ $tableId : "ict_host_table",
+ $hostTableFields : {// table columns
+ table: [
+ {"mData": "id", "name": "ID", "bVisible": false},
+ {"mData": "name", "name": $.i18n.prop("nfv-host-iui-field-name")},
+ {"mData": "size", "name": $.i18n.prop("nfv-host-iui-field-size")},
+ {"mData": "vimId", "name": "VIMID", "bVisible": false},
+ {"mData": "vimName", "name": "VIM"},
+ {"mData": "vimUser", "name": $.i18n.prop("nfv-host-iui-field-vimUser")},
+ {"mData": "createTime", "name": $.i18n.prop("nfv-host-iui-field-createTime")},
+ {"mData": "progress", "name": $.i18n.prop("nfv-host-iui-field-progress"), "fnRender" : hmUtil.progressRender},
+ {"mData": "status", "name": $.i18n.prop("nfv-host-iui-field-status")},
+ {"mData": null, "name": $.i18n.prop("nfv-host-iui-field-operation"), "fnRender" : hmUtil.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 : {
+ uploadHostImage: '/api/nsoc/v1/hostimages',
+ queryHostInfoUrl: "/api/nsoc/v1/hostimages",
+ delHostUrl: "/api/nsoc/v1/hostimages/",
+ updateHostUrl: "/api/nsoc/v1/hostimages/",
+ queryVimInfoUrl : "/api/roc/v1/resource/vims"
+ },
+ $initTable: function() {
+ var setting = {
+ language : vm.$language,
+ paginate : true,
+ info : true,
+ columns : vm.$hostTableFields.table,
+ restUrl : vm.$restUrl.queryHostInfoUrl,
+ tableId : vm.$tableId
+ };
+ serverPageTable.initDataTable(setting, {}, vm.$tableId + '_div');
+ },
+ uploadHostImage : {
+ vimSelectItems : [],
+ tenant : "",
+ localVisible : true,
+ /*$initUpload : function() {
+ var fileLanguage = getLanguage();
+ if (lang == "zh-CN") {
+ fileLanguage = "zh";
+ } else {
+ fileLanguage = "en";
+ }
+ $("#hostfile").fileinput({
+ language: fileLanguage,
+ showPreview : false,
+ showUpload : false,
+ uploadExtraData : function(){
+ var index = $("#vim").val();
+ var selectVim = vm.uploadHostImage.vimSelectItems[index];
+ var vimid = selectVim.oid;
+ var extraData = {
+ url : $("#hosturl").val(),
+ name : $("#hostName").val(),
+ vimid : vimid
+ }
+ return extraData;
+ },
+ uploadUrl : vm.$restUrl.uploadHostImage,
+ layoutTemplates : {progress : ''}, //hide progress
+ ajaxSettings : {
+ success : function(resp) {
+ commonUtil.showMessage($.i18n.prop("nfv-host-iui-message-upload-success"), "success");
+ refreshByCond();
+ },
+ error : function(resp) {
+ commonUtil.showMessage($.i18n.prop("nfv-host-iui-message-upload-failed"), "warning");
+ }
+ }
+ });
+ },*/
+ $initUpload : function() {
+ var maxChunkSize = 20000000; //20M
+ $("#hostForm").fileupload({
+ url : vm.$restUrl.uploadHostImage,
+ maxNumberOfFiles : 1,
+ maxChunkSize : maxChunkSize,
+ autoUpload : false,
+ add : function(e, data) {
+ $("#fileName").text(data.files[0].name);
+ $("#fileremove").attr("disabled", false);
+
+ $("#uploadBtn").remove();
+ $('<button id="uploadBtn" class="btn blue1" type="button"/>')
+ .text($.i18n.prop("nfv-software-iui-btn-upload"))
+ .appendTo($(".modal-footer")[0])
+ .click(function () {
+ var index = $("#vim").val();
+ var selectVim = vm.uploadHostImage.vimSelectItems[index];
+ var vimid = selectVim.oid;
+ var extData = {
+ url : $("#hosturl").val(),
+ name : $("#hostName").val(),
+ vimid : vimid,
+ imageId : ""
+ };
+ vm.uploadHostImage.$uploadFile(data, extData);
+ });
+ $("#fileremove").click(function(){
+ $("#fileName").text("");
+ $("#uploadBtn").attr("disabled", true);
+ $("#fileremove").attr("disabled", true);
+ });
+ },
+ done : function(e, data) {
+ refreshByCond();
+ },
+ fail : function(e, data) {
+ commonUtil.showMessage($.i18n.prop("nfv-host-iui-message-upload-failed"), "danger");
+ },
+ chunkdone : function(e, data) {
+ //get imageid from server and send it to server
+ var imageId = data.jqXHR.responseText;
+ data.formData.imageId = imageId;
+ //the first chunk file is uploaded, refresh table
+ if(data.loaded <= maxChunkSize) {
+ refreshByCond();
+ }
+ },
+ chunkfail : function(e, data) {
+ var imageId = data.formData.imageId;
+ if(imageId) {
+ $.ajax({
+ type : "PUT",
+ async : false, //to prevent the ajax request has been cancelled
+ url : vm.$restUrl.updateHostUrl + imageId + "?progress=fail",
+ success : function() {
+ //refreshByCond();
+ }
+ });
+ }
+ }
+ });
+ },
+ $showUploadImage: function() {
+ hmUtil.queryVimInfo();
+ $("#fileName").text("");
+ $("#hosturl").val("");
+ $("#hostName").val("");
+
+ $("#uploadImage").modal("show");
+ $('.btn-file').removeClass("btn-primary").addClass("blue1");
+ $(".form-group").each(function () {
+ $(this).removeClass('has-success')
+ .removeClass('has-error')
+ .find(".help-block").remove();
+ });
+ },
+ $uploadFile : function(data, extData) {
+ var form = $("#hostForm");
+ if(!form.valid()) {
+ return false;
+ }
+
+ if(vm.uploadHostImage.localVisible) {
+ $("#hostForm").fileupload({ formData : extData });
+ data.submit();
+ } else {
+ $.ajax({
+ type : "POST",
+ contentType : "application/x-www-form-urlencoded; charset=UTF-8",
+ url : vm.$restUrl.uploadHostImage + "?url=" + extData.url
+ + "&name=" + extData.name + "&vimid=" + extData.vimid,
+ success : function(resp) {
+ commonUtil.showMessage($.i18n.prop("nfv-host-iui-message-upload-success"), "success");
+ refreshByCond();
+ },
+ error : function(resp) {
+ commonUtil.showMessage($.i18n.prop("nfv-host-iui-message-upload-failed"), "warning");
+ }
+ });
+ }
+ $("#uploadImage").modal("hide");
+ },
+ $changeEvent : function() {
+ var index = $("#vim").val();
+ var selectVim = vm.uploadHostImage.vimSelectItems[index];
+ if (selectVim) {
+ $("#tenant").val(selectVim.user);
+ }
+ },
+ $showLocalOrUrl : function(type) {
+ $(".form-group").each(function () {
+ $(this).removeClass('has-success')
+ .removeClass('has-error')
+ .find(".help-block").remove();
+ });
+ type == "local" ? vm.uploadHostImage.localVisible = true : vm.uploadHostImage.localVisible = false;
+ }
+ },
+ initTenant : function(action) { //init tenant value
+ if (action === "add") {
+ vm.uploadHostImage.$changeEvent();
+ }
+ },
+ $initCometd : function() {
+ commonUtil.registerCometdMessage("/api/nsocnotification/v1", "/hostimages/update", function(message) {
+ var table = $('#' + vm.$tableId).dataTable();
+ var tableData = table.fnGetData();
+ var image = message.image;
+ if(image) {
+ for (var i=0; i<tableData.length; i++) {
+ if(tableData[i]["id"] == image.id) {
+ table.fnUpdate(image.size, i, 2, false, false);
+ table.fnUpdate(image.status, i, 8, false, false);
+ }
+ }
+ }
+ });
+ }
+});
+avalon.scan();
+vm.$initTable();
+vm.uploadHostImage.$initUpload();
+vm.$initCometd();
+
+var refreshByCond = function() {
+ vm.$initTable();
+};
\ No newline at end of file diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/js/hostMirror/hmUtil.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/hostMirror/hmUtil.js new file mode 100644 index 00000000..aa0ec468 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/js/hostMirror/hmUtil.js @@ -0,0 +1,59 @@ +/*
+ * 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 hmUtil = {};
+
+hmUtil.actionRender = function(obj) {
+ return '<a href="#" class="btn-xs grey btn-editable" onclick="hmUtil.delHost(\''
+ + obj.aData.id + '\', \'' + obj.aData.vimId + '\')"><i class="ict-delete"></i>'
+ + $.i18n.prop('nfv-host-iui-operation-delete') + '</a>';
+}
+
+hmUtil.progressRender = function(obj) {
+ return $.i18n.prop("nfv-host-iui-progress-" + obj.aData.progress);
+}
+
+hmUtil.delHost = function(id, vimId) {
+ bootbox.confirm($.i18n.prop("nfv-host-iui-message-delete-confirm"), function(result){
+ if(result) {
+ $.ajax({
+ type : "DELETE",
+ url : vm.$restUrl.delHostUrl + id + "?vimid=" + vimId,
+ dataType : "json",
+ success : function(resp) {
+ if (resp) {
+ commonUtil.showMessage($.i18n.prop("nfv-host-iui-message-delete-success"), "success");
+ refreshByCond();
+ }
+ },
+ error : function(resp) {
+ commonUtil.showMessage($.i18n.prop("nfv-host-iui-message-delete-failed"), "warning");
+ }
+ });
+ }
+ });
+}
+
+hmUtil.queryVimInfo = function() {
+ $.get(
+ vm.$restUrl.queryVimInfoUrl,
+ function(resp) {
+ if (resp) {
+ vm.uploadHostImage.vimSelectItems = resp.data;
+ }
+ },
+ "json"
+ );
+}
\ No newline at end of file diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/js/hostMirror/host-validate.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/hostMirror/host-validate.js new file mode 100644 index 00000000..f6000dd0 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/js/hostMirror/host-validate.js @@ -0,0 +1,56 @@ +$(function(){
+ var form = $("#hostForm");
+ var error = $('.alert-danger', form);
+ var success = $('.alert-success', form);
+
+ form.validate({
+ doNotHideMessage : true,
+ errorElement : 'span',
+ errorClass : 'help-block',
+ focusInvalid : false,
+ rules : {
+ hosturl : {
+ required : true,
+ url : true
+ },
+ hostName : {
+ required : true
+ },
+ vim : {
+ required : true
+ }
+ },
+ messages : {
+ hosturl : {
+ required : $.i18n.prop('nfv-host-iui-validate-hosturl-required'),
+ url : $.i18n.prop('nfv-host-iui-validate-hosturl-url')
+ },
+ hostName : {
+ required : $.i18n.prop('nfv-host-iui-validate-hostName')
+ },
+ vim : {
+ required : $.i18n.prop('nfv-host-iui-validate-vim')
+ }
+ },
+ errorPlacement : function(error, element) {
+ error.insertAfter(element);
+ },
+ invalidHandler : function(event, validator) {
+ success.hide();
+ error.show();
+ },
+ highlight : function(element) {
+ $(element).closest(".form-group").removeClass("has-success").addClass("has-error");
+ },
+ unhighlight : function(element) {
+ $(element).closest(".form-group").removeClass("has-error");
+ },
+ success : function(label) {
+ label.addClass("valid").closest(".form-group").removeClass("has-error");
+ },
+ submitHandler : function(form) {
+ success.show();
+ error.hide();
+ }
+ });
+});
\ No newline at end of file diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/js/package/pmController.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/package/pmController.js new file mode 100644 index 00000000..cb7e59f9 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/js/package/pmController.js @@ -0,0 +1,223 @@ +/*
+ * 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: "pmController",
+ $tableId : "ict_package_table",
+ $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: "/api/nsoc/v1/csars",
+ uploadPackageUrl: "/api/nsoc/v1/csars",
+ delPackageUrl: "/api/nsoc/v1/csars",
+ changePackageStatusUrl : "/api/nsoc/v1/csars"
+ },
+ $getPackageCond: function() {
+ var cond = {};
+ return cond;
+ },
+ $initTable: function() {
+ var setting = {
+ language : vm.$language,
+ paginate : true,
+ info : true,
+ columns : vm.$packageTableFields.table,
+ restUrl : vm.$restUrl.queryPackageInfoUrl + "?deletionPending=false",
+ tableId : vm.$tableId
+ };
+ serverPageTable.initDataTable(setting, vm.$getPackageCond(),
+ vm.$tableId + '_div');
+ },
+ /*$initUpload : function() {
+ var fileLanguage = getLanguage();
+ if (lang == "zh-CN") {
+ fileLanguage = "zh";
+ } else {
+ fileLanguage = "en";
+ }
+ $("#csarFile").fileinput({
+ language: fileLanguage,
+ showPreview : true,
+ uploadUrl : vm.$restUrl.uploadPackageUrl,
+ uploadAsync : true,
+ layoutTemplates : {
+ actions : '' //hide the delete button and upload button
+ },
+ allowedFileExtensions : ['zip','csar'],
+ allowedPreviewTypes : ['image'],
+ previewSettings : {
+ other: {width: '160px', height: '20px'}
+ },
+ dropZoneTitleClass : 'package-drop-zone-title',
+ ajaxSettings : {
+ success : function(resp) {
+ commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-upload-success"), 'success');
+ refreshByCond();
+ }
+ },
+ elErrorContainer : '#fileError',
+ showAjaxErrorDetails : false
+ });
+ $('#csarFile').on('fileuploaderror', function(event, data, previewId, index) {
+ $('#fileError').hide();
+ commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-upload-fail"), 'danger');
+ });
+
+ $('#csarFile').on('fileloaded', function(event, file, previewId, index, reader) {
+ //hide original upload button
+ $('a.fileinput-upload-button').hide();
+ $('#confirm').show();
+ });
+
+ $('.btn-file').removeClass("btn-primary").addClass("blue1");
+
+ //replace upload button for confirm
+ var css = $('a.fileinput-upload-button').attr("class");
+ var children = $('a.fileinput-upload-button').eq(0).html();
+ $('<button id="confirm" class="'+css+'">'+children+'</button>').insertAfter('.fileinput-upload-button');
+ $('#confirm').on('click', function(e){
+ e.preventDefault();
+
+ var fileName = $('.file-caption-name').eq(0).text();
+ var existPackage = pmUtil.getExistPackageByName(fileName);
+ if(existPackage == 0){//0:package is not exist
+ $('a.fileinput-upload-button').trigger('click');
+ return;
+ }
+ 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) {
+ $('a.fileinput-upload-button').trigger('click');
+ }
+ });
+ });
+ },*/
+ $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 + '%');
+ }
+ });
+ },
+ $initCometd : function() {
+ commonUtil.registerCometdMessage("/api/nsocnotification/v1", "/package/delete", function(message) {
+ pmUtil.updateDeletedPackageStatus(message);
+ });
+ }
+});
+avalon.scan();
+vm.$initUpload();
+vm.$initTable();
+vm.$initCometd();
+
+var refreshByCond = function() {
+ vm.$initTable();
+};
\ No newline at end of file diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/js/package/pmUtil.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/package/pmUtil.js new file mode 100644 index 00000000..6a7f0fc4 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/js/package/pmUtil.js @@ -0,0 +1,137 @@ +/*
+ * 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.actionRender = function(obj) {
+ return '<a href="#" class="btn-xs grey btn-editable" onclick="pmUtil.delPackage(\'' + obj.aData.name + '\')">'
+ + '<i class=\"ict-delete\"></i>' + $.i18n.prop('nfv-software-iui-action-delete') + '</a>';
+}
+
+pmUtil.statusRender = function(obj) {
+ var status;
+ var attr;
+ switch(obj.aData.status) {
+ case "Enabled" :
+ attr = 'class="label label-success"';
+ status = $.i18n.prop("nfv-package-iui-status-active");
+ break;
+ case "activating" :
+ attr = 'class="label label-info"';
+ status = $.i18n.prop("nfv-package-iui-status-activating");
+ break;
+ case "deleting" :
+ attr = 'class="label label-warning"';
+ status = $.i18n.prop("nfv-package-iui-status-deleting");
+ break;
+ case "deletefail" :
+ attr = 'class="label label-danger"';
+ status = $.i18n.prop("nfv-package-iui-status-deletefail");
+ break;
+ default :
+ attr = 'class="label label-info status" data-toggle="tooltip" title="' + $.i18n.prop("nfv-package-iui-status-tip") + '"'
+ + 'onclick="pmUtil.changeStatus(\'' + obj.aData.name + '\',\'Enabled\')"';
+ status = $.i18n.prop("nfv-package-iui-status-inactive");
+ }
+ return '<span ' + attr + '>' + status + '</span>';
+}
+
+pmUtil.changeStatus = function(name, status) {
+ pmUtil.changeTableStatus(name, "activating");
+ $.ajax({
+ type : "PUT",
+ url : vm.$restUrl.changePackageStatusUrl + "?csarName=" + name + "&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(name) {
+ if(pmUtil.isRowDeletingStatus(name)){
+ return;
+ }
+
+ bootbox.confirm($.i18n.prop("nfv-package-iui-message-delete-confirm"), function(result){
+ if(result) {
+ pmUtil.changeTableStatus(name, "deleting");
+ 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");
+ }
+}
diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/js/softwareMirror/smController.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/softwareMirror/smController.js new file mode 100644 index 00000000..ea03c96d --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/js/softwareMirror/smController.js @@ -0,0 +1,147 @@ +/*
+ * 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: "smController",
+ $tableId : "ict_software_table",
+ $softwareTableFields : {// table columns
+ table: [
+ {"mData": "imageName", name: $.i18n.prop("nfv-software-iui-field-name")},
+ {"mData": "size", name: $.i18n.prop("nfv-software-iui-field-size")},
+ {"mData": "type", name: $.i18n.prop("nfv-software-iui-field-type")},
+ {"mData": "version", name: $.i18n.prop("nfv-software-iui-field-version")},
+ {"mData": "createTime", name: $.i18n.prop("nfv-software-iui-field-createTime")},
+ {"mData": "location", name: $.i18n.prop("nfv-software-iui-field-location")},
+ {"mData": null, name: $.i18n.prop("nfv-software-iui-field-operation"), "fnRender" : smUtil.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 : {
+ uploadSoftwareImageUrl: "/api/nsoc/v1/softwareimages",
+ querySoftwareImageUrl: "/api/nsoc/v1/softwareimages",
+ delSoftwareImageUrl: "/api/nsoc/v1/softwareimages"
+ },
+ $getSoftwareCond: function() {
+ return {};
+ },
+ $initTable: function() {
+ var setting = {
+ language : vm.$language,
+ paginate : true,
+ info : true,
+ columns : vm.$softwareTableFields.table,
+ restUrl : vm.$restUrl.querySoftwareImageUrl,
+ tableId : vm.$tableId
+ };
+ serverPageTable.initDataTable(setting, vm.$getSoftwareCond(),
+ vm.$tableId + '_div');
+ },
+ $initCometd : function() {
+ commonUtil.registerCometdMessage("/api/nsocnotification/v1", "/softwareimages/uploadProcess", function(message){
+ var table = $('#' + vm.$tableId).dataTable();
+ var tableData = table.fnGetData();
+ //var message = JSON.parse(jsonMessage);
+ if(message.softwareImage) {
+ var imageArray = JSON.parse(message.softwareImage);
+ table.fnAddData(imageArray[0], true);
+ } else {
+ for (var i=0; i<tableData.length; i++) {
+ if(tableData[i]["imageName"] == message.imageName) {
+ table.fnUpdate(message.progress , i, 2, false, false);
+ }
+ }
+ }
+ });
+ },
+ uploadSoftwareImage : {
+ $initUpload : function() {
+ $("#softwareFile").fileupload({
+ url : vm.$restUrl.uploadSoftwareImageUrl,
+ //dropZone: $('#dropzone'),
+ maxNumberOfFiles : 1,
+ maxChunkSize : 20000000,
+ autoUpload : false,
+ add : function(e, data) {
+ $("#bar").css('width', '0%');
+ $("#persent").text('0%');
+ $("#fileName").text(data.files[0].name);
+ $("#fileremove").attr("disabled", false);
+
+ $("#uploadBtn").remove();
+ $('<button id="uploadBtn" class="btn blue1" type="button"/>')
+ .text($.i18n.prop("nfv-software-iui-btn-upload"))
+ .appendTo($(".modal-footer")[0])
+ .click(function () {
+ var extData = {
+ type : $("#type").val(),
+ version : $("#version").val()
+ };
+ $("#softwareFile").fileupload({ formData : extData });
+ data.submit();
+ $("#uploadImage").modal("hide");
+ });
+ $("#fileremove").click(function(){
+ //$("#bar").css('width', '0%');
+ //$("#persent").text("");
+ $("#fileName").text("");
+ $("#uploadBtn").attr("disabled", true);
+ $("#fileremove").attr("disabled", true);
+ });
+ },
+ chunkalways : function(e, data) {
+ //refreshByCond();
+ console.log("success");
+ $("#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 + '%');
+ }
+ });
+ },
+ $showUploadImage: function() {
+ $("#type").val("");
+ $("#version").val("");
+ $("#fileName").text("");
+ $("#uploadImage").modal("show");
+ }
+ }
+});
+avalon.scan();
+vm.uploadSoftwareImage.$initUpload();
+vm.$initTable();
+vm.$initCometd();
+
+var refreshByCond = function() {
+ vm.$initTable();
+};
\ No newline at end of file diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/js/softwareMirror/smUtil.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/softwareMirror/smUtil.js new file mode 100644 index 00000000..6381c15b --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/js/softwareMirror/smUtil.js @@ -0,0 +1,33 @@ +/*
+ * 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 smUtil = {};
+
+smUtil.actionRender = function(obj) {
+ return '<a href="#" class="btn-xs grey btn-editable" onclick="smUtil.delSoftWare(\'' + obj.aData.imageName + '\')">'
+ + '<i class=\"ict-delete\"></i>' + $.i18n.prop('nfv-software-iui-action-delete') + '</a>';
+}
+
+smUtil.delSoftWare = function(imageName) {
+ bootbox.confirm($.i18n.prop("nfv-software-iui-message-delete-confirm"), function(result){
+ if(result) {
+ var url = vm.$restUrl.delSoftwareImageUrl + "?imageName=" + imageName;
+ commonUtil.delete(url, function(resp) {
+ commonUtil.showMessage($.i18n.prop("nfv-software-iui-message-delete-success"), "success");
+ refreshByCond();
+ });
+ }
+ });
+}
\ No newline at end of file diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/js/template/tmController.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/template/tmController.js new file mode 100644 index 00000000..196ed50f --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/js/template/tmController.js @@ -0,0 +1,83 @@ +/*
+ * 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": "templateid", 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": "flavors", name: $.i18n.prop("nfv-template-iui-field-flavor"), "fnRender" : tmUtil.flavorRender},
+ {"mData": "nfvtype", name: "NFVTYPE", "bVisible": 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 : {
+ queryTemplateInfoUrl : "/api/nsoc/v1/servicetemplates?deletionPending=false"
+ },
+ $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/nsoc-iui/src/main/resources/webroot/nsoc/js/template/tmDetailController.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/template/tmDetailController.js new file mode 100644 index 00000000..f4207630 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/js/template/tmDetailController.js @@ -0,0 +1,241 @@ +/*
+ * 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 : "/api/nsoc/v1/servicetemplates/{0}/nodetemplates"
+ },
+ $init : function() {
+ $.ajax({
+ type : "GET",
+ url : vm.$restUrl.queryNodeTemplateUrl,
+ success : function(resp) {
+ if(resp) {
+ vm.nodesTab.nodeTemplateData = [];
+ for(var i=0; i<resp.length; i++) {
+ //generate node table display data
+ var nodeTemplate = topoUtil.generateNodeTemplate(resp[i]);
+ vm.nodesTab.nodeTemplateData.push(nodeTemplate);
+ }
+ vm.nodesTab.nodesDetail.nodeTemplateDetailData = resp;
+ //generate topology graph display data
+ vm.topologyTab.topoTemplateData = topoUtil.generateTopoTemplate(vm.nodesTab.nodeTemplateData.$model);
+ //initialize topology data
+ topoUtil.initTopoData(vm.topologyTab.topoTemplateData.$model);
+ vm.nodesTab.$initNodesTab();
+ }
+ },
+ 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 = "/api/nsoc/v1/servicetemplates/" + templateId + "/nodetemplates";
+ vm.$init();
+ },
+ $returnNS: function() {
+ vm.topologyTab.returnBtnVisible = false;
+ vm.$restUrl.queryNodeTemplateUrl = "/api/nsoc/v1/servicetemplates/" + vm.templateId + "/nodetemplates";
+ vm.$init();
+ }
+ },
+ nodesTab : {
+ nodeTemplateData: [],
+ $nodesTabId : "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}
+ ]
+ },
+ $initNodesTab: function() {
+ var setting = {};
+ setting.language = vm.$language;
+ setting.paginate = true;
+ setting.info = true;
+ setting.sort = true;
+ setting.columns = vm.nodesTab.$nodesTabFields.table;
+ setting.tableId = vm.nodesTab.$nodesTabId;
+ serverPageTable.initTableWithData(setting, vm.nodesTab.$nodesTabId + '_div', vm.nodesTab.nodeTemplateData.$model);
+ },
+ //Nodes Details
+ nodesDetail : {
+ nodeTemplateDetailData: [],
+ 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.nodeTemplateDetailData.$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/nsoc-iui/src/main/resources/webroot/nsoc/js/template/tmDetailUtil.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/template/tmDetailUtil.js new file mode 100644 index 00000000..2edc9c37 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/js/template/tmDetailUtil.js @@ -0,0 +1,44 @@ +/*
+ * 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.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
+ });
+ }
+ }
+ }
+ });
+}
\ No newline at end of file diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/js/template/tmUtil.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/template/tmUtil.js new file mode 100644 index 00000000..9077baa5 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/js/template/tmUtil.js @@ -0,0 +1,46 @@ +/*
+ * 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.templateid
+ + '\',' + obj.iDataRow + ')">' + obj.aData.templatename + '</a>';
+}
+
+tmUtil.flavorRender = function(obj) {
+ var flavors = obj.aData.flavors;
+ var result = "";
+ if(flavors && flavors.length) {
+ var optionHtml = "";
+ for(var i=0;i<flavors.length;i++) {
+ optionHtml += '<option>' + flavors[i].name + '</option>';
+ }
+ result = '<select>' + optionHtml + '</select>';
+ }
+ return result;
+}
+
+/*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/nsoc-iui/src/main/resources/webroot/nsoc/js/template/topoUtil.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/template/topoUtil.js new file mode 100644 index 00000000..bcb7e732 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/js/template/topoUtil.js @@ -0,0 +1,617 @@ +/*
+ * 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]["parentType"];
+ 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]);
+ }
+ }
+
+ //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/nsoc-iui/src/main/resources/webroot/nsoc/js/virtualApplication/validate.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/virtualApplication/validate.js new file mode 100644 index 00000000..9cf00eb2 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/js/virtualApplication/validate.js @@ -0,0 +1,64 @@ +$(function(){
+ var form = $("#vmAppForm");
+ var error = $('.alert-danger', form);
+ var success = $('.alert-success', form);
+
+ $.extend($.validator.messages, {
+ required: $.i18n.prop("nfv-virtualApplication-iui-validate-inputParam")
+ });
+
+ form.validate({
+ doNotHideMessage : true,
+ errorElement : 'span',
+ errorClass : 'help-block',
+ focusInvalid : false,
+ rules : {
+ instanceName : {
+ required : true
+ },
+ serviceTemplateName : {
+ required : true
+ },
+ vimId : {
+ required : true
+ },
+ vnfmId : {
+ required : true
+ }
+ },
+ messages : {
+ instanceName : {
+ required : $.i18n.prop("nfv-virtualApplication-iui-validate-instanceName")
+ },
+ serviceTemplateName : {
+ required : $.i18n.prop("nfv-virtualApplication-iui-validate-serviceTemplateName")
+ },
+ vimId : {
+ required : $.i18n.prop("nfv-virtualApplication-iui-validate-vimId")
+ },
+ vnfmId : {
+ required : $.i18n.prop("nfv-virtualApplication-iui-validate-vnfmId")
+ }
+ },
+ errorPlacement : function(error, element) {
+ error.insertAfter(element);
+ },
+ invalidHandler : function(event, validator) {
+ success.hide();
+ error.show();
+ },
+ highlight : function(element) {
+ $(element).closest(".form-group").removeClass("has-success").addClass("has-error");
+ },
+ unhighlight: function (element) {
+ $(element).closest(".form-group").removeClass("has-error");
+ },
+ success : function(label) {
+ label.addClass("valid").closest(".form-group").removeClass("has-error");
+ },
+ submitHandler: function (form) {
+ success.show();
+ error.hide();
+ }
+ });
+});
\ No newline at end of file diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/js/virtualApplication/vmAppController.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/virtualApplication/vmAppController.js new file mode 100644 index 00000000..74dad401 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/js/virtualApplication/vmAppController.js @@ -0,0 +1,710 @@ +/*
+ * 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: "vmAppController",
+ $tableId : "ict_virtualApplication_table",
+ $virtualAppTableFields : {// table columns
+ table: [
+ {"mData": "instanceId", name: "ID", "bVisible": false},
+ {"mData": "instanceName", name: $.i18n.prop("nfv-virtualApplication-iui-field-name"), "fnRender" : vmAppUtil.nameRender},
+ {"mData": "serviceTemplateId", name: $.i18n.prop("nfv-virtualApplication-iui-field-template")},
+ {"mData": "createdDate", name: $.i18n.prop("nfv-virtualApplication-iui-field-createDate")},
+ {"mData": "instanceStatus", name: $.i18n.prop("nfv-virtualApplication-iui-field-status"), "fnRender" : vmAppUtil.statusRender},
+ {"mData": "instanceOperating", name: "instanceOperating", "bVisible": false},
+ {"mData": null, name: $.i18n.prop("nfv-virtualApplication-iui-field-action"), "fnRender" : vmAppUtil.operationRender, "sWidth" : "180px"},
+ {"mData": "operationInfo", name: "operationinfo", "bVisible": false},
+ {"mData": null, name: $.i18n.prop("nfv-virtualApplication-iui-field-operation"), "fnRender" : vmAppUtil.delRender}
+ ]
+ },
+ $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 : {
+ queryAppinstancesUrl: "/api/nsoc/v1/appinstances",
+ queryStatusUrl: "/api/nsoc/v1/appinstances/",
+ deleteAppinstancesUrl: "/api/nsoc/v1/appinstances/",
+ newAppinstancesUrl: "/api/nsoc/v1/appinstances",
+ queryAppinstancesByIdUrl: "/api/nsoc/v1/appinstances/",
+ executeOperationUrl: "/api/nsoc/v1/appinstances/",
+ queryOperationParamsUrl: "/api/nsoc/v1/servicetemplates/",
+ queryServiceTemplate: "/api/nsoc/v1/servicetemplates?deletionPending=false",
+ queryVimInfoUrl : "/api/roc/v1/resource/vims",
+ queryVnfmInfoUrl : "/api/roc/v1/resource/vnfms",
+ delInstanceTemplateUrl: "/api/nsoc/v1/csars/",
+ queryFlavorParamUrl: "/api/nsoc/v1/servicetemplates/",
+ queryTemplateOptionsUrl: "/api/nsoc/v1/servicetemplates/",
+ queryInputParamUrl: "/api/nsoc/v1/servicetemplates/",
+ queryVnfInfoUrl : "/api/nsoc/v1/servicetemplates/",
+ queryRocInfoBaseUrl : "/api/roc/v1/resource"
+ },
+ $initTable: function() {
+ var setting = {};
+ setting.language = vm.$language;
+ setting.paginate = true;
+ setting.info = true;
+ setting.columns = vm.$virtualAppTableFields.table;
+ setting.restUrl = vm.$restUrl.queryAppinstancesUrl;
+ setting.tableId = vm.$tableId;
+ serverPageTable.initDataTable(setting, {}, vm.$tableId + "_div");
+ },
+ $openDetail : function(instanceId, serviceTemplateId) {
+ var url = "./virtualApplicationDetail.html?instanceId=" + instanceId
+ + "&templateId=" + serviceTemplateId;
+ window.open(url, "_self");
+ },
+ $initCometd : function() {
+ var cometd = new $.Cometd();
+ var cometdURL = location.protocol + "//" + location.host + "/api/nsocnotification/v1";
+ cometd.configure({
+ url : cometdURL,
+ logLevel : "info"
+ });
+ // unregister websocket transport, use long-polling transport
+ cometd.unregisterTransport('websocket');
+
+ cometd.addListener("/meta/handshake", function(handshake){
+ if(handshake.successful === true) {
+ cometd.batch(function() {
+ //subscribe multiple channels
+ cometd.subscribe("/lifecycle/instance/status", function(message){
+ //message = JSON.parse(message.data);
+ message = message.data;
+ var table = $('#' + vm.$tableId).dataTable();
+ var tableData = table.fnGetData();
+ if(message.instanceStatus) {
+ var instance = message.instanceStatus;
+ for (var i=0; i<tableData.length; i++) {
+ if(tableData[i]["instanceId"] == instance.instanceid) {
+ //if(instance.instancestatus == "normal" || instance.instancestatus == "failed") {
+ refreshByCond();
+ //}
+ }
+ }
+ }
+ });
+ cometd.subscribe("/servicetemplate/update", function(message){
+ //message = JSON.parse(message.data);
+ message = message.data;
+ var table = $('#' + vm.$tableId).dataTable();
+ var tableData = table.fnGetData();
+ if(message.oldTemplateid) {
+ var oldTemplateid = message.oldTemplateid;
+ for (var i=0; i<tableData.length; i++) {
+ if(tableData[i]["serviceTemplateId"] == oldTemplateid) {
+ table.fnUpdate(message.newTemplateid , i, 2, false, false);
+ }
+ }
+ }
+ });
+ });
+ }
+ });
+ cometd.handshake();
+ },
+ //create vmapp
+ showCreateApp : function() {
+ vm.vmAppDialog.type = "create";
+ vm.vmAppDialog.title = $.i18n.prop("nfv-virtualApplication-iui-text-title");
+ vm.vmAppDialog.btnTitle = $.i18n.prop("nfv-virtualApplication-iui-text-createBtn");
+ vm.vmAppDialog.$initData();
+
+ $("a[href='#basicTab']").trigger("click");
+ $("#vmAppDialog").modal("show");
+ },
+ $initWizard : function() {
+ $(function(){
+ $('#wizard').bootstrapWizard({
+ 'nextSelector' : '.button-next',
+ 'previousSelector' : '.button-previous',
+ 'onTabShow' : function(tab, navigation, index) {
+ //remove error message
+ $(".form-group").each(function () {
+ $(this).removeClass('has-success');
+ $(this).removeClass('has-error');
+ $(this).find(".help-block").remove();
+ });
+
+ var $total = navigation.find('li').length;
+ var $current = index+1;
+ if(($current == 1) || ($current == 2 && vm.vmAppDialog.type == "execute")) {
+ $('.button-previous').hide();
+ $('.button-next').show();
+ $('#createBtn').hide();
+ } else if ($current == $total) {
+ $('.button-previous').show();
+ $('.button-next').hide();
+ $('#createBtn').show();
+ } else {
+ $('.button-previous').show();
+ $('.button-next').show();
+ $('#createBtn').hide();
+ }
+ },
+ 'onTabClick' : function() {
+ var $valid = $("#vmAppForm").valid();
+ if(!$valid) {
+ return false;
+ }
+ },
+ 'onNext' : function(tab, navigation, index) {
+ var $valid = $("#vmAppForm").valid();
+ if(!$valid) {
+ return false;
+ }
+ }
+ });
+ //prevent the validator from validating the next page input elements when click next button
+ $(".button-next").click(function(e){
+ e.preventDefault();
+ });
+ });
+ },
+ vmAppDialog : {
+ type : "",
+ title : "",
+ btnTitle : "",
+ name : "",
+ currentRow : 0,
+ templateId : "",
+ operation : "",
+ //basic tab
+ templateSelectItems : [],
+ vimSelectItems : [],
+ vnfmSelectItems : [],
+ vnfItems : [],
+ templateType : "",
+ description : "",
+ //flavor tab
+ flavorVisible : false,
+ flavors : [],
+ flavorDesc : "",
+ flavorParams : [],
+ //inputParams tab
+ operationParams : [],
+ templateInputParams : [],
+ inputParamDescVisible : false,
+ language : getLanguage(),
+ //inputParams tab for scaleOut and scaleIn
+ vmAppScaleHtml : "virtualApplicationScale.html",
+ $initData : function() {
+ $('#wizard ul').show();
+ $('#wizard ul li').show();
+ vm.vmAppDialog.inputParamDescVisible = false;
+ vm.vmAppDialog.flavorParams = [];
+ vm.vmAppDialog.flavorDesc = "";
+
+ if(vm.vmAppDialog.type == "create") {
+ //create new vmapp, show all tabs
+ vmAppUtil.queryTemplate();
+ vmAppUtil.queryVimInfo();
+ vmAppUtil.queryVnfmInfo();
+ } else {
+ /*if(vmAppUtil.isScaleOperation(vm.vmAppDialog.operation)) {
+ vm.vmAppDialog.flavorVisible = true;
+ var url = vm.$restUrl.queryServiceTemplate + "&templateid=" + vm.vmAppDialog.templateId;
+ commonUtil.get(url, null, function(data) {
+ if (data) {
+ //default display the first template flavors
+ vm.vmAppDialog.flavors = data.flavors || [];
+ if(data.flavors.length) {
+ //default display the first flavor desc
+ vm.vmAppDialog.flavorDesc = data.flavors[0].desc;
+ var flavorName = data.flavors[0].name;
+ vmAppUtil.queryFlavorParam(vm.vmAppDialog.templateId, flavorName);
+ }
+ }
+ });
+ } else {*/
+ //execute vmapp operation
+ $("a[href='#flavorTab']").trigger("click");
+ //hide basic tab
+ $('#wizard ul li').eq(0).hide();
+
+ $("a[href='#inputParamTab']").trigger("click");
+ $('#wizard ul').hide();
+ $('.button-previous').hide();
+ $("#flavor").val("");
+ //}
+ }
+ },
+ $initInputParams : function(templateId) {
+ vm.vmAppDialog.operationParams = [];
+ vm.vmAppDialog.templateInputParams = [];
+ //query sevicetemplate operation list
+ $.ajax({
+ type : "GET",
+ url : vm.$restUrl.queryTemplateOptionsUrl + templateId + "/operations?returnJson=true",
+ dataType : "json",
+ success : function(data) {
+ var options = data || [];
+ for(var i=0;i<options.length;i++) {
+ if(options[i].name == "init") {
+ url = vm.$restUrl.queryOperationParamsUrl + templateId + "/operations/init/parameters";
+ //query operation params
+ $.ajax({
+ type : "GET",
+ url : vm.$restUrl.queryInputParamUrl + templateId + "/operations/init/parameters",
+ dataType : "json",
+ success : function(resp) {
+ vm.vmAppDialog.operationParams = resp || [];
+ if(vm.vmAppDialog.templateInputParams.length || vm.vmAppDialog.operationParams.length) {
+ vm.vmAppDialog.inputParamDescVisible = false;
+ } else {
+ vm.vmAppDialog.inputParamDescVisible = true;
+ }
+ }
+ });
+ break;
+ }
+ }
+ }
+ });
+ //query template input params
+ $.ajax({
+ type : "GET",
+ url : vm.$restUrl.queryInputParamUrl + templateId + "/parameters",
+ dataType : "json",
+ success : function(resp) {
+ vm.vmAppDialog.templateInputParams = resp || [];
+ if(vm.vmAppDialog.templateInputParams.length || vm.vmAppDialog.operationParams.length) {
+ vm.vmAppDialog.inputParamDescVisible = false;
+ } else {
+ vm.vmAppDialog.inputParamDescVisible = true;
+ }
+ }
+ });
+ },
+ $initVnfInfo : function(templateInfo) {
+ vm.vmAppDialog.vnfItems = [];
+ vm.vmAppDialog.templateType = templateInfo.nfvtype;
+ if(vmAppUtil.isNSTemplate(templateInfo.nfvtype)) {
+ vmAppUtil.queryVnfInfo(templateInfo.templateid);
+ } else {
+ var vnfNode = {
+ templateid : templateInfo.templateid,
+ name : templateInfo.templatename
+ }
+ vm.vmAppDialog.vnfItems.push(vnfNode);
+ }
+ },
+ $templateChange : function() {
+ var $option = $("#serviceTemplateName option:selected");
+ var index = $option.data("index");
+ var templateItem = vm.vmAppDialog.templateSelectItems[index];
+ vm.vmAppDialog.flavors = templateItem.flavors || [];
+ //as template change，flavor change too
+ vm.vmAppDialog.$flavorChange();
+ if(vm.vmAppDialog.flavors.length) {
+ vm.vmAppDialog.flavorDesc = vm.vmAppDialog.flavors[0].desc;
+ } else {
+ vm.vmAppDialog.flavorDesc = "";
+ }
+ //as template change，operationParams change too
+ vm.vmAppDialog.$initInputParams(templateItem.templateid);
+ //if the template is a ns template, query vnf templates
+ vm.vmAppDialog.$initVnfInfo(templateItem);
+ },
+ $flavorChange : function() {
+ var templateId = "";
+ if(vm.vmAppDialog.type == "create") {
+ templateId = $("#serviceTemplateName").val();
+ } else {
+ templateId = vm.vmAppDialog.templateId;
+ }
+ var $flavor = $("#flavor option:selected");
+ var flavorName = $flavor.val();
+ vm.vmAppDialog.flavorParams = [];
+ vm.vmAppDialog.flavorDesc = $flavor.data("desc");
+ if(templateId && flavorName) {
+ vmAppUtil.queryFlavorParam(templateId, flavorName);
+ }
+ },
+ $getFlavorI18nInfo : function(key) {
+ return $.i18n.prop("nfv-virtualApplication-iui-text-flavor-" + key);
+ },
+ $getGoupParamKey : function(groupName, key) {
+ //to prevent a duplicate key
+ return groupName + key;
+ },
+ $getVnfmText : function(name) {
+ if(vmAppUtil.isNSTemplate(vm.vmAppDialog.templateType)) {
+ return name + " " + $.i18n.prop("nfv-virtualApplication-iui-text-vnfm");
+ } else {
+ return $.i18n.prop("nfv-virtualApplication-iui-text-vnfm");
+ }
+ },
+ $confirmBtnClick : function() {
+ //validate rules
+ var form = $("#vmAppForm");
+ if(!form.valid()) {
+ return false;
+ }
+ //flavor params
+ var flavorParams = vmAppUtil.generateGourpParams(vm.vmAppDialog.flavorParams);
+ //additional params, include template input params
+ var additionalParams = vmAppUtil.generateAdditionalParams(vm.vmAppDialog.templateInputParams);
+ //vnfRelationInfos
+ var vnfRelationInfos = vmAppUtil.generateVNFRelationInfos(vm.vmAppDialog.vnfItems);
+ //operation param
+ var inputParams = [];
+ var operationParam = {
+ groupName : vm.vmAppDialog.operation,
+ params : []
+ }
+ $.each(vm.vmAppDialog.operationParams, function(index, element){
+ var value = $("#" + element.paramKey).val();
+ if(value) {
+ var groupParam = {
+ key : element.paramKey,
+ value : value
+ }
+ operationParam.params.push(groupParam);
+ }
+ });
+ operationParam.params = operationParam.params.concat(additionalParams);
+ inputParams.push(operationParam);
+
+ if(vm.vmAppDialog.type == "create") {
+ operationParam.groupName = "init";
+ var param = {
+ instanceName : $("#instanceName").val(),
+ templateId : $("#serviceTemplateName").val(),
+ type : vm.vmAppDialog.templateType,
+ flavor : $("#flavor").val(),
+ flavorParams : flavorParams,
+ operationParams : inputParams,
+ //vnfRelationInfos : vnfRelationInfos
+ vnfmId : $("#vnfmId").val()
+ };
+ vmAppUtil.newApp(param);
+ } else {
+ var param = {
+ flavor : $("#flavor").val(),
+ flavorParams : flavorParams,
+ operationParams : inputParams
+ }
+ vmAppUtil.executeOperation(param, vm.vmAppDialog.currentRow, vm.vmAppDialog.operation);
+ }
+ }
+ },
+ vmAppScaleDialog : {
+ $tableId : "ict_vdu_table",
+ $virtualAppTableFields : {// table columns
+ vduTemplateTable: [
+ {"mData": "id", name: "ID", "bVisible": false},
+ {"mData": "vnfId", name: "VNFID", "bVisible": false},
+ {"mData": "type", name: $.i18n.prop("nfv-virtualApplication-iui-scale-field-type")},
+ {"mData": "num", name: $.i18n.prop("nfv-virtualApplication-iui-scale-field-num")},
+ {"mData": "name", name: $.i18n.prop("nfv-virtualApplication-iui-scale-field-name")},
+ {"mData": null, name: $.i18n.prop("nfv-virtualApplication-iui-scale-field-operation"), "fnRender" : vmAppUtil.delVduRender}
+ ],
+ vduInstanceTable: [
+ {"mData": "oid", name: "ID", "bVisible": false},
+ {"mData": "type", name: $.i18n.prop("nfv-virtualApplication-iui-scale-field-type")},
+ {"mData": "name", name: $.i18n.prop("nfv-virtualApplication-iui-scale-field-name")},
+ {"mData": null, name: $.i18n.prop("nfv-virtualApplication-iui-scale-field-operation"),
+ "sWidth" : "100px", "sClass" : "icheckbox", "fnRender" : vmAppUtil.checkRender}
+ ]
+ },
+ $initTable: function(operationType, tableData) {
+ var setting = {};
+ setting.language = vm.$language;
+ setting.paginate = true;
+ setting.info = false;
+ if(operationType == "type") {
+ setting.columns = vm.vmAppScaleDialog.$virtualAppTableFields.vduTemplateTable;
+ } else {
+ setting.columns = vm.vmAppScaleDialog.$virtualAppTableFields.vduInstanceTable;
+ }
+ setting.tableId = vm.vmAppScaleDialog.$tableId;
+ serverPageTable.initTableWithData(setting, setting.tableId + "_div", tableData);
+
+ $('input:checkbox').iCheck({
+ //initialize icheck style
+ checkboxClass: 'icheckbox_square-aero'
+ });
+ var oTable = $("#" + vm.vmAppScaleDialog.$tableId).dataTable();
+ oTable.on("draw", function(){
+ //initialize icheck style
+ $('input:checkbox').iCheck({
+ checkboxClass: 'icheckbox_square-aero'
+ });
+ });
+ },
+ currentRow : 0,
+ operation : "",
+ instanceId : "",
+ templateId : "",
+ scaleTitle : "",
+ title : "",
+ saveType : "add",
+ instanceType : false,
+ typeVisible : true,
+ titleVisible : false,
+ vnfDatas : [],
+ currentVnfData : {},
+ vnfSelectItems : [],
+ vduSelectItems : [],
+ btnTitle : $.i18n.prop("nfv-virtualApplication-iui-text-scale-vduBtn-title"),
+ numTip : $.i18n.prop("nfv-virtualApplication-iui-text-scale-vnf-numTip"),
+ nameTip : $.i18n.prop("nfv-virtualApplication-iui-text-scale-vnf-nameTip"),
+ $initScaleParams : function() {
+ //set riadio visible and checked attribution
+ if(vm.vmAppScaleDialog.operation == "scaleOut") {
+ vm.vmAppScaleDialog.scaleTitle = $.i18n.prop("nfv-virtualApplication-iui-text-scale-out-modal-title");
+ vm.vmAppScaleDialog.instanceType = true;
+ } else {
+ vm.vmAppScaleDialog.scaleTitle = $.i18n.prop("nfv-virtualApplication-iui-text-scale-in-modal-title");
+ vm.vmAppScaleDialog.instanceType = false;
+ }
+ vm.vmAppScaleDialog.vnfSelectItems = [];
+ vm.vmAppScaleDialog.vnfDatas = [];
+ vm.vmAppScaleDialog.titleVisible = false;
+
+ vmAppUtil.queryScalableVnfInfo(vm.vmAppScaleDialog.templateId);
+ },
+ $addValidatorMethod : function() {
+ $.validator.addMethod("vnfRepeat", function(value, element, params){
+ var vnfId = $(element).val();
+ var vnfDatas = vm.vmAppScaleDialog.vnfDatas;
+ for(var i=0;i<vnfDatas.length;i++) {
+ if(vnfDatas[i].id == vnfId) {
+ return false;
+ }
+ }
+ return true;
+ }, $.i18n.prop("nfv-virtualApplication-iui-text-scale-validate-message"));
+ },
+ $addVnf : function(action, vnf) {
+ var vnfData;
+ var operationType;
+ if(action == "add") {
+ var form = $("#vnfForm");
+ if(!form.valid()) {
+ return false;
+ }
+
+ vm.vmAppScaleDialog.saveType = "add";
+ var index = parseInt($("#vnfType option:selected").attr("data-index"));
+ vnfData = vm.vmAppScaleDialog.vnfSelectItems[index];
+ vnfData.vduTableData = [];
+ operationType = $("input[name='operationType']:checked").val();
+ } else {
+ vm.vmAppScaleDialog.saveType = "edit";
+ vnfData = vnf;
+ operationType = vnfData.operationType;
+ }
+
+ vm.vmAppScaleDialog.currentVnfData = vnfData;
+ vm.vmAppScaleDialog.vduSelectItems = vnfData.vduTypeList;
+
+ if(operationType == "type") {
+ vm.vmAppScaleDialog.typeVisible = true;
+ vm.vmAppScaleDialog.title = $.i18n.prop("nfv-virtualApplication-iui-text-scale-type-title");
+ vm.vmAppScaleDialog.$initTable(operationType, vnfData.vduTableData);
+ } else {
+ vm.vmAppScaleDialog.typeVisible = false;
+ vm.vmAppScaleDialog.title = $.i18n.prop("nfv-virtualApplication-iui-text-scale-instance-title");
+ //initialize table without data, in case of query vdu instances no data
+ vm.vmAppScaleDialog.$initTable("instance", []);
+ //query scalable vdu instances
+ vmAppUtil.queryScalableVduInstance(vm.vmAppScaleDialog.instanceId, vnfData.id, vnfData.vduTypeList);
+ }
+
+ $("#addVduModal").modal("show");
+ },
+ $addVduToTable : function() {
+ //validate vdu form
+ var form = $("#vduForm");
+ if(!form.valid()) {
+ return false;
+ }
+
+ var currentVnfData = vm.vmAppScaleDialog.currentVnfData;
+ var vduType = {
+ id : $("#vduType option:selected").val(),
+ vnfId : currentVnfData.id,
+ type : $("#vduType option:selected").text(),
+ num : $("#vduNum").val(),
+ name : $("#vduName").val()
+ }
+
+ var oTable = $("#" + vm.vmAppScaleDialog.$tableId).dataTable();
+ oTable.fnAddData(vduType);
+ },
+ $deleteVnf : function(vnfId) {
+ var vnfDatas = vm.vmAppScaleDialog.vnfDatas;
+ for(var i=0;i<vnfDatas.length;i++) {
+ if(vnfDatas[i].id == vnfId) {
+ vnfDatas.splice(i, 1);
+ }
+ }
+ vm.vmAppScaleDialog.titleVisible = vnfDatas.length;
+ },
+ $scaleConfirmClick : function() {
+ var operationType = $("input[name='operationType']:checked").val();
+ var currentVnfData = vm.vmAppScaleDialog.currentVnfData;
+ currentVnfData.operationType = operationType;
+ currentVnfData.vduTableData = [];
+ var vduInstanceNameArray = [];
+ var oTable = $("#" + vm.vmAppScaleDialog.$tableId).dataTable();
+ var data = oTable.fnGetData();
+ if(operationType == "instance") {
+ var tr = oTable.fnGetNodes();
+ for(var i=0;i<tr.length;i++) {
+ var isChecked = $(tr[i]).find("input:checked").length;
+ if(isChecked) {
+ var currentRowData = data[i];
+ currentVnfData.vduTableData.push(currentRowData);
+ vduInstanceNameArray.push(currentRowData.name);
+ }
+ }
+ currentVnfData.vduNameStr = vduInstanceNameArray.toString();
+ } else {
+ currentVnfData.vduTableData = data;
+ var vduTypeArray = [];
+ var vduNumArray = [];
+ for(var i=0;i<currentVnfData.vduTableData.length;i++) {
+ vduTypeArray.push(currentVnfData.vduTableData[i].type);
+ vduNumArray.push(currentVnfData.vduTableData[i].num);
+ }
+ currentVnfData.vduTypeStr = vduTypeArray.toString();
+ currentVnfData.vduNumStr = vduNumArray.toString();
+ }
+
+ if(vm.vmAppScaleDialog.saveType == "edit") {
+ var vnfDatas = vm.vmAppScaleDialog.vnfDatas;
+ for(var i=0;i<vnfDatas.length;i++) {
+ if(vnfDatas[i].id == currentVnfData.id) {
+ if(currentVnfData.vduTableData.length) {
+ vnfDatas[i] = currentVnfData;
+ } else {
+ //delete the vnf which has no vdu data
+ vm.vmAppScaleDialog.vnfDatas.splice(i, 1);
+ }
+ }
+ }
+ } else {
+ if(currentVnfData.vduTableData.length) {
+ vm.vmAppScaleDialog.vnfDatas.push(currentVnfData);
+ }
+ }
+ vm.vmAppScaleDialog.titleVisible = vm.vmAppScaleDialog.vnfDatas.length;
+ $("#addVduModal").modal("hide");
+ },
+ $confirmBtnClick : function() {
+ var scaleParams = [];
+ var scaleParam = {
+ groupName : vm.vmAppScaleDialog.operation,
+ params : []
+ }
+ scaleParam.params = vmAppUtil.generateScaleParams(vm.vmAppScaleDialog.vnfDatas);
+ scaleParams.push(scaleParam);
+
+ var param = {
+ operationParams : scaleParams
+ }
+ vmAppUtil.executeOperation(param, vm.vmAppScaleDialog.currentRow, vm.vmAppScaleDialog.operation);
+ }
+ },
+ templateRender : function(action) {
+ if(action == "add") {
+ var data = vm.vmAppDialog.templateSelectItems;
+ if(data.length) {
+ //default display the first template flavors
+ vm.vmAppDialog.flavors = data[0].flavors || [];
+ if(vm.vmAppDialog.flavors.length) {
+ //default display the first flavor desc
+ vm.vmAppDialog.flavorDesc = vm.vmAppDialog.flavors[0].desc;
+ }
+ //default display the first template input params
+ vm.vmAppDialog.$initInputParams(data[0].templateid);
+ //if the template is a ns template, query vnf templates
+ vm.vmAppDialog.$initVnfInfo(data[0]);
+ }
+ }
+ },
+ vnfRender : function(action) {
+ if(action == "add") {
+ //add vnfm rules
+ $(this).find('select').each(function(){
+ $(this).rules("add", {required : true});
+ });
+ }
+ },
+ flavorRender : function(action) {
+ if(action == "add") {
+ //default display the first flavor params
+ vm.vmAppDialog.$flavorChange();
+ }
+ },
+ paramRender : function(action) {
+ if(action == "add") {
+ //add dynamic validate rules
+ $(this).find('input').each(function(){
+ $(this).rules("add", {required : true});
+ });
+ }
+ },
+ operationParamRender : function(action) {
+ if(action == "add") {
+ //add dynamic validate rules
+ $(this).find('input').each(function(){
+ var required = $(this).attr("data-required");
+ if(required == "true") {
+ $(this).rules("add", {required : true});
+ }
+ });
+ }
+ },
+ includeRender : function() {
+ //internationalize scale dialog
+ var lang = getLanguage();
+ loadPropertiesSideMenu(lang, 'nfv-nso-iui-i18n', 'i18n/');
+
+ //initialize vnf form validator
+ vmAppUtil.initFormValidator("vnfForm");
+ //add dynamic validate rule
+ vm.vmAppScaleDialog.$addValidatorMethod();
+ $("#vnfType").rules("add", {vnfRepeat : true});
+ //initialize vdu form validator
+ vmAppUtil.initFormValidator("vduForm");
+ $("#vduNum").rules("add", {digits : true, required : true});
+ }
+});
+avalon.scan();
+vm.$initTable();
+vm.$initWizard();
+vm.$initCometd();
+
+var refreshByCond = function() {
+ vm.$initTable();
+ vm.$initWizard();
+}
\ No newline at end of file diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/js/virtualApplication/vmAppDetailController.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/virtualApplication/vmAppDetailController.js new file mode 100644 index 00000000..dfa09e72 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/js/virtualApplication/vmAppDetailController.js @@ -0,0 +1,281 @@ +/*
+ * 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 : "vmAppDetailController",
+ 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")
+ }
+ },
+ tabChange : function(index) {
+ refreshByCond(index);
+ },
+ $restUrl : {
+ queryNodeTemplateUrl : "/api/nsoc/v1/servicetemplates/{0}/nodetemplates",
+ queryNodesInfoUrl:"/api/nsoc/v1/appinstances/{0}/nodeintsances",
+ queryEventsInfoUrl: "/api/nsoc/v1/appinstances/{0}/operateschedules"
+ },
+ $init : function() {
+ $.ajax({
+ type : "GET",
+ url : vm.$restUrl.queryNodeTemplateUrl,
+ success : function(resp) {
+ if(resp) {
+ var nodeTemplateData = [];
+ for(var i=0; i<resp.length; i++) {
+ var nodeTemplate = topoUtil.generateNodeTemplate(resp[i]);
+ nodeTemplateData.push(nodeTemplate);
+ }
+ vm.nodesTab.nodesDetail.nodeTemplateDetailData = resp;
+ //generate node template table
+ vm.topologyTab.topoTemplateData = topoUtil.generateTopoTemplate(nodeTemplateData);
+ //initialize topology graph data
+ vmAppDetailUtil.initTopoData(vm.topologyTab.topoTemplateData.$model);
+ }
+ },
+ error : function() {
+ commonUtil.showMessage($.i18n.prop("nfv-topology-iui-message-error"), "danger");
+ }
+ });
+
+ //initialize event table
+ vm.executionTab.$initEventsTable();
+ },
+ $initCometd : function() {
+ commonUtil.registerCometdMessage("/api/nsocnotification/v1", "/lifecycle/instance/process", function(message) {
+ var table = $('#' + vm.executionTab.$eventsTabId).dataTable();
+ var tableData = table.fnGetData();
+ if(message.instanceProcess) {
+ var instance = message.instanceProcess;
+ if(instance.instanceid == vm.executionTab.$instanceId) {
+ table.fnAddData(instance.operationSchedule.currentStepInfo, true);
+ }
+ }
+ });
+ },
+ 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: true,
+ eventVisible: false,
+ returnBtnVisible : false,
+ $getColor: function(index) {
+ return topoUtil.getColor(index);
+ },
+ $getCidr: function(properties){
+ return topoUtil.getCidr(properties.$model);
+ },
+ $getCpTop: function(index, parentBoxId){
+ return topoUtil.getCpTop(index, parentBoxId);
+ },
+ $initTopology : function(topoTemplateData) {
+ vmAppDetailUtil.initTopoData(topoTemplateData);
+ },
+ $showTopo:function(id, name){
+ vm.nodesTab.nodesDetail.$showDetails("block", id, name);
+ },
+ $showEvent: function() {
+ vm.topologyTab.eventVisible = !vm.topologyTab.eventVisible;
+ if(vm.topologyTab.eventVisible) {
+ //query event table data
+ var oTable = $("#" + vm.executionTab.$eventsTabId).dataTable();
+ oTable.fnAdjustColumnSizing();
+ } else {
+ //refresh topo data
+ vm.topologyTab.$initTopology(vm.topologyTab.topoTemplateData.$model);
+ }
+ },
+ $showVnfTopo: function(templateId) {
+ vm.topologyTab.returnBtnVisible = true;
+ vm.$restUrl.queryNodeTemplateUrl = "/api/nsoc/v1/servicetemplates/" + templateId + "/nodetemplates";
+ vm.$init();
+ },
+ $returnNS: function() {
+ vm.topologyTab.returnBtnVisible = false;
+ vm.$restUrl.queryNodeTemplateUrl = "/api/nsoc/v1/servicetemplates/" + vm.templateId + "/nodetemplates";
+ vm.$init();
+ }
+ },
+ nodesTab : {
+ $nodesTabId : "ict_nodes_table",
+ $nodesTabFields : {// table columns
+ table: [
+ {"mData": "nodeId", name: $.i18n.prop("nfv-virtualApplicationDetail-iui-field-nodeId"), "sClass" : "td_nodeId", "bVisible":false},
+ {"mData": "nodeName", name: $.i18n.prop("nfv-virtualApplicationDetail-iui-field-nodeName"), "bSortable":false, "fnRender" : vmAppDetailUtil.nameRender},
+ {"mData": "nodeType", name: $.i18n.prop("nfv-virtualApplicationDetail-iui-field-nodeType"), "sWidth" : "150px", "bSortable":true},
+ {"mData": "nodeTemplateId", name: $.i18n.prop("nfv-virtualApplicationDetail-iui-field-templateType"),"bSortable":false},
+ {"mData": "nodeIp", name: $.i18n.prop("nfv-virtualApplicationDetail-iui-field-host"), "bSortable":false},
+ {"mData": "createTime", name: $.i18n.prop("nfv-virtualApplicationDetail-iui-field-createTime"), "bSortable":false}
+ ]
+ },
+ $initNodesTab: function() {
+ var setting = {};
+ setting.language = vm.$language;
+ setting.paginate = true;
+ setting.info = true;
+ setting.sort = true;
+ setting.columns = vm.nodesTab.$nodesTabFields.table;
+ setting.restUrl = vm.$restUrl.queryNodesInfoUrl;
+ setting.tableId = vm.nodesTab.$nodesTabId;
+ serverPageTable.initDataTable(setting, {}, vm.nodesTab.$nodesTabId + '_div');
+ },
+ //Nodes Details
+ nodesDetail : {
+ nodeTemplateDetailData: [],
+ nodeInstanceSelectItems: [],
+ 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) {
+ console.log(isShow);
+ vm.nodesTab.nodesDetail.isShow = isShow;
+ if (isShow == "block") {
+ vm.nodesTab.nodesDetail.detailTitle = nodetypename + " " + $.i18n.prop("nfv-virtualApplicationDetail-iui-text-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.nodeTemplateDetailData.$model, nodetemplateid);
+
+ $.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": "name", name: $.i18n.prop("nfv-virtualApplicationDetail-iui-field-currentStepName"), "bSortable": false, "sWidth":"15%"},
+ {"mData": "status", name: $.i18n.prop("nfv-virtualApplicationDetail-iui-field-currentStepStatus"), "bSortable": false, "sWidth":"10%"},
+ {"mData": "percent", name: $.i18n.prop("nfv-virtualApplicationDetail-iui-field-percent"), "bSortable": false, "sWidth":"10%"},
+ {"mData": "description", name: $.i18n.prop("nfv-virtualApplicationDetail-iui-field-currentStepDesc"), "bSortable": false, "sWidth":"50%"},
+ {"mData": "currentTime", name: $.i18n.prop("nfv-virtualApplicationDetail-iui-field-executionTime"), "bSortable": true, "sWidth":"15%"}
+ ]
+ },
+ $initEventsTable: function() {
+ var setting = {};
+ setting.language = vm.$language;
+ setting.paginate = false;
+ setting.info = false;
+ setting.sort = true;
+ setting.columns = vm.executionTab.$eventsTabFields.table;
+ setting.restUrl = vm.$restUrl.queryEventsInfoUrl;
+ setting.tableId = vm.executionTab.$eventsTabId;
+ serverPageTable.initDataTableForEvent(setting, {},
+ vm.executionTab.$eventsTabId + '_div');
+
+ var oTable = $("#" + setting.tableId).dataTable();
+ oTable.fnSort( [ [4,'asc'] ] );
+ },
+ $instanceId : "",
+ steps : [],
+ $init: function() {
+ vm.executionTab.$initEventsTable();
+ }
+ }
+});
+
+var refreshByCond = function (index) {
+ switch(index) {
+ case 0 :
+ vm.topologyTab.$initTopology(vm.topologyTab.topoTemplateData.$model);
+ vm.executionTab.$initEventsTable();
+ break;
+ case 1 :
+ vm.nodesTab.$initNodesTab();
+ break;
+ }
+}
+
+var initParam = function() { //initialize template detail params
+ var paramStr = window.location.search.substring(1);
+ if(paramStr.length > 0) {
+ var params = paramStr.split("&");
+ var paramArray = [];
+ for(var i=0; i<params.length; i++) {
+ paramArray.push(params[i].substring(params[i].indexOf("=") + 1));
+ }
+
+ avalon.scan();
+ vm.executionTab.$instanceId = paramArray[0];
+ vm.$restUrl.queryNodesInfoUrl = commonUtil.format(vm.$restUrl.queryNodesInfoUrl, paramArray[0]);
+ vm.$restUrl.queryEventsInfoUrl = commonUtil.format(vm.$restUrl.queryEventsInfoUrl, paramArray[0]);
+ vm.$restUrl.queryNodeTemplateUrl = commonUtil.format(vm.$restUrl.queryNodeTemplateUrl, paramArray[1]);
+ vm.templateId = paramArray[1];
+
+ vm.$init();
+ vm.$initCometd();
+ }
+}
+initParam();
\ No newline at end of file diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/js/virtualApplication/vmAppDetailUtil.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/virtualApplication/vmAppDetailUtil.js new file mode 100644 index 00000000..8684cade --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/js/virtualApplication/vmAppDetailUtil.js @@ -0,0 +1,80 @@ +/*
+ * 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 vmAppDetailUtil = {};
+vmAppDetailUtil.timer = null;
+
+vmAppDetailUtil.nameRender = function(obj) {
+ return '<a href="#" onclick="vm.nodesTab.nodesDetail.$showDetails('
+ + '\'block\',\'' + obj.aData.nodeTemplateId + '\', \'' + obj.aData.nodeName + '\')">' + obj.aData.nodeName + '</a>';
+}
+
+/**
+ * Content is too long, add the tooltip
+ * @param {[type]} obj [description]
+ * @return {[type]} [description]
+ */
+vmAppDetailUtil.keyRender = function(obj) {
+ return '<span title="' + obj.aData.key + '">' + obj.aData.key + '</span>';
+}
+
+vmAppDetailUtil.valueRender = function(obj) {
+ return '<span title="' + obj.aData.value + '">' + obj.aData.value + '</span>';
+}
+
+vmAppDetailUtil.sourceNodeNameRender = function(obj) {
+ return '<span title="' + obj.aData.sourceNodeName + '">' + obj.aData.sourceNodeName + '</span>';
+}
+
+vmAppDetailUtil.targetNodeNameRender = function(obj) {
+ return '<span title="' + obj.aData.targetNodeName + '">' + obj.aData.targetNodeName + '</span>';
+}
+
+vmAppDetailUtil.typeRender = function(obj) {
+ return '<span title="' + obj.aData.type + '">' + obj.aData.type + '</span>';
+}
+
+vmAppDetailUtil.initSteps = function() {
+ $.ajax({
+ type : "GET",
+ url : vm.$restUrl.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
+ });
+ }
+ }
+ }
+ });
+}
+
+vmAppDetailUtil.initTopoData = function(topoTemplateData) {
+ $.ajax({
+ type : "GET",
+ url : vm.$restUrl.queryNodesInfoUrl,
+ data : "json",
+ success : function(resp){
+ topoUtil.initTopoData(topoTemplateData, resp);
+ }
+ });
+}
diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/js/virtualApplication/vmAppUtil.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/virtualApplication/vmAppUtil.js new file mode 100644 index 00000000..24e8305e --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/js/virtualApplication/vmAppUtil.js @@ -0,0 +1,510 @@ +/*
+ * 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 vmAppUtil = {};
+
+vmAppUtil.COLUMN_STATUS_INDEX = 4;
+vmAppUtil.COLUMN_OPERATION_INDEX = 5;
+vmAppUtil.TYPE_SUCCESS = "success";
+vmAppUtil.TYPE_DANGER = "danger";
+
+vmAppUtil.nameRender = function(obj) {
+ return '<a href="#" onclick="vm.$openDetail(\'' + obj.aData.instanceId + '\', '
+ + '\'' + obj.aData.serviceTemplateId + '\')">' + obj.aData.instanceName + '</a>';
+}
+
+vmAppUtil.operationRender = function(obj) {
+ var table = $('#' + vm.$tableId).dataTable();
+ var row = obj.iDataRow;
+ var operationInfo = table.fnGetData(row)["operationInfo"];
+ var instanceOperating = table.fnGetData(row)["instanceOperating"];
+ var instanceStatus = table.fnGetData(row)["instanceStatus"];
+ var disabled = "";
+
+ var statusText = $.i18n.prop("nfv-virtualApplication-iui-status-" + instanceOperating);
+ if (status.indexOf("nfv-virtualApplication") > -1) {
+ statusText = $.i18n.prop("nfv-virtualApplication-iui-status-execute");
+ }
+ if($(instanceStatus).text() == statusText) {
+ disabled = "disabled";
+ }
+
+ var optionHtml = "<option></option>";
+ if (operationInfo) {
+ for(var i=0; i<operationInfo.length; i++) {
+ var name = $.i18n.prop("nfv-virtualApplication-iui-operation-" + operationInfo[i].operationname);
+ if (name.indexOf("nfv-virtualApplication") > -1) {
+ name = operationInfo[i].operationname;
+ }
+
+ if (operationInfo[i].operationid == instanceOperating) {
+ optionHtml += "<option value=" + operationInfo[i].operationid + " selected>" + name + "</option>";
+ } else {
+ optionHtml += "<option value=" + operationInfo[i].operationid + ">" + name + "</option>";
+ }
+ }
+ }
+ return '<span><span class="span-action"><select name="type" ' + disabled + '>' + optionHtml + '</select></span>'
+ + '  <button type="button" ' + disabled + ' class="btn blue1 btn-sm btn-operation" '
+ + 'onclick="vmAppUtil.execute('+ obj.iDataRow +')"><i class="ict-start"></i></button></span>';
+};
+
+vmAppUtil.statusRender = function(obj) {
+ var attr = 'class="label label-success"';
+ var status = $.i18n.prop("nfv-virtualApplication-iui-status-" + obj.aData.instanceStatus);
+ if (obj.aData.instanceStatus == "failed") {
+ attr = 'class="label label-danger"';
+ } else if (obj.aData.instanceStatus == "processing") {
+ status = $.i18n.prop("nfv-virtualApplication-iui-status-" + obj.aData.instanceOperating);
+ if (status.indexOf("nfv-virtualApplication") > -1) {
+ status = $.i18n.prop("nfv-virtualApplication-iui-status-execute");
+ }
+ }
+ return '<span ' + attr + '>' + status + '</span>';
+};
+
+vmAppUtil.delRender = function(obj) {
+ return '<div><a href="#" class="btn-xs grey btn-editable" onclick="vmAppUtil.deleteVmApp(\''
+ + obj.aData.instanceId + '\', \'' + obj.aData.serviceTemplateId + '\')">'
+ + '<i class=\"ict-delete\"></i>' + $.i18n.prop('nfv-software-iui-action-delete') + '</a></div>';
+};
+
+vmAppUtil.dateRender = function(obj) {
+ var date = new Date(obj.aData[obj.mDataProp]);
+ return commonUtil.parseDate(date, "yyyy-MM-dd hh:mm:ss");
+};
+
+vmAppUtil.deleteVmApp = function(instanceId, servicetemplateid) {
+ bootbox.confirm($.i18n.prop("nfv-virtualApplication-iui-message-delete-confirm"), function(result){
+ if(result) {
+ var url = vm.$restUrl.deleteAppinstancesUrl + instanceId;
+ $.ajax({
+ type : "delete",
+ url : url,
+ dataType : "json",
+ success : function(resp) {
+ if(resp.deleteresult == "true"){
+ var packageurl = vm.$restUrl.delInstanceTemplateUrl + servicetemplateid;
+ commonUtil.delete(packageurl, function(resp) {
+ refreshByCond();
+ });
+ }else{
+ commonUtil.showMessage($.i18n.prop("nfv-virtualApplication-iui-message-delete-fail"), vmAppUtil.TYPE_DANGER);
+ refreshByCond();
+ }
+ },
+ error : function() {
+ commonUtil.showMessage($.i18n.prop("nfv-virtualApplication-iui-message-delete-fail"), vmAppUtil.TYPE_DANGER);
+ refreshByCond();
+ }
+ });
+ }
+ });
+};
+
+vmAppUtil.execute = function(row) {
+ var oSelect = $("tbody tr select").eq(row);
+ var operation = oSelect.find("option:selected").val();
+ if (operation) {
+ var table = $('#' + vm.$tableId).dataTable();
+ var templateId = table.fnGetData(row)["serviceTemplateId"];
+ var url = vm.$restUrl.queryOperationParamsUrl + templateId + "/operations/" + operation + "/parameters";
+ //query operation params
+ commonUtil.get(url, null, function(data) {
+ //empty operation params
+ vm.vmAppDialog.operationParams = [];
+ //empty template input params
+ vm.vmAppDialog.templateInputParams = [];
+ if(vmAppUtil.isScaleOperation(operation)) {
+ vm.vmAppScaleDialog.operation = operation;
+ vm.vmAppScaleDialog.currentRow = row;
+ vm.vmAppScaleDialog.instanceId = table.fnGetData(row)["instanceId"];
+ vm.vmAppScaleDialog.templateId = templateId;
+ vm.vmAppScaleDialog.$initScaleParams();
+ $("#scaleModal").modal("show");
+ } else if ((data && data.length > 0)) {
+ vm.vmAppDialog.type = "execute";
+ vm.vmAppDialog.title = $.i18n.prop("nfv-virtualApplication-iui-text-params");
+ vm.vmAppDialog.btnTitle = $.i18n.prop("nfv-virtualApplication-iui-text-confirmBtn");
+ vm.vmAppDialog.operation = operation;
+ vm.vmAppDialog.currentRow = row;
+ vm.vmAppDialog.templateId = templateId;
+ vm.vmAppDialog.operationParams = data;
+ vm.vmAppDialog.$initData();
+ $("#vmAppDialog").modal("show");
+ } else {
+ var group = {
+ flavor : "",
+ flavorParams : [],
+ operationParams : []
+ }
+ vmAppUtil.executeOperation(group, row, operation);
+ }
+ });
+ }
+};
+
+vmAppUtil.executeOperation = function(group, row, operation) {
+ vmAppUtil.changeBtnStatus("processing", operation, row, true);
+ var table = $('#' + vm.$tableId).dataTable();
+ var instanceId = table.fnGetData(row)["instanceId"];
+ var url = vm.$restUrl.executeOperationUrl + instanceId + "/operations/" + operation;
+ $.ajax({
+ type : "POST",
+ url : url,
+ data : JSON.stringify(group),
+ contentType : "application/json",
+ dataType : "json",
+ error : function() {
+ vmAppUtil.changeBtnStatus("failed", operation, row, false);
+ }
+ });
+ if(vmAppUtil.isScaleOperation(operation)) {
+ $("#scaleModal").modal("hide");
+ } else {
+ $("#vmAppDialog").modal("hide");
+ }
+};
+
+vmAppUtil.changeBtnStatus = function(status, operation, row, disabled) {
+ var table = $('#' + vm.$tableId).dataTable();
+ var oBtn = $("tbody tr button i.ict-start").eq(row).parent();
+ var oSelect = $("tbody tr select").eq(row);
+
+ oSelect.attr("disabled", disabled);
+ oBtn.attr("disabled", disabled);
+ table.fnUpdate(status, row, vmAppUtil.COLUMN_STATUS_INDEX, false, false);
+ table.fnUpdate(operation, row, vmAppUtil.COLUMN_OPERATION_INDEX, false, false);
+};
+
+vmAppUtil.queryTemplate = function() {
+ var url = vm.$restUrl.queryServiceTemplate + "&status=Enabled";
+ commonUtil.get(url, null, function(data) {
+ vm.vmAppDialog.templateSelectItems = data || [];
+ });
+};
+
+vmAppUtil.queryFlavorParam = function(templateId, flavorName) {
+ var url = vm.$restUrl.queryFlavorParamUrl + templateId + "/flavors/" + flavorName + "/parameters";
+ commonUtil.get(url, null, function(data) {
+ vm.vmAppDialog.flavorParams = data || [];
+ });
+};
+
+vmAppUtil.queryVimInfo = function() {
+ var url = vm.$restUrl.queryVimInfoUrl;
+ commonUtil.get(url, null, function(resp) {
+ if (resp) {
+ vm.vmAppDialog.vimSelectItems = resp.data;
+ }
+ });
+};
+
+vmAppUtil.queryVnfmInfo = function() {
+ var url = vm.$restUrl.queryVnfmInfoUrl;
+ commonUtil.get(url, null, function(resp) {
+ if (resp) {
+ vm.vmAppDialog.vnfmSelectItems = resp.data;
+ }
+ });
+};
+
+vmAppUtil.queryVnfInfo = function(templateId) {
+ var url = vm.$restUrl.queryVnfInfoUrl + templateId + "/vnftemplates";
+ commonUtil.get(url, null, function(resp) {
+ if (resp) {
+ vm.vmAppDialog.vnfItems = resp;
+ }
+ });
+};
+
+vmAppUtil.newApp = function(param) {
+ $.ajax({
+ type : "POST",
+ url : vm.$restUrl.newAppinstancesUrl,
+ contentType : "application/json",
+ data : JSON.stringify(param),
+ dataType : "text",
+ success : function(data) {
+ refreshByCond();
+ commonUtil.showMessage($.i18n.prop("nfv-virtualApplication-iui-message-create-success"), vmAppUtil.TYPE_SUCCESS);
+ },
+ error : function() {
+ refreshByCond();
+ commonUtil.showMessage($.i18n.prop("nfv-virtualApplication-iui-message-create-fail"), vmAppUtil.TYPE_DANGER);
+ }
+ });
+ $("#vmAppDialog").modal("hide");
+
+};
+
+vmAppUtil.isScaleOperation = function(operation) {
+ if(operation == "scaleIn" || operation == "scaleOut") {
+ return true;
+ } else {
+ return false;
+ }
+}
+
+vmAppUtil.generateGourpParams = function(data) {
+ var groupParams = [];
+ $.each(data, function(index, group){
+ var groupParam = {
+ groupName : group.groupName,
+ params : []
+ }
+ $.each(group.params, function(index, element){
+ var id = vm.vmAppDialog.$getGoupParamKey(group.groupName, element.key);
+ var value = $("#" + id).val();
+ if(value) {
+ var param = {
+ key : element.key,
+ value : value
+ }
+ groupParam.params.push(param);
+ }
+ });
+ if(groupParam.params.length) {
+ groupParams.push(groupParam);
+ }
+ });
+ return groupParams;
+}
+
+vmAppUtil.generateAdditionalParams = function(data) {
+ var additionalParams = [];
+ $.each(data, function(index, group){
+ var param = {
+ key : "object_" + group.groupName, //前缀objec_标识为value是一个对象字符串，方便plan解析参数
+ value : ""
+ }
+ var templateParam = {};
+ $.each(group.params, function(index, element){
+ var id = vm.vmAppDialog.$getGoupParamKey(group.groupName, element.key);
+ var value = $("#" + id).val();
+ if(value) {
+ templateParam[element.key] = value;
+ } else {
+ templateParam[element.key] = "";
+ }
+ });
+ param.value = JSON.stringify(templateParam);
+ additionalParams.push(param);
+ });
+ return additionalParams;
+}
+
+vmAppUtil.generateVNFRelationInfos = function(data) {
+ var vnfRelationInfos = [];
+ $.each(data, function(index, element){
+ var info = {
+ vnfdid : element.templateid,
+ vnfmid : $("#" + element.templateid).val()
+ }
+ vnfRelationInfos.push(info);
+ });
+ return vnfRelationInfos;
+}
+
+vmAppUtil.delVduRender = function(obj) {
+ return '<div><a href="#" class="btn-xs grey btn-editable" onclick="vmAppUtil.deleteVdu(\''
+ + obj.aData.id + '\', \'' + obj.aData.vnfId + '\')">'
+ + '<i class=\"ict-delete\"></i>' + $.i18n.prop('nfv-software-iui-action-delete') + '</a></div>';
+}
+
+vmAppUtil.deleteVdu = function(vduId, vnfId) {
+ var oTable = $("#" + vm.vmAppScaleDialog.$tableId).dataTable();
+ var tableData = oTable.fnGetData();
+ for(i=0;i<tableData.length;i++) {
+ if((tableData[i].id == vduId) && (tableData[i].vnfId == vnfId)) {
+ //remove the vdu from vduTableData
+ oTable.fnDeleteRow(i);
+ break;
+ }
+ }
+}
+
+vmAppUtil.checkRender = function(obj) {
+ var checkHtml = "";
+ var oid = obj.aData.oid;
+ //get selected vdu node instanceid
+ var iCheckData = vm.vmAppScaleDialog.currentVnfData.vduTableData;
+ for(var i=0;i<iCheckData.length;i++) {
+ if(oid == iCheckData[i].oid) {
+ checkHtml = "checked";
+ break;
+ }
+ }
+ return '<input type="checkbox" class="form-control" '+checkHtml+'/>';
+}
+
+vmAppUtil.queryScalableVnfInfo = function(templateId) {
+ var url = vm.$restUrl.queryVnfInfoUrl + templateId + "/vnftemplates";
+ $.ajax({
+ type : "GET",
+ url : url,
+ dataType : "json",
+ success : function(resp) {
+ resp = resp || [];
+ for(var i=0; i<resp.length; i++) {
+ var vnfData = {
+ id : resp[i].templateid,
+ name : resp[i].name,
+ operationType : "",
+ vduTypeList : [],
+ vduTableData : [],
+ vduTypeStr : "",
+ vduNumStr : "",
+ vduNameStr : ""
+ }
+ var nodetemplates = resp[i].nodetemplates;
+ for(var j=0; j<nodetemplates.length; j++) {
+ //only display these vdus which have the scalable attribute
+ if(nodetemplates[j].scalable && (nodetemplates[j].parentType.indexOf(".VDU") > -1)) {
+ vnfData.vduTypeList.push(nodetemplates[j]);
+ }
+ }
+
+ if(vnfData.vduTypeList.length) {
+ vm.vmAppScaleDialog.vnfSelectItems.push(vnfData);
+ }
+ }
+ }
+ });
+}
+
+vmAppUtil.queryScalableVduInstance = function(instanceId, vnfTemplateId, vduTypeList) {
+ //query vnf instances by ns id
+ var vnfUrl = vm.$restUrl.queryRocInfoBaseUrl + "/vnfs?nsId=" + instanceId;
+ //var vnfUrl = vm.$restUrl.queryRocInfoBaseUrl + "/vnfs/" + instanceId;
+ $.ajax({
+ type : "GET",
+ url : vnfUrl,
+ dataType : "json",
+ success : function(resp) {
+ if(resp.operationResult == "SUCCESS") {
+ var data = resp.data;
+ for(var i=0; i<data.length; i++) {
+ if(data[i].type == vnfTemplateId) {
+ //query vdu node instances by vnf id
+ var vduUrl = vm.$restUrl.queryRocInfoBaseUrl + "/vdus?vnfId=" + data[i].oid;
+ $.ajax({
+ type : "GET",
+ url : vduUrl,
+ dataType : "json",
+ success : function(resp) {
+ if(resp.operationResult == "SUCCESS") {
+ var vduInstanceNodes = resp.data;
+ var data = [];
+ for(var j=0; j<vduInstanceNodes.length; j++) {
+ if($.inArray(vduInstanceNodes[j].type, vduTypeList)) {
+ data.push(vduInstanceNodes[j]);
+ }
+ }
+ vm.vmAppScaleDialog.$initTable("instance", data);
+ }
+ }
+ });
+ break;
+ }
+ }
+ }
+ }
+ });
+}
+
+vmAppUtil.generateScaleParams = function(vnfDatas) {
+ var scaleParams = [];
+ for(var i=0; i<vnfDatas.length; i++) {
+ var param = {
+ key : "object_VNF_" + vnfDatas[i].id, //前缀object_VNF_标识为value是一个对象字符串，方便plan解析参数
+ value : ""
+ }
+ var aspect = {};
+ //get vdu input param
+ if(vnfDatas[i].operationType == "type") {
+ aspect.scaleBy = "byType";
+ aspect.vduTypes = [];
+ $.each(vnfDatas[i].vduTableData, function(index, element){
+ var vduType = {
+ vduType : element.id,
+ instancesNum : element.num,
+ vduName : element.name
+ }
+ aspect.vduTypes.push(vduType);
+ });
+ } else {
+ aspect.scaleBy = "byInstance";
+ aspect.vduInstances = [];
+ $.each(vnfDatas[i].vduTableData, function(index, element){
+ var vduInstance = {
+ vduId : element.oid
+ }
+ aspect.vduInstances.push(vduInstance);
+ });
+ }
+ param.value = JSON.stringify(aspect);
+ scaleParams.push(param);
+ }
+ return scaleParams;
+}
+
+vmAppUtil.initFormValidator = function(formId) {
+ $(function(){
+ var form = $("#" + formId);
+ var error = $('.alert-danger', form);
+ var success = $('.alert-success', form);
+
+ $.extend($.validator.messages, {
+ required: $.i18n.prop("nfv-virtualApplication-iui-validate-inputParam"),
+ digits: $.i18n.prop("nfv-virtualApplication-iui-validate-digits"),
+ range: $.i18n.prop("nfv-virtualApplication-iui-validate-range")
+ });
+
+ form.validate({
+ doNotHideMessage : true,
+ errorElement : 'span',
+ errorClass : 'help-block',
+ focusInvalid : false,
+ errorPlacement : function(error, element) {
+ error.insertAfter(element);
+ },
+ invalidHandler : function(event, validator) {
+ success.hide();
+ error.show();
+ },
+ highlight : function(element) {
+ $(element).closest("div").removeClass("has-success").addClass("has-error");
+ },
+ unhighlight: function (element) {
+ $(element).closest("div").removeClass("has-error");
+ },
+ success : function(label) {
+ label.addClass("valid").closest(".form-group").removeClass("has-error");
+ },
+ submitHandler: function (form) {
+ success.show();
+ error.hide();
+ }
+ });
+ });
+}
+
+vmAppUtil.isNSTemplate = function(type) {
+ if(type == "NS") {
+ return true;
+ }
+ return false;
+}
\ No newline at end of file diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/js/vnfm/vnfm-validate.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/vnfm/vnfm-validate.js new file mode 100644 index 00000000..a257dd63 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/js/vnfm/vnfm-validate.js @@ -0,0 +1,66 @@ +$(function(){
+ var form = $('#vnfm_form');
+ var error = $('.alert-danger', form);
+ var success = $('.alert-success', form);
+
+ form.validate({
+ doNotHideMessage: true, //this option enables to show the error/success messages on tab switch.
+ errorElement: 'span', //default input error message container
+ errorClass: 'help-block', // default input error message class
+ focusInvalid: false, // do not focus the last invalid input
+ rules: {
+ name:{
+ required: true,
+ maxlength:20
+ },
+ moc:{
+ required: true,
+ maxlength:20
+ },
+ vimId:{
+ required: true,
+ },
+ url:{
+ required: true,
+ url: true
+ }
+ },
+ messages: {
+ name:{
+ required: $.i18n.prop("nfv-vnfm-iui-validate-name")
+ },
+ moc:{
+ required: $.i18n.prop("nfv-vnfm-iui-validate-moc")
+ },
+ vimId:{
+ required: $.i18n.prop("nfv-vnfm-iui-validate-vim")
+ },
+ url:{
+ required: $.i18n.prop("nfv-vnfm-iui-validate-url-required"),
+ url: $.i18n.prop("nfv-vnfm-iui-validate-url")
+ }
+ },
+ errorPlacement: function (error, element) { // render error placement for each input type
+ error.insertAfter(element); // for other inputs, just perform default behavior
+ },
+ invalidHandler: function (event, validator) { //display error alert on form submit
+ success.hide();
+ error.show();
+ },
+ highlight: function (element) { // hightlight error inputs
+ $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group
+ },
+ unhighlight: function (element) { // revert the change done by hightlight
+ $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group
+ },
+ success: function (label) {
+ label.addClass('valid') // mark the current input as valid and display OK icon
+ .closest('.form-group').removeClass('has-error'); // set success class to the control group
+ },
+ submitHandler: function (form) {
+ success.show();
+ error.hide();
+ //add here some ajax code to submit your form or just call form.submit() if you want to submit the form without ajax
+ }
+ });
+});
\ No newline at end of file diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/js/vnfm/vnfmController.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/vnfm/vnfmController.js new file mode 100644 index 00000000..48368cd8 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/js/vnfm/vnfmController.js @@ -0,0 +1,275 @@ +/*
+ * 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 : "vnfmController",
+ vnfmInfo : [],
+ mocSelectItems : [],
+ vimSelectItems : [],
+ server_rtn:{
+ info_block:false,
+ warning_block:false,
+ rtn_info:"",
+ $RTN_SUCCESS:"RTN_SUCCESS",
+ $RTN_FAILED:"RTN_FAILED"
+ },
+ $Status :{
+ success:"active",
+ failed:"inactive"
+ },
+ $restUrl : {
+ queryVnfmInfoUrl : '/api/nsoc/v1/vnfms',
+ addVnfmInfoUrl : '/api/nsoc/v1/vnfms',
+ updateVnfmInfoUrl : '/api/nsoc/v1/vnfms/',
+ delVnfmInfoUrl : '/api/nsoc/v1/vnfms/',
+ queryMocUrl : '',
+ queryVimUrl : '/api/roc/v1/resource/vims'
+ },
+ $htmlText:{
+ saveSuccess:$.i18n.prop("nfv-vnfm-iui-message-save-success"),
+ saveFail:$.i18n.prop("nfv-vnfm-iui-message-save-fail"),
+ updateSuccess:$.i18n.prop("nfv-vnfm-iui-message-update-success"),
+ updateFail:$.i18n.prop("nfv-vnfm-iui-message-update-fail")
+ },
+ $initTable : function() {
+ $.ajax({
+ "type": 'GET',
+ "url": vm.$restUrl.queryVnfmInfoUrl,
+ "dataType": "json",
+ "success": function (resp) {
+ vm.vnfmInfo = resp;
+ },
+ error: function(XMLHttpRequest, textStatus, errorThrown) {
+ bootbox.alert($.i18n.prop("nfv-vnfm-iui-message-query-fail") + "："+textStatus+":"+errorThrown);
+ return;
+ },
+ complete: function() {
+ vnfmUtil.tooltipVnfmStatus();
+ }
+ });
+ },
+ $initMoc : function() {
+ /*var url = vm.$restUrl.queryMocUrl;
+ commonUtil.get(url, null, function(resp) {
+ if (resp) {
+ vm.addVnfm.moc = resp.data;
+ }
+ });*/
+ var resp = [
+ { id : "nfv.vnfm.eco", name : "VNFM(ECO)"},
+ { id : "nfv.vnfm.tacker", name : "VNFM(Tacker)"},
+ { id : "nfv.vnfm.cmcc", name : "VNFM(CMCC)"},
+ { id : "nfv.vnfm.etsi", name : "VNFM(ETSI)"}
+ ]
+ vm.mocSelectItems = resp;
+ },
+ $initVim : function() {
+ $.ajax({
+ type : 'get',
+ url : vm.$restUrl.queryVimUrl,
+ dataType : 'json',
+ success : function(resp) {
+ if(resp && resp.data) {
+ vm.vimSelectItems = resp.data;
+ }
+ }
+ });
+ },
+ addVnfm : {
+ title : $.i18n.prop("nfv-vnfm-iui-text-register"),
+ vnfmId : "",
+ name : "",
+ moc : "",
+ mocDisabled : false,
+ vimId : "",
+ vimVisiable : false,
+ vendor : "",
+ url : "",
+ urlTip : $.i18n.prop("nfv-vnfm-iui-text-url-tip"),
+ userName : "",
+ password : "",
+ saveType :"add",
+ status: ""
+ },
+ $showVnfmTable : function() {
+ vm.addVnfm.title = $.i18n.prop("nfv-vnfm-iui-text-register"),
+ vm.addVnfm.vnfmId = "";
+ vm.addVnfm.name = "";
+ vm.addVnfm.moc = "";
+ vm.addVnfm.mocDisabled = false;
+ vm.addVnfm.vimId = "";
+ vm.addVnfm.vimVisiable = false;
+ vm.addVnfm.vendor = "";
+ vm.addVnfm.url = "";
+ vm.addVnfm.userName = "";
+ vm.addVnfm.password = "";
+ vm.addVnfm.saveType = "add";
+ vm.server_rtn.warning_block=false;
+ vm.server_rtn.info_block=false;
+ vm.$initMoc();
+ vm.$initVim();
+ vm.$mocChange();
+
+ $(".form-group").each(function () {
+ $(this).removeClass('has-success');
+ $(this).removeClass('has-error');
+ $(this).find(".help-block[id]").remove();
+ });
+ $("#addVnfmDlg").modal("show");
+ },
+ $getMocName : function(mocId) {
+ var items = vm.mocSelectItems;
+ for(var i=0;i<items.length;i++) {
+ if(items[i].id == mocId) {
+ return items[i].name;
+ }
+ }
+ return "";
+ },
+ $saveVnfm : function() {
+ var form = $('#vnfm_form');
+ if (form.valid() == false) {
+ return false;
+ }
+ vm.server_rtn.info_block=true;
+ vm.server_rtn.warning_block=false;
+ vm.addVnfm.status=vm.$Status.success;
+
+ var param = {
+ name : vm.addVnfm.name,
+ status : vm.addVnfm.status,
+ moc : $("#moc").val(),
+ vimId : vm.$getVimId($("#moc").val()),
+ vendor : vm.addVnfm.vendor,
+ url : vm.addVnfm.url,
+ userName : vm.addVnfm.userName,
+ password : vm.addVnfm.password
+ }
+ //save VIM info
+ if(vm.addVnfm.saveType == "add") {
+ $.ajax({
+ type : "POST",
+ url : vm.$restUrl.addVnfmInfoUrl,
+ data : JSON.stringify(param),
+ dataType : "json",
+ contentType : "application/json",
+ success : function(data) {
+ vm.server_rtn.info_block=false;
+ vm.server_rtn.warning_block=false;
+ if (data) {
+ vm.vnfmInfo = [];
+ vm.$initTable();
+
+ $('#addVnfmDlg').modal('hide');
+ commonUtil.showMessage(vm.$htmlText.saveSuccess, "success");
+ } else {
+ vm.server_rtn.warning_block=true;
+ vm.server_rtn.rtn_info=vm.$htmlText.saveFail;
+ commonUtil.showMessage(vm.$htmlText.saveFail, "failed");
+ }
+ },
+ error: function(XMLHttpRequest, textStatus, errorThrown) {
+ vm.server_rtn.warning_block=true;
+ vm.server_rtn.rtn_info=textStatus+":"+errorThrown;
+ vm.server_rtn.info_block=false;
+ }
+ });
+ } else {
+ $.ajax({
+ type : "PUT",
+ url : vm.$restUrl.updateVnfmInfoUrl+vm.addVnfm.vnfmId,
+ data : JSON.stringify(param),
+ dataType : "json",
+ contentType : "application/json",
+ success : function(data) {
+ vm.server_rtn.info_block=false;
+ vm.server_rtn.warning_block=false;
+ if (data) {
+ for(var i=0;i<vm.vnfmInfo.length;i++){
+ if(vm.vnfmInfo[i].vnfmId == vm.addVnfm.vnfmId) {
+ vm.vnfmInfo[i].name = vm.addVnfm.name;
+ vm.vnfmInfo[i].moc = $("#moc").val();
+ vm.vnfmInfo[i].vimId = vm.$getVimId($("#moc").val());
+ vm.vnfmInfo[i].vendor = vm.addVnfm.vendor;
+ vm.vnfmInfo[i].url = vm.addVnfm.url;
+ vm.vnfmInfo[i].userName = vm.addVnfm.userName;
+ vm.vnfmInfo[i].password = vm.addVnfm.password;
+ vm.vnfmInfo[i].status = vm.addVnfm.status;
+ }
+ }
+ $('#addVnfmDlg').modal('hide');
+ commonUtil.showMessage(vm.$htmlText.updateSuccess,"success");
+ } else {
+ vm.server_rtn.warning_block=true;
+ vm.server_rtn.rtn_info=vm.$htmlText.updateFail;
+ commonUtil.showMessage(vm.$htmlText.updateFail, "failed");
+ }
+ },
+ error: function(XMLHttpRequest, textStatus, errorThrown) {
+ vm.server_rtn.warning_block=true;
+ vm.server_rtn.rtn_info=textStatus+":"+errorThrown;
+ vm.server_rtn.info_block=false;
+ }
+ });
+ }
+ },
+ mocRendered : function(action) {
+ if(vm.addVnfm.saveType === "update" && vm.addVnfm.moc) {
+ var items = vm.mocSelectItems;
+ for(var i=0;i<items.length;i++) {
+ if(items[i].id == vm.addVnfm.moc) {
+ $("#moc")[0].selectedIndex = i;
+ vm.$mocChange();
+ break;
+ }
+ }
+ } else {
+ $("#moc")[0].selectedIndex = 0;
+ }
+ },
+ vimRendered : function(action) {
+ if(vm.addVnfm.saveType === "update") {
+ var items = vm.vimSelectItems;
+ for(var i=0;i<items.length;i++) {
+ if(items[i].oid == vm.addVnfm.vimId) {
+ $("#vimId")[0].selectedIndex = i;
+ break;
+ }
+ }
+ } else {
+ $("#vimId")[0].selectedIndex = 0;
+ }
+ },
+ $mocChange : function() {
+ var mocId = $('#moc').val();
+ if(mocId == "nfv.vnfm.tacker") {
+ vm.addVnfm.vimVisiable = true;
+ } else {
+ vm.addVnfm.vimVisiable = false;
+ }
+ },
+ $getVimId : function(mocId) {
+ if(vm.addVnfm.vimVisiable) {
+ return $("#vimId").val();
+ } else {
+ return "";
+ }
+ }
+ });
+avalon.scan();
+vm.$initTable();
+vm.$initMoc();
\ No newline at end of file diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/js/vnfm/vnfmUtil.js b/nsoc-iui/src/main/resources/webroot/nsoc/js/vnfm/vnfmUtil.js new file mode 100644 index 00000000..f466fe69 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/js/vnfm/vnfmUtil.js @@ -0,0 +1,73 @@ +/*
+ * 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 vnfmUtil = {};
+
+vnfmUtil.delVnfm = function(vnfmId) {
+ bootbox.confirm($.i18n.prop("nfv-vnfm-iui-message-delete-confirm"), function(result){
+ if(result){
+ $.ajax({
+ type : "DELETE",
+ url : vm.$restUrl.delVnfmInfoUrl + vnfmId,
+ dataType : "json",
+ success : function(data) {
+ if(data) {
+ for(var i=0;i<vm.vnfmInfo.length;i++){
+ if(vnfmId == vm.vnfmInfo[i].vnfmId){
+ //delete the vnfm object from vnfm array
+ vm.vnfmInfo.splice(i, 1);
+ break;
+ }
+ }
+ commonUtil.showMessage($.i18n.prop("nfv-vnfm-iui-message-delete-success"), "success");
+ } else {
+ commonUtil.showMessage($.i18n.prop("nfv-vnfm-iui-message-delete-fail"), "warning");
+ }
+ },
+ error : function() {
+ commonUtil.showMessage($.i18n.prop("nfv-vnfm-iui-message-delete-fail"), "warning");
+ }
+ });
+ }
+ });
+}
+
+vnfmUtil.updateVnfm = function(data) {
+ vm.addVnfm.vnfmId = data.vnfmId;
+ vm.addVnfm.name = data.name;
+ vm.addVnfm.moc = data.moc;
+ vm.addVnfm.mocDisabled = true;
+ vm.addVnfm.vendor = data.vendor;
+ vm.addVnfm.url = data.url;
+ vm.addVnfm.userName = data.userName;
+ vm.addVnfm.password = data.password;
+ vm.addVnfm.saveType = "update";
+ vm.addVnfm.title = $.i18n.prop("nfv-vnfm-iui-test-update");
+ vm.server_rtn.info_block=false;
+ vm.server_rtn.warning_block=false;
+ vm.$initMoc();
+ vm.$initVim();
+
+ $(".form-group").each(function () {
+ $(this).removeClass('has-success');
+ $(this).removeClass('has-error');
+ $(this).find(".help-block[id]").remove();
+ });
+ $("#addVnfmDlg").modal("show");
+}
+
+vnfmUtil.tooltipVnfmStatus = function() {
+ $("[data-toggle='tooltip']").tooltip();
+}
\ No newline at end of file diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/softwareMirror.html b/nsoc-iui/src/main/resources/webroot/nsoc/softwareMirror.html new file mode 100644 index 00000000..66e4b479 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/softwareMirror.html @@ -0,0 +1,163 @@ +<!--
+
+ 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="../vendor/bootstrap-fileinput/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
+ <link href="../vendor/jQuery-File-Upload/css/jquery.fileupload.css" rel="stylesheet" />
+ <link href="../component/css/ZteIctIcons/style.css" rel="stylesheet"/>
+ <link href="css/platform/ngict-component.css" rel="stylesheet"/>
+ <link href="css/platform/plugins.css" rel="stylesheet"/>
+ <link href="css/software.css" rel="stylesheet" />
+ <link href="css/fileupload.css" rel="stylesheet" />
+ <style type="text/css">
+ .ms-controller {
+ visibility: hidden;
+ }
+ </style>
+</head>
+<body>
+ <div ms-controller="smController" class="container-fluid ms-controller">
+ <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-software-iui-title" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </div>
+ </div>
+ <div class="separator-line"></div>
+ <div class="uploadBtn">
+ <button class="btn white radius_l" ms-click="uploadSoftwareImage.$showUploadImage"><i class="ict-new"></i>
+ <span id="nfv-software-iui-text-uploadImage" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </button>
+ </div>
+ <div class="row-fluid" data-name="table_zone">
+ <div id='ict_software_table_div'></div>
+ </div>
+
+ <div id="uploadImage" 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-software-iui-text-title" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </h4>
+ </div>
+ <div class="modal-body">
+ <!--<form class="form-horizontal" role="form">
+ <div class="form-group">
+ <label class="col-sm-3 control-label">镜像文件</label>
+ <div class="col-sm-8">
+ <input id="softwareFile" type="file" name="file" class="file"/>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-3 control-label">类型</label>
+ <div class="col-sm-8">
+ <input class="form-control" type="text" id="type" />
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-3 control-label">版本</label>
+ <div class="col-sm-8">
+ <input class="form-control" type="text" id="version"/>
+ </div>
+ </div>
+ </form>-->
+ <form id="softwareFile" class="form-horizontal" role="form" enctype="multipart/form-data">
+ <div class="form-group">
+ <label class="col-sm-3 control-label">
+ <span id="nfv-software-iui-text-image" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </label>
+ <div class="col-sm-8">
+ <div class="input-group fileupload-input">
+ <div id="fileName" class="form-control file-input" style="height: 34px !important;"></div>
+ <span class="input-group-btn">
+ <span class="btn blue1 fileinput-button">
+ <span id="nfv-software-iui-text-image-select" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ <input type="file" name="file" multiple>
+ </span>
+ <!--<button id="fileremove" class="btn btn-default btn-fileinput" type="button" disabled>
+ <span id="nfv-software-iui-text-image-remove" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </button>-->
+ </span>
+ </div><!-- input-group -->
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-3 control-label">
+ <span id="nfv-software-iui-text-type" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </label>
+ <div class="col-sm-8">
+ <input class="form-control" type="text" id="type" />
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-3 control-label">
+ <span id="nfv-software-iui-text-version" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </label>
+ <div class="col-sm-8">
+ <input class="form-control" type="text" id="version"/>
+ </div>
+ </div>
+ </form>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn" data-dismiss="modal">
+ <span id="nfv-software-iui-btn-cancel" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </button>
+ <button type="button" class="btn btn-primary" id="uploadBtn">
+ <span id="nfv-software-iui-btn-upload" 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-fileinput/js/fileinput.min.js" ></script>
+ <script type="text/javascript" src="../vendor/bootstrap-fileinput/js/fileinput_locale_zh.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/softwareMirror/smUtil.js"></script>
+ <script type="text/javascript" src="js/softwareMirror/smController.js"></script>
+</body>
+</html>
\ No newline at end of file diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/template.html b/nsoc-iui/src/main/resources/webroot/nsoc/template.html new file mode 100644 index 00000000..cbc6528c --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/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/nsoc-iui/src/main/resources/webroot/nsoc/templateDetail.html b/nsoc-iui/src/main/resources/webroot/nsoc/templateDetail.html new file mode 100644 index 00000000..bb9917ba --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/templateDetail.html @@ -0,0 +1,126 @@ +<!--
+
+ 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_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.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/tmDetailController.js"></script>
+ <script type="text/javascript" src="js/template/topoUtil.js"></script>
+</body>
+</html>
\ No newline at end of file diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/topology.html b/nsoc-iui/src/main/resources/webroot/nsoc/topology.html new file mode 100644 index 00000000..661ae238 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/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 diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/virtualApplication.html b/nsoc-iui/src/main/resources/webroot/nsoc/virtualApplication.html new file mode 100644 index 00000000..76cff61d --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/virtualApplication.html @@ -0,0 +1,280 @@ +<!--
+
+ 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="../vendor/icheck/skins/all.css" rel="stylesheet" type="text/css"/>
+ <link href="../vendor/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" />
+ <link href="../vendor/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" />
+ <link href="../framework/css/ngict-component.css" rel="stylesheet"/>
+ <link href="../framework/css/plugins.css" rel="stylesheet"/>
+ <link href="css/virtualApplication.css" rel="stylesheet" />
+ <style type="text/css">
+ .ms-controller {
+ visibility: hidden;
+ }
+ </style>
+</head>
+<body>
+ <div ms-controller="vmAppController" 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-virtualApplication-iui-title" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </div>
+ </div>
+ <div class="separator-line"></div>
+ <div class="uploadBtn">
+ <button class="btn white radius_l" ms-click="showCreateApp"><i class="ict-new"></i>
+ <span id="nfv-virtualApplication-iui-text-createVm" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </button>
+ </div>
+ <div class="row-fluid" data-name="table_zone">
+ <div id='ict_virtualApplication_table_div'></div>
+ </div>
+ <div id="vmAppDialog" class="modal fade" tabindex="-1" role="dialog"
+ aria-labelledby="myModalLabel" aria-hidden="false" data-modal-overflow="true">
+ <!--<div class="modal-dialog">
+ <div class="modal-content">
+ <div class="content">-->
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal"
+ aria-hidden="true">×
+ </button>
+ <h4 class="modal-title" id="myModalLabel">
+ <span ms-text="vmAppDialog.title"></span>
+ </h4>
+ </div>
+ <form class="form-horizontal" role="form" id="vmAppForm">
+ <div id="wizard">
+ <div class="modal-body">
+ <ul class="nav nav-pills nav-justified vmapp-margin">
+ <li><a href="#basicTab" data-toggle="tab">
+ <span id="nfv-virtualApplication-iui-text-tab-basic" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </a></li>
+ <li><a href="#flavorTab" data-toggle="tab">
+ <span id="nfv-virtualApplication-iui-text-tab-flavor" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </a></li>
+ <li><a href="#inputParamTab" data-toggle="tab">
+ <span id="nfv-virtualApplication-iui-text-tab-operationParam" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </a></li>
+ </ul>
+ <div class="tab-content">
+ <div class="tab-pane" id="basicTab">
+ <div class="form-group">
+ <label class="col-sm-3 control-label">
+ <span id="nfv-virtualApplication-iui-text-name" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ <span class="required" aria-required="true">*</span>
+ </label>
+ <div class="col-sm-7">
+ <input type="text" id="instanceName" name="instanceName" ms-duplex="vmAppDialog.name" class="form-control"/>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-3 control-label">
+ <span id="nfv-virtualApplication-iui-text-description" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </label>
+ <div class="col-sm-7">
+ <input type="text" id="instanceDescription" class="form-control"/>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-3 control-label">
+ <span id="nfv-virtualApplication-iui-text-template" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ <span class="required" aria-required="true">*</span>
+ </label>
+ <div class="col-sm-7">
+ <select class="form-control" id="serviceTemplateName"
+ name="serviceTemplateName" ms-change="vmAppDialog.$templateChange">
+ <option ms-repeat="vmAppDialog.templateSelectItems"
+ ms-attr-data-index="$index"
+ data-repeat-rendered="templateRender">{{el.templatename}}</option>
+ </select>
+ </div>
+ </div>
+ <div class="form-group" ms-if="false">
+ <label class="col-sm-3 control-label">
+ <span id="nfv-virtualApplication-iui-text-templateDes" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </label>
+ <div class="col-sm-7">{{vmAppDialog.description}}</div>
+ </div>
+ <div class="form-group" ms-visible="false">
+ <label class="col-sm-3 control-label">VIM
+ <span class="required" aria-required="true">*</span>
+ </label>
+ <div class="col-sm-7">
+ <select class="form-control" id="vimId" name="vimId">
+ <option ms-repeat="vmAppDialog.vimSelectItems" ms-attr-value="el.oid">{{el.name}}</option>
+ </select>
+ </div>
+ </div>
+ <!--<div class="form-group" ms-repeat-vnf="vmAppDialog.vnfItems"
+ data-repeat-rendered="vnfRender">
+ <label class="col-sm-3 control-label">
+ <span ms-text="vmAppDialog.$getVnfmText(vnf.name)"></span>
+ <span class="required" aria-required="true">*</span>
+ </label>
+ <div class="col-sm-7">
+ <select class="form-control" ms-attr-id="vnf.templateid"
+ ms-attr-name="vnf.templateid">
+ <option ms-repeat="vmAppDialog.vnfmSelectItems" ms-attr-value="el.oid">{{el.name}}</option>
+ </select>
+ </div>
+ </div>-->
+ <div class="form-group">
+ <label class="col-sm-3 control-label">
+ <span id="nfv-virtualApplication-iui-text-vnfm" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ <span class="required" aria-required="true">*</span>
+ </label>
+ <div class="col-sm-7">
+ <select class="form-control" id="vnfmId" name="vnfmId">
+ <option ms-repeat="vmAppDialog.vnfmSelectItems" ms-attr-value="el.oid">{{el.name}}</option>
+ </select>
+ </div>
+ </div>
+ </div><!--end basicTab-->
+ <div class="tab-pane" id="flavorTab">
+ <div class="form-group">
+ <label class="col-sm-3 control-label">
+ <span id="nfv-virtualApplication-iui-text-flavor" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </label>
+ <div class="col-sm-7">
+ <select class="form-control" id="flavor" name="flavor" ms-change="vmAppDialog.$flavorChange">
+ <option ms-repeat="vmAppDialog.flavors" ms-data-desc="el.desc"
+ data-repeat-rendered="flavorRender">{{el.name}}</option>
+ </select>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-3 control-label">
+ <span id="nfv-virtualApplication-iui-text-flavorDesc" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </label>
+ <div class="col-sm-7">
+ <textarea class="form-control" id="flavorDesc" ms-attr-value="vmAppDialog.flavorDesc"></textarea>
+ </div>
+ </div>
+ <div ms-each-group="vmAppDialog.flavorParams"
+ data-each-rendered="paramRender">
+ <div class="vmapp-form-title" ms-text="group.groupName"></div>
+ <div class="form-group" ms-repeat-param="group.params">
+ <label class="col-sm-3 control-label">
+ <span ms-text="vmAppDialog.$getFlavorI18nInfo(param.key)"></span>
+ <span class="required" aria-required="true">*</span>
+ </label>
+ <div class="col-sm-7">
+ <input type="text" ms-attr-id="vmAppDialog.$getGoupParamKey(group.groupName, param.key)" ms-attr-name="vmAppDialog.$getGoupParamKey(group.groupName, param.key)"
+ class="form-control"/>
+ </div>
+ </div>
+ </div><!-- end each flavorParams -->
+ </div><!--end flavorTab-->
+ <div class="tab-pane" id="inputParamTab">
+ <div>
+ <div class="vmapp-form-title" ms-visible="vmAppDialog.operationParams.length"
+ id="nfv-virtualApplication-iui-text-input-planTitle" name_i18n="com_zte_nfv_nsoc_i18n"></div>
+ <div class="form-group" ms-repeat-param="vmAppDialog.operationParams"
+ data-repeat-rendered="operationParamRender">
+ <label ms-if="vmAppDialog.language == 'zh-CN'" class="col-sm-4 control-label"> {{param.paramKey_zh_CN}}
+ <span ms-if="param.required == 'true'" class="required" aria-required="true">*</span>
+ </label>
+ <label ms-if="vmAppDialog.language == 'en-US'" class="col-sm-4 control-label"> {{param.paramKey_en_US}}
+ <span ms-if="param.required == 'true'" class="required" aria-required="true">*</span>
+ </label>
+ <div class="col-sm-7">
+ <input type="text" class="form-control" ms-attr-id="param.paramKey"
+ ms-attr-name="param.paramKey"
+ ms-attr-data-required="param.required"
+ ms-attr-placeholder="param.defaultValue"/>
+ </div>
+ </div><!-- end repeat operationParams -->
+ <div id="templateInput" ms-each-input="vmAppDialog.templateInputParams">
+ <div class="vmapp-form-title" ms-text="input.groupName"></div>
+ <div class="form-group" ms-repeat-param="input.params">
+ <label class="col-sm-4 control-label">
+ <span ms-text="param.key"></span>
+ </label>
+ <div class="col-sm-7">
+ <input type="text" ms-attr-id="vmAppDialog.$getGoupParamKey(input.groupName, param.key)"
+ ms-attr-name="vmAppDialog.$getGoupParamKey(input.groupName, param.key)"
+ class="form-control"/>
+ </div>
+ </div>
+ </div><!-- end each templateInputParams -->
+ <div class="text-center" ms-visible="vmAppDialog.inputParamDescVisible">
+ <span id="nfv-virtualApplication-iui-validate-noinputParam" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </div>
+ </div>
+ </div><!--end inputParamTab-->
+ </div><!--end .tab-content-->
+ </div><!-- end .modal-body -->
+ <div class="modal-footer">
+ <button class="btn" data-dismiss="modal" aria-hidden="true">
+ <span id="nfv-virtualApplication-iui-text-cancelBtn" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </button>
+ <button class="btn button-previous">
+ <span id="nfv-virtualApplication-iui-text-previousBtn" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </button>
+ <button class="btn button-next">
+ <span id="nfv-virtualApplication-iui-text-nextBtn" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </button>
+ <button id="createBtn" class="btn btn-primary" ms-click="vmAppDialog.$confirmBtnClick">
+ <span ms-text="vmAppDialog.btnTitle"></span>
+ </button>
+ </div>
+ </div><!-- end wizard -->
+ </form>
+ <!--</div>
+ </div>
+ </div>-->
+ </div><!-- end .modal -->
+ <div ms-include-src="vmAppDialog.vmAppScaleHtml" data-include-rendered="includeRender"></div>
+ </div><!-- end ms-controller -->
+
+ <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="../component/thirdparty/jquery-validation/js/jquery.validate.min.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/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
+ <script type="text/javascript" src="../vendor/bootstrap-growl/bootstrap-growl.min.js"></script>
+ <script type="text/javascript" src="../vendor/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
+ <script type="text/javascript" src="../vendor/bootstrap-modal/js/bootstrap-modal.js"></script>
+ <script type="text/javascript" src="../vendor/icheck/icheck.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/virtualApplication/validate.js"></script>
+ <script type="text/javascript" src="js/virtualApplication/vmAppUtil.js"></script>
+ <script type="text/javascript" src="js/virtualApplication/vmAppController.js"></script>
+</body>
+</html>
\ No newline at end of file diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/virtualApplicationDetail.html b/nsoc-iui/src/main/resources/webroot/nsoc/virtualApplicationDetail.html new file mode 100644 index 00000000..31e66b31 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/virtualApplicationDetail.html @@ -0,0 +1,144 @@ +<!--
+
+ 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="vmAppDetailController" class="container-fluid ms-controller">
+ <div data-name="tab_zone">
+ <div class="col-xs-12">
+ <ul class="nav nav-tabs" ms-each-tab="templateData">
+ <li ms-class-active="tab.value">
+ <a ms-attr-href="tab.href" data-toggle="tab" ms-text="tab.name" ms-click="tabChange($index)"></a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="tab-content">
+ <div class="tab-pane active" id="topology">
+ <div ms-visible="!topologyTab.eventVisible">
+ <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="separator-icon">
+ <div class="col-md-12" ms-visible="!topologyTab.eventVisible">
+ <a href="#" ms-click="topologyTab.$showEvent"><img src="images/up.png"></a>
+ </div>
+ <div class="col-md-12" ms-visible="topologyTab.eventVisible">
+ <a href="#" ms-click="topologyTab.$showEvent"><img src="images/down.png"></a>
+ </div>
+ </div>
+ <div class="col-md-12">
+ <div class="header">
+ <div class="title"><span id="nfv-virtualApplicationDetail-iui-text-events" name_i18n="com_zte_nfv_nsoc_i18n"></span></div>
+ </div>
+ <div class="containList">
+ <div class="row-fluid" data-name="table_zone" ms-visible="topologyTab.eventVisible">
+ <div class="col-md-12" id='ict_events_table_div' style="margin-top:10px;"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="tab-pane" id="nodes">
+ <div class="row-fluid" data-name="table_zone">
+ <div class="col-md-12" id='ict_nodes_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-virtualApplicationDetail-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.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/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/virtualApplication/vmAppDetailUtil.js"></script>
+ <script type="text/javascript" src="js/virtualApplication/vmAppDetailController.js"></script>
+ <script type="text/javascript" src="js/template/topoUtil.js"></script>
+</body>
+</html>
\ No newline at end of file diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/virtualApplicationScale.html b/nsoc-iui/src/main/resources/webroot/nsoc/virtualApplicationScale.html new file mode 100644 index 00000000..552422f9 --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/virtualApplicationScale.html @@ -0,0 +1,152 @@ +<!--
+
+ 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 id="scaleModal" class="modal fade" tabindex="-1" role="dialog"
+ aria-labelledby="myModalLabel" aria-hidden="true" data-modal-overflow="true">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
+ <h3><span ms-text="vmAppScaleDialog.scaleTitle"></span></h3>
+ </div>
+ <div class="modal-body">
+ <form id="vnfForm" class="form-horizontal" role="form">
+ <div class="form-group">
+ <label class="col-sm-3 control-label">
+ <span id="nfv-virtualApplication-iui-text-scale-name" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </label>
+ <div class="col-sm-7" style="padding-right : 0">
+ <select class="form-control" id="vnfType" name="vnfType" style="display:inline-block;">
+ <option ms-repeat-vnf="vmAppScaleDialog.vnfSelectItems" ms-attr-value="vnf.id"
+ ms-text="vnf.name" ms-attr-data-index="$index"></option>
+ </select>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-3 control-label">
+ <span id="nfv-virtualApplication-iui-text-scale-oeprationType" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </label>
+ <div class="col-sm-7">
+ <label style="margin-top:5px; margin-right:20px;">
+ <input type="radio" name="operationType" value="type" style="margin:0"
+ ms-attr-checked="vmAppScaleDialog.instanceType">
+ <span id="nfv-virtualApplication-iui-text-scale-oeprationType-type" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </label>
+ <label style="margin-top:5px; margin-right:20px;">
+ <input type="radio" name="operationType" value="instance" style="margin:0"
+ ms-attr-disabled="vmAppScaleDialog.instanceType"
+ ms-attr-checked="!vmAppScaleDialog.instanceType">
+ <span id="nfv-virtualApplication-iui-text-scale-oeprationType-instance" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </label>
+ </div>
+ <div class="col-sm-1">
+ <button type="button" class="btn btn-default" ms-click="vmAppScaleDialog.$addVnf('add')" style="min-width:34px;font-size:14px;"
+ ms-attr-title="vmAppScaleDialog.btnTitle">
+ <i class="fa fa-plus-circle"></i>
+ </button>
+ </div>
+ </div>
+ <div class="form-group">
+ <div class="tipArea" ms-visible="vmAppScaleDialog.titleVisible">
+ <span id="nfv-virtualApplication-iui-text-scale-vnf-title" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </div>
+ <div class="col-sm-4" ms-repeat-vnf="vmAppScaleDialog.vnfDatas" data-repeat-rendered="includeRender">
+ <div class="hpanel">
+ <div class="panel-body h-200" ms-hover="hpanel_show">
+ <div>
+ <span id="nfv-virtualApplication-iui-text-scale-vnf-name" name_i18n="com_zte_nfv_nsoc_i18n"></span>：
+ <span ms-text="vnf.name"></span>
+ </div>
+ <div ms-if="vnf.operationType=='type'" class="panel-info">
+ <div>
+ <span id="nfv-virtualApplication-iui-text-scale-vnf-vduType" name_i18n="com_zte_nfv_nsoc_i18n"></span>：
+ <span ms-text="vnf.vduTypeStr"></span>
+ </div>
+ <div>
+ <span id="nfv-virtualApplication-iui-text-scale-vnf-num" name_i18n="com_zte_nfv_nsoc_i18n"></span>：
+ <span ms-text="vnf.vduNumStr"></span>
+ </div>
+ </div>
+ <div ms-if="vnf.operationType=='instance'" class="panel-info">
+ <span id="nfv-virtualApplication-iui-text-scale-vnf-vduInstance" name_i18n="com_zte_nfv_nsoc_i18n"></span>：
+ <span ms-text="vnf.vduNameStr"></span>
+ </div>
+ </div>
+ <div class="panel-footer">
+ <div class="pull-right">
+ <a class="btn btn-default btn-sm" ms-click="vmAppScaleDialog.$addVnf('edit', vnf)">
+ <i class="fa fa-pencil-square-o fa-lg"></i>
+ </a>
+ <a class="btn btn-default btn-sm" ms-click="vmAppScaleDialog.$deleteVnf(vnf.id)"><i class="fa fa-trash-o fa-lg"> </i></a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+ <div class="modal-footer">
+ <button class="btn" data-dismiss="modal" aria-hidden="true">
+ <span id="nfv-virtualApplication-iui-text-scale-instance-cancelBtn" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </button>
+ <button class="btn btn-primary" type="submit" ms-click="vmAppScaleDialog.$confirmBtnClick">
+ <span id="nfv-virtualApplication-iui-text-scale-instance-confirmBtn" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </button>
+ </div>
+</div><!--end scaleModal-->
+
+<div id="addVduModal" class="modal fade" tabindex="-1" role="dialog"
+ aria-labelledby="myModalLabel" aria-hidden="true" data-modal-overflow="true">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
+ <h3><span ms-text="vmAppScaleDialog.title"></span></h3>
+ </div>
+ <div class="modal-body">
+ <form id="vduForm" class="form-horizontal" role="form">
+ <div class="form-group" ms-if="vmAppScaleDialog.typeVisible">
+ <label class="col-sm-2 control-label">
+ <span id="nfv-virtualApplication-iui-text-scale-vnf-vduType" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </label>
+ <div class="col-sm-3" style="padding-right : 0">
+ <select class="form-control" id="vduType" name="vduType">
+ <option ms-repeat-vdu="vmAppScaleDialog.vduSelectItems" ms-attr-value="vdu.id"
+ ms-text="vdu.name"></option>
+ </select>
+ </div>
+ <div class="col-sm-2" style="padding-right : 0">
+ <input type="text" id="vduNum" name="vduNum" class="form-control" ms-attr-placeholder="vmAppScaleDialog.numTip"/>
+ </div>
+ <div class="col-sm-3">
+ <input type="text" id="vduName" name="vduName" class="form-control" ms-attr-placeholder="vmAppScaleDialog.nameTip"/>
+ </div>
+ <button type="button" class="btn btn-default" ms-click="vmAppScaleDialog.$addVduToTable"
+ style="min-width:34px;font-size:14px;">
+ <i class="fa fa-plus-circle"></i>
+ </button>
+ </div>
+ <div class="row-fluid" data-name="table_zone">
+ <div id="ict_vdu_table_div"></div>
+ </div>
+ </form>
+ </div>
+ <div class="modal-footer">
+ <button class="btn" data-dismiss="modal" aria-hidden="true">
+ <span id="nfv-virtualApplication-iui-text-scale-instance-cancelBtn" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </button>
+ <button class="btn btn-primary" type="submit" ms-click="vmAppScaleDialog.$scaleConfirmClick">
+ <span id="nfv-virtualApplication-iui-text-scale-instance-confirmBtn" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </button>
+ </div>
+</div><!-- end addVduModal -->
\ No newline at end of file diff --git a/nsoc-iui/src/main/resources/webroot/nsoc/vnfmView.html b/nsoc-iui/src/main/resources/webroot/nsoc/vnfmView.html new file mode 100644 index 00000000..199d02da --- /dev/null +++ b/nsoc-iui/src/main/resources/webroot/nsoc/vnfmView.html @@ -0,0 +1,194 @@ +<!--
+
+ 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 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="css/platform/animate.min.css" rel="stylesheet"/>
+<link href="css/vnfm.css" rel="stylesheet" />
+<style>
+.ms-controller {
+ visibility: hidden
+}
+</style>
+
+</head>
+<body>
+ <div ms-controller="vnfmController" class="container-fluid ms-controller">
+ <div id="addVnfmDlg" class="modal fade" tabindex="-1" role="dialog"
+ aria-labelledby="myModalLabel" aria-hidden="true" >
+ <div class="modal-dialog">
+ <div class="modal-content Changepasswd">
+ <div class="content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal"
+ aria-hidden="true">×</button>
+ <h4 id="myModalLabel">{{addVnfm.title}}</h4>
+ </div>
+ <div class="modal-body">
+ <form class="form-horizontal" id="vnfm_form" role="form">
+ <input type="hidden" ms-duplex="addVnfm.vnfmId" name="vnfmId" class="form-control" />
+ <div class="form-group">
+ <label class="control-label col-sm-3">
+ <span id="nfv-vnfm-iui-text-name" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ <span class="required" aria-required="true">*</span>
+ </label>
+ <div class="col-sm-7">
+ <input type="text" ms-duplex="addVnfm.name" name="name" class="form-control"/>
+ <span class="help-block"></span>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="control-label col-sm-3">
+ <span id="nfv-vnfm-iui-text-moc" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ <span class="required" aria-required="true">*</span>
+ </label>
+ <div class="col-sm-7">
+ <select class="form-control" id="moc" ms-change="$mocChange" ms-attr-disabled="addVnfm.mocDisabled">
+ <option ms-repeat-moc="mocSelectItems" ms-attr-value="moc.id" data-repeat-rendered="mocRendered">{{moc.name}}</option>
+ </select>
+ <span class="help-block"></span>
+ </div>
+ </div>
+ <div class="form-group" ms-visible="addVnfm.vimVisiable">
+ <label class="col-sm-3 control-label">VIM
+ <span class="required" aria-required="true">*</span>
+ </label>
+ <div class="col-sm-7">
+ <select class="form-control" id="vimId" name="vimId">
+ <option ms-repeat-vim="vimSelectItems" ms-attr-value="vim.oid" data-repeat-rendered="vimRendered">{{vim.name}}</option>
+ </select>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="control-label col-sm-3">
+ <span id="nfv-vnfm-iui-text-vendor" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </label>
+ <div class="col-sm-7">
+ <input type="text" ms-duplex="addVnfm.vendor" name="vendor" class="form-control" />
+ <span class="help-block"></span>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="control-label col-sm-3">
+ <span>URL</span>
+ <span class="required" aria-required="true">*</span>
+ </label>
+ <div class="col-sm-7">
+ <input type="text" ms-duplex="addVnfm.url" name="url" class="form-control"
+ ms-attr-placeholder="addVnfm.urlTip"/>
+ <span class="help-block"></span>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="control-label col-sm-3">
+ <span id="nfv-vnfm-iui-text-userName" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </label>
+ <div class="col-sm-7">
+ <input type="text" ms-duplex="addVnfm.userName" name="userName" class="form-control" />
+ <span class="help-block"></span>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="control-label col-sm-3">
+ <span id="nfv-vnfm-iui-text-password" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </label>
+ <div class="col-sm-7">
+ <input type="password" ms-duplex="addVnfm.password" name="password" class="form-control" />
+ <span class="help-block"></span>
+ </div>
+ </div>
+ </form>
+
+ </div>
+ <div class="modal-footer">
+ <button class="btn" data-dismiss="modal" aria-hidden="true" id="nfv-vnfm-iui-text-cancelBtn" name_i18n="com_zte_nfv_nsoc_i18n"></button>
+ <button class="btn btn-primary" type="submit" ms-click="$saveVnfm" id="nfv-vnfm-iui-text-saveBtn" name_i18n="com_zte_nfv_nsoc_i18n"></button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row-fluid" data-name="cond_zone">
+ <div class="col-md-12">
+ <button class="btn white radius_l" id="app-new-btn" ms-click="$showVnfmTable" >
+ <i class="ict-new"></i> <span id="nfv-vnfm-iui-text-registerBtn" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </button>
+ </div>
+ </div>
+
+ <div class="col-sm-12 vnfm-padding" ms-each-el="vnfmInfo">
+ <div class="col-sm-4 animated-panel zoomIn" style="-webkit-animation-delay: 0.1s;">
+ <div class="hpanel stats" >
+ <div class="panel-body h-200" ms-hover="hpanel_show" >
+ <div class="pull-left">
+ <span class="label label-success" ms-if="el.status === $Status.success" id="nfv-vnfm-iui-text-status-normal" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ <span class="label label-danger" ms-attr-title="el.errorInfo" data-toggle="tooltip" ms-if="el.status === $Status.failed" id="nfv-vnfm-iui-text-status-fail" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+ </div>
+ <div class="stats-icon pull-right">
+ <i class="fa fa-server fa-5x color_cloud"></i>
+ </div>
+ <div class="m-t-xl">
+ <h3 ms-text="el.name"></h3>
+ <div><span id="nfv-vnfm-iui-text-moc" name_i18n="com_zte_nfv_nsoc_i18n"></span>：<span ms-text="$getMocName(el.moc)"></span></div>
+ <div>URL：<span ms-text="el.url"></span></div>
+ </div>
+ </div>
+ <div class="panel-footer">
+ <div class="pull-right">
+ <a class="btn btn-default btn-sm" ms-click="vnfmUtil.updateVnfm(el.$model)"><i class="fa fa-pencil-square-o fa-lg"></i></a>
+ <a class="btn btn-default btn-sm" ms-click="vnfmUtil.delVnfm(el.vnfmId)"><i class="fa fa-trash-o fa-lg"> </i></a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-12">
+ <div class="pull-left text-muted">
+ <small><span id="nfv-vnfm-iui-text-total" name_i18n="com_zte_nfv_nsoc_i18n"></span> <span class="blue-font" ms-text="vnfmInfo.size()"></span> <span id="nfv-vnfm-iui-text-total-vnfm" name_i18n="com_zte_nfv_nsoc_i18n"></span></small>
+ </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/jquery.i18n/jquery.i18n.properties-1.0.9.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/jquery-validation/js/jquery.validate.min.js"></script>
+ <script type="text/javascript" src="../component/thirdparty/jquery-validation/js/additional-methods.min.js"></script>
+
+ <script type="text/javascript" src="../vendor/bootstrap-growl/bootstrap-growl.min.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/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/loadi18n_nsoc.js"></script>
+
+ <script type="text/javascript" src="js/vnfm/vnfm-validate.js"></script>
+ <script type="text/javascript" src="js/vnfm/vnfmUtil.js"></script>
+ <script type="text/javascript" src="js/vnfm/vnfmController.js"></script>
+</body>
+</html>
\ No newline at end of file |
