You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@skywalking.apache.org by ha...@apache.org on 2018/03/08 12:35:34 UTC
[incubator-skywalking-ui] branch enhancement/e2e updated: Fix #136
refresh icon
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch enhancement/e2e
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
The following commit(s) were added to refs/heads/enhancement/e2e by this push:
new ee56b47 Fix #136 refresh icon
ee56b47 is described below
commit ee56b47626c3c65ff4e5aa5f65b2e9878399eb67
Author: hanahmily <ha...@gmail.com>
AuthorDate: Thu Mar 8 20:33:09 2018 +0800
Fix #136 refresh icon
---
src/components/Duration/Icon/index.js | 30 +++++++++++++++++++++++++++---
src/components/GlobalHeader/index.js | 5 +++--
src/layouts/BasicLayout.js | 7 ++++---
src/models/global.js | 3 +++
4 files changed, 37 insertions(+), 8 deletions(-)
diff --git a/src/components/Duration/Icon/index.js b/src/components/Duration/Icon/index.js
index 03becc0..8305127 100644
--- a/src/components/Duration/Icon/index.js
+++ b/src/components/Duration/Icon/index.js
@@ -19,10 +19,34 @@
import React, { PureComponent } from 'react';
import { Icon } from 'antd';
import moment from 'moment';
+import lodash from 'lodash';
export default class DurationIcon extends PureComponent {
+ state = {
+ // noLoading: -1, loading: 1, loadingFinish: 0
+ innerLoading: -1,
+ }
+ handleToggle = () => {
+ const { loading, onToggle } = this.props;
+ if (loading) {
+ return;
+ }
+ onToggle();
+ }
+ renderLoad() {
+ const { loading, className, onReload } = this.props;
+ if (!loading && this.state.innerLoading < 1) {
+ this.state.innerLoading = -1;
+ return <span className={className} onClick={onReload}> <Icon type="reload" /> </span>;
+ }
+ if (this.state.innerLoading < 0) {
+ this.state.innerLoading = 1;
+ lodash.delay(() => this.setState({ innerLoading: 0 }), 1000);
+ }
+ return <span className={className}> <Icon type="loading" /> </span>;
+ }
render() {
- const { className, onToggle, onReload, selectedDuration = {
+ const { className, selectedDuration = {
from() {
return moment();
},
@@ -36,12 +60,12 @@ export default class DurationIcon extends PureComponent {
<span>
<span
className={className}
- onClick={onToggle}
+ onClick={this.handleToggle}
>
{selectedDuration.label ? selectedDuration.label : `${selectedDuration.from().format(timeFormat)} ~ ${selectedDuration.to().format(timeFormat)}`}
{selectedDuration.step > 0 ? ` Reloading every ${selectedDuration.step / 1000} seconds` : null }
</span>
- <span className={className} onClick={onReload}> <Icon type="reload" /> </span>
+ {this.renderLoad()}
</span>
);
}
diff --git a/src/components/GlobalHeader/index.js b/src/components/GlobalHeader/index.js
index f6c08fb..7b02449 100644
--- a/src/components/GlobalHeader/index.js
+++ b/src/components/GlobalHeader/index.js
@@ -73,7 +73,7 @@ export default class GlobalHeader extends PureComponent {
render() {
const {
collapsed, notices: { applicationAlarmList, serverAlarmList },
- isMobile, logo, selectedDuration,
+ isMobile, logo, selectedDuration, fetching,
onDurationToggle, onDurationReload, onRedirect: redirect,
} = this.props;
const applications = applicationAlarmList.items.map(_ => ({ ..._, datetime: _.startTime }));
@@ -97,6 +97,7 @@ export default class GlobalHeader extends PureComponent {
/>
<div className={styles.right}>
<DurationIcon
+ loading={fetching}
className={styles.action}
selectedDuration={selectedDuration}
onToggle={onDurationToggle}
@@ -111,7 +112,7 @@ export default class GlobalHeader extends PureComponent {
onClear={(tabTitle) => {
redirect({ pathname: '/alarm', state: { type: tabTitle } });
}}
- loading={false}
+ loading={fetching}
popupAlign={{ offset: [20, -16] }}
locale={{
emptyText: 'No alert',
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index cf1b900..2503113 100644
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@@ -25,6 +25,7 @@ import { Route, Redirect, Switch, routerRedux } from 'dva/router';
import { ContainerQuery } from 'react-container-query';
import classNames from 'classnames';
import { enquireScreen } from 'enquire-js';
+import lodash from 'lodash';
import GlobalHeader from '../components/GlobalHeader';
import GlobalFooter from '../components/GlobalFooter';
import SiderMenu from '../components/SiderMenu';
@@ -197,7 +198,7 @@ class BasicLayout extends React.PureComponent {
}
render() {
const {
- collapsed, fetchingNotices, notices, routerData, match, location,
+ collapsed, fetching, notices, routerData, match, location,
duration: { selected: dSelected, collapsed: dCollapsed },
} = this.props;
const bashRedirect = this.getBashRedirect();
@@ -217,7 +218,7 @@ class BasicLayout extends React.PureComponent {
<Layout>
<GlobalHeader
logo={logo}
- fetchingNotices={fetchingNotices}
+ fetching={fetching}
notices={notices}
collapsed={collapsed}
isMobile={this.state.isMobile}
@@ -294,7 +295,7 @@ class BasicLayout extends React.PureComponent {
export default connect(({ global, loading }) => ({
collapsed: global.collapsed,
- fetchingNotices: loading.effects['global/fetchNotices'],
+ fetching: lodash.values(loading.models).findIndex(_ => _) > -1,
notices: global.notices,
duration: global.duration,
globalVariables: global.globalVariables,
diff --git a/src/models/global.js b/src/models/global.js
index 6f40181..05e3c6c 100644
--- a/src/models/global.js
+++ b/src/models/global.js
@@ -101,6 +101,9 @@ export default {
},
reloadDuration(state) {
const { duration } = state;
+ if (!duration.collapsed) {
+ return state;
+ }
const { selected } = duration;
const value = generateDuration(selected);
return {
--
To stop receiving notification emails like this one, please contact
hanahmily@apache.org.