Feat: Create a dashboard template using the default template (#326)

src/assets/lang/en.ts

@@ -28,7 +28,7 @@ const m = {
   currentEndpoint: 'Current Endpoint',
   currentInstance: 'Current Instance',
   currentDatabase: 'Current Database',
-  templateConfig: 'Template Config',
+  templateConfig: 'Template Configuration',
   copy: 'Copy',
   reset: 'Reset',
   apply: 'Apply',

src/components/rk-header.vue

@@ -39,7 +39,7 @@ limitations under the License. -->
       </router-link>
       <router-link class="nav-link mr-20" to="/profile">
         <svg class="icon sm vm">
-          <use xlink:href="#merge"></use>
+          <use xlink:href="#timeline"></use>
         </svg>
         <span class="vm hide-xs ml-5">{{ this.$t('profile') }}</span>
       </router-link>

src/store/modules/dashboard/dashboard-data-layout.ts

@@ -23,6 +23,7 @@ export interface State {
   group: number;
   index: number;
   tree: CompsTree[];
+  templates: CompsTree[];
 }
 
 export const initState: State = {
@@ -42,6 +43,7 @@ export const initState: State = {
       children: [],
     },
   ],
+  templates: [],
 };
 
 // mutations
@@ -70,17 +72,17 @@ const mutations: MutationTree<State> = {
     state.group = index;
     state.current = current;
   },
-  [types.ADD_COMPS_GROUP](state: State, params: { type: string; name: string }) {
+  [types.ADD_COMPS_GROUP](state: State, params: { type: string; name: string; templateName: string }) {
     if (!params.name) {
       return;
     }
+    const template = state.templates.filter((item) => item.name === params.templateName && params.type === item.type);
+    let group = { name: params.name, type: params.type, query: {}, children: [{ name: 'demo', children: [] }] };
 
-    const newTree = [];
-    Object.keys(state.tree).forEach((i: any) => {
-      newTree.push(state.tree[i]);
-    });
-    newTree.push({ name: params.name, type: params.type, query: {}, children: [{ name: 'demo', children: [] }] });
-    state.tree = newTree;
+    if (template.length) {
+      group = { ...group, children: template[0].children };
+    }
+    state.tree.push(group);
 
     window.localStorage.setItem('dashboard', JSON.stringify(state.tree));
   },
@@ -131,6 +133,9 @@ const mutations: MutationTree<State> = {
     state.tree[state.group].children[state.current].children[params.index] = { ...temp, ...params.values };
     window.localStorage.setItem('dashboard', JSON.stringify(state.tree));
   },
+  [types.SET_TEMPLATES](state: State, templates) {
+    state.templates = templates;
+  },
 };
 
 export default {

src/store/modules/dashboard/mutation-types.ts

@@ -34,6 +34,7 @@ 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';

src/views/components/dashboard/tool-group.vue

@@ -44,6 +44,11 @@ limitations under the License. -->
           <option :value="DASHBOARDTYPE.METRIC">{{ $t('metricsView') }}</option>
           <option :value="DASHBOARDTYPE.DATABASE">{{ $t('databaseView') }}</option>
         </select>
+        <div class="sm grey  mb-5 mr-10" v-show="type !== DASHBOARDTYPE.METRIC">{{ $t('templateConfig') }}</div>
+        <select v-model="templateName" class="rk-dashboard-group-sel" v-show="type !== DASHBOARDTYPE.METRIC">
+          <option :value="''">None</option>
+          <option v-for="template in templates" :key="template.name" :value="template.name">{{ template.name }}</option>
+        </select>
         <div class="sm grey  mb-5 mr-10">{{ $t('templateName') }}</div>
         <input class="mb-5 rk-dashboard-group-input" type="text" v-model="name" />
         <a class="rk-btn r vm long tc confirm" @click="handleCreate">{{ $t('confirm') }}</a>
@@ -74,6 +79,7 @@ limitations under the License. -->
     private type: string = DASHBOARDTYPE.SERVICE;
     private show: boolean = false;
     private DASHBOARDTYPE = DASHBOARDTYPE;
+    private templateName: string = '';
 
     private get compType() {
       return (
@@ -81,7 +87,31 @@ limitations under the License. -->
         'service'
       );
     }
-    private handleOption(index: any) {
+    private get servicesTemplates() {
+      const templates = this.rocketComps.templates.filter(
+        (item: { type: string; name: string; children: any[] }) => item.type === DASHBOARDTYPE.SERVICE,
+      );
+
+      return templates;
+    }
+    private get databaseTemplates() {
+      const templates = this.rocketComps.templates.filter(
+        (item: { type: string; name: string; children: any[] }) => item.type === DASHBOARDTYPE.DATABASE,
+      );
+
+      return templates;
+    }
+    private get templates() {
+      let templates = [];
+      if (this.type === DASHBOARDTYPE.SERVICE) {
+        templates = this.servicesTemplates;
+      } else if (this.type === DASHBOARDTYPE.DATABASE) {
+        templates = this.databaseTemplates;
+      }
+
+      return templates;
+    }
+    private handleOption(index: number) {
       this.MIXHANDLE_CHANGE_GROUP(index);
       return this.MIXHANDLE_GET_OPTION({
         compType: this.compType,
@@ -92,9 +122,10 @@ limitations under the License. -->
       this.name = '';
       this.type = DASHBOARDTYPE.SERVICE;
       this.show = false;
+      this.templateName = '';
     }
     private handleCreate() {
-      this.ADD_COMPS_GROUP({ name: this.name, type: this.type });
+      this.ADD_COMPS_GROUP({ name: this.name, type: this.type, templateName: this.templateName });
       this.handleHide();
     }
   }

src/views/components/topology/topo-group/index.vue

-/** * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the
-NOTICE file distributed with * this work for additional information regarding copyright ownership. * The ASF licenses
-this file to You under the Apache License, Version 2.0 * (the "License"); you may not use this file except in compliance
-with * the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
-required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS
-IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific
-language governing permissions and * limitations under the License. */
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
 
 <template>
   <div class="topo-group">

src/views/containers/dashboard.vue

@@ -78,6 +78,7 @@ limitations under the License. -->
     @Mutation('SET_COMPS_TREE') private SET_COMPS_TREE: any;
     @Mutation('ADD_COMP') private ADD_COMP: any;
     @Mutation('SET_EDIT') private SET_EDIT: any;
+    @Mutation('SET_TEMPLATES') private SET_TEMPLATES: any;
 
     private ObjectsType = ObjectsType;
 
@@ -110,17 +111,24 @@ limitations under the License. -->
       // }).then((data: any) => {
       //   console.log(data);
       // });
-      if (window.localStorage.getItem('version') !== '8.0') {
-        this.GET_ALL_TEMPLATES().then((allTemplate: ITemplate[]) => {
+      this.GET_ALL_TEMPLATES().then((allTemplate: ITemplate[]) => {
+        const dashboardTemplate = allTemplate.filter((item: ITemplate) => item.type === 'DASHBOARD');
+        const templatesConfig = dashboardTemplate.map((item: ITemplate) => JSON.parse(item.configuration)).flat(1);
+        this.SET_TEMPLATES(templatesConfig);
+        if (window.localStorage.getItem('version') !== '8.0') {
           window.localStorage.removeItem('dashboard');
-          this.setDashboardTemplates(allTemplate);
+          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));
           this.handleOption();
-        });
-      } else {
-        const data: string = `${window.localStorage.getItem('dashboard')}`;
-        this.SET_COMPS_TREE(JSON.parse(data));
-      }
-      this.handleOption();
+        } else {
+          const data: string = `${window.localStorage.getItem('dashboard')}`;
+          this.SET_COMPS_TREE(JSON.parse(data));
+          this.handleOption();
+        }
+      });
     }
     private setDashboardTemplates(allTemplate: ITemplate[]) {
       const template = allTemplate.filter((item: ITemplate) => item.type === 'DASHBOARD' && item.activated);