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

[ML] Fixes padding between Anomaly Explorer controls and table (#135650)

Browse source 
* [ML] Fixes padding between Anomaly Explorer controls and table

* [ML] Fix Jest test
This commit is contained in:
Pete Harverson 2022-07-05 16:02:10 +01:00 • committed by GitHub
parent aca93c6d4b
commit f3a46c6636
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 52 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

30
x-pack/plugins/ml/public/application/explorer/explorer.tsx
View file

@ -569,21 +569,21 @@ export const Explorer: FC<ExplorerUIProps> = ({
<EuiSpacer size="m" />
<div className="euiText explorer-charts">
{showCharts ? (
<ExplorerChartsContainer
{...{
...chartsData,
severity,
timefilter,
mlLocator,
timeBuckets,
onSelectEntity: applyFilter,
chartsService,
}}
/>
) : null}
</div>
{showCharts ? (
<ExplorerChartsContainer
{...{
...chartsData,
severity,
timefilter,
mlLocator,
timeBuckets,
onSelectEntity: applyFilter,
chartsService,
}}
/>
) : null}
<EuiSpacer size="m" />
<AnomaliesTable bounds={bounds} tableData={tableData} influencerFilter={applyFilter} />
</EuiPanel>

65
x-pack/plugins/ml/public/application/explorer/explorer_charts/_explorer_charts_container.scss
View file

@ -1,65 +0,0 @@
// SASSTODO: There is a lot of very specific sizing in here that look brittle to touch
.explorer-charts {
ml-explorer-charts-container {
.row {
padding: 10px;
}
label {
font-size: $euiFontSizeXS;
}
select {
font-size: $euiFontSizeS;
font-style: $euiFontWeightRegular;
}
.chart-controls {
label {
padding: 0 0 10px 0;
}
}
.no-results-item {
text-align: center;
padding-top: 10px;
}
.ml-anomaly-interim-result {
font-style: italic;
padding-bottom: 3px;
}
.ml-tablerow-expanded {
width: 100%;
padding: 5px 20px;
overflow: hidden;
font-size: $euiFontSizeXS;
td {
padding: 0 0 2px 0;
}
table tr > td:first-child {
padding-left: 2px;
vertical-align: top;
}
td:first-child {
width: 140px;
}
td:nth-child(2) {
padding-left: 5px;
}
}
}
}
/* wrapper class for the top right alert icon and view button */
.ml-explorer-chart-icons {
float: right;
padding-left: 5px;
/* counter-margin for EuiButtonEmpty's padding */
margin: 2px -8px 0 0;
}

1
x-pack/plugins/ml/public/application/explorer/explorer_charts/_index.scss
View file

@ -1,4 +1,3 @@
@import '../../../application/variables';
@import 'components/explorer_chart_label/index';
@import 'explorer_chart';
@import 'explorer_charts_container';

33
x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_anomalies_container.tsx
View file

@ -78,23 +78,22 @@ export const ExplorerAnomaliesContainer: FC<ExplorerAnomaliesContainerProps> = (
</h4>
</EuiText>
)}
<div className="euiText explorer-charts">
{showCharts && (
<ExplorerChartsContainer
{...{
...chartsData,
severity: severity.val,
mlLocator,
timeBuckets,
timefilter,
onSelectEntity,
tooManyBucketsCalloutMsg,
showSelectedInterval,
chartsService,
}}
/>
)}
</div>
{showCharts && (
<ExplorerChartsContainer
{...{
...chartsData,
severity: severity.val,
mlLocator,
timeBuckets,
timefilter,
onSelectEntity,
tooManyBucketsCalloutMsg,
showSelectedInterval,
chartsService,
}}
/>
)}
</>
);
};

31
x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js
View file

@ -16,7 +16,9 @@ import {
EuiFlexItem,
EuiIconTip,
EuiToolTip,
useEuiTheme,
} from '@elastic/eui';
import { css } from '@emotion/react';
import {
getChartType,
@ -167,6 +169,7 @@ function ExplorerChartContainer({
const chartRef = useRef(null);
const { euiTheme } = useEuiTheme();
const chartTheme = chartsService.theme.useChartsTheme();
const handleCursorUpdate = useActiveCursor(chartsService.activeCursor, chartRef, {
@ -230,17 +233,19 @@ function ExplorerChartContainer({
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<div className="ml-explorer-chart-icons">
<div
css={css`
padding: ${euiTheme.size.xs};
`}
>
{tooManyBuckets && (
<span className="ml-explorer-chart-icon">
<EuiIconTip
content={tooManyBucketsCalloutMsg ?? textTooManyBuckets}
position="top"
size="s"
type="alert"
color="warning"
/>
</span>
<EuiIconTip
content={tooManyBucketsCalloutMsg ?? textTooManyBuckets}
position="top"
size="s"
type="alert"
color="warning"
/>
)}
{explorerSeriesLink && (
<EuiToolTip position="top" content={textViewButton}>
@ -391,7 +396,11 @@ export const ExplorerChartsContainerUI = ({
return (
<>
<ExplorerChartsErrorCallOuts errorMessagesByType={errorMessages} />
<EuiFlexGrid columns={chartsColumns} data-test-subj="mlExplorerChartsContainer">
<EuiFlexGrid
columns={chartsColumns}
gutterSize="m"
data-test-subj="mlExplorerChartsContainer"
>
{seriesToUse.length > 0 &&
seriesToUse.map((series) => (
<EuiFlexItem

2
x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.test.js
View file

@ -100,7 +100,7 @@ describe('ExplorerChartsContainer', () => {
);
expect(wrapper.html()).toBe(
'<div class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--wrap euiFlexGrid--responsive" data-test-subj="mlExplorerChartsContainer"></div>'
'<div class="euiFlexGrid euiFlexGrid--gutterMedium euiFlexGrid--wrap euiFlexGrid--responsive" data-test-subj="mlExplorerChartsContainer"></div>'
);
});