From 86ba4258c1316e0b0b4a51ac618818a80080114a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E6=99=9F=20Wu=20Sheng?= Date: Mon, 19 Oct 2020 23:13:01 +0800 Subject: [PATCH] Add browser performance dashboard. (#5686) * Add browser performance dashboard. * Fix file header missing. * Make sure the templates in A-Za-z --- docs/en/setup/README.md | 6 + .../ui-initialized-templates/browser.yml | 366 ++++++++++++++++++ .../template/UITemplateManagementService.java | 12 +- skywalking-ui | 2 +- 4 files changed, 382 insertions(+), 4 deletions(-) create mode 100644 oap-server/server-bootstrap/src/main/resources/ui-initialized-templates/browser.yml diff --git a/docs/en/setup/README.md b/docs/en/setup/README.md index 5d189e5a89..cedf8e5a3b 100644 --- a/docs/en/setup/README.md +++ b/docs/en/setup/README.md @@ -31,6 +31,12 @@ You can go to their project repositories for additional info about guides and re - [SkyAPM GO2Sky](https://github.com/SkyAPM/go2sky). See GO2Sky project document for more details. +## Browser Monitoring +[Apache SkyWalking Client JS](https://github.com/apache/skywalking-client-js). Support collecting metrics and error logs +for the Browser or JavaScript based mobile app. + +Note, make sure the [`receiver-browser`](backend/backend-receivers.md) has been opened, default is **ON** since 8.2.0. + ## Service Mesh - Istio diff --git a/oap-server/server-bootstrap/src/main/resources/ui-initialized-templates/browser.yml b/oap-server/server-bootstrap/src/main/resources/ui-initialized-templates/browser.yml new file mode 100644 index 0000000000..26cc902973 --- /dev/null +++ b/oap-server/server-bootstrap/src/main/resources/ui-initialized-templates/browser.yml @@ -0,0 +1,366 @@ +# 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 diff --git a/oap-server/server-core/src/main/java/org/apache/skywalking/oap/server/core/management/ui/template/UITemplateManagementService.java b/oap-server/server-core/src/main/java/org/apache/skywalking/oap/server/core/management/ui/template/UITemplateManagementService.java index 63e4620263..27d6d478b6 100644 --- a/oap-server/server-core/src/main/java/org/apache/skywalking/oap/server/core/management/ui/template/UITemplateManagementService.java +++ b/oap-server/server-core/src/main/java/org/apache/skywalking/oap/server/core/management/ui/template/UITemplateManagementService.java @@ -19,6 +19,8 @@ package org.apache.skywalking.oap.server.core.management.ui.template; import java.io.IOException; +import java.util.Collections; +import java.util.Comparator; import java.util.List; import lombok.RequiredArgsConstructor; import org.apache.skywalking.oap.server.core.query.input.DashboardSetting; @@ -37,14 +39,18 @@ public class UITemplateManagementService implements Service { private UITemplateManagementDAO getUITemplateManagementDAO() { if (uiTemplateManagementDAO == null) { this.uiTemplateManagementDAO = moduleManager.find(StorageModule.NAME) - .provider() - .getService(UITemplateManagementDAO.class); + .provider() + .getService(UITemplateManagementDAO.class); } return uiTemplateManagementDAO; } public List getAllTemplates(Boolean includingDisabled) throws IOException { - return getUITemplateManagementDAO().getAllTemplates(includingDisabled); + final List allTemplates = + getUITemplateManagementDAO().getAllTemplates(includingDisabled); + // Make sure the template in A-Za-z + Collections.sort(allTemplates, Comparator.comparing(DashboardConfiguration::getName)); + return allTemplates; } public TemplateChangeStatus addTemplate(DashboardSetting setting) throws IOException { diff --git a/skywalking-ui b/skywalking-ui index f26e57b3bd..00bf514e7a 160000 --- a/skywalking-ui +++ b/skywalking-ui @@ -1 +1 @@ -Subproject commit f26e57b3bd486d29573c047ab5d1bc08bc7233a7 +Subproject commit 00bf514e7abcd7c4933df5dae10a8d261969728e -- GitLab