[ML] Fixing start datafeed modal overflow (#136292)

This commit is contained in:
James Gowdy 2022-07-14 13:56:18 +01:00 committed by GitHub
parent b58d07e05b
commit e3722862ba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 30 deletions

View file

@ -143,7 +143,7 @@ export class StartDatafeedModal extends Component {
modal = (
<EuiModal
onClose={this.closeModal}
style={{ width: '850px' }}
style={{ minWidth: '850px' }}
maxWidth={false}
data-test-subj="mlStartDatafeedModal"
>

View file

@ -1,9 +1,6 @@
// stylelint-disable selector-no-qualifying-type
// SASSTODO: Looks like this could use a rewrite. Needs selectors
.time-range-selector {
.time-range-section-container {
display: flex;
}
.time-range-section-title {
font-weight: bold;
margin-bottom: $euiSizeS;
@ -46,7 +43,6 @@
}
.body {
display: block;
height: 315px;
}
}
& > li.has-body.active {

View file

@ -9,7 +9,7 @@ import './_time_range_selector.scss';
import PropTypes from 'prop-types';
import React, { Component, useState, useEffect } from 'react';
import { EuiDatePicker, EuiFieldText, EuiSpacer } from '@elastic/eui';
import { EuiDatePicker, EuiFieldText, EuiSpacer, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import moment from 'moment';
import { i18n } from '@kbn/i18n';
@ -181,30 +181,34 @@ export class TimeRangeSelector extends Component {
<EuiSpacer />
</>
) : null}
<div className="time-range-section-container">
<TabStack
title={
<FormattedMessage
id="xpack.ml.jobsList.startDatafeedModal.searchStartTimeTitle"
defaultMessage="Search start time"
/>
}
items={startItems}
switchState={this.state.startTab}
switchFunc={this.setStartTab}
/>
<TabStack
title={
<FormattedMessage
id="xpack.ml.jobsList.startDatafeedModal.searchEndTimeTitle"
defaultMessage="Search end time"
/>
}
items={endItems}
switchState={this.state.endTab}
switchFunc={this.setEndTab}
/>
</div>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem>
<TabStack
title={
<FormattedMessage
id="xpack.ml.jobsList.startDatafeedModal.searchStartTimeTitle"
defaultMessage="Search start time"
/>
}
items={startItems}
switchState={this.state.startTab}
switchFunc={this.setStartTab}
/>
</EuiFlexItem>
<EuiFlexItem>
<TabStack
title={
<FormattedMessage
id="xpack.ml.jobsList.startDatafeedModal.searchEndTimeTitle"
defaultMessage="Search end time"
/>
}
items={endItems}
switchState={this.state.endTab}
switchFunc={this.setEndTab}
/>
</EuiFlexItem>
</EuiFlexGroup>
</div>
);
}