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 { EuiListGroup, EuiListGroupItem, EuiSpacer } from '@elastic/eui';
import { EuiListGroup, EuiListGroupItem } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { ExpandedRowFieldHeader } from '../../../../stats_datagrid/components/expanded_row_field_header';
@ -46,7 +46,6 @@ export const ExamplesList: FC<Props> = ({ examples }) => {
}}
/>
</ExpandedRowFieldHeader>
<EuiSpacer size="s" />
<EuiListGroup showToolTips={true} maxWidth={'s'} gutterSize={'none'} flush={true}>
{examplesContent}
</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 {
padding-right: $euiSizeM;
margin-right: $euiSizeM;
&.mlTopValuesValueLabelContainer--small {
width:70px;
}
@ -11,6 +14,6 @@
}
.mlTopValuesPercentLabelContainer {
padding-left: $euiSizeM;
margin-left: $euiSizeM;
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;
const progressBarMax = isTopValuesSampled === true ? topValuesSampleSize : count;
return (
<div data-test-subj="mlFieldDataTopValues">
<div data-test-subj="mlFieldDataTopValues" className={'mlFieldDataTopValuesContainer'}>
{Array.isArray(topValues) &&
topValues.map((value: any) => (
<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 {
padding-left: $euiSize * 4;
width: 100%;
@ -7,7 +9,9 @@
text-align: left;
color: $euiColorDarkShade;
font-weight: bold;
padding-bottom: $euiSizeS;
}
.mlFieldDataCard__codeContent {
@include euiCodeFont;
}
@ -16,22 +20,27 @@
.mlDataVisualizer {
.euiTableRow > .euiTableRowCell {
border-bottom: 0px;
border-top: 1px solid $euiColorLightShade;
border-top: $euiBorderThin;
}
.euiTableRow-isExpandedRow {
.euiTableRowCell{
background-color: transparent !important;
background-color: $euiColorEmptyShade !important;
border-top: 0px;
border-bottom: 1px solid $euiColorLightShade;
border-bottom: $euiBorderThin;
&:hover {
background-color: $euiColorEmptyShade !important;
}
}
}
.mlDataVisualizerSummaryTable {
.euiTableRow > .euiTableRowCell{
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 && (
<EuiFlexItem data-test-subj={'mlMetricDistribution'}>
<EuiFlexItem>
<EuiFlexItem grow={false}>
<ExpandedRowFieldHeader>
<FormattedMessage
id="xpack.ml.fieldDataCardExpandedRow.numberContent.distributionTitle"
@ -138,7 +138,7 @@ export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
</ExpandedRowFieldHeader>
</EuiFlexItem>
<EuiFlexItem style={{ width: '100%' }}>
<EuiFlexItem className={'mlMetricDistributionChartContainer'}>
<MetricDistributionChart
width={METRIC_DISTRIBUTION_CHART_WIDTH}
height={METRIC_DISTRIBUTION_CHART_HEIGHT}