github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

Remove resize panels (#79428)

Browse source
This commit is contained in:
Shahzad 2020-10-05 18:16:21 +02:00 • committed by GitHub
parent fd27e5b735
commit 897a609c35
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 37 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

5
x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx
View file

@ -93,10 +93,7 @@ export function PageLoadDistChart({
: EUI_CHARTS_THEME_LIGHT;
return (
<ChartWrapper
loading={loading || breakdownLoading}
height="calc(100% - 72px)"
>
<ChartWrapper loading={loading || breakdownLoading} height="250px">
{(!loading || data) && (
<PageLoadChart>
<Settings

2
x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageViewsChart.tsx
View file

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

2
x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx
View file

@ -50,7 +50,7 @@ export function VisitorBreakdownChart({ loading, options }: Props) {
: EUI_CHARTS_THEME_LIGHT;
return (
<ChartWrapper loading={loading} height="calc(100% - 72px)" maxWidth="430px">
<ChartWrapper loading={loading} height="245px" maxWidth="430px">
<StyleChart>
<Chart>
<Settings

3
x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx
View file

@ -13,7 +13,6 @@ 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;
@ -72,7 +71,7 @@ export function PageLoadDistribution() {
};
return (
<div data-cy="pageLoadDist" style={FULL_HEIGHT}>
<div data-cy="pageLoadDist">
<EuiFlexGroup responsive={false}>
<EuiFlexItem>
<EuiTitle size="xs">

3
x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx
View file

@ -12,7 +12,6 @@ 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();
@ -49,7 +48,7 @@ export function PageViewsTrend() {
);
return (
<div style={FULL_HEIGHT}>
<div>
<EuiFlexGroup responsive={false}>
<EuiFlexItem>
<EuiTitle size="xs">

38
x-pack/plugins/apm/public/components/app/RumDashboard/Panels/PageLoadAndViews.tsx
View file

@ -5,35 +5,23 @@
*/
import React from 'react';
import { EuiPanel, EuiResizableContainer } from '@elastic/eui';
import { FULL_HEIGHT } from '../RumDashboard';
import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
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>
<EuiFlexGroup gutterSize="s" wrap>
<EuiFlexItem style={{ flexBasis: 650 }}>
<EuiPanel>
<PageLoadDistribution />
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem style={{ flexBasis: 650 }}>
<EuiPanel>
<PageViewsTrend />
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
);
}

38
x-pack/plugins/apm/public/components/app/RumDashboard/Panels/VisitorBreakdowns.tsx
View file

@ -5,35 +5,23 @@
*/
import React from 'react';
import { EuiPanel, EuiResizableContainer } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiPanel } 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>
<EuiFlexGroup gutterSize="s" wrap>
<EuiFlexItem style={{ flexBasis: 650 }}>
<EuiPanel>
<VisitorBreakdownMap />
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem style={{ flexBasis: 650 }}>
<EuiPanel>
<VisitorBreakdown />
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
);
}

25
x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
View file

@ -10,7 +10,6 @@ import {
EuiTitle,
EuiSpacer,
EuiPanel,
EuiResizableContainer,
} from '@elastic/eui';
import React from 'react';
import { ClientMetrics } from './ClientMetrics';
@ -21,10 +20,8 @@ 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();
const { isSmall } = useBreakPoints();
return (
<EuiFlexGroup direction={isSmall ? 'row' : 'column'} gutterSize="s">
@ -45,22 +42,10 @@ export function RumDashboard() {
<UXMetrics />
</EuiFlexItem>
<EuiFlexItem>
<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>
<PageLoadAndViews />
</EuiFlexItem>
<EuiFlexItem>
<VisitorBreakdownsPanel />
</EuiFlexItem>
<EuiFlexItem>
<ImpactfulMetrics />

2
x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
View file

@ -88,7 +88,7 @@ export const I18LABELS = {
pageLoadDurationByRegion: i18n.translate(
'xpack.apm.rum.visitorBreakdownMap.pageLoadDurationByRegion',
{
defaultMessage: 'Page load duration by region',
defaultMessage: 'Page load duration by region (avg.)',
}
),
searchByUrl: i18n.translate('xpack.apm.rum.filters.searchByUrl', {