msb-core/apiroute/apiroute-service/src/main/resources/iui-metrics/index.html

   1 <!--
   2
   3     Copyright 2016 2015-2016 ZTE, Inc. and others. All rights reserved.
   4
   5     Licensed under the Apache License, Version 2.0 (the "License");
   6     you may not use this file except in compliance with the License.
   7     You may obtain a copy of the License at
   8
   9         http://www.apache.org/licenses/LICENSE-2.0
  10
  11     Unless required by applicable law or agreed to in writing, software
  12     distributed under the License is distributed on an "AS IS" BASIS,
  13     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14     See the License for the specific language governing permissions and
  15     limitations under the License.
  16
  17         Author: Zhaoxing Meng
  18         email: meng.zhaoxing1@zte.com.cn
  19
  20 -->
  21 <!DOCTYPE html>
  22 <html>
  23 <head lang="en">
  24 <meta charset="UTF-8">
  25 <title></title>
  26 <link
  27         href="js/fontAwesome/css/font-awesome.min.css"
  28         rel="stylesheet" />
  29 <link
  30         href="js/bootstrap/css/bootstrap.min.css"
  31         rel="stylesheet" />
  32
  33
  34
  35 <link href="css/metrics.css" rel="stylesheet" type="text/css" />
  36 <link href="css/animate.min.css" rel="stylesheet" type="text/css" />
  37 <link href="js/dataTables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
  38
  39 <style>
  40 .ms-controller {
  41         visibility: hidden
  42 }
  43 </style>
  44
  45 </head>
  46 <body>
  47 <div class="ms-controller" ms-controller="metricsController">
  48 <div class="navbar" id="metricsHead">
  49         <div class="navbar-inner container-fluid" id="top-bar">
  50             <header class="row-fluid">
  51                 <h3 class="span12" id="title">
  52                 <img class="logo" src="img/netnumenLogo.png" alt="Logo"/>
  53                     <small> —— Metrics</small>
  54                  <button class="btn btn-default pull-right"  ms-click="initMetrics()" >
  55                   <i class=" fa fa-refresh"></i> <span id="org_openo_msb_metrics_btn_refresh" name_i18n="org_openo_msb_metrics_ui_i18n"></span>
  56                </button>
  57                 </h3>
  58
  59
  60
  61             </header>
  62
  63         </div>
  64 </div>
  65
  66 <div ms-visible="vm.isErr" style="     margin-top: 20px;text-align: center;" id="org_openo_msb_metrics_iserr" name_i18n="org_openo_msb_metrics_ui_i18n"></div>
  67
  68 <div ms-visible="!vm.isErr">
  69 <span class="response_throbber" ms-visible="vm.routeLoading"></span>
  70
  71
  72  <div class="container-fluid">
  73
  74
  75
  76   <div class="row" style=" margin-top: 15px;">
  77          <div class="col-xs-6 col-md-6 col-sm-6 col-lg-6">
  78            <i class="fa fa-cubes fa-lg"></i>
  79            <span class=" titlefont" id="org_openo_msb_metrics_jvm_title" name_i18n="org_openo_msb_metrics_ui_i18n"></span>
  80          </div>
  81          <div class="pull-right">
  82           <i class="fa fa-clock-o"></i> <span id="org_openo_msb_metrics_jvm_time" name_i18n="org_openo_msb_metrics_ui_i18n"></span> {{vm.jvmTime}}
  83          </div>
  84    </div>
  85    <div class="separator-line"></div>
  86
  87     <div class="row row-fluid">
  88
  89         <div class="col-xs-12 col-sm-12 col-md-8 col-lg-7 " >
  90               <div class="panel panel-default">
  91                   <div class="panel-heading">
  92                       <i class="fa fa-stack-overflow fa-fw"></i> <span id="org_openo_msb_metrics_memory" name_i18n="org_openo_msb_metrics_ui_i18n"></span>
  93                     </div>
  94                   <!-- /.panel-heading -->
  95                   <div class="panel-body">
  96                   <div  id="memoryBarChartDiv" style="width:100%;height:250px"></div>
  97                   <div  id="memoryPieChartDiv" style="width:100%;height:200px"></div>
  98
  99                   </div>
 100                 </div>
 101         </div>
 102
 103          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-5 ">
 104               <div class="panel panel-default">
 105                   <div class="panel-heading">
 106                       <i class="fa fa-tasks fa-fw"></i> <span id="org_openo_msb_metrics_thread" name_i18n="org_openo_msb_metrics_ui_i18n"></span>
 107                        <div class="pull-right">
 108                         <span id="org_openo_msb_metrics_thread_num" name_i18n="org_openo_msb_metrics_ui_i18n"></span>{{vm.threadNum}}
 109                        </div>
 110                     </div>
 111                   <!-- /.panel-heading -->
 112                   <div class="panel-body metricsChart" id="threadsChartDiv" style="height:480px">
 113
 114                   </div>
 115                 </div>
 116         </div>
 117
 118
 119     </div>
 120
 121   </div>
 122
 123
 124
 125    <div class="container-fluid">
 126
 127        <div class="row">
 128          <div class="col-xs-6 col-md-6 col-sm-6 col-lg-6 ">
 129            <i class="fa fa-internet-explorer fa-lg"></i>
 130            <span class=" titlefont" id="org_openo_msb_metrics_http_title" name_i18n="org_openo_msb_metrics_ui_i18n"></span>
 131
 132          </div>
 133
 134        </div>
 135      <div class="separator-line"></div>
 136
 137
 138       <div class="row row-fluid">
 139
 140         <div class="col-xs-12 col-md-6 col-sm-6 col-lg-6 " >
 141               <div class="panel panel-default">
 142                   <div class="panel-heading">
 143                       <i class="fa fa-link fa-fw"></i> <span  id="org_openo_msb_metrics_rest_title" name_i18n="org_openo_msb_metrics_ui_i18n"></span>
 144                     </div>
 145                   <!-- /.panel-heading -->
 146                   <div class="panel-body metricsChart" id="restChartDiv" >
 147
 148                   </div>
 149                 </div>
 150         </div>
 151
 152          <div class="col-xs-12 col-md-6 col-sm-6 col-lg-6 ">
 153               <div class="panel panel-default">
 154                   <div class="panel-heading">
 155                       <i class="fa fa-bar-chart fa-fw"></i> <span  id="org_openo_msb_metrics_requests_title" name_i18n="org_openo_msb_metrics_ui_i18n"></span>
 156                     </div>
 157                   <!-- /.panel-heading -->
 158                   <div class="panel-body metricsChart"  id="requestsChartDiv" >
 159
 160                   </div>
 161                 </div>
 162         </div>
 163
 164
 165     </div>
 166
 167
 168    <div class="row-fluid">
 169
 170      <div class="panel panel-default">
 171           <div class="panel-heading">
 172               <i class="fa fa-file-text-o fa-fw"></i> <span  id="org_openo_msb_metrics_http_table_title" name_i18n="org_openo_msb_metrics_ui_i18n"></span>
 173             </div>
 174           <!-- /.panel-heading -->
 175           <div class="panel-body" >
 176
 177             <div class="table-responsive">
 178                <table class="table table-striped table-bordered  table-hover" id="restTable">
 179                                     <thead>
 180                                         <tr>
 181                                             <th id="org_openo_msb_metrics_http_table_sn" name_i18n="org_openo_msb_metrics_ui_i18n"></th>
 182                                             <th id="org_openo_msb_metrics_http_table_restname" name_i18n="org_openo_msb_metrics_ui_i18n"></th>
 183                                             <th id="org_openo_msb_metrics_http_table_count" name_i18n="org_openo_msb_metrics_ui_i18n"></th>
 184                                             <th id="org_openo_msb_metrics_http_table_max" name_i18n="org_openo_msb_metrics_ui_i18n"></th>
 185                                             <th id="org_openo_msb_metrics_http_table_min" name_i18n="org_openo_msb_metrics_ui_i18n"></th>
 186                                             <th id="org_openo_msb_metrics_http_table_mean" name_i18n="org_openo_msb_metrics_ui_i18n"></th>
 187                                             <th id="org_openo_msb_metrics_http_table_m1" name_i18n="org_openo_msb_metrics_ui_i18n"></th>
 188                                             <th id="org_openo_msb_metrics_http_table_m5" name_i18n="org_openo_msb_metrics_ui_i18n"></th>
 189                                         </tr>
 190                                     </thead>
 191                                     <tbody ms-each-rest="restArray">
 192                                         <tr>
 193                                             <td ms-text="$index+1"></td>
 194                                             <td ms-text="metricsUtil.methodShortName(rest.name)" ms-attr-title="rest.name"></td>
 195                                             <td ms-text="rest.count"></td>
 196                                             <td ms-text="rest.max.toFixed(2)"></td>
 197                                             <td ms-text="rest.min.toFixed(2)"></td>
 198                                             <td ms-text="rest.mean.toFixed(2)"></td>
 199                                             <td ms-text="rest.m1_rate"></td>
 200                                             <td ms-text="rest.m5_rate"></td>
 201
 202                                         </tr>
 203
 204                                     </tbody>
 205                                 </table>
 206
 207                       </div>
 208               </div>
 209           </div>
 210
 211         </div>
 212
 213   </div>
 214
 215 </div>
 216 </div>
 217
 218
 219
 220         <script type="text/javascript"  src="js/jquery/jquery-1.10.2.min.js"></script>
 221    <script type="text/javascript" src="js/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>
 222 <script src="i18n/loadi18nApp_iui-metrics_view.js"></script>
 223    <script type="text/javascript">
 224
 225       var url = window.location.search.match(/url=([^&]+)/);
 226       if (url && url.length > 1) {
 227         url = decodeURIComponent(url[1]);
 228         $("#metricsHead").hide();
 229       } else {
 230         url = "/admin/microservices/v1/metrics";
 231       }
 232
 233       loadPropertiesSideMenu('', 'msb-iui-metrics-i18n', 'i18n/');
 234
 235 </script>
 236
 237
 238         <script type="text/javascript"  src="js/bootstrap/js/bootstrap.min.js"></script>
 239
 240     <script type="text/javascript"  src="js/dataTables/jquery.dataTables.min.js"></script>
 241   <script type="text/javascript"  src="js/dataTables/dataTables.bootstrap.min.js"></script>
 242
 243         <script type="text/javascript"  src="js/avalon.js"></script>
 244
 245
 246   <script src="js/metricsUtil.js"></script>
 247
 248
 249    <script src="js/echarts/echarts-all.js"></script>
 250
 251    <script src="js/metricsChart.js"></script>
 252
 253   <script type="text/javascript"   src="js/metricsController.js"></script>
 254
 255   <script type="text/javascript" src="js/iframeResizer/iframeResizer.contentWindow.min.js"></script>
 256
 257
 258 </body>
 259 </html>