1 files changed, 902 insertions, 0 deletions
diff --git a/discovery-ui/src/main/resources/iui/microservices/css/route.css b/discovery-ui/src/main/resources/iui/microservices/css/route.css
new file mode 100644
index 0000000..cccc282
--- /dev/null
+++ b/discovery-ui/src/main/resources/iui/microservices/css/route.css
@@ -0,0 +1,902 @@
+/**
+ * Copyright 2016 ZTE, Inc. and others.
+ *
+ * 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 {
+  color: #333;
+  font-family: "Microsoft yahei", Verdana, Arial, Helvetica, sans-serif !important;
+  padding: 0px !important;
+  margin: 0px !important;
+  direction: ltr;
+  background-color: #fff !important; 
+}
+
+a {
+  
+    text-decoration: none;
+   cursor: pointer; 
+}
+
+.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+    cursor: auto;
+
+    }
+.modal-footer {
+    margin-top:0px; 
+  }
+.form-group {
+    margin-bottom: 5px;
+}
+
+.modal-body {
+    padding: 10px;
+}
+
+.row{
+     margin-left: 0px; 
+  margin-right: 0px; 
+}
+
+select {
+  border-width: 1px;
+  padding: 4px 1px;
+  border-radius: 4px;
+}
+
+.navbar {
+  overflow: visible;
+  margin-bottom: 0px;
+
+}
+
+
+.span12{
+  margin-top:10px;
+}
+
+#title {
+  color: #ffffff;
+  font-weight: bolder;
+}
+
+
+div[data-name="route_zone"]  {
+  background-color: #fff;
+  margin-bottom: 15px;
+}
+
+
+
+p[tooltip], div[tooltip], td[tooltip], span[tooltip]{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space:nowrap; 
+}
+
+.add-route-btn{
+  background: #fff;
+  color: #ccc;
+  height: 115px;
+  margin: 10px;
+  padding-top: 22px;
+  text-align: center;
+  text-decoration: none;
+  width: 130px;
+  border:1px dashed #aaa;
+  float:left;
+
+}
+
+.add-route-btn:hover{
+  color:#3276b1;
+  cursor: pointer;
+}
+
+
+.add-route-btn span {
+  display: block;
+  margin-left:5px;
+  margin-right:5px;
+  margin-top:5px;
+  color: #444;
+}
+
+
+.quick-btn {
+  background: #eee;
+  box-shadow: 0 0 0 1px #f8f8f8 inset,0 0 0 1px #ccc;
+  color: #444;
+ height: 110px;
+  margin: 10px;
+  padding-top: 1pc;
+  text-align: center;
+  text-decoration: none;
+  width: 120px;
+  float:left;
+
+}
+div[data-name="route_zone"]  .active{
+	color:#fff;
+	background-color:#444;
+	cursor: pointer;
+}
+
+div[data-name="route_zone"] .sparkline .route-valid {
+    color:#3276b1;
+  }
+
+  div[data-name="route_zone"] .sparkline .route-invalid {
+    color:rgba(128, 128, 128, 0.73);
+  }
+
+div[data-name="route_zone"]  .active .sparkline i{
+    color:#C3DDF4;
+  }
+
+
+
+.quick-btn:hover{
+
+  box-shadow: 0 0 0 1px #f8f8f8 inset,0 0 0 1px #636363;
+  cursor: pointer;
+}
+
+.quick-btn span {
+  display: block;
+  margin-left:5px;
+  margin-right:5px;
+  margin-top:10px;
+
+}
+
+.route-ip{
+	  font-size: 12px;
+}
+
+
+.progressList{
+	margin-top: 15px;
+	margin-left:15px;
+	width:90%
+}
+
+.processContent{
+  display: inline-block;margin-right:5px
+}
+
+.nav.nav-pills.nav-stacked > li.active > a, .nav.nav-pills.nav-stacked > li.active > a:hover,.nav.nav-pills.nav-stacked > li > a:hover {
+  background-color: #f6f6f6;
+  border-left-color: #3c8dbc;
+  color: #444;
+}
+
+
+.nav.nav-pills.nav-stacked > li > a {
+  border-top: 0;
+  border-left: 3px solid transparent;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+  color: #444;
+  height:46px;
+}
+.nav.nav-pills > li.active > a {
+  font-weight: 600;
+}
+
+.btn-xs {
+  color: #333;
+  font-size: 14px;
+}
+.grey {
+  background-color: #e5e5e5;
+  color: #333;
+}
+.btn-xs, .btn-group-xs>.btn {
+  padding: 1px 5px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+
+.control-label .required {
+  color: #e02222;
+  font-size: 12px;
+  padding-left: 2px;
+}
+
+.nav>li>a{
+  /*padding:10px 5px;*/
+}
+
+.process-btn button{
+  padding:3px 8px
+}
+
+pre.prettyprint {
+   color:#000;
+   height: 450px;
+}
+
+pre {
+  font: 14px/22px 'courier new';
+  word-break: break-all;
+  word-wrap: break-word;
+  border: 0px;
+  background-color:#fff;
+  padding: 5px 5px;
+}
+
+.atv {
+  color: #114B7E;
+}
+
+
+
+.stats_box {
+  display: inline-block;
+  list-style: none outside none;
+  margin-left: 0;
+  margin-top: 10px;
+  padding: 0;
+    /*float: left;*/
+}
+
+.stats_box .routeDiv{
+  background: #eee;
+  box-shadow: 0 0 0 1px #f8f8f8 inset,0 0 0 1px #ccc;
+  display: inline-block;
+  line-height: 18px;
+  margin: 0 10px 10px;
+  padding: 0 8px;
+  float: left;
+  height: 125px;
+}
+
+.routeDiv:hover{
+
+  box-shadow: 0 0 0 1px #f8f8f8 inset,0 0 0 1px #636363;
+  cursor: pointer;
+}
+
+
+.sparkline {
+ width: 60px;
+ border-right: 1px solid #dcdcdc;
+  box-shadow: 1px 0 0 0 #fff;
+  float: left;
+  margin-right: 9pt;
+  padding: 25px 10px 0 4px;
+  line-height: 70px
+}
+
+
+
+
+
+.stats_box .stat_text {
+  float: left;
+  font-size: 9pt;
+  padding: 10px 0px 10px 0;
+  text-align: left;
+  width: 120px;
+  position: relative;
+}
+
+.stats_box .stat_text .percent {
+  color: #444;
+  float: right;
+  font-size: 20px;
+  font-weight: 700;
+  position: absolute;
+  right: 0;
+  top: 17px;
+}
+
+.stats_box .stat_text strong {
+  display: block;
+  font-size: 16px;
+  margin-bottom: 10px;
+  margin-top: 5px;
+
+}
+
+.stat_text  span,.stats_box span{
+  display: block;
+  margin-bottom:5px;
+}
+
+
+
+.stats_box span a{ 
+padding: 0px 6px;
+margin-right:3px;
+  }
+
+
+  
+  span.response_throbber {
+  background-image: url('../img/throbber.gif');
+  width: 128px;
+  height: 16px;
+  display: block;
+  clear: none;
+  float: left;
+  margin-top: 50px;
+}
+
+div.separator div {
+  text-align: center;
+  line-height: 0;
+}
+
+.titlefont {
+  font-size: 16px;
+}
+
+.separator-line {
+  height: 1px;
+  width: 100%;
+  background: #ddd;
+  overflow: hidden;
+  margin-bottom: 15px;
+  margin-top: 6px;
+  opacity: 0.6;
+}
+
+
+
+.serverInput{
+  display: inline;
+  margin-right: 5px;
+}
+
+.apiRouteInput{
+  float:left;
+    margin-right: 10px
+}
+  
+  
+.input-group {
+  position: relative;
+  display: table;
+  border-collapse: separate;
+}
+
+ .input-group-btn-vertical {
+  position: relative;
+  white-space: nowrap;
+  width: 10px;
+  vertical-align: middle;
+  display: table-cell;
+}
+
+.input-group-btn-vertical .bootstrap-touchspin-up {
+  border-radius: 0;
+  border-top-right-radius: 4px;
+}
+
+.input-group-btn-vertical>.btn {
+  display: block;
+  float: none;
+  width: 100%;
+  max-width: 100%;
+  padding: 8px 10px;
+  margin-left: -1px;
+  position: relative;
+}
+
+.input-group-btn-vertical i {
+  position: absolute;
+  top: 3px;
+  left: 5px;
+  font-size: 9px;
+  font-weight: 400;
+}
+
+.input-group-btn-vertical .bootstrap-touchspin-down {
+  margin-top: -2px;
+  border-radius: 0;
+  border-bottom-right-radius: 4px;
+}
+
+
+
+.small_btn {
+  padding: 0px 6px;
+  margin-right: 3px;
+}
+
+.item-tip {
+  position: absolute;
+  color: #999999;
+  top: 10px;
+  left: 20px;
+  transition: all linear .2s;
+  background-color: #fff;
+  padding: 0px 3px;
+  font-size: 12px;
+}
+.item-tip-focus {top: -8px;font-size: 12px;color: #428bca;}
+
+.form-input-focus {border-color: #428bca;outline: 0;}
+
+.tip_color {
+    color: #f0ad4e;
+    cursor: help;
+}
+
+.item-tip-none{display: none}
+
+.tipArea{
+  border-bottom: 1px solid #d4d4d4;
+    width: 85%;
+    text-align: center;
+    margin-bottom: 20px;
+    margin-left: 30px;
+    font-weight: bold;
+        position: relative;
+
+}
+
+.tipArea:after, .tipArea:before {
+    border: 10px solid transparent;
+    border-top: 10px solid #fff;
+    width: 0;
+    height: 0;
+    right: 241px;
+    top: 20px;
+    content: ' ';
+    position: absolute;
+}
+
+.tipArea:before {
+    border-top-color: #d4d4d4;
+    left: 230px;
+    top: 21px;
+}
+
+
+.help-block {
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
+
+.form-title {
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    margin-bottom: 10px;
+    margin-left:10px;
+    border-left: 2px solid #5b9bd1;
+    color: #1A78CA;
+    font-size: 16px;
+    margin-top: 10px;
+}
+
+.form-title a{
+      cursor: pointer;
+}
+
+.panel-tools {
+    display: inline-block;
+    float: right;
+    margin-top: 0;
+    padding: 0;
+    position: relative;
+}
+
+.panel-tools a {
+    margin-left: 5px;
+    color: #9d9fa2;
+    cursor: pointer;
+}
+
+.panel-tools  a:hover{
+  color: #34495e;
+  text-decoration: none;
+}
+
+.table-responsive{
+      margin-top: 15px;
+}
+
+.btn-s  {
+    padding: 0px 6px;
+    margin-right: 3px;
+}
+
+
+table.dataTable thead .sorting,
+table.dataTable thead .sorting_asc,
+table.dataTable thead .sorting_desc,
+table.dataTable thead .sorting_asc_disabled,
+table.dataTable thead .sorting_desc_disabled {
+    background: 0 0;
+}
+
+table.dataTable thead .sorting_asc:after {
+    content: "\f0de";
+    float: right;
+    font-family: fontawesome;
+    color:#357ebd;
+}
+
+table.dataTable thead .sorting_desc:after {
+    content: "\f0dd";
+    float: right;
+    font-family: fontawesome;
+    color:#357ebd;
+}
+
+table.dataTable thead .sorting:after {
+    content: "\f0dc";
+    float: right;
+    font-family: fontawesome;
+    color: rgba(50,50,50,.5);
+}
+
+
+.hostTableDiv{
+    height: 100px;
+    overflow: auto;
+  
+  }
+
+.hostTable{
+ font-size: 12px;
+ margin-bottom: 0px;
+}
+
+.detailTable{
+ font-size: 12px;
+ margin-bottom: 0px;
+}
+
+.hostTable>thead>tr>th, .hostTable>tbody>tr>th, .hostTable>tfoot>tr>th, .hostTable>thead>tr>td, .hostTable>tbody>tr>td, .hostTable>tfoot>tr>td {
+    padding: 6px;
+   
+}
+
+.searchDiv{
+   padding-top: 25px;
+    padding-bottom: 15px;   
+     margin: 0 auto;
+    width: 700px;
+}
+
+
+.searchTitle {
+    float: left;
+}
+
+.searchTitle i{
+    font-size: 28px;
+    color: #A7A6A6;
+    margin-top:2px;
+}
+
+.searchInput{
+  float:left;width:450px;margin-right:10px;margin-left:10px
+}
+
+
+td.details-control {
+    background: url('../img/details_open.png') no-repeat center center;
+    cursor: pointer;
+}
+tr.shown td.details-control {
+    background: url('../img/details_close.png') no-repeat center center;
+}
+
+.table-bordered > thead > tr > th{
+    border-bottom-width: 0;
+}
+
+.label, label {
+    font-weight: 400;
+}
+
+.submBtn {
+    text-align: center;
+}
+
+.roleConfirm {
+    margin-top: 25px;
+}
+
+
+/*button*/
+
+.btn {
+
+    letter-spacing: 1px;
+}
+
+.btnGroup{
+  margin-bottom: 10px;
+}
+
+.btnGroup .btn {
+    margin-right: 15px;
+}
+
+.pagination-panel .btn {
+    min-width: 4px;
+}
+
+.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;
+}
+.btn-xs:hover{
+text-decoration:none ;
+}
+
+.grey {
+    background-color: #e5e5e5;
+    color: #333;
+        width: 80px;
+}
+
+.grey:hover {
+    background-color: #d8d8d8;
+    color: #333;
+}
+.blue1 {
+    background-color: #5b9bd1;
+    color: #fff;
+        width: 80px;
+}
+
+.blue1:hover {
+    background-color: #487ca9;
+    color: #fff;
+}
+/*radius*/
+
+.radius_l {
+    border-radius: 20px;
+}
+
+.radius_m {
+    border-radius: 8px;
+}
+
+.radius_s {
+    border-radius: 3px;
+}
+
+table.table-bordered thead .subHead th{
+  border-top-width:1px;
+  border-right-width:1px;
+
+}
+
+  .hostTable th{
+    text-align: center;
+  }  
+
+  .nodebtn{
+    width:30px;padding: 0px 6px;
+  }
+
+  .modal-dialog h3 {
+    font-size: 18px;
+
+    margin-top: 10px;
+    margin-bottom: 0px;
+}
+
+.btn .caret {
+    margin-right: 5px;
+}
+
+.white {
+    background-color: #fff;
+    border: 1px solid #ddd;
+    color: #333;
+}
+
+.white:hover{
+    color: #333;
+    background-color: #ebebeb;
+    border-color: #adadad;
+}
+
+.blueactive {
+    color: #ffffff !important;
+    background-color: #5b9bd1;
+}
+
+.blueactive:hover {
+    color: #ffffff !important;
+    background-color: #4d85b4 !important;
+}
+.borderBottom {
+    border-bottom: 4px solid !important;
+    border-top: 0px solid !important;
+}
+
+.spinner {
+    width: 120px;
+    margin-top: 5px;
+}
+
+.spinner .form-control {
+    height: 26px !important;
+}
+
+
+.input-group-btn-vertical {
+    position: relative;
+    white-space: nowrap;
+    width: 1%;
+    vertical-align: middle;
+    display: table-cell;
+}
+
+.input-group-btn-vertical > .btn {
+    display: block;
+    float: none;
+    width: 100%;
+    max-width: 100%;
+    padding: 6px;
+    margin-left: -1px;
+    position: relative;
+    border-radius: 0;
+}
+
+.input-group-btn-vertical > .btn {
+    min-width: 20px;
+}
+
+.input-group-btn-vertical > .btn:first-child {
+    border-top-right-radius: 4px;
+}
+
+.input-group-btn-vertical > .btn:last-child {
+    margin-top: -2px;
+    border-bottom-right-radius: 4px;
+}
+
+.input-group-btn-vertical i {
+    position: absolute;
+    top: -2px;
+    left: 5px;
+}
+
+input[type="checkbox"] {
+    -webkit-appearance: none;
+    background: #fff url(../img/checkbox-init.png);
+    height: 18px;
+    vertical-align: middle;
+    width: 18px;
+  margin-bottom:5px;
+  margin-right:5px;
+}
+
+input[type="checkbox"]:checked {
+    -webkit-appearance: none;
+    background: #fff url(../img/checkbox-checked.png);
+    height: 18px;
+    vertical-align: middle;
+    width: 18px;
+}
+
+input[type="checkbox"]:focus,
+input[type="checkbox"]:hover {
+    outline: none;
+}
+
+.note.note-sysOut {
+    background-color: #f5f8fd;
+    border-color: #8bb4e7;
+    color: #010407;
+}
+.note {
+    margin: 0 0 20px;
+    padding: 15px 30px 15px 15px;
+    border-left: 5px solid #eee;
+    border-radius: 0 4px 4px 0;
+}
+
+.note.note-sysIn {
+   background-color: #F1F9EE;
+    border-color: #5cb85c;
+    color: #000;
+}
+
+h4.block {
+    padding-top: 5px;
+    padding-bottom: 5px;
+    font-size:16px;
+
+}
+
+.note-sysOut .block{
+     color: #327ad5; 
+}
+
+.note-sysIn .block{
+     color: #589258; 
+}
+
+.note br{
+  line-height:1.8;
+}
+
+.note  span{
+    border-radius: 0!important;
+    font-size: 13px!important;
+    font-weight: 300;
+    height: 18px;
+    color: #fff;
+    padding: 2px 6px;
+
+    text-shadow: none!important;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 1;
+    white-space: nowrap;
+    display: inline-block;
+    min-width: 10px;
+}
+
+.note-sysOut span{
+  background-color: #639EE8;
+     
+}
+
+.note-sysIn span{
+  background-color: #5cb85c;
+     
+}
+
+.label-visualRange{
+    border-radius: 0!important;
+    font-size: 13px!important;
+    font-weight: 300;
+    height: 20px;
+    color: #fff;
+    padding: 3px 6px;
+    margin-left: 15px; 
+    text-shadow: none!important;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 1;
+    white-space: nowrap;
+    display: inline-block;
+    min-width: 10px;
+}
+.label-sysOut{
+      background-color: #639EE8;
+}
+
+.label-sysIn{
+      background-color: #5cb85c;
+}