This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-rocketbot-ui.git
The following commit(s) were added to refs/heads/master by this push:
new 641caf9 refactor(topo): remove old line chart (#239)
641caf9 is described below
commit 641caf9759e7ce460d3a994277640e1d2f01b88d
Author: Qiuxia Fan <[email protected]>
AuthorDate: Sat Dec 28 11:12:48 2019 +0800
refactor(topo): remove old line chart (#239)
* refactor(topo): service response time tercentile metric
* fix:typo
* style: format
* refactor: remove resize
---
src/store/modules/topology/index.ts | 22 +--
src/views/components/topology/chart-line.vue | 5 +-
src/views/components/topology/topo-aside.vue | 3 +-
.../components/topology/topo-detect-point.vue | 15 +-
src/views/components/topology/topo-response.vue | 170 ---------------------
5 files changed, 16 insertions(+), 199 deletions(-)
diff --git a/src/store/modules/topology/index.ts
b/src/store/modules/topology/index.ts
index 28de796..ab19cc7 100644
--- a/src/store/modules/topology/index.ts
+++ b/src/store/modules/topology/index.ts
@@ -59,11 +59,7 @@ export interface State {
getResponseTimeTrend: number[];
getSLATrend: number[];
getThroughputTrend: number[];
- p50: number[];
- p75: number[];
- p90: number[];
- p95: number[];
- p99: number[];
+ responsePercentile: {[key: string]: number[]};
honeycombNode: any;
showAlarmDialog: boolean;
showTraceDialog: boolean;
@@ -93,11 +89,7 @@ const initState: State = {
getResponseTimeTrend: [],
getSLATrend: [],
getThroughputTrend: [],
- p50: [],
- p75: [],
- p90: [],
- p95: [],
- p99: [],
+ responsePercentile: {},
honeycombNode: {},
showAlarmDialog: false,
showTraceDialog: false,
@@ -160,11 +152,11 @@ const mutations = {
data.getResponseTimeTrend.values.map((i: any) => i.value) : [];
state.getSLATrend = data.getSLATrend ? data.getSLATrend.values.map((i:
any) => i.value) : [];
state.getThroughputTrend = data.getThroughputTrend ?
data.getThroughputTrend.values.map((i: any) => i.value) : [];
- state.p50 = data.p50 ? data.p50.values.map((i: any) => i.value) : [];
- state.p75 = data.p75 ? data.p75.values.map((i: any) => i.value) : [];
- state.p90 = data.p90 ? data.p90.values.map((i: any) => i.value) : [];
- state.p95 = data.p95 ? data.p95.values.map((i: any) => i.value) : [];
- state.p99 = data.p99 ? data.p99.values.map((i: any) => i.value) : [];
+ state.responsePercentile.p50 = data.p50 ? data.p50.values.map((i: any) =>
i.value) : [];
+ state.responsePercentile.p75 = data.p75 ? data.p75.values.map((i: any) =>
i.value) : [];
+ state.responsePercentile.p90 = data.p90 ? data.p90.values.map((i: any) =>
i.value) : [];
+ state.responsePercentile.p95 = data.p95 ? data.p95.values.map((i: any) =>
i.value) : [];
+ state.responsePercentile.p99 = data.p99 ? data.p99.values.map((i: any) =>
i.value) : [];
},
[types.SET_INSTANCE_DEPENDENCY](state: State, data: any) {
state.instanceDependency = data;
diff --git a/src/views/components/topology/chart-line.vue
b/src/views/components/topology/chart-line.vue
index 4e6abdd..0fca5f2 100644
--- a/src/views/components/topology/chart-line.vue
+++ b/src/views/components/topology/chart-line.vue
@@ -29,10 +29,7 @@ export default class ChartLine extends Vue {
@Prop() private data!: any;
@Prop() private title!: string;
@Prop() private intervalTime!: any;
- public resize() {
- const chart: any = this.$refs.chart;
- chart.myChart.resize();
- }
+
get option() {
const temp: any = [];
const keys = Object.keys(this.data || {}).filter((i: any) =>
Array.isArray(this.data[i]) && this.data[i].length);
diff --git a/src/views/components/topology/topo-aside.vue
b/src/views/components/topology/topo-aside.vue
index b67a246..4147854 100644
--- a/src/views/components/topology/topo-aside.vue
+++ b/src/views/components/topology/topo-aside.vue
@@ -110,14 +110,13 @@
import { Action, Getter, Mutation, State } from 'vuex-class';
import Radial from './radial.vue';
import TopoChart from './topo-chart.vue';
- import ChartResponse from './topo-response.vue';
import TopoService from './topo-services.vue';
import TopoInstanceDependency from './topo-instance-dependency.vue';
import TopoDetectPoint from './topo-detect-point.vue';
@Component({
components: {
- TopoChart, TopoService, ChartResponse, Radial, AlarmContainers,
+ TopoChart, TopoService, Radial, AlarmContainers,
TraceContainers, InstancesSurveyWindow, EndpointSurveyWindow,
TopoInstanceDependency, TopoDetectPoint,
},
diff --git a/src/views/components/topology/topo-detect-point.vue
b/src/views/components/topology/topo-detect-point.vue
index 4a59f46..e5021cb 100644
--- a/src/views/components/topology/topo-detect-point.vue
+++ b/src/views/components/topology/topo-detect-point.vue
@@ -68,9 +68,9 @@
:title="$t('avgSLA')"
unit="%"
/>
- <ChartResponse
- v-if="stateTopo.p50.length"
- :data="stateTopo"
+ <ChartLine
+ v-if="stateTopo.responsePercentile"
+ :data="stateTopo.responsePercentile"
:intervalTime="intervalTime"
:title="$t('percentResponse')"
/>
@@ -90,12 +90,11 @@
title="Service Throughput"
unit="cpm"
/>
- <ChartResponse
+ <ChartLine
v-if="rocketDashboard.servicePercent.p50.length"
:data="rocketDashboard.servicePercent"
:intervalTime="intervalTime"
- title="Service Response Time Percentile"
- unit="ms"
+ :title="$t('percentResponse')"
/>
</div>
</div>
@@ -126,11 +125,11 @@
import { Action, Getter, Mutation, State } from 'vuex-class';
import TopoChart from './topo-chart.vue';
import TopoInstanceDependency from './topo-instance-dependency.vue';
- import ChartResponse from './topo-response.vue';
+ import ChartLine from './chart-line.vue';
@Component({
components: {
- TopoInstanceDependency, ChartResponse, TopoChart,
+ TopoInstanceDependency, TopoChart, ChartLine,
},
})
export default class TopoDetectPoint extends Vue {
diff --git a/src/views/components/topology/topo-response.vue
b/src/views/components/topology/topo-response.vue
deleted file mode 100644
index c248bc1..0000000
--- a/src/views/components/topology/topo-response.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-/**
- * 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>
- <div>
- <div class="grey sm mb-5">{{title}}</div>
- <RkEcharts height="120px" :option="responseConfig"/>
- </div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { Component, Prop } from 'vue-property-decorator';
-
-@Component
-export default class TopoResponse extends Vue {
- @Prop() private title!: string;
- @Prop() private data!: any;
- @Prop() private intervalTime!: any;
- get p50() {
- return this.data.p50 ?
- [{
- data: this.data.p50.map((i: any, index: number) => [
- this.intervalTime[index],
- i,
- ]),
- name: this.data.p50.length ? 'p50' : null,
- type: 'line',
- symbol: 'none',
- lineStyle: {
- width: 1.5,
- type: 'solid',
- },
- }] : [];
- }
- get p75() {
- return this.data.p75 ?
- [{
- data: this.data.p75.map((i: any, index: number) => [
- this.intervalTime[index],
- i,
- ]),
- name: this.data.p75.length ? 'p75' : null,
- type: 'line',
- symbol: 'none',
- lineStyle: {
- width: 1.5,
- type: 'solid',
- },
- }] : [];
- }
- get p90() {
- return this.data.p90 ?
- [{
- data: this.data.p90.map((i: any, index: number) => [
- this.intervalTime[index],
- i,
- ]),
- name: this.data.p90.length ? 'p90' : null,
- type: 'line',
- symbol: 'none',
- lineStyle: {
- width: 1.5,
- type: 'solid',
- },
- }] : [];
- }
- get p95() {
- return this.data.p95 ?
- [{
- data: this.data.p95.map((i: any, index: number) => [
- this.intervalTime[index],
- i,
- ]),
- name: this.data.p95.length ? 'p95' : null,
- type: 'line',
- symbol: 'none',
- lineStyle: {
- width: 1.5,
- type: 'solid',
- },
- }] : [];
- }
- get p99() {
- return this.data.p99 ?
- [{
- data: this.data.p99.map((i: any, index: number) => [
- this.intervalTime[index],
- i,
- ]),
- name: this.data.p99.length ? 'p99' : null,
- type: 'line',
- symbol: 'none',
- lineStyle: {
- width: 1.5,
- type: 'solid',
- },
- }] : [];
- }
- get responseConfig() {
- return {
- color: [
- '#30A4EB',
- '#45BFC0',
- '#FFCC55',
- '#FF6A84',
- '#a0a7e6',
- ],
- tooltip: {
- trigger: 'axis',
- backgroundColor: 'rgb(50,50,50)',
- textStyle: {
- fontSize: 13,
- },
- },
- // legend: {
- // icon: 'circle',
- // top: 0,
- // left: 0,
- // itemWidth: 12,
- // },
- grid: {
- top: 5,
- left: 0,
- right: 18,
- bottom: 5,
- containLabel: true,
- },
- xAxis: {
- type: 'category',
- axisTick: {
- lineStyle: { color: '#c1c5ca41' },
- alignWithLabel: true,
- },
- splitLine: { show: false },
- axisLine: { lineStyle: { color: 'rgba(0,0,0,0)' } },
- axisLabel: { color: '#9da5b2', fontSize: '11' },
- },
- yAxis: {
- type: 'value',
- axisLine: { show: false },
- axisTick: { show: false },
- splitLine: { lineStyle: { color: '#c1c5ca41', type: 'dashed' } },
- axisLabel: { color: '#9da5b2', fontSize: '11' },
- },
- series: [
- ...this.p50,
- ...this.p75,
- ...this.p90,
- ...this.p95,
- ...this.p99,
- ],
- };
- }
-}
-</script>
