UI template init and add control environment variable (#8760)

CHANGES.md

@@ -155,6 +155,8 @@ NOTICE, this sharding concept is NOT just for splitting data into different data
 * Remove unused jars (log4j-api.jar) in classpath.
 * Bump up netty version to fix CVE.
 * Add Database Connection pool metric.
+* Re-implement UI template initialization for Booster UI.
+* Add environment variable `SW_ENABLE_UPDATE_UI_TEMPLATE` to control user edit UI template.
 
 #### Documentation
 

oap-server/server-core/src/main/java/org/apache/skywalking/oap/server/core/CoreModuleProvider.java

@@ -18,8 +18,6 @@
 
 package org.apache.skywalking.oap.server.core;
 
-import java.io.File;
-import java.io.FileInputStream;
 import java.io.FileNotFoundException;
 import java.io.IOException;
 import org.apache.skywalking.oap.server.configuration.api.ConfigurationModule;
@@ -30,7 +28,6 @@ import org.apache.skywalking.oap.server.core.analysis.StreamAnnotationListener;
 import org.apache.skywalking.oap.server.core.analysis.meter.MeterEntity;
 import org.apache.skywalking.oap.server.core.analysis.meter.MeterSystem;
 import org.apache.skywalking.oap.server.core.analysis.metrics.ApdexMetrics;
-import org.apache.skywalking.oap.server.core.analysis.worker.ManagementStreamProcessor;
 import org.apache.skywalking.oap.server.core.analysis.worker.MetricsStreamProcessor;
 import org.apache.skywalking.oap.server.core.analysis.worker.TopNStreamProcessor;
 import org.apache.skywalking.oap.server.core.annotation.AnnotationScan;
@@ -101,7 +98,6 @@ import org.apache.skywalking.oap.server.library.server.ServerException;
 import org.apache.skywalking.oap.server.library.server.grpc.GRPCServer;
 import org.apache.skywalking.oap.server.library.server.http.HTTPServer;
 import org.apache.skywalking.oap.server.library.server.http.HTTPServerConfig;
-import org.apache.skywalking.oap.server.library.util.ResourceUtils;
 import org.apache.skywalking.oap.server.telemetry.TelemetryModule;
 import org.apache.skywalking.oap.server.telemetry.api.TelemetryRelatedContext;
 
@@ -385,19 +381,8 @@ public class CoreModuleProvider extends ModuleProvider {
         CacheUpdateTimer.INSTANCE.start(getManager(), moduleConfig.getMetricsDataTTL());
 
         try {
-            final File[] templateFiles = ResourceUtils.getPathFiles("ui-initialized-templates");
-            for (final File templateFile : templateFiles) {
-                if (!templateFile.getName().endsWith(".yml") && !templateFile.getName().endsWith(".yaml")) {
-                    continue;
-                }
-                new UITemplateInitializer(new FileInputStream(templateFile))
-                    .read()
-                    .forEach(uiTemplate -> {
-                        ManagementStreamProcessor.getInstance().in(uiTemplate);
-                    });
-            }
-
-        } catch (FileNotFoundException e) {
+            new UITemplateInitializer(getManager()).initAll();
+        } catch (IOException e) {
             throw new ModuleStartException(e.getMessage(), e);
         }
     }

oap-server/server-core/src/main/java/org/apache/skywalking/oap/server/core/management/ui/template/UITemplateInitializer.java

@@ -18,38 +18,82 @@
 
 package org.apache.skywalking.oap.server.core.management.ui.template;
 
+import com.fasterxml.jackson.core.JsonParser;
+import com.fasterxml.jackson.databind.JsonNode;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import java.io.File;
 import java.io.IOException;
-import java.io.InputStream;
-import java.util.ArrayList;
 import java.util.List;
-import java.util.Map;
-import lombok.extern.slf4j.Slf4j;
-import org.yaml.snakeyaml.Yaml;
+import java.util.Locale;
+import org.apache.skywalking.oap.server.core.CoreModule;
+import org.apache.skywalking.oap.server.core.analysis.Layer;
+import org.apache.skywalking.oap.server.core.query.input.DashboardSetting;
+import org.apache.skywalking.oap.server.core.query.type.DashboardConfiguration;
+import org.apache.skywalking.oap.server.library.module.ModuleManager;
+import org.apache.skywalking.oap.server.library.util.ResourceUtils;
 
 /**
- * UITemplateInitializer load the template from the config file in YAML format. The template definition is by JSON
- * format in default, but it depends on the UI implementation only.
+ * UITemplateInitializer load the template from the config file in json format. It depends on the UI implementation only.
+ * Each config file should be only one dashboard setting json object.
+ * The dashboard names should be different in the same Layer and entity.
  */
-@Slf4j
 public class UITemplateInitializer {
-    private Map yamlData;
-
-    public UITemplateInitializer(InputStream inputStream) {
-        Yaml yaml = new Yaml();
-        try {
-            yamlData = yaml.loadAs(inputStream, Map.class);
-        } finally {
-            try {
-                inputStream.close();
-            } catch (IOException e) {
-                log.warn(e.getMessage(), e);
+    public static Layer[] SUPPORTED_LAYER = new Layer[] {
+        Layer.MESH,
+        Layer.GENERAL,
+        Layer.K8S,
+        Layer.BROWSER,
+        Layer.SO11Y_OAP
+    };
+    private final UITemplateManagementService uiTemplateManagementService;
+    private final ObjectMapper mapper;
+
+    public UITemplateInitializer(ModuleManager manager) {
+        this.uiTemplateManagementService = manager.find(CoreModule.NAME)
+                                                  .provider()
+                                                  .getService(UITemplateManagementService.class);
+        this.mapper = new ObjectMapper();
+        this.mapper.enable(JsonParser.Feature.ALLOW_COMMENTS);
+    }
+
+    public void initAll() throws IOException {
+        for (Layer layer : UITemplateInitializer.SUPPORTED_LAYER) {
+            File[] templateFiles = ResourceUtils.getPathFiles("ui-initialized-templates/" + layer.name().toLowerCase(
+                Locale.ROOT));
+            for (File file : templateFiles) {
+                initTemplate(file);
             }
         }
     }
 
-    public List<UITemplate> read() {
-        List<UITemplate> uiTemplates = new ArrayList<>();
-        //Todo: implement later when new template file ready
-        return uiTemplates;
+    public void initTemplate(File template) throws IOException {
+        JsonNode jsonNode = mapper.readTree(template);
+        if (jsonNode.size() > 1) {
+            throw new IllegalArgumentException(
+                "File:  " + template.getName() + " should be only one dashboard setting json object.");
+        }
+        JsonNode configNode = jsonNode.get(0).get("configuration");
+        String inId = configNode.get("id").textValue();
+        String inName = configNode.get("name").textValue();
+
+        verifyNameConflict(template, inId, inName);
+
+        DashboardSetting setting = new DashboardSetting();
+        setting.setId(inId);
+        setting.setConfiguration(configNode.toString());
+
+        uiTemplateManagementService.addOrUpdate(setting);
+    }
+
+    private void verifyNameConflict(File template, String inId, String inName) throws IOException {
+        List<DashboardConfiguration> configurations = uiTemplateManagementService.getAllTemplates(false);
+        for (DashboardConfiguration config : configurations) {
+            JsonNode jsonNode = mapper.readTree(config.getConfiguration());
+            String id = jsonNode.get("id").textValue();
+            if (jsonNode.get("name").textValue().equals(inName) && !id.equals(inId)) {
+                throw new IllegalArgumentException(
+                    "File:  " + template.getName() + " name: " + inName + " conflict with exist configuration id: " + id);
+            }
+        }
     }
 }

oap-server/server-core/src/main/java/org/apache/skywalking/oap/server/core/management/ui/template/UITemplateManagementService.java

@@ -68,4 +68,13 @@ public class UITemplateManagementService implements Service {
     public TemplateChangeStatus disableTemplate(String id) throws IOException {
         return getUITemplateManagementDAO().disableTemplate(id);
     }
+
+    public TemplateChangeStatus addOrUpdate(DashboardSetting setting) throws IOException {
+        DashboardConfiguration configuration = getUITemplateManagementDAO().getTemplate(setting.getId());
+        if (configuration == null) {
+            return getUITemplateManagementDAO().addTemplate(setting);
+        } else {
+            return getUITemplateManagementDAO().changeTemplate(setting);
+        }
+    }
 }

oap-server/server-core/src/main/java/org/apache/skywalking/oap/server/core/query/input/DashboardSetting.java

@@ -28,13 +28,12 @@ import org.apache.skywalking.oap.server.library.util.BooleanUtils;
 public class DashboardSetting {
     private String id;
     private String configuration;
-    private long updateTime;
 
     public UITemplate toEntity() {
         UITemplate uiTemplate = new UITemplate();
         uiTemplate.setTemplateId(this.id);
         uiTemplate.setConfiguration(this.getConfiguration());
-        uiTemplate.setUpdateTime(this.updateTime);
+        uiTemplate.setUpdateTime(System.currentTimeMillis());
         uiTemplate.setDisabled(BooleanUtils.FALSE);
         return uiTemplate;
     }

oap-server/server-core/src/test/resources/test-ui-templates/ui-initialized-templates.yml

-# 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.
-
-# UI templates initialized file includes the default template when the SkyWalking OAP starts up at the first time.
-#
-# Also, SkyWalking would detect the existing templates in the database, once they are missing, all templates in this file
-# could be added automatically.
-
-templates:
-  - name: "APM (Agent based)"
-    # The type includes DASHBOARD, TOPOLOGY_INSTANCE, TOPOLOGY_ENDPOINT.
-    # DASHBOARD type templates could have multiple definitions, by using different names.
-    # TOPOLOGY_INSTANCE, TOPOLOGY_ENDPOINT type templates should be defined once, as they are used in the topology page only.
-    type: "DASHBOARD"
-    # Configuration could be defined through UI, and use `export` to format in the standard JSON.
-    configuration: |-
-      ui exported definition in JSONsdfsd
-      sdjfkasld
-      sdfui
-      skdfj:dafjisa
-      adifaosi
-    # Activated as the DASHBOARD type, makes this templates added into the UI page automatically.
-    # False means providing a basic template, user needs to add it manually.
-    activated: true
-    # True means wouldn't show up on the dashboard. Only keeps the definition in the storage.
-    # disable: false
-  - name: "APM (Service Mesh)"
-    # The type includes DASHBOARD, TOPOLOGY_INSTANCE, TOPOLOGY_ENDPOINT.
-    # DASHBOARD type templates could have multiple definitions, by using different names.
-    # TOPOLOGY_INSTANCE, TOPOLOGY_ENDPOINT type templates should be defined once, as they are used in the topology page only.
-    type: "DASHBOARD"
-    # Configuration could be defined through UI, and use `export` to format in the standard JSON.
-    configuration: |-
-      Mesh metrics configuration.
-    # Activated as the DASHBOARD type, makes this templates added into the UI page automatically.
-    # False means providing a basic template, user needs to add it manually.
-    # activated: true
-    # True means wouldn't show up on the dashboard. Only keeps the definition in the storage.
-    disabled: true

oap-server/server-query-plugin/query-graphql-plugin/src/main/java/org/apache/skywalking/oap/query/graphql/GraphQLQueryConfig.java

@@ -30,4 +30,5 @@ import org.apache.skywalking.oap.server.library.module.ModuleConfig;
 public class GraphQLQueryConfig extends ModuleConfig {
     private boolean enableLogTestTool;
     private int maxQueryComplexity = 100;
+    private boolean enableUpdateUITemplate = false;
 }

oap-server/server-query-plugin/query-graphql-plugin/src/main/java/org/apache/skywalking/oap/query/graphql/GraphQLQueryProvider.java

@@ -109,7 +109,7 @@ public class GraphQLQueryProvider extends ModuleProvider {
                      .file("query-protocol/profile.graphqls")
                      .resolvers(new ProfileQuery(getManager()), new ProfileMutation(getManager()))
                      .file("query-protocol/ui-configuration.graphqls")
-                     .resolvers(new UIConfigurationManagement(getManager()))
+                     .resolvers(new UIConfigurationManagement(getManager(), config))
                      .file("query-protocol/browser-log.graphqls")
                      .resolvers(new BrowserLogQuery(getManager()))
                      .file("query-protocol/event.graphqls")

oap-server/server-query-plugin/query-graphql-plugin/src/main/java/org/apache/skywalking/oap/query/graphql/resolver/UIConfigurationManagement.java

@@ -24,6 +24,7 @@ import java.io.IOException;
 import java.util.List;
 import java.util.UUID;
 import lombok.RequiredArgsConstructor;
+import org.apache.skywalking.oap.query.graphql.GraphQLQueryConfig;
 import org.apache.skywalking.oap.server.core.CoreModule;
 import org.apache.skywalking.oap.server.core.management.ui.template.UITemplateManagementService;
 import org.apache.skywalking.oap.server.core.query.input.DashboardSetting;
@@ -42,6 +43,7 @@ import org.apache.skywalking.oap.server.library.module.ModuleManager;
 public class UIConfigurationManagement implements GraphQLQueryResolver, GraphQLMutationResolver {
     private final ModuleManager manager;
     private UITemplateManagementService uiTemplateManagementService;
+    private final GraphQLQueryConfig config;
 
     private UITemplateManagementService getUITemplateManagementService() {
         if (uiTemplateManagementService == null) {
@@ -61,20 +63,45 @@ public class UIConfigurationManagement implements GraphQLQueryResolver, GraphQLM
     }
 
     public TemplateChangeStatus addTemplate(NewDashboardSetting setting) throws IOException {
+        if (!config.isEnableUpdateUITemplate()) {
+            return TemplateChangeStatus.builder().status(false)
+                                       .id("")
+                                       .message(
+                                           "The dashboard creation has been disabled. Check SW_ENABLE_UPDATE_UI_TEMPLATE on " +
+                                               "configuration-vocabulary.md(https://skywalking.apache.org/docs/main/latest/en/setup/backend/configuration-vocabulary/#configuration-vocabulary) " +
+                                               "to activate it.")
+                                       .build();
+        }
         DashboardSetting dashboardSetting = new DashboardSetting();
         //Backend generate the Id for new template
         dashboardSetting.setId(UUID.randomUUID().toString());
-        dashboardSetting.setUpdateTime(System.currentTimeMillis());
         dashboardSetting.setConfiguration(setting.getConfiguration());
         return getUITemplateManagementService().addTemplate(dashboardSetting);
     }
 
     public TemplateChangeStatus changeTemplate(DashboardSetting setting) throws IOException {
-        setting.setUpdateTime(System.currentTimeMillis());
+        if (!config.isEnableUpdateUITemplate()) {
+            return TemplateChangeStatus.builder().status(false)
+                                       .id(setting.getId())
+                                       .message(
+                                           "The dashboard update has been disabled. Check SW_ENABLE_UPDATE_UI_TEMPLATE on " +
+                                               "configuration-vocabulary.md(https://skywalking.apache.org/docs/main/latest/en/setup/backend/configuration-vocabulary/#configuration-vocabulary) " +
+                                               "to activate it.")
+                                       .build();
+        }
         return getUITemplateManagementService().changeTemplate(setting);
     }
 
     public TemplateChangeStatus disableTemplate(String id) throws IOException {
+        if (!config.isEnableUpdateUITemplate()) {
+            return TemplateChangeStatus.builder().status(false)
+                                       .id(id)
+                                       .message(
+                                           "The dashboard disable has been disabled. Check SW_ENABLE_UPDATE_UI_TEMPLATE on " +
+                                               "configuration-vocabulary.md(https://skywalking.apache.org/docs/main/latest/en/setup/backend/configuration-vocabulary/#configuration-vocabulary) " +
+                                               "to activate it.")
+                                       .build();
+        }
         return getUITemplateManagementService().disableTemplate(id);
     }
 }

oap-server/server-starter/src/main/resources/application.yml

@@ -416,6 +416,8 @@ query:
     # Maximum complexity allowed for the GraphQL query that can be used to
     # abort a query if the total number of data fields queried exceeds the defined threshold.
     maxQueryComplexity: ${SW_QUERY_MAX_QUERY_COMPLEXITY:100}
+    # Allow user add, disable and update UI template
+    enableUpdateUITemplate: ${SW_ENABLE_UPDATE_UI_TEMPLATE:false}
 
 alarm:
   selector: ${SW_ALARM:default}

oap-server/server-starter/src/main/resources/ui-initialized-templates/browser.yml

-# 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.
-
-# UI templates initialized file includes the default template when the SkyWalking OAP starts up at the first time.
-#
-# Also, SkyWalking would detect the existing templates in the database, once they are missing, all templates in this file
-# could be added automatically.
-
-templates:
-  - name: "Web Browser"
-    # The type includes DASHBOARD, TOPOLOGY_INSTANCE, TOPOLOGY_ENDPOINT.
-    # DASHBOARD type templates could have multiple definitions, by using different names.
-    # TOPOLOGY_INSTANCE, TOPOLOGY_ENDPOINT type templates should be defined once, as they are used in the topology page only.
-    type: "DASHBOARD"
-    # Configuration could be defined through UI, and use `export` to format in the standard JSON.
-    configuration: |-
-      [
-        {
-          "name": "Web Browser",
-          "type": "browser",
-          "children": [
-            {
-              "name": "Web App",
-              "children": [
-                {
-                  "width": "4",
-                  "title": "All Browsers App Load (CPM - calls per minute)",
-                  "height": "250",
-                  "entityType": "Service",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "sortMetrics",
-                  "chartType": "ChartSlow",
-                  "metricName": "browser_app_pv"
-                },
-                {
-                  "width": "4",
-                  "title": "All Browsers App Error Rate",
-                  "height": "250",
-                  "entityType": "Service",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "sortMetrics",
-                  "chartType": "ChartSlow",
-                  "metricName": "browser_app_error_rate",
-                  "unit": "%",
-                  "aggregation": "/",
-                  "aggregationNum": "100"
-                },
-                {
-                  "width": "4",
-                  "title": "All Browsers App Error Count",
-                  "height": "250",
-                  "entityType": "Service",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "sortMetrics",
-                  "chartType": "ChartSlow",
-                  "metricName": "browser_app_error_sum"
-                },
-                {
-                  "width": "4",
-                  "title": "App Load (CPM - calls per minute)",
-                  "height": "250",
-                  "entityType": "Service",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "readMetricsValues",
-                  "chartType": "ChartLine",
-                  "metricName": "browser_app_pv"
-                },
-                {
-                  "width": "4",
-                  "title": "App Error Rate",
-                  "height": "250",
-                  "entityType": "Service",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "readMetricsValues",
-                  "chartType": "ChartLine",
-                  "metricName": "browser_app_error_rate",
-                  "aggregation": "/",
-                  "aggregationNum": "100",
-                  "unit": "%"
-                },
-                {
-                  "width": "4",
-                  "title": "App Error Count",
-                  "height": "250",
-                  "entityType": "Service",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "readMetricsValues",
-                  "chartType": "ChartBar",
-                  "metricName": "browser_app_error_sum"
-                },
-                {
-                  "width": "4",
-                  "title": "Load of Versions In The Selected App (CPM - calls per minute)",
-                  "height": "250",
-                  "entityType": "ServiceInstance",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "sortMetrics",
-                  "chartType": "ChartSlow",
-                  "metricName": "browser_app_single_version_pv",
-                  "parentService": true
-                },
-                {
-                  "width": "4",
-                  "title": "Error Rate of Versions In The Selected App",
-                  "height": "250",
-                  "entityType": "ServiceInstance",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "sortMetrics",
-                  "chartType": "ChartSlow",
-                  "metricName": "browser_app_single_version_error_rate",
-                  "parentService": true,
-                  "unit": "%",
-                  "aggregation": "/",
-                  "aggregationNum": "100"
-                },
-                {
-                  "width": "4",
-                  "title": "Error Count of Versions In The Selected App",
-                  "height": "250",
-                  "entityType": "ServiceInstance",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "sortMetrics",
-                  "chartType": "ChartSlow",
-                  "metricName": "browser_app_single_version_error_sum",
-                  "parentService": true
-                },
-                {
-                  "width": "4",
-                  "title": "Load of The Selected Version (CPM - calls per minute) ",
-                  "height": "250",
-                  "entityType": "ServiceInstance",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "readMetricsValues",
-                  "chartType": "ChartLine",
-                  "metricName": "browser_app_single_version_pv"
-                },
-                {
-                  "width": "4",
-                  "title": "Error Rate  of The Selected Version",
-                  "height": "250",
-                  "entityType": "ServiceInstance",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "readMetricsValues",
-                  "chartType": "ChartLine",
-                  "metricName": "browser_app_single_version_error_rate",
-                  "aggregation": "/",
-                  "aggregationNum": "100"
-                },
-                {
-                  "width": "4",
-                  "title": "Error Count  of The Selected Version",
-                  "height": "250",
-                  "entityType": "ServiceInstance",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "readMetricsValues",
-                  "chartType": "ChartBar",
-                  "metricName": "browser_app_single_version_error_sum"
-                }
-              ]
-            },
-            {
-              "name": "Pages",
-              "children": [
-                {
-                  "width": "4",
-                  "title": "Top Hot Pages  (CPM - calls per minute)",
-                  "height": "250",
-                  "entityType": "Endpoint",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "sortMetrics",
-                  "chartType": "ChartSlow",
-                  "metricName": "browser_app_page_pv",
-                  "parentService": true
-                },
-                {
-                  "width": "4",
-                  "title": "Top Unstable Pages / Error Rate",
-                  "height": "250",
-                  "entityType": "Endpoint",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "sortMetrics",
-                  "chartType": "ChartSlow",
-                  "metricName": "browser_app_page_error_rate",
-                  "unit": "%",
-                  "parentService": true,
-                  "aggregation": "/",
-                  "aggregationNum": "100"
-                },
-                {
-                  "width": "4",
-                  "title": "Top Unstable Pages / Error Count",
-                  "height": "250",
-                  "entityType": "Endpoint",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "sortMetrics",
-                  "chartType": "ChartSlow",
-                  "metricName": "browser_app_page_error_sum",
-                  "parentService": true
-                },
-                {
-                  "width": "6",
-                  "title": "Page Error Count Layout",
-                  "height": 350,
-                  "entityType": "Endpoint",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "readMetricsValues",
-                  "chartType": "ChartBar",
-                  "metricName": "browser_app_page_ajax_error_sum,browser_app_page_resource_error_sum,browser_app_page_js_error_sum,browser_app_page_unknown_error_sum"
-                },
-                {
-                  "width": "6",
-                  "title": "Page Performance",
-                  "height": 350,
-                  "entityType": "Endpoint",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "readMetricsValues",
-                  "chartType": "ChartLine",
-                  "metricName": "browser_app_page_redirect_avg,browser_app_page_dns_avg,browser_app_page_ttfb_avg,browser_app_page_tcp_avg,browser_app_page_trans_avg,browser_app_page_dom_analysis_avg,browser_app_page_fpt_avg,browser_app_page_dom_ready_avg,browser_app_page_load_page_avg,browser_app_page_res_avg,browser_app_page_ssl_avg,browser_app_page_ttl_avg,browser_app_page_first_pack_avg,browser_app_page_fmp_avg",
-                  "unit": "ms"
-                },
-                {
-                  "width": "4",
-                  "title": "Page FPT Latency",
-                  "height": "250",
-                  "entityType": "Endpoint",
-                  "independentSelector": false,
-                  "metricType": "LABELED_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "readLabeledMetricsValues",
-                  "chartType": "ChartLine",
-                  "metricName": "browser_app_page_fpt_percentile",
-                  "unit": "ms",
-                  "metricLabels": "P50, P75, P90, P95, P99",
-                  "labelsIndex": "0,1,2,3,4"
-                },
-                {
-                  "width": "4",
-                  "title": "Page TTL Latency",
-                  "height": "250",
-                  "entityType": "Endpoint",
-                  "independentSelector": false,
-                  "metricType": "LABELED_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "readLabeledMetricsValues",
-                  "chartType": "ChartLine",
-                  "metricName": "browser_app_page_ttl_percentile",
-                  "metricLabels": "P50, P75, P90, P95, P99",
-                  "labelsIndex": "0,1,2,3,4",
-                  "unit": "ms"
-                },
-                {
-                  "width": "4",
-                  "title": "Page DOM Ready Latency",
-                  "height": "250",
-                  "entityType": "Endpoint",
-                  "independentSelector": false,
-                  "metricType": "LABELED_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "readLabeledMetricsValues",
-                  "chartType": "ChartLine",
-                  "metricName": "browser_app_page_dom_ready_percentile",
-                  "metricLabels": "P50, P75, P90, P95, P99",
-                  "labelsIndex": "0,1,2,3,4",
-                  "unit": "ms"
-                },
-                {
-                  "width": "4",
-                  "title": "Page Load Latency",
-                  "height": "250",
-                  "entityType": "Endpoint",
-                  "independentSelector": false,
-                  "metricType": "LABELED_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "readLabeledMetricsValues",
-                  "chartType": "ChartLine",
-                  "metricName": "browser_app_page_load_page_percentile",
-                  "unit": "ms",
-                  "metricLabels": "P50, P75, P90, P95, P99",
-                  "labelsIndex": "0,1,2,3,4"
-                },
-                {
-                  "width": "4",
-                  "title": "Page First Pack Latency",
-                  "height": "250",
-                  "entityType": "Endpoint",
-                  "independentSelector": false,
-                  "metricType": "LABELED_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "readLabeledMetricsValues",
-                  "chartType": "ChartLine",
-                  "metricName": "browser_app_page_first_pack_percentile",
-                  "metricLabels": "P50, P75, P90, P95, P99",
-                  "labelsIndex": "0,1,2,3,4",
-                  "unit": "ms"
-                },
-                {
-                  "width": "4",
-                  "title": "Page FMP Latency",
-                  "height": "250",
-                  "entityType": "Endpoint",
-                  "independentSelector": false,
-                  "metricType": "LABELED_VALUE",
-                  "sortOrder": "DES",
-                  "queryMetricType": "readLabeledMetricsValues",
-                  "chartType": "ChartLine",
-                  "metricName": "browser_app_page_fmp_percentile",
-                  "metricLabels": "P50, P75, P90, P95, P99",
-                  "labelsIndex": "0,1,2,3,4",
-                  "unit": "ms"
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    # Activated as the DASHBOARD type, makes this templates added into the UI page automatically.
-    # False means providing a basic template, user needs to add it manually.
-    activated: true
-    # True means wouldn't show up on the dashboard. Only keeps the definition in the storage.
-    disabled: false
\ No newline at end of file

oap-server/server-starter/src/main/resources/ui-initialized-templates/browser/browser-app.json

+/**
+ * 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.
+ */
+
+[
+  {
+    "id": "Browser-app",
+    "configuration": {
+      "children": [
+        {
+          "x": 0,
+          "y": 0,
+          "w": 24,
+          "h": 52,
+          "i": "12",
+          "type": "Tab",
+          "widget": {
+            "title": "Title"
+          },
+          "graph": {},
+          "standard": {},
+          "metrics": [
+            ""
+          ],
+          "metricTypes": [
+            ""
+          ],
+          "activedTabIndex": 2,
+          "children": [
+            {
+              "name": "Overview",
+              "children": [
+                {
+                  "x": 16,
+                  "y": 16,
+                  "w": 8,
+                  "h": 16,
+                  "i": "2",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Error Rate of Versions In The Selected App"
+                  },
+                  "graph": {
+                    "type": "TopList",
+                    "topN": "10"
+                  },
+                  "standard": {
+                    "divide": 100,
+                    "unit": "%"
+                  },
+                  "metrics": [
+                    "browser_app_single_version_error_rate"
+                  ],
+                  "metricTypes": [
+                    "sortMetrics"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 0,
+                  "y": 32,
+                  "w": 8,
+                  "h": 16,
+                  "i": "3",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Load of Versions In The Selected App (CPM - calls per minute)"
+                  },
+                  "graph": {
+                    "type": "TopList",
+                    "topN": "10"
+                  },
+                  "standard": {},
+                  "metrics": [
+                    "browser_app_single_version_pv"
+                  ],
+                  "metricTypes": [
+                    "sortMetrics"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 8,
+                  "y": 16,
+                  "w": 8,
+                  "h": 16,
+                  "i": "5",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "App Error Count"
+                  },
+                  "graph": {
+                    "type": "Bar",
+                    "showBackground": true
+                  },
+                  "standard": {},
+                  "metrics": [
+                    "browser_app_error_sum"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 0,
+                  "y": 0,
+                  "w": 8,
+                  "h": 16,
+                  "i": "7",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "All Browsers App Load (CPM - calls per minute)"
+                  },
+                  "graph": {
+                    "type": "TopList",
+                    "topN": "10"
+                  },
+                  "standard": {},
+                  "metrics": [
+                    "browser_app_pv"
+                  ],
+                  "metricTypes": [
+                    "sortMetrics"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 8,
+                  "y": 0,
+                  "w": 8,
+                  "h": 16,
+                  "i": "8",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "All Browsers App Error Count"
+                  },
+                  "graph": {
+                    "type": "TopList",
+                    "topN": "10"
+                  },
+                  "standard": {},
+                  "metrics": [
+                    "browser_app_error_sum"
+                  ],
+                  "metricTypes": [
+                    "sortMetrics"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 16,
+                  "y": 0,
+                  "w": 8,
+                  "h": 16,
+                  "i": "9",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "App Load (CPM - calls per minute)"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {},
+                  "metrics": [
+                    "browser_app_pv"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 8,
+                  "y": 32,
+                  "w": 8,
+                  "h": 16,
+                  "i": "10",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "All Browsers App Error Rate"
+                  },
+                  "graph": {
+                    "type": "TopList",
+                    "topN": "10"
+                  },
+                  "standard": {
+                    "divide": 100,
+                    "unit": "%"
+                  },
+                  "metrics": [
+                    "browser_app_error_rate"
+                  ],
+                  "metricTypes": [
+                    "sortMetrics"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 0,
+                  "y": 16,
+                  "w": 8,
+                  "h": 16,
+                  "i": "11",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "App Error Rate"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {
+                    "divide": 100,
+                    "unit": "%"
+                  },
+                  "metrics": [
+                    "browser_app_error_rate"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                }
+              ]
+            },
+            {
+              "name": "Version",
+              "children": [
+                {
+                  "x": 0,
+                  "y": 0,
+                  "w": 24,
+                  "h": 48,
+                  "i": "0",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Title"
+                  },
+                  "graph": {
+                    "type": "InstanceList",
+                    "dashboardName": "",
+                    "fontSize": 12
+                  },
+                  "standard": {},
+                  "metrics": [
+                    "browser_app_single_version_pv"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                }
+              ]
+            },
+            {
+              "name": "Page",
+              "children": [
+                {
+                  "x": 0,
+                  "y": 0,
+                  "w": 24,
+                  "h": 49,
+                  "i": "0",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Title"
+                  },
+                  "graph": {
+                    "type": "EndpointList",
+                    "dashboardName": "Browser-Page",
+                    "fontSize": 12,
+                    "showXAxis": false,
+                    "showYAxis": false
+                  },
+                  "standard": {},
+                  "metrics": [
+                    "browser_app_page_pv"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                }
+              ]
+            }
+          ],
+          "moved": false
+        }
+      ],
+      "layer": "BROWSER",
+      "entity": "Service",
+      "name": "Browser-App",
+      "id": "Browser-app",
+      "isRoot": false
+    }
+  }
+]

oap-server/server-starter/src/main/resources/ui-initialized-templates/browser/browser-page.json

+/**
+ * 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.
+ */
+
+[
+  {
+    "id": "Browser-Page",
+    "configuration": {
+      "children": [
+        {
+          "x": 16,
+          "y": 45,
+          "w": 8,
+          "h": 15,
+          "i": "0",
+          "type": "Widget",
+          "widget": {
+            "title": "Page FMP Latency"
+          },
+          "graph": {
+            "type": "Line",
+            "step": false,
+            "smooth": false,
+            "showSymbol": false,
+            "showXAxis": true,
+            "showYAxis": true
+          },
+          "standard": {
+            "divide": 1,
+            "unit": "ms",
+            "metricLabels": "P50,P75,P90,P95,P99",
+            "labelsIndex": "0,1,2,3,4"
+          },
+          "metrics": [
+            "browser_app_page_fmp_percentile"
+          ],
+          "metricTypes": [
+            "readLabeledMetricsValues"
+          ],
+          "moved": false
+        },
+        {
+          "x": 8,
+          "y": 45,
+          "w": 8,
+          "h": 15,
+          "i": "1",
+          "type": "Widget",
+          "widget": {
+            "title": "Page First Pack Latency"
+          },
+          "graph": {
+            "type": "Line",
+            "step": false,
+            "smooth": false,
+            "showSymbol": false,
+            "showXAxis": true,
+            "showYAxis": true
+          },
+          "standard": {
+            "divide": 1,
+            "unit": "ms",
+            "metricLabels": "P50,P75,P90,P95,P99",
+            "labelsIndex": "0,1,2,3,4"
+          },
+          "metrics": [
+            "browser_app_page_first_pack_percentile"
+          ],
+          "metricTypes": [
+            "readLabeledMetricsValues"
+          ],
+          "moved": false
+        },
+        {
+          "x": 0,
+          "y": 30,
+          "w": 8,
+          "h": 15,
+          "i": "2",
+          "type": "Widget",
+          "widget": {
+            "title": "Page FPT Latency"
+          },
+          "graph": {
+            "type": "Line",
+            "step": false,
+            "smooth": false,
+            "showSymbol": false,
+            "showXAxis": true,
+            "showYAxis": true
+          },
+          "standard": {
+            "unit": "ms",
+            "metricLabels": "P50, P75, P90, P95, P99"
+          },
+          "metrics": [
+            "browser_app_page_fpt_percentile"
+          ],
+          "metricTypes": [
+            "readLabeledMetricsValues"
+          ],
+          "moved": false
+        },
+        {
+          "x": 16,
+          "y": 30,
+          "w": 8,
+          "h": 15,
+          "i": "3",
+          "type": "Widget",
+          "widget": {
+            "title": "Page DOM Ready Latency"
+          },
+          "graph": {
+            "type": "Line",
+            "step": false,
+            "smooth": false,
+            "showSymbol": false,
+            "showXAxis": true,
+            "showYAxis": true
+          },
+          "standard": {
+            "divide": 1,
+            "unit": "ms",
+            "metricLabels": "P50,P75,P90,P95,P99",
+            "labelsIndex": "0,1,2,3,4"
+          },
+          "metrics": [
+            "browser_app_page_dom_ready_percentile"
+          ],
+          "metricTypes": [
+            "readLabeledMetricsValues"
+          ],
+          "moved": false
+        },
+        {
+          "x": 8,
+          "y": 30,
+          "w": 8,
+          "h": 15,
+          "i": "4",
+          "type": "Widget",
+          "widget": {
+            "title": "Page TTL Latency"
+          },
+          "graph": {
+            "type": "Line",
+            "step": false,
+            "smooth": false,
+            "showSymbol": false,
+            "showXAxis": true,
+            "showYAxis": true
+          },
+          "standard": {
+            "divide": 1,
+            "unit": "ms",
+            "metricLabels": "P50,P75,P90,P95,P99",
+            "labelsIndex": "0,1,2,3,4"
+          },
+          "metrics": [
+            "browser_app_page_ttl_percentile"
+          ],
+          "metricTypes": [
+            "readLabeledMetricsValues"
+          ],
+          "moved": false
+        },
+        {
+          "x": 0,
+          "y": 0,
+          "w": 8,
+          "h": 15,
+          "i": "5",
+          "type": "Widget",
+          "widget": {
+            "title": "Top Hot Pages  (CPM - calls per minute)"
+          },
+          "graph": {
+            "type": "TopList",
+            "topN": "10"
+          },
+          "standard": {
+            "divide": 1,
+            "unit": "ms",
+            "metricLabels": "P50,P75,P90,P95,P99",
+            "labelsIndex": "0,1,2,3,4"
+          },
+          "metrics": [
+            "browser_app_page_pv"
+          ],
+          "metricTypes": [
+            "sortMetrics"
+          ],
+          "moved": false
+        },
+        {
+          "x": 16,
+          "y": 0,
+          "w": 8,
+          "h": 15,
+          "i": "6",
+          "type": "Widget",
+          "widget": {
+            "title": "Top Unstable Pages / Error Count"
+          },
+          "graph": {
+            "type": "TopList",
+            "topN": "10"
+          },
+          "standard": {
+            "divide": 1,
+            "unit": "ms",
+            "metricLabels": "P50,P75,P90,P95,P99",
+            "labelsIndex": "0,1,2,3,4"
+          },
+          "metrics": [
+            "browser_app_page_error_sum"
+          ],
+          "metricTypes": [
+            "sortMetrics"
+          ],
+          "moved": false
+        },
+        {
+          "x": 8,
+          "y": 0,
+          "w": 8,
+          "h": 15,
+          "i": "7",
+          "type": "Widget",
+          "widget": {
+            "title": "Top Unstable Pages / Error Rate"
+          },
+          "graph": {
+            "type": "TopList",
+            "topN": "10"
+          },
+          "standard": {
+            "divide": 100,
+            "unit": "%"
+          },
+          "metrics": [
+            "browser_app_page_error_rate"
+          ],
+          "metricTypes": [
+            "sortMetrics"
+          ],
+          "moved": false
+        },
+        {
+          "x": 0,
+          "y": 45,
+          "w": 8,
+          "h": 15,
+          "i": "8",
+          "type": "Widget",
+          "widget": {
+            "title": "Page Load Latency"
+          },
+          "graph": {
+            "type": "Line",
+            "step": false,
+            "smooth": false,
+            "showSymbol": false,
+            "showXAxis": true,
+            "showYAxis": true
+          },
+          "standard": {
+            "divide": 1,
+            "unit": "ms",
+            "metricLabels": "P50,P75,P90,P95,P99",
+            "labelsIndex": "0,1,2,3,4"
+          },
+          "metrics": [
+            "browser_app_page_load_page_percentile"
+          ],
+          "metricTypes": [
+            "readLabeledMetricsValues"
+          ],
+          "moved": false
+        },
+        {
+          "x": 12,
+          "y": 15,
+          "w": 12,
+          "h": 15,
+          "i": "9",
+          "type": "Widget",
+          "widget": {
+            "title": "Page Performance"
+          },
+          "graph": {
+            "type": "Line",
+            "step": false,
+            "smooth": false,
+            "showSymbol": false,
+            "showXAxis": true,
+            "showYAxis": true
+          },
+          "standard": {
+            "divide": 1,
+            "unit": "ms"
+          },
+          "metrics": [
+            "browser_app_page_res_avg",
+            "browser_app_page_load_page_avg",
+            "browser_app_page_trans_avg",
+            "browser_app_page_fpt_avg",
+            "browser_app_page_dom_analysis_avg",
+            "browser_app_page_dns_avg",
+            "browser_app_page_dom_ready_avg",
+            "browser_app_page_redirect_avg",
+            "browser_app_page_tcp_avg",
+            "browser_app_page_ttfb_avg"
+          ],
+          "metricTypes": [
+            "readMetricsValues",
+            "readMetricsValues",
+            "readMetricsValues",
+            "readMetricsValues",
+            "readMetricsValues",
+            "readMetricsValues",
+            "readMetricsValues",
+            "readMetricsValues",
+            "readMetricsValues",
+            "readMetricsValues"
+          ],
+          "moved": false
+        },
+        {
+          "x": 0,
+          "y": 15,
+          "w": 12,
+          "h": 15,
+          "i": "10",
+          "type": "Widget",
+          "widget": {
+            "title": "Page Error Count Layout"
+          },
+          "graph": {
+            "type": "Bar",
+            "showBackground": true
+          },
+          "standard": {
+            "divide": 1,
+            "unit": "ms",
+            "metricLabels": "P50,P75,P90,P95,P99",
+            "labelsIndex": "0,1,2,3,4"
+          },
+          "metrics": [
+            "browser_app_page_resource_error_sum",
+            "browser_app_page_js_error_sum",
+            "browser_app_page_unknown_error_sum",
+            "browser_app_page_ajax_error_sum"
+          ],
+          "metricTypes": [
+            "readMetricsValues",
+            "readMetricsValues",
+            "readMetricsValues",
+            "readMetricsValues"
+          ],
+          "moved": false
+        }
+      ],
+      "layer": "BROWSER",
+      "entity": "Endpoint",
+      "name": "Browser-Page",
+      "id": "Browser-Page",
+      "isRoot": false
+    }
+  }
+]

oap-server/server-starter/src/main/resources/ui-initialized-templates/browser/browser-version.json

+/**
+ * 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.
+ */
+
+[
+  {
+    "id": "Browser-Version",
+    "configuration": {
+      "children": [
+        {
+          "x": 0,
+          "y": 24,
+          "w": 24,
+          "h": 12,
+          "i": "0",
+          "type": "Widget",
+          "widget": {
+            "title": "Error Count  of The Selected Version"
+          },
+          "graph": {
+            "type": "Bar",
+            "showBackground": true
+          },
+          "standard": {
+            "divide": 100,
+            "unit": "%"
+          },
+          "metrics": [
+            "browser_app_single_version_error_sum"
+          ],
+          "metricTypes": [
+            "readMetricsValues"
+          ],
+          "moved": false
+        },
+        {
+          "x": 0,
+          "y": 12,
+          "w": 24,
+          "h": 12,
+          "i": "1",
+          "type": "Widget",
+          "widget": {
+            "title": "Error Rate  of The Selected Version"
+          },
+          "graph": {
+            "type": "Line",
+            "step": false,
+            "smooth": false,
+            "showSymbol": false,
+            "showXAxis": true,
+            "showYAxis": true
+          },
+          "standard": {
+            "divide": 100,
+            "unit": "%"
+          },
+          "metrics": [
+            "browser_app_single_version_error_rate"
+          ],
+          "metricTypes": [
+            "readMetricsValues"
+          ],
+          "moved": false
+        },
+        {
+          "x": 0,
+          "y": 0,
+          "w": 24,
+          "h": 12,
+          "i": "2",
+          "type": "Widget",
+          "widget": {
+            "title": "Load of The Selected Version (CPM - calls per minute) "
+          },
+          "graph": {
+            "type": "Line",
+            "step": false,
+            "smooth": false,
+            "showSymbol": false,
+            "showXAxis": true,
+            "showYAxis": true
+          },
+          "standard": {
+            "divide": 100,
+            "unit": "%"
+          },
+          "metrics": [
+            "browser_app_single_version_pv"
+          ],
+          "metricTypes": [
+            "readMetricsValues"
+          ],
+          "moved": false
+        }
+      ],
+      "layer": "BROWSER",
+      "entity": "ServiceInstance",
+      "name": "Browser-Version",
+      "id": "Browser-Version",
+      "isRoot": false
+    }
+  }
+]

oap-server/server-starter/src/main/resources/ui-initialized-templates/database.yml

-# 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.
-
-# UI templates initialized file includes the default template when the SkyWalking OAP starts up at the first time.
-#
-# Also, SkyWalking would detect the existing templates in the database, once they are missing, all templates in this file
-# could be added automatically.
-
-templates:
-  - name: "Database"
-    # The type includes DASHBOARD, TOPOLOGY_INSTANCE, TOPOLOGY_ENDPOINT.
-    # DASHBOARD type templates could have multiple definitions, by using different names.
-    # TOPOLOGY_INSTANCE, TOPOLOGY_ENDPOINT type templates should be defined once, as they are used in the topology page only.
-    type: "DASHBOARD"
-    # Configuration could be defined through UI, and use `export` to format in the standard JSON.
-    configuration: |-
-      [
-        {
-          "name": "Database",
-          "type": "database",
-          "children": [
-            {
-              "name": "Database",
-              "children": [
-                {
-                  "width": 3,
-                  "title": "Database Avg Response Time",
-                  "height": 350,
-                  "entityType": "Service",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "metricName": "database_access_resp_time",
-                  "queryMetricType": "readMetricsValues",
-                  "chartType": "ChartLine",
-                  "unit": "ms"
-                },
-                {
-                  "width": 3,
-                  "title": "Database Access Successful Rate",
-                  "height": 350,
-                  "entityType": "Service",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "metricName": "database_access_sla",
-                  "queryMetricType": "readMetricsValues",
-                  "chartType": "ChartLine",
-                  "unit": "%",
-                  "aggregation": "/",
-                  "aggregationNum": "100"
-                },
-                {
-                  "width": 3,
-                  "title": "Database Traffic",
-                  "height": 350,
-                  "entityType": "Service",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "metricName": "database_access_cpm",
-                  "queryMetricType": "readMetricsValues",
-                  "chartType": "ChartLine",
-                  "unit": "CPM - calls per minute"
-                },
-                {
-                  "width": 3,
-                  "title": "Database Access Latency Percentile",
-                  "height": 350,
-                  "entityType": "Service",
-                  "independentSelector": false,
-                  "metricType": "LABELED_VALUE",
-                  "metricName": "database_access_percentile",
-                  "queryMetricType": "readLabeledMetricsValues",
-                  "chartType": "ChartLine",
-                  "metricLabels": "P50, P75, P90, P95, P99",
-                  "labelsIndex": "0, 1, 2, 3, 4",
-                  "unit": "ms"
-                },
-                {
-                  "width": "6",
-                  "title": "Slow Statements",
-                  "height": 350,
-                  "entityType": "Service",
-                  "independentSelector": false,
-                  "metricType": "SAMPLED_RECORD",
-                  "metricName": "top_n_database_statement",
-                  "queryMetricType": "readSampledRecords",
-                  "chartType": "ChartSlow",
-                  "parentService": true,
-                  "sortOrder": "DES",
-                  "unit": "ms"
-                },
-                {
-                  "width": 3,
-                  "title": "All Database Loads",
-                  "height": 350,
-                  "entityType": "Service",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "metricName": "database_access_cpm",
-                  "queryMetricType": "sortMetrics",
-                  "chartType": "ChartSlow",
-                  "parentService": false,
-                  "sortOrder": "DES",
-                  "unit": "CPM - calls per minute"
-                },
-                {
-                  "width": 3,
-                  "title": "Un-Health Databases (Successful Rate)",
-                  "height": 350,
-                  "entityType": "Service",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "metricName": "database_access_sla",
-                  "queryMetricType": "sortMetrics",
-                  "chartType": "ChartSlow",
-                  "parentService": false,
-                  "sortOrder": "ASC",
-                  "unit": "%",
-                  "aggregation": "/",
-                  "aggregationNum": "100"
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    # Activated as the DASHBOARD type, makes this templates added into the UI page automatically.
-    # False means providing a basic template, user needs to add it manually.
-    activated: true
-    # True means wouldn't show up on the dashboard. Only keeps the definition in the storage.
-    disabled: false
\ No newline at end of file

oap-server/server-starter/src/main/resources/ui-initialized-templates/event.yml

-# 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.
-
-templates:
-  - name: "Event"
-    type: "DASHBOARD"
-    configuration: |-
-      [
-        {
-          "name": "Event",
-          "type": "service",
-          "children": [
-            {
-              "name": "Global",
-              "children": [
-                {
-                  "width": "3",
-                  "title": "Event Count by Severity",
-                  "height": "280",
-                  "entityType": "All",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "metricName": "event_total,event_normal_count,event_error_count",
-                  "queryMetricType": "readMetricsValues",
-                  "chartType": "ChartLine"
-                },
-                {
-                  "width": "3",
-                  "title": "Event Count by Lifecycle",
-                  "height": "280",
-                  "entityType": "All",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "metricName": "event_start_count,event_shutdown_count",
-                  "queryMetricType": "readMetricsValues",
-                  "chartType": "ChartLine"
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    activated: true
-    disabled: false

oap-server/server-starter/src/main/resources/ui-initialized-templates/general/general-endpoint-relation.json

+/**
+ * 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.
+ */
+
+[
+  {
+    "id": "General-Endpoint-Relation",
+    "configuration": {
+      "children": [
+        {
+          "x": 0,
+          "y": 36,
+          "w": 24,
+          "h": 12,
+          "i": "0",
+          "type": "Widget",
+          "widget": {
+            "title": "Service Response Time Percentile"
+          },
+          "graph": {
+            "type": "Line",
+            "step": false,
+            "smooth": false,
+            "showSymbol": false,
+            "showXAxis": true,
+            "showYAxis": true
+          },
+          "standard": {
+            "divide": 100,
+            "unit": "%",
+            "metricLabels": "P50, P75, P90, P95, P99"
+          },
+          "metrics": [
+            "endpoint_relation_percentile"
+          ],
+          "metricTypes": [
+            "readLabeledMetricsValues"
+          ],
+          "moved": false
+        },
+        {
+          "x": 0,
+          "y": 24,
+          "w": 24,
+          "h": 12,
+          "i": "1",
+          "type": "Widget",
+          "widget": {
+            "title": "Successful Rate"
+          },
+          "graph": {
+            "type": "Line",
+            "step": false,
+            "smooth": false,
+            "showSymbol": false,
+            "showXAxis": true,
+            "showYAxis": true
+          },
+          "standard": {
+            "divide": 100,
+            "unit": "%"
+          },
+          "metrics": [
+            "endpoint_relation_sla"
+          ],
+          "metricTypes": [
+            "readMetricsValues"
+          ],
+          "moved": false
+        },
+        {
+          "x": 0,
+          "y": 12,
+          "w": 24,
+          "h": 12,
+          "i": "2",
+          "type": "Widget",
+          "widget": {
+            "title": "Load"
+          },
+          "graph": {
+            "type": "Line",
+            "step": false,
+            "smooth": false,
+            "showSymbol": false,
+            "showXAxis": true,
+            "showYAxis": true
+          },
+          "standard": {
+            "divide": 100,
+            "unit": "%",
+            "metricLabels": "P50, P75, P90, P95, P99",
+            "labelsIndex": "0, 1, 2, 3, 4"
+          },
+          "metrics": [
+            "endpoint_relation_cpm"
+          ],
+          "metricTypes": [
+            "readMetricsValues"
+          ],
+          "moved": false
+        },
+        {
+          "x": 0,
+          "y": 0,
+          "w": 24,
+          "h": 12,
+          "i": "3",
+          "type": "Widget",
+          "widget": {
+            "title": "Response Time"
+          },
+          "graph": {
+            "type": "Line",
+            "step": false,
+            "smooth": false,
+            "showSymbol": false,
+            "showXAxis": true,
+            "showYAxis": true
+          },
+          "standard": {
+            "divide": 100,
+            "unit": "%",
+            "metricLabels": "P50, P75, P90, P95, P99",
+            "labelsIndex": "0, 1, 2, 3, 4"
+          },
+          "metrics": [
+            "endpoint_relation_resp_time"
+          ],
+          "metricTypes": [
+            "readMetricsValues"
+          ],
+          "moved": false
+        }
+      ],
+      "layer": "GENERAL",
+      "entity": "EndpointRelation",
+      "name": "General-Endpoint-Relation",
+      "id": "General-Endpoint-Relation"
+    }
+  }
+]

oap-server/server-starter/src/main/resources/ui-initialized-templates/general/general-endpoint.json

+/**
+ * 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.
+ */
+
+[
+  {
+    "id": "General-Endpoint",
+    "configuration": {
+      "children": [
+        {
+          "x": 0,
+          "y": 0,
+          "w": 24,
+          "h": 52,
+          "i": "0",
+          "type": "Tab",
+          "widget": {
+            "title": "Title"
+          },
+          "graph": {},
+          "standard": {},
+          "metrics": [
+            ""
+          ],
+          "metricTypes": [
+            ""
+          ],
+          "activedTabIndex": 1,
+          "children": [
+            {
+              "name": "Overview",
+              "children": [
+                {
+                  "x": 16,
+                  "y": 0,
+                  "w": 8,
+                  "h": 13,
+                  "i": "0",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Successful Rate in Current Service"
+                  },
+                  "graph": {
+                    "type": "TopList",
+                    "topN": "10"
+                  },
+                  "standard": {
+                    "unit": "%",
+                    "divide": "100"
+                  },
+                  "metrics": [
+                    "endpoint_sla"
+                  ],
+                  "metricTypes": [
+                    "sortMetrics"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 8,
+                  "y": 0,
+                  "w": 8,
+                  "h": 13,
+                  "i": "1",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Slow Endpoints in Current Service"
+                  },
+                  "graph": {
+                    "type": "TopList",
+                    "topN": "10"
+                  },
+                  "standard": {
+                    "unit": "ms"
+                  },
+                  "metrics": [
+                    "endpoint_resp_time"
+                  ],
+                  "metricTypes": [
+                    "sortMetrics"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 0,
+                  "y": 0,
+                  "w": 8,
+                  "h": 13,
+                  "i": "2",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Endpoint Load in Current Service",
+                    "tips": "For HTTP 1/2, gRPC, RPC services, this means Calls Per Minute (CPM), for TCP services, this means Packets Per Minute (PPM)"
+                  },
+                  "graph": {
+                    "type": "TopList",
+                    "topN": "10"
+                  },
+                  "standard": {
+                    "unit": "CPM"
+                  },
+                  "metrics": [
+                    "endpoint_cpm"
+                  ],
+                  "metricTypes": [
+                    "sortMetrics"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 16,
+                  "y": 13,
+                  "w": 8,
+                  "h": 13,
+                  "i": "3",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Endpoint Response Time Percentile"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {
+                    "unit": "ms",
+                    "metricLabels": "P50, P75, P90, P95, P99",
+                    "labelsIndex": "0,1,2,3,4"
+                  },
+                  "metrics": [
+                    "endpoint_percentile"
+                  ],
+                  "metricTypes": [
+                    "readLabeledMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 8,
+                  "y": 13,
+                  "w": 8,
+                  "h": 13,
+                  "i": "4",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Endpoint Avg Response Time"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {
+                    "unit": "ms"
+                  },
+                  "metrics": [
+                    "endpoint_resp_time"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 16,
+                  "y": 26,
+                  "w": 8,
+                  "h": 13,
+                  "i": "5",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Message Queue Avg Consuming Latency",
+                    "tips": "The avg latency of message consuming. Latency = timestamp(received) - timestamp(producing)"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {
+                    "unit": "ms"
+                  },
+                  "metrics": [
+                    "endpoint_mq_consume_latency"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 8,
+                  "y": 26,
+                  "w": 8,
+                  "h": 13,
+                  "i": "6",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Message Queue Consuming Count",
+                    "tips": "The number of consumed messages."
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {},
+                  "metrics": [
+                    "endpoint_mq_consume_count"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 0,
+                  "y": 26,
+                  "w": 8,
+                  "h": 13,
+                  "i": "7",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Endpoint Successful Rate"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {
+                    "unit": "%",
+                    "divide": "100"
+                  },
+                  "metrics": [
+                    "endpoint_sla"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 0,
+                  "y": 13,
+                  "w": 8,
+                  "h": 13,
+                  "i": "8",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Endpoint Load"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {},
+                  "metrics": [
+                    "endpoint_cpm"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                }
+              ]
+            },
+            {
+              "name": "Topology",
+              "children": [
+                {
+                  "x": 0,
+                  "y": 0,
+                  "w": 24,
+                  "h": 49,
+                  "i": "0",
+                  "type": "Topology",
+                  "widget": {
+                    "title": "Title"
+                  },
+                  "graph": {
+                    "showDepth": true
+                  },
+                  "standard": {},
+                  "metrics": [
+                    ""
+                  ],
+                  "metricTypes": [
+                    ""
+                  ],
+                  "moved": false,
+                  "linkDashboard": "Endpoint-Relation",
+                  "nodeDashboard": [],
+                  "linkServerMetrics": [],
+                  "linkClientMetrics": [],
+                  "nodeMetrics": [],
+                  "legend": []
+                }
+              ]
+            },
+            {
+              "name": "Trace",
+              "children": [
+                {
+                  "x": 0,
+                  "y": 0,
+                  "w": 24,
+                  "h": 49,
+                  "i": "0",
+                  "type": "Trace",
+                  "widget": {
+                    "title": "Title"
+                  },
+                  "graph": {},
+                  "standard": {},
+                  "metrics": [
+                    ""
+                  ],
+                  "metricTypes": [
+                    ""
+                  ],
+                  "moved": false
+                }
+              ]
+            },
+            {
+              "name": "Log",
+              "children": [
+                {
+                  "x": 0,
+                  "y": 0,
+                  "w": 24,
+                  "h": 49,
+                  "i": "0",
+                  "type": "Log",
+                  "widget": {
+                    "title": "Title"
+                  },
+                  "graph": {},
+                  "standard": {},
+                  "metrics": [
+                    ""
+                  ],
+                  "metricTypes": [
+                    ""
+                  ],
+                  "moved": false
+                }
+              ]
+            }
+          ],
+          "moved": false
+        }
+      ],
+      "layer": "GENERAL",
+      "entity": "Endpoint",
+      "name": "General-Endpoint",
+      "id": "General-Endpoint",
+      "isRoot": false
+    }
+  }
+]

oap-server/server-starter/src/main/resources/ui-initialized-templates/general/general-instance-relation.json

+/**
+ * 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.
+ */
+
+[
+  {
+    "id": "General-Instance-Relation",
+    "configuration": {
+      "children": [
+        {
+          "x": 0,
+          "y": 36,
+          "w": 24,
+          "h": 12,
+          "i": "1",
+          "type": "Widget",
+          "widget": {
+            "title": "Response Time Percentile"
+          },
+          "graph": {
+            "type": "Line",
+            "step": false,
+            "smooth": false,
+            "showSymbol": false,
+            "showXAxis": true,
+            "showYAxis": true
+          },
+          "standard": {
+            "divide": 100,
+            "unit": "%",
+            "metricLabels": "P50, P75, P90, P95, P99"
+          },
+          "metrics": [
+            "service_instance_relation_client_percentile"
+          ],
+          "metricTypes": [
+            "readLabeledMetricsValues"
+          ],
+          "moved": false
+        },
+        {
+          "x": 0,
+          "y": 24,
+          "w": 24,
+          "h": 12,
+          "i": "2",
+          "type": "Widget",
+          "widget": {
+            "title": "Successful Rate"
+          },
+          "graph": {
+            "type": "Line",
+            "step": false,
+            "smooth": false,
+            "showSymbol": false,
+            "showXAxis": true,
+            "showYAxis": true
+          },
+          "standard": {
+            "divide": 100,
+            "unit": "%"
+          },
+          "metrics": [
+            "service_instance_relation_client_call_sla"
+          ],
+          "metricTypes": [
+            "readMetricsValues"
+          ],
+          "moved": false
+        },
+        {
+          "x": 0,
+          "y": 12,
+          "w": 24,
+          "h": 12,
+          "i": "3",
+          "type": "Widget",
+          "widget": {
+            "title": "Load"
+          },
+          "graph": {
+            "type": "Line",
+            "step": false,
+            "smooth": false,
+            "showSymbol": false,
+            "showXAxis": true,
+            "showYAxis": true
+          },
+          "standard": {
+            "divide": 100,
+            "unit": "%",
+            "metricLabels": "P50, P75, P90, P95, P99",
+            "labelsIndex": "0,1,2,3,4"
+          },
+          "metrics": [
+            "service_instance_relation_client_cpm"
+          ],
+          "metricTypes": [
+            "readMetricsValues"
+          ],
+          "moved": false
+        },
+        {
+          "x": 0,
+          "y": 0,
+          "w": 24,
+          "h": 12,
+          "i": "4",
+          "type": "Widget",
+          "widget": {
+            "title": "Response Time"
+          },
+          "graph": {
+            "type": "Line",
+            "step": false,
+            "smooth": false,
+            "showSymbol": false,
+            "showXAxis": true,
+            "showYAxis": true
+          },
+          "standard": {
+            "divide": 100,
+            "unit": "%",
+            "metricLabels": "P50, P75, P90, P95, P99",
+            "labelsIndex": "0,1,2,3,4"
+          },
+          "metrics": [
+            "service_instance_relation_client_resp_time"
+          ],
+          "metricTypes": [
+            "readMetricsValues"
+          ],
+          "moved": false
+        }
+      ],
+      "layer": "GENERAL",
+      "entity": "ServiceInstanceRelation",
+      "name": "General-Instance-Relation",
+      "id": "General-Instance-Relation",
+      "isRoot": false
+    }
+  }
+]

oap-server/server-starter/src/main/resources/ui-initialized-templates/general/general-instance.json

+/**
+ * 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.
+ */
+
+[
+  {
+    "id": "General-Instance",
+    "configuration": {
+      "children": [
+        {
+          "x": 0,
+          "y": 0,
+          "w": 24,
+          "h": 52,
+          "i": "0",
+          "type": "Tab",
+          "widget": {
+            "title": "Title"
+          },
+          "graph": {},
+          "standard": {
+            "unit": "%"
+          },
+          "metrics": [
+            ""
+          ],
+          "metricTypes": [
+            ""
+          ],
+          "activedTabIndex": 2,
+          "children": [
+            {
+              "name": "Overview",
+              "children": [
+                {
+                  "x": 18,
+                  "y": 0,
+                  "w": 6,
+                  "h": 13,
+                  "i": "0",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Service Instance Latency"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {
+                    "unit": "ms"
+                  },
+                  "metrics": [
+                    "service_instance_resp_time"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 12,
+                  "y": 0,
+                  "w": 6,
+                  "h": 13,
+                  "i": "1",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Service Instance Successful Rate",
+                    "tips": ""
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {
+                    "unit": "%",
+                    "divide": "100"
+                  },
+                  "metrics": [
+                    "service_instance_sla"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 6,
+                  "y": 0,
+                  "w": 6,
+                  "h": 13,
+                  "i": "2",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Title"
+                  },
+                  "graph": {},
+                  "standard": {
+                    "unit": "%"
+                  },
+                  "metrics": [
+                    ""
+                  ],
+                  "metricTypes": [
+                    ""
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 0,
+                  "y": 0,
+                  "w": 6,
+                  "h": 13,
+                  "i": "3",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Service Instance Load",
+                    "tips": "For HTTP 1/2, gRPC, RPC services, this means Calls Per Minute (CPM), for TCP services, this means Packets Per Minute (PPM)"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {
+                    "unit": "CPM"
+                  },
+                  "metrics": [
+                    "service_instance_cpm"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 0,
+                  "y": 13,
+                  "w": 6,
+                  "h": 13,
+                  "i": "10",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Database Connection Pool"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {},
+                  "metrics": [
+                    "meter_datasource"
+                  ],
+                  "metricTypes": [
+                    "readLabeledMetricsValues"
+                  ],
+                  "moved": false
+                }
+              ]
+            },
+            {
+              "name": "Trace",
+              "children": [
+                {
+                  "x": 0,
+                  "y": 0,
+                  "w": 24,
+                  "h": 49,
+                  "i": "0",
+                  "type": "Trace",
+                  "widget": {
+                    "title": "Title"
+                  },
+                  "graph": {},
+                  "standard": {},
+                  "metrics": [
+                    ""
+                  ],
+                  "metricTypes": [
+                    ""
+                  ],
+                  "moved": false
+                }
+              ]
+            },
+            {
+              "name": "Log",
+              "children": [
+                {
+                  "x": 0,
+                  "y": 0,
+                  "w": 24,
+                  "h": 49,
+                  "i": "0",
+                  "type": "Log",
+                  "widget": {
+                    "title": "Title"
+                  },
+                  "graph": {},
+                  "standard": {},
+                  "metrics": [
+                    ""
+                  ],
+                  "metricTypes": [
+                    ""
+                  ],
+                  "moved": false
+                }
+              ]
+            },
+            {
+              "name": "JVM",
+              "children": [
+                {
+                  "x": 6,
+                  "y": 0,
+                  "w": 6,
+                  "h": 13,
+                  "i": "5",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "JVM Memory (Java Service)"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {
+                    "unit": "MB",
+                    "divide": "1048576"
+                  },
+                  "metrics": [
+                    "instance_jvm_memory_noheap_max",
+                    "instance_jvm_memory_noheap",
+                    "instance_jvm_memory_heap",
+                    "instance_jvm_memory_heap_max"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues",
+                    "readMetricsValues",
+                    "readMetricsValues",
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 18,
+                  "y": 13,
+                  "w": 6,
+                  "h": 13,
+                  "i": "16",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Thread Pool"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {},
+                  "metrics": [
+                    "meter_thread_pool"
+                  ],
+                  "metricTypes": [
+                    "readLabeledMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 0,
+                  "y": 13,
+                  "w": 6,
+                  "h": 13,
+                  "i": "12",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "JVM Thread Count"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {},
+                  "metrics": [
+                    "instance_jvm_thread_live_count",
+                    "instance_jvm_thread_daemon_count",
+                    "instance_jvm_thread_peak_count"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues",
+                    "readMetricsValues",
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 6,
+                  "y": 13,
+                  "w": 6,
+                  "h": 13,
+                  "i": "13",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "JVM Thread State Count"
+                  },
+                  "graph": {
+                    "type": "Bar",
+                    "showBackground": true
+                  },
+                  "standard": {},
+                  "metrics": [
+                    "instance_jvm_thread_timed_waiting_state_thread_count",
+                    "instance_jvm_thread_blocked_state_thread_count",
+                    "instance_jvm_thread_waiting_state_thread_count",
+                    "instance_jvm_thread_runnable_state_thread_count"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues",
+                    "readMetricsValues",
+                    "readMetricsValues",
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 0,
+                  "y": 0,
+                  "w": 6,
+                  "h": 13,
+                  "i": "14",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "JVM CPU"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {
+                    "unit": "%"
+                  },
+                  "metrics": [
+                    "instance_jvm_cpu"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 12,
+                  "y": 13,
+                  "w": 6,
+                  "h": 13,
+                  "i": "15",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "JVM Class Count"
+                  },
+                  "graph": {
+                    "type": "Area",
+                    "opacity": 0.4,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {},
+                  "metrics": [
+                    "instance_jvm_class_loaded_class_count",
+                    "instance_jvm_class_total_loaded_class_count",
+                    "instance_jvm_class_total_unloaded_class_count"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues",
+                    "readMetricsValues",
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 12,
+                  "y": 0,
+                  "w": 6,
+                  "h": 13,
+                  "i": "6",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "JVM GC Time"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {
+                    "unit": "ms"
+                  },
+                  "metrics": [
+                    "instance_jvm_young_gc_time",
+                    "instance_jvm_old_gc_time",
+                    "instance_jvm_normal_gc_time"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues",
+                    "readMetricsValues",
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 18,
+                  "y": 0,
+                  "w": 6,
+                  "h": 13,
+                  "i": "7",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "JVM GC Count"
+                  },
+                  "graph": {
+                    "type": "Bar",
+                    "showBackground": true
+                  },
+                  "standard": {},
+                  "metrics": [
+                    "instance_jvm_young_gc_count",
+                    "instance_jvm_old_gc_count",
+                    "instance_jvm_normal_gc_count"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues",
+                    "readMetricsValues",
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                }
+              ]
+            },
+            {
+              "name": ".NET",
+              "children": [
+                {
+                  "x": 18,
+                  "y": 0,
+                  "w": 6,
+                  "h": 13,
+                  "i": "4",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "CLR Thread"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {},
+                  "metrics": [
+                    "instance_clr_available_worker_threads",
+                    "instance_clr_available_completion_port_threads",
+                    "instance_clr_max_completion_port_threads"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues",
+                    "readMetricsValues",
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 12,
+                  "y": 0,
+                  "w": 6,
+                  "h": 13,
+                  "i": "8",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "CLR Heap Memory"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {
+                    "unit": "MB",
+                    "divide": "1048576"
+                  },
+                  "metrics": [
+                    "instance_clr_heap_memory"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 6,
+                  "y": 0,
+                  "w": 6,
+                  "h": 13,
+                  "i": "9",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "CLR GC"
+                  },
+                  "graph": {
+                    "type": "Bar",
+                    "showBackground": true
+                  },
+                  "standard": {},
+                  "metrics": [
+                    "instance_clr_gen1_collect_count",
+                    "instance_clr_gen0_collect_count",
+                    "instance_clr_gen2_collect_count"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues",
+                    "readMetricsValues",
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 0,
+                  "y": 0,
+                  "w": 6,
+                  "h": 13,
+                  "i": "11",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "CLR CPU  (.NET Service)"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {
+                    "unit": "%"
+                  },
+                  "metrics": [
+                    "instance_clr_cpu"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                }
+              ]
+            }
+          ],
+          "moved": false
+        }
+      ],
+      "layer": "GENERAL",
+      "entity": "ServiceInstance",
+      "name": "General-Instance",
+      "id": "General-Instance",
+      "isRoot": false
+    }
+  }
+]

oap-server/server-starter/src/main/resources/ui-initialized-templates/general/general-root.json

+/**
+ * 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.
+ */
+
+[
+  {
+    "id": "General-Root",
+    "configuration": {
+      "children": [
+        {
+          "x": 0,
+          "y": 0,
+          "w": 24,
+          "h": 52,
+          "i": "1",
+          "type": "Tab",
+          "widget": {
+            "title": "Title"
+          },
+          "graph": {},
+          "standard": {},
+          "metrics": [
+            ""
+          ],
+          "metricTypes": [
+            ""
+          ],
+          "activedTabIndex": 1,
+          "children": [
+            {
+              "name": "Services",
+              "children": [
+                {
+                  "x": 0,
+                  "y": 0,
+                  "w": 24,
+                  "h": 48,
+                  "i": "0",
+                  "type": "Widget",
+                  "widget": {
+                    "title": ""
+                  },
+                  "graph": {
+                    "type": "ServiceList",
+                    "dashboardName": "General-Service",
+                    "fontSize": 12,
+                    "showXAxis": false,
+                    "showYAxis": false,
+                    "showGroup": true
+                  },
+                  "standard": {},
+                  "metrics": [
+                    "service_cpm"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                }
+              ]
+            },
+            {
+              "name": "Topology",
+              "children": [
+                {
+                  "x": 0,
+                  "y": 0,
+                  "w": 24,
+                  "h": 48,
+                  "i": "0",
+                  "type": "Topology",
+                  "widget": {
+                    "title": "Title"
+                  },
+                  "graph": {
+                    "showDepth": true
+                  },
+                  "standard": {},
+                  "metrics": [
+                    ""
+                  ],
+                  "metricTypes": [
+                    ""
+                  ],
+                  "moved": false,
+                  "linkDashboard": "General-Service-Relation",
+                  "nodeDashboard": [
+                    {
+                      "scope": "Service",
+                      "dashboard": "General-Service"
+                    },
+                    {
+                      "scope": "ServiceInstance",
+                      "dashboard": "General-Instance"
+                    },
+                    {
+                      "scope": "Endpoint",
+                      "dashboard": "General-Endpoint"
+                    }
+                  ],
+                  "linkServerMetrics": [
+                    "service_relation_server_resp_time",
+                    "service_relation_server_cpm"
+                  ],
+                  "linkClientMetrics": [
+                    "service_relation_client_cpm",
+                    "service_relation_client_resp_time"
+                  ],
+                  "nodeMetrics": [],
+                  "legend": []
+                }
+              ]
+            },
+            {
+              "name": "Trace",
+              "children": [
+                {
+                  "x": 0,
+                  "y": 0,
+                  "w": 24,
+                  "h": 49,
+                  "i": "0",
+                  "type": "Trace",
+                  "widget": {
+                    "title": "Title"
+                  },
+                  "graph": {},
+                  "standard": {},
+                  "metrics": [
+                    ""
+                  ],
+                  "metricTypes": [
+                    ""
+                  ],
+                  "moved": false
+                }
+              ]
+            }
+          ],
+          "moved": false
+        }
+      ],
+      "layer": "GENERAL",
+      "entity": "All",
+      "name": "General-Root",
+      "id": "General-Root",
+      "isRoot": true
+    }
+  }
+]

oap-server/server-starter/src/main/resources/ui-initialized-templates/general/general-service-relation.json

+/**
+ * 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.
+ */
+
+[
+  {
+    "id": "General-Service-Relation",
+    "configuration": {
+      "children": [
+        {
+          "x": 0,
+          "y": 0,
+          "w": 24,
+          "h": 52,
+          "i": "0",
+          "type": "Tab",
+          "widget": {
+            "title": "Title"
+          },
+          "graph": {},
+          "standard": {},
+          "metrics": [
+            ""
+          ],
+          "metricTypes": [
+            ""
+          ],
+          "activedTabIndex": 1,
+          "children": [
+            {
+              "name": "Overview",
+              "children": [
+                {
+                  "x": 12,
+                  "y": 24,
+                  "w": 12,
+                  "h": 12,
+                  "i": "0",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Load (Server)"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {
+                    "unit": "CPM - Calls Per Minute"
+                  },
+                  "metrics": [
+                    "service_relation_server_cpm"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 0,
+                  "y": 24,
+                  "w": 12,
+                  "h": 12,
+                  "i": "1",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Successful Rate (Server)"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {
+                    "unit": "%",
+                    "divide": 100
+                  },
+                  "metrics": [
+                    "service_relation_server_call_sla"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 12,
+                  "y": 0,
+                  "w": 12,
+                  "h": 12,
+                  "i": "2",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Response Time Percentile (Server)"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {
+                    "unit": "ms",
+                    "metricLabels": "P50, P75, P90, P95, P99",
+                    "labelsIndex": "0,1,2,3,4"
+                  },
+                  "metrics": [
+                    "service_relation_server_percentile"
+                  ],
+                  "metricTypes": [
+                    "readLabeledMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 0,
+                  "y": 0,
+                  "w": 12,
+                  "h": 12,
+                  "i": "3",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Response Time (Server)"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {
+                    "unit": "ms"
+                  },
+                  "metrics": [
+                    "service_relation_server_resp_time"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 0,
+                  "y": 12,
+                  "w": 12,
+                  "h": 12,
+                  "i": "4",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Response Time (Client)"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {
+                    "unit": "ms"
+                  },
+                  "metrics": [
+                    "service_relation_client_resp_time"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 12,
+                  "y": 12,
+                  "w": 12,
+                  "h": 12,
+                  "i": "5",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Response Time Percentile (Client)"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {
+                    "unit": "ms",
+                    "metricLabels": "P50, P75, P90, P95, P99",
+                    "labelsIndex": "0,1,2,3,4"
+                  },
+                  "metrics": [
+                    "service_relation_client_percentile"
+                  ],
+                  "metricTypes": [
+                    "readLabeledMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 0,
+                  "y": 36,
+                  "w": 12,
+                  "h": 12,
+                  "i": "6",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Successful Rate (Client)"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {
+                    "divide": 100,
+                    "unit": "%",
+                    "metricLabels": "",
+                    "labelsIndex": ""
+                  },
+                  "metrics": [
+                    "service_relation_client_call_sla"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                },
+                {
+                  "x": 12,
+                  "y": 36,
+                  "w": 12,
+                  "h": 12,
+                  "i": "7",
+                  "type": "Widget",
+                  "widget": {
+                    "title": "Load (Client)"
+                  },
+                  "graph": {
+                    "type": "Line",
+                    "step": false,
+                    "smooth": false,
+                    "showSymbol": false,
+                    "showXAxis": true,
+                    "showYAxis": true
+                  },
+                  "standard": {
+                    "divide": 1,
+                    "unit": "CPM - Calls Per Minute",
+                    "metricLabels": "",
+                    "labelsIndex": ""
+                  },
+                  "metrics": [
+                    "service_relation_client_cpm"
+                  ],
+                  "metricTypes": [
+                    "readMetricsValues"
+                  ],
+                  "moved": false
+                }
+              ]
+            },
+            {
+              "name": "Topology",
+              "children": [
+                {
+                  "x": 0,
+                  "y": 0,
+                  "w": 24,
+                  "h": 49,
+                  "i": "0",
+                  "type": "Topology",
+                  "widget": {
+                    "title": "Title"
+                  },
+                  "graph": {
+                    "showDepth": true
+                  },
+                  "standard": {
+                    "divide": 1,
+                    "unit": "CPM - Calls Per Minute",
+                    "metricLabels": "",
+                    "labelsIndex": ""
+                  },
+                  "metrics": [
+                    ""
+                  ],
+                  "metricTypes": [
+                    ""
+                  ],
+                  "moved": false
+                }
+              ]
+            }
+          ],
+          "moved": false
+        }
+      ],
+      "layer": "GENERAL",
+      "entity": "ServiceRelation",
+      "name": "General-Service-Relation",
+      "id": "General-Service-Relation",
+      "isRoot": false
+    }
+  }
+]

oap-server/server-starter/src/main/resources/ui-initialized-templates/istio-dp.yml

-# 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.
-
-templates:
-  - name: "Istio Data Plane"
-    type: "DASHBOARD"
-    configuration: |-
-      [
-        {
-          "name": "Istio Data Plane",
-          "type": "service",
-          "serviceGroup": "istio-dp",
-          "children": [
-            {
-              "name": "Data Plane",
-              "children": [
-                {
-                  "width": "3",
-                  "title": "Heap Memory Used",
-                  "height": 350,
-                  "entityType": "ServiceInstance",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "metricName": "envoy_heap_memory_max_used,envoy_heap_memory_used,envoy_memory_allocated_max,envoy_memory_allocated,envoy_memory_physical_size,envoy_memory_physical_size_max",
-                  "queryMetricType": "readMetricsValues",
-                  "chartType": "ChartLine",
-                  "unit": "MB",
-                  "aggregation": "/",
-                  "aggregationNum": "1048576"
-                },
-                {
-                  "width": "3",
-                  "title": "Connections Used",
-                  "height": 350,
-                  "entityType": "ServiceInstance",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "metricName": "envoy_total_connections_used,envoy_parent_connections_used",
-                  "queryMetricType": "readMetricsValues",
-                  "chartType": "ChartLine"
-                },
-                {
-                  "width": "3",
-                  "title": "Concurrency",
-                  "height": 350,
-                  "entityType": "ServiceInstance",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "metricName": "envoy_worker_threads,envoy_worker_threads_max",
-                  "queryMetricType": "readMetricsValues",
-                  "chartType": "ChartLine"
-                },
-                {
-                  "width": "3",
-                  "title": "Envoy Bug Failure",
-                  "height": 350,
-                  "entityType": "ServiceInstance",
-                  "independentSelector": false,
-                  "metricType": "REGULAR_VALUE",
-                  "metricName": "envoy_bug_failures",
-                  "queryMetricType": "readMetricsValues",
-                  "chartType": "ChartLine"
-                },
-                {
-                  "width": "3",
-                  "title": "Membership Healthy",
-                  "height": 350,
-                  "entityType": "ServiceInstance",
-                  "independentSelector": false,
-                  "metricType": "LABELED_VALUE",
-                  "metricName": "envoy_cluster_membership_healthy",
-                  "queryMetricType": "readLabeledMetricsValues",
-                  "chartType": "ChartLine"
-                },
-                {
-                  "width": "3",
-                  "title": "Upstream Connection Active",
-                  "height": 350,
-                  "entityType": "ServiceInstance",
-                  "independentSelector": false,
-                  "metricType": "LABELED_VALUE",
-                  "metricName": "envoy_cluster_up_cx_active",
-                  "queryMetricType": "readLabeledMetricsValues",
-                  "chartType": "ChartLine"
-                },
-                {
-                  "width": "3",
-                  "title": "Upstream Connection Increase",
-                  "height": 350,
-                  "entityType": "ServiceInstance",
-                  "independentSelector": false,
-                  "metricType": "LABELED_VALUE",
-                  "metricName": "envoy_cluster_up_cx_incr",
-                  "queryMetricType": "readLabeledMetricsValues",
-                  "unit": "Per Minute",
-                  "chartType": "ChartLine"
-                },
-                {
-                  "width": "3",
-                  "title": "Upstream Request Active",
-                  "height": 350,
-                  "entityType": "ServiceInstance",
-                  "independentSelector": false,
-                  "metricType": "LABELED_VALUE",
-                  "metricName": "envoy_cluster_up_rq_active",
-                  "queryMetricType": "readLabeledMetricsValues",
-                  "chartType": "ChartLine"
-                },
-                {
-                  "width": "3",
-                  "title": "Upstream Request Increase",
-                  "height": 350,
-                  "entityType": "ServiceInstance",
-                  "independentSelector": false,
-                  "metricType": "LABELED_VALUE",
-                  "metricName": "envoy_cluster_up_rq_incr",
-                  "queryMetricType": "readLabeledMetricsValues",
-                  "unit": "Per Minute",
-                  "chartType": "ChartLine"
-                },
-                {
-                    "width": "3",
-                    "title": "Upstream Request Pending Active",
-                    "height": 350,
-                    "entityType": "ServiceInstance",
-                    "independentSelector": false,
-                    "metricType": "LABELED_VALUE",
-                    "metricName": "envoy_cluster_up_rq_pending_active",
-                    "queryMetricType": "readLabeledMetricsValues",
-                    "chartType": "ChartLine"
-                },
-                {
-                  "width": "3",
-                  "title": "LB Healthy Panic Increase",
-                  "height": 350,
-                  "entityType": "ServiceInstance",
-                  "independentSelector": false,
-                  "metricType": "LABELED_VALUE",
-                  "metricName": "envoy_cluster_lb_healthy_panic_incr",
-                  "queryMetricType": "readLabeledMetricsValues",
-                  "unit": "Per Minute",
-                  "chartType": "ChartLine"
-                },
-                {
-                  "width": "3",
-                  "title": "Upstream Connection None Healthy Increase",
-                  "height": 350,
-                  "entityType": "ServiceInstance",
-                  "independentSelector": false,
-                  "metricType": "LABELED_VALUE",
-                  "metricName": "envoy_cluster_up_cx_none_healthy_incr",
-                  "queryMetricType": "readLabeledMetricsValues",
-                  "unit": "Per Minute",
-                  "chartType": "ChartLine"
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    activated: true
-    disabled: false

oap-server/server-core/src/test/java/org/apache/skywalking/oap/server/core/management/ui/template/UITemplateInitializerTest.java → oap-server/server-starter/src/main/resources/ui-initialized-templates/k8s/k8s-root.json

-/*
+/**
  * 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.
@@ -6,24 +6,53 @@
  * (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
+ *      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.
- *
  */
 
-package org.apache.skywalking.oap.server.core.management.ui.template;
-
-import java.io.FileNotFoundException;
-import org.junit.Test;
-
-public class UITemplateInitializerTest {
-    @Test
-    public void testReadFile() throws FileNotFoundException {
-        //Todo: implement later when new template file ready
+[
+  {
+    "id": "K8S-Root",
+    "configuration": {
+      "children": [
+        {
+          "x": 0,
+          "y": 0,
+          "w": 24,
+          "h": 52,
+          "i": "0",
+          "type": "Widget",
+          "widget": {
+            "title": ""
+          },
+          "graph": {
+            "type": "ServiceList",
+            "dashboardName": "K8S-Cluster",
+            "fontSize": 12,
+            "showXAxis": false,
+            "showYAxis": false,
+            "showGroup": true
+          },
+          "standard": {},
+          "metrics": [
+            ""
+          ],
+          "metricTypes": [
+            ""
+          ],
+          "moved": false
+        }
+      ],
+      "layer": "K8S",
+      "entity": "All",
+      "name": "K8S-Root",
+      "isRoot": true,
+      "id": "K8S-Root"
     }
-}
+  }
+]

skywalking-ui @ 355fe215

-Subproject commit 2167b4afd563ba201fd805f41caa2a6504ddccc7
+Subproject commit 355fe215a3b973bc67d6b2f316e7f336dada3a3e