diff options
Diffstat (limited to 'apiroute/apiroute-service/src/main/resources/iui-metrics/js/metricsChart.js')
-rw-r--r-- | apiroute/apiroute-service/src/main/resources/iui-metrics/js/metricsChart.js | 417 |
1 files changed, 417 insertions, 0 deletions
diff --git a/apiroute/apiroute-service/src/main/resources/iui-metrics/js/metricsChart.js b/apiroute/apiroute-service/src/main/resources/iui-metrics/js/metricsChart.js new file mode 100644 index 0000000..568e5ed --- /dev/null +++ b/apiroute/apiroute-service/src/main/resources/iui-metrics/js/metricsChart.js @@ -0,0 +1,417 @@ +/* + * Copyright (C) 2016 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 metricsChart = {}; + + +metricsChart.memoryPieMetrics = function(data){ + var memoryPieChart = echarts.init(document.getElementById('memoryPieChartDiv')); + + var labelTop = { + normal : { + label : { + show : true, + position : 'center', + formatter : '{b}', + textStyle: { + baseline : 'bottom' + } + }, + labelLine : { + show : false + } + } +}; +var labelFromatter = { + normal : { + label : { + formatter : function (params){ + return (100 - params.value).toFixed(1) + '%' + }, + textStyle: { + baseline : 'top' + } + } + }, +} +var labelBottom = { + normal : { + color: '#ccc', + label : { + show : true, + position : 'center' + }, + labelLine : { + show : false + } + }, + emphasis: { + color: 'rgba(0,0,0,0)' + } +}; +var radius = [40, 55]; +option = { + legend: { + x : 'center', + y:"bottom", + data:[ + 'Code-Cache','Eden-Space','Perm-Gen','Survivor-Space','Tenured-Gen' + ] + }, + title : { + text: $.i18n.prop('org_openo_msb_metrics_jvm_memory_radius'), + subtext: '', + x: 'center' + }, + toolbox: { + show : true, + feature : { + + saveAsImage : { + show : true, + title : $.i18n.prop('org_openo_msb_metrics_chart_save_picture'), + type : 'png', + lang : [$.i18n.prop('org_openo_msb_metrics_chart_click_save')] + } + } + }, + series : [ + { + type : 'pie', + center : ['10%', '55%'], + radius : radius, + x: '0%', // for funnel + itemStyle : labelFromatter, + data : [ + {name:'other', value:100-data.CodeCache, itemStyle : labelBottom}, + {name:'Code-Cache', value:data.CodeCache,itemStyle : labelTop} + ] + }, + { + type : 'pie', + center : ['30%', '55%'], + radius : radius, + x:'20%', // for funnel + itemStyle : labelFromatter, + data : [ + {name:'other', value:100-data.EdenSpace, itemStyle : labelBottom}, + {name:'Eden-Space', value:data.EdenSpace,itemStyle : labelTop} + ] + }, + { + type : 'pie', + center : ['50%', '55%'], + radius : radius, + x:'40%', // for funnel + itemStyle : labelFromatter, + data : [ + {name:'other', value:100-data.PermGen, itemStyle : labelBottom}, + {name:'Perm-Gen', value:data.PermGen,itemStyle : labelTop} + ] + }, + { + type : 'pie', + center : ['70%', '55%'], + radius : radius, + x:'60%', // for funnel + itemStyle : labelFromatter, + data : [ + {name:'other', value:100-data.SurvivorSpace, itemStyle : labelBottom}, + {name:'Survivor-Space', value:data.SurvivorSpace,itemStyle : labelTop} + ] + }, + { + type : 'pie', + center : ['90%', '55%'], + radius : radius, + x:'80%', // for funnel + itemStyle : labelFromatter, + data : [ + {name:'other', value:100-data.TenuredGen, itemStyle : labelBottom}, + {name:'Tenured-Gen', value:data.TenuredGen,itemStyle : labelTop} + ] + } + ] +}; + + + // load data for echarts objects + memoryPieChart.setOption(option); + window.onresize = memoryPieChart.resize; + + +} + + +metricsChart.memoryBarMetrics = function(data){ + var memoryBarChart = echarts.init(document.getElementById('memoryBarChartDiv')); +var option = { + title : { + text: $.i18n.prop('org_openo_msb_metrics_jvm_memory_bar'), + x:'center' + }, + tooltip : { + trigger: 'axis' + }, + legend: { + data:[ + $.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') + ], + x:'left' + }, + toolbox: { + show : true, + feature : { + + saveAsImage : { + show : true, + title : $.i18n.prop('org_openo_msb_metrics_chart_save_picture'), + type : 'png', + lang : [$.i18n.prop('org_openo_msb_metrics_chart_click_save')] + } + } + }, + yAxis : [ + { + type : 'category', + 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')] + } + + ], + xAxis : [ + { + type : 'value', + axisLabel:{formatter:'{value} M'} + } + ], + series : [ + { + name:$.i18n.prop('org_openo_msb_metrics_jvm_memory_bar_init'), + type:'bar', + stack:'barGroup', + itemStyle: {normal: {color:'rgba(92, 184, 92, 0.24)', label:{show:true}}}, + data:data.init + }, + + { + name:$.i18n.prop('org_openo_msb_metrics_jvm_memory_bar_used'), + type:'bar', + stack:'barGroup', + itemStyle: {normal: {color:'rgba(73, 163, 73, 0.56)', label:{show:true,formatter:function(p){return p.value > 0 ? (p.value +'\n'):'';}}}}, + data:data.used + }, + + { + name:$.i18n.prop('org_openo_msb_metrics_jvm_memory_bar_total'), + type:'bar', + stack:'barGroup', + itemStyle: {normal: {color:'#49A349', label:{show:true,formatter:function(p){return p.value > 0 ? (p.value +'\n'):'';}}}}, + data:data.max + }, + + + ] +}; + + + + + memoryBarChart.setOption(option); + window.onresize = memoryBarChart.resize; + +} + + + + +metricsChart.threadsMetrics = function(data){ + + var threadsChart = echarts.init(document.getElementById('threadsChartDiv')); + + + var option = { + title : { + text: $.i18n.prop('org_openo_msb_metrics_jvm_thread_chart'), + subtext: '', + x:'center' + }, + tooltip : { + trigger: 'item', + formatter: "{b}{a}: <br/> {c} ({d}%)" + }, + color:["#ff7f50","#6495ed","#da70d6","#32cd32"], + legend: { + orient : 'vertical', + x : 'left', + data:['Blocked','Waiting','Timed waiting','Runnable'] + }, + toolbox: { + show : true, + feature : { + + saveAsImage : { + show : true, + title : $.i18n.prop('org_openo_msb_metrics_chart_save_picture'), + type : 'png', + lang : [$.i18n.prop('org_openo_msb_metrics_chart_click_save')] + } + } + }, + calculable : true, + series : [ + { + name:$.i18n.prop('org_openo_msb_metrics_thread'), + type:'pie', + radius : '55%', + center: ['50%', '60%'], + data:data + } + ] +}; + + + threadsChart.setOption(option); + window.onresize = threadsChart.resize; + + + +} + + +metricsChart.restMetrics = function(data){ + + + var labelFromatter=function (value){ + if(value.length>12) return value.substring(0,12)+"\n"+value.substring(12); + else return value; + } + + +var restChart = echarts.init(document.getElementById('restChartDiv')); +var option = { + title : { + text: 'top10', + subtext: '' + }, + color:["#1790cf"], + tooltip : { + trigger: 'axis' + }, + legend: { + data:[$.i18n.prop('org_openo_msb_metrics_rest_bar_count')] + }, + toolbox: { + show : true, + feature : { + + magicType: {show: true, title:$.i18n.prop('org_openo_msb_metrics_chart_line_change'),type: ['line', 'bar']}, + saveAsImage : { + show : true, + title : $.i18n.prop('org_openo_msb_metrics_chart_save_picture'), + type : 'png', + lang : [$.i18n.prop('org_openo_msb_metrics_chart_click_save')] + } + } + }, + calculable : true, + xAxis : [ + { + type : 'value', + boundaryGap : [0, 0.01] + } + ], + yAxis : [ + { + type : 'category', + data : data.restName, + axisLabel:{ + margin:4, + clickable:true, + formatter:labelFromatter + + } + } + ], + series : [ + { + name:$.i18n.prop('org_openo_msb_metrics_rest_bar_count'), + type:'bar', + data:data.restCount + } + + ] +}; + + restChart.setOption(option); + window.onresize = restChart.resize; +} + + +metricsChart.requestsMetrics = function(data){ +var requestsChart = echarts.init(document.getElementById('requestsChartDiv')); + +option = { + title : { + text: '', + subtext: '' + }, + tooltip : { + trigger: 'axis' + }, + legend: { + data:[$.i18n.prop('org_openo_msb_metrics_rest_bar_count')] + }, + toolbox: { + show : true, + feature : { + + magicType : {show: true,title:$.i18n.prop('org_openo_msb_metrics_chart_line_change'), type: ['line', 'bar']}, + saveAsImage : { + show : true, + title : $.i18n.prop('org_openo_msb_metrics_chart_save_picture'), + type : 'png', + lang : [$.i18n.prop('org_openo_msb_metrics_chart_click_save')] + } + } + }, + calculable : true, + yAxis : [ + { + type : 'category', + data : ['get','post','put','delete','other'] + } + ], + xAxis : [ + { + type : 'value' + } + ], + series : [ + { + name:$.i18n.prop('org_openo_msb_metrics_rest_bar_count'), + type:'bar', + data:[data.get, data.post, data.put, data.delete, data.other] + } + ] +}; + + + requestsChart.setOption(option); + window.onresize = requestsChart.resize; +} + + + + |