[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>
elastic · Aug 25, 2020 · fec0d51 · fec0d51
1 parent 1257aad
commit fec0d51
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 11 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageViewsChart.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageViewsChart.tsx
@@ -30,14 +30,23 @@ 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>>;
   loading: boolean;
 }
 
 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}

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx
@@ -46,15 +46,17 @@ 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'}
         />
       </EuiFlexItem>
       <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'}
         />

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx b/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}

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx b/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>

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts b/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',
   }),

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/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": "ページ読み込み分布",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/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": "页面加载分布",