| /** |
| * Licensed to the Apache Software Foundation (ASF) under one or more |
| * contributor license agreements. See the NOTICE file distributed with |
| * this work for additional information regarding copyright ownership. |
| * The ASF licenses this file to You under the Apache License, Version 2.0 |
| * (the "License"); you may not use this file except in compliance with |
| * the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| |
| |
| import React, { PureComponent } from 'react'; |
| import { Layout, Icon, Tag, Divider, Dropdown, Avatar, Menu } from 'antd'; |
| import moment from 'moment'; |
| import groupBy from 'lodash/groupBy'; |
| import Debounce from 'lodash-decorators/debounce'; |
| import { Link } from 'dva/router'; |
| import NoticeIcon from '../NoticeIcon'; |
| import DurationIcon from '../Duration/Icon'; |
| import styles from './index.less'; |
| |
| const { Header } = Layout; |
| |
| export default class GlobalHeader extends PureComponent { |
| componentWillUnmount() { |
| this.triggerResizeEvent.cancel(); |
| } |
| |
| getNoticeData() { |
| const { notices = [] } = this.props; |
| if (notices.length === 0) { |
| return {}; |
| } |
| const newNotices = notices.map((notice) => { |
| const newNotice = { ...notice }; |
| if (newNotice.datetime) { |
| newNotice.datetime = moment(notice.datetime).fromNow(); |
| } |
| // transform id to item key |
| if (newNotice.id) { |
| newNotice.key = newNotice.id; |
| } |
| if (newNotice.extra && newNotice.status) { |
| const color = ({ |
| todo: '', |
| processing: 'blue', |
| urgent: 'red', |
| doing: 'gold', |
| })[newNotice.status]; |
| newNotice.extra = <Tag color={color} style={{ marginRight: 0 }}>{newNotice.extra}</Tag>; |
| } |
| return newNotice; |
| }); |
| return groupBy(newNotices, 'type'); |
| } |
| |
| toggle = () => { |
| const { collapsed, onCollapse } = this.props; |
| onCollapse(!collapsed); |
| this.triggerResizeEvent(); |
| } |
| |
| @Debounce(600) |
| triggerResizeEvent() { // eslint-disable-line |
| const event = document.createEvent('HTMLEvents'); |
| event.initEvent('resize', true, false); |
| window.dispatchEvent(event); |
| } |
| |
| render() { |
| const { |
| collapsed, notices: { applicationAlarmList, serverAlarmList }, |
| logo, selectedDuration, fetching, isMonitor, |
| onDurationToggle, onDurationReload, onRedirect: redirect, |
| onMenuClick, |
| } = this.props; |
| const applications = applicationAlarmList.msgs.map(_ => ({ ..._, title: _.message, datetime: moment(_.startTime).format('YYYY-MM-DD HH:mm:ss') })); |
| const servers = serverAlarmList.msgs.map(_ => ({ ..._, title: _.message, datetime: moment(_.startTime).format('YYYY-MM-DD HH:mm:ss') })); |
| const menu = ( |
| <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}> |
| <Menu.Item key="logout"> |
| <Icon type="logout" />Logout |
| </Menu.Item> |
| </Menu> |
| ); |
| return ( |
| <Header className={styles.header}> |
| <Link to="/" className={styles.logo} key="logo"> |
| <img src={logo} alt="logo" width="50" /> |
| </Link> |
| <Divider type="vertical" key="line" /> |
| <Icon |
| className={styles.trigger} |
| type={collapsed ? 'menu-unfold' : 'menu-fold'} |
| onClick={this.toggle} |
| /> |
| { isMonitor ? ( |
| <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: '/monitor/alarm', state: { type: tabProps.title } }); |
| }} |
| onClear={(tabTitle) => { |
| redirect({ pathname: '/monitor/alarm', state: { type: tabTitle } }); |
| }} |
| loading={fetching} |
| popupAlign={{ offset: [20, -16] }} |
| locale={{ |
| emptyText: 'No alert', |
| clear: 'More ', |
| }} |
| > |
| <NoticeIcon.Tab |
| list={applications} |
| title="Service" |
| emptyText="No alarm" |
| emptyImage="img/icon/alarm-backgroud.png" |
| /> |
| <NoticeIcon.Tab |
| list={servers} |
| title="ServiceInstance" |
| emptyText="No alarm" |
| emptyImage="img/icon/alarm-backgroud.png" |
| /> |
| </NoticeIcon> |
| <Dropdown overlay={menu}> |
| <span className={`${styles.action} ${styles.account}`}> |
| <Avatar size="small" className={styles.avatar} icon="user" /> |
| </span> |
| </Dropdown> |
| </div> |
| ) : null} |
| </Header> |
| ); |
| } |
| } |