[UX] Add median/percentile info in titles (#79824)

shahzad31 · kibanamachine · shahzad31 · commit 4e55eb4b51c4 · 2020-10-28T12:18:40.000+01:00
Co-authored-by: Kibana Machine &lt;42973632+kibanamachine@users.noreply.github.com&gt;
diff --git a/x-pack/plugins/apm/e2e/cypress/integration/snapshots.js b/x-pack/plugins/apm/e2e/cypress/integration/snapshots.js
@@ -1,3 +1,3 @@
 module.exports = {
-  "__version": "4.9.0"
+  "__version": "5.5.0"
 }
diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/url_search_filter.ts b/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')
diff --git a/x-pack/plugins/apm/e2e/yarn.lock b/x-pack/plugins/apm/e2e/yarn.lock
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx b/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,10 @@ export function RumDashboard() {
           <EuiFlexGroup justifyContent="spaceBetween">
             <EuiFlexItem grow={1} data-cy={`client-metrics`}>
               <EuiTitle size="xs">
-                <h3>{I18LABELS.pageLoadDuration}</h3>
+                <h3>
+                  {I18LABELS.pageLoadDuration} (
+                  {getPercentileLabel(percentile!)})
+                </h3>
               </EuiTitle>
               <EuiSpacer size="s" />
               <ClientMetrics />
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx b/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}>
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/index.tsx b/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);
 
@@ -104,12 +105,17 @@ export function URLSearch({ onChange: onFilterChange }: Props) {
     setCheckedUrls(clickedItems.map((item) => item.url));
   };
 
+  const percTitle = 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,
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/index.tsx b/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,10 @@ 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} ({getPercentileLabel(percentile!)})
+            </h3>
           </EuiTitle>
           <EuiSpacer size="s" />
           <KeyUXMetrics data={data} loading={status !== 'success'} />
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/translations.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/translations.ts
@@ -5,6 +5,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { I18LABELS } from '../translations';
 
 export const DATA_UNDEFINED_LABEL = i18n.translate(
   'xpack.apm.rum.coreVitals.dataUndefined',
@@ -41,3 +42,14 @@ export const SUM_LONG_TASKS = i18n.translate(
     defaultMessage: 'Total long tasks duration',
   }
 );
+
+export const getPercentileLabel = (value: number) => {
+  if (value === 50) return I18LABELS.median;
+
+  return i18n.translate('xpack.apm.ux.percentiles.label', {
+    defaultMessage: '{value}th Perc.',
+    values: {
+      value,
+    },
+  });
+};
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts b/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',
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -5048,7 +5048,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": "時間がかかるタスクの合計時間",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -5052,7 +5052,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": "长期任务总持续时间",

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`module.exports = {`
`2`		`- "__version": "4.9.0"`
	`2`	`+ "__version": "5.5.0"`
`3`	`3`	`}`
Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,7 @@ export function RumHome() {`
`30`	`30`	`wrap`
`31`	`31`	`style={{ flexWrap: 'wrap-reverse' }}`
`32`	`32`	`justifyContent="flexEnd"`
	`33`	`+ gutterSize="s"`
`33`	`34`	`>`
`34`	`35`	`<MainFilters />`
`35`	`36`	`<EuiFlexItem grow={false}>`