Fix BrowserWebVitalsPerfData clsTime to cls and make it double type. (#13597)

Author: wankai123

apm-protocol/apm-network/src/main/proto

@@ -55,7 +55,7 @@ Input:
   "pagePath": "/index.html",
   "fmpTime": 10, // Deprecated since skywalking-client-js 1.0. This is no longer recommended. Please use the `useWebVitals` instead.
   /* NOTE, Safari does not support all core web vitals, and Firefox does not support `CLS`. */
-  "clsTime": 10,
+  "cls": 0.1,
   "lcpTime": 10,
 }
 ```

docs/en/api/browser-protocol.md

@@ -6,6 +6,7 @@
 
 * KubernetesCoordinator: make self instance return real pod IP address instead of `127.0.0.1`.
 * Enhance the alarm kernel with recovered status notification capability
+* Fix BrowserWebVitalsPerfData `clsTime` to `cls` and make it double type.
 
 #### UI
 * Fix the missing icon in new native trace view.

docs/en/changes/changes.md

@@ -50,7 +50,7 @@ public String getEntityId() {
     private String serviceName;
     private String path;
     private int fmpTime;
-    private int clsTime;
+    private int cls;
     private int lcpTime;
 
     @Override

oap-server/server-core/src/main/java/org/apache/skywalking/oap/server/core/browser/source/BrowserAppWebVitalsPerf.java

@@ -69,7 +69,7 @@ public int getLcpTime() {
         return builder.getLcpTime();
     }
 
-    public int getClsTime() {
-        return builder.getClsTime();
+    public double getCls() {
+        return builder.getCls();
     }
 }

oap-server/server-receiver-plugin/skywalking-browser-receiver-plugin/src/main/java/org/apache/skywalking/oap/server/receiver/browser/provider/parser/performance/decorators/BrowserWebVitalsPerfDataDecorator.java

@@ -49,7 +49,9 @@ public void parse(BrowserWebVitalsPerfDataDecorator decorator) {
         browserAppWebVitalsPerf.setServiceName(namingControl.formatServiceName(decorator.getService()));
         browserAppWebVitalsPerf.setPath(namingControl.formatEndpointName(browserAppWebVitalsPerf.getServiceName(), decorator.getPagePath()));
         browserAppWebVitalsPerf.setFmpTime(decorator.getFmpTime());
-        browserAppWebVitalsPerf.setClsTime(decorator.getClsTime());
+        // CLS values are typically between 0 and 1. Multiplying by 1000 allows storage as an integer
+        // while preserving 3 decimal places of precision. When querying, divide by 1000 to restore the original value.
+        browserAppWebVitalsPerf.setCls((int) Math.round(decorator.getCls() * 1000));
         browserAppWebVitalsPerf.setLcpTime(decorator.getLcpTime());
     }
 

oap-server/server-receiver-plugin/skywalking-browser-receiver-plugin/src/main/java/org/apache/skywalking/oap/server/receiver/browser/provider/parser/performance/listener/BrowserWebVitalsPerfDataAnalysisListener.java

@@ -65,7 +65,7 @@ browser_app_resource_protocol_count = from(BrowserAppResourcePerf.*).labelCount(
 browser_app_resource_type_count = from(BrowserAppResourcePerf.*).labelCount(type);
 
 browser_app_web_vitals_fmp_avg = from(BrowserAppWebVitalsPerf.fmpTime).filter(fmpTime >= 0).longAvg();
-browser_app_web_vitals_cls_avg = from(BrowserAppWebVitalsPerf.clsTime).filter(clsTime >= 0).longAvg();
+browser_app_web_vitals_cls_avg = from(BrowserAppWebVitalsPerf.cls).filter(cls >= 0).longAvg();
 browser_app_web_vitals_lcp_avg = from(BrowserAppWebVitalsPerf.lcpTime).filter(lcpTime >= 0).longAvg();
 
 browser_app_web_interaction_inp_percentile = from(BrowserAppWebInteractionPerf.inpTime).filter(inpTime >= 0).percentile2(10);

oap-server/server-starter/src/main/resources/oal/browser.oal

@@ -741,7 +741,7 @@
                   "i": "12",
                   "type": "Widget",
                   "expressions": [
-                    "browser_app_web_vitals_cls_avg"
+                    "browser_app_web_vitals_cls_avg / 1000"
                   ],
                   "graph": {
                     "type": "Line",
@@ -752,7 +752,7 @@
                     "showYAxis": true
                   },
                   "widget": {
-                    "title": "Web Vitals Cumulative Layout Shift Latency(ms)"
+                    "title": "Web Vitals Cumulative Layout Shift Score"
                   },
                   "associate": [
                     {

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

@@ -70,6 +70,10 @@ cases:
     query: |
       swctl --display yaml --base-url=http://${oap_host}:${oap_12800}/graphql metrics exec \
         --expression=browser_app_page_load_page_avg --service-id dGVzdC11aQ==.1 --endpoint-name index.html
+  - expected: expected/metrics-has-value.yml
+    query: |
+      swctl --display yaml --base-url=http://${oap_host}:${oap_12800}/graphql metrics exec \
+        --expression=browser_app_web_vitals_cls_avg --service-id dGVzdC11aQ==.1 --endpoint-name index.html
   - expected: expected/metrics-has-value.yml
     query: |
       swctl --display yaml --base-url=http://${oap_host}:${oap_12800}/graphql metrics exec \
@@ -84,4 +88,4 @@ cases:
         --expression=browser_app_page_load_page_percentile --service-id dGVzdC11aQ==.1 --endpoint-name index.html
   # dependency service
   - expected: expected/dependency.yml
-    query: swctl --display yaml --base-url=http://${oap_host}:${oap_12800}/graphql dependency service --service-id dGVzdC11aTxicm93c2VyPg==.1
+    query: swctl --display yaml --base-url=http://${oap_host}:${oap_12800}/graphql dependency service --service-name test-ui

test/e2e-v2/cases/browser/browser-cases.yaml

@@ -23,6 +23,7 @@ ARG CLIENT_JS_CODE_URL=https://github.com/apache/skywalking-client-js/archive/${
 WORKDIR /skywalking-client-js
 ADD ${CLIENT_JS_CODE_URL} .
 RUN tar -xf ${CLIENT_JS_CODE} --strip 1 && rm ${CLIENT_JS_CODE}
+ENV NPM_TOKEN=""
 RUN npm run rebuild \
     && npm link