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

[Uptime] waterfall improve legend spacing (#92158) (#92691)

Browse source 
Co-authored-by: Shahzad <shahzad.muhammad@elastic.co>
This commit is contained in:
Kibana Machine 2021-02-24 15:39:04 -05:00 • committed by GitHub
parent 3924456b57
commit 7f8b5ac45d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

8
x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/step_detail.tsx
View file

@ -68,16 +68,16 @@ export const StepDetail: React.FC<Props> = ({
}) => {
return (
<>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexGroup justifyContent="spaceBetween" responsive={false} wrap>
<EuiFlexItem>
<EuiFlexGroup alignItems="center">
<EuiFlexGroup alignItems="center" responsive={false}>
<EuiFlexItem grow={false}>
<EuiTitle size="s">
<h1>{stepName}</h1>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup alignItems="center">
<EuiFlexGroup alignItems="center" responsive={false}>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
onClick={handlePreviousStep}
@ -109,7 +109,7 @@ export const StepDetail: React.FC<Props> = ({
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup alignItems="center" justifyContent="flexEnd">
<EuiFlexGroup alignItems="center" justifyContent="flexEnd" responsive={false}>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
onClick={handlePreviousRun}

6
x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_chart_wrapper.tsx
View file

@ -16,7 +16,11 @@ import { WaterfallFlyout } from './waterfall_flyout';
import { WaterfallSidebarItem } from './waterfall_sidebar_item';
export const renderLegendItem: RenderItem<LegendItem> = (item) => {
return <EuiHealth color={item.colour}>{item.name}</EuiHealth>;
return (
<EuiHealth color={item.colour} className="eui-textNoWrap">
{item.name}
</EuiHealth>
);
};
interface Props {

15
x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/legend.tsx
View file

@ -9,18 +9,25 @@ import React from 'react';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { IWaterfallContext } from '../context/waterfall_chart';
import { WaterfallChartProps } from './waterfall_chart';
import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
interface LegendProps {
items: Required<IWaterfallContext>['legendItems'];
render: Required<WaterfallChartProps>['renderLegendItem'];
}
const StyledFlexItem = euiStyled(EuiFlexItem)`
margin-right: ${(props) => props.theme.eui.paddingSizes.m};
max-width: 7%;
min-width: 160px;
`;
export const Legend: React.FC<LegendProps> = ({ items, render }) => {
return (
<EuiFlexGroup gutterSize="none">
{items.map((item, index) => {
return <EuiFlexItem key={index}>{render(item, index)}</EuiFlexItem>;
})}
<EuiFlexGroup gutterSize="s" wrap>
{items.map((item, index) => (
<StyledFlexItem key={index}>{render(item, index)}</StyledFlexItem>
))}
</EuiFlexGroup>
);
};

8
x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_chart.tsx
View file

@ -120,8 +120,12 @@ export const WaterfallChart = ({
</WaterfallChartAxisOnlyContainer>
</WaterfallChartTopContainer>
</WaterfallChartFixedTopContainer>
<WaterfallChartOuterContainer height={height} data-test-subj="waterfallOuterContainer">
<EuiFlexGroup gutterSize="none" responsive={false} ref={chartWrapperDivRef}>
<WaterfallChartOuterContainer
height={height}
data-test-subj="waterfallOuterContainer"
ref={chartWrapperDivRef}
>
<EuiFlexGroup gutterSize="none" responsive={false}>
{shouldRenderSidebar && <Sidebar items={sidebarItems!} render={renderSidebarItem!} />}
<WaterfallChartAxisOnlyContainer