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 05556dc fix issue apache/skywalking#3436 (#155)
05556dc is described below
commit 05556dc723d1baed8755bab1a7ec5d029debdb6f
Author: Kdump <[email protected]>
AuthorDate: Thu Sep 12 22:49:50 2019 +0800
fix issue apache/skywalking#3436 (#155)
* fix issue #3436
---
src/event-bus.ts | 96 ++++++++++++++++++++++
src/main.ts | 2 +
src/store/modules/global/index.ts | 5 --
src/types/vue.d.ts | 7 ++
.../trace/trace-chart-table/trace-item.vue | 5 +-
.../components/trace/trace-detail-chart-list.vue | 7 +-
.../components/trace/trace-detail-chart-table.vue | 9 +-
src/views/components/trace/trace-search.vue | 8 +-
src/views/components/trace/trace-table.vue | 11 +--
9 files changed, 115 insertions(+), 35 deletions(-)
diff --git a/src/event-bus.ts b/src/event-bus.ts
new file mode 100644
index 0000000..7c6b7ef
--- /dev/null
+++ b/src/event-bus.ts
@@ -0,0 +1,96 @@
+import Vue from 'vue';
+
+type VueComponentVM = Vue & { _uid: string; };
+
+interface Handles {
+ [key: string]: any[];
+}
+
+export class EventBus {
+ private readonly Vue: any;
+ private readonly eventMapUid: any;
+ private handles!: Handles;
+
+ constructor(vue: Vue) {
+ if (!this.handles) {
+ Object.defineProperty(this, 'handles', {
+ value: {},
+ enumerable: false,
+ });
+ }
+ this.Vue = vue;
+ // _uid and event name map
+ this.eventMapUid = {};
+ }
+
+ /**
+ * Map events and component relationships while listening for events.
+ * @param eventName
+ * @param vm vue component object or undefined, if is undefined, event not
auto destroy.
+ * @param callback event callback
+ */
+ public $on(eventName: string, vm: Vue | undefined, callback: (cb: any) =>
void) {
+ if (!this.handles[eventName]) {
+ this.handles[eventName] = [];
+ }
+ this.handles[eventName].push(callback);
+ if (vm instanceof this.Vue) {
+ const vueComponentVM = vm as VueComponentVM;
+ this.setEventMapUid(vueComponentVM._uid, eventName);
+ }
+ }
+
+ /**
+ * eventBus.$emit.
+ * @param eventName
+ * @param params
+ */
+ public $emit(eventName: string, ...params: any) {
+ if (this.handles[eventName]) {
+ const len = this.handles[eventName].length;
+ for (let i = 0; i < len; i++) {
+ this.handles[eventName][i](...params);
+ }
+ }
+ }
+
+ /**
+ * eventBus.$off.
+ * @param eventName
+ */
+ public $off(eventName: string) {
+ delete this.handles[eventName];
+ }
+
+ private setEventMapUid(uid: string, eventName: string) {
+ if (!this.eventMapUid[uid]) {
+ this.eventMapUid[uid] = [];
+ }
+ // Push the name of each _uid subscription to the array to which the
respective uid belongs.
+ this.eventMapUid[uid].push(eventName);
+ }
+
+ private $offVmEvent(uid: string) {
+ const currentEvents = this.eventMapUid[uid] || [];
+ currentEvents.forEach((event: any) => {
+ this.$off(event);
+ });
+ }
+}
+
+const $EventBus = {
+ install: (vue: any) => {
+ vue.prototype.$eventBus = new EventBus(vue);
+ vue.mixin({
+ deactivated() {
+ this.$eventBus.$offVmEvent(this._uid);
+ },
+ beforeDestroy() {
+ this.$eventBus.$offVmEvent(this._uid);
+ },
+ });
+ },
+};
+
+
+export default $EventBus;
diff --git a/src/main.ts b/src/main.ts
index 585973d..c11c4d3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -22,6 +22,7 @@ import tooltip from '@/utils/tooltip';
import zh from '@/assets/lang/zh';
import en from '@/assets/lang/en';
import VueI18n from 'vue-i18n';
+import eventBus from './event-bus';
import App from './App.vue';
import router from './router';
import store from './store';
@@ -37,6 +38,7 @@ import 'echarts/lib/component/tooltip';
import VModal from 'vue-js-modal';
import './assets';
+Vue.use(eventBus);
Vue.use(VueI18n);
Vue.use(components);
Vue.use(VModal, {dialog: true});
diff --git a/src/store/modules/global/index.ts
b/src/store/modules/global/index.ts
index b38691a..a09d6ab 100644
--- a/src/store/modules/global/index.ts
+++ b/src/store/modules/global/index.ts
@@ -110,7 +110,6 @@ export interface State {
edit: boolean;
lock: boolean;
utc: string | number;
- eventHub: any;
}
const initState: State = {
@@ -120,14 +119,10 @@ const initState: State = {
edit: false,
lock: true,
utc: window.localStorage.getItem('utc') || -(new Date().getTimezoneOffset()
/ 60),
- eventHub: new Vue(),
};
// getters
const getters = {
- globalEventHub(state: State): any {
- return state.eventHub;
- },
duration(state: State): Duration {
return {
start: getLocalTime(parseInt(state.utc + '', 10),
state.durationRow.start),
diff --git a/src/types/vue.d.ts b/src/types/vue.d.ts
new file mode 100644
index 0000000..579e711
--- /dev/null
+++ b/src/types/vue.d.ts
@@ -0,0 +1,7 @@
+import Vue from 'vue';
+
+declare module 'vue/types/vue' {
+ interface Vue {
+ $eventBus: any;
+ }
+}
diff --git a/src/views/components/trace/trace-chart-table/trace-item.vue
b/src/views/components/trace/trace-chart-table/trace-item.vue
index b6341ff..2d5fc96 100644
--- a/src/views/components/trace/trace-chart-table/trace-item.vue
+++ b/src/views/components/trace/trace-chart-table/trace-item.vue
@@ -162,16 +162,13 @@ export default {
const result = (this.selfTime / this.execTime) * 100 .toFixed(4) + '%';
return result === '0.0000%' ? '0.9%' : result;
},
- eventHub() {
- return this.$store.getters.globalEventHub;
- },
},
methods: {
toggle() {
this.displayChildren = ! this.displayChildren;
},
showSelectSpan() {
- this.eventHub.$emit('HANDLE-SELECT-SPAN', this.data);
+ this.$eventBus.$emit('HANDLE-SELECT-SPAN', this.data);
},
},
};
diff --git a/src/views/components/trace/trace-detail-chart-list.vue
b/src/views/components/trace/trace-detail-chart-list.vue
index 4531a75..c0c5fa9 100644
--- a/src/views/components/trace/trace-detail-chart-list.vue
+++ b/src/views/components/trace/trace-detail-chart-list.vue
@@ -98,16 +98,11 @@ export default {
})
}
},
- computed: {
- eventHub() {
- return this.$store.getters.globalEventHub
- }
- },
beforeDestroy() {
d3.selectAll('.d3-tip').remove();
},
mounted() {
- this.eventHub.$on('TRACE-LIST-LOADING', ()=>{ this.loading = true });
+ this.$eventBus.$on('TRACE-LIST-LOADING', this, ()=>{ this.loading = true
});
// this.loading = true;
this.changeTree();
this.tree = new Trace(this.$refs.traceList, this)
diff --git a/src/views/components/trace/trace-detail-chart-table.vue
b/src/views/components/trace/trace-detail-chart-table.vue
index c6efc6f..465f0ab 100644
--- a/src/views/components/trace/trace-detail-chart-table.vue
+++ b/src/views/components/trace/trace-detail-chart-table.vue
@@ -107,11 +107,6 @@ export default {
loading: true,
};
},
- computed: {
- eventHub() {
- return this.$store.getters.globalEventHub
- }
- },
methods: {
copy,
// 给增加层级关系
@@ -307,8 +302,8 @@ export default {
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 });
+ this.$eventBus.$on('HANDLE-SELECT-SPAN', this, this.handleSelectSpan);
+ this.$eventBus.$on('TRACE-TABLE-LOADING', this, ()=>{ this.loading = true
});
},
};
diff --git a/src/views/components/trace/trace-search.vue
b/src/views/components/trace/trace-search.vue
index 64ff4b9..02fc4ff 100644
--- a/src/views/components/trace/trace-search.vue
+++ b/src/views/components/trace/trace-search.vue
@@ -98,10 +98,6 @@
private traceId: string = localStorage.getItem('traceId') || '';
private traceState: Option = {label: 'All', key: 'ALL'};
- get eventHub() {
- return this.$store.getters.globalEventHub;
- }
-
private dateFormat = (date: Date, step: string) => {
const year = date.getFullYear();
const monthTemp = date.getMonth() + 1;
@@ -204,9 +200,9 @@
localStorage.setItem('traceId', this.traceId);
}
this.SET_TRACE_FORM(temp);
- this.eventHub.$emit('SET_LOADING_TRUE', () => {
+ this.$eventBus.$emit('SET_LOADING_TRUE', () => {
this.GET_TRACELIST().then(() => {
- this.eventHub.$emit('SET_LOADING_FALSE');
+ this.$eventBus.$emit('SET_LOADING_FALSE');
});
});
}
diff --git a/src/views/components/trace/trace-table.vue
b/src/views/components/trace/trace-table.vue
index 4ac66f3..4b26fef 100644
--- a/src/views/components/trace/trace-table.vue
+++ b/src/views/components/trace/trace-table.vue
@@ -63,9 +63,6 @@ export default class TraceTable extends Vue {
@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) {
@@ -78,8 +75,8 @@ export default class TraceTable extends Vue {
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');
+ this.$eventBus.$emit('TRACE-TABLE-LOADING');
+ this.$eventBus.$emit('TRACE-LIST-LOADING');
if (i.traceIds.length) {
this.GET_TRACE_SPANS({traceId: i.traceIds[0]});
}
@@ -97,13 +94,13 @@ export default class TraceTable extends Vue {
});
}
private created() {
- this.eventHub.$on('SET_LOADING_TRUE', (cb: any) => {
+ this.$eventBus.$on('SET_LOADING_TRUE', this, (cb: any) => {
this.loading = true;
if (cb) {
cb();
}
});
- this.eventHub.$on('SET_LOADING_FALSE', () => {
+ this.$eventBus.$on('SET_LOADING_FALSE', this, () => {
this.loading = false;
});
}
