You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@skywalking.apache.org by li...@apache.org on 2020/03/17 15:02:13 UTC
[skywalking-rocketbot-ui] branch master updated: Bugfix: profile
analyzation (#272)
This is an automated email from the ASF dual-hosted git repository.
liuhan 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 32e1f38 Bugfix: profile analyzation (#272)
32e1f38 is described below
commit 32e1f3896a82a1a8a33df4970377c4c478040f4e
Author: Qiuxia Fan <fi...@outlook.com>
AuthorDate: Tue Mar 17 23:02:04 2020 +0800
Bugfix: profile analyzation (#272)
* fix: init endpointName
* fix: update profile analyze
* fix: update current span
* fix: select Span
* fix: errors
---
src/store/modules/profile/profile-store.ts | 16 ++++----
src/store/mutation-types.ts | 1 +
.../common/trace-chart-table/trace-item.vue | 13 ++++--
.../components/common/trace-detail-chart-table.vue | 2 +
.../profile/profile-detail-chart-table.vue | 48 ++++++----------------
src/views/components/profile/profile-item.vue | 9 +---
.../components/profile/profile-trace-detail.vue | 41 ++++++++++--------
src/views/containers/profile.vue | 1 +
8 files changed, 60 insertions(+), 71 deletions(-)
diff --git a/src/store/modules/profile/profile-store.ts b/src/store/modules/profile/profile-store.ts
index 9dbc39f..c720767 100644
--- a/src/store/modules/profile/profile-store.ts
+++ b/src/store/modules/profile/profile-store.ts
@@ -40,6 +40,7 @@ export interface State {
segmentList: TracesSourceType[];
profileAnalyzation: any;
highlightTop: boolean;
+ currentSpan: any;
}
const initState: State = {
headerSource: {
@@ -62,6 +63,7 @@ const initState: State = {
segmentList: [],
profileAnalyzation: [],
highlightTop: true,
+ currentSpan: {},
};
// getters
const getters = {
@@ -76,7 +78,7 @@ const mutations = {
state.headerSource.serviceSource = [{ key: 'all', label: 'All' }, ...data];
state.headerSource.currentService = state.headerSource.serviceSource[0];
state.taskFieldSource.serviceSource = data;
- state.newTaskFields.service = data[0];
+ state.newTaskFields.service = data[0] || {};
},
[types.SET_TASK_OPTIONS](state: State, data: { type: string; item: IOption }) {
const param = ['minThreshold', 'endpointName'];
@@ -91,6 +93,9 @@ const mutations = {
[types.SET_SEGMENT_SPANS](state: State, data: any[]) {
state.segmentSpans = data;
},
+ [types.SET_CURRENT_SPAN](state: State, data: any) {
+ state.currentSpan = data;
+ },
[types.SET_SEGMENT_LIST](state: State, data: TracesSourceType[]) {
state.segmentList = data;
},
@@ -191,14 +196,7 @@ const actions = {
return;
}
const index = getProfiledSegment.spans.length - 1 || 0;
- const currentSpan = getProfiledSegment.spans[index];
- const timeRanges = [
- {
- start: currentSpan.startTime,
- end: currentSpan.endTime,
- },
- ];
- context.dispatch('GET_PROFILE_ANALYZE', { segmentId: params.segmentId, timeRanges });
+ context.commit(types.SET_CURRENT_SPAN, getProfiledSegment.spans[index]);
})
.catch((error: any) => {
throw error;
diff --git a/src/store/mutation-types.ts b/src/store/mutation-types.ts
index 4374417..20fcbc9 100644
--- a/src/store/mutation-types.ts
+++ b/src/store/mutation-types.ts
@@ -110,3 +110,4 @@ export const SET_SEGMENT_LIST = 'SET_SEGMENT_LIST';
export const SET_CURRENT_SEGMENT = 'SET_CURRENT_SEGMENT';
export const SET_PROFILE_ANALYZATION = 'SET_PROFILE_ANALYZATION';
export const SET_HIGHLIGHT_TOP = 'SET_HIGHLIGHT_TOP';
+export const SET_CURRENT_SPAN = 'SET_CURRENT_SPAN';
diff --git a/src/views/components/common/trace-chart-table/trace-item.vue b/src/views/components/common/trace-chart-table/trace-item.vue
index 5155b1c..0169a71 100644
--- a/src/views/components/common/trace-chart-table/trace-item.vue
+++ b/src/views/components/common/trace-chart-table/trace-item.vue
@@ -55,6 +55,14 @@ language governing permissions and * limitations under the License. */
export default {
name: 'item',
props: ['data'],
+ watch: {
+ data() {
+ const items = document.querySelectorAll('.trace-item');
+ for (const item of items) {
+ item.style.background = '#fff';
+ }
+ },
+ },
data() {
return {
displayChildren: true,
@@ -96,10 +104,10 @@ language governing permissions and * limitations under the License. */
for (const item of items) {
item.style.background = '#fff';
}
- this.$refs.traceItem.style.background = 'rgba(0, 0, 0, 0.04)';
+ this.$refs.traceItem.style.background = 'rgba(0, 0, 0, 0.1)';
this.$eventBus.$emit('HANDLE-SELECT-SPAN', this.data);
},
- viewSpanDetail(data) {
+ viewSpanDetail() {
this.showSelectSpan();
this.$eventBus.$emit('HANDLE-VIEW-SPAN', this.data);
},
@@ -109,7 +117,6 @@ language governing permissions and * limitations under the License. */
<style lang="scss" scoped>
@import './trace.scss';
.trace-item.level0 {
- background: rgba(0, 0, 0, 0.04);
color: #448dfe;
&:hover {
background: rgba(0, 0, 0, 0.04);
diff --git a/src/views/components/common/trace-detail-chart-table.vue b/src/views/components/common/trace-detail-chart-table.vue
index 825b976..2ed8ce3 100644
--- a/src/views/components/common/trace-detail-chart-table.vue
+++ b/src/views/components/common/trace-detail-chart-table.vue
@@ -100,6 +100,7 @@ language governing permissions and * limitations under the License. */
watch: {
data(val, oldVal) {
if (!this.data.length) {
+ this.tableData = [];
return;
}
this.tableData = this.formatData(this.changeTree());
@@ -285,6 +286,7 @@ language governing permissions and * limitations under the License. */
if (!this.showBtnDetail) {
this.showDetail = true;
}
+ this.$emit('selectSpan', data);
},
showCurrentSpanDetail(title, text) {
const textLineNumber = text.split('\n').length;
diff --git a/src/views/components/profile/profile-detail-chart-table.vue b/src/views/components/profile/profile-detail-chart-table.vue
index c46d62b..80f3cb6 100644
--- a/src/views/components/profile/profile-detail-chart-table.vue
+++ b/src/views/components/profile/profile-detail-chart-table.vue
@@ -8,30 +8,12 @@ language governing permissions and * limitations under the License. */
<template>
<div class="profile-detail-chart-table">
- <div class="rk-trace-t-loading" v-show="loading">
- <svg class="icon loading">
- <use xlink:href="#spinner"></use>
- </svg>
- </div>
- <div class="profile-table">
- <ProfileContainer :highlightTop="highlightTop">
- <Item :highlightTop="highlightTop" v-for="(item, index) in tableData" :data="item" :key="'key' + index" />
- <div class="profile-tips" v-if="!tableData.length">{{ $t('noData') }}</div>
- </ProfileContainer>
- </div>
+ <ProfileContainer :highlightTop="highlightTop">
+ <Item :highlightTop="highlightTop" v-for="(item, index) in tableData" :data="item" :key="'key' + index" />
+ <div class="profile-tips" v-if="!tableData.length">{{ $t('noData') }}</div>
+ </ProfileContainer>
</div>
</template>
-<style lang="scss">
- .rk-tooltip-popper.trace-table-tooltip .rk-tooltip-inner {
- max-width: 600px;
- }
- .profile-detail-chart-table {
- position: relative;
- min-height: 150px;
- margin-top: 20px;
- }
-</style>
-
<script lang="js">
import copy from '@/utils/copy';
import Item from './profile-item';
@@ -47,13 +29,14 @@ language governing permissions and * limitations under the License. */
watch: {
data() {
if (!this.data.length) {
+ this.tableData = [];
return;
}
this.tableData = this.processTree();
- this.loading = false;
},
highlightTop() {
if (!this.data.length) {
+ this.tableData = [];
return;
}
this.tableData = this.processTree();
@@ -62,8 +45,6 @@ language governing permissions and * limitations under the License. */
data() {
return {
tableData: [],
- currentSpan: [],
- loading: true,
};
},
methods: {
@@ -114,18 +95,9 @@ language governing permissions and * limitations under the License. */
return res;
},
- handleSelectSpan(data) {
- this.currentSpan = data;
- },
- },
- created() {
- this.loading = true;
},
mounted() {
this.tableData = this.processTree();
- this.loading = false;
- this.$eventBus.$on('HANDLE-SELECT-SPAN', this, this.handleSelectSpan);
- this.$eventBus.$on('TRACE-TABLE-LOADING', this, () => { this.loading = true; });
},
};
</script>
@@ -140,7 +112,13 @@ language governing permissions and * limitations under the License. */
text-align: center;
margin-top: 10px;
}
- .profile-table {
+ .rk-tooltip-popper.trace-table-tooltip .rk-tooltip-inner {
+ max-width: 600px;
+ }
+ .profile-detail-chart-table {
+ position: relative;
+ min-height: 150px;
+ margin-top: 20px;
overflow-x: scroll;
}
</style>
diff --git a/src/views/components/profile/profile-item.vue b/src/views/components/profile/profile-item.vue
index 73556e9..110d73c 100644
--- a/src/views/components/profile/profile-item.vue
+++ b/src/views/components/profile/profile-item.vue
@@ -8,11 +8,7 @@ language governing permissions and * limitations under the License. */
<template>
<div>
- <div
- @click="showSelectSpan"
- :class="['profile-item', 'level' + data.parentId]"
- :style="{ color: data.topDur ? '#448dfe' : '#3d444f' }"
- >
+ <div :class="['profile-item', 'level' + data.parentId]" :style="{ color: data.topDur ? '#448dfe' : '#3d444f' }">
<div :class="['thread', 'level' + data.parentId]" :style="{ 'text-indent': data.parentId * 4 + 'px' }">
<svg
class="icon vm cp trans"
@@ -49,9 +45,6 @@ language governing permissions and * limitations under the License. */
toggle() {
this.displayChildren = !this.displayChildren;
},
- showSelectSpan() {
- this.$eventBus.$emit('HANDLE-SELECT-SPAN', this.data);
- },
},
};
</script>
diff --git a/src/views/components/profile/profile-trace-detail.vue b/src/views/components/profile/profile-trace-detail.vue
index 8a7ecfe..5b2392b 100644
--- a/src/views/components/profile/profile-trace-detail.vue
+++ b/src/views/components/profile/profile-trace-detail.vue
@@ -25,16 +25,24 @@ language governing permissions and * limitations under the License. */
:traceId="currentSegment.traceIds[0]"
:showBtnDetail="true"
:HeaderType="'profile'"
+ @selectSpan="selectSpan"
/>
- <ProfileDetailChartTable :data="profileAnalyzation" :highlightTop="highlightTop" />
- <div v-if="message">{{ message }}</div>
+ <div>
+ <ProfileDetailChartTable :data="profileAnalyzation" :highlightTop="highlightTop" v-if="!loading" />
+ <div class="rk-trace-t-loading" v-show="loading">
+ <svg class="icon loading">
+ <use xlink:href="#spinner"></use>
+ </svg>
+ </div>
+ <div v-if="message">{{ message }}</div>
+ </div>
</div>
</template>
<script lang="ts">
import { Duration, Option } from '@/types/global';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
- import { Action } from 'vuex-class';
+ import { Action, State, Mutation } from 'vuex-class';
import { TraceDetailChartTable } from '../common';
import ProfileDetailChartTable from './profile-detail-chart-table.vue';
@@ -46,27 +54,23 @@ language governing permissions and * limitations under the License. */
@Prop() private currentSegment: any;
@Prop() private profileAnalyzation: any;
@Prop() private highlightTop!: boolean;
+ @Prop() private currentSpan!: any;
@Action('profileStore/GET_PROFILE_ANALYZE') private GET_PROFILE_ANALYZE: any;
+ @Mutation('profileStore/SET_CURRENT_SPAN') private SET_CURRENT_SPAN: any;
- private currentSpan: any;
private timeRange: Array<{ start: number; end: number }> = [];
private mode: string = 'include';
private message: string = '';
+ private loading: boolean = false;
- private created() {
- this.$eventBus.$on('HANDLE-SELECT-SPAN', this, this.handleSelectSpan);
- }
- private handleSelectSpan(data: any) {
- this.currentSpan = data;
+ private selectSpan(data: any) {
+ this.SET_CURRENT_SPAN(data);
}
private spanModeChange(item: any) {
this.mode = item.target.value;
this.updateTimeRange();
}
private updateTimeRange() {
- if (!this.currentSpan) {
- this.currentSpan = this.segmentSpans[0];
- }
if (this.mode === 'include') {
this.timeRange = [
{
@@ -76,7 +80,7 @@ language governing permissions and * limitations under the License. */
];
} else {
const { children, startTime, endTime } = this.currentSpan;
- const timeRange = [];
+ let timeRange = [];
if (!children || !children.length) {
this.timeRange = [
@@ -91,15 +95,15 @@ language governing permissions and * limitations under the License. */
timeRange.push(
{
start: startTime,
- end: item.startTime - 1,
+ end: item.startTime,
},
{
- start: item.endTime + 1,
+ start: item.endTime,
end: endTime,
},
);
}
- this.timeRange = timeRange.reduce((prev: any[], cur) => {
+ timeRange = timeRange.reduce((prev: any[], cur) => {
let isUpdate = false;
for (const item of prev) {
if (cur.start <= item.end && item.start <= cur.start) {
@@ -113,9 +117,11 @@ language governing permissions and * limitations under the License. */
}
return prev;
}, []);
+ this.timeRange = timeRange.filter((item: any) => item.start !== item.end);
}
}
private analyzeProfile() {
+ this.loading = true;
this.updateTimeRange();
this.GET_PROFILE_ANALYZE({
segmentId: this.currentSegment.segmentId,
@@ -126,6 +132,9 @@ language governing permissions and * limitations under the License. */
})
.catch((err: any) => {
throw err;
+ })
+ .finally(() => {
+ this.loading = false;
});
}
}
diff --git a/src/views/containers/profile.vue b/src/views/containers/profile.vue
index eb6ca9f..5c1b9fe 100644
--- a/src/views/containers/profile.vue
+++ b/src/views/containers/profile.vue
@@ -24,6 +24,7 @@ language governing permissions and * limitations under the License. */
:segmentSpans="profile.segmentSpans"
:profileAnalyzation="profile.profileAnalyzation"
:highlightTop="profile.highlightTop"
+ :currentSpan="profile.currentSpan"
/>
</div>
</div>