From de978e18df79d6f65f6720bfb6145936463443c1 Mon Sep 17 00:00:00 2001 From: zhang-wei Date: Wed, 6 Apr 2022 14:50:19 +0800 Subject: [PATCH] Add trace of Browser dashboard (#8819) --- .../browser/browser-app.json | 20 + .../browser/browser-page.json | 565 ++++++++++-------- .../browser/browser-version.json | 191 +++--- 3 files changed, 445 insertions(+), 331 deletions(-) diff --git a/oap-server/server-starter/src/main/resources/ui-initialized-templates/browser/browser-app.json b/oap-server/server-starter/src/main/resources/ui-initialized-templates/browser/browser-app.json index 25cdc4d6e7..6648adc502 100644 --- a/oap-server/server-starter/src/main/resources/ui-initialized-templates/browser/browser-app.json +++ b/oap-server/server-starter/src/main/resources/ui-initialized-templates/browser/browser-app.json @@ -334,6 +334,26 @@ ] } ] + }, + { + "name": "Trace", + "children": [ + { + "x": 0, + "y": 0, + "w": 24, + "h": 48, + "i": "0", + "type": "Trace", + "metricTypes": [ + "" + ], + "metrics": [ + "" + ], + "moved": false + } + ] } ], "moved": false diff --git a/oap-server/server-starter/src/main/resources/ui-initialized-templates/browser/browser-page.json b/oap-server/server-starter/src/main/resources/ui-initialized-templates/browser/browser-page.json index 5d008297e4..4b3559e4f3 100644 --- a/oap-server/server-starter/src/main/resources/ui-initialized-templates/browser/browser-page.json +++ b/oap-server/server-starter/src/main/resources/ui-initialized-templates/browser/browser-page.json @@ -20,273 +20,320 @@ "id": "Browser-Page", "configuration": { "children": [ - { - "x": 16, - "y": 30, - "w": 8, - "h": 15, - "i": "0", - "type": "Widget", - "widget": { - "title": "Page FMP Latency (ms)" - }, - "graph": { - "type": "Line", - "step": false, - "smooth": false, - "showSymbol": false, - "showXAxis": true, - "showYAxis": true - }, - "metrics": [ - "browser_app_page_fmp_percentile" - ], - "metricTypes": [ - "readLabeledMetricsValues" - ], - "moved": false, - "metricConfig": [ - { - "key": "P50, P75, P90, P95, P99", - "labelsIndex": "0,1,2,3,4", - "label": "P50, P75, P90, P95, P99" - } - ] - }, - { - "x": 8, - "y": 30, - "w": 8, - "h": 15, - "i": "1", - "type": "Widget", - "widget": { - "title": "Page First Pack Latency (ms)" - }, - "graph": { - "type": "Line", - "step": false, - "smooth": false, - "showSymbol": false, - "showXAxis": true, - "showYAxis": true - }, - "metrics": [ - "browser_app_page_first_pack_percentile" - ], - "metricTypes": [ - "readLabeledMetricsValues" - ], - "moved": false, - "metricConfig": [ - { - "key": "P50, P75, P90, P95, P99", - "labelsIndex": "0,1,2,3,4", - "label": "P50, P75, P90, P95, P99" - } - ] - }, - { - "x": 0, - "y": 15, - "w": 8, - "h": 15, - "i": "2", - "type": "Widget", - "widget": { - "title": "Page FPT Latency (ms)" - }, - "graph": { - "type": "Line", - "step": false, - "smooth": false, - "showSymbol": false, - "showXAxis": true, - "showYAxis": true - }, - "metrics": [ - "browser_app_page_fpt_percentile" - ], - "metricTypes": [ - "readLabeledMetricsValues" - ], - "moved": false, - "metricConfig": [ - { - "key": "P50, P75, P90, P95, P99", - "labelsIndex": "0,1,2,3,4", - "label": "P50, P75, P90, P95, P99" - } - ] - }, - { - "x": 16, - "y": 15, - "w": 8, - "h": 15, - "i": "3", - "type": "Widget", - "widget": { - "title": "Page DOM Ready Latency (ms)" - }, - "graph": { - "type": "Line", - "step": false, - "smooth": false, - "showSymbol": false, - "showXAxis": true, - "showYAxis": true - }, - "metrics": [ - "browser_app_page_dom_ready_percentile" - ], - "metricTypes": [ - "readLabeledMetricsValues" - ], - "moved": false, - "metricConfig": [ - { - "key": "P50, P75, P90, P95, P99", - "labelsIndex": "0,1,2,3,4", - "label": "P50, P75, P90, P95, P99" - } - ] - }, - { - "x": 8, - "y": 15, - "w": 8, - "h": 15, - "i": "4", - "type": "Widget", - "widget": { - "title": "Page TTL Latency (ms)" - }, - "graph": { - "type": "Line", - "step": false, - "smooth": false, - "showSymbol": false, - "showXAxis": true, - "showYAxis": true - }, - "metrics": [ - "browser_app_page_ttl_percentile" - ], - "metricTypes": [ - "readLabeledMetricsValues" - ], - "moved": false, - "metricConfig": [ - { - "key": "P50, P75, P90, P95, P99", - "labelsIndex": "0,1,2,3,4", - "label": "P50, P75, P90, P95, P99" - } - ] - }, - { - "x": 0, - "y": 30, - "w": 8, - "h": 15, - "i": "8", - "type": "Widget", - "widget": { - "title": "Page Load Latency (ms)" - }, - "graph": { - "type": "Line", - "step": false, - "smooth": false, - "showSymbol": false, - "showXAxis": true, - "showYAxis": true - }, - "metrics": [ - "browser_app_page_load_page_percentile" - ], - "metricTypes": [ - "readLabeledMetricsValues" - ], - "moved": false, - "metricConfig": [ - { - "key": "0,1,2,3,4", - "label": "P50, P75, P90, P95, P99", - "labelsIndex": "0,1,2,3,4" - } - ] - }, - { - "x": 12, - "y": 0, - "w": 12, - "h": 15, - "i": "9", - "type": "Widget", - "widget": { - "title": "Page Performance (ms)" - }, - "graph": { - "type": "Line", - "step": false, - "smooth": false, - "showSymbol": false, - "showXAxis": true, - "showYAxis": true - }, - "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": 0, - "w": 12, - "h": 15, - "i": "10", - "type": "Widget", + "w": 24, + "h": 52, + "i": "12", + "type": "Tab", "widget": { - "title": "Page Error Count Layout" - }, - "graph": { - "type": "Bar", - "showBackground": true + "title": "Title" }, + "graph": {}, "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" + "" + ], + "activedTabIndex": 0, + "children": [ + { + "name": "Overview", + "children": [ + { + "x": 16, + "y": 30, + "w": 8, + "h": 15, + "i": "0", + "type": "Widget", + "widget": { + "title": "Page FMP Latency (ms)" + }, + "graph": { + "type": "Line", + "step": false, + "smooth": false, + "showSymbol": false, + "showXAxis": true, + "showYAxis": true + }, + "metrics": [ + "browser_app_page_fmp_percentile" + ], + "metricTypes": [ + "readLabeledMetricsValues" + ], + "moved": false, + "metricConfig": [ + { + "key": "P50, P75, P90, P95, P99", + "labelsIndex": "0,1,2,3,4", + "label": "P50, P75, P90, P95, P99" + } + ] + }, + { + "x": 8, + "y": 30, + "w": 8, + "h": 15, + "i": "1", + "type": "Widget", + "widget": { + "title": "Page First Pack Latency (ms)" + }, + "graph": { + "type": "Line", + "step": false, + "smooth": false, + "showSymbol": false, + "showXAxis": true, + "showYAxis": true + }, + "metrics": [ + "browser_app_page_first_pack_percentile" + ], + "metricTypes": [ + "readLabeledMetricsValues" + ], + "moved": false, + "metricConfig": [ + { + "key": "P50, P75, P90, P95, P99", + "labelsIndex": "0,1,2,3,4", + "label": "P50, P75, P90, P95, P99" + } + ] + }, + { + "x": 0, + "y": 15, + "w": 8, + "h": 15, + "i": "2", + "type": "Widget", + "widget": { + "title": "Page FPT Latency (ms)" + }, + "graph": { + "type": "Line", + "step": false, + "smooth": false, + "showSymbol": false, + "showXAxis": true, + "showYAxis": true + }, + "metrics": [ + "browser_app_page_fpt_percentile" + ], + "metricTypes": [ + "readLabeledMetricsValues" + ], + "moved": false, + "metricConfig": [ + { + "key": "P50, P75, P90, P95, P99", + "labelsIndex": "0,1,2,3,4", + "label": "P50, P75, P90, P95, P99" + } + ] + }, + { + "x": 16, + "y": 15, + "w": 8, + "h": 15, + "i": "3", + "type": "Widget", + "widget": { + "title": "Page DOM Ready Latency (ms)" + }, + "graph": { + "type": "Line", + "step": false, + "smooth": false, + "showSymbol": false, + "showXAxis": true, + "showYAxis": true + }, + "metrics": [ + "browser_app_page_dom_ready_percentile" + ], + "metricTypes": [ + "readLabeledMetricsValues" + ], + "moved": false, + "metricConfig": [ + { + "key": "P50, P75, P90, P95, P99", + "labelsIndex": "0,1,2,3,4", + "label": "P50, P75, P90, P95, P99" + } + ] + }, + { + "x": 8, + "y": 15, + "w": 8, + "h": 15, + "i": "4", + "type": "Widget", + "widget": { + "title": "Page TTL Latency (ms)" + }, + "graph": { + "type": "Line", + "step": false, + "smooth": false, + "showSymbol": false, + "showXAxis": true, + "showYAxis": true + }, + "metrics": [ + "browser_app_page_ttl_percentile" + ], + "metricTypes": [ + "readLabeledMetricsValues" + ], + "moved": false, + "metricConfig": [ + { + "key": "P50, P75, P90, P95, P99", + "labelsIndex": "0,1,2,3,4", + "label": "P50, P75, P90, P95, P99" + } + ] + }, + { + "x": 0, + "y": 30, + "w": 8, + "h": 15, + "i": "8", + "type": "Widget", + "widget": { + "title": "Page Load Latency (ms)" + }, + "graph": { + "type": "Line", + "step": false, + "smooth": false, + "showSymbol": false, + "showXAxis": true, + "showYAxis": true + }, + "metrics": [ + "browser_app_page_load_page_percentile" + ], + "metricTypes": [ + "readLabeledMetricsValues" + ], + "moved": false, + "metricConfig": [ + { + "key": "0,1,2,3,4", + "label": "P50, P75, P90, P95, P99", + "labelsIndex": "0,1,2,3,4" + } + ] + }, + { + "x": 12, + "y": 0, + "w": 12, + "h": 15, + "i": "9", + "type": "Widget", + "widget": { + "title": "Page Performance (ms)" + }, + "graph": { + "type": "Line", + "step": false, + "smooth": false, + "showSymbol": false, + "showXAxis": true, + "showYAxis": true + }, + "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": 0, + "w": 12, + "h": 15, + "i": "10", + "type": "Widget", + "widget": { + "title": "Page Error Count Layout" + }, + "graph": { + "type": "Bar", + "showBackground": true + }, + "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 + } + ] + }, + { + "name": "Trace", + "children": [ + { + "x": 0, + "y": 0, + "w": 24, + "h": 48, + "i": "0", + "type": "Trace", + "metricTypes": [ + "" + ], + "metrics": [ + "" + ], + "moved": false + } + ] + } ], "moved": false } diff --git a/oap-server/server-starter/src/main/resources/ui-initialized-templates/browser/browser-version.json b/oap-server/server-starter/src/main/resources/ui-initialized-templates/browser/browser-version.json index 7fcc1e9056..d5754d2041 100644 --- a/oap-server/server-starter/src/main/resources/ui-initialized-templates/browser/browser-version.json +++ b/oap-server/server-starter/src/main/resources/ui-initialized-templates/browser/browser-version.json @@ -20,87 +20,134 @@ "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 - }, - "metrics": [ - "browser_app_single_version_error_sum" - ], - "metricTypes": [ - "readMetricsValues" - ], - "moved": false, - "metricConfig": [ - { - "calculation": "percentage" - } - ] - }, - { - "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 - }, - "metrics": [ - "browser_app_single_version_error_rate" - ], - "metricTypes": [ - "readMetricsValues" - ], - "moved": false, - "metricConfig": [ - { - "calculation": "percentage" - } - ] - }, { "x": 0, "y": 0, "w": 24, - "h": 12, - "i": "2", - "type": "Widget", + "h": 52, + "i": "12", + "type": "Tab", "widget": { - "title": "Load of The Selected Version (CPM - calls per minute) " - }, - "graph": { - "type": "Line", - "step": false, - "smooth": false, - "showSymbol": false, - "showXAxis": true, - "showYAxis": true + "title": "Title" }, + "graph": {}, "metrics": [ - "browser_app_single_version_pv" + "" ], "metricTypes": [ - "readMetricsValues" + "" + ], + "activedTabIndex": 0, + "children": [ + { + "name": "Overview", + "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 + }, + "metrics": [ + "browser_app_single_version_error_sum" + ], + "metricTypes": [ + "readMetricsValues" + ], + "moved": false, + "metricConfig": [ + { + "calculation": "percentage" + } + ] + }, + { + "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 + }, + "metrics": [ + "browser_app_single_version_error_rate" + ], + "metricTypes": [ + "readMetricsValues" + ], + "moved": false, + "metricConfig": [ + { + "calculation": "percentage" + } + ] + }, + { + "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 + }, + "metrics": [ + "browser_app_single_version_pv" + ], + "metricTypes": [ + "readMetricsValues" + ], + "moved": false + } + ] + }, + { + "name": "Trace", + "children": [ + { + "x": 0, + "y": 0, + "w": 24, + "h": 48, + "i": "0", + "type": "Trace", + "metricTypes": [ + "" + ], + "metrics": [ + "" + ], + "moved": false + } + ] + } ], "moved": false }