Merge pull request #2 from formgeist/client-metrics-ui-fixes

[RUM] General UI improvements
shahzad31 · Jun 18, 2020 · 0733c7c · 0733c7c
2 parents 9529d76 + 20c779e
commit 0733c7c
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 24 deletions.
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
@@ -6,7 +6,7 @@
 // @flow
 import * as React from 'react';
 import styled from 'styled-components';
-import { EuiFlexGroup, EuiFlexItem, EuiStat } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiStat, EuiTitle } from '@elastic/eui';
 import { useFetcher } from '../../../../hooks/useFetcher';
 import { useUrlParams } from '../../../../hooks/useUrlParams';
 import { BackEndLabel, FrontEndLabel, PageViewsLabel } from '../translations';
@@ -23,7 +23,7 @@ export const formatBigValue = (val?: number | null, fixed?: number): string => {
 };
 
 const ClFlexGroup = styled(EuiFlexGroup)`
-  flex-direction: column;
+  flex-direction: row;
   @media only screen and (max-width: 768px) {
     flex-direction: row;
     justify-content: space-between;
@@ -49,25 +49,27 @@ export const ClientMetrics = () => {
     [start, end, uiFilters]
   );
 
+  const STAT_STYLE = { width: '240px' };
+
   return (
     <ClFlexGroup responsive={false}>
-      <EuiFlexItem grow={false}>
+      <EuiFlexItem grow={false} style={STAT_STYLE}>
         <EuiStat
           titleSize="s"
           title={(data?.backEnd?.value?.toFixed(2) ?? '-') + ' sec'}
           description={BackEndLabel}
           isLoading={status !== 'success'}
         />
       </EuiFlexItem>
-      <EuiFlexItem grow={false}>
+      <EuiFlexItem grow={false} style={STAT_STYLE}>
         <EuiStat
           titleSize="s"
           title={(data?.frontEnd?.value?.toFixed(2) ?? '-') + ' sec'}
           description={FrontEndLabel}
           isLoading={status !== 'success'}
         />
       </EuiFlexItem>
-      <EuiFlexItem grow={false}>
+      <EuiFlexItem grow={false} style={STAT_STYLE}>
         <EuiStat
           titleSize="s"
           title={formatBigValue(data?.pageViews?.value, 2) ?? '-'}

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
@@ -94,10 +94,9 @@ export const PageLoadDistribution = () => {
 
   return (
     <div>
-      <EuiSpacer size="m" />
       <EuiFlexGroup responsive={false}>
         <EuiFlexItem>
-          <EuiTitle size="s">
+          <EuiTitle size="xs">
             <h3>{PageLoadDistLabel}</h3>
           </EuiTitle>
         </EuiFlexItem>

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
@@ -72,8 +72,7 @@ export const PageViewsTrend = () => {
 
   return (
     <div>
-      <EuiSpacer size="l" />
-      <EuiTitle size="s">
+      <EuiTitle size="xs">
         <h3>{PageViewsLabel}</h3>
       </EuiTitle>
       <ChartWrapper loading={status !== 'success'} height="200px">

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
@@ -4,7 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiSpacer } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+  EuiSpacer,
+  EuiPanel,
+} from '@elastic/eui';
 import React from 'react';
 import { ClientMetrics } from './ClientMetrics';
 import { PageViewsTrend } from './PageViewsTrend';
@@ -26,18 +32,32 @@ export function RumDashboard() {
   return (
     <>
       <EuiTitle>
-        <h1>{getWhatIsGoingOnLabel(environmentLabel)}</h1>
+        <h2>{getWhatIsGoingOnLabel(environmentLabel)}</h2>
       </EuiTitle>
-      <EuiSpacer size="l" />
-      <EuiFlexGroup justifyContent="spaceBetween">
-        <EuiFlexItem grow={1} data-cy={`client-metrics`}>
-          <ClientMetrics />
+      <EuiSpacer />
+      <EuiFlexGroup direction="column" gutterSize="s">
+        <EuiFlexItem>
+          <EuiPanel>
+            <EuiFlexGroup justifyContent="spaceBetween">
+              <EuiFlexItem grow={1} data-cy={`client-metrics`}>
+                <EuiTitle size="xs">
+                  <h3>Page load times</h3>
+                </EuiTitle>
+                <EuiSpacer size="s" />
+                <ClientMetrics />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPanel>
         </EuiFlexItem>
-        <EuiFlexItem grow={3}>
-          <PageLoadDistribution />
-          <EuiSpacer size="xxl" />
-          <PageViewsTrend />
-          <EuiSpacer size="xxl" />
+        <EuiFlexItem>
+          <EuiPanel>
+            <EuiFlexGroup justifyContent="spaceBetween">
+              <EuiFlexItem grow={3}>
+                <PageLoadDistribution />
+                <PageViewsTrend />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPanel>
         </EuiFlexItem>
       </EuiFlexGroup>
     </>

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import { useTrackPageview } from '../../../../../observability/public';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
@@ -32,9 +32,7 @@ export function RumOverview() {
           <LocalUIFilters {...localUIFiltersConfig} showCount={true} />
         </EuiFlexItem>
         <EuiFlexItem grow={7}>
-          <EuiPanel>
-            <RumDashboard />
-          </EuiPanel>
+          <RumDashboard />
         </EuiFlexItem>
       </EuiFlexGroup>
     </>