You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2020/12/03 08:32:45 UTC
[skywalking-rocketbot-ui] branch master updated: feat: separation
Log and Dashboard selector data (#390)
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 9e897b4 feat: separation Log and Dashboard selector data (#390)
9e897b4 is described below
commit 9e897b42c6cf9c57907b61d7e994fd7dbcf4cd55
Author: Qiuxia Fan <fi...@outlook.com>
AuthorDate: Thu Dec 3 16:32:34 2020 +0800
feat: separation Log and Dashboard selector data (#390)
---
src/store/modules/dashboard/dashboard-option.ts | 109 ++++++---------------
src/store/modules/log/index.ts | 123 ++++++++++++++++++++----
src/store/mutation-types.ts | 6 ++
src/views/components/log/log-bar.vue | 37 ++++---
4 files changed, 158 insertions(+), 117 deletions(-)
diff --git a/src/store/modules/dashboard/dashboard-option.ts b/src/store/modules/dashboard/dashboard-option.ts
index 826566b..9693506 100644
--- a/src/store/modules/dashboard/dashboard-option.ts
+++ b/src/store/modules/dashboard/dashboard-option.ts
@@ -19,47 +19,42 @@ import { Commit, ActionTree, MutationTree, Dispatch } from 'vuex';
import * as types from './mutation-types';
import { AxiosResponse } from 'axios';
import graph from '@/graph';
-import router from '../../../router';
+interface Options {
+ key: string;
+ label: string;
+}
export interface State {
- services: any[];
- currentService: any;
- databases: any;
- currentDatabase: any;
- endpoints: any[];
- currentEndpoint: any;
- instances: any[];
- currentInstance: any;
+ services: Options[];
+ currentService: Options;
+ databases: Options[];
+ currentDatabase: Options;
+ endpoints: Options[];
+ currentEndpoint: Options;
+ instances: Options[];
+ currentInstance: Options;
updateDashboard: object;
}
const initState: State = {
services: [],
- currentService: {},
+ currentService: { key: '', label: '' },
endpoints: [],
- currentEndpoint: {},
+ currentEndpoint: { key: '', label: '' },
instances: [],
- currentInstance: {},
+ currentInstance: { key: '', label: '' },
databases: [],
- currentDatabase: {},
+ currentDatabase: { key: '', label: '' },
updateDashboard: {},
};
-const concatOption = (data: any) => {
- const isLog: boolean = router.app.$route.fullPath === '/log';
- return isLog ? [{ label: 'All', key: '' }].concat(data) : data;
-};
-// getters
-const getters = {};
-
// mutations
const mutations: MutationTree<State> = {
- [types.SET_SERVICES](state: State, data: any) {
- data = concatOption(data);
+ [types.SET_SERVICES](state: State, data: Options[]) {
state.services = data;
state.currentService = data[0] || {};
},
- [types.SET_CURRENT_SERVICE](state: State, service: any) {
+ [types.SET_CURRENT_SERVICE](state: State, service: Options) {
state.currentService = service;
state.updateDashboard = service;
},
@@ -68,46 +63,39 @@ const mutations: MutationTree<State> = {
state.updateDashboard = { key: +new Date() };
},
- [types.SET_ENDPOINTS](state: State, data: any) {
- data = concatOption(data);
+ [types.SET_ENDPOINTS](state: State, data: Options[]) {
state.endpoints = data;
if (!data.length) {
- state.currentEndpoint = {};
+ state.currentEndpoint = { key: '', label: '' };
return;
}
- if ((!state.currentEndpoint.key && data.length) || !state.endpoints.includes(state.currentEndpoint)) {
- state.currentEndpoint = data[0];
- }
+ state.currentEndpoint = data[0];
},
- [types.SET_CURRENT_ENDPOINT](state: State, endpoint: any) {
+ [types.SET_CURRENT_ENDPOINT](state: State, endpoint: Options) {
state.currentEndpoint = endpoint;
state.updateDashboard = endpoint;
},
- [types.SET_INSTANCES](state: State, data: any) {
- data = concatOption(data);
+ [types.SET_INSTANCES](state: State, data: Options[]) {
state.instances = data;
if (!data.length) {
- state.currentInstance = {};
+ state.currentInstance = { key: '', label: '' };
return;
}
- if ((!state.currentInstance.key && data.length) || !state.instances.includes(state.currentInstance)) {
- state.currentInstance = data[0];
- }
+ state.currentInstance = data[0];
},
- [types.SET_CURRENT_INSTANCE](state: State, instance: any) {
+ [types.SET_CURRENT_INSTANCE](state: State, instance: Options) {
state.currentInstance = instance;
state.updateDashboard = instance;
},
- [types.SET_DATABASES](state: State, data: any) {
+ [types.SET_DATABASES](state: State, data: Options[]) {
state.databases = data;
if (!data.length) {
+ state.currentDatabase = { key: '', label: '' };
return;
}
- if (!state.currentDatabase.key && data.length) {
- state.currentDatabase = data[0];
- }
+ state.currentDatabase = data[0];
},
- [types.SET_CURRENT_DATABASE](state: State, service: any) {
+ [types.SET_CURRENT_DATABASE](state: State, service: Options) {
state.currentDatabase = service;
state.updateDashboard = service;
},
@@ -126,14 +114,6 @@ const actions: ActionTree<State, any> = {
context.commit(types.SET_SERVICES, res.data.data.services);
});
},
- GET_BROWSER_SERVICES(context: { commit: Commit }, params: { duration: any }) {
- return graph
- .query('queryBrowserServices')
- .params(params)
- .then((res: AxiosResponse) => {
- context.commit(types.SET_SERVICES, res.data.data.services);
- });
- },
GET_SERVICE_ENDPOINTS(context: { commit: Commit; state: any }, params: { keyword: string }) {
if (!context.state.currentService.key) {
context.commit(types.SET_ENDPOINTS, []);
@@ -149,14 +129,6 @@ const actions: ActionTree<State, any> = {
context.commit(types.SET_ENDPOINTS, res.data.data.getEndpoints);
});
},
- GET_ENDPOINTS(context: { commit: Commit }, params: any) {
- return graph
- .query('queryEndpoints')
- .params(params)
- .then((res: AxiosResponse) => {
- context.commit(types.SET_ENDPOINTS, res.data.data.endpoints);
- });
- },
GET_SERVICE_INSTANCES(context: { commit: Commit; state: any }, params: any) {
if (!context.state.currentService.key) {
context.commit(types.SET_INSTANCES, []);
@@ -169,14 +141,6 @@ const actions: ActionTree<State, any> = {
context.commit(types.SET_INSTANCES, res.data.data.getServiceInstances);
});
},
- GET_INSTANCES(context: { commit: Commit }, params: any) {
- return graph
- .query('queryInstances')
- .params(params)
- .then((res: AxiosResponse) => {
- context.commit(types.SET_INSTANCES, res.data.data);
- });
- },
GET_DATABASES(context: { commit: Commit; rootState: any }, params: any) {
return graph
.query('queryDatabases')
@@ -193,11 +157,6 @@ const actions: ActionTree<State, any> = {
context.dispatch('GET_SERVICE_ENDPOINTS', {});
context.dispatch('GET_SERVICE_INSTANCES', { duration: params.duration });
},
- SELECT_LOG_SERVICE(context: { commit: Commit; dispatch: Dispatch }, params: any) {
- context.commit('SET_CURRENT_SERVICE', params.service);
- context.dispatch('GET_SERVICE_ENDPOINTS', {});
- context.dispatch('GET_SERVICE_INSTANCES', { duration: params.duration });
- },
SELECT_ENDPOINT(context: { commit: Commit; dispatch: Dispatch; state: any; rootState: any }, params: any) {
context.commit('SET_CURRENT_ENDPOINT', params.endpoint);
},
@@ -214,7 +173,7 @@ const actions: ActionTree<State, any> = {
context.commit(types.SET_CURRENT_ENDPOINT, params.endpoint ? params.endpoint : {});
context.commit(types.SET_CURRENT_INSTANCE, params.instance ? params.instance : {});
},
- MIXHANDLE_GET_OPTION(context: { commit: Commit; dispatch: Dispatch; state: State; getters: any }, params: any) {
+ MIXHANDLE_GET_OPTION(context: { dispatch: Dispatch; state: State }, params: any) {
switch (params.compType) {
case 'service':
return context
@@ -223,11 +182,6 @@ const actions: ActionTree<State, any> = {
.then(() => context.dispatch('GET_SERVICE_INSTANCES', { duration: params.duration }));
case 'database':
return context.dispatch('GET_DATABASES', { duration: params.duration });
- case 'browser':
- return context
- .dispatch('GET_BROWSER_SERVICES', { duration: params.duration })
- .then(() => context.dispatch('GET_SERVICE_ENDPOINTS', {}))
- .then(() => context.dispatch('GET_SERVICE_INSTANCES', { duration: params.duration }));
default:
break;
}
@@ -263,7 +217,6 @@ const actions: ActionTree<State, any> = {
export default {
state: initState,
- getters,
actions,
mutations,
};
diff --git a/src/store/modules/log/index.ts b/src/store/modules/log/index.ts
index a9caac8..d4cedb9 100644
--- a/src/store/modules/log/index.ts
+++ b/src/store/modules/log/index.ts
@@ -20,16 +20,10 @@ import * as types from '@/store/mutation-types';
import { AxiosResponse } from 'axios';
import graph from '@/graph';
-const categories: any = [
- { label: 'All', key: 'ALL' },
- { label: 'Ajax', key: 'AJAX' },
- { label: 'Resource', key: 'RESOURCE' },
- { label: 'Vue', key: 'VUE' },
- { label: 'Promise', key: 'PROMISE' },
- { label: 'Js', key: 'JS' },
- { label: 'Unknown', key: 'UNKNOWN' },
-];
-
+interface Options {
+ key: string;
+ label: string;
+}
export interface State {
type: any;
logCategories: any[];
@@ -38,8 +32,24 @@ export interface State {
categories: any[];
category: any;
loading: boolean;
+ logServices: Options[];
+ currentLogService: Options;
+ logEndpoints: Options[];
+ currentLogEndpoint: Options;
+ logInstances: Options[];
+ currentLogInstance: Options;
}
+const categories: any = [
+ { label: 'All', key: 'ALL' },
+ { label: 'Ajax', key: 'AJAX' },
+ { label: 'Resource', key: 'RESOURCE' },
+ { label: 'Vue', key: 'VUE' },
+ { label: 'Promise', key: 'PROMISE' },
+ { label: 'Js', key: 'JS' },
+ { label: 'Unknown', key: 'UNKNOWN' },
+];
+
const initState: State = {
type: { label: 'Browser', key: 'browser' },
logCategories: [
@@ -51,28 +61,52 @@ const initState: State = {
categories,
category: { label: 'All', key: 'ALL' },
loading: false,
+ logServices: [],
+ currentLogService: { key: '', label: '' },
+ logEndpoints: [],
+ currentLogEndpoint: { key: '', label: '' },
+ logInstances: [],
+ currentLogInstance: { key: '', label: '' },
};
-// getters
-const getters = {};
-
// mutations
const mutations: MutationTree<State> = {
- [types.SELECT_LOG_TYPE](state: State, data: any) {
+ [types.SELECT_LOG_TYPE](state: State, data: Options) {
state.type = data;
},
- [types.SELECT_ERROR_CATALOG](state: State, data: any) {
+ [types.SELECT_ERROR_CATALOG](state: State, data: Options) {
state.category = data;
},
- [types.SET_LOGS](state: State, data: any) {
+ [types.SET_LOGS](state: State, data: any[]) {
state.logs = data;
},
- [types.SET_LOGS_TOTAL](state: State, data: any) {
+ [types.SET_LOGS_TOTAL](state: State, data: number) {
state.total = data;
},
- [types.SET_LOADING](state: State, data: any) {
+ [types.SET_LOADING](state: State, data: boolean) {
state.loading = data;
},
+ [types.SET_LOG_SERVICES](state: State, data: Options[]) {
+ state.logServices = [{ label: 'All', key: '' }, ...data];
+ state.currentLogService = state.logServices[0];
+ },
+ [types.SET_LOG_ENDPOINTS](state: State, data: Options[]) {
+ state.logEndpoints = [{ label: 'All', key: '' }, ...data];
+ state.currentLogEndpoint = state.logEndpoints[0];
+ },
+ [types.SET_LOG_INSTANCES](state: State, data: Options[]) {
+ state.logInstances = [{ label: 'All', key: '' }, ...data];
+ state.currentLogInstance = state.logInstances[0];
+ },
+ [types.SET_CURRENT_LOG_SERVICE](state: State, service: Options) {
+ state.currentLogService = service;
+ },
+ [types.SET_CURRENT_LOG_ENDPOINT](state: State, endpoint: Options) {
+ state.currentLogEndpoint = endpoint;
+ },
+ [types.SET_CURRENT_LOG_INSTANCE](state: State, instance: Options) {
+ state.currentLogInstance = instance;
+ },
};
// actions
@@ -97,12 +131,63 @@ const actions: ActionTree<State, any> = {
break;
}
},
+ GET_LOG_SERVICES(context: { commit: Commit }, params: { duration: any }) {
+ return graph
+ .query('queryBrowserServices')
+ .params(params)
+ .then((res: AxiosResponse) => {
+ context.commit(types.SET_LOG_SERVICES, res.data.data.services);
+ });
+ },
+ LOG_GET_OPTION(context: { dispatch: Dispatch; state: State }, params: any) {
+ context
+ .dispatch('GET_LOG_SERVICES', { duration: params.duration })
+ .then(() => context.dispatch('GET_LOG_ENDPOINTS', {}))
+ .then(() => context.dispatch('GET_LOG_INSTANCES', { duration: params.duration }));
+ },
+ GET_LOG_ENDPOINTS(context: { commit: Commit; state: any }, params: { keyword: string }) {
+ if (!context.state.currentLogEndpoint.key) {
+ context.commit(types.SET_LOG_ENDPOINTS, []);
+ return;
+ }
+ if (!params.keyword) {
+ params.keyword = '';
+ }
+ return graph
+ .query('queryEndpoints')
+ .params({ serviceId: context.state.currentLogEndpoint.key || '', ...params })
+ .then((res: AxiosResponse) => {
+ context.commit(types.SET_LOG_ENDPOINTS, res.data.data.getEndpoints);
+ });
+ },
+ GET_LOG_INSTANCES(context: { commit: Commit; state: any }, params: any) {
+ if (!context.state.currentLogInstance.key) {
+ context.commit(types.SET_LOG_INSTANCES, []);
+ return;
+ }
+ return graph
+ .query('queryInstances')
+ .params({ serviceId: context.state.currentLogInstance.key || '', ...params })
+ .then((res: AxiosResponse) => {
+ context.commit(types.SET_LOG_INSTANCES, res.data.data.getServiceInstances);
+ });
+ },
+ SELECT_LOG_SERVICE(context: { commit: Commit; dispatch: Dispatch }, params: any) {
+ context.commit('SET_CURRENT_LOG_SERVICE', params.service);
+ context.dispatch('GET_LOG_ENDPOINTS', {});
+ context.dispatch('GET_LOG_INSTANCES', { duration: params.duration });
+ },
+ SELECT_LOG_ENDPOINT(context: { commit: Commit; dispatch: Dispatch; state: any; rootState: any }, params: any) {
+ context.commit('SET_CURRENT_LOG_ENDPOINT', params.endpoint);
+ },
+ SELECT_LOG_INSTANCE(context: { commit: Commit; dispatch: Dispatch; state: any; rootState: any }, params: any) {
+ context.commit('SET_CURRENT_LOG_INSTANCE', params.instance);
+ },
};
export default {
// namespaced: true,
state: initState,
- getters,
actions,
mutations,
};
diff --git a/src/store/mutation-types.ts b/src/store/mutation-types.ts
index 7b1aa91..603e45a 100644
--- a/src/store/mutation-types.ts
+++ b/src/store/mutation-types.ts
@@ -116,3 +116,9 @@ export const SELECT_ERROR_CATALOG = 'SELECT_ERROR_CATALOG';
export const SET_LOGS = 'SET_LOGS';
export const SET_LOGS_TOTAL = 'SET_LOGS_TOTAL';
export const SET_LOADING = 'SET_LOADING';
+export const SET_LOG_SERVICES = 'SET_LOG_SERVICES';
+export const SET_LOG_ENDPOINTS = 'SET_LOG_ENDPOINTS';
+export const SET_LOG_INSTANCES = 'SET_LOG_INSTANCES';
+export const SET_CURRENT_LOG_SERVICE = 'SET_CURRENT_LOG_SERVICE';
+export const SET_CURRENT_LOG_ENDPOINT = 'SET_CURRENT_LOG_ENDPOINT';
+export const SET_CURRENT_LOG_INSTANCE = 'SET_CURRENT_LOG_INSTANCE';
diff --git a/src/views/components/log/log-bar.vue b/src/views/components/log/log-bar.vue
index 5aa36f0..bf4a5e0 100644
--- a/src/views/components/log/log-bar.vue
+++ b/src/views/components/log/log-bar.vue
@@ -24,22 +24,22 @@ limitations under the License. -->
<ToolBarSelect
@onChoose="selectService"
:title="this.$t('service')"
- :current="rocketOption.currentService"
- :data="rocketOption.services"
+ :current="logState.currentLogService"
+ :data="logState.logServices"
icon="package"
/>
<ToolBarSelect
@onChoose="selectInstance"
:title="this.$t('version')"
- :current="rocketOption.currentInstance"
- :data="rocketOption.instances"
+ :current="logState.currentLogInstance"
+ :data="logState.logInstances"
icon="disk"
/>
<ToolBarSelect
@onChoose="selectEndpoint"
:title="this.$t('page')"
- :current="rocketOption.currentEndpoint"
- :data="rocketOption.endpoints"
+ :current="logState.currentLogEndpoint"
+ :data="logState.logEndpoints"
icon="code"
/>
<ToolBarSelect
@@ -86,20 +86,17 @@ limitations under the License. -->
@State('rocketOption') private rocketOption: any;
@Mutation('SELECT_LOG_TYPE') private SELECT_LOG_TYPE: any;
@Mutation('SELECT_ERROR_CATALOG') private SELECT_ERROR_CATALOG: any;
-
@Action('SELECT_LOG_SERVICE') private SELECT_LOG_SERVICE: any;
- @Action('SELECT_DATABASE') private SELECT_DATABASE: any;
- @Action('SELECT_ENDPOINT') private SELECT_ENDPOINT: any;
- @Action('SELECT_INSTANCE') private SELECT_INSTANCE: any;
- @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
-
+ @Action('SELECT_LOG_ENDPOINT') private SELECT_LOG_ENDPOINT: any;
+ @Action('SELECT_LOG_INSTANCE') private SELECT_LOG_INSTANCE: any;
+ @Action('LOG_GET_OPTION') private LOG_GET_OPTION: any;
@Action('QUERY_LOGS') private QUERY_LOGS: any;
@Getter('durationTime') private durationTime: any;
private pageNum: number = 1;
private beforeMount() {
- this.MIXHANDLE_GET_OPTION({
+ this.LOG_GET_OPTION({
compType: this.logState.type.key,
duration: this.durationTime,
}).then(() => {
@@ -117,11 +114,11 @@ limitations under the License. -->
}
private selectEndpoint(i: any) {
- this.SELECT_ENDPOINT({ endpoint: i, duration: this.durationTime });
+ this.SELECT_LOG_ENDPOINT({ endpoint: i, duration: this.durationTime });
}
private selectInstance(i: any) {
- this.SELECT_INSTANCE({ instance: i, duration: this.durationTime });
+ this.SELECT_LOG_INSTANCE({ instance: i, duration: this.durationTime });
}
private clearSearch() {
this.SELECT_LOG_SERVICE({ service: { label: 'All', key: '' }, duration: this.durationTime });
@@ -129,13 +126,13 @@ limitations under the License. -->
}
private queryLogs() {
- const { currentService, currentInstance, currentEndpoint } = this.rocketOption;
- const { category } = this.logState;
+ const { category, currentLogService, currentLogInstance, currentLogEndpoint } = this.logState;
+
this.QUERY_LOGS({
condition: {
- serviceId: currentService.key,
- serviceVersionId: currentInstance.key,
- pagePathId: currentEndpoint.key,
+ serviceId: currentLogService.key,
+ serviceVersionId: currentLogInstance.key,
+ pagePathId: currentLogEndpoint.key,
category: category.key,
paging: { pageNum: this.pageNum, pageSize: 35, needTotal: true },
queryDuration: this.durationTime,