| <!-- |
| - Licensed to the Apache Software Foundation (ASF) under one or more |
| - contributor license agreements. See the NOTICE file distributed with |
| - this work for additional information regarding copyright ownership. |
| - The ASF licenses this file to You 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. |
| --> |
| |
| <template> |
| <v-container grid-list-xl fluid> |
| <v-layout row wrap> |
| <v-flex lg12> |
| <breadcrumb title="metrics" :items="breads"></breadcrumb> |
| </v-flex> |
| <v-flex xs12 > |
| <search id="serviceSearch" v-model="filter" :submit="submit" :label="$t('searchSingleMetrics')"></search> |
| </v-flex> |
| <v-flex lg4 sm6 xs12> |
| <v-card> |
| <v-card-text> |
| <h4>Provider (Total)</h4> |
| <hr style="height:3px;border:none;border-top:3px double #9D9D9D;" /> |
| <chart ref="chart1" :options="provider.qps" :autoresize="true"/> |
| <hr style="height:1px;border:none;border-top:1px solid #ADADAD;" /> |
| <chart ref="chart1" :options="provider.rt" :autoresize="true" /> |
| <hr style="height:1px;border:none;border-top:1px solid #ADADAD;" /> |
| <chart ref="chart1" :options="provider.success_rate" :autoresize="true" /> |
| <hr style="height:1px;border:none;border-top:1px solid #ADADAD;" /> |
| </v-card-text> |
| </v-card> |
| </v-flex> |
| <v-flex lg4 sm6 xs12> |
| <v-card> |
| <v-card-text> |
| <h4>Consumer (Total)</h4> |
| <hr style="height:3px;border:none;border-top:3px double #9D9D9D;" /> |
| <chart ref="chart1" :options="consumer.qps" :autoresize="true" /> |
| <hr style="height:1px;border:none;border-top:1px solid #ADADAD;" /> |
| <chart ref="chart1" :options="consumer.rt" :autoresize="true" /> |
| <hr style="height:1px;border:none;border-top:1px solid #ADADAD;" /> |
| <chart ref="chart1" :options="consumer.success_rate" :autoresize="true" /> |
| <hr style="height:1px;border:none;border-top:1px solid #ADADAD;" /> |
| </v-card-text> |
| </v-card> |
| </v-flex> |
| <v-flex lg4 sm6 xs12> |
| <v-card> |
| <v-card-text> |
| <h4>Thread Pool</h4> |
| <hr style="height:3px;border:none;border-top:3px double #9D9D9D;" /> |
| <div class="layout row ma-0 align-center justify-space-between"> |
| <div class="text-box"> |
| <div class="subheading pb-2">active count</div> |
| <span class="grey--text">{{this.threadPoolData.active}} <v-icon small color="green">{{this.threadPoolData.active_trending}}</v-icon> </span> |
| </div> |
| <div class="chart"> |
| <v-progress-circular |
| :size="60" |
| :width="5" |
| :rotate="360" |
| :value="this.threadPoolData.activert" |
| color="success" |
| > |
| {{this.threadPoolData.activert}} |
| </v-progress-circular> |
| </div> |
| </div> |
| <hr style="height:1px;border:none;border-top:1px solid #ADADAD;" /> |
| <div class="layout row ma-0 align-center justify-space-between"> |
| <div class="subheading pb-2">core size</div> |
| <span class="grey--text">{{this.threadPoolData.core}} </span> |
| <div class="subheading pb-2">max size</div> |
| <span class="grey--text">{{this.threadPoolData.max}} </span> |
| <div class="subheading pb-2">current size</div> |
| <span class="grey--text">{{this.threadPoolData.current}} </span> |
| <div style="height:60px"></div> |
| <v-icon small color="green">{{this.threadPoolData.current_trending}}</v-icon> |
| </div> |
| <hr style="height:1px;border:none;border-top:1px solid #ADADAD;" /> |
| </v-card-text> |
| </v-card> |
| </v-flex> |
| <v-flex sm12> |
| <h3>{{$t('methodMetrics')}}</h3> |
| </v-flex> |
| <v-flex lg12 > |
| <v-tabs |
| class="elevation-1"> |
| <v-tab> |
| {{$t('providers')}} |
| </v-tab> |
| <v-tab> |
| {{$t('consumers')}} |
| </v-tab> |
| <v-tab-item> |
| <v-data-table |
| id="providerList" |
| class="elevation-1" |
| :headers="headers" |
| :items="providerDetails" |
| > |
| <template slot="items" slot-scope="props"> |
| <td>{{props.item.service}}</td> |
| <td>{{props.item.method}}</td> |
| <td>{{props.item.qps}}</td> |
| <td>{{props.item.rt}}</td> |
| <td>{{props.item.successRate}}</td> |
| </template> |
| </v-data-table> |
| </v-tab-item> |
| <v-tab-item > |
| <v-data-table |
| class="elevation-1" |
| :headers="headers" |
| :items="consumerDetails" |
| > |
| <template slot="items" slot-scope="props"> |
| <td>{{props.item.service}}</td> |
| <td>{{props.item.method}}</td> |
| <td>{{props.item.qps}}</td> |
| <td>{{props.item.rt}}</td> |
| <td>{{props.item.successRate}}</td> |
| </template> |
| </v-data-table> |
| </v-tab-item> |
| </v-tabs> |
| </v-flex> |
| </v-layout> |
| </v-container> |
| </template> |
| |
| <script> |
| import Material from 'vuetify/es5/util/colors' |
| import Breadcrumb from '@/components/public/Breadcrumb' |
| import Search from '@/components/public/Search' |
| |
| export default { |
| |
| name: 'ServiceMetrics', |
| components: { |
| Breadcrumb, |
| Search |
| }, |
| data () { |
| return { |
| provider: { |
| metrics: [ |
| 'dubbo.provider.qps', 'dubbo.provider.rt', 'dubbo.provider.success_rate' |
| ], |
| qps: { |
| title: { |
| text: 'qps', |
| padding: [50, 5, 5, 5], |
| textStyle: { |
| fontWeight: 200, |
| fontSize: 12 |
| } |
| }, |
| tooltip: {}, |
| xAxis: { |
| show: false, |
| type: 'category', |
| data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] |
| }, |
| yAxis: { |
| show: false |
| }, |
| series: [{ |
| type: 'line', |
| data: [] |
| }] |
| }, |
| rt: { |
| title: { |
| text: 'rt(ms)', |
| padding: [50, 5, 5, 5], |
| textStyle: { |
| fontWeight: 200, |
| fontSize: 12 |
| } |
| }, |
| tooltip: {}, |
| xAxis: { |
| show: false, |
| type: 'category', |
| data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] |
| }, |
| yAxis: { |
| show: false |
| }, |
| series: [{ |
| type: 'line', |
| data: [] |
| }] |
| }, |
| success_rate: { |
| title: { |
| text: 'success rate', |
| padding: [50, 5, 5, 5], |
| textStyle: { |
| fontWeight: 200, |
| fontSize: 12 |
| } |
| }, |
| tooltip: {}, |
| xAxis: { |
| show: false, |
| type: 'category', |
| data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] |
| }, |
| yAxis: { |
| show: false |
| }, |
| series: [{ |
| type: 'line', |
| data: [] |
| }] |
| } |
| }, |
| consumer: { |
| metrics: [ |
| 'dubbo.consumer.qps', 'dubbo.consumer.rt', 'dubbo.consumer.success_rate' |
| ], |
| qps: { |
| title: { |
| text: 'qps', |
| padding: [50, 5, 5, 5], |
| textStyle: { |
| fontWeight: 200, |
| fontSize: 12 |
| } |
| |
| }, |
| tooltip: {}, |
| xAxis: { |
| show: false, |
| type: 'category', |
| data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] |
| }, |
| yAxis: { |
| show: false |
| }, |
| series: [{ |
| type: 'line', |
| data: [] |
| }] |
| }, |
| rt: { |
| title: { |
| text: 'rt(ms)', |
| padding: [50, 5, 5, 5], |
| textStyle: { |
| fontWeight: 200, |
| fontSize: 12 |
| } |
| }, |
| tooltip: {}, |
| xAxis: { |
| show: false, |
| type: 'category', |
| data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] |
| }, |
| yAxis: { |
| show: false |
| }, |
| series: [{ |
| type: 'line', |
| data: [] |
| }] |
| }, |
| success_rate: { |
| title: { |
| text: 'success rate', |
| padding: [50, 5, 5, 5], |
| textStyle: { |
| fontWeight: 200, |
| fontSize: 12 |
| } |
| }, |
| tooltip: {}, |
| xAxis: { |
| show: false, |
| type: 'category', |
| data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] |
| }, |
| yAxis: { |
| show: false |
| }, |
| series: [{ |
| type: 'line', |
| data: [] |
| }] |
| } |
| }, |
| threadPoolData: { |
| core: 0, |
| max: 0, |
| current: 0, |
| current_trending: '', |
| active: 0, |
| active_trending: '', |
| activert: 0 |
| }, |
| selectedTab: 'tab-1', |
| filter: '', |
| headers: [], |
| providerDetails: [], |
| consumerDetails: [], |
| option: null, |
| color: Material, |
| breads: [ |
| { |
| text: 'metrics', |
| href: '' |
| } |
| ] |
| |
| } |
| }, |
| /* |
| * */ |
| methods: { |
| submit: function () { |
| this.searchByIp(this.filter, true) |
| }, |
| searchByIp: function (filter, rewrite) { |
| if (this.filter === '') { |
| return |
| } |
| |
| if (rewrite) { |
| this.$router.push({ path: '/metrics/index', query: { ip: this.filter } }) |
| } |
| const url = '/metrics/ipAddr/?ip=' + filter + '&group=dubbo' |
| this.$axios.get(url) |
| .then(response => { |
| if (!response) { |
| throw new Error('ServerError') |
| } |
| if (!response.data) { |
| return |
| } |
| this.dealNormal(response.data) |
| this.dealMajor(response.data) |
| this.dealThreadPoolData(response.data) |
| }) |
| .catch(error => { |
| if (error.message === 'ServerError') { |
| clearInterval(this.searchTimer) |
| } |
| }) |
| }, |
| dealThreadPoolData: function (data) { |
| for (const index in data) { |
| const metricsDTO = data[index] |
| if ((metricsDTO.metric).indexOf('threadPool') >= -1) { |
| const metric = metricsDTO.metric.substring(metricsDTO.metric.lastIndexOf('.') + 1) |
| if (metric === 'active' || metric === 'current') { |
| const trending = metric + '_trending' |
| this.threadPoolData[trending] = this.dealTrending(this.threadPoolData[metric], metricsDTO.value) |
| } |
| this.threadPoolData[metric] = metricsDTO.value |
| } |
| } |
| this.threadPoolData.activert = (100 * this.threadPoolData.active / this.threadPoolData.current).toFixed(2) |
| }, |
| getKey: function (key) { |
| return key.substring(key.lastIndexOf('.') + 1) |
| }, |
| dealMajor: function (data) { |
| for (const index in data) { |
| const metricsDTO = data[index] |
| if (this.provider.metrics.indexOf(metricsDTO.metric) !== -1) { |
| const key = this.getKey(metricsDTO.metric) |
| const data = this.provider[key].series[0].data |
| if (data.length === 10) { |
| data.push(metricsDTO.value) |
| data.shift() |
| } else { |
| data.push(metricsDTO.value) |
| } |
| this.provider[key].series.data = data |
| } |
| if (this.consumer.metrics.indexOf(metricsDTO.metric) !== -1) { |
| const key = this.getKey(metricsDTO.metric) |
| const data = this.consumer[key].series[0].data |
| if (data.length === 10) { |
| data.push(metricsDTO.value) |
| data.shift() |
| } else { |
| data.push(metricsDTO.value) |
| } |
| this.consumer[key].series.data = data |
| } |
| } |
| }, |
| dealNormal: function (data) { |
| const serviceMethodMap = {} |
| for (const index in data) { |
| const metricsDTO = data[index] |
| if (metricsDTO.metricLevel === 'NORMAL') { |
| let metric = metricsDTO.metric + '' |
| const isProvider = metric.split('.')[1] |
| metric = isProvider + '.' + metric.substring(metric.lastIndexOf('.') + 1) |
| |
| let methodMap = serviceMethodMap[metricsDTO.tags.service] |
| if (!methodMap) { |
| methodMap = {} |
| serviceMethodMap[metricsDTO.tags.service] = methodMap |
| } |
| let metricMap = methodMap[metricsDTO.tags.method] |
| |
| if (!metricMap) { |
| metricMap = {} |
| serviceMethodMap[metricsDTO.tags.service][metricsDTO.tags.method] = metricMap |
| } |
| metricMap[metric] = metricsDTO.value |
| } |
| } |
| this.providerDetails = [] |
| this.consumerDetails = [] |
| for (const service in serviceMethodMap) { |
| for (const method in serviceMethodMap[service]) { |
| const metricsMap = serviceMethodMap[service][method] |
| this.addDataToDetails(this.providerDetails, service, method, metricsMap, 'provider') |
| this.addDataToDetails(this.consumerDetails, service, method, metricsMap, 'consumer') |
| } |
| } |
| }, |
| addDataToDetails: function (sideDetails, service, method, metricsMap, side) { |
| if (metricsMap[side + '.qps'] && metricsMap[side + '.success_rate'] && metricsMap[side + '.success_bucket_count']) { |
| sideDetails.push({ |
| service: service, |
| method: method, |
| qps: metricsMap[side + '.qps'].toFixed(2), |
| rt: metricsMap[side + '.rt'].toFixed(2), |
| successRate: metricsMap[side + '.success_rate'], |
| successCount: metricsMap[side + '.success_bucket_count'] |
| }) |
| } |
| }, |
| dealTrending: function (oldValue, curValue) { |
| if (curValue > oldValue) { |
| return 'trending_up' |
| } |
| if (curValue < oldValue) { |
| return 'trending_down' |
| } |
| return '' |
| }, |
| setHeaders: function () { |
| this.headers = [ |
| { |
| text: this.$t('service'), |
| value: 'service' |
| }, |
| { |
| text: this.$t('method'), |
| value: 'method' |
| }, |
| { |
| text: this.$t('qps'), |
| value: 'qps' |
| }, |
| { |
| text: this.$t('rt'), |
| value: 'rt' |
| }, |
| { |
| text: this.$t('successRate'), |
| value: 'successRate' |
| } |
| ] |
| } |
| }, |
| computed: { |
| area () { |
| return this.$i18n.locale |
| } |
| }, |
| watch: { |
| area () { |
| this.setHeaders() |
| } |
| }, |
| mounted: function () { |
| this.setHeaders() |
| let filter = null |
| const query = this.$route.query |
| Object.keys(query).forEach(function (key) { |
| if (key === 'ip') { |
| filter = query[key] |
| } |
| }) |
| if (filter !== null) { |
| this.filter = filter |
| this.searchByIp(this.filter, false) |
| if (this.searchTimer !== null) { |
| clearInterval(this.searchTimer) |
| } |
| this.searchTimer = setInterval(() => { |
| this.searchByIp(this.filter, false) |
| }, 5000) |
| } |
| } |
| } |
| </script> |
| |
| <style scoped> |
| .echarts { |
| width: 105%; |
| height: 68px; |
| } |
| |
| </style> |
