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

[ML] Data Frames: Fixes aggregation item overflow. (#37068) (#37165)

Browse source 
Fixes an issue where long field names would overflow the aggregation item of the pivot config list. This fix was already done for the group-by-items, now brought over to aggregations too.
This commit is contained in:
Walter Rafelsberger 2019-05-26 12:04:12 +02:00 • committed by GitHub
parent 64e1f5a4ba
commit 35050f513b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 70 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

1
x-pack/plugins/ml/public/data_frame/_index.scss
View file

@ -1 +1,2 @@
@import 'components/aggregation_list/index';
@import 'components/group_by_list/index';

13
x-pack/plugins/ml/public/data_frame/components/aggregation_list/__snapshots__/agg_label_form.test.tsx.snap generated
View file

@ -4,11 +4,19 @@ exports[`Data Frame: <AggLabelForm /> Date histogram aggregation 1`] = `
<EuiFlexGroup
alignItems="center"
gutterSize="s"
responsive={false}
>
<EuiFlexItem>
the-group-by-agg-name
<EuiFlexItem
className="mlAggregationLabel--text"
>
<span
className="eui-textTruncate"
>
the-group-by-agg-name
</span>
</EuiFlexItem>
<EuiFlexItem
className="mlGroupByLabel--button"
grow={false}
>
<EuiPopover
@ -47,6 +55,7 @@ exports[`Data Frame: <AggLabelForm /> Date histogram aggregation 1`] = `
</EuiPopover>
</EuiFlexItem>
<EuiFlexItem
className="mlGroupByLabel--button"
grow={false}
>
<EuiButtonIcon

32
x-pack/plugins/ml/public/data_frame/components/aggregation_list/__snapshots__/list_form.test.tsx.snap generated
View file

@ -7,24 +7,20 @@ exports[`Data Frame: <AggListForm /> Minimal initialization 1`] = `
hasShadow={false}
paddingSize="s"
>
<EuiFlexGroup>
<EuiFlexItem>
<AggLabelForm
deleteHandler={[Function]}
item={
Object {
"agg": "avg",
"aggName": "the-group-by-agg-name",
"dropDownName": "the-group-by-drop-down-name",
"field": "the-field",
}
}
onChange={[Function]}
options={Object {}}
otherAggNames={Array []}
/>
</EuiFlexItem>
</EuiFlexGroup>
<AggLabelForm
deleteHandler={[Function]}
item={
Object {
"agg": "avg",
"aggName": "the-group-by-agg-name",
"dropDownName": "the-group-by-drop-down-name",
"field": "the-field",
}
}
onChange={[Function]}
options={Object {}}
otherAggNames={Array []}
/>
</EuiPanel>
<EuiSpacer
size="s"

6
x-pack/plugins/ml/public/data_frame/components/aggregation_list/__snapshots__/list_summary.test.tsx.snap generated
View file

@ -7,7 +7,11 @@ exports[`Data Frame: <AggListSummary /> Minimal initialization 1`] = `
hasShadow={false}
paddingSize="s"
>
the-agg
<div
className="eui-textTruncate"
>
the-agg
</div>
</EuiPanel>
<EuiSpacer
size="s"

7
x-pack/plugins/ml/public/data_frame/components/aggregation_list/_aggregation_label_form.scss Normal file
View file

@ -0,0 +1,7 @@
.mlAggregationLabel--button {
width: $euiSizeL;
}
.mlAggregationLabel--text {
min-width: 0;
}

1
x-pack/plugins/ml/public/data_frame/components/aggregation_list/_index.scss Normal file
View file

@ -0,0 +1 @@
@import './aggregation_label_form';

10
x-pack/plugins/ml/public/data_frame/components/aggregation_list/agg_label_form.tsx
View file

@ -37,9 +37,11 @@ export const AggLabelForm: React.SFC<Props> = ({
}
return (
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem>{item.aggName}</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
<EuiFlexItem className="mlAggregationLabel--text">
<span className="eui-textTruncate">{item.aggName}</span>
</EuiFlexItem>
<EuiFlexItem grow={false} className="mlGroupByLabel--button">
<EuiPopover
id="mlFormPopover"
ownFocus
@ -64,7 +66,7 @@ export const AggLabelForm: React.SFC<Props> = ({
/>
</EuiPopover>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexItem grow={false} className="mlGroupByLabel--button">
<EuiButtonIcon
aria-label={i18n.translate('xpack.ml.dataframe.aggLabelForm.deleteItemAriaLabel', {
defaultMessage: 'Delete item',

20
x-pack/plugins/ml/public/data_frame/components/aggregation_list/list_form.tsx
View file

@ -6,7 +6,7 @@
import React, { Fragment } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer } from '@elastic/eui';
import { EuiPanel, EuiSpacer } from '@elastic/eui';
import { AggName, PivotAggsConfig, PivotAggsConfigDict } from '../../common';
@ -28,17 +28,13 @@ export const AggListForm: React.SFC<ListProps> = ({ deleteHandler, list, onChang
return (
<Fragment key={aggName}>
<EuiPanel paddingSize="s">
<EuiFlexGroup>
<EuiFlexItem>
<AggLabelForm
deleteHandler={deleteHandler}
item={list[aggName]}
onChange={item => onChange(aggName, item)}
otherAggNames={otherAggNames}
options={options}
/>
</EuiFlexItem>
</EuiFlexGroup>
<AggLabelForm
deleteHandler={deleteHandler}
item={list[aggName]}
onChange={item => onChange(aggName, item)}
otherAggNames={otherAggNames}
options={options}
/>
</EuiPanel>
{listKeys.length > 0 && <EuiSpacer size="s" />}
</Fragment>

4
x-pack/plugins/ml/public/data_frame/components/aggregation_list/list_summary.tsx
View file

@ -20,7 +20,9 @@ export const AggListSummary: React.SFC<AggListSummaryProps> = ({ list }) => {
<EuiForm>
{aggNames.map((aggName: AggName) => (
<Fragment key={aggName}>
<EuiPanel paddingSize="s">{aggName}</EuiPanel>
<EuiPanel paddingSize="s">
<div className="eui-textTruncate">{aggName}</div>
</EuiPanel>
{aggNames.length > 0 && <EuiSpacer size="s" />}
</Fragment>
))}

10
x-pack/plugins/ml/public/data_frame/components/group_by_list/__snapshots__/group_by_label_form.test.tsx.snap generated
View file

@ -10,7 +10,7 @@ exports[`Data Frame: <GroupByLabelForm /> Date histogram aggregation 1`] = `
className="mlGroupByLabel--text"
>
<span
className="mlGroupByLabel__text"
className="eui-textTruncate"
>
the-group-by-agg-name
</span>
@ -20,7 +20,7 @@ exports[`Data Frame: <GroupByLabelForm /> Date histogram aggregation 1`] = `
grow={false}
>
<EuiTextColor
className="mlGroupByLabel__text"
className="eui-textTruncate"
color="subdued"
>
1m
@ -93,7 +93,7 @@ exports[`Data Frame: <GroupByLabelForm /> Histogram aggregation 1`] = `
className="mlGroupByLabel--text"
>
<span
className="mlGroupByLabel__text"
className="eui-textTruncate"
>
the-group-by-agg-name
</span>
@ -103,7 +103,7 @@ exports[`Data Frame: <GroupByLabelForm /> Histogram aggregation 1`] = `
grow={false}
>
<EuiTextColor
className="mlGroupByLabel__text"
className="eui-textTruncate"
color="subdued"
>
100
@ -176,7 +176,7 @@ exports[`Data Frame: <GroupByLabelForm /> Terms aggregation 1`] = `
className="mlGroupByLabel--text"
>
<span
className="mlGroupByLabel__text"
className="eui-textTruncate"
>
the-group-by-agg-name
</span>

10
x-pack/plugins/ml/public/data_frame/components/group_by_list/__snapshots__/group_by_label_summary.test.tsx.snap generated
View file

@ -10,7 +10,7 @@ exports[`Data Frame: <GroupByLabelSummary /> Date histogram aggregation 1`] = `
className="mlGroupByLabel--text"
>
<span
className="mlGroupByLabel__text"
className="eui-textTruncate"
>
the-options-data-id
</span>
@ -20,7 +20,7 @@ exports[`Data Frame: <GroupByLabelSummary /> Date histogram aggregation 1`] = `
grow={false}
>
<EuiTextColor
className="mlGroupByLabel__text"
className="eui-textTruncate"
color="subdued"
>
1m
@ -39,7 +39,7 @@ exports[`Data Frame: <GroupByLabelSummary /> Histogram aggregation 1`] = `
className="mlGroupByLabel--text"
>
<span
className="mlGroupByLabel__text"
className="eui-textTruncate"
>
the-options-data-id
</span>
@ -49,7 +49,7 @@ exports[`Data Frame: <GroupByLabelSummary /> Histogram aggregation 1`] = `
grow={false}
>
<EuiTextColor
className="mlGroupByLabel__text"
className="eui-textTruncate"
color="subdued"
>
100
@ -68,7 +68,7 @@ exports[`Data Frame: <GroupByLabelSummary /> Terms aggregation 1`] = `
className="mlGroupByLabel--text"
>
<span
className="mlGroupByLabel__text"
className="eui-textTruncate"
>
the-options-data-id
</span>

6
x-pack/plugins/ml/public/data_frame/components/group_by_list/_group_by_label_form.scss
View file

@ -9,9 +9,3 @@
.mlGroupByLabel--interval {
max-width: 25%;
}
.mlGroupByLabel__text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

4
x-pack/plugins/ml/public/data_frame/components/group_by_list/group_by_label_form.tsx
View file

@ -53,11 +53,11 @@ export const GroupByLabelForm: React.SFC<Props> = ({
return (
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
<EuiFlexItem className="mlGroupByLabel--text">
<span className="mlGroupByLabel__text">{item.aggName}</span>
<span className="eui-textTruncate">{item.aggName}</span>
</EuiFlexItem>
{interval !== undefined && (
<EuiFlexItem grow={false} className="mlGroupByLabel--text mlGroupByLabel--interval">
<EuiTextColor color="subdued" className="mlGroupByLabel__text">
<EuiTextColor color="subdued" className="eui-textTruncate">
{interval}
</EuiTextColor>
</EuiFlexItem>

4
x-pack/plugins/ml/public/data_frame/components/group_by_list/group_by_label_summary.tsx
View file

@ -27,11 +27,11 @@ export const GroupByLabelSummary: React.SFC<Props> = ({ item, optionsDataId }) =
return (
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
<EuiFlexItem className="mlGroupByLabel--text">
<span className="mlGroupByLabel__text">{optionsDataId}</span>
<span className="eui-textTruncate">{optionsDataId}</span>
</EuiFlexItem>
{interval !== undefined && (
<EuiFlexItem grow={false} className="mlGroupByLabel--text mlGroupByLabel--interval">
<EuiTextColor color="subdued" className="mlGroupByLabel__text">
<EuiTextColor color="subdued" className="eui-textTruncate">
{interval}
</EuiTextColor>
</EuiFlexItem>