maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[ML] Fix inconsistent padding for long top_values in Data Visualizer & hover color of expanded row (#87937)

Browse source
This commit is contained in:
Quynh Nguyen 2021-01-12 12:57:21 -06:00 committed by GitHub
parent d321950b93
commit a1c2422261
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 28 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/examples_list/examples_list.tsx
View file

@ -6,7 +6,7 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import { EuiListGroup, EuiListGroupItem, EuiSpacer } from '@elastic/eui'; import { EuiListGroup, EuiListGroupItem } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react'; import { FormattedMessage } from '@kbn/i18n/react';
import { ExpandedRowFieldHeader } from '../../../../stats_datagrid/components/expanded_row_field_header'; import { ExpandedRowFieldHeader } from '../../../../stats_datagrid/components/expanded_row_field_header';
@ -46,7 +46,6 @@ export const ExamplesList: FC<Props> = ({ examples }) => {
}} }}
/> />
</ExpandedRowFieldHeader> </ExpandedRowFieldHeader>
<EuiSpacer size="s" />
<EuiListGroup showToolTips={true} maxWidth={'s'} gutterSize={'none'} flush={true}> <EuiListGroup showToolTips={true} maxWidth={'s'} gutterSize={'none'} flush={true}>
{examplesContent} {examplesContent}
</EuiListGroup> </EuiListGroup>

7
x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/top_values/_top_values.scss
View file

@ -1,6 +1,9 @@
.mlFieldDataTopValuesContainer {
padding-top: $euiSizeXS;
}
.mlTopValuesValueLabelContainer { .mlTopValuesValueLabelContainer {
padding-right: $euiSizeM; margin-right: $euiSizeM;
&.mlTopValuesValueLabelContainer--small { &.mlTopValuesValueLabelContainer--small {
width:70px; width:70px;
} }
@ -11,6 +14,6 @@
} }
.mlTopValuesPercentLabelContainer { .mlTopValuesPercentLabelContainer {
padding-left: $euiSizeM; margin-left: $euiSizeM;
width:70px; width:70px;
} }

2
x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/top_values/top_values.tsx
View file

@ -46,7 +46,7 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor, compressed
} = stats; } = stats;
const progressBarMax = isTopValuesSampled === true ? topValuesSampleSize : count; const progressBarMax = isTopValuesSampled === true ? topValuesSampleSize : count;
return ( return (
<div data-test-subj="mlFieldDataTopValues"> <div data-test-subj="mlFieldDataTopValues" className={'mlFieldDataTopValuesContainer'}>
{Array.isArray(topValues) && {Array.isArray(topValues) &&
topValues.map((value: any) => ( topValues.map((value: any) => (
<EuiFlexGroup gutterSize="xs" alignItems="center" key={value.key}> <EuiFlexGroup gutterSize="xs" alignItems="center" key={value.key}>

17
x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/_index.scss
View file

@ -1,3 +1,5 @@
@import "components/field_data_expanded_row/number_content";
.mlDataVisualizerFieldExpandedRow { .mlDataVisualizerFieldExpandedRow {
padding-left: $euiSize * 4; padding-left: $euiSize * 4;
width: 100%; width: 100%;
@ -7,7 +9,9 @@
text-align: left; text-align: left;
color: $euiColorDarkShade; color: $euiColorDarkShade;
font-weight: bold; font-weight: bold;
padding-bottom: $euiSizeS;
} }
.mlFieldDataCard__codeContent { .mlFieldDataCard__codeContent {
@include euiCodeFont; @include euiCodeFont;
} }
@ -16,22 +20,27 @@
.mlDataVisualizer { .mlDataVisualizer {
.euiTableRow > .euiTableRowCell { .euiTableRow > .euiTableRowCell {
border-bottom: 0px; border-bottom: 0px;
border-top: 1px solid $euiColorLightShade; border-top: $euiBorderThin;
} }
.euiTableRow-isExpandedRow { .euiTableRow-isExpandedRow {
.euiTableRowCell{ .euiTableRowCell{
background-color: transparent !important; background-color: $euiColorEmptyShade !important;
border-top: 0px; border-top: 0px;
border-bottom: 1px solid $euiColorLightShade; border-bottom: $euiBorderThin;
&:hover {
background-color: $euiColorEmptyShade !important;
}
} }
} }
.mlDataVisualizerSummaryTable { .mlDataVisualizerSummaryTable {
.euiTableRow > .euiTableRowCell{ .euiTableRow > .euiTableRowCell{
border-bottom: 0px; border-bottom: 0px;
} }
.euiTableHeaderCell {
display: none;
}
} }
} }

1
x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/components/field_data_expanded_row/_index.scss Normal file
View file

@ -0,0 +1 @@
@import "number_content";

5
x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/components/field_data_expanded_row/_number_content.scss Normal file
View file

@ -0,0 +1,5 @@
.mlMetricDistributionChartContainer {
padding-top: $euiSizeXS;
width: 100%;
}

4
x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/components/field_data_expanded_row/number_content.tsx
View file

@ -129,7 +129,7 @@ export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
)} )}
{distribution && ( {distribution && (
<EuiFlexItem data-test-subj={'mlMetricDistribution'}> <EuiFlexItem data-test-subj={'mlMetricDistribution'}>
<EuiFlexItem> <EuiFlexItem grow={false}>
<ExpandedRowFieldHeader> <ExpandedRowFieldHeader>
<FormattedMessage <FormattedMessage
id="xpack.ml.fieldDataCardExpandedRow.numberContent.distributionTitle" id="xpack.ml.fieldDataCardExpandedRow.numberContent.distributionTitle"
@ -138,7 +138,7 @@ export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
</ExpandedRowFieldHeader> </ExpandedRowFieldHeader>
</EuiFlexItem> </EuiFlexItem>
<EuiFlexItem style={{ width: '100%' }}> <EuiFlexItem className={'mlMetricDistributionChartContainer'}>
<MetricDistributionChart <MetricDistributionChart
width={METRIC_DISTRIBUTION_CHART_WIDTH} width={METRIC_DISTRIBUTION_CHART_WIDTH}
height={METRIC_DISTRIBUTION_CHART_HEIGHT} height={METRIC_DISTRIBUTION_CHART_HEIGHT}