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

Clickable refresh button when loading (#24312)

Browse source 
* clickable refresh button when loading

* Disables manual refresh button in refresh popover when workpad is loading
This commit is contained in:
Catherine Liu 2018-10-22 21:17:43 -07:00 • committed by GitHub
parent c38dbaa678
commit c90e0eb756
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

5
x-pack/plugins/canvas/public/components/refresh_control/auto_refresh_controls.js
View file

@ -26,6 +26,7 @@ import { timeDurationString } from '../../lib/time_duration';
export class AutoRefreshControls extends Component {
static propTypes = {
inFlight: PropTypes.bool.isRequired,
refreshInterval: PropTypes.number,
setRefresh: PropTypes.func.isRequired,
disableInterval: PropTypes.func.isRequired,
@ -35,7 +36,7 @@ export class AutoRefreshControls extends Component {
refreshInput = null;
render() {
const { refreshInterval, setRefresh, doRefresh, disableInterval } = this.props;
const { inFlight, refreshInterval, setRefresh, doRefresh, disableInterval } = this.props;
return (
<div>
@ -60,7 +61,7 @@ export class AutoRefreshControls extends Component {
</EuiDescriptionList>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton size="s" fill iconType="refresh" onClick={doRefresh}>
<EuiButton size="s" fill iconType="refresh" onClick={doRefresh} isDisabled={inFlight}>
Refresh
</EuiButton>
</EuiFlexItem>

16
x-pack/plugins/canvas/public/components/refresh_control/refresh_control.js
View file

@ -4,9 +4,9 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React from 'react';
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { EuiButtonEmpty } from '@elastic/eui';
import { EuiButtonEmpty, EuiLoadingSpinner } from '@elastic/eui';
import { Popover } from '../popover';
import { AutoRefreshControls } from './auto_refresh_controls';
@ -36,8 +36,15 @@ export const RefreshControl = ({ inFlight, setRefreshInterval, refreshInterval,
const setRefresh = val => setRefreshInterval(getRefreshInterval(val));
const popoverButton = handleClick => (
<EuiButtonEmpty isLoading={inFlight} size="s" onClick={handleClick}>
Refresh
<EuiButtonEmpty size="s" onClick={handleClick}>
<div style={{ display: 'flex', alignItems: 'center' }}>
{inFlight && (
<Fragment>
<EuiLoadingSpinner size="m" /> &nbsp;
</Fragment>
)}
Refresh
</div>
</EuiButtonEmpty>
);
@ -50,6 +57,7 @@ export const RefreshControl = ({ inFlight, setRefreshInterval, refreshInterval,
{({ closePopover }) => (
<div>
<AutoRefreshControls
inFlight={inFlight}
refreshInterval={refreshInterval}
setRefresh={val => {
setRefresh(val);