[UX] Improve page responsive (elastic#78759)

* WIP * add resizeable panel * Improve page responsiveness * Improve page responsiveness * fix types Co-authored-by: Elastic Machine <[email protected]>
shahzad31 · Oct 1, 2020 · ae23cd1 · ae23cd1
1 parent 9775119
commit ae23cd1
Show file tree

Hide file tree

Showing 18 changed files with 203 additions and 81 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx
@@ -89,7 +89,10 @@ export function PageLoadDistChart({
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
   return (
-    <ChartWrapper loading={loading || breakdownLoading} height="250px">
+    <ChartWrapper
+      loading={loading || breakdownLoading}
+      height="calc(100% - 72px)"
+    >
       {(!loading || data) && (
         <PageLoadChart>
           <Settings

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
@@ -84,7 +84,7 @@ export function PageViewsChart({ data, loading }: Props) {
   };
 
   return (
-    <ChartWrapper loading={loading} height="250px">
+    <ChartWrapper loading={loading} height="calc(100% - 72px)">
       {(!loading || data) && (
         <Chart>
           <Settings

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx
@@ -22,6 +22,7 @@ import {
 } from '@elastic/eui/dist/eui_charts_theme';
 import { useUiSetting$ } from '../../../../../../../../src/plugins/kibana_react/public';
 import { ChartWrapper } from '../ChartWrapper';
+import { I18LABELS } from '../translations';
 
 const StyleChart = styled.div`
   height: 100%;
@@ -49,7 +50,7 @@ export function VisitorBreakdownChart({ loading, options }: Props) {
     : EUI_CHARTS_THEME_LIGHT;
 
   return (
-    <ChartWrapper loading={loading} height="245px" maxWidth="430px">
+    <ChartWrapper loading={loading} height="calc(100% - 72px)" maxWidth="430px">
       <StyleChart>
         <Chart>
           <Settings
@@ -59,7 +60,9 @@ export function VisitorBreakdownChart({ loading, options }: Props) {
           />
           <Partition
             id="spec_1"
-            data={options || []}
+            data={
+              options?.length ? options : [{ count: 1, name: I18LABELS.noData }]
+            }
             valueAccessor={(d: Datum) => d.count as number}
             valueGetter="percent"
             percentFormatter={(d: number) =>

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/index.tsx
@@ -25,8 +25,8 @@ export function CoreVitals({ data, loading }: Props) {
   const { lcp, lcpRanks, fid, fidRanks, cls, clsRanks } = data || {};
 
   return (
-    <EuiFlexGroup gutterSize="xl" justifyContent={'spaceBetween'}>
-      <EuiFlexItem>
+    <EuiFlexGroup gutterSize="xl" justifyContent={'spaceBetween'} wrap>
+      <EuiFlexItem style={{ flexBasis: 380 }}>
         <CoreVitalItem
           title={LCP_LABEL}
           value={formatToSec(lcp, 'ms')}
@@ -35,7 +35,7 @@ export function CoreVitals({ data, loading }: Props) {
           thresholds={CoreVitalsThresholds.LCP}
         />
       </EuiFlexItem>
-      <EuiFlexItem>
+      <EuiFlexItem style={{ flexBasis: 380 }}>
         <CoreVitalItem
           title={FID_LABEL}
           value={formatToSec(fid, 'ms')}
@@ -44,7 +44,7 @@ export function CoreVitals({ data, loading }: Props) {
           thresholds={CoreVitalsThresholds.FID}
         />
       </EuiFlexItem>
-      <EuiFlexItem>
+      <EuiFlexItem style={{ flexBasis: 380 }}>
         <CoreVitalItem
           title={CLS_LABEL}
           value={cls ?? '0'}

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ImpactfulMetrics/JSErrors.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ImpactfulMetrics/JSErrors.tsx
@@ -84,6 +84,11 @@ export function JSErrors() {
     });
   };
 
+  const errorRate =
+    totalPageViews > 0
+      ? ((data?.totalErrorPages ?? 0) / totalPageViews) * 100
+      : 0;
+
   return (
     <>
       <EuiTitle size="xs">
@@ -109,10 +114,7 @@ export function JSErrors() {
             title={i18n.translate('xpack.apm.rum.jsErrors.errorRateValue', {
               defaultMessage: '{errorRate} %',
               values: {
-                errorRate: (
-                  ((data?.totalErrorPages ?? 0) / totalPageViews) *
-                  100
-                ).toFixed(0),
+                errorRate: errorRate.toFixed(0),
               },
             })}
             description={I18LABELS.errorRate}

diff --git a/...ins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx b/...ins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx
@@ -10,9 +10,9 @@ import {
   LineAnnotation,
   LineAnnotationDatum,
   LineAnnotationStyle,
+  Position,
 } from '@elastic/charts';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
-import styled from 'styled-components';
 import { EuiToolTip } from '@elastic/eui';
 
 interface Props {
@@ -28,11 +28,6 @@ function generateAnnotationData(
   }));
 }
 
-const PercentileMarker = styled.span`
-  position: relative;
-  bottom: 205px;
-`;
-
 export function PercentileAnnotations({ percentiles }: Props) {
   const dataValues = generateAnnotationData(percentiles) ?? [];
 
@@ -66,8 +61,9 @@ export function PercentileAnnotations({ percentiles }: Props) {
           dataValues={[annotation]}
           style={style}
           hideTooltips={true}
+          markerPosition={Position.Top}
           marker={
-            <PercentileMarker data-cy="percentile-markers">
+            <span data-cy="percentile-markers">
               <EuiToolTip
                 title={<PercentileTooltip annotation={annotation} />}
                 content={
@@ -76,7 +72,7 @@ export function PercentileAnnotations({ percentiles }: Props) {
               >
                 <>{annotation.details}th</>
               </EuiToolTip>
-            </PercentileMarker>
+            </span>
           }
         />
       ))}

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
@@ -13,6 +13,7 @@ import { BreakdownFilter } from '../Breakdowns/BreakdownFilter';
 import { PageLoadDistChart } from '../Charts/PageLoadDistChart';
 import { BreakdownItem } from '../../../../../typings/ui_filters';
 import { ResetPercentileZoom } from './ResetPercentileZoom';
+import { FULL_HEIGHT } from '../RumDashboard';
 
 export interface PercentileRange {
   min?: number | null;
@@ -71,7 +72,7 @@ export function PageLoadDistribution() {
   };
 
   return (
-    <div data-cy="pageLoadDist">
+    <div data-cy="pageLoadDist" style={FULL_HEIGHT}>
       <EuiFlexGroup responsive={false}>
         <EuiFlexItem>
           <EuiTitle size="xs">

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx
@@ -12,6 +12,7 @@ import { I18LABELS } from '../translations';
 import { BreakdownFilter } from '../Breakdowns/BreakdownFilter';
 import { PageViewsChart } from '../Charts/PageViewsChart';
 import { BreakdownItem } from '../../../../../typings/ui_filters';
+import { FULL_HEIGHT } from '../RumDashboard';
 
 export function PageViewsTrend() {
   const { urlParams, uiFilters } = useUrlParams();
@@ -48,7 +49,7 @@ export function PageViewsTrend() {
   );
 
   return (
-    <div>
+    <div style={FULL_HEIGHT}>
       <EuiFlexGroup responsive={false}>
         <EuiFlexItem>
           <EuiTitle size="xs">

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Panels/PageLoadAndViews.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Panels/PageLoadAndViews.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiPanel, EuiResizableContainer } from '@elastic/eui';
+import { FULL_HEIGHT } from '../RumDashboard';
+import { PageLoadDistribution } from '../PageLoadDistribution';
+import { PageViewsTrend } from '../PageViewsTrend';
+import { useBreakPoints } from '../hooks/useBreakPoints';
+
+export function PageLoadAndViews() {
+  const { isLarge } = useBreakPoints();
+
+  return (
+    <EuiResizableContainer
+      style={FULL_HEIGHT}
+      direction={isLarge ? 'vertical' : 'horizontal'}
+    >
+      {(EuiResizablePanel, EuiResizableButton) => (
+        <>
+          <EuiResizablePanel initialSize={50} minSize="20%">
+            <EuiPanel style={FULL_HEIGHT}>
+              <PageLoadDistribution />
+            </EuiPanel>
+          </EuiResizablePanel>
+          <EuiResizableButton />
+          <EuiResizablePanel initialSize={50} minSize="20%">
+            <EuiPanel style={FULL_HEIGHT}>
+              <PageViewsTrend />
+            </EuiPanel>
+          </EuiResizablePanel>
+        </>
+      )}
+    </EuiResizableContainer>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Panels/VisitorBreakdowns.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Panels/VisitorBreakdowns.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiPanel, EuiResizableContainer } from '@elastic/eui';
+import { VisitorBreakdown } from '../VisitorBreakdown';
+import { VisitorBreakdownMap } from '../VisitorBreakdownMap';
+import { FULL_HEIGHT } from '../RumDashboard';
+import { useBreakPoints } from '../hooks/useBreakPoints';
+
+export function VisitorBreakdownsPanel() {
+  const { isLarge } = useBreakPoints();
+
+  return (
+    <EuiResizableContainer
+      style={FULL_HEIGHT}
+      direction={isLarge ? 'vertical' : 'horizontal'}
+    >
+      {(EuiResizablePanel, EuiResizableButton) => (
+        <>
+          <EuiResizablePanel initialSize={50} minSize="20%">
+            <EuiPanel style={FULL_HEIGHT}>
+              <VisitorBreakdown />
+            </EuiPanel>
+          </EuiResizablePanel>
+          <EuiResizableButton />
+          <EuiResizablePanel initialSize={50} minSize="20%">
+            <EuiPanel style={FULL_HEIGHT}>
+              <VisitorBreakdownMap />
+            </EuiPanel>
+          </EuiResizablePanel>
+        </>
+      )}
+    </EuiResizableContainer>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
@@ -10,20 +10,24 @@ import {
   EuiTitle,
   EuiSpacer,
   EuiPanel,
+  EuiResizableContainer,
 } from '@elastic/eui';
 import React from 'react';
 import { ClientMetrics } from './ClientMetrics';
-import { PageViewsTrend } from './PageViewsTrend';
-import { PageLoadDistribution } from './PageLoadDistribution';
 import { I18LABELS } from './translations';
-import { VisitorBreakdown } from './VisitorBreakdown';
 import { UXMetrics } from './UXMetrics';
-import { VisitorBreakdownMap } from './VisitorBreakdownMap';
 import { ImpactfulMetrics } from './ImpactfulMetrics';
+import { PageLoadAndViews } from './Panels/PageLoadAndViews';
+import { VisitorBreakdownsPanel } from './Panels/VisitorBreakdowns';
+import { useBreakPoints } from './hooks/useBreakPoints';
+
+export const FULL_HEIGHT = { height: '100%' };
 
 export function RumDashboard() {
+  const { isLarge, isSmall } = useBreakPoints();
+
   return (
-    <EuiFlexGroup direction="column" gutterSize="s">
+    <EuiFlexGroup direction={isSmall ? 'row' : 'column'} gutterSize="s">
       <EuiFlexItem>
         <EuiPanel>
           <EuiFlexGroup justifyContent="spaceBetween">
@@ -41,31 +45,22 @@ export function RumDashboard() {
         <UXMetrics />
       </EuiFlexItem>
       <EuiFlexItem>
-        <EuiFlexGroup gutterSize="s" wrap>
-          <EuiFlexItem style={{ flexBasis: 650 }}>
-            <EuiPanel>
-              <PageLoadDistribution />
-            </EuiPanel>
-          </EuiFlexItem>
-          <EuiFlexItem style={{ flexBasis: 650 }}>
-            <EuiPanel>
-              <PageViewsTrend />
-            </EuiPanel>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiSpacer size="s" />
-        <EuiFlexGroup gutterSize="s">
-          <EuiFlexItem grow={3}>
-            <EuiPanel>
-              <VisitorBreakdown />
-            </EuiPanel>
-          </EuiFlexItem>
-          <EuiFlexItem grow={3}>
-            <EuiPanel>
-              <VisitorBreakdownMap />
-            </EuiPanel>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        <EuiResizableContainer
+          style={{ height: isLarge ? '1400px' : '850px' }}
+          direction="vertical"
+        >
+          {(EuiResizablePanel, EuiResizableButton) => (
+            <>
+              <EuiResizablePanel initialSize={40} minSize="40%">
+                <PageLoadAndViews />
+              </EuiResizablePanel>
+              <EuiResizableButton />
+              <EuiResizablePanel initialSize={60} minSize="10%">
+                <VisitorBreakdownsPanel />
+              </EuiResizablePanel>
+            </>
+          )}
+        </EuiResizableContainer>
       </EuiFlexItem>
       <EuiFlexItem>
         <ImpactfulMetrics />

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx
@@ -18,22 +18,20 @@ export const UX_LABEL = i18n.translate('xpack.apm.ux.title', {
 
 export function RumHome() {
   return (
-    <div>
-      <CsmSharedContextProvider>
-        <RumHeader>
-          <EuiFlexGroup alignItems="center">
-            <EuiFlexItem grow={true}>
-              <EuiTitle size="l">
-                <h1>{UX_LABEL}</h1>
-              </EuiTitle>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <UserPercentile />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </RumHeader>
-        <RumOverview />
-      </CsmSharedContextProvider>
-    </div>
+    <CsmSharedContextProvider>
+      <RumHeader>
+        <EuiFlexGroup alignItems="center">
+          <EuiFlexItem grow={true}>
+            <EuiTitle size="l">
+              <h1>{UX_LABEL}</h1>
+            </EuiTitle>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <UserPercentile />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </RumHeader>
+      <RumOverview />
+    </CsmSharedContextProvider>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/KeyUXMetrics.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/KeyUXMetrics.tsx
@@ -57,7 +57,7 @@ export function KeyUXMetrics({ data, loading }: Props) {
 
   // Note: FCP value is in ms unit
   return (
-    <EuiFlexGroup responsive={false}>
+    <EuiFlexGroup wrap>
       <EuiFlexItem grow={false} style={STAT_STYLE}>
         <EuiStat
           titleSize="s"