Bugfix: Dashboard templates (#307)

src/assets/lang/en.ts

@@ -32,9 +32,9 @@ const m = {
   copy: 'Copy',
   reset: 'Reset',
   apply: 'Apply',
-  createGroup: 'Create Group',
-  groupType: 'Group Type',
-  groupName: 'Group Name',
+  createTemplate: 'Create Template',
+  templateType: 'Template Type',
+  templateName: 'Template Name',
   template: 'Template',
   confirm: 'Confirm',
   cancel: 'Cancel',
@@ -128,7 +128,7 @@ const m = {
   excludeChildren: 'Exclude Children',
   view: 'View',
   timeTips: 'Time interval cannot exceed 60 days',
-  standardAPM: 'Standard APM',
+  standardAPM: 'Standard',
   entityType: 'Entity type',
   independentSelector: 'Selectors',
   unknownMetrics: 'Unknown Metrics',
@@ -142,6 +142,11 @@ const m = {
   serviceFilter: 'Service Filter',
   endpointFilter: 'Endpoint Filter',
   editConfig: 'Edit Config',
+  databaseView: 'Database',
+  metricsView: 'NOC - Network Operation Center',
+  sortOrder: 'Sort Order',
+  descendOrder: 'Descend Order',
+  increaseOrder: 'Increase Order',
 };
 
 export default m;

src/assets/lang/zh.ts

@@ -32,9 +32,9 @@ const m = {
   copy: '拷贝',
   reset: '重制',
   apply: '应用',
-  createGroup: '创建分组',
-  groupType: '分组类型',
-  groupName: '分组名',
+  createTemplate: '创建模板',
+  templateType: '模板类型',
+  templateName: '模板名称',
   template: '模版',
   confirm: '确定',
   cancel: '取消',
@@ -142,6 +142,11 @@ const m = {
   serviceFilter: '服务过滤器',
   endpointFilter: '端点过滤器',
   editConfig: '编辑',
+  databaseView: '数据库视图',
+  metricsView: '大屏视图',
+  sortOrder: '排序方式',
+  descendOrder: '递减顺序',
+  increaseOrder: '递增顺序',
 };
 
 export default m;

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

@@ -66,7 +66,7 @@ const actions: ActionTree<State, any> = {
                 normal: true,
                 scope: config.entityType,
                 topN: 10,
-                order: 'DES',
+                order: config.sortOrder || 'DES',
               },
             }
           : {
@@ -90,7 +90,7 @@ const actions: ActionTree<State, any> = {
                 normal,
                 scope: normal ? config.entityType : config.parentService ? 'Service' : config.entityType,
                 topN: 10,
-                order: 'DES',
+                order: config.sortOrder || 'DES',
               },
             }
           : {

src/views/components/dashboard/charts/chart-edit.vue

@@ -156,7 +156,7 @@ limitations under the License. -->
           <option v-for="type in IndependentType" :value="type.key" :key="type.key">{{ type.label }}</option>
         </select>
       </div>
-      <div class="flex-h mb-5" v-show="isParentService.includes(itemConfig.queryMetricType)">
+      <div class="flex-h mb-5" v-show="nameMetrics.includes(itemConfig.queryMetricType)">
         <div class="title grey sm">{{ $t('parentService') }}:</div>
         <select
           class="long"
@@ -167,6 +167,17 @@ limitations under the License. -->
           <option :value="false">{{ $t('noneParentService') }}</option>
         </select>
       </div>
+      <div class="flex-h mb-5" v-show="nameMetrics.includes(itemConfig.queryMetricType)">
+        <div class="title grey sm">{{ $t('sortOrder') }}:</div>
+        <select
+          class="long"
+          v-model="itemConfig.sortOrder"
+          @change="setItemConfig({ type: 'sortOrder', value: $event.target.value })"
+        >
+          <option :value="'DES'">{{ $t('descendOrder') }}</option>
+          <option :value="'ASC'">{{ $t('increaseOrder') }}</option>
+        </select>
+      </div>
       <div class="flex-h mb-5">
         <div class="title grey sm">{{ $t('unit') }}:</div>
         <input
@@ -255,7 +266,7 @@ limitations under the License. -->
     private queryMetricTypesList: any = [];
     private isDatabase = false;
     private isLabel = false;
-    private isParentService = ['sortMetrics', 'readSampledRecords'];
+    private nameMetrics = ['sortMetrics', 'readSampledRecords'];
 
     private created() {
       this.itemConfig = this.item;

src/views/components/dashboard/tool-bar-btns.vue

@@ -83,9 +83,11 @@
       }
     }
     private exportData() {
-      const data = this.rocketComps.tree;
+      const group = this.rocketComps.tree[this.rocketComps.group];
+      delete group.query;
       const name = 'dashboard.json';
-      saveFile(data, name);
+
+      saveFile([group], name);
     }
   }
 </script>

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

@@ -37,14 +37,14 @@ limitations under the License. -->
         <use xlink:href="#todo-add"></use>
       </svg>
       <div class="rk-dashboard-group-add-box" v-if="show">
-        <div class="mb-10 vm">{{ $t('createGroup') }}</div>
-        <div class="sm grey mb-5 mr-10">{{ $t('groupType') }}</div>
+        <div class="mb-10 vm">{{ $t('createTemplate') }}</div>
+        <div class="sm grey mb-5 mr-10">{{ $t('templateType') }}</div>
         <select v-model="type" class="rk-dashboard-group-sel">
           <option :value="DASHBOARDTYPE.SERVICE">{{ $t('standardAPM') }}</option>
-          <option :value="DASHBOARDTYPE.METRIC">{{ $t('metrics') }}</option>
-          <option :value="DASHBOARDTYPE.DATABASE">{{ $t('database') }}</option>
+          <option :value="DASHBOARDTYPE.METRIC">{{ $t('metricsView') }}</option>
+          <option :value="DASHBOARDTYPE.DATABASE">{{ $t('databaseView') }}</option>
         </select>
-        <div class="sm grey  mb-5 mr-10">{{ $t('groupName') }}</div>
+        <div class="sm grey  mb-5 mr-10">{{ $t('templateName') }}</div>
         <input class="mb-5 rk-dashboard-group-input" type="text" v-model="name" />
         <div v-show="type === 'database'">
           <label class="mb-10 dib"><input type="checkbox" v-model="template" />{{ $t('template') }}</label>

src/views/containers/dashboard.vue

@@ -49,6 +49,13 @@ limitations under the License. -->
   import ToolNav from '@/views/components/dashboard/tool-nav.vue';
   import DashboardItem from '@/views/components/dashboard/dashboard-item.vue';
 
+  interface ITemplate {
+    name: string;
+    type: string;
+    configuration: string;
+    activated: boolean;
+    disabled: boolean;
+  }
   @Component({
     components: {
       ToolBar,
@@ -100,28 +107,31 @@ limitations under the License. -->
       // }).then((data: any) => {
       //   console.log(data);
       // });
-      this.GET_ALL_TEMPLATES().then(
-        (
-          allTemplate: Array<{
-            name: string;
-            type: string;
-            configuration: string;
-            activated: boolean;
-            disabled: boolean;
-          }>,
-        ) => {
-          this.SET_ALL_TEMPLATES(allTemplate);
-          if (window.localStorage.getItem('dashboard')) {
-            const data: string = `${window.localStorage.getItem('dashboard')}`;
-            this.SET_COMPS_TREE(JSON.parse(data));
-          } else {
-            const template = allTemplate.filter((item: any) => item.type === 'DASHBOARD' && item.activated)[0] || {};
-            this.SET_COMPS_TREE(JSON.parse(template.configuration) || []);
-          }
-        },
-      );
+      this.GET_ALL_TEMPLATES().then((allTemplate: ITemplate[]) => {
+        this.SET_ALL_TEMPLATES(allTemplate);
+        if (window.localStorage.getItem('version') !== '8.0') {
+          window.localStorage.removeItem('dashboard');
+          this.setDashboardTemplates(allTemplate);
+          this.handleOption();
+          return;
+        }
+        if (window.localStorage.getItem('dashboard')) {
+          const data: string = `${window.localStorage.getItem('dashboard')}`;
+          this.SET_COMPS_TREE(JSON.parse(data));
+        } else {
+          this.setDashboardTemplates(allTemplate);
+        }
+      });
       this.handleOption();
     }
+    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));
+    }
     private beforeDestroy() {
       this.SET_EDIT(false);
     }