msb-core/apiroute/apiroute-service/src/main/resources/iui-metrics/js/metricsChart.js

   1 /*
   2  * Copyright 2016 2015-2016 ZTE, Inc. and others. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *     http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  *
  16  *     Author: Zhaoxing Meng
  17  *     email: meng.zhaoxing1@zte.com.cn
  18  */
  19 var metricsChart = {};
  20
  21
  22 metricsChart.memoryPieMetrics = function(data){
  23  var memoryPieChart = echarts.init(document.getElementById('memoryPieChartDiv'));
  24
  25  var labelTop = {
  26     normal : {
  27         label : {
  28             show : true,
  29             position : 'center',
  30             formatter : '{b}',
  31             textStyle: {
  32                 baseline : 'bottom'
  33             }
  34         },
  35         labelLine : {
  36             show : false
  37         }
  38     }
  39 };
  40 var labelFromatter = {
  41     normal : {
  42         label : {
  43             formatter : function (params){
  44                 return (100 - params.value).toFixed(1) + '%'
  45             },
  46             textStyle: {
  47                 baseline : 'top'
  48             }
  49         }
  50     },
  51 }
  52 var labelBottom = {
  53     normal : {
  54         color: '#ccc',
  55         label : {
  56             show : true,
  57             position : 'center'
  58         },
  59         labelLine : {
  60             show : false
  61         }
  62     },
  63     emphasis: {
  64         color: 'rgba(0,0,0,0)'
  65     }
  66 };
  67 var radius = [40, 55];
  68 option = {
  69     legend: {
  70         x : 'center',
  71         y:"bottom",
  72         data:[
  73             'Code-Cache','Eden-Space','Perm-Gen','Survivor-Space','Tenured-Gen'
  74         ]
  75     },
  76     title : {
  77         text: $.i18n.prop('org_openo_msb_metrics_jvm_memory_radius'),
  78         subtext: '',
  79         x: 'center'
  80     },
  81     toolbox: {
  82         show : true,
  83         feature : {
  84
  85             saveAsImage : {
  86             show : true,
  87             title : $.i18n.prop('org_openo_msb_metrics_chart_save_picture'),
  88             type : 'png',
  89             lang : [$.i18n.prop('org_openo_msb_metrics_chart_click_save')]
  90             }
  91         }
  92     },
  93     series : [
  94         {
  95             type : 'pie',
  96             center : ['10%', '55%'],
  97             radius : radius,
  98             x: '0%', // for funnel
  99             itemStyle : labelFromatter,
 100             data : [
 101                 {name:'other', value:100-data.CodeCache, itemStyle : labelBottom},
 102                 {name:'Code-Cache', value:data.CodeCache,itemStyle : labelTop}
 103             ]
 104         },
 105         {
 106             type : 'pie',
 107             center : ['30%', '55%'],
 108             radius : radius,
 109             x:'20%', // for funnel
 110             itemStyle : labelFromatter,
 111             data : [
 112                 {name:'other', value:100-data.EdenSpace, itemStyle : labelBottom},
 113                 {name:'Eden-Space', value:data.EdenSpace,itemStyle : labelTop}
 114             ]
 115         },
 116         {
 117             type : 'pie',
 118             center : ['50%', '55%'],
 119             radius : radius,
 120             x:'40%', // for funnel
 121             itemStyle : labelFromatter,
 122             data : [
 123                 {name:'other', value:100-data.PermGen, itemStyle : labelBottom},
 124                 {name:'Perm-Gen', value:data.PermGen,itemStyle : labelTop}
 125             ]
 126         },
 127          {
 128             type : 'pie',
 129             center : ['70%', '55%'],
 130             radius : radius,
 131             x:'60%', // for funnel
 132             itemStyle : labelFromatter,
 133             data : [
 134                 {name:'other', value:100-data.SurvivorSpace, itemStyle : labelBottom},
 135                 {name:'Survivor-Space', value:data.SurvivorSpace,itemStyle : labelTop}
 136             ]
 137         },
 138          {
 139             type : 'pie',
 140             center : ['90%', '55%'],
 141             radius : radius,
 142             x:'80%', // for funnel
 143             itemStyle : labelFromatter,
 144             data : [
 145                 {name:'other', value:100-data.TenuredGen, itemStyle : labelBottom},
 146                 {name:'Tenured-Gen', value:data.TenuredGen,itemStyle : labelTop}
 147             ]
 148         }
 149     ]
 150 };
 151
 152
 153         // load data for echarts objects
 154          memoryPieChart.setOption(option);
 155          window.onresize = memoryPieChart.resize;
 156
 157
 158 }
 159
 160
 161 metricsChart.memoryBarMetrics = function(data){
 162  var memoryBarChart = echarts.init(document.getElementById('memoryBarChartDiv'));
 163 var option = {
 164     title : {
 165         text: $.i18n.prop('org_openo_msb_metrics_jvm_memory_bar'),
 166         x:'center'
 167     },
 168     tooltip : {
 169         trigger: 'axis'
 170     },
 171     legend: {
 172          data:[
 173             $.i18n.prop('org_openo_msb_metrics_jvm_memory_bar_init'),$.i18n.prop('org_openo_msb_metrics_jvm_memory_bar_used'),$.i18n.prop('org_openo_msb_metrics_jvm_memory_bar_total')
 174         ],
 175         x:'left'
 176     },
 177     toolbox: {
 178         show : true,
 179         feature : {
 180
 181             saveAsImage : {
 182             show : true,
 183             title : $.i18n.prop('org_openo_msb_metrics_chart_save_picture'),
 184             type : 'png',
 185             lang : [$.i18n.prop('org_openo_msb_metrics_chart_click_save')]
 186             }
 187         }
 188     },
 189     yAxis : [
 190         {
 191             type : 'category',
 192             data : [$.i18n.prop('org_openo_msb_metrics_jvm_memory_bar_heap'),$.i18n.prop('org_openo_msb_metrics_jvm_memory_bar_non-heap'),$.i18n.prop('org_openo_msb_metrics_jvm_memory_bar_total-heap')]
 193         }
 194
 195     ],
 196     xAxis : [
 197         {
 198             type : 'value',
 199             axisLabel:{formatter:'{value} M'}
 200         }
 201     ],
 202     series : [
 203         {
 204             name:$.i18n.prop('org_openo_msb_metrics_jvm_memory_bar_init'),
 205             type:'bar',
 206             stack:'barGroup',
 207             itemStyle: {normal: {color:'rgba(92, 184, 92, 0.24)', label:{show:true}}},
 208             data:data.init
 209         },
 210
 211         {
 212             name:$.i18n.prop('org_openo_msb_metrics_jvm_memory_bar_used'),
 213             type:'bar',
 214             stack:'barGroup',
 215             itemStyle: {normal: {color:'rgba(73, 163, 73, 0.56)', label:{show:true,formatter:function(p){return p.value > 0 ? (p.value +'\n'):'';}}}},
 216             data:data.used
 217         },
 218
 219         {
 220             name:$.i18n.prop('org_openo_msb_metrics_jvm_memory_bar_total'),
 221             type:'bar',
 222             stack:'barGroup',
 223             itemStyle: {normal: {color:'#49A349', label:{show:true,formatter:function(p){return p.value > 0 ? (p.value +'\n'):'';}}}},
 224             data:data.max
 225         },
 226
 227
 228     ]
 229 };
 230
 231
 232
 233
 234  memoryBarChart.setOption(option);
 235  window.onresize = memoryBarChart.resize;
 236
 237 }
 238
 239
 240
 241
 242 metricsChart.threadsMetrics = function(data){
 243
 244  var threadsChart = echarts.init(document.getElementById('threadsChartDiv'));
 245
 246
 247  var option = {
 248     title : {
 249         text: $.i18n.prop('org_openo_msb_metrics_jvm_thread_chart'),
 250         subtext: '',
 251         x:'center'
 252     },
 253     tooltip : {
 254         trigger: 'item',
 255         formatter: "{b}{a}: <br/> {c} ({d}%)"
 256     },
 257     color:["#ff7f50","#6495ed","#da70d6","#32cd32"],
 258     legend: {
 259         orient : 'vertical',
 260         x : 'left',
 261         data:['Blocked','Waiting','Timed waiting','Runnable']
 262     },
 263     toolbox: {
 264         show : true,
 265         feature : {
 266
 267             saveAsImage : {
 268             show : true,
 269             title : $.i18n.prop('org_openo_msb_metrics_chart_save_picture'),
 270             type : 'png',
 271             lang : [$.i18n.prop('org_openo_msb_metrics_chart_click_save')]
 272             }
 273         }
 274     },
 275     calculable : true,
 276     series : [
 277         {
 278             name:$.i18n.prop('org_openo_msb_metrics_thread'),
 279             type:'pie',
 280             radius : '55%',
 281             center: ['50%', '60%'],
 282             data:data
 283         }
 284     ]
 285 };
 286
 287
 288  threadsChart.setOption(option);
 289  window.onresize = threadsChart.resize;
 290
 291
 292
 293 }
 294
 295
 296 metricsChart.restMetrics = function(data){
 297
 298
 299   var labelFromatter=function (value){
 300        if(value.length>12) return value.substring(0,12)+"\n"+value.substring(12);
 301        else return value;
 302     }
 303
 304
 305 var restChart = echarts.init(document.getElementById('restChartDiv'));
 306 var option = {
 307     title : {
 308         text: 'top10',
 309         subtext: ''
 310     },
 311      color:["#1790cf"],
 312     tooltip : {
 313         trigger: 'axis'
 314     },
 315     legend: {
 316         data:[$.i18n.prop('org_openo_msb_metrics_rest_bar_count')]
 317     },
 318     toolbox: {
 319         show : true,
 320         feature : {
 321
 322             magicType: {show: true, title:$.i18n.prop('org_openo_msb_metrics_chart_line_change'),type: ['line', 'bar']},
 323             saveAsImage : {
 324             show : true,
 325             title : $.i18n.prop('org_openo_msb_metrics_chart_save_picture'),
 326             type : 'png',
 327             lang : [$.i18n.prop('org_openo_msb_metrics_chart_click_save')]
 328             }
 329         }
 330     },
 331     calculable : true,
 332     xAxis : [
 333         {
 334             type : 'value',
 335             boundaryGap : [0, 0.01]
 336         }
 337     ],
 338     yAxis : [
 339         {
 340             type : 'category',
 341             data : data.restName,
 342             axisLabel:{
 343                  margin:4,
 344                  clickable:true,
 345                  formatter:labelFromatter
 346
 347             }
 348         }
 349     ],
 350     series : [
 351         {
 352             name:$.i18n.prop('org_openo_msb_metrics_rest_bar_count'),
 353             type:'bar',
 354             data:data.restCount
 355         }
 356
 357     ]
 358 };
 359
 360  restChart.setOption(option);
 361   window.onresize = restChart.resize;
 362 }
 363
 364
 365 metricsChart.requestsMetrics = function(data){
 366 var requestsChart = echarts.init(document.getElementById('requestsChartDiv'));
 367
 368 option = {
 369     title : {
 370         text: '',
 371         subtext: ''
 372     },
 373     tooltip : {
 374         trigger: 'axis'
 375     },
 376     legend: {
 377         data:[$.i18n.prop('org_openo_msb_metrics_rest_bar_count')]
 378     },
 379     toolbox: {
 380         show : true,
 381         feature : {
 382
 383             magicType : {show: true,title:$.i18n.prop('org_openo_msb_metrics_chart_line_change'), type: ['line', 'bar']},
 384             saveAsImage : {
 385             show : true,
 386             title : $.i18n.prop('org_openo_msb_metrics_chart_save_picture'),
 387             type : 'png',
 388             lang : [$.i18n.prop('org_openo_msb_metrics_chart_click_save')]
 389             }
 390         }
 391     },
 392     calculable : true,
 393     yAxis : [
 394         {
 395             type : 'category',
 396             data : ['get','post','put','delete','other']
 397         }
 398     ],
 399     xAxis : [
 400         {
 401             type : 'value'
 402         }
 403     ],
 404     series : [
 405         {
 406             name:$.i18n.prop('org_openo_msb_metrics_rest_bar_count'),
 407             type:'bar',
 408             data:[data.get, data.post, data.put, data.delete, data.other]
 409         }
 410     ]
 411 };
 412
 413
 414  requestsChart.setOption(option);
 415    window.onresize = requestsChart.resize;
 416 }
 417
 418
 419
 420