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

[ML] Job validation loading spinner (#54450)

Browse source 
* [ML] Job validation loading spinner

* adding to modal version

* updating snapshots
This commit is contained in:
James Gowdy 2020-01-10 16:26:23 +00:00 committed by GitHub
parent aa9126ec04
commit 1a3aef0d21
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
x-pack/legacy/plugins/ml/public/application/components/validate_job/__snapshots__/validate_job_view.test.js.snap generated
View file

@ -86,7 +86,7 @@ exports[`ValidateJob renders the button 1`] = `
iconSide="right"
iconType="questionInCircle"
isDisabled={false}
isLoading={false}
isLoading={true}
onClick={[Function]}
size="s"
>

35
x-pack/legacy/plugins/ml/public/application/components/validate_job/validate_job_view.js
View file

@ -21,6 +21,9 @@ import {
EuiOverlayMask,
EuiSpacer,
EuiText,
EuiFlexGroup,
EuiFlexItem,
EuiLoadingSpinner,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
@ -38,7 +41,7 @@ const defaultIconType = 'questionInCircle';
const getDefaultState = () => ({
ui: {
iconType: defaultIconType,
isLoading: false,
isLoading: true,
isModalVisible: false,
},
data: {
@ -150,6 +153,14 @@ Callout.propTypes = {
}),
};
const LoadingSpinner = () => (
<EuiFlexGroup justifyContent="spaceAround" alignItems="center">
<EuiFlexItem grow={false}>
<EuiLoadingSpinner size="xl" />
</EuiFlexItem>
</EuiFlexGroup>
);
const Modal = ({ close, title, children }) => (
<EuiOverlayMask>
<EuiModal onClose={close} style={{ width: '800px' }}>
@ -249,10 +260,11 @@ export class ValidateJob extends Component {
const isDisabled = this.props.isDisabled !== true ? false : true;
const embedded = this.props.embedded === true;
const idFilterList = this.props.idFilterList || [];
const isLoading = this.state.ui.isLoading;
return (
<Fragment>
{embedded === false && (
{embedded === false ? (
<div>
<EuiButton
onClick={this.validate}
@ -261,7 +273,7 @@ export class ValidateJob extends Component {
iconType={isCurrentJobConfig ? this.state.ui.iconType : defaultIconType}
iconSide="right"
isDisabled={isDisabled}
isLoading={this.state.ui.isLoading}
isLoading={isLoading}
>
<FormattedMessage
id="xpack.ml.validateJob.validateJobButtonLabel"
@ -280,7 +292,11 @@ export class ValidateJob extends Component {
/>
}
>
<MessageList messages={this.state.data.messages} idFilterList={idFilterList} />
{isLoading ? (
<LoadingSpinner />
) : (
<MessageList messages={this.state.data.messages} idFilterList={idFilterList} />
)}
<EuiText>
<FormattedMessage
@ -308,9 +324,14 @@ export class ValidateJob extends Component {
</Modal>
)}
</div>
)}
{embedded === true && (
<MessageList messages={this.state.data.messages} idFilterList={idFilterList} />
) : (
<Fragment>
{isLoading ? (
<LoadingSpinner />
) : (
<MessageList messages={this.state.data.messages} idFilterList={idFilterList} />
)}
</Fragment>
)}
</Fragment>
);