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/04/28 06:49:34 UTC
[incubator-skywalking-ui] branch 5.0.0/beta updated: Refactor menu
layout. Remove duration header component from trace page
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 <ha...@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
hanahmily@apache.org.