Feat: Query and manage templates (#302)

src/template/group-database-template.ts → src/graph/fragments/dashboard.ts

@@ -15,17 +15,49 @@
  * limitations under the License.
  */
 
-import globalTemp from './global-template';
-import databaseTemp from './database-template';
-export default [
-  {
-    name: 'Global',
-    children: globalTemp,
-    type: 'All',
-  },
-  {
-    name: 'Database',
-    children: databaseTemp,
-    type: 'Database',
-  },
-];
+export const TypeOfMetrics = {
+  variable: '$name: String!',
+  query: `typeOfMetrics(name: $name)`,
+};
+
+export const getAllTemplates = {
+  query: `
+    getAllTemplates(includingDisabled: false) {
+      name,
+      type
+      configuration,
+      activated,
+      disabled,
+    }
+  `,
+};
+
+export const addTemplate = {
+  variable: '$setting: DashboardSetting!',
+  query: `
+    addTemplate(setting: $setting) {
+      status
+      message
+    }
+  `,
+};
+
+export const changeTemplate = {
+  variable: '$setting: DashboardSetting!',
+  query: `
+    changeTemplate(setting: $setting) {
+      status
+      message
+    }
+  `,
+};
+
+export const disableTemplate = {
+  variable: '$setting: DashboardSetting!',
+  query: `
+    disableTemplate(setting: $setting) {
+      status
+      message
+    }
+  `,
+};

src/graph/fragments/option.ts

@@ -68,8 +68,3 @@ export const OAPTimeInfo = {
     }
   `,
 };
-
-export const TypeOfMetrics = {
-  variable: '$name: String!',
-  query: `typeOfMetrics(name: $name)`,
-};

src/graph/index.ts

@@ -22,6 +22,7 @@ import * as trace from './query/trace';
 import * as topology from './query/topology';
 import * as alarm from './query/alarm';
 import * as profile from './query/profile';
+import * as dashboard from './query/dashboard';
 
 const query: any = {
   ...option,
@@ -29,6 +30,7 @@ const query: any = {
   ...topology,
   ...alarm,
   ...profile,
+  ...dashboard,
 };
 
 class Graph {

src/template/group-service-template.ts → src/graph/query/dashboard.ts

@@ -15,29 +15,14 @@
  * limitations under the License.
  */
 
-import globalTemp from './global-template';
-import serviceTemp from './service-template';
-import endpointTemp from './endpoint-template';
-import instanceTemp from './instance-template';
-export default [
-  {
-    name: 'Global',
-    children: globalTemp,
-    type: 'Global',
-  },
-  {
-    name: 'Service',
-    children: serviceTemp,
-    type: 'Service',
-  },
-  {
-    name: 'Endpoint',
-    children: endpointTemp,
-    type: 'Endpoint',
-  },
-  {
-    name: 'Instance',
-    children: instanceTemp,
-    type: 'Instance',
-  },
-];
+import { TypeOfMetrics, getAllTemplates, addTemplate, changeTemplate, disableTemplate } from '../fragments/dashboard';
+
+export const queryTypeOfMetrics = `query queryTypeOfMetrics(${TypeOfMetrics.variable}) {${TypeOfMetrics.query}}`;
+
+export const mutationAddTemplate = `mutation mutationAddTemplate(${addTemplate.variable}) {${addTemplate.query}}`;
+
+export const mutationChangeTemplate = `mutation mutationChangeTemplate(${changeTemplate.variable}) {${changeTemplate.query}}`;
+
+export const mutationDisableTemplate = `mutation mutationDisableTemplate(${disableTemplate.variable}) {${disableTemplate.query}}`;
+
+export const queryGetAllTemplates = `query queryGetAllTemplates {${getAllTemplates.query}}`;

src/graph/query/option.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Services, Endpoints, Instances, Database, OAPTimeInfo, TypeOfMetrics } from '../fragments/option';
+import { Services, Endpoints, Instances, Database, OAPTimeInfo } from '../fragments/option';
 
 export const queryServices = `query queryServices(${Services.variable}) {${Services.query}}`;
 
@@ -26,5 +26,3 @@ export const queryEndpoints = `query queryEndpoints(${Endpoints.variable}) {${En
 export const queryInstances = `query queryInstances(${Instances.variable}) {${Instances.query}}`;
 
 export const queryOAPTimeInfo = `query queryOAPTimeInfo {${OAPTimeInfo.query}}`;
-
-export const queryTypeOfMetrics = `query queryTypeOfMetrics(${TypeOfMetrics.variable}) {${TypeOfMetrics.query}}`;

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

@@ -16,20 +16,18 @@
  */
 
 import { MutationTree } from 'vuex';
-import { CompsTree } from '@/types/dashboard';
-import groupServiceTemp from '../../../template/group-service-template';
-import groupDatabaseTemp from '../../../template/group-database-template';
+import { CompsTree, DashboardTemplate } from '@/types/dashboard';
 import * as types from './mutation-types';
-import { uuid } from '@/utils/uuid.ts';
-
 export interface State {
   current: number;
   group: number;
   index: number;
   tree: CompsTree[];
+  allTemplates: DashboardTemplate[];
 }
 
 export const initState: State = {
+  allTemplates: [],
   current: 0,
   group: 0,
   index: 0,
@@ -43,7 +41,7 @@ export const initState: State = {
         instance: {},
         database: {},
       },
-      children: groupServiceTemp,
+      children: [{}], // groupServiceTemp
     },
     {
       name: 'Database Dashboard',
@@ -54,13 +52,16 @@ export const initState: State = {
         instance: {},
         database: {},
       },
-      children: groupDatabaseTemp,
+      children: [{}], // groupDatabaseTemp
     },
   ],
 };
 
 // mutations
 const mutations: MutationTree<State> = {
+  [types.SET_ALL_TEMPLATES](state: State, data: DashboardTemplate[]) {
+    state.allTemplates = data;
+  },
   [types.SET_COMPS_TREE](state: State, data: CompsTree[]) {
     state.tree = data;
   },
@@ -85,6 +86,12 @@ const mutations: MutationTree<State> = {
     if (!params.name) {
       return;
     }
+
+    const templates = state.allTemplates.filter((item: any) => item.type === 'DASHBOARD' && item.activated)[0] || {};
+    const tree = JSON.parse(templates.configuration) || [];
+    const groupServiceTemp = tree.filter((item: any) => item.type === 'service')[0] || {};
+    const groupDatabaseTemp = tree.filter((item: any) => item.type === 'database')[0] || {};
+
     switch (params.template) {
       case 'metric':
         const newTree = [];
@@ -99,7 +106,12 @@ const mutations: MutationTree<State> = {
         Object.keys(state.tree).forEach((i: any) => {
           newServerTree.push(state.tree[i]);
         });
-        newServerTree.push({ name: params.name, type: params.type, query: {}, children: groupServiceTemp });
+        newServerTree.push({
+          name: params.name,
+          type: params.type,
+          query: {},
+          children: groupServiceTemp.children || [],
+        });
         state.tree = newServerTree;
         break;
       case 'database':
@@ -107,7 +119,12 @@ const mutations: MutationTree<State> = {
         Object.keys(state.tree).forEach((i: any) => {
           newDatabaseTree.push(state.tree[i]);
         });
-        newDatabaseTree.push({ name: params.name, type: params.type, query: {}, children: groupDatabaseTemp });
+        newDatabaseTree.push({
+          name: params.name,
+          type: params.type,
+          query: {},
+          children: groupDatabaseTemp.children || [],
+        });
         state.tree = newDatabaseTree;
         break;
     }

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

@@ -17,6 +17,8 @@
 
 import { ActionTree, MutationTree, Commit, Dispatch } from 'vuex';
 import { CompsTree } from '@/types/dashboard';
+import { AxiosResponse } from 'axios';
+import graph from '@/graph';
 import dashboardLayout from './dashboard-data-layout';
 import dashboardQuery from './dashboard-data-query';
 
@@ -84,6 +86,41 @@ const actions: ActionTree<State, any> = {
     context.dispatch('SET_CURRENT_STATE', context.state.tree[index].query);
     context.dispatch('RUN_EVENTS', {}, { root: true });
   },
+  TYPE_METRICS(context, params: { name: string }) {
+    const metricNames = (params.name || '').split(',').map((item: string) => item.replace(/^\s*|\s*$/g, ''));
+    return Promise.all(
+      metricNames.map((item: string) => {
+        return graph
+          .query('queryTypeOfMetrics')
+          .params({ name: item })
+          .then((res: AxiosResponse) => {
+            return res.data.data;
+          });
+      }),
+    );
+  },
+  GET_ALL_TEMPLATES(context) {
+    return graph
+      .query('queryGetAllTemplates')
+      .params({})
+      .then((res: AxiosResponse) => {
+        if (!res.data.data) {
+          return;
+        }
+        return res.data.data.getAllTemplates || [];
+      });
+  },
+  ADD_TEMPLATE(context, params) {
+    return graph
+      .query('mutationAddTemplate')
+      .params({ setting: params })
+      .then((res: AxiosResponse) => {
+        if (!res.data.data) {
+          return;
+        }
+        return res.data.data.addTemplate || [];
+      });
+  },
 };
 
 export default {

src/store/modules/dashboard/dashboard-option.ts

@@ -190,7 +190,7 @@ const actions: ActionTree<State, any> = {
     context.commit('SET_CURRENT_DATABASE', params);
     context.dispatch('RUN_EVENTS', {}, { root: true });
   },
-  SET_CURRENT_STATE(context: { commit: Commit }, params: any) {
+  SET_CURRENT_STATE(context: { commit: Commit }, params: any = {}) {
     context.commit(types.SET_CURRENT_SERVICE, params.service ? params.service : {});
     context.commit(types.SET_CURRENT_DATABASE, params.database ? params.database : {});
     context.commit(types.SET_CURRENT_ENDPOINT, params.endpoint ? params.endpoint : {});
@@ -225,19 +225,6 @@ const actions: ActionTree<State, any> = {
         return res.data.data.getServiceInstances;
       });
   },
-  TYPE_METRICS(context, params: { name: string }) {
-    const metricNames = (params.name || '').split(',').map((item: string) => item.replace(/^\s*|\s*$/g, ''));
-    return Promise.all(
-      metricNames.map((item: string) => {
-        return graph
-          .query('queryTypeOfMetrics')
-          .params({ name: item })
-          .then((res: AxiosResponse) => {
-            return res.data.data;
-          });
-      }),
-    );
-  },
   GET_ITEM_SERVICES(context, params: { duration: any; keyword: string }) {
     if (!params.keyword) {
       params.keyword = '';

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_ALL_TEMPLATES = 'SET_ALL_TEMPLATES';
 
 // comp
 export const SET_CURRENT_GROUP = 'SET_CURRENT_GROUP';

src/store/modules/topology/index.ts

@@ -265,6 +265,9 @@ const actions: ActionTree<State, any> = {
     }
   },
   GET_TOPO_SERVICE_INFO(context: { commit: Commit; state: State }, params: any) {
+    if (!params.id) {
+      return;
+    }
     return graph
       .query('queryTopoServiceInfo')
       .params({

src/template/database-template.ts

-/**
- * 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.
- */
-
-export default [
-  {
-    chartType: 'ChartNum',
-    title: 'Database Avg ResponseTime',
-    width: 3,
-    height: 250,
-    metricName: 'database_access_resp_time',
-    queryMetricType: 'readMetricsValue',
-    entityType: 'Service',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    unit: 'ms',
-    aggregation: '',
-    aggregationNum: 0,
-    normal: false,
-  },
-  {
-    chartType: 'ChartNum',
-    title: 'Database Avg Throughput',
-    width: 3,
-    height: 250,
-    metricName: 'database_access_cpm',
-    queryMetricType: 'readMetricsValue',
-    entityType: 'Service',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    unit: 'ms',
-    aggregation: '',
-    aggregationNum: null,
-    normal: false,
-  },
-  {
-    chartType: 'ChartNum',
-    title: 'Database Avg SLA',
-    width: 3,
-    height: 250,
-    metricName: 'database_access_sla',
-    queryMetricType: 'readMetricsValue',
-    entityType: 'Service',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    unit: '%',
-    aggregation: '/',
-    aggregationNum: 100,
-    normal: false,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Database ResponseTime',
-    width: 3,
-    height: 250,
-    metricName: 'database_access_resp_time',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'Service',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    unit: 'ms',
-    aggregation: '',
-    aggregationNum: null,
-    normal: false,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Database Throughput',
-    width: 3,
-    height: 250,
-    metricName: 'database_access_cpm',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'Service',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    unit: 'ms',
-    aggregation: '',
-    aggregationNum: null,
-    normal: false,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Database SLA',
-    width: 3,
-    height: 250,
-    metricName: 'database_access_sla',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'Service',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    unit: '%',
-    aggregation: '/',
-    aggregationNum: 100,
-    normal: false,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Global Response Time Percentile',
-    width: 6,
-    height: 250,
-    metricName: 'all_percentile',
-    queryMetricType: 'readLabeledMetricsValues',
-    entityType: 'All',
-    independentSelector: false,
-    metricType: 'LABELED_VALUE',
-    metricLabels: 'p50, p75, p90, p95, p99',
-    labelsIndex: '0, 1, 2, 3, 4',
-    unit: '',
-    aggregation: '',
-    aggregationNum: null,
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Database Response Time Percentile',
-    width: 3,
-    height: 250,
-    metricName: 'database_access_percentile',
-    queryMetricType: 'readLabeledMetricsValues',
-    entityType: 'Service',
-    independentSelector: false,
-    metricType: 'LABELED_VALUE',
-    metricLabels: 'p50, p75, p90, p95, p99',
-    labelsIndex: '0, 1, 2, 3, 4',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: false,
-  },
-  {
-    chartType: 'ChartSlow',
-    title: 'Database TopN Records',
-    width: 6,
-    height: 250,
-    metricName: 'top_n_database_statement',
-    queryMetricType: 'readSampledRecords',
-    entityType: 'Service',
-    independentSelector: false,
-    metricType: 'SAMPLED_RECORD',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    parentService: true,
-    normal: false,
-  },
-];

src/template/endpoint-template.ts

-/**
- * 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.
- */
-
-export default [
-  {
-    chartType: 'ChartNum',
-    title: 'Endpoint Avg ResponseTime',
-    width: 3,
-    height: 80,
-    metricName: 'endpoint_avg',
-    queryMetricType: 'readMetricsValue',
-    entityType: 'Endpoint',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: 'ms',
-    normal: true,
-  },
-  {
-    chartType: 'ChartNum',
-    title: 'Endpoint Avg Throughput',
-    width: 3,
-    height: 80,
-    metricName: 'endpoint_cpm',
-    queryMetricType: 'readMetricsValue',
-    entityType: 'Endpoint',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: 'ms',
-    normal: true,
-  },
-  {
-    chartType: 'ChartNum',
-    title: 'Endpoint Avg SLA',
-    width: 3,
-    height: 80,
-    metricName: 'endpoint_sla',
-    queryMetricType: 'readMetricsValue',
-    entityType: 'Endpoint',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    version: '1.0',
-    unit: '%',
-    aggregation: '/',
-    aggregationNum: 100,
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Endpoint ResponseTime',
-    width: 3,
-    height: 170,
-    metricName: 'endpoint_avg',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'Endpoint',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Endpoint Throughput',
-    width: 3,
-    height: 170,
-    metricName: 'endpoint_cpm',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'Endpoint',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Endpoint SLA',
-    width: 3,
-    height: 170,
-    metricName: 'endpoint_sla',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'Endpoint',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    version: '1.0',
-    unit: '%',
-    aggregation: '/',
-    aggregationNum: 100,
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Global Response Time Percentile',
-    width: 3,
-    height: 250,
-    metricName: 'all_percentile',
-    queryMetricType: 'readLabeledMetricsValues',
-    entityType: 'All',
-    independentSelector: false,
-    metricType: 'LABELED_VALUE',
-    metricLabels: 'p50, p75, p90, p95, p99',
-    labelsIndex: '0, 1, 2, 3, 4',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Endpoint Response Time Percentile',
-    width: 3,
-    height: 250,
-    metricName: 'endpoint_percentile',
-    queryMetricType: 'readLabeledMetricsValues',
-    entityType: 'Endpoint',
-    independentSelector: false,
-    metricType: 'LABELED_VALUE',
-    metricLabels: 'p50, p75, p90, p95, p99',
-    labelsIndex: '0, 1, 2, 3, 4',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartSlow',
-    title: 'Global Top Slow Endpoint',
-    width: 6,
-    height: 250,
-    metricName: 'endpoint_avg',
-    queryMetricType: 'sortMetrics',
-    entityType: 'Endpoint',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: 'ms',
-    parentService: false,
-    normal: true,
-  },
-];

src/template/global-template.ts

-/**
- * 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.
- */
-export default [
-  {
-    chartType: 'ChartHeatmap',
-    title: 'Global Heatmap',
-    width: 6,
-    height: 250,
-    metricName: 'all_heatmap',
-    queryMetricType: 'readHeatMap',
-    entityType: 'All',
-    independentSelector: false,
-    metricType: 'HEATMAP',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Global Response Time Percentile',
-    width: 6,
-    height: 250,
-    metricName: 'all_percentile',
-    queryMetricType: 'readLabeledMetricsValues',
-    entityType: 'All',
-    independentSelector: false,
-    metricType: 'LABELED_VALUE',
-    metricLabels: 'p50, p75, p90, p95, p99',
-    labelsIndex: '0, 1, 2, 3, 4',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartTrace',
-    title: 'Global Top Throughput',
-    width: 3,
-    height: 250,
-    metricName: 'service_cpm',
-    queryMetricType: 'sortMetrics',
-    entityType: 'Service',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: 'cpm',
-    parentService: false,
-    normal: true,
-  },
-  {
-    chartType: 'ChartSlow',
-    title: 'Global Top Slow Endpoint',
-    width: 6,
-    height: 250,
-    metricName: 'endpoint_avg',
-    queryMetricType: 'sortMetrics',
-    entityType: 'Endpoint',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: 'ms',
-    parentService: false,
-    normal: true,
-  },
-];

src/template/instance-template.ts

-/**
- * 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.
- */
-
-export default [
-  {
-    chartType: 'ChartNum',
-    title: 'Instance Avg ResponseTime',
-    width: 3,
-    height: 80,
-    metricName: 'service_instance_resp_time',
-    queryMetricType: 'readMetricsValue',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: 'ms',
-    normal: true,
-  },
-  {
-    chartType: 'ChartNum',
-    title: 'Instance Avg Throughput',
-    width: 3,
-    height: 80,
-    metricName: 'service_instance_cpm',
-    queryMetricType: 'readMetricsValue',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: 'ms',
-    normal: true,
-  },
-  {
-    chartType: 'ChartNum',
-    title: 'Instance Avg SLA',
-    width: 3,
-    height: 80,
-    metricName: 'service_instance_sla',
-    queryMetricType: 'readMetricsValue',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    unit: '%',
-    aggregation: '/',
-    aggregationNum: 100,
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Instance ResponseTime',
-    width: 3,
-    height: 170,
-    metricName: 'service_instance_resp_time',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Instance Throughput',
-    width: 3,
-    height: 170,
-    metricName: 'service_instance_cpm',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: 'ms',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Instance SLA',
-    width: 3,
-    height: 170,
-    metricName: 'service_instance_sla',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    unit: '%',
-    aggregation: '/',
-    aggregationNum: 100,
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'JVM Heap (MB)',
-    width: 3,
-    height: 250,
-    metricName: 'instance_jvm_memory_heap, instance_jvm_memory_heap_max',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'JVM Non-Heap (MB)',
-    width: 3,
-    height: 250,
-    metricName: 'instance_jvm_memory_noheap, instance_jvm_memory_noheap_max',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'JVM GC (ms)',
-    width: 3,
-    height: 250,
-    metricName: 'instance_jvm_young_gc_time, instance_jvm_old_gc_time',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartCount',
-    title: 'JVM GC Count',
-    width: 3,
-    height: 250,
-    metricName: 'instance_jvm_young_gc_count, instance_jvm_old_gc_count',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'JVM CPU (%)',
-    width: 3,
-    height: 250,
-    metricName: 'instance_jvm_cpu',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'CLR CPU (%)',
-    width: 3,
-    height: 250,
-    metricName: 'instance_clr_cpu',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'CLR GC (Count)',
-    width: 3,
-    height: 250,
-    metricName: 'instance_clr_gen0_collect_count, instance_clr_gen1_collect_count, instance_clr_gen2_collect_count',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'CLR HeapMemory (MB)',
-    width: 3,
-    height: 250,
-    metricName: 'instance_clr_heap_memory',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Envoy Count',
-    width: 3,
-    height: 250,
-    metricName: 'envoy_total_connections_used, envoy_parent_connections_used',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Envoy Heap Memory Max Used',
-    width: 3,
-    height: 250,
-    metricName: 'envoy_heap_memory_max_used',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-];

src/template/service-template.ts

-/**
- * 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.
- */
-
-export default [
-  {
-    chartType: 'ChartNum',
-    title: 'Service Avg ApdexScore',
-    width: 3,
-    height: 80,
-    metricName: 'service_apdex',
-    queryMetricType: 'readMetricsValue',
-    entityType: 'Service',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    version: '1.0',
-    unit: '',
-    aggregation: '/',
-    aggregationNum: 10000,
-    normal: true,
-  },
-  {
-    chartType: 'ChartNum',
-    title: 'Service Avg ResponseTime',
-    width: 3,
-    height: 80,
-    metricName: 'service_resp_time',
-    queryMetricType: 'readMetricsValue',
-    entityType: 'Service',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: 'ms',
-    normal: true,
-  },
-  {
-    chartType: 'ChartNum',
-    title: 'Service Avg Throughput',
-    width: 3,
-    height: 80,
-    metricName: 'service_cpm',
-    queryMetricType: 'readMetricsValue',
-    entityType: 'Service',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: 'ms',
-    normal: true,
-  },
-  {
-    chartType: 'ChartNum',
-    title: 'Service Avg SLA',
-    width: 3,
-    height: 80,
-    metricName: 'service_sla',
-    queryMetricType: 'readMetricsValue',
-    entityType: 'Service',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    unit: '%',
-    aggregation: '/',
-    aggregationNum: 100,
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Service ApdexScore',
-    width: 3,
-    height: 170,
-    metricName: 'service_apdex',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'Service',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    unit: '',
-    aggregation: '/',
-    aggregationNum: 10000,
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Service ResponseTime',
-    width: 3,
-    height: 170,
-    metricName: 'service_resp_time',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'Service',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Service Throughput',
-    width: 3,
-    height: 170,
-    metricName: 'service_cpm',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'Service',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Service SLA',
-    width: 3,
-    height: 170,
-    metricName: 'service_sla',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'Service',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    unit: '%',
-    aggregation: '/',
-    aggregationNum: 100,
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Global Response Time Percentile',
-    width: 3,
-    height: 250,
-    metricName: 'all_percentile',
-    queryMetricType: 'readLabeledMetricsValues',
-    entityType: 'All',
-    independentSelector: false,
-    metricType: 'LABELED_VALUE',
-    metricLabels: 'p50, p75, p90, p95, p99',
-    labelsIndex: '0, 1, 2, 3, 4',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Service Response Time Percentile',
-    width: 3,
-    height: 250,
-    metricName: 'service_percentile',
-    queryMetricType: 'readLabeledMetricsValues',
-    entityType: 'Service',
-    independentSelector: false,
-    metricType: 'LABELED_VALUE',
-    metricLabels: 'p50, p75, p90, p95, p99',
-    labelsIndex: '0, 1, 2, 3, 4',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartSlow',
-    title: 'Service Slow Endpoint',
-    width: 3,
-    height: 250,
-    metricName: 'endpoint_avg',
-    queryMetricType: 'sortMetrics',
-    entityType: 'Endpoint',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: 'ms',
-    parentService: true,
-    normal: true,
-  },
-  {
-    chartType: 'ChartTrace',
-    title: 'Running ServiceInstance',
-    width: 3,
-    height: 250,
-    metricName: 'service_instance_cpm',
-    queryMetricType: 'sortMetrics',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: 'cpm',
-    parentService: true,
-    normal: true,
-  },
-];

src/template/topology-endpoint-template.ts

-/**
- * 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.
- */
-
-export default [
-  {
-    chartType: 'ChartNum',
-    title: 'Endpoint Avg ResponseTime',
-    width: 3,
-    height: 80,
-    metricName: 'endpoint_avg',
-    queryMetricType: 'readMetricsValue',
-    entityType: 'Endpoint',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: 'ms',
-    normal: true,
-  },
-  {
-    chartType: 'ChartNum',
-    title: 'Endpoint Avg Throughput',
-    width: 3,
-    height: 80,
-    metricName: 'endpoint_cpm',
-    queryMetricType: 'readMetricsValue',
-    entityType: 'Endpoint',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: 'ms',
-    normal: true,
-  },
-  {
-    chartType: 'ChartNum',
-    title: 'Endpoint Avg SLA',
-    width: 3,
-    height: 80,
-    metricName: 'endpoint_sla',
-    queryMetricType: 'readMetricsValue',
-    entityType: 'Endpoint',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    version: '1.0',
-    unit: '%',
-    aggregation: '/',
-    aggregationNum: 100,
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Endpoint ResponseTime',
-    width: 3,
-    height: 170,
-    metricName: 'endpoint_avg',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'Endpoint',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Endpoint Throughput',
-    width: 3,
-    height: 170,
-    metricName: 'endpoint_cpm',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'Endpoint',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Endpoint SLA',
-    width: 3,
-    height: 170,
-    metricName: 'endpoint_sla',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'Endpoint',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    version: '1.0',
-    unit: '%',
-    aggregation: '/',
-    aggregationNum: 100,
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Global Response Time Percentile',
-    width: 3,
-    height: 250,
-    metricName: 'all_percentile',
-    queryMetricType: 'readLabeledMetricsValues',
-    entityType: 'All',
-    independentSelector: false,
-    metricType: 'LABELED_VALUE',
-    metricLabels: 'p50, p75, p90, p95, p99',
-    labelsIndex: '0, 1, 2, 3, 4',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Endpoint Response Time Percentile',
-    width: 3,
-    height: 250,
-    metricName: 'endpoint_percentile',
-    queryMetricType: 'readLabeledMetricsValues',
-    entityType: 'Endpoint',
-    independentSelector: false,
-    metricType: 'LABELED_VALUE',
-    metricLabels: 'p50, p75, p90, p95, p99',
-    labelsIndex: '0, 1, 2, 3, 4',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartSlow',
-    title: 'Global Top Slow Endpoint',
-    width: 6,
-    height: 250,
-    metricName: 'endpoint_avg',
-    queryMetricType: 'sortMetrics',
-    entityType: 'Endpoint',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: 'ms',
-    parentService: false,
-    normal: true,
-  },
-];

src/template/topology-instance-template.ts

-/**
- * 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.
- */
-
-export default [
-  {
-    chartType: 'ChartNum',
-    title: 'Instance Avg ResponseTime',
-    width: 3,
-    height: 80,
-    metricName: 'service_instance_resp_time',
-    queryMetricType: 'readMetricsValue',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: 'ms',
-    normal: true,
-  },
-  {
-    chartType: 'ChartNum',
-    title: 'Instance Avg Throughput',
-    width: 3,
-    height: 80,
-    metricName: 'service_instance_cpm',
-    queryMetricType: 'readMetricsValue',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: 'ms',
-    normal: true,
-  },
-  {
-    chartType: 'ChartNum',
-    title: 'Instance Avg SLA',
-    width: 3,
-    height: 80,
-    metricName: 'service_instance_sla',
-    queryMetricType: 'readMetricsValue',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    unit: '%',
-    aggregation: '/',
-    aggregationNum: 100,
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Instance ResponseTime',
-    width: 3,
-    height: 170,
-    metricName: 'service_instance_resp_time',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Instance Throughput',
-    width: 3,
-    height: 170,
-    metricName: 'service_instance_cpm',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: 'ms',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Instance SLA',
-    width: 3,
-    height: 170,
-    metricName: 'service_instance_sla',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    unit: '%',
-    aggregation: '/',
-    aggregationNum: 100,
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'JVM Heap (MB)',
-    width: 3,
-    height: 250,
-    metricName: 'instance_jvm_memory_heap, instance_jvm_memory_heap_max',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'JVM Non-Heap (MB)',
-    width: 3,
-    height: 250,
-    metricName: 'instance_jvm_memory_noheap, instance_jvm_memory_noheap_max',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'JVM GC (ms)',
-    width: 3,
-    height: 250,
-    metricName: 'instance_jvm_young_gc_time, instance_jvm_old_gc_time',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartCount',
-    title: 'JVM GC Count',
-    width: 3,
-    height: 250,
-    metricName: 'instance_jvm_young_gc_count, instance_jvm_old_gc_count',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'JVM CPU (%)',
-    width: 3,
-    height: 250,
-    metricName: 'instance_jvm_cpu',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'CLR CPU (%)',
-    width: 3,
-    height: 250,
-    metricName: 'instance_clr_cpu',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'CLR GC (Count)',
-    width: 3,
-    height: 250,
-    metricName: 'instance_clr_gen0_collect_count, instance_clr_gen1_collect_count, instance_clr_gen2_collect_count',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'CLR HeapMemory (MB)',
-    width: 3,
-    height: 250,
-    metricName: 'instance_clr_heap_memory',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Envoy Count',
-    width: 3,
-    height: 250,
-    metricName: 'envoy_total_connections_used, envoy_parent_connections_used',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-  {
-    chartType: 'ChartLine',
-    title: 'Envoy Heap Memory Max Used',
-    width: 3,
-    height: 250,
-    metricName: 'envoy_heap_memory_max_used',
-    queryMetricType: 'readMetricsValues',
-    entityType: 'ServiceInstance',
-    independentSelector: false,
-    metricType: 'REGULAR_VALUE',
-    aggregation: '',
-    aggregationNum: null,
-    unit: '',
-    normal: true,
-  },
-];

src/types/dashboard.d.ts

@@ -50,3 +50,19 @@ interface Fragment {
   fragment: string;
   variable: string;
 }
+export enum TemplateType {
+  DASHBOARD,
+  TOPOLOGY_SERVICE,
+  TOPOLOGY_INSTANCE,
+  TOPOLOGY_ENDPOINT,
+  TOPOLOGY_SERVICE_RELATION,
+  TOPOLOGY_SERVICE_INSTANCE_RELATION,
+}
+
+export interface DashboardTemplate {
+  name: string;
+  type: TemplateType;
+  configuration: string;
+  activated: boolean;
+  disabled: boolean;
+}

src/views/components/dashboard/dashboard-item.vue

@@ -83,6 +83,8 @@ limitations under the License. -->
     @Getter('durationTime') private durationTime: any;
     @Prop() private item!: any;
     @Prop() private index!: number;
+    @Prop() private type!: string;
+
     private dialogConfigVisible = false;
     private status = 'UNKNOWN';
     private title = 'Title';
@@ -99,6 +101,10 @@ limitations under the License. -->
       this.height = this.item.height;
       this.unit = this.item.unit;
       this.itemConfig = this.item;
+      const pageTypes = ['TOPOLOGY_ENDPOINT', 'TOPOLOGY_INSTANCE'];
+      if (pageTypes.includes(this.type)) {
+        return;
+      }
       this.chartRender();
     }
 

src/views/containers/dashboard.vue

@@ -58,11 +58,15 @@ limitations under the License. -->
     @State('rocketbot') private rocketGlobal: any;
     @State('rocketOption') private stateDashboardOption!: any;
     @State('rocketData') private rocketComps!: any;
-    @Mutation('SET_COMPS_TREE') private SET_COMPS_TREE: any;
-    @Mutation('SET_CURRENT_COMPS') private SET_CURRENT_COMPS: any;
     @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
+    @Action('GET_ALL_TEMPLATES') private GET_ALL_TEMPLATES: any;
+    // @Action('ADD_TEMPLATE') private ADD_TEMPLATE: any;
     @Getter('durationTime') private durationTime: any;
+    @Mutation('SET_COMPS_TREE') private SET_COMPS_TREE: any;
+    @Mutation('SET_CURRENT_COMPS') private SET_CURRENT_COMPS: any;
     @Mutation('ADD_COMP') private ADD_COMP: any;
+    @Mutation('SET_ALL_TEMPLATES') private SET_ALL_TEMPLATES: any;
+
     private isRouterAlive: boolean = true;
     public reload(): void {
       this.isRouterAlive = false;
@@ -84,10 +88,34 @@ limitations under the License. -->
       });
     }
     private beforeMount() {
-      if (window.localStorage.getItem('dashboard')) {
-        const data: string = `${window.localStorage.getItem('dashboard')}`;
-        this.SET_COMPS_TREE(JSON.parse(data));
-      }
+      // this.ADD_TEMPLATE({
+      //   name: 'Topology Instance',
+      //   type: 'TOPOLOGY_INSTANCE',
+      //   active: true,
+      //   configuration: JSON.stringify(TopologyInstanceTemp),
+      // }).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.handleOption();
     }
   }

src/views/containers/topology/endpoint/endpoints-survey.vue

@@ -21,16 +21,16 @@ limitations under the License. -->
       :rocketGlobal="{ edit: false }"
       :item="i"
       :index="index"
+      :type="'TOPOLOGY_ENDPOINT'"
     />
   </div>
 </template>
 
 <script lang="ts">
   import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
+  import { Component, Prop } from 'vue-property-decorator';
   import { State } from 'vuex-class';
   import DashboardItem from '@/views/components/dashboard/dashboard-item.vue';
-  import TopologyEndpointTemp from '../../../../template/topology-endpoint-template';
 
   @Component({
     components: {
@@ -38,11 +38,7 @@ limitations under the License. -->
     },
   })
   export default class InstancesSurvey extends Vue {
-    private endpointComps: any = [];
-
-    private created() {
-      this.endpointComps = TopologyEndpointTemp;
-    }
+    @Prop() private endpointComps: any;
   }
 </script>
 

src/views/containers/topology/endpoint/index.vue

@@ -24,7 +24,7 @@ limitations under the License. -->
         icon="code"
       />
     </div>
-    <endpoints-survey />
+    <endpoints-survey :endpointComps="endpointComps" />
   </div>
 </template>
 
@@ -58,6 +58,7 @@ limitations under the License. -->
     @Action('GET_SERVICE_ENDPOINTS') private GET_SERVICE_ENDPOINTS: any;
     @Action('MIXHANDLE_CHANGE_GROUP_WITH_CURRENT') private MIXHANDLE_CHANGE_GROUP_WITH_CURRENT: any;
     @Prop() private current!: { key: number | string; label: number | string };
+    @Prop() private endpointComps: any;
 
     private selectEndpoint(i: any) {
       this.SELECT_ENDPOINT({ endpoint: i, duration: this.durationTime });

src/views/containers/topology/instance/index.vue

@@ -25,7 +25,7 @@ limitations under the License. -->
         icon="disk"
       />
     </div>
-    <instances-survey />
+    <instances-survey :instanceComps="instanceComps" />
   </div>
 </template>
 
@@ -59,6 +59,7 @@ limitations under the License. -->
     @Action('GET_SERVICE_INSTANCES') private GET_SERVICE_INSTANCES: any;
     @Action('MIXHANDLE_CHANGE_GROUP_WITH_CURRENT') private MIXHANDLE_CHANGE_GROUP_WITH_CURRENT: any;
     @Prop() private current!: { key: number | string; label: number | string };
+    @Prop() private instanceComps: any;
 
     private selectInstance(i: any) {
       this.SELECT_INSTANCE({ instance: i, duration: this.durationTime });

src/views/containers/topology/instance/instances-survey.vue

@@ -21,16 +21,16 @@ limitations under the License. -->
       :rocketGlobal="{ edit: false }"
       :item="i"
       :index="index"
+      :type="'TOPOLOGY_INSTANCE'"
     />
   </div>
 </template>
 
 <script lang="ts">
   import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
+  import { Component, Prop } from 'vue-property-decorator';
   import { State } from 'vuex-class';
   import DashboardItem from '@/views/components/dashboard/dashboard-item.vue';
-  import TopologyInstanceTemp from '../../../../template/topology-instance-template';
 
   @Component({
     components: {
@@ -38,11 +38,7 @@ limitations under the License. -->
     },
   })
   export default class InstancesSurvey extends Vue {
-    private instanceComps: any[] = [];
-
-    private created() {
-      this.instanceComps = TopologyInstanceTemp;
-    }
+    @Prop() private instanceComps: any;
   }
 </script>
 

src/views/containers/topology/topology.vue

@@ -25,8 +25,8 @@ limitations under the License. -->
     <TopoAside />
     <TopoGroup />
     <rk-sidebox :show="dialog.length" @update:show="dialog = ''" :fixed="true" width="80%">
-      <window-endpoint v-if="dialog === 'endpoint'" :current="this.current" />
-      <window-instance v-if="dialog === 'instance'" :current="this.current" />
+      <window-endpoint v-if="dialog === 'endpoint'" :current="this.current" :endpointComps="endpointComps" />
+      <window-instance v-if="dialog === 'instance'" :current="this.current" :instanceComps="instanceComps" />
       <window-trace v-if="dialog === 'trace'" :current="this.current" />
       <window-alarm v-if="dialog === 'alarm'" :current="this.current" />
     </rk-sidebox>
@@ -60,10 +60,33 @@ limitations under the License. -->
     @State('rocketTopo') private stateTopo!: topoState;
     @Action('rocketTopo/CLEAR_TOPO') private CLEAR_TOPO: any;
     @Action('rocketTopo/CLEAR_TOPO_INFO') private CLEAR_TOPO_INFO: any;
+    @Action('GET_ALL_TEMPLATES') private GET_ALL_TEMPLATES: any;
     @Getter('durationTime') private durationTime: any;
 
     private current: any = {};
     private dialog: string = '';
+    private instanceComps: any = [];
+    private endpointComps: any = [];
+    private created() {
+      this.GET_ALL_TEMPLATES().then(
+        (
+          allTemplates: Array<{
+            name: string;
+            type: string;
+            configuration: string;
+            activated: boolean;
+            disabled: boolean;
+          }>,
+        ) => {
+          const template =
+            allTemplates.filter((item: any) => item.type === 'TOPOLOGY_INSTANCE' && item.activated)[0] || {};
+          this.instanceComps = JSON.parse(template.configuration) || [];
+          const endpointTemplate =
+            allTemplates.filter((item: any) => item.type === 'TOPOLOGY_ENDPOINT' && item.activated)[0] || {};
+          this.endpointComps = JSON.parse(endpointTemplate.configuration) || [];
+        },
+      );
+    }
     private setCurrent(d: any): void {
       this.current = d;
     }