[RUM Dashboard] Rum design improvement (#74946)

* craete new path for client side monitoring

* update

* update app

* fix i18n

* remove space

* added feature on server

* use lazy load

* update test

* update

* remove csm serve file

* update test

* added design improvements

* imrpove design

* fix types

* rervet conflict screw up

* revert

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

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

@@ -30,6 +30,7 @@ import { history } from '../../../../utils/history';
 import { fromQuery, toQuery } from '../../../shared/Links/url_helpers';
 import { ChartWrapper } from '../ChartWrapper';
 import { useUiSetting$ } from '../../../../../../../../src/plugins/kibana_react/public';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
 
 interface Props {
   data?: Array<Record<string, number | null>>;
@@ -37,7 +38,15 @@ interface Props {
 }
 
 export function PageViewsChart({ data, loading }: Props) {
-  const formatter = timeFormatter(niceTimeFormatByDay(2));
+  const { urlParams } = useUrlParams();
+
+  const { start, end } = urlParams;
+  const diffInDays = moment(new Date(end as string)).diff(
+    moment(new Date(start as string)),
+    'day'
+  );
+
+  const formatter = timeFormatter(niceTimeFormatByDay(diffInDays > 1 ? 2 : 1));
 
   const onBrushEnd: BrushEndListener = ({ x }) => {
     if (!x) {
@@ -91,18 +100,21 @@ export function PageViewsChart({ data, loading }: Props) {
             }
             showLegend
             onBrushEnd={onBrushEnd}
+            xDomain={{
+              min: new Date(start as string).valueOf(),
+              max: new Date(end as string).valueOf(),
+            }}
           />
           <Axis
             id="date_time"
             position={Position.Bottom}
-            title={I18LABELS.dateTime}
             tickFormat={formatter}
           />
           <Axis
             id="page_views"
             title={I18LABELS.pageViews}
             position={Position.Left}
-            tickFormat={(d) => numeral(d).format('0.0 a')}
+            tickFormat={(d) => numeral(d).format('0a')}
           />
           <BarSeries
             id={I18LABELS.pageViews}

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

@@ -46,7 +46,9 @@ export function ClientMetrics() {
       <EuiFlexItem grow={false} style={STAT_STYLE}>
         <EuiStat
           titleSize="s"
-          title={(data?.backEnd?.value?.toFixed(2) ?? '-') + ' sec'}
+          title={
+            (((data?.backEnd?.value ?? 0) * 1000).toFixed(0) ?? '-') + ' ms'
+          }
           description={I18LABELS.backEnd}
           isLoading={status !== 'success'}
         />
@@ -54,7 +56,7 @@ export function ClientMetrics() {
       <EuiFlexItem grow={false} style={STAT_STYLE}>
         <EuiStat
           titleSize="s"
-          title={(data?.frontEnd?.value?.toFixed(2) ?? '-') + ' sec'}
+          title={(data?.frontEnd?.value?.toFixed(2) ?? '-') + ' s'}
           description={I18LABELS.frontEnd}
           isLoading={status !== 'success'}
         />

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

@@ -102,7 +102,7 @@ export function PageLoadDistribution() {
           />
         </EuiFlexItem>
       </EuiFlexGroup>
-      <EuiSpacer size="s" />
+      <EuiSpacer size="m" />
       <PageLoadDistChart
         data={data}
         onPercentileChange={onPercentileChange}

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

@@ -39,6 +39,7 @@ export function RumDashboard() {
           <EuiFlexGroup justifyContent="spaceBetween">
             <EuiFlexItem grow={3}>
               <PageLoadDistribution />
+              <EuiSpacer size="m" />
               <PageViewsTrend />
             </EuiFlexItem>
           </EuiFlexGroup>

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

@@ -16,9 +16,6 @@ export const I18LABELS = {
   pageViews: i18n.translate('xpack.apm.rum.dashboard.pageViews', {
     defaultMessage: 'Page views',
   }),
-  dateTime: i18n.translate('xpack.apm.rum.dashboard.dateTime.label', {
-    defaultMessage: 'Date / Time',
-  }),
   percPageLoaded: i18n.translate('xpack.apm.rum.dashboard.pagesLoaded.label', {
     defaultMessage: 'Pages loaded',
   }),

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

@@ -4909,7 +4909,6 @@
     "xpack.apm.registerTransactionDurationAlertType.variables.serviceName": "サービス名",
     "xpack.apm.registerTransactionDurationAlertType.variables.transactionType": "トランザクションタイプ",
     "xpack.apm.rum.dashboard.backend": "バックエンド",
-    "xpack.apm.rum.dashboard.dateTime.label": "日付/時刻",
     "xpack.apm.rum.dashboard.frontend": "フロントエンド",
     "xpack.apm.rum.dashboard.overall.label": "全体",
     "xpack.apm.rum.dashboard.pageLoadDistribution.label": "ページ読み込み分布",

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

@@ -4911,7 +4911,6 @@
     "xpack.apm.registerTransactionDurationAlertType.variables.serviceName": "服务名称",
     "xpack.apm.registerTransactionDurationAlertType.variables.transactionType": "事务类型",
     "xpack.apm.rum.dashboard.backend": "后端",
-    "xpack.apm.rum.dashboard.dateTime.label": "日期 / 时间",
     "xpack.apm.rum.dashboard.frontend": "前端",
     "xpack.apm.rum.dashboard.overall.label": "总体",
     "xpack.apm.rum.dashboard.pageLoadDistribution.label": "页面加载分布",