MM-60285 Add fresh label to channel and team switch metrics (#28100)

* Changed measureAndReport to take an object as parameters

* MM-60285 Add fresh label to channel and team switch metrics

webapp/channels/src/actions/views/rhs.ts

@@ -656,7 +656,11 @@ export function setEditChannelMembers(active: boolean) {
 
 export function measureRhsOpened() {
     return () => {
-        measureAndReport(Measure.RhsLoad, Mark.PostSelected, undefined, true);
+        measureAndReport({
+            name: Measure.RhsLoad,
+            startMark: Mark.PostSelected,
+            canFail: true,
+        });
 
         performance.clearMarks(Mark.PostSelected);
     };

webapp/channels/src/components/post_view/post_list/post_list.tsx

@@ -25,8 +25,24 @@ function markAndMeasureChannelSwitchEnd(fresh = false) {
     mark(Mark.PostListLoaded);
 
     // Send new performance metrics to server
-    const channelSwitch = measureAndReport(Measure.ChannelSwitch, Mark.ChannelLinkClicked, Mark.PostListLoaded, true);
-    const teamSwitch = measureAndReport(Measure.TeamSwitch, Mark.TeamLinkClicked, Mark.PostListLoaded, true);
+    const channelSwitch = measureAndReport({
+        name: Measure.ChannelSwitch,
+        startMark: Mark.ChannelLinkClicked,
+        endMark: Mark.PostListLoaded,
+        labels: {
+            fresh: fresh.toString(),
+        },
+        canFail: true,
+    });
+    const teamSwitch = measureAndReport({
+        name: Measure.TeamSwitch,
+        startMark: Mark.TeamLinkClicked,
+        endMark: Mark.PostListLoaded,
+        labels: {
+            fresh: fresh.toString(),
+        },
+        canFail: true,
+    });
 
     // Send old performance metrics to Rudder
     if (shouldTrackPerformance()) {

webapp/channels/src/components/threading/global_threads/global_threads.tsx

@@ -120,7 +120,11 @@ const GlobalThreads = () => {
 
     useEffect(() => {
         if (!isLoading) {
-            measureAndReport(Measure.GlobalThreadsLoad, Mark.GlobalThreadsLinkClicked, undefined, true);
+            measureAndReport({
+                name: Measure.GlobalThreadsLoad,
+                startMark: Mark.GlobalThreadsLinkClicked,
+                canFail: true,
+            });
             performance.clearMarks(Mark.GlobalThreadsLinkClicked);
         }
     }, [isLoading]);

webapp/channels/src/utils/performance_telemetry/index.ts

@@ -32,21 +32,34 @@ export function markAndReport(name: string): PerformanceMark {
  * If either the start or end mark does not exist, undefined will be returned and, if canFail is false, an error
  * will be logged.
  */
-export function measureAndReport(measureName: string, startMark: string, endMark: string | undefined, canFail = false): PerformanceMeasure | undefined {
+export function measureAndReport({
+    name,
+    startMark,
+    endMark,
+    labels,
+    canFail = false,
+}: {
+    name: string;
+    startMark: string;
+    endMark?: string;
+    labels?: Record<string, string>;
+    canFail?: boolean;
+}): PerformanceMeasure | undefined {
     const options: PerformanceMeasureOptions = {
         start: startMark,
         end: endMark,
         detail: {
+            labels,
             report: true,
         },
     };
 
     try {
-        return performance.measure(measureName, options);
+        return performance.measure(name, options);
     } catch (e) {
         if (!canFail) {
             // eslint-disable-next-line no-console
-            console.error('Unable to measure ' + measureName, e);
+            console.error('Unable to measure ' + name, e);
         }
 
         return undefined;

webapp/channels/src/utils/performance_telemetry/reporter.test.ts

@@ -36,14 +36,26 @@ describe('PerformanceReporter', () => {
         performance.mark('testMarkA');
         performance.mark('testMarkB');
 
-        measureAndReport('testMeasureA', 'testMarkA', 'testMarkB');
+        measureAndReport({
+            name: 'testMeasureA',
+            startMark: 'testMarkA',
+            endMark: 'testMarkB',
+        });
 
         await waitForObservations();
 
         performance.mark('testMarkC');
 
-        measureAndReport('testMeasureB', 'testMarkA', 'testMarkC');
-        measureAndReport('testMeasureC', 'testMarkB', 'testMarkC');
+        measureAndReport({
+            name: 'testMeasureB',
+            startMark: 'testMarkA',
+            endMark: 'testMarkC',
+        });
+        measureAndReport({
+            name: 'testMeasureC',
+            startMark: 'testMarkB',
+            endMark: 'testMarkC',
+        });
 
         await waitForObservations();
 

webapp/channels/src/utils/performance_telemetry/reporter.ts

@@ -169,6 +169,7 @@ export default class PerformanceReporter {
         this.histogramMeasures.push({
             metric: entry.name,
             value: entry.duration,
+            labels: entry.detail.labels,
             timestamp: Date.now(),
         });
     }