This is an automated email from the ASF dual-hosted git repository. hanahmily pushed a commit to branch 5.0.0/beta in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
The following commit(s) were added to refs/heads/5.0.0/beta by this push: new 950f6cd Refactor menu layout. Remove duration header component from trace page 950f6cd is described below commit 950f6cda7d2fcf971038baa0b99fea6339633bda Author: hanahmily <hanahm...@gmail.com> AuthorDate: Sat Apr 28 14:40:08 2018 +0800 Refactor menu layout. Remove duration header component from trace page --- src/common/menu.js | 39 +++++++++--------- src/common/router.js | 10 ++--- src/components/GlobalHeader/index.js | 78 ++++++++++++++++++------------------ src/layouts/BasicLayout.js | 24 ++--------- src/models/global.js | 20 ++++++++- 5 files changed, 89 insertions(+), 82 deletions(-) diff --git a/src/common/menu.js b/src/common/menu.js index c287e00..cbf1815 100644 --- a/src/common/menu.js +++ b/src/common/menu.js @@ -19,29 +19,32 @@ import { isUrl } from '../utils/utils'; const menuData = [{ - name: 'Dashboard', + name: 'Monitor', icon: 'dashboard', - path: 'dashboard', -}, { - name: 'Topology', - icon: 'fork', - path: 'topology', -}, { - name: 'Application', - icon: 'appstore', - path: 'application', -}, { - name: 'Service', - icon: 'api', - path: 'service', + path: 'monitor', + children: [ + { + name: 'Dashboard', + path: 'dashboard', + }, + { + name: 'Topology', + path: 'topology', + }, { + name: 'Application', + path: 'application', + }, { + name: 'Service', + path: 'service', + }, { + name: 'Alarm', + path: 'alarm', + }, + ], }, { name: 'Trace', icon: 'exception', path: 'trace', -}, { - name: 'Alarm', - icon: 'bell', - path: 'alarm', }]; function formatter(data, parentPath = '', parentAuthority) { diff --git a/src/common/router.js b/src/common/router.js index 7af628a..4f65b43 100644 --- a/src/common/router.js +++ b/src/common/router.js @@ -91,22 +91,22 @@ export const getRouterData = (app) => { '/': { component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')), }, - '/dashboard': { + '/monitor/dashboard': { component: dynamicWrapper(app, ['dashboard'], () => import('../routes/Dashboard/Dashboard')), }, - '/topology': { + '/monitor/topology': { component: dynamicWrapper(app, ['topology'], () => import('../routes/Topology/Topology')), }, - '/application': { + '/monitor/application': { component: dynamicWrapper(app, ['application'], () => import('../routes/Application/Application')), }, - '/service': { + '/monitor/service': { component: dynamicWrapper(app, ['service'], () => import('../routes/Service/Service')), }, '/trace': { component: dynamicWrapper(app, ['trace'], () => import('../routes/Trace/Trace')), }, - '/alarm': { + '/monitor/alarm': { component: dynamicWrapper(app, ['alarm'], () => import('../routes/Alarm/Alarm')), }, '/user': { diff --git a/src/components/GlobalHeader/index.js b/src/components/GlobalHeader/index.js index 7a14f45..c2f24b8 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 }, - logo, selectedDuration, fetching, + logo, selectedDuration, fetching, isMonitor, onDurationToggle, onDurationReload, onRedirect: redirect, } = this.props; const applications = applicationAlarmList.items.map(_ => ({ ..._, datetime: _.startTime })); @@ -89,44 +89,46 @@ export default class GlobalHeader extends PureComponent { type={collapsed ? 'menu-unfold' : 'menu-fold'} onClick={this.toggle} /> - <div className={styles.right}> - <DurationIcon - loading={fetching} - className={styles.action} - selectedDuration={selectedDuration} - onToggle={onDurationToggle} - onReload={onDurationReload} - /> - <NoticeIcon - className={styles.action} - count={applicationAlarmList.total + serverAlarmList.total} - onItemClick={(item, tabProps) => { - redirect({ pathname: '/alarm', state: { type: tabProps.title } }); - }} - onClear={(tabTitle) => { - redirect({ pathname: '/alarm', state: { type: tabTitle } }); - }} - loading={fetching} - popupAlign={{ offset: [20, -16] }} - locale={{ - emptyText: 'No alert', - clear: 'More ', - }} - > - <NoticeIcon.Tab - list={applications} - title="Application" - emptyText="No alarm" - emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg" + { isMonitor ? ( + <div className={styles.right}> + <DurationIcon + loading={fetching} + className={styles.action} + selectedDuration={selectedDuration} + onToggle={onDurationToggle} + onReload={onDurationReload} /> - <NoticeIcon.Tab - list={servers} - title="Server" - emptyText="No alarm" - emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg" - /> - </NoticeIcon> - </div> + <NoticeIcon + className={styles.action} + count={applicationAlarmList.total + serverAlarmList.total} + onItemClick={(item, tabProps) => { + redirect({ pathname: '/alarm', state: { type: tabProps.title } }); + }} + onClear={(tabTitle) => { + redirect({ pathname: '/alarm', state: { type: tabTitle } }); + }} + loading={fetching} + popupAlign={{ offset: [20, -16] }} + locale={{ + emptyText: 'No alert', + clear: 'More ', + }} + > + <NoticeIcon.Tab + list={applications} + title="Application" + emptyText="No alarm" + emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg" + /> + <NoticeIcon.Tab + list={servers} + title="Server" + emptyText="No alarm" + emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg" + /> + </NoticeIcon> + </div> + ) : null} </Header> ); } diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js index 31e8488..5b6e0d6 100644 --- a/src/layouts/BasicLayout.js +++ b/src/layouts/BasicLayout.js @@ -24,7 +24,6 @@ import { connect } from 'dva'; 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'; @@ -76,19 +75,11 @@ const query = { }, }; -let isMobile; -enquireScreen((b) => { - isMobile = b; -}); - class BasicLayout extends React.PureComponent { static childContextTypes = { location: PropTypes.object, breadcrumbNameMap: PropTypes.object, } - state = { - isMobile, - }; getChildContext() { const { location, routerData } = this.props; return { @@ -96,13 +87,6 @@ class BasicLayout extends React.PureComponent { breadcrumbNameMap: routerData, }; } - componentDidMount() { - enquireScreen((mobile) => { - this.setState({ - isMobile: mobile, - }); - }); - } componentWillUpdate(nextProps) { const { globalVariables: { duration } } = nextProps; if (!duration || Object.keys(duration).length < 1) { @@ -136,7 +120,7 @@ class BasicLayout extends React.PureComponent { urlParams.searchParams.delete('redirect'); window.history.replaceState(null, 'redirect', urlParams.href); } else { - return '/dashboard'; + return '/monitor/dashboard'; } return redirect; } @@ -198,7 +182,7 @@ class BasicLayout extends React.PureComponent { } render() { const { - collapsed, fetching, notices, routerData, match, location, + isMonitor, collapsed, fetching, notices, routerData, match, location, duration: { selected: dSelected, collapsed: dCollapsed }, } = this.props; const bashRedirect = this.getBashRedirect(); @@ -212,7 +196,6 @@ class BasicLayout extends React.PureComponent { menuData={getMenuData()} collapsed={collapsed} location={location} - isMobile={this.state.isMobile} onCollapse={this.handleMenuCollapse} /> <Layout> @@ -221,8 +204,8 @@ class BasicLayout extends React.PureComponent { fetching={fetching} notices={notices} collapsed={collapsed} - isMobile={this.state.isMobile} selectedDuration={dSelected} + isMonitor={isMonitor} onNoticeClear={this.handleNoticeClear} onCollapse={this.handleMenuCollapse} onMenuClick={this.handleMenuClick} @@ -294,6 +277,7 @@ class BasicLayout extends React.PureComponent { } export default connect(({ global, loading }) => ({ + isMonitor: global.isMonitor, collapsed: global.collapsed, fetching: lodash.values(loading.models).findIndex(_ => _) > -1, notices: global.notices, diff --git a/src/models/global.js b/src/models/global.js index 120e3ed..5e08384 100644 --- a/src/models/global.js +++ b/src/models/global.js @@ -45,6 +45,7 @@ export default { state: { collapsed: true, + isMonitor: false, notices: { applicationAlarmList: { items: [], @@ -130,15 +131,32 @@ export default { }, }; }, + toggleMonitorHeader(state, { payload }) { + return { + ...state, + isMonitor: payload, + }; + }, }, subscriptions: { - setup({ history }) { + setup({ history, dispatch }) { // Subscribe history(url) change, trigger `load` action if pathname is `/` return history.listen(({ pathname, search }) => { if (typeof window.ga !== 'undefined') { window.ga('send', 'pageview', pathname + search); } + if (pathname && pathname.startsWith('/monitor')) { + dispatch({ + type: 'toggleMonitorHeader', + payload: true, + }); + } else { + dispatch({ + type: 'toggleMonitorHeader', + payload: false, + }); + } }); }, }, -- To stop receiving notification emails like this one, please contact hanahm...@apache.org.