github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-28 03:01:21 -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" /> <EuiSpacer size="m" />
<div className="euiText explorer-charts"> {showCharts ? (
{showCharts ? ( <ExplorerChartsContainer
<ExplorerChartsContainer {...{
{...{ ...chartsData,
...chartsData, severity,
severity, timefilter,
timefilter, mlLocator,
mlLocator, timeBuckets,
timeBuckets, onSelectEntity: applyFilter,
onSelectEntity: applyFilter, chartsService,
chartsService, }}
}} />
/> ) : null}
) : null}
</div> <EuiSpacer size="m" />
<AnomaliesTable bounds={bounds} tableData={tableData} influencerFilter={applyFilter} /> <AnomaliesTable bounds={bounds} tableData={tableData} influencerFilter={applyFilter} />
</EuiPanel> </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 '../../../application/variables';
@import 'components/explorer_chart_label/index'; @import 'components/explorer_chart_label/index';
@import 'explorer_chart'; @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> </h4>
</EuiText> </EuiText>
)} )}
<div className="euiText explorer-charts">
{showCharts && ( {showCharts && (
<ExplorerChartsContainer <ExplorerChartsContainer
{...{ {...{
...chartsData, ...chartsData,
severity: severity.val, severity: severity.val,
mlLocator, mlLocator,
timeBuckets, timeBuckets,
timefilter, timefilter,
onSelectEntity, onSelectEntity,
tooManyBucketsCalloutMsg, tooManyBucketsCalloutMsg,
showSelectedInterval, showSelectedInterval,
chartsService, chartsService,
}} }}
/> />
)} )}
</div>
</> </>
); );
}; };

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

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