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 <zhangjuntao@cmiot.chinamobile.com>
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 @@
tree: [
{
name: '',
+ serviceFilter: '',
type: 'service',
query: {
service: {},
@@ -68,6 +69,10 @@
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 @@
currentEndpoint: any;
instances: any[];
currentInstance: any;
- keywordService: string;
updateDashboard: string;
}
@@ -42,7 +41,6 @@
currentInstance: {},
databases: [],
currentDatabase: {},
- keywordService: localStorage.getItem('keywordServiceName') || '',
updateDashboard: '',
};
@@ -105,10 +103,6 @@
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_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 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 @@
@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 @@
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 @@
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 @@
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 @@
: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 @@
@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 @@
}
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 @@
<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 @@
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 @@
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 @@
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));
