This is an automated email from the ASF dual-hosted git repository.
ywang 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 4c47b2e Trace detail optimize (#143)
4c47b2e is described below
commit 4c47b2e316a7dece1f3e5edd5f87a49635af111c
Author: k3vin <[email protected]>
AuthorDate: Sat Aug 31 16:15:38 2019 +0800
Trace detail optimize (#143)
* highlight selected trace item
* add action to set default empty trace
* after click search button add loading on trace-table
* add loding animation on trace table and trace list when change trace item
---
src/store/modules/trace/index.ts | 10 +++++++++
src/store/mutation-types.ts | 1 +
src/views/components/trace/d3-trace.js | 9 +++++---
.../components/trace/trace-detail-chart-list.vue | 23 ++++++++++++++++++-
.../components/trace/trace-detail-chart-table.vue | 17 ++++++++++++++
src/views/components/trace/trace-search.vue | 9 +++++++-
src/views/components/trace/trace-table.vue | 26 ++++++++++++++++++++++
7 files changed, 90 insertions(+), 5 deletions(-)
diff --git a/src/store/modules/trace/index.ts b/src/store/modules/trace/index.ts
index 7394171..11dad00 100644
--- a/src/store/modules/trace/index.ts
+++ b/src/store/modules/trace/index.ts
@@ -81,6 +81,16 @@ const mutations: MutationTree<State> = {
[types.SET_CURRENT_TRACE](state: State, data: Span): void {
state.currentTrace = data;
},
+ [types.SET_DEFAULT_EMPTY_TRACE](state: State): void {
+ state.currentTrace = {
+ operationNames: [],
+ duration: 0,
+ isError: false,
+ key: '',
+ start: '',
+ traceIds: [],
+ };
+ },
};
// actions
diff --git a/src/store/mutation-types.ts b/src/store/mutation-types.ts
index 0c1e08a..cde9349 100644
--- a/src/store/mutation-types.ts
+++ b/src/store/mutation-types.ts
@@ -69,6 +69,7 @@ export const SET_TRACE_SPANS = 'SET_TRACE_SPANS';
export const SET_CURRENT_TRACE = 'SET_CURRENT_TRACE';
export const SET_TRACE_FORM = 'SET_TRACE_FORM';
export const SET_TRACE_FORM_ITEM = 'SET_TRACE_FORM_ITEM';
+export const SET_DEFAULT_EMPTY_TRACE = 'SET_DEFAULT_EMPTY_TRACE';
// topo
export const SET_TOPO = 'SET_TOPO';
diff --git a/src/views/components/trace/d3-trace.js
b/src/views/components/trace/d3-trace.js
index eb2ad01..b87b273 100644
--- a/src/views/components/trace/d3-trace.js
+++ b/src/views/components/trace/d3-trace.js
@@ -86,8 +86,8 @@ export default class Trace {
this.root.x0 = 0;
this.root.y0 = 0;
}
- draw() {
- this.update(this.root);
+ draw(callback) {
+ this.update(this.root, callback);
}
click(d, scope) {
if (!d.data.type) return;
@@ -100,7 +100,7 @@ export default class Trace {
}
scope.update(d);
}
- update(source) {
+ update(source, callback) {
const that = this;
const nodes = this.root.descendants();
let index = -1;
@@ -271,5 +271,8 @@ export default class Trace {
d.x0 = d.x;
d.y0 = d.y;
});
+ if (callback) {
+ callback()
+ }
}
}
diff --git a/src/views/components/trace/trace-detail-chart-list.vue
b/src/views/components/trace/trace-detail-chart-list.vue
index 2bb165c..fbef745 100644
--- a/src/views/components/trace/trace-detail-chart-list.vue
+++ b/src/views/components/trace/trace-detail-chart-list.vue
@@ -17,6 +17,11 @@
<template>
<div class="time-charts scroll_hide">
+ <div class="rk-trace-t-loading" v-show="loading">
+ <svg class="icon loading">
+ <use xlink:href="#spinner"></use>
+ </svg>
+ </div>
<transition-group name="fade" tag="div" class="mb-5">
<span class="time-charts-item mr-10" v-for="(i,index) in list" :key="i"
:style="`color:${computedScale(index)}`">
<svg class="icon vm mr-5 sm">
@@ -70,24 +75,38 @@ export default {
showDetail: false,
list: [],
currentSpan: [],
+ loading: true,
};
},
watch: {
data() {
if(!this.data.length) {return;}
+ this.loading = true;
this.changeTree();
this.tree.init({label:`TRACE_ROOT`, children: this.segmentId},
this.data);
- this.tree.draw()
+ this.tree.draw(() => {
+ setTimeout(() => {
+ this.loading = false
+ }, 200);
+ })
+ }
+ },
+ computed: {
+ eventHub() {
+ return this.$store.getters.globalEventHub
}
},
beforeDestroy() {
d3.selectAll('.d3-tip').remove();
},
mounted() {
+ this.eventHub.$on('TRACE-LIST-LOADING', ()=>{ this.loading = true });
+ // this.loading = true;
this.changeTree();
this.tree = new Trace(this.$refs.traceList, this)
this.tree.init({label:`TRACE_ROOT`, children: this.segmentId}, this.data);
this.tree.draw()
+ this.loading = false;
// this.computedScale();
},
methods: {
@@ -173,6 +192,8 @@ export default {
.time-charts{
overflow: auto;
padding: 10px 30px;
+ position: relative;
+ min-height: 150px;
}
.trace-node .group {
cursor: pointer;
diff --git a/src/views/components/trace/trace-detail-chart-table.vue
b/src/views/components/trace/trace-detail-chart-table.vue
index 3b2b06f..e4fdbf2 100644
--- a/src/views/components/trace/trace-detail-chart-table.vue
+++ b/src/views/components/trace/trace-detail-chart-table.vue
@@ -19,6 +19,11 @@
<template>
<div class="trace-detail-chart-table">
+ <div class="rk-trace-t-loading" v-show="loading">
+ <svg class="icon loading">
+ <use xlink:href="#spinner"></use>
+ </svg>
+ </div>
<TraceContainer>
<Item v-for="(item, index) in tableData" :data="item" :key="'key'+
index" />
</TraceContainer>
@@ -58,6 +63,10 @@
.rk-tooltip-popper.trace-table-tooltip .rk-tooltip-inner{
max-width: 600px;
}
+ .trace-detail-chart-table {
+ position: relative;
+ min-height: 150px;
+ }
</style>
<script>
@@ -78,6 +87,7 @@ export default {
return;
}
this.tableData = this.formatData(this.changeTree());
+ this.loading = false;
},
},
data() {
@@ -88,6 +98,7 @@ export default {
showDetail: false,
list: [],
currentSpan: [],
+ loading: true,
};
},
computed: {
@@ -189,9 +200,15 @@ export default {
this.showDetail = true;
},
},
+ created() {
+ this.loading = true;
+ },
mounted() {
this.tableData = this.formatData(this.changeTree());
+ this.loading = false;
this.eventHub.$on('HANDLE-SELECT-SPAN', this.handleSelectSpan);
+ this.eventHub.$on('TRACE-TABLE-LOADING', ()=>{ this.loading = true });
+
},
};
</script>
diff --git a/src/views/components/trace/trace-search.vue
b/src/views/components/trace/trace-search.vue
index 97c97d4..5d4ae31 100644
--- a/src/views/components/trace/trace-search.vue
+++ b/src/views/components/trace/trace-search.vue
@@ -89,6 +89,9 @@ export default class TraceTool extends Vue {
private endpointName: string = '';
private traceId: string = '';
private traceState: Option = {label: 'All', key: 'ALL'};
+ get eventHub() {
+ return this.$store.getters.globalEventHub;
+ }
private dateFormate = (date: Date, step: string) => {
const year = date.getFullYear();
const monthTemp = date.getMonth() + 1;
@@ -160,7 +163,11 @@ export default class TraceTool extends Vue {
if (this.endpointName) { temp.endpointName = this.endpointName; }
if (this.traceId) { temp.traceId = this.traceId; }
this.SET_TRACE_FORM(temp);
- this.GET_TRACELIST();
+ this.eventHub.$emit('SET_LOADING_TRUE', () => {
+ this.GET_TRACELIST().then(() => {
+ this.eventHub.$emit('SET_LOADING_FALSE');
+ });
+ });
}
private mounted() {
this.time = [this.rocketbotGlobal.durationRow.start,
this.rocketbotGlobal.durationRow.end];
diff --git a/src/views/components/trace/trace-table.vue
b/src/views/components/trace/trace-table.vue
index 9a7b029..c9cf9f5 100644
--- a/src/views/components/trace/trace-table.vue
+++ b/src/views/components/trace/trace-table.vue
@@ -35,6 +35,7 @@
<td class="rk-trace-td" :class="{
'rk-trace-success':!i.isError,
'rk-trace-error':i.isError,
+ 'selected': selectedKey == i.key
}">
<div class="ell mb-5" :class="{
'blue':!i.isError,
@@ -57,17 +58,28 @@ export default class Home extends Vue {
@State('rocketbot') private rocketbot: any;
@Mutation('rocketTrace/SET_TRACE_FORM_ITEM') private SET_TRACE_FORM_ITEM:
any;
@Mutation('rocketTrace/SET_CURRENT_TRACE') private SET_CURRENT_TRACE: any;
+ @Mutation('rocketTrace/SET_DEFAULT_EMPTY_TRACE') private
SET_DEFAULT_EMPTY_TRACE: any;
@Action('rocketTrace/GET_TRACELIST') private GET_TRACELIST: any;
@Action('rocketTrace/GET_TRACE_SPANS') private GET_TRACE_SPANS: any;
private loading: boolean = false;
+ private selectedKey: string = '';
+ get eventHub() {
+ return this.$store.getters.globalEventHub;
+ }
@Watch('rocketTrace.traceList')
private onTraceListChange() {
if (this.rocketTrace.traceList && this.rocketTrace.traceList.length > 0) {
this.selectTrace(this.rocketTrace.traceList[0]);
}
+ if (this.rocketTrace.traceList && this.rocketTrace.traceList.length === 0)
{
+ this.SET_DEFAULT_EMPTY_TRACE();
+ }
}
private selectTrace(i: any) {
this.SET_CURRENT_TRACE(i);
+ this.selectedKey = i.key;
+ this.eventHub.$emit('TRACE-TABLE-LOADING');
+ this.eventHub.$emit('TRACE-LIST-LOADING');
if (i.traceIds.length) {
this.GET_TRACE_SPANS({traceId: i.traceIds[0]});
}
@@ -84,6 +96,17 @@ export default class Home extends Vue {
this.loading = false;
});
}
+ private created() {
+ this.eventHub.$on('SET_LOADING_TRUE', (cb: any) => {
+ this.loading = true;
+ if (cb) {
+ cb();
+ }
+ });
+ this.eventHub.$on('SET_LOADING_FALSE', () => {
+ this.loading = false;
+ });
+ }
}
</script>
<style lang="scss">
@@ -138,6 +161,9 @@ export default class Home extends Vue {
.rk-trace-td {
padding: 8px 10px;
border-bottom: 1px solid rgba(0,0,0,.07);
+ &.selected {
+ background-color: floralwhite;
+ }
}
.rk-trace-success{
border-left: 4px solid rgba(46, 47, 51, 0.1);
