Skip to content

K
kafka-manager

DiDi / kafka-manager
8 个月 前同步成功

通知 58
Star 6372
Fork 1229
K
kafka-manager

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

未验证 提交 b3b88891 编写于 作者: E EricZeng 提交者： GitHub
浏览文件
操作

Merge pull request #251 from lucasun/master 

v2.4.0
上级 324b37b8 01c5de60
隐藏空白更改
内联 并排
Showing with 751 addition and 163 deletion
kafka-manager-console/src/component/flow-table/index.tsx
浏览文件 @ b3b88891
......@@ -68,8 +68,8 @@ export class StatusGraghCom<T extends IFlowInfo> extends React.Component {
public render() {
const statusData = this.getData();
const loading = this.getLoading();
if (!statusData) return null;
const data: any[] = [];
if (!statusData) return <Table columns={flowColumns} dataSource={data} />;
Object.keys(statusData).map((key) => {
if (statusData[key]) {
const v = key === 'byteIn' || key === 'byteOut' ? statusData[key].map(i => i && (i / 1024).toFixed(2)) :
......@@ -85,7 +85,7 @@ export class StatusGraghCom<T extends IFlowInfo> extends React.Component {
}
});
return (
<Table columns={flowColumns} dataSource={data} pagination={false} loading={loading}/>
<Table columns={flowColumns} dataSource={data} pagination={false} loading={loading} />
);
}
}
kafka-manager-console/src/component/x-form/index.less
浏览文件 @ b3b88891
.ant-input-number {
.ant-input-number, .ant-form-item-children .ant-select {
width: 314px
}
......
kafka-manager-console/src/constants/left-menu.ts
浏览文件 @ b3b88891
......@@ -59,6 +59,10 @@ export const adminMenu = [{
href: `/admin/bill`,
i: 'k-icon-renwuliebiao',
title: '用户账单',
},{
href: `/admin/operation-record`,
i: 'k-icon-operationrecord',
title: '操作记录',
}] as ILeftMenu[];
export const expertMenu = [{
......
kafka-manager-console/src/container/admin/cluster-detail/cluster-topic.tsx
浏览文件 @ b3b88891
......@@ -172,7 +172,7 @@ export class ClusterTopic extends SearchAndFilterContainer {
key: 'appName',
// width: '10%',
render: (val: string, record: IClusterTopics) => (
<Tooltip placement="bottomLeft" title={record.appId} >
<Tooltip placement="bottomLeft" title={val} >
{val}
</Tooltip>
),
......
kafka-manager-console/src/container/admin/cluster-detail/exclusive-cluster.tsx
浏览文件 @ b3b88891
......@@ -314,8 +314,7 @@ export class ExclusiveCluster extends SearchAndFilterContainer {
>
<div className="region-prompt">
<span>
由于该Region已被逻辑集群【 {this.state.logicalClusterName} 】使用
请先解除Region与逻辑集群的关系
该Region已被逻辑集群【 {this.state.logicalClusterName} 】使用，请先解除Region与逻辑集群的关系
</span>
</div>
</Modal>
......
kafka-manager-console/src/container/admin/cluster-detail/index.less
浏览文件 @ b3b88891
......@@ -16,7 +16,7 @@
.traffic-table {
margin: 10px 0;
min-height: 450px;
min-height: 330px;
.traffic-header {
width: 100%;
height: 44px;
......
kafka-manager-console/src/container/admin/cluster-list/index.tsx
浏览文件 @ b3b88891
......@@ -4,6 +4,7 @@ import { wrapper } from 'store';
import { observer } from 'mobx-react';
import { IXFormWrapper, IMetaData, IRegister } from 'types/base-type';
import { admin } from 'store/admin';
import { users } from 'store/users';
import { registerCluster, createCluster, pauseMonitoring } from 'lib/api';
import { SearchAndFilterContainer } from 'container/search-filter';
import { cluster } from 'store/cluster';
......@@ -78,34 +79,34 @@ export class ClusterList extends SearchAndFilterContainer {
disabled: item ? true : false,
},
},
{
key: 'idc',
label: '数据中心',
defaultValue: region.regionName,
rules: [{ required: true, message: '请输入数据中心' }],
attrs: {
placeholder: '请输入数据中心',
disabled: true,
},
},
{
key: 'mode',
label: '集群类型',
type: 'select',
options: cluster.clusterModes.map(ele => {
return {
label: ele.message,
value: ele.code,
};
}),
rules: [{
required: true,
message: '请选择集群类型',
}],
attrs: {
placeholder: '请选择集群类型',
},
},
// {
// key: 'idc',
// label: '数据中心',
// defaultValue: region.regionName,
// rules: [{ required: true, message: '请输入数据中心' }],
// attrs: {
// placeholder: '请输入数据中心',
// disabled: true,
// },
// },
// {
// key: 'mode',
// label: '集群类型',
// type: 'select',
// options: cluster.clusterModes.map(ele => {
// return {
// label: ele.message,
// value: ele.code,
// };
// }),
// rules: [{
// required: true,
// message: '请选择集群类型',
// }],
// attrs: {
// placeholder: '请选择集群类型',
// },
// },
{
key: 'kafkaVersion',
label: 'kafka版本',
......@@ -148,7 +149,7 @@ export class ClusterList extends SearchAndFilterContainer {
attrs: {
placeholder: `请输入JMX认证，例如：
{
"maxConn": 10, #KM对单台Broker对最大连接数
"maxConn": 10, #KM对单台Broker的最大jmx连接数
"username": "xxxxx", #用户名
"password": "xxxxx", #密码
"openSSL": true, #开启SSL，true表示开启SSL，false表示关闭
......@@ -276,32 +277,41 @@ export class ClusterList extends SearchAndFilterContainer {
public getColumns = () => {
const cols = getAdminClusterColumns();
const role = users.currentUser.role;
const col = {
title: '操作',
render: (value: string, item: IMetaData) => (
<>
<a
onClick={this.createOrRegisterCluster.bind(this, item)}
className="action-button"
>编辑
</a>
<Popconfirm
title={`确定${item.status === 1 ? '暂停' : '开始'}${item.clusterName}监控？`}
onConfirm={() => this.pauseMonitor(item)}
cancelText="取消"
okText="确认"
>
<Tooltip title="暂停监控将无法正常监控指标信息，建议开启监控">
{
role && role === 2 ? <>
<a
onClick={this.createOrRegisterCluster.bind(this, item)}
className="action-button"
>编辑
</a>
<Popconfirm
title={`确定${item.status === 1 ? '暂停' : '开始'}${item.clusterName}监控？`}
onConfirm={() => this.pauseMonitor(item)}
cancelText="取消"
okText="确认"
>
{item.status === 1 ? '暂停监控' : '开始监控'}
<Tooltip placement="left" title="暂停监控将无法正常监控指标信息，建议开启监控">
<a
className="action-button"
>
{item.status === 1 ? '暂停监控' : '开始监控'}
</a>
</Tooltip>
</Popconfirm>
<a onClick={this.showMonitor.bind(this, item)}>
删除
</a>
</Tooltip>
</Popconfirm>
<a onClick={this.showMonitor.bind(this, item)}>
删除
</a>
</> : <Tooltip placement="left" title="该功能只对运维人员开放">
<a style={{ color: '#a0a0a0' }} className="action-button">编辑</a>
<a className="action-button" style={{ color: '#a0a0a0' }}>{item.status === 1 ? '暂停监控' : '开始监控'}</a>
<a style={{ color: '#a0a0a0' }}>删除</a>
</Tooltip>
}
</>
),
};
......@@ -310,6 +320,7 @@ export class ClusterList extends SearchAndFilterContainer {
}
public renderClusterList() {
const role = users.currentUser.role;
return (
<>
<div className="container">
......@@ -318,7 +329,14 @@ export class ClusterList extends SearchAndFilterContainer {
{this.renderSearch('', '请输入集群名称')}
<li className="right-btn-1">
<a style={{ display: 'inline-block', marginRight: '20px' }} href={indexUrl.cagUrl} target="_blank">集群接入指南</a>
<Button type="primary" onClick={this.createOrRegisterCluster.bind(this, null)}>接入集群</Button>
{
role && role === 2 ?
<Button type="primary" onClick={this.createOrRegisterCluster.bind(this, null)}>接入集群</Button>
:
<Tooltip placement="left" title="该功能只对运维人员开放" trigger='hover'>
<Button disabled type="primary">接入集群</Button>
</Tooltip>
}
</li>
</ul>
</div>
......
kafka-manager-console/src/container/admin/index.tsx
浏览文件 @ b3b88891
......@@ -11,3 +11,5 @@ export * from './operation-management/migration-detail';
export * from './configure-management';
export * from './individual-bill';
export * from './bill-detail';
export * from './operation-record';
kafka-manager-console/src/container/admin/operation-record/config.tsx 0 → 100644
浏览文件 @ b3b88891
import * as React from 'react';
import { cellStyle } from 'constants/table';
import { Tooltip } from 'antd';
import { admin } from 'store/admin';
import moment = require('moment');
const moduleList = [
{ moduleId: 0, moduleName: 'Topic' },
{ moduleId: 1, moduleName: '应用' },
{ moduleId: 2, moduleName: '配额' },
{ moduleId: 3, moduleName: '权限' },
{ moduleId: 4, moduleName: '集群' },
{ moduleId: 5, moduleName: '分区' },
{ moduleId: 6, moduleName: 'Gateway配置' },
]
export const operateList = {
0: '新增',
1: '删除',
2: '修改'
}
// [
// { operate: '新增', operateId: 0 },
// { operate: '删除', operateId: 1 },
// { operate: '修改', operateId: 2 },
// ]
export const getJarFuncForm: any = (props: any) => {
const formMap = [
{
key: 'moduleId',
label: '模块',
type: 'select',
attrs: {
style: {
width: '130px'
},
placeholder: '请选择模块',
},
options: moduleList.map(item => {
return {
label: item.moduleName,
value: item.moduleId
}
}),
formAttrs: {
initialvalue: 0,
},
},
{
key: 'operator',
label: '操作人',
type: 'input',
attrs: {
style: {
width: '170px'
},
placeholder: '请输入操作人'
},
getvaluefromevent: (event: any) => {
return event.target.value.replace(/\s+/g, '')
},
},
// {
// key: 'resource',
// label: '资源名称',
// type: 'input',
// attrs: {
// style: {
// width: '170px'
// },
// placeholder: '请输入资源名称'
// },
// },
// {
// key: 'content',
// label: '操作内容',
// type: 'input',
// attrs: {
// style: {
// width: '170px'
// },
// placeholder: '请输入操作内容'
// },
// },
]
return formMap;
}
export const getOperateColumns = () => {
const columns: any = [
{
title: '模块',
dataIndex: 'module',
key: 'module',
align: 'center',
width: '12%'
},
{
title: '资源名称',
dataIndex: 'resource',
key: 'resource',
align: 'center',
width: '12%'
},
{
title: '操作内容',
dataIndex: 'content',
key: 'content',
align: 'center',
width: '25%',
onCell: () => ({
style: {
maxWidth: 350,
...cellStyle,
},
}),
render: (text: string, record: any) => {
return (
<Tooltip placement="topLeft" title={text} >{text}</Tooltip>);
},
},
{
title: '操作人',
dataIndex: 'operator',
align: 'center',
width: '12%'
},
];
return columns
}
\ No newline at end of file
kafka-manager-console/src/container/admin/operation-record/index.tsx 0 → 100644
浏览文件 @ b3b88891
import * as React from 'react';
import { observer } from 'mobx-react';
import { SearchAndFilterContainer } from 'container/search-filter';
import { IXFormWrapper, IMetaData, IRegister } from 'types/base-type';
import { admin } from 'store/admin';
import { customPagination, cellStyle } from 'constants/table';
import { Table, Tooltip } from 'component/antd';
import { timeFormat } from 'constants/strategy';
import { SearchFormComponent } from '../searchForm';
import { getJarFuncForm, operateList, getOperateColumns } from './config'
import moment = require('moment');
import { tableFilter } from 'lib/utils';
@observer
export class OperationRecord extends SearchAndFilterContainer {
public state: any = {
searchKey: '',
filteredInfo: null,
sortedInfo: null,
};
public getData<T extends IMetaData>(origin: T[]) {
let data: T[] = origin;
let { searchKey } = this.state;
searchKey = (searchKey + '').trim().toLowerCase();
data = searchKey ? origin.filter((item: IMetaData) =>
(item.clusterName !== undefined && item.clusterName !== null) && item.clusterName.toLowerCase().includes(searchKey as string),
) : origin;
return data;
};
public searchForm = (params: any) => {
// this.props.setFuncSubValue(params)
// getSystemFuncList(params).then(res => {
// this.props.setSysFuncList(res.data)
// this.props.setPagination(res.pagination)
// })
const { operator, moduleId } = params || {}
operator ? admin.getOperationRecordData(params) : admin.getOperationRecordData({ moduleId })
// getJarList(params).then(res => {
// this.props.setJarList(res.data)
// this.props.setPagination(res.pagination)
// })
}
public clearAll = () => {
this.setState({
filteredInfo: null,
sortedInfo: null,
});
};
public setHandleChange = (pagination: any, filters: any, sorter: any) => {
this.setState({
filteredInfo: filters,
sortedInfo: sorter,
});
}
public renderOperationRecordList() {
let { sortedInfo, filteredInfo } = this.state;
sortedInfo = sortedInfo || {};
filteredInfo = filteredInfo || {};
const operatingTime = Object.assign({
title: '操作时间',
dataIndex: 'modifyTime',
key: 'modifyTime',
align: 'center',
sorter: (a: any, b: any) => a.modifyTime - b.modifyTime,
render: (t: number) => moment(t).format(timeFormat),
width: '15%',
sortOrder: sortedInfo.columnKey === 'modifyTime' && sortedInfo.order,
});
const operatingPractice = Object.assign({
title: '行为',
dataIndex: 'operate',
key: 'operate',
align: 'center',
width: '12%',
filters: tableFilter<any>(this.getData(admin.oRList), 'operateId', operateList),
// filteredValue: filteredInfo.operate || null,
onFilter: (value: any, record: any) => {
return record.operateId === value
}
}, this.renderColumnsFilter('modifyTime'))
const columns = getOperateColumns()
columns.splice(0, 0, operatingTime);
columns.splice(3, 0, operatingPractice);
return (
<>
<div className="container">
<div className="table-operation-panel">
<SearchFormComponent
formMap={getJarFuncForm()}
onSubmit={(params: any) => this.searchForm(params)}
clearAll={() => this.clearAll()}
isReset={true}
/>
</div>
<div className="table-wrapper">
<Table
rowKey="key"
loading={admin.loading}
dataSource={this.getData(admin.oRList)}
columns={columns}
pagination={customPagination}
bordered
onChange={this.setHandleChange}
/>
</div>
</div>
</>
)
};
componentDidMount() {
admin.getOperationRecordData({ moduleId: 0 });
}
render() {
return <div>
{
this.renderOperationRecordList()
}
</div>
}
}
\ No newline at end of file
kafka-manager-console/src/container/admin/searchForm.tsx 0 → 100644
浏览文件 @ b3b88891
import * as React from 'react';
import { Select, Input, InputNumber, Form, Switch, Checkbox, DatePicker, Radio, Upload, Button, Icon, Tooltip } from 'component/antd';
// import './index.less';
const Search = Input.Search;
export interface IFormItem {
key: string;
label: string;
type: string;
value?: string;
// 内部组件属性注入
attrs?: any;
// form属性注入
formAttrs?: any;
defaultValue?: string | number | any[];
rules?: any[];
invisible?: boolean;
getvaluefromevent: Function;
}
interface SerachFormProps {
formMap: IFormItem[];
// formData: any;
form: any;
onSubmit: Function;
isReset?: boolean;
clearAll: Function;
layout?: 'inline' | 'horizontal' | 'vertical';
}
export interface IFormSelect extends IFormItem {
options: Array<{ key?: string | number, value: string | number, label: string }>;
}
class SearchForm extends React.Component<SerachFormProps>{
public onSubmit = () => {
// this.props.onSubmit()
//
}
public renderFormItem(item: IFormItem) {
switch (item.type) {
default:
case 'input':
return <Input key={item.key} {...item.attrs} />;
case 'select':
return (
<Select
// size="small"
key={item.key}
{...item.attrs}
invisibleValue={item.formAttrs.invisibleValue}
>
{(item as IFormSelect).options && (item as IFormSelect).options.map((v, index) => (
<Select.Option
key={v.value || v.key || index}
value={v.value}
>
{v.label}
{/* <Tooltip placement='left' title={v.value}>
{v.label}
</Tooltip> */}
</Select.Option>
))}
</Select>
);
}
}
public theQueryClick = (value: any) => {
this.props.onSubmit(value)
this.props.clearAll()
// this.props.form.resetFields()
}
public resetClick = () => {
this.props.form.resetFields()
this.props.clearAll()
this.theQueryClick(this.props.form.getFieldsValue())
}
public render() {
const { form, formMap, isReset } = this.props;
const { getFieldDecorator, getFieldsValue } = form;
return (
<Form layout='inline' onSubmit={this.onSubmit}>
{
formMap.map(formItem => {
// const { initialValue, valuePropName } = this.handleFormItem(formItem, formData);
// const getFieldValue = {
// initialValue,
// rules: formItem.rules || [{ required: false, message: '' }],
// valuePropName,
// };
return (
<Form.Item
key={formItem.key}
label={formItem.label}
{...formItem.formAttrs}
>
{getFieldDecorator(formItem.key, {
initialValue: formItem.formAttrs?.initialvalue,
getValueFromEvent: formItem?.getvaluefromevent,
})(
this.renderFormItem(formItem),
)}
</Form.Item>
);
})
}
<Form.Item>
{
isReset && <Button style={{ width: '80px', marginRight: '20px' }} type="primary" onClick={() => this.resetClick()}>重置</Button>
}
<Button style={{ width: '80px' }} type="primary" onClick={() => this.theQueryClick(getFieldsValue())}>查询</Button>
</Form.Item>
</Form>
);
}
}
export const SearchFormComponent = Form.create<SerachFormProps>({ name: 'search-form' })(SearchForm);
\ No newline at end of file
kafka-manager-console/src/container/alarm/add-alarm/filter-form.tsx
浏览文件 @ b3b88891
......@@ -149,9 +149,9 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {
public handleSelectChange = (e: string, type: 'topic' | 'consumerGroup' | 'location') => {
switch (type) {
case 'topic':
if (!this.clusterId) {
return message.info('请选择集群');
}
// if (!this.clusterId) {
// return message.info('请选择集群');
// }
this.topicName = e;
const type = this.dealMonitorType();
if (['kafka-consumer-maxLag', 'kafka-consumer-maxDelayTime', 'kafka-consumer-lag'].indexOf(type) > -1) {
......
kafka-manager-console/src/container/app/app-list.tsx
浏览文件 @ b3b88891
......@@ -52,8 +52,7 @@ export class CommonAppList extends SearchAndFilterContainer {
},
}),
render: (text: string, record: IAppItem) => {
return (
<Tooltip placement="bottomLeft" title={record.name}>{text}</Tooltip>);
return (<Tooltip placement="bottomLeft" title={record.name}>{text}</Tooltip>);
},
},
{
......@@ -103,7 +102,7 @@ export class CommonAppList extends SearchAndFilterContainer {
}
public getOnlineConnect(record: IAppItem) {
modal.showOfflineAppModal(record.appId);
modal.showOfflineAppNewModal(record.appId);
}
public getData<T extends IAppItem>(origin: T[]) {
......@@ -114,7 +113,7 @@ export class CommonAppList extends SearchAndFilterContainer {
data = searchKey ? origin.filter((item: IAppItem) =>
((item.name !== undefined && item.name !== null) && item.name.toLowerCase().includes(searchKey as string)) ||
((item.principals !== undefined && item.principals !== null) && item.principals.toLowerCase().includes(searchKey as string)) ||
((item.appId !== undefined && item.appId !== null) && item.appId.toLowerCase().includes(searchKey as string)) ) : origin;
((item.appId !== undefined && item.appId !== null) && item.appId.toLowerCase().includes(searchKey as string))) : origin;
return data;
}
......
kafka-manager-console/src/container/cluster/my-cluster.tsx
浏览文件 @ b3b88891
......@@ -29,16 +29,16 @@ export class MyCluster extends SearchAndFilterContainer {
public applyCluster() {
const xFormModal = {
formMap: [
{
key: 'idc',
label: '数据中心',
defaultValue: region.regionName,
rules: [{ required: true, message: '请输入数据中心' }],
attrs: {
placeholder: '请输入数据中心',
disabled: true,
},
},
// {
// key: 'idc',
// label: '数据中心',
// defaultValue: region.regionName,
// rules: [{ required: true, message: '请输入数据中心' }],
// attrs: {
// placeholder: '请输入数据中心',
// disabled: true,
// },
// },
{
key: 'appId',
label: '所属应用',
......
kafka-manager-console/src/container/expert/topic-governance/index.tsx
浏览文件 @ b3b88891
......@@ -133,15 +133,15 @@ export class GovernanceTopic extends SearchAndFilterContainer {
width: '30%',
sorter: (a: IResource, b: IResource) => a.topicName.charCodeAt(0) - b.topicName.charCodeAt(0),
render: (text: string, item: IResource) =>
(
<Tooltip placement="bottomLeft" title={text}>
<a
// tslint:disable-next-line:max-line-length
href={`${this.urlPrefix}/topic/topic-detail?clusterId=${item.clusterId}&topic=${item.topicName}&isPhysicalClusterId=true&region=${region.currentRegion}`}
>
{text}
</a>
</Tooltip>),
(
<Tooltip placement="bottomLeft" title={text}>
<a
// tslint:disable-next-line:max-line-length
href={`${this.urlPrefix}/topic/topic-detail?clusterId=${item.clusterId}&topic=${item.topicName}&isPhysicalClusterId=true&region=${region.currentRegion}`}
>
{text}
</a>
</Tooltip>),
},
{
title: '所在集群',
......@@ -215,7 +215,7 @@ export class GovernanceTopic extends SearchAndFilterContainer {
return (
<>
{this.pendingTopic(this.getData(expert.resourceData))}
{this.pendingTopic(this.getData(expert.resourceData))}
</>
);
}
......
kafka-manager-console/src/container/header/index.less
浏览文件 @ b3b88891
......@@ -16,6 +16,14 @@
line-height: 64px;
vertical-align: middle;
}
.kafka-header-version{
display: inline-block;
vertical-align: middle;
padding-top:5px;
font-size: 12px;
margin-left:10px;
color:#a0a0a0;
}
}
.mid-content {
......
kafka-manager-console/src/container/header/index.tsx
浏览文件 @ b3b88891
......@@ -145,6 +145,8 @@ export const Header = observer((props: IHeader) => {
<div className="left-content">
<img className="kafka-header-icon" src={logoUrl} alt="" />
<span className="kafka-header-text">Kafka Manager</span>
<a className='kafka-header-version' href="https://github.com/didi/Logi-KafkaManager/releases" target='_blank'>v2.4.0</a>
{/* 添加版本超链接 */}
</div>
<div className="mid-content">
{headerMenu.map((item: IMenuItem, index: number) =>
......
kafka-manager-console/src/container/modal/admin/cluster.ts
浏览文件 @ b3b88891
......@@ -22,11 +22,11 @@ export const showEditClusterTopic = (item: IClusterTopics) => {
},
{
key: 'appId',
label: '应用ID',
label: '应用名称',
type: 'select',
options: app.adminAppData.map(item => {
return {
label: item.appId,
label: item.name,
value: item.appId,
};
}),
......@@ -61,7 +61,7 @@ export const showEditClusterTopic = (item: IClusterTopics) => {
attrs: {
placeholder: '请输入保存时间',
suffix: '小时',
prompttype:'修改保存时间，预计一分钟左右生效!'
prompttype: '修改保存时间，预计一分钟左右生效!'
},
},
{
......
kafka-manager-console/src/container/modal/admin/confirm-detail-topic.tsx
浏览文件 @ b3b88891
......@@ -35,7 +35,6 @@ class CustomForm extends React.Component<IXFormProps> {
this.props.form.validateFields((err: any, values: any) => {
const deleteData = this.props.formData;
if (!err) {
// console.log('values', values);
if (values.topicName !== this.props.formData.topicName) {
notification.error({ message: 'topic名称不正确，请重新输入' });
} else {
......@@ -77,7 +76,6 @@ class CustomForm extends React.Component<IXFormProps> {
}
public render() {
// console.log('props', this.props);
const { formData = {} as any, visible } = this.props;
const { getFieldDecorator } = this.props.form;
let metadata = [] as IBrokersMetadata[];
......
kafka-manager-console/src/container/modal/admin/expand-partition.tsx
浏览文件 @ b3b88891
......@@ -111,11 +111,11 @@ class CustomForm extends React.Component<IXFormProps> {
})(<Input placeholder="请输入分区数" />)}
</Form.Item>
<Form.Item label="类型">
{/* <Form.Item label={this.state.checked ? 'Region类型' : 'Borker类型'} > */}
{/* <Form.Item label={this.state.checked ? 'Region类型' : 'Broker类型'} > */}
{/* <Switch onChange={(checked) => this.onSwitchChange(checked)} /> */}
<Radio.Group value={this.state.checked ? 'region' : 'broker'} onChange={(e) => { this.onSwitchChange(e.target.value === 'region' ? true : false); }}>
<Radio.Button value="region">Region类型</Radio.Button>
<Radio.Button value="broker">Borker类型</Radio.Button>
<Radio.Button value="broker">Broker类型</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item label="brokerIdList" style={{ display: this.state.checked ? 'none' : '' }}>
......
kafka-manager-console/src/container/modal/admin/task.ts
浏览文件 @ b3b88891
......@@ -28,8 +28,8 @@ const updateInputModal = (status?: string) => {
formMap[4].invisible = status === 'region';
formMap[5].invisible = status !== 'region';
formMap[4].rules = [{required: status !== 'region'}];
formMap[5].rules = [{required: status === 'region'}];
formMap[4].rules = [{ required: status !== 'region' }];
formMap[5].rules = [{ required: status === 'region' }];
// tslint:disable-next-line:no-unused-expression
wrapper.ref && wrapper.ref.updateFormMap$(formMap, wrapper.xFormWrapper.formData);
};
......@@ -103,7 +103,7 @@ export const createMigrationTasks = () => {
label: 'Region',
value: 'region',
}, {
label: 'Borker',
label: 'Broker',
value: 'broker',
}],
rules: [{
......@@ -141,7 +141,7 @@ export const createMigrationTasks = () => {
placeholder: '请选择目标Region',
},
},
{
key: 'beginTime',
label: '计划开始时间',
......
kafka-manager-console/src/container/modal/offline-app-modal-new.tsx 0 → 100644
浏览文件 @ b3b88891
import * as React from 'react';
import { Table, Modal, Tooltip, Icon, message, notification, Alert, Button } from 'component/antd';
import { app } from 'store/app';
import { getApplyOnlineColumns } from 'container/topic/config';
import { observer } from 'mobx-react';
import { modal } from 'store/modal';
import { users } from 'store/users';
import { urlPrefix } from 'constants/left-menu';
import { region } from 'store';
@observer
export class ConnectAppNewList extends React.Component {
public componentDidMount() {
app.getAppsConnections(modal.params);
}
public handleCancel = () => {
app.setAppsConnections([]);
modal.close();
}
public handleSubmit = () => {
const connectionList = app.appsConnections;
if (connectionList && connectionList.length) {
return message.warning('存在连接信息，无法申请下线！');
}
const offlineParams = {
type: 11,
applicant: users.currentUser.username,
description: '',
extensions: JSON.stringify({ appId: modal.params }),
};
app.applyAppOffline(offlineParams).then((data: any) => {
notification.success({ message: '申请下线成功' });
window.location.href = `${urlPrefix}/user/order-detail/?orderId=${data.id}&region=${region.currentRegion}`;
});
modal.close();
}
public render() {
const connectionList = app.appsConnections;
return (
<>
<Modal
visible={true}
className="stream-debug-modal"
title="提示"
maskClosable={false}
onCancel={this.handleCancel}
// onOk={this.handleSubmit}
// okText="确认"
// cancelText="取消"
okButtonProps={{ disabled: app.connectLoading || !!app.appsConnections.length }}
footer={connectionList && connectionList.length ?
<Button type="primary" onClick={this.handleCancel}>确定</Button>
:
<>
<Button onClick={this.handleCancel}>取消</Button>
<Button type="primary" onClick={this.handleSubmit}>确定</Button>
</>
}
width={500}
>
<div style={{ textAlign: 'center', fontWeight: "bolder" }}>
{
connectionList && connectionList.length
?
<span>该应用已与Topic关联，请先解除应用与Topic之间的关系。<a href={`${urlPrefix}/topic/app-detail?appId=${modal.params}`}>点击查看</a></span>
:
<span>应用下线后，AppID、密钥将会失效，请谨慎操作！</span>
}
</div>
</Modal>
</>
);
}
}
kafka-manager-console/src/container/modal/order.tsx
浏览文件 @ b3b88891
......@@ -4,6 +4,7 @@ import { message, Icon, notification, Modal, Table, Tooltip } from 'component/an
import { IApprovalOrder, IBaseOrder, IOrderInfo } from 'types/base-type';
import { admin } from 'store/admin';
import { modal } from 'store/modal';
import { cluster } from 'store/cluster';
import { cellStyle } from 'constants/table';
import * as React from 'react';
......@@ -37,6 +38,12 @@ const renderModalTilte = (type: number, status: number) => {
export const showApprovalModal = (info: IOrderInfo, status: number, from?: string) => {
const { id, type } = info;
const formMap = [{
key: 'clusterId',
label: '所属集群',
type: 'input_number',
defaultValue: info.detail.logicalClusterName,
attrs: { disabled: true },
}, {
key: 'partitionNum',
label: '分区数',
type: 'input_number',
......@@ -87,7 +94,7 @@ export const showApprovalModal = (info: IOrderInfo, status: number, from?: strin
label: 'Region',
value: 'region',
}, {
label: 'Borker',
label: 'Broker',
value: 'broker',
}],
rules: [{ required: false, message: '请选择类型' }],
......
kafka-manager-console/src/container/modal/topic.tsx
浏览文件 @ b3b88891
......@@ -399,8 +399,8 @@ export const updateAllTopicFormModal = () => {
const formMap = wrapper.xFormWrapper.formMap;
if (topic.authorities) {
const { consume, send, checkStatus } = judgeAccessStatus(topic.authorities.access);
formMap[3].defaultValue = checkStatus;
formMap[3].options = [{
formMap[2].defaultValue = checkStatus;
formMap[2].options = [{
label: `消费权限${consume ? '（已拥有）' : ''}`,
value: '1',
disabled: consume,
......@@ -409,7 +409,7 @@ export const updateAllTopicFormModal = () => {
value: '2',
disabled: send,
}];
formMap[3].rules = [{
formMap[2].rules = [{
required: true,
validator: (rule: any, value: any, callback: any) => getPowerValidator(rule, value, callback, checkStatus, 'allTopic'),
}];
......@@ -476,7 +476,6 @@ export const showAllPermissionModal = (item: ITopic) => {
const showAllPermission = (appId: string, item: ITopic, access: number) => {
const { consume, send, checkStatus } = judgeAccessStatus(access);
const xFormModal = {
formMap: [
{
......@@ -489,16 +488,6 @@ const showAllPermission = (appId: string, item: ITopic, access: number) => {
disabled: true,
},
},
{
key: 'clusterName',
label: '集群名称',
defaultValue: item.clusterName,
rules: [{ required: true, message: '请输入集群名称' }],
attrs: {
placeholder: '请输入集群名称',
disabled: true,
},
},
{
key: 'appId',
label: '绑定应用',
......@@ -526,6 +515,26 @@ const showAllPermission = (appId: string, item: ITopic, access: number) => {
validator: (rule: any, value: any, callback: any) => getPowerValidator(rule, value, callback, checkStatus, 'allTopic'),
}],
},
// {
// key: 'clusterName',
// label: '集群名称',
// defaultValue: item.clusterName,
// rules: [{ required: true, message: '请输入集群名称' }],
// attrs: {
// placeholder: '请输入集群名称',
// disabled: true,
// },
// },
// {
// key: 'clusterName',
// label: '集群名称',
// defaultValue: item.clusterName,
// rules: [{ required: true, message: '请输入集群名称' }],
// attrs: {
// placeholder: '请输入集群名称',
// disabled: true,
// },
// },
{
key: 'description',
label: '申请原因',
......@@ -587,16 +596,16 @@ export const showPermissionModal = (item: ITopic) => {
disabled: true,
},
},
{
key: 'clusterName',
label: '集群名称',
defaultValue: item.clusterName,
rules: [{ required: true, message: '请输入集群名称' }],
attrs: {
placeholder: '请输入集群名称',
disabled: true,
},
},
// {
// key: 'clusterName',
// label: '集群名称',
// defaultValue: item.clusterName,
// rules: [{ required: true, message: '请输入集群名称' }],
// attrs: {
// placeholder: '请输入集群名称',
// disabled: true,
// },
// },
{
key: 'appName',
label: '绑定应用',
......
kafka-manager-console/src/container/search-filter.tsx
浏览文件 @ b3b88891
......@@ -194,7 +194,7 @@ export class SearchAndFilterContainer extends React.Component<any, ISearchAndFil
);
}
public renderColumnsFilter = (type: string) => {
public renderColumnsFilter = (type: string, params?: any) => {
return {
filterIcon: this.renderFilterIcon.bind(null, type),
filterDropdownVisible: this.state[type] as boolean,
......
kafka-manager-console/src/container/staff-select.tsx
浏览文件 @ b3b88891
......@@ -28,7 +28,8 @@ export class StaffSelect extends React.Component<IStaffSelectProps> {
public getStaffList = () => {
const { value } = this.props;
const current = users.currentUser.username || getCookie('username');
const principals = value || (current ? [current] : []);
const principals = [''];
// const principals = value || (current ? [current] : []);
const promises: any[] = [];
for (const item of principals) {
......@@ -64,7 +65,6 @@ export class StaffSelect extends React.Component<IStaffSelectProps> {
const { value, isDisabled } = this.props;
const current = users.currentUser.username || getCookie('username');
const principals = value || (current ? [current] : []);
return (
<Select
mode="multiple"
......@@ -72,6 +72,7 @@ export class StaffSelect extends React.Component<IStaffSelectProps> {
defaultValue={principals}
onChange={(e: string[]) => this.handleChange(e)}
onSearch={(e: string) => this.handleSearch(e)}
onFocus={() => this.getFocus()}
disabled={isDisabled}
{...searchProps}
>
......@@ -83,6 +84,10 @@ export class StaffSelect extends React.Component<IStaffSelectProps> {
);
}
public getFocus() {
this.getStaffList();
}
public handleSearch(params: string) {
debounce(() => {
getStaff(params).then((data: IStaff[]) => {
......@@ -98,9 +103,9 @@ export class StaffSelect extends React.Component<IStaffSelectProps> {
});
}, 300)();
}
public handleChange(params: string[]) {
const { onChange } = this.props;
// tslint:disable-next-line:no-unused-expression
onChange && onChange(params);
}
......
kafka-manager-console/src/container/topic/topic-detail/base-information.tsx
浏览文件 @ b3b88891
......@@ -129,16 +129,17 @@ export class BaseInformation extends React.Component<IInfoProps> {
}
public realTimeTraffic() {
const realTraffic = topic.realTraffic;
if (realTraffic) {
return (
<>
<Spin spinning={topic.realLoading}>
{renderTrafficTable(this.updateRealStatus, StatusGragh)}
</Spin>
</>
);
}
// const realTraffic = topic.realTraffic;
// if (realTraffic) {
return (
<>
<Spin spinning={topic.realLoading}>
{renderTrafficTable(this.updateRealStatus, StatusGragh)}
</Spin>
</>
);
// }
}
public realTimeConsume() {
......
kafka-manager-console/src/container/user-center/config.tsx
浏览文件 @ b3b88891
......@@ -30,7 +30,7 @@ export const getInfoRenderItem = (orderInfo: IOrderInfo, result: boolean) => {
value: orderInfo.detail.principals,
}];
const clusterTypelist: ILabelValue[] = [ {
const clusterTypelist: ILabelValue[] = [{
label: '物理集群名称',
value: orderInfo.detail.physicalClusterName,
}, {
......@@ -80,23 +80,25 @@ export const getInfoRenderItem = (orderInfo: IOrderInfo, result: boolean) => {
phyAuthOfflineList.splice(3, 0, ...clusterTypelist);
const clusterInfoList: ILabelValue[] = [{
label: '流入流量',
value: `${transBToMB(orderInfo.detail.bytesIn)} MB/s`,
}, {
label: '数据中心',
value: orderInfo.detail.idc,
}, {
label: '集群类型',
value: clusterTypeMap[orderInfo.detail.mode],
}, {
label: '应用ID',
value: orderInfo.detail.appId,
},
label: '流入流量',
value: `${transBToMB(orderInfo.detail.bytesIn)} MB/s`,
},
// {
// label: '数据中心',
// value: orderInfo.detail.idc,
// },
{
label: '集群类型',
value: clusterTypeMap[orderInfo.detail.mode],
}, {
label: '应用ID',
value: orderInfo.detail.appId,
},
];
const clusterOfflineList: ILabelValue[] = expansionList;
const phyClusterOfflineList: ILabelValue[] = clusterTypelist;
const maxAvgBytesIn = orderInfo.detail.maxAvgBytesInList && orderInfo.detail.maxAvgBytesInList.map(item => {
const maxAvgBytesIn = orderInfo.detail.maxAvgBytesInList && orderInfo.detail.maxAvgBytesInList.map(item => {
const val = `${transBToMB(item)} MB/s`;
return val;
});
......@@ -125,18 +127,18 @@ export const getInfoRenderItem = (orderInfo: IOrderInfo, result: boolean) => {
phyQuotaInfoList.splice(3, 0, ...clusterTypelist);
const partitionList: ILabelValue[] = expansionList.concat([{
label: 'Topic名称',
value: orderInfo.detail.topicName,
}, {
label: '申请分区数',
value: orderInfo.detail.needIncrPartitionNum,
}, {
label: '当前流入流量',
value: `${transBToMB(orderInfo.detail.bytesIn)} MB/s`,
}, {
label: '近三天峰值流入流量',
value: maxAvgBytesIn && maxAvgBytesIn.join('、'),
},
label: 'Topic名称',
value: orderInfo.detail.topicName,
}, {
label: '申请分区数',
value: orderInfo.detail.needIncrPartitionNum,
}, {
label: '当前流入流量',
value: `${transBToMB(orderInfo.detail.bytesIn)} MB/s`,
}, {
label: '近三天峰值流入流量',
value: maxAvgBytesIn && maxAvgBytesIn.join('、'),
},
]);
const phyPartitionList: ILabelValue[] = partitionList.filter(i => !cluster.includes(i.label));
......
kafka-manager-console/src/container/user-center/order-detail.tsx
浏览文件 @ b3b88891
......@@ -133,6 +133,12 @@ export class OrderDetail extends React.Component {
width: '20%',
render: (t: string) => <span>{t === 'consumer' ? '消费' : '生产'}</span>,
},
// {
// title: '客户端语言',
// dataIndex: 'language',
// key: 'language',
// width: '20%',
// },
];
return (
<>
......
kafka-manager-console/src/container/wrapper/custom-modal.tsx
浏览文件 @ b3b88891
......@@ -3,6 +3,7 @@ import { observer } from 'mobx-react';
import { modal } from 'store/modal';
import { ConnectTopicList } from '../modal/connect-topic-list';
import { ConnectAppList } from '../modal/offline-app-modal';
import { ConnectAppNewList } from '../modal/offline-app-modal-new';
import { CancelTopicPermission } from 'container/modal/cancel-topic-permission';
import { OfflineClusterModal } from 'container/modal/offline-cluster-modal';
import { RenderOrderOpResult } from 'container/modal/order';
......@@ -22,6 +23,7 @@ export default class AllCustomModalInOne extends React.Component {
const modalMap = {
offlineTopicModal: <ConnectTopicList />,
offlineAppNewModal: <ConnectAppNewList />,
offlineAppModal: <ConnectAppList />,
cancelTopicPermission: <CancelTopicPermission />,
offlineClusterModal: <OfflineClusterModal />,
......
kafka-manager-console/src/lib/api.ts
浏览文件 @ b3b88891
......@@ -418,6 +418,13 @@ export const getMetaData = (needDetail: boolean = true) => {
return fetch(`/rd/clusters/basic-info?need-detail=${needDetail}`);
};
export const getOperationRecordData = (params: any) => {
return fetch(`/rd/operate-record`,{
method: 'POST',
body: JSON.stringify(params),
});
};
export const getConfigure = () => {
return fetch(`/rd/configs`);
};
......
kafka-manager-console/src/routers/page/admin.tsx
浏览文件 @ b3b88891
......@@ -3,7 +3,7 @@ import CommonRoutePage from './common';
import urlParser from 'lib/url-parser';
import urlQuery from 'store/url-query';
import { AppDetail } from 'container/app';
import { AdminAppList, ClusterList, ClusterDetail, BrokerDetail, UserManagement, VersionManagement, OperationManagement, OperationDetail, BillManagement, ConfigureManagement, IndividualBill, MigrationDetail, BillDetail } from 'container/admin';
import { AdminAppList, ClusterList, ClusterDetail, BrokerDetail, UserManagement, VersionManagement, OperationManagement, OperationDetail, BillManagement, ConfigureManagement, IndividualBill, MigrationDetail, BillDetail, OperationRecord } from 'container/admin';
import { PlatformManagement } from 'container/admin/platform-management';
export default class Home extends React.Component<any> {
......@@ -52,7 +52,11 @@ export default class Home extends React.Component<any> {
path: '/admin/migration-detail',
exact: true,
component: MigrationDetail,
}];
}, {
path: '/admin/operation-record',
exact: true,
component: OperationRecord,
},];
constructor(props: any) {
super(props);
......@@ -66,7 +70,7 @@ export default class Home extends React.Component<any> {
public render() {
return (
<CommonRoutePage pageRoute={this.pageRoute} mode="admin" active="admin"/>
<CommonRoutePage pageRoute={this.pageRoute} mode="admin" active="admin" />
);
}
}
kafka-manager-console/src/store/admin.ts
浏览文件 @ b3b88891
......@@ -9,6 +9,7 @@ import {
getTopicsBasicInfo,
getTasksKafkaFiles,
getMetaData,
getOperationRecordData,
getConfigure,
addNewConfigure,
editConfigure,
......@@ -103,6 +104,14 @@ class Admin {
@observable
public metaList: IMetaData[] = [];
@observable
public oRList: any[] = [];
@observable
public oRparams:any={
moduleId:0
};
@observable
public configureList: IConfigure[] = [];
......@@ -319,6 +328,15 @@ class Admin {
}) : [];
}
@action.bound
public setOperationRecordList(data:any){
this.setLoading(false);
this.oRList = data ? data.map((item:any, index: any) => {
item.key = index;
return item;
}) : [];
}
@action.bound
public setConfigure(data: IConfigure[]) {
this.configureList = data ? data.map((item, index) => {
......@@ -657,6 +675,12 @@ class Admin {
getMetaData(needDetail).then(this.setMetaList);
}
public getOperationRecordData(params: any) {
this.setLoading(true);
this.oRparams = params
getOperationRecordData(params).then(this.setOperationRecordList);
}
public getConfigure() {
getConfigure().then(this.setConfigure);
}
......
kafka-manager-console/src/store/modal.ts
浏览文件 @ b3b88891
......@@ -31,6 +31,12 @@ class CustomModal {
this.params = value;
}
@action.bound
public showOfflineAppNewModal(value: any) {
this.modalId = 'offlineAppNewModal';
this.params = value;
}
@action.bound
public showOrderOpResult() {
this.modalId = 'orderOpResult';
......
kafka-manager-console/src/styles/font.css
浏览文件 @ b3b88891
......@@ -6,6 +6,16 @@
url('//at.alicdn.com/t/font_1251424_q66z80q0hio.ttf?t=1577526422376') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_1251424_q66z80q0hio.svg?t=1577526422376#kafka-manager') format('svg'); /* iOS 4.1- */
}
@font-face {
font-family: 'kafka-manager';
/* project id 2406313 */
src: url('//at.alicdn.com/t/font_2406313_rbsze6uqtta.eot');
src: url('//at.alicdn.com/t/font_2406313_rbsze6uqtta.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2406313_rbsze6uqtta.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2406313_rbsze6uqtta.woff') format('woff'),
url('//at.alicdn.com/t/font_2406313_rbsze6uqtta.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2406313_rbsze6uqtta.svg#iconfont') format('svg');
}
.kafka-manager {
font-family: "kafka-manager" !important;
......@@ -15,6 +25,15 @@
-moz-osx-font-smoothing: grayscale;
}
/* .kafka-manager-record {
font-family: "kafka-manager" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} */
.k-icon-fuwurenwuguanli:before {
content: "\e660";
}
......@@ -47,6 +66,10 @@
content: "\e634";
}
.k-icon-operationrecord:before {
content: "\e772";
}
.k-icon-menu2:before {
content: "\e609";
}
......
kafka-manager-console/src/types/base-type.ts
浏览文件 @ b3b88891
......@@ -190,7 +190,7 @@ export interface IUser {
chineseName?: string;
department?: string;
key?: number;
confirmPassword?:string
confirmPassword?: string
}
export interface IOffset {
......@@ -939,7 +939,7 @@ export interface INewLogical {
logicalClusterName?: string;
logicalClusterNameCn?: string;
regionIdList: number[];
logicalClusterIdentification?:string
logicalClusterIdentification?: string
}
export interface IPartitionsLocation {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或