[UX] Add median/percentile info in titles

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/url_search_filter.ts

@@ -24,8 +24,8 @@ Then(`it displays top pages in the suggestion popover`, () => {
     listOfUrls.should('have.length', 5);
 
     const actualUrlsText = [
-      'http://opbeans-node:3000/dashboardPage views: 17Page load duration: 109 ms',
-      'http://opbeans-node:3000/ordersPage views: 14Page load duration: 72 ms',
+      'http://opbeans-node:3000/dashboardTotal Page views: 17Page load duration: 109 ms (median)',
+      'http://opbeans-node:3000/ordersTotal Page views: 14Page load duration: 72 ms (median)',
     ];
 
     cy.get('li.euiSelectableListItem')
@@ -55,7 +55,7 @@ Then(`it should filter results based on query`, () => {
     listOfUrls.should('have.length', 1);
 
     const actualUrlsText = [
-      'http://opbeans-node:3000/customersPage views: 10Page load duration: 76 ms',
+      'http://opbeans-node:3000/customersTotal Page views: 10Page load duration: 76 ms (median)',
     ];
 
     cy.get('li.euiSelectableListItem')

x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx

@@ -19,8 +19,13 @@ import { ImpactfulMetrics } from './ImpactfulMetrics';
 import { PageLoadAndViews } from './Panels/PageLoadAndViews';
 import { VisitorBreakdownsPanel } from './Panels/VisitorBreakdowns';
 import { useBreakPoints } from './hooks/useBreakPoints';
+import { getPercentileLabel } from './UXMetrics/translations';
+import { useUrlParams } from '../../../hooks/useUrlParams';
 
 export function RumDashboard() {
+  const {
+    urlParams: { percentile },
+  } = useUrlParams();
   const { isSmall } = useBreakPoints();
 
   return (
@@ -30,7 +35,13 @@ export function RumDashboard() {
           <EuiFlexGroup justifyContent="spaceBetween">
             <EuiFlexItem grow={1} data-cy={`client-metrics`}>
               <EuiTitle size="xs">
-                <h3>{I18LABELS.pageLoadDuration}</h3>
+                <h3>
+                  {I18LABELS.pageLoadDuration} (
+                  {percentile === 50
+                    ? I18LABELS.median
+                    : getPercentileLabel(percentile!)}
+                  )
+                </h3>
               </EuiTitle>
               <EuiSpacer size="s" />
               <ClientMetrics />

x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx

@@ -30,6 +30,7 @@ export function RumHome() {
             wrap
             style={{ flexWrap: 'wrap-reverse' }}
             justifyContent="flexEnd"
+            gutterSize="s"
           >
             <MainFilters />
             <EuiFlexItem grow={false}>

x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/index.tsx

@@ -16,6 +16,7 @@ import { formatToSec } from '../../UXMetrics/KeyUXMetrics';
 import { SelectableUrlList } from './SelectableUrlList';
 import { UrlOption } from './RenderOption';
 import { useUxQuery } from '../../hooks/useUxQuery';
+import { getPercentileLabel } from '../../UXMetrics/translations';
 
 interface Props {
   onChange: (value: string[]) => void;
@@ -26,7 +27,7 @@ export function URLSearch({ onChange: onFilterChange }: Props) {
 
   const { uiFilters, urlParams } = useUrlParams();
 
-  const { searchTerm } = urlParams;
+  const { searchTerm, percentile } = urlParams;
 
   const [popoverIsOpen, setPopoverIsOpen] = useState(false);
 
@@ -100,12 +101,18 @@ export function URLSearch({ onChange: onFilterChange }: Props) {
     setCheckedUrls(clickedItems.map((item) => item.url));
   };
 
+  const percTitle =
+    percentile === 50 ? I18LABELS.median : getPercentileLabel(percentile!);
+
   const items: UrlOption[] = (data?.items ?? []).map((item) => ({
     label: item.url,
     key: item.url,
     meta: [
       I18LABELS.pageViews + ': ' + item.count,
-      I18LABELS.pageLoadDuration + ': ' + formatToSec(item.pld),
+      I18LABELS.pageLoadDuration +
+        ': ' +
+        formatToSec(item.pld) +
+        ` (${percTitle})`,
     ],
     url: item.url,
     checked: checkedUrls?.includes(item.url) ? 'on' : undefined,

x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/index.tsx

@@ -18,8 +18,14 @@ import { KeyUXMetrics } from './KeyUXMetrics';
 import { useFetcher } from '../../../../hooks/useFetcher';
 import { useUxQuery } from '../hooks/useUxQuery';
 import { CoreVitals } from '../../../../../../observability/public';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
+import { getPercentileLabel } from './translations';
 
 export function UXMetrics() {
+  const {
+    urlParams: { percentile },
+  } = useUrlParams();
+
   const uxQuery = useUxQuery();
 
   const { data, status } = useFetcher(
@@ -41,8 +47,14 @@ export function UXMetrics() {
     <EuiPanel>
       <EuiFlexGroup justifyContent="spaceBetween" wrap>
         <EuiFlexItem grow={1} data-cy={`client-metrics`}>
-          <EuiTitle size="s">
-            <h2>{I18LABELS.userExperienceMetrics}</h2>
+          <EuiTitle size="xs">
+            <h3>
+              {I18LABELS.metrics} (
+              {percentile === 50
+                ? I18LABELS.median
+                : getPercentileLabel(percentile!)}
+              )
+            </h3>
           </EuiTitle>
           <EuiSpacer size="s" />
           <KeyUXMetrics data={data} loading={status !== 'success'} />

x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/translations.ts

@@ -41,3 +41,11 @@ export const SUM_LONG_TASKS = i18n.translate(
     defaultMessage: 'Total long tasks duration',
   }
 );
+
+export const getPercentileLabel = (value: number) =>
+  i18n.translate('xpack.apm.ux.percentiles.label', {
+    defaultMessage: '{value}th Perc.',
+    values: {
+      value,
+    },
+  });

x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts

@@ -17,7 +17,7 @@ export const I18LABELS = {
     defaultMessage: 'Frontend',
   }),
   pageViews: i18n.translate('xpack.apm.rum.dashboard.pageViews', {
-    defaultMessage: 'Page views',
+    defaultMessage: 'Total Page views',
   }),
   percPageLoaded: i18n.translate('xpack.apm.rum.dashboard.pagesLoaded.label', {
     defaultMessage: 'Pages loaded',
@@ -79,8 +79,11 @@ export const I18LABELS = {
       defaultMessage: 'Operating system',
     }
   ),
-  userExperienceMetrics: i18n.translate('xpack.apm.rum.userExperienceMetrics', {
-    defaultMessage: 'User experience metrics',
+  metrics: i18n.translate('xpack.apm.ux.metrics', {
+    defaultMessage: 'Metrics',
+  }),
+  median: i18n.translate('xpack.apm.ux.median', {
+    defaultMessage: 'median',
   }),
   avgPageLoadDuration: i18n.translate(
     'xpack.apm.rum.visitorBreakdownMap.avgPageLoadDuration',

x-pack/plugins/translations/translations/ja-JP.json

@@ -5043,7 +5043,6 @@
     "xpack.apm.rum.jsErrors.errorRateValue": "{errorRate} %",
     "xpack.apm.rum.jsErrors.impactedPageLoads": "影響を受けるページ読み込み数",
     "xpack.apm.rum.jsErrors.totalErrors": "合計エラー数",
-    "xpack.apm.rum.userExperienceMetrics": "ユーザーエクスペリエンスメトリック",
     "xpack.apm.rum.uxMetrics.longestLongTasks": "最長タスク時間",
     "xpack.apm.rum.uxMetrics.noOfLongTasks": "時間がかかるタスク数",
     "xpack.apm.rum.uxMetrics.sumLongTasks": "時間がかかるタスクの合計時間",

x-pack/plugins/translations/translations/zh-CN.json

@@ -5047,7 +5047,6 @@
     "xpack.apm.rum.jsErrors.errorRateValue": "{errorRate}%",
     "xpack.apm.rum.jsErrors.impactedPageLoads": "受影响的页面加载",
     "xpack.apm.rum.jsErrors.totalErrors": "错误总数",
-    "xpack.apm.rum.userExperienceMetrics": "用户体验指标",
     "xpack.apm.rum.uxMetrics.longestLongTasks": "长期任务最长持续时间",
     "xpack.apm.rum.uxMetrics.noOfLongTasks": "长期任务数目",
     "xpack.apm.rum.uxMetrics.sumLongTasks": "长期任务总持续时间",