Skip to content

[RUM] General UI improvements #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shahzad31 merged 1 commit into from
Jun 18, 2020
Merged

[RUM] General UI improvements #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand All @@ -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) ?? '-'}
Expand Down
3 changes: 1 addition & 2 deletions x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 1 addition & 2 deletions x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
42 changes: 31 additions & 11 deletions x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
</>
Expand Down
6 changes: 2 additions & 4 deletions x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -32,9 +32,7 @@ export function RumOverview() {
<LocalUIFilters {...localUIFiltersConfig} showCount={true} />
</EuiFlexItem>
<EuiFlexItem grow={7}>
<EuiPanel>
<RumDashboard />
</EuiPanel>
<RumDashboard />
</EuiFlexItem>
</EuiFlexGroup>
</>
Expand Down