| <!-- |
| ~ 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-flex> |
| <iframe src="http://localhost:8081/dashboard-solo/new?utm_source=grafana_gettingstarted&orgId=1&from=1684139950126&to=1684161550126&panelId=1" width="1350" height="700" frameborder="0"></iframe> |
| </v-flex> |
| </v-layout> |
| </v-container> |
| </template> |
| |
| <script> |
| // import Material from 'vuetify/es5/util/colors' |
| |
| 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> |
