You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by qi...@apache.org on 2020/07/11 02:49:03 UTC
[skywalking-rocketbot-ui] branch master updated: Feat: Service
filter in the template (#324)
This is an automated email from the ASF dual-hosted git repository.
qiuxiafan 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 6f037dd Feat: Service filter in the template (#324)
6f037dd is described below
commit 6f037dd46d4d2b624fc68482aa97452fe6d0b36b
Author: Juntao Zhang <jt...@163.com>
AuthorDate: Sat Jul 11 10:48:53 2020 +0800
Feat: Service filter in the template (#324)
* feat: service filter in the template
* feat: add filter in the template
* refactor: change the field name
Co-authored-by: zhangjuntao <zh...@cmiot.chinamobile.com>
---
src/store/modules/dashboard/dashboard-data-layout.ts | 5 +++++
src/store/modules/dashboard/dashboard-option.ts | 6 ------
src/store/modules/dashboard/mutation-types.ts | 2 +-
src/types/dashboard.d.ts | 1 +
src/views/components/dashboard/tool-bar-btns.vue | 7 ++++---
src/views/components/dashboard/tool-bar.vue | 11 ++++++++---
src/views/components/dashboard/tool-group.vue | 5 +++--
src/views/containers/dashboard.vue | 4 ++--
8 files changed, 24 insertions(+), 17 deletions(-)
diff --git a/src/store/modules/dashboard/dashboard-data-layout.ts b/src/store/modules/dashboard/dashboard-data-layout.ts
index 27d2879..ea43176 100644
--- a/src/store/modules/dashboard/dashboard-data-layout.ts
+++ b/src/store/modules/dashboard/dashboard-data-layout.ts
@@ -33,6 +33,7 @@ export const initState: State = {
tree: [
{
name: '',
+ serviceFilter: '',
type: 'service',
query: {
service: {},
@@ -68,6 +69,10 @@ const mutations: MutationTree<State> = {
state.group = current;
state.current = 0;
},
+ [types.SET_CURRENT_SERVICE_FILTER](state: State, serviceFilter: string) {
+ state.tree.splice(state.group, 1, Object.assign(state.tree[state.group], { serviceFilter }));
+ window.localStorage.setItem('dashboard', JSON.stringify(state.tree));
+ },
[types.SET_CURRENT_GROUP_WITH_CURRENT](state: State, { index, current = 0 }: { index: number; current: number }) {
state.group = index;
state.current = current;
diff --git a/src/store/modules/dashboard/dashboard-option.ts b/src/store/modules/dashboard/dashboard-option.ts
index 0b1135e..d9ec445 100644
--- a/src/store/modules/dashboard/dashboard-option.ts
+++ b/src/store/modules/dashboard/dashboard-option.ts
@@ -29,7 +29,6 @@ export interface State {
currentEndpoint: any;
instances: any[];
currentInstance: any;
- keywordService: string;
updateDashboard: string;
}
@@ -42,7 +41,6 @@ const initState: State = {
currentInstance: {},
databases: [],
currentDatabase: {},
- keywordService: localStorage.getItem('keywordServiceName') || '',
updateDashboard: '',
};
@@ -105,10 +103,6 @@ const mutations: MutationTree<State> = {
state.currentDatabase = service;
state.updateDashboard = service;
},
- [types.SET_KEYWORDSERVICE](state: State, data: string) {
- state.keywordService = data;
- window.localStorage.setItem('keywordServiceName', data);
- },
};
// actions
diff --git a/src/store/modules/dashboard/mutation-types.ts b/src/store/modules/dashboard/mutation-types.ts
index d43fb6f..9c0c6fa 100644
--- a/src/store/modules/dashboard/mutation-types.ts
+++ b/src/store/modules/dashboard/mutation-types.ts
@@ -33,11 +33,11 @@ export const SET_ENDPOINT_INFO = 'SET_ENDPOINT_INFO';
export const SET_INSTANCES = 'SET_INSTANCES';
export const SET_CURRENT_INSTANCE = 'SET_CURRENT_INSTANCE';
export const SET_INSTANCE_INFO = 'SET_INSTANCE_INFO';
-export const SET_KEYWORDSERVICE = 'SET_KEYWORDSERVICE';
export const SET_TEMPLATES = 'SET_TEMPLATES';
// comp
export const SET_CURRENT_GROUP = 'SET_CURRENT_GROUP';
+export const SET_CURRENT_SERVICE_FILTER = 'SET_CURRENT_SERVICE_FILTER';
export const SET_CURRENT_GROUP_WITH_CURRENT = 'SET_CURRENT_GROUP_WITH_CURRENT';
export const SET_CURRENT_COMPS = 'SET_CURRENT_COMPS';
export const ADD_COMPS_GROUP = 'ADD_COMPS_GROUP';
diff --git a/src/types/dashboard.d.ts b/src/types/dashboard.d.ts
index 0b1aa7e..991847e 100644
--- a/src/types/dashboard.d.ts
+++ b/src/types/dashboard.d.ts
@@ -41,6 +41,7 @@ export interface CompsGroup {
export interface CompsTree {
name?: string;
+ serviceFilter?: string;
type: string;
query: any;
children: any;
diff --git a/src/views/components/dashboard/tool-bar-btns.vue b/src/views/components/dashboard/tool-bar-btns.vue
index cdf6ac2..293678d 100644
--- a/src/views/components/dashboard/tool-bar-btns.vue
+++ b/src/views/components/dashboard/tool-bar-btns.vue
@@ -60,6 +60,7 @@ limitations under the License. -->
@Component({})
export default class ToolBarBtns extends Vue {
@Prop() private compType!: any;
+ @Prop() private dashboardType!: any;
@Prop() private rocketGlobal!: any;
@Prop() private rocketComps!: any;
@Prop() private durationTime!: any;
@@ -73,7 +74,8 @@ limitations under the License. -->
return this.MIXHANDLE_GET_OPTION({
compType: this.compType,
duration: this.durationTime,
- keywordServiceName: this.rocketOption.keywordService,
+ keywordServiceName:
+ this.rocketComps.tree[this.rocketComps.group] && this.rocketComps.tree[this.rocketComps.group].serviceFilter,
});
}
private handleSetEdit() {
@@ -85,7 +87,7 @@ limitations under the License. -->
if (!Array.isArray(data)) {
throw new Error();
}
- const { children, name, type } = data[0];
+ const [{ children, name, type }] = data;
if (children && name && type) {
this.IMPORT_TREE(data);
} else {
@@ -101,7 +103,6 @@ limitations under the License. -->
const group = this.rocketComps.tree[this.rocketComps.group];
delete group.query;
const name = 'dashboard.json';
-
saveFile([group], name);
}
}
diff --git a/src/views/components/dashboard/tool-bar.vue b/src/views/components/dashboard/tool-bar.vue
index 39234bf..91d8762 100644
--- a/src/views/components/dashboard/tool-bar.vue
+++ b/src/views/components/dashboard/tool-bar.vue
@@ -18,13 +18,18 @@ limitations under the License. -->
:rocketGlobal="rocketGlobal"
:rocketComps="rocketComps"
:compType="compType"
+ :dashboardType="dashboardType"
:durationTime="durationTime"
:rocketOption="rocketOption"
></ToolBarBtns>
<div class="rk-dashboard-bar flex-h" v-if="compType !== dashboardType.DATABASE">
<div class="sm grey service-search" v-if="compType === dashboardType.SERVICE">
<div>{{ this.$t('serviceFilter') }}</div>
- <input type="text" :value="rocketOption.keywordService" @change="searchServices($event.target.value)" />
+ <input
+ type="text"
+ :value="rocketComps.tree[rocketComps.group].serviceFilter"
+ @change="searchServices($event.target.value)"
+ />
</div>
<ToolBarSelect
v-if="compType === dashboardType.SERVICE"
@@ -80,7 +85,7 @@ limitations under the License. -->
@Prop() private durationTime!: any;
@State('rocketOption') private rocketOption: any;
@Mutation('ADD_COMP') private ADD_COMP: any;
- @Mutation('SET_KEYWORDSERVICE') private SET_KEYWORDSERVICE: any;
+ @Mutation('SET_CURRENT_SERVICE_FILTER') private SET_CURRENT_SERVICE_FILTER: any;
@Action('SELECT_SERVICE') private SELECT_SERVICE: any;
@Action('SELECT_DATABASE') private SELECT_DATABASE: any;
@Action('SELECT_ENDPOINT') private SELECT_ENDPOINT: any;
@@ -106,7 +111,7 @@ limitations under the License. -->
}
private searchServices(value: string) {
this.GET_SERVICES({ duration: this.durationTime, keyword: value });
- this.SET_KEYWORDSERVICE(value);
+ this.SET_CURRENT_SERVICE_FILTER(value);
}
}
</script>
diff --git a/src/views/components/dashboard/tool-group.vue b/src/views/components/dashboard/tool-group.vue
index 00e9d94..0350a76 100644
--- a/src/views/components/dashboard/tool-group.vue
+++ b/src/views/components/dashboard/tool-group.vue
@@ -17,7 +17,7 @@ limitations under the License. -->
<span v-for="(i, index) in rocketComps.tree || []" :key="index" class="mr-15">
<a
class="rk-dashboard-group-i mb-10"
- @click="handleOption(index)"
+ @click="handleOption(index, i.serviceFilter)"
:class="{
active: rocketComps.group == index,
grey: rocketComps.group != index,
@@ -111,11 +111,12 @@ limitations under the License. -->
return templates;
}
- private handleOption(index: number) {
+ private handleOption(index: number, serviceFilter: string) {
this.MIXHANDLE_CHANGE_GROUP(index);
return this.MIXHANDLE_GET_OPTION({
compType: this.compType,
duration: this.durationTime,
+ keywordServiceName: serviceFilter,
});
}
private handleHide() {
diff --git a/src/views/containers/dashboard.vue b/src/views/containers/dashboard.vue
index b48b530..016bfc8 100644
--- a/src/views/containers/dashboard.vue
+++ b/src/views/containers/dashboard.vue
@@ -99,7 +99,8 @@ limitations under the License. -->
this.MIXHANDLE_GET_OPTION({
compType: this.compType,
duration: this.durationTime,
- keywordServiceName: this.stateDashboardOption.keywordService,
+ keywordServiceName:
+ this.rocketComps.tree[this.rocketComps.group] && this.rocketComps.tree[this.rocketComps.group].serviceFilter,
});
}
private beforeMount() {
@@ -133,7 +134,6 @@ limitations under the License. -->
private setDashboardTemplates(allTemplate: ITemplate[]) {
const template = allTemplate.filter((item: ITemplate) => item.type === 'DASHBOARD' && item.activated);
const templatesConfiguration = template.map((item: ITemplate) => JSON.parse(item.configuration)).flat(1);
-
this.SET_COMPS_TREE(templatesConfiguration || []);
window.localStorage.setItem('version', '8.0');
window.localStorage.setItem('dashboard', JSON.stringify(templatesConfiguration));