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

[Infrastructure UI] Fix: Metrics explorer padding issue (#149609)

Browse source 
Closes #149537

## Summary

This PR will fix the padding issue in metrics explorer. I tried to
investigate what caused the issue and couldn't find any lead in the
`toolbar` component history (nothing changed there). I opened our
monitoring cluster and there the only difference I saw was the
`gutterSize` defined in the flex groups and then all flex items inside
have the correct margins.
<img width="1808" alt="image"
src="https://user-images.githubusercontent.com/14139027/214890355-d5d682b9-4716-4ead-858c-0cf3718122bb.png">
I tried to add `gutterSize` to both flex groups but unfortunately, it
didn't work - the flex items didn't get the margins. Probably the way
the `eu` component passes them is changed. I don't see this issue on any
of the other pages inside Infrastructure so it's maybe an edge case.

I got the "inspiration" for this fix from the [euiFlex
docs](https://elastic.github.io/eui/#/layout/flex#flex-grids-and-flex-groups-can-nest)
and by adding the existing 2 groups in another flex group with defined
`gutterSize` and `direction` to get the correct spacing between the
groups. I am also open to other ideas: I decided to still add this fix
and invest more time to investigate the cause of the bug only if this
fix is not a possible solution to the issue.
This commit is contained in:
jennypavlova 2023-01-27 11:48:52 +01:00 • committed by GitHub
parent a17e630641
commit 616630e2ab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 67 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

130
x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/toolbar.tsx
View file

@ -59,71 +59,75 @@ export const MetricsExplorerToolbar = ({
const commonlyUsedRanges = mapKibanaQuickRangesToDatePickerRanges(timepickerQuickRanges);
return (
<>
<EuiFlexGroup alignItems="center">
<EuiFlexItem grow={options.aggregation === 'count' ? 2 : false}>
<MetricsExplorerAggregationPicker
fullWidth
options={options}
onChange={onAggregationChange}
/>
</EuiFlexItem>
{options.aggregation !== 'count' && (
<EuiText size="s" color="subdued">
<FormattedMessage
id="xpack.infra.metricsExplorer.aggregationLabel"
defaultMessage="of"
/>
</EuiText>
)}
{options.aggregation !== 'count' && (
<EuiFlexItem grow={2}>
<MetricsExplorerMetrics
autoFocus={isDefaultOptions}
fields={derivedIndexPattern.fields}
<EuiFlexGroup gutterSize="m" direction="column">
<EuiFlexItem>
<EuiFlexGroup alignItems="center">
<EuiFlexItem grow={options.aggregation === 'count' ? 2 : false}>
<MetricsExplorerAggregationPicker
fullWidth
options={options}
onChange={onMetricsChange}
onChange={onAggregationChange}
/>
</EuiFlexItem>
)}
<EuiText size="s" color="subdued">
<FormattedMessage
id="xpack.infra.metricsExplorer.groupByToolbarLabel"
defaultMessage="graph per"
/>
</EuiText>
<EuiFlexItem grow={1}>
<MetricsExplorerGroupBy
onChange={onGroupByChange}
fields={derivedIndexPattern.fields}
options={options}
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiFlexGroup alignItems="center">
<EuiFlexItem>
<MetricsExplorerKueryBar
derivedIndexPattern={derivedIndexPattern}
onSubmit={onFilterQuerySubmit}
value={options.filterQuery}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<MetricsExplorerChartOptionsComponent
onChange={onChartOptionsChange}
chartOptions={chartOptions}
/>
</EuiFlexItem>
<EuiFlexItem grow={false} style={{ marginRight: 5 }}>
<EuiSuperDatePicker
start={timeRange.from}
end={timeRange.to}
onTimeChange={({ start, end }) => onTimeChange(start, end)}
onRefresh={onRefresh}
commonlyUsedRanges={commonlyUsedRanges}
/>
</EuiFlexItem>
</EuiFlexGroup>
</>
{options.aggregation !== 'count' && (
<EuiText size="s" color="subdued">
<FormattedMessage
id="xpack.infra.metricsExplorer.aggregationLabel"
defaultMessage="of"
/>
</EuiText>
)}
{options.aggregation !== 'count' && (
<EuiFlexItem grow={2}>
<MetricsExplorerMetrics
autoFocus={isDefaultOptions}
fields={derivedIndexPattern.fields}
options={options}
onChange={onMetricsChange}
/>
</EuiFlexItem>
)}
<EuiText size="s" color="subdued">
<FormattedMessage
id="xpack.infra.metricsExplorer.groupByToolbarLabel"
defaultMessage="graph per"
/>
</EuiText>
<EuiFlexItem grow={1}>
<MetricsExplorerGroupBy
onChange={onGroupByChange}
fields={derivedIndexPattern.fields}
options={options}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup alignItems="center">
<EuiFlexItem>
<MetricsExplorerKueryBar
derivedIndexPattern={derivedIndexPattern}
onSubmit={onFilterQuerySubmit}
value={options.filterQuery}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<MetricsExplorerChartOptionsComponent
onChange={onChartOptionsChange}
chartOptions={chartOptions}
/>
</EuiFlexItem>
<EuiFlexItem grow={false} style={{ marginRight: 5 }}>
<EuiSuperDatePicker
start={timeRange.from}
end={timeRange.to}
onTimeChange={({ start, end }) => onTimeChange(start, end)}
onRefresh={onRefresh}
commonlyUsedRanges={commonlyUsedRanges}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
);
};