Skip to content

Commit ae23cd1

Browse files
shahzad31elasticmachine
shahzad31
and
elasticmachine
committed
[UX] Improve page responsive (#78759)
* WIP * add resizeable panel * Improve page responsiveness * Improve page responsiveness * fix types Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
1 parent 9775119 commit ae23cd1

18 files changed

Lines changed: 203 additions & 81 deletions

File tree

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,10 @@ export function PageLoadDistChart({
8989
const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
9090

9191
return (
92-
<ChartWrapper loading={loading || breakdownLoading} height="250px">
92+
<ChartWrapper
93+
loading={loading || breakdownLoading}
94+
height="calc(100% - 72px)"
95+
>
9396
{(!loading || data) && (
9497
<PageLoadChart>
9598
<Settings

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export function PageViewsChart({ data, loading }: Props) {
8484
};
8585

8686
return (
87-
<ChartWrapper loading={loading} height="250px">
87+
<ChartWrapper loading={loading} height="calc(100% - 72px)">
8888
{(!loading || data) && (
8989
<Chart>
9090
<Settings

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
} from '@elastic/eui/dist/eui_charts_theme';
2323
import { useUiSetting$ } from '../../../../../../../../src/plugins/kibana_react/public';
2424
import { ChartWrapper } from '../ChartWrapper';
25+
import { I18LABELS } from '../translations';
2526

2627
const StyleChart = styled.div`
2728
height: 100%;
@@ -49,7 +50,7 @@ export function VisitorBreakdownChart({ loading, options }: Props) {
4950
: EUI_CHARTS_THEME_LIGHT;
5051

5152
return (
52-
<ChartWrapper loading={loading} height="245px" maxWidth="430px">
53+
<ChartWrapper loading={loading} height="calc(100% - 72px)" maxWidth="430px">
5354
<StyleChart>
5455
<Chart>
5556
<Settings
@@ -59,7 +60,9 @@ export function VisitorBreakdownChart({ loading, options }: Props) {
5960
/>
6061
<Partition
6162
id="spec_1"
62-
data={options || []}
63+
data={
64+
options?.length ? options : [{ count: 1, name: I18LABELS.noData }]
65+
}
6366
valueAccessor={(d: Datum) => d.count as number}
6467
valueGetter="percent"
6568
percentFormatter={(d: number) =>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ export function CoreVitals({ data, loading }: Props) {
2525
const { lcp, lcpRanks, fid, fidRanks, cls, clsRanks } = data || {};
2626

2727
return (
28-
<EuiFlexGroup gutterSize="xl" justifyContent={'spaceBetween'}>
29-
<EuiFlexItem>
28+
<EuiFlexGroup gutterSize="xl" justifyContent={'spaceBetween'} wrap>
29+
<EuiFlexItem style={{ flexBasis: 380 }}>
3030
<CoreVitalItem
3131
title={LCP_LABEL}
3232
value={formatToSec(lcp, 'ms')}
@@ -35,7 +35,7 @@ export function CoreVitals({ data, loading }: Props) {
3535
thresholds={CoreVitalsThresholds.LCP}
3636
/>
3737
</EuiFlexItem>
38-
<EuiFlexItem>
38+
<EuiFlexItem style={{ flexBasis: 380 }}>
3939
<CoreVitalItem
4040
title={FID_LABEL}
4141
value={formatToSec(fid, 'ms')}
@@ -44,7 +44,7 @@ export function CoreVitals({ data, loading }: Props) {
4444
thresholds={CoreVitalsThresholds.FID}
4545
/>
4646
</EuiFlexItem>
47-
<EuiFlexItem>
47+
<EuiFlexItem style={{ flexBasis: 380 }}>
4848
<CoreVitalItem
4949
title={CLS_LABEL}
5050
value={cls ?? '0'}

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,11 @@ export function JSErrors() {
8484
});
8585
};
8686

87+
const errorRate =
88+
totalPageViews > 0
89+
? ((data?.totalErrorPages ?? 0) / totalPageViews) * 100
90+
: 0;
91+
8792
return (
8893
<>
8994
<EuiTitle size="xs">
@@ -109,10 +114,7 @@ export function JSErrors() {
109114
title={i18n.translate('xpack.apm.rum.jsErrors.errorRateValue', {
110115
defaultMessage: '{errorRate} %',
111116
values: {
112-
errorRate: (
113-
((data?.totalErrorPages ?? 0) / totalPageViews) *
114-
100
115-
).toFixed(0),
117+
errorRate: errorRate.toFixed(0),
116118
},
117119
})}
118120
description={I18LABELS.errorRate}

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

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ import {
1010
LineAnnotation,
1111
LineAnnotationDatum,
1212
LineAnnotationStyle,
13+
Position,
1314
} from '@elastic/charts';
1415
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
15-
import styled from 'styled-components';
1616
import { EuiToolTip } from '@elastic/eui';
1717

1818
interface Props {
@@ -28,11 +28,6 @@ function generateAnnotationData(
2828
}));
2929
}
3030

31-
const PercentileMarker = styled.span`
32-
position: relative;
33-
bottom: 205px;
34-
`;
35-
3631
export function PercentileAnnotations({ percentiles }: Props) {
3732
const dataValues = generateAnnotationData(percentiles) ?? [];
3833

@@ -66,8 +61,9 @@ export function PercentileAnnotations({ percentiles }: Props) {
6661
dataValues={[annotation]}
6762
style={style}
6863
hideTooltips={true}
64+
markerPosition={Position.Top}
6965
marker={
70-
<PercentileMarker data-cy="percentile-markers">
66+
<span data-cy="percentile-markers">
7167
<EuiToolTip
7268
title={<PercentileTooltip annotation={annotation} />}
7369
content={
@@ -76,7 +72,7 @@ export function PercentileAnnotations({ percentiles }: Props) {
7672
>
7773
<>{annotation.details}th</>
7874
</EuiToolTip>
79-
</PercentileMarker>
75+
</span>
8076
}
8177
/>
8278
))}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { BreakdownFilter } from '../Breakdowns/BreakdownFilter';
1313
import { PageLoadDistChart } from '../Charts/PageLoadDistChart';
1414
import { BreakdownItem } from '../../../../../typings/ui_filters';
1515
import { ResetPercentileZoom } from './ResetPercentileZoom';
16+
import { FULL_HEIGHT } from '../RumDashboard';
1617

1718
export interface PercentileRange {
1819
min?: number | null;
@@ -71,7 +72,7 @@ export function PageLoadDistribution() {
7172
};
7273

7374
return (
74-
<div data-cy="pageLoadDist">
75+
<div data-cy="pageLoadDist" style={FULL_HEIGHT}>
7576
<EuiFlexGroup responsive={false}>
7677
<EuiFlexItem>
7778
<EuiTitle size="xs">

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { I18LABELS } from '../translations';
1212
import { BreakdownFilter } from '../Breakdowns/BreakdownFilter';
1313
import { PageViewsChart } from '../Charts/PageViewsChart';
1414
import { BreakdownItem } from '../../../../../typings/ui_filters';
15+
import { FULL_HEIGHT } from '../RumDashboard';
1516

1617
export function PageViewsTrend() {
1718
const { urlParams, uiFilters } = useUrlParams();
@@ -48,7 +49,7 @@ export function PageViewsTrend() {
4849
);
4950

5051
return (
51-
<div>
52+
<div style={FULL_HEIGHT}>
5253
<EuiFlexGroup responsive={false}>
5354
<EuiFlexItem>
5455
<EuiTitle size="xs">

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
7+
import React from 'react';
8+
import { EuiPanel, EuiResizableContainer } from '@elastic/eui';
9+
import { FULL_HEIGHT } from '../RumDashboard';
10+
import { PageLoadDistribution } from '../PageLoadDistribution';
11+
import { PageViewsTrend } from '../PageViewsTrend';
12+
import { useBreakPoints } from '../hooks/useBreakPoints';
13+
14+
export function PageLoadAndViews() {
15+
const { isLarge } = useBreakPoints();
16+
17+
return (
18+
<EuiResizableContainer
19+
style={FULL_HEIGHT}
20+
direction={isLarge ? 'vertical' : 'horizontal'}
21+
>
22+
{(EuiResizablePanel, EuiResizableButton) => (
23+
<>
24+
<EuiResizablePanel initialSize={50} minSize="20%">
25+
<EuiPanel style={FULL_HEIGHT}>
26+
<PageLoadDistribution />
27+
</EuiPanel>
28+
</EuiResizablePanel>
29+
<EuiResizableButton />
30+
<EuiResizablePanel initialSize={50} minSize="20%">
31+
<EuiPanel style={FULL_HEIGHT}>
32+
<PageViewsTrend />
33+
</EuiPanel>
34+
</EuiResizablePanel>
35+
</>
36+
)}
37+
</EuiResizableContainer>
38+
);
39+
}

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
7+
import React from 'react';
8+
import { EuiPanel, EuiResizableContainer } from '@elastic/eui';
9+
import { VisitorBreakdown } from '../VisitorBreakdown';
10+
import { VisitorBreakdownMap } from '../VisitorBreakdownMap';
11+
import { FULL_HEIGHT } from '../RumDashboard';
12+
import { useBreakPoints } from '../hooks/useBreakPoints';
13+
14+
export function VisitorBreakdownsPanel() {
15+
const { isLarge } = useBreakPoints();
16+
17+
return (
18+
<EuiResizableContainer
19+
style={FULL_HEIGHT}
20+
direction={isLarge ? 'vertical' : 'horizontal'}
21+
>
22+
{(EuiResizablePanel, EuiResizableButton) => (
23+
<>
24+
<EuiResizablePanel initialSize={50} minSize="20%">
25+
<EuiPanel style={FULL_HEIGHT}>
26+
<VisitorBreakdown />
27+
</EuiPanel>
28+
</EuiResizablePanel>
29+
<EuiResizableButton />
30+
<EuiResizablePanel initialSize={50} minSize="20%">
31+
<EuiPanel style={FULL_HEIGHT}>
32+
<VisitorBreakdownMap />
33+
</EuiPanel>
34+
</EuiResizablePanel>
35+
</>
36+
)}
37+
</EuiResizableContainer>
38+
);
39+
}

0 commit comments

Comments
 (0)