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: Nzhangjuntao <zhangjuntao@cmiot.chinamobile.com>

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;

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

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';

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;

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);
     }
   }

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>

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() {

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));