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

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