mirror of
https://github.com/didi/KnowStreaming.git
synced 2026-01-03 11:28:12 +08:00
kafka-manager 2.0
This commit is contained in:
zengqiao
162
kafka-manager-console/src/container/header/index.less
Normal file
162
kafka-manager-console/src/container/header/index.less
Normal file
@@ -0,0 +1,162 @@
|
||||
.kafka-header-container {
|
||||
min-width: 1200px;
|
||||
height: 64px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .1);
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
.left-content {
|
||||
width: 20%;
|
||||
display: inline-block;
|
||||
margin-left: 16px;
|
||||
|
||||
& > span {
|
||||
display: inline-block;
|
||||
line-height: 64px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.mid-content {
|
||||
width: 53%;
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
color: #4A4A4A;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
line-height: 64px;
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
|
||||
&.k-active {
|
||||
a {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&:after {
|
||||
width: 100%;
|
||||
content: '';
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-content {
|
||||
width: 25%;
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
padding-right: 10px;
|
||||
height: 64px;
|
||||
|
||||
.content-region-select{
|
||||
width: 120px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
& > span {
|
||||
display: inline-block;
|
||||
line-height: 64px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.kafka-user-text {
|
||||
margin-left: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
color: #4A4A4A;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.kafka-header-icon {
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.kafka-header-text {
|
||||
margin-left: 16px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
font-family: PingFangSC-Medium;
|
||||
color: rgba(25, 24, 24, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.kafka-header-menu {
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 0px 4px 0px rgba(217, 217, 217);
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
|
||||
li {
|
||||
text-align: center;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0px 20px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(236, 111, 38, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.region-user-text{
|
||||
width: 70px;
|
||||
margin-right: 20px;
|
||||
.region-text{
|
||||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
color: #4A4A4A;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
line-height: 50px;
|
||||
.region-text-icon{
|
||||
line-height: 54px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kafka-avatar-box{
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
margin-right: -12px;
|
||||
.kafka-avatar-icon{
|
||||
float: left;
|
||||
margin: 8px 34px 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.kafka-user-span{
|
||||
float: left;
|
||||
width: 100%;
|
||||
font-size: 10px;
|
||||
line-height: 24px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
187
kafka-manager-console/src/container/header/index.tsx
Normal file
187
kafka-manager-console/src/container/header/index.tsx
Normal file
@@ -0,0 +1,187 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import './index.less';
|
||||
import { userLogOut } from 'lib/api';
|
||||
import { notification, Dropdown, Icon, Tooltip } from 'component/antd';
|
||||
import { urlPrefix } from 'constants/left-menu';
|
||||
import { region, IRegionIdcs } from 'store/region';
|
||||
import logoUrl from '../../assets/image/kafka-logo.png';
|
||||
import userIcon from '../../assets/image/normal.png';
|
||||
import weChat from '../../assets/image/wechat.jpeg';
|
||||
import { users } from 'store/users';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './index.less';
|
||||
|
||||
interface IHeader {
|
||||
active: string;
|
||||
}
|
||||
|
||||
interface IMenuItem {
|
||||
active: boolean;
|
||||
label: string;
|
||||
href: string;
|
||||
show: boolean;
|
||||
}
|
||||
|
||||
export const Header = observer((props: IHeader) => {
|
||||
const { active } = props;
|
||||
const role = users.currentUser.role;
|
||||
const headerMenu = [{
|
||||
active: active === 'topic',
|
||||
label: 'Topic管理',
|
||||
href: `/topic`,
|
||||
show: true,
|
||||
}, {
|
||||
active: active === 'cluster',
|
||||
label: '集群管理',
|
||||
href: `/cluster`,
|
||||
show: true,
|
||||
}, {
|
||||
active: active === 'alarm',
|
||||
label: '监控告警',
|
||||
href: `/alarm`,
|
||||
show: true,
|
||||
}, {
|
||||
active: active === 'admin',
|
||||
label: '运维管控',
|
||||
href: `/admin`,
|
||||
show: role !== 0,
|
||||
}, {
|
||||
active: active === 'expert',
|
||||
label: '专家服务',
|
||||
href: `/expert`,
|
||||
show: role === 2,
|
||||
}];
|
||||
|
||||
const logOut = () => {
|
||||
userLogOut().then(() => {
|
||||
notification.success({ message: '退出成功' });
|
||||
});
|
||||
};
|
||||
|
||||
const helpCenter = (
|
||||
<ul className="kafka-header-menu">
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/didi/kafka-manager"
|
||||
target="_blank"
|
||||
>产品介绍
|
||||
</a></li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/didi/kafka-manager"
|
||||
target="_blank"
|
||||
>QuickStart
|
||||
</a></li>
|
||||
<li>
|
||||
<a
|
||||
href=""
|
||||
target="_blank"
|
||||
>常见问题
|
||||
</a></li>
|
||||
<li>
|
||||
<a
|
||||
// tslint:disable-next-line:max-line-length
|
||||
href="https://github.com/didi/kafka-manager"
|
||||
target="_blank"
|
||||
>联系我们
|
||||
</a></li>
|
||||
<li style={{ height: '80px', padding: '5px' }} className="kafka-avatar-img">
|
||||
<img style={{ width: '70px', height: '70px' }} src={weChat} alt="" />
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
|
||||
const menu = (
|
||||
<ul className="kafka-header-menu">
|
||||
<li> <Link to={`/user/my-order`} key="1"> 我的申请 </Link> </li>
|
||||
<li> <Link to={`/user/my-approval`} key="2"> 我的审批 </Link> </li>
|
||||
<li> <Link to={`/user/bill`} key="3"> 账单管理 </Link> </li>
|
||||
<li><a onClick={() => logOut()}>退出</a></li>
|
||||
</ul>
|
||||
);
|
||||
|
||||
const handleChangeRegion = (value: IRegionIdcs) => {
|
||||
region.changeRegion(value);
|
||||
|
||||
location.assign(handleJumpLocation());
|
||||
};
|
||||
|
||||
const handleJumpLocation = (): string => {
|
||||
const isDetailPage = window.location.pathname.includes('detail');
|
||||
const pathNames = window.location.pathname.split('/');
|
||||
const loc = window.location.pathname.includes('error') ? `${urlPrefix}/topic` : window.location.pathname ;
|
||||
|
||||
return isDetailPage ? pathNames.splice(0, 3).join('/') : loc;
|
||||
};
|
||||
|
||||
const regionMenu = (
|
||||
<ul className="kafka-header-menu">
|
||||
{region.regionIdcList.map((v, index) => (
|
||||
<li key={index} value={v.idc}>
|
||||
<a onClick={() => handleChangeRegion({ name: v.name, idc: v.idc })}>{v.name}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
|
||||
const isLongName = (users.currentUser.chineseName ? users.currentUser.chineseName.length > 8
|
||||
: users.currentUser.username ? users.currentUser.username.length > 11 : false);
|
||||
return (
|
||||
<div className="kafka-header-container">
|
||||
<div className="left-content">
|
||||
<img className="kafka-header-icon" src={logoUrl} alt="" />
|
||||
<span className="kafka-header-text">Kafka Manager</span>
|
||||
</div>
|
||||
<div className="mid-content">
|
||||
{headerMenu.map((item: IMenuItem, index: number) =>
|
||||
item.show ?
|
||||
<Link to={item.href} key={index}>
|
||||
<span key={index} className={item.active ? 'k-active' : ''}>
|
||||
{item.label}
|
||||
</span>
|
||||
</Link> : null,
|
||||
)}
|
||||
</div>
|
||||
<div className="right-content">
|
||||
<Dropdown key="1" overlay={helpCenter} trigger={['click', 'hover']} placement="bottomCenter">
|
||||
<span className="region-user-text">
|
||||
<span className="region-text">
|
||||
帮助中心 <Icon className="region-text-icon" type="down" />
|
||||
</span>
|
||||
</span>
|
||||
</Dropdown>
|
||||
<Dropdown
|
||||
key="2"
|
||||
overlay={regionMenu}
|
||||
trigger={['click', 'hover']}
|
||||
placement="bottomCenter"
|
||||
>
|
||||
<span className="region-user-text">
|
||||
<a className="region-text">
|
||||
{region.regionName} <Icon className="region-text-icon" type="down" />
|
||||
</a>
|
||||
</span>
|
||||
</Dropdown>
|
||||
<Dropdown key="3" overlay={menu} trigger={['click', 'hover']} placement="bottomCenter">
|
||||
<span className="kafka-avatar-box">
|
||||
<img className="kafka-avatar-icon" src={userIcon} alt="" />
|
||||
{isLongName ?
|
||||
<Tooltip
|
||||
placement="left"
|
||||
title={users.currentUser.chineseName || users.currentUser.username}
|
||||
>
|
||||
<span className="kafka-user-span">
|
||||
{users.currentUser.chineseName || users.currentUser.username}
|
||||
</span>
|
||||
</Tooltip> :
|
||||
<span className="kafka-user-span">
|
||||
{users.currentUser.chineseName || users.currentUser.username}
|
||||
</span>}
|
||||
</span>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
Reference in New Issue
Block a user