You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@inlong.apache.org by do...@apache.org on 2021/07/13 04:38:28 UTC
[incubator-inlong] 08/10: fix(eslint): fix eslint error
This is an automated email from the ASF dual-hosted git repository.
dockerzhang pushed a commit to branch new-web-client
in repository https://gitbox.apache.org/repos/asf/incubator-inlong.git
commit a074953f50a6e872dcf2b3e8f8117f72b7000b91
Author: zakwu <12...@qq.com>
AuthorDate: Tue Jun 30 16:21:06 2020 +0800
fix(eslint): fix eslint error
---
web/.eslintrc | 4 +-
web/package.json | 2 +-
web/src/components/Tablex/index.tsx | 4 +-
web/src/components/TitleWrap/index.tsx | 2 +-
web/src/constants/broker.ts | 6 +-
web/src/constants/person.ts | 2 +-
web/src/constants/topic.ts | 6 +-
web/src/defaultSettings.js | 10 +-
web/src/hooks/index.ts | 6 +-
web/src/pages/Broker/commonModal.tsx | 85 +++---
web/src/pages/Broker/detail.tsx | 419 ++++++++++++++++-----------
web/src/pages/Broker/index.tsx | 79 ++---
web/src/pages/Broker/query.tsx | 70 ++---
web/src/pages/Cluster/index.tsx | 99 ++++---
web/src/pages/Topic/commonModal.tsx | 126 ++++----
web/src/pages/Topic/detail.tsx | 512 ++++++++++++++++++++-------------
web/src/pages/Topic/index.tsx | 180 +++++++-----
web/src/pages/Topic/query.tsx | 99 ++++---
web/src/router.tsx | 1 +
web/src/utils/index.ts | 9 +-
20 files changed, 988 insertions(+), 733 deletions(-)
diff --git a/web/.eslintrc b/web/.eslintrc
index 7abddfd..472dd8d 100644
--- a/web/.eslintrc
+++ b/web/.eslintrc
@@ -21,6 +21,8 @@
},
"rules": {
"@typescript-eslint/no-explicit-any": 0,
- "@typescript-eslint/explicit-function-return-type": 0
+ "@typescript-eslint/explicit-function-return-type": 0,
+ "jsx-a11y/anchor-is-valid": 0,
+ "react-hooks/exhaustive-deps": 0
}
}
diff --git a/web/package.json b/web/package.json
index 5b8fefc..19ecc93 100644
--- a/web/package.json
+++ b/web/package.json
@@ -20,7 +20,7 @@
},
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
- "start": "react-app-rewired start",
+ "start": "EXTEND_ESLINT=true react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"commit": "git cz",
diff --git a/web/src/components/Tablex/index.tsx b/web/src/components/Tablex/index.tsx
index 20d0cea..ec41277 100644
--- a/web/src/components/Tablex/index.tsx
+++ b/web/src/components/Tablex/index.tsx
@@ -35,7 +35,7 @@ const Comp = (props: ComProps) => {
isTruePagination,
showSearch = true,
searchWidth = 8,
- searchStyle = {}
+ searchStyle = {},
} = props;
const [filterKey, setFilterKey] = useState(defaultSearchKey);
// 自动增加排序
@@ -86,7 +86,7 @@ const Comp = (props: ComProps) => {
return (
<>
{showSearch && filterFnX && (
- <Row gutter={20} className="mb10" style={{position: 'relative'}}>
+ <Row gutter={20} className="mb10" style={{ position: 'relative' }}>
<Col span={searchWidth} style={{ padding: 0, ...searchStyle }}>
<Tooltip title={filterKey}>
<Search
diff --git a/web/src/components/TitleWrap/index.tsx b/web/src/components/TitleWrap/index.tsx
index cf2c3f3..47624f4 100644
--- a/web/src/components/TitleWrap/index.tsx
+++ b/web/src/components/TitleWrap/index.tsx
@@ -9,7 +9,7 @@ interface ComProps {
}
const Comp = (props: ComProps) => {
- const {hasSplit = true} = props;
+ const { hasSplit = true } = props;
return (
<div style={props.wrapperStyle} className={hasSplit ? 'split-border' : ''}>
diff --git a/web/src/constants/broker.ts b/web/src/constants/broker.ts
index 7270aae..bc6ac45 100644
--- a/web/src/constants/broker.ts
+++ b/web/src/constants/broker.ts
@@ -5,7 +5,7 @@ export const BROKER_INFO_ZH_MAP = {
brokerIp: 'BrokerIP',
brokerPort: 'BrokerPort',
brokerTLSPort: 'TLS端口',
- brokerVersion: "版本",
+ brokerVersion: '版本',
enableTLS: '启用TLS',
isAutoForbidden: '自动屏蔽',
isBrokerOnline: 'broker注册',
@@ -18,5 +18,5 @@ export const BROKER_INFO_ZH_MAP = {
'runInfo.acceptPublish': 'broker可发布状态',
'runInfo.acceptSubscribe': 'broker可订阅状态',
'runInfo.numPartitions': 'broker分区数',
- 'runInfo.brokerManageStatus': 'broker运行状态'
-};
\ No newline at end of file
+ 'runInfo.brokerManageStatus': 'broker运行状态',
+};
diff --git a/web/src/constants/person.ts b/web/src/constants/person.ts
index 1bd1b98..eadf34f 100644
--- a/web/src/constants/person.ts
+++ b/web/src/constants/person.ts
@@ -1,4 +1,4 @@
export const PERSON_INFO_ZH_MAP = {
createDate: '创建时间',
createUser: '创建人',
-};
\ No newline at end of file
+};
diff --git a/web/src/constants/topic.ts b/web/src/constants/topic.ts
index 1f1cf9c..d4c8abf 100644
--- a/web/src/constants/topic.ts
+++ b/web/src/constants/topic.ts
@@ -5,6 +5,6 @@ export const TOPIC_INFO_ZH_MAP = {
totalRunNumPartCount: '运行分区数',
isSrvAcceptPublish: '可发布',
isSrvAcceptSubscribe: '可订阅',
- enableAuthControl: "权限受控",
- groupCount: '授权消费组'
-};
\ No newline at end of file
+ enableAuthControl: '权限受控',
+ groupCount: '授权消费组',
+};
diff --git a/web/src/defaultSettings.js b/web/src/defaultSettings.js
index beebbb5..684a9a3 100644
--- a/web/src/defaultSettings.js
+++ b/web/src/defaultSettings.js
@@ -1,6 +1,6 @@
export default {
- "layout": "sidemenu",
- "contentWidth": "Fluid",
- "navTheme": "dark",
- "primaryColor": "#1890ff"
-}
\ No newline at end of file
+ layout: 'sidemenu',
+ contentWidth: 'Fluid',
+ navTheme: 'dark',
+ primaryColor: '#1890ff',
+};
diff --git a/web/src/hooks/index.ts b/web/src/hooks/index.ts
index ae1eecf..488569c 100644
--- a/web/src/hooks/index.ts
+++ b/web/src/hooks/index.ts
@@ -33,12 +33,12 @@ axios.interceptors.response.use(
}
// set object outside data into it
- const res = Object.assign({}, data)
+ const res = Object.assign({}, data);
delete res.errCode;
delete res.errMsg;
res.data = Object.assign(res.data, {
- ...res
- })
+ ...res,
+ });
return res || [];
},
function(error) {
diff --git a/web/src/pages/Broker/commonModal.tsx b/web/src/pages/Broker/commonModal.tsx
index 26480c4..8dc8654 100644
--- a/web/src/pages/Broker/commonModal.tsx
+++ b/web/src/pages/Broker/commonModal.tsx
@@ -1,10 +1,10 @@
-import {boolean2Chinese} from "@/utils";
-import Table from "@/components/Tablex";
-import {Col, Form, Input, Row} from "antd";
-import Modal, {OKProps} from "@/components/Modalx";
-import React from "react";
-import Query from "@/pages/Broker/query";
-import {FormProps} from "antd/lib/form";
+import { boolean2Chinese } from '@/utils';
+import Table from '@/components/Tablex';
+import { Col, Form, Input, Row } from 'antd';
+import Modal, { OKProps } from '@/components/Modalx';
+import React from 'react';
+import Query from '@/pages/Broker/query';
+import { FormProps } from 'antd/lib/form';
export const OPTIONS = [
{
@@ -26,7 +26,6 @@ export const OPTIONS = [
];
export const OPTIONS_VALUES = OPTIONS.map(t => t.value);
-
// interface
export declare type BrokerData = any[];
export interface BrokerResultData {
@@ -89,13 +88,7 @@ const renderBrokerOptions = (modalParams: any, dataSource: any[]) => {
render: (t: string) => boolean2Chinese(t),
},
];
- return (
- <Table
- columns={columns}
- dataSource={dataSource}
- rowKey="brokerId"
- />
- );
+ return <Table columns={columns} dataSource={dataSource} rowKey="brokerId" />;
};
const renderNewBroker = (form: any) => {
const brokerFormArr = [
@@ -161,18 +154,26 @@ const renderNewBroker = (form: any) => {
);
};
const renderEditBroker = (modalParams: any, form: FormProps['form']) => {
- const {params: p} = modalParams;
- const pickArr = ['numPartitions', 'unflushThreshold', 'unflushInterval', 'deleteWhen', 'deletePolicy', 'acceptPublish', 'acceptSubscribe'];
- let brokerFormArr : Array<{
+ const { params: p } = modalParams;
+ const pickArr = [
+ 'numPartitions',
+ 'unflushThreshold',
+ 'unflushInterval',
+ 'deleteWhen',
+ 'deletePolicy',
+ 'acceptPublish',
+ 'acceptSubscribe',
+ ];
+ const brokerFormArr: Array<{
name: string;
defaultValue: string;
}> = [];
pickArr.forEach(t => {
brokerFormArr.push({
name: t,
- defaultValue: p[t]
- })
- })
+ defaultValue: p[t],
+ });
+ });
return (
<Form form={form}>
@@ -204,8 +205,8 @@ const renderBrokerStateChange = (modalParams: any) => {
);
};
export const onOpenModal = (p: BrokerModalProps) => {
- const {type, title, updateFunction, params} = p;
- if(typeof params === 'function') {
+ const { type, title, updateFunction, params } = p;
+ if (typeof params === 'function') {
p.params = params();
}
updateFunction((m: any) => {
@@ -217,19 +218,19 @@ export const onOpenModal = (p: BrokerModalProps) => {
title,
onOk: (p: OKProps) => {
updateFunction((m: any) => {
- if(type === 'newBroker' || type === 'editBroker') {
- p.params = f && f.getFieldsValue()
+ if (type === 'newBroker' || type === 'editBroker') {
+ p.params = f && f.getFieldsValue();
}
m.okParams = p;
m.isOk = Date.now();
- })
+ });
},
onCancel: () => {
updateFunction((m: any) => {
m.visible = false;
m.isOk = null;
- })
- }
+ });
+ },
});
});
};
@@ -240,7 +241,7 @@ interface ComProps {
}
let f: FormProps['form'];
const Comp = (props: ComProps) => {
- const {modalParams, data} = props;
+ const { modalParams, data } = props;
const [form] = Form.useForm();
f = form;
@@ -248,16 +249,26 @@ const Comp = (props: ComProps) => {
<Modal {...modalParams}>
<div>
{modalParams.type &&
- OPTIONS_VALUES.includes(modalParams.type) && renderBrokerOptions(modalParams, data.filter((t: BrokerResultData) =>
- modalParams.params.includes(t.brokerId)
- ))}
+ OPTIONS_VALUES.includes(modalParams.type) &&
+ renderBrokerOptions(
+ modalParams,
+ data.filter((t: BrokerResultData) =>
+ modalParams.params.includes(t.brokerId)
+ )
+ )}
{modalParams.type === 'newBroker' && renderNewBroker(form)}
- {modalParams.type === 'editBroker' && renderEditBroker(modalParams, form)}
- {modalParams.type === 'brokerStateChange' && renderBrokerStateChange(modalParams)}
+ {modalParams.type === 'editBroker' &&
+ renderEditBroker(modalParams, form)}
+ {modalParams.type === 'brokerStateChange' &&
+ renderBrokerStateChange(modalParams)}
</div>
- <Query fire={modalParams.isOk} params={modalParams.okParams} type={modalParams.query || modalParams.type} />
+ <Query
+ fire={modalParams.isOk}
+ params={modalParams.okParams}
+ type={modalParams.query || modalParams.type}
+ />
</Modal>
- )
+ );
};
-export default Comp;
\ No newline at end of file
+export default Comp;
diff --git a/web/src/pages/Broker/detail.tsx b/web/src/pages/Broker/detail.tsx
index b622dc7..28a7d06 100644
--- a/web/src/pages/Broker/detail.tsx
+++ b/web/src/pages/Broker/detail.tsx
@@ -1,17 +1,17 @@
-import React, {ReactNode, useContext, useState} from 'react';
+import React, { ReactNode, useContext, useState } from 'react';
import GlobalContext from '@/context/globalContext';
import Breadcrumb from '@/components/Breadcrumb';
import Table from '@/components/Tablex';
import TitleWrap from '@/components/TitleWrap';
-import {Form, Button, Spin, Col, Row, Switch, Tabs} from 'antd';
+import { Form, Button, Spin, Col, Row, Switch, Tabs } from 'antd';
import { useImmer } from 'use-immer';
import './index.less';
import { useRequest } from '@/hooks';
-import {useParams} from 'react-router-dom';
-import {boolean2Chinese, transParamsWithConstantsMap} from "@/utils";
-import {BROKER_INFO_ZH_MAP} from "@/constants/broker";
-import tableFilterHelper from "@/components/Tablex/tableFilterHelper";
-import CommonModal, {OPTIONS, onOpenModal, BrokerData} from './commonModal'
+import { useParams } from 'react-router-dom';
+import { boolean2Chinese, transParamsWithConstantsMap } from '@/utils';
+import { BROKER_INFO_ZH_MAP } from '@/constants/broker';
+import tableFilterHelper from '@/components/Tablex/tableFilterHelper';
+import CommonModal, { OPTIONS, onOpenModal, BrokerData } from './commonModal';
declare type BrokerQueryData = {
withDetail: boolean;
@@ -23,7 +23,7 @@ declare type TopicQueryData = {
brokerId: string;
};
-const {TabPane} = Tabs;
+const { TabPane } = Tabs;
const Detail: React.FC = () => {
const { id } = useParams();
@@ -33,165 +33,197 @@ const Detail: React.FC = () => {
const [acceptPublish, setAcceptPublish] = useState<any>(false);
const [acceptSubscribe, setAcceptSubscribe] = useState<any>(false);
const [filterData, updateFilterData] = useImmer<any>({});
- const queryBrokerConf = useRequest<any>((data: BrokerQueryData = {
- withDetail: true,
- brokerId: id,
- }) => ({
- url: '/api/op_query/admin_query_broker_run_status',
- data: {
- ...data
- }
- }), {
- onSuccess: data => {
- setAcceptPublish(data[0]['acceptPublish'] === 'true');
- setAcceptSubscribe(data[0]['acceptSubscribe'] === 'true');
- }
- });
- const queryTopicInfo = useRequest<any>((data: TopicQueryData = {
- withTopic: true,
- brokerId: id,
- }) => ({
- url: '/api/op_query/admin_query_broker_configure',
- data: {
- ...data
+ const queryBrokerConf = useRequest<any>(
+ (
+ data: BrokerQueryData = {
+ withDetail: true,
+ brokerId: id,
+ }
+ ) => ({
+ url: '/api/op_query/admin_query_broker_run_status',
+ data: {
+ ...data,
+ },
+ }),
+ {
+ onSuccess: data => {
+ setAcceptPublish(data[0]['acceptPublish'] === 'true');
+ setAcceptSubscribe(data[0]['acceptSubscribe'] === 'true');
+ },
}
- }));
+ );
+ const queryTopicInfo = useRequest<any>(
+ (
+ data: TopicQueryData = {
+ withTopic: true,
+ brokerId: id,
+ }
+ ) => ({
+ url: '/api/op_query/admin_query_broker_configure',
+ data: {
+ ...data,
+ },
+ })
+ );
// render
const renderConf = () => {
- const columns = [{
- title: '类别',
- dataIndex: `type`,
- },
- {
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'acceptPublish'),
- dataIndex: 'acceptPublish',
- render: (t: string) => boolean2Chinese(t),
- },
- {
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'acceptSubscribe'),
- dataIndex: 'acceptSubscribe',
- render: (t: string) => boolean2Chinese(t),
- },
- {
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'unflushThreshold'),
- dataIndex: 'unflushThreshold',
- },
- {
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'unflushInterval'),
- dataIndex: 'unflushInterval',
- },
- {
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'deleteWhen'),
- dataIndex: 'deleteWhen',
- },
- {
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'deletePolicy'),
- dataIndex: 'deletePolicy',
- },
- {
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'numPartitions'),
- dataIndex: 'numPartitions',
- },
- {
- title: '操作',
- render: (t:string, r: BrokerData) => {
- return (<a onClick={() => onEditConf(r)}>编辑</a>)
- }
- }];
- const {data} = queryBrokerConf;
- if(!data || !data[0]) return null;
- const {BrokerSyncStatusInfo} = data[0];
+ const columns = [
+ {
+ title: '类别',
+ dataIndex: `type`,
+ },
+ {
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'acceptPublish'),
+ dataIndex: 'acceptPublish',
+ render: (t: string) => boolean2Chinese(t),
+ },
+ {
+ title: transParamsWithConstantsMap(
+ BROKER_INFO_ZH_MAP,
+ 'acceptSubscribe'
+ ),
+ dataIndex: 'acceptSubscribe',
+ render: (t: string) => boolean2Chinese(t),
+ },
+ {
+ title: transParamsWithConstantsMap(
+ BROKER_INFO_ZH_MAP,
+ 'unflushThreshold'
+ ),
+ dataIndex: 'unflushThreshold',
+ },
+ {
+ title: transParamsWithConstantsMap(
+ BROKER_INFO_ZH_MAP,
+ 'unflushInterval'
+ ),
+ dataIndex: 'unflushInterval',
+ },
+ {
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'deleteWhen'),
+ dataIndex: 'deleteWhen',
+ },
+ {
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'deletePolicy'),
+ dataIndex: 'deletePolicy',
+ },
+ {
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'numPartitions'),
+ dataIndex: 'numPartitions',
+ },
+ {
+ title: '操作',
+ render: (t: string, r: BrokerData) => {
+ return <a onClick={() => onEditConf(r)}>编辑</a>;
+ },
+ },
+ ];
+ const { data } = queryBrokerConf;
+ if (!data || !data[0]) return null;
+ const { BrokerSyncStatusInfo } = data[0];
const dataSource = [];
dataSource.push({
type: '缺省配置',
- ...BrokerSyncStatusInfo.curBrokerDefaultConfInfo
+ ...BrokerSyncStatusInfo.curBrokerDefaultConfInfo,
});
dataSource.push({
type: '最近上报',
- ...BrokerSyncStatusInfo.reportedBrokerDefaultConfInfo
+ ...BrokerSyncStatusInfo.reportedBrokerDefaultConfInfo,
});
dataSource.push({
type: '最近下发',
- ...BrokerSyncStatusInfo.lastPushBrokerDefaultConfInfo
+ ...BrokerSyncStatusInfo.lastPushBrokerDefaultConfInfo,
});
return <Table columns={columns} dataSource={dataSource} rowKey="type" />;
- }
+ };
const renderTopics = (type: string): ReactNode => {
- const columns = [{
- title: 'topicName',
- dataIndex: `topicName`,
- },
- {
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'numPartitions'),
- dataIndex: 'numPartitions',
- },
- {
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'acceptPublish'),
- dataIndex: 'acceptPublish',
- render: (t: string) => boolean2Chinese(t),
- },
- {
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'acceptSubscribe'),
- dataIndex: 'acceptSubscribe',
- render: (t: string) => boolean2Chinese(t),
- },
- {
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'unflushThreshold'),
- dataIndex: 'unflushThreshold',
- },
- {
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'unflushInterval'),
- dataIndex: 'unflushInterval',
- },
- {
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'deleteWhen'),
- dataIndex: 'deleteWhen',
- },
- {
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'deletePolicy'),
- dataIndex: 'deletePolicy',
- }];
- const {data} = queryBrokerConf;
- if(!data || !data[0]) return null;
- const {BrokerSyncStatusInfo} = data[0];
+ const columns = [
+ {
+ title: 'topicName',
+ dataIndex: `topicName`,
+ },
+ {
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'numPartitions'),
+ dataIndex: 'numPartitions',
+ },
+ {
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'acceptPublish'),
+ dataIndex: 'acceptPublish',
+ render: (t: string) => boolean2Chinese(t),
+ },
+ {
+ title: transParamsWithConstantsMap(
+ BROKER_INFO_ZH_MAP,
+ 'acceptSubscribe'
+ ),
+ dataIndex: 'acceptSubscribe',
+ render: (t: string) => boolean2Chinese(t),
+ },
+ {
+ title: transParamsWithConstantsMap(
+ BROKER_INFO_ZH_MAP,
+ 'unflushThreshold'
+ ),
+ dataIndex: 'unflushThreshold',
+ },
+ {
+ title: transParamsWithConstantsMap(
+ BROKER_INFO_ZH_MAP,
+ 'unflushInterval'
+ ),
+ dataIndex: 'unflushInterval',
+ },
+ {
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'deleteWhen'),
+ dataIndex: 'deleteWhen',
+ },
+ {
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'deletePolicy'),
+ dataIndex: 'deletePolicy',
+ },
+ ];
+ const { data } = queryBrokerConf;
+ if (!data || !data[0]) return null;
+ const { BrokerSyncStatusInfo } = data[0];
let dataSource: any[] = [];
- if(type === 'cur') {
+ if (type === 'cur') {
dataSource = BrokerSyncStatusInfo.curBrokerTopicSetConfInfo;
- } else if(type === 'lastPush') {
+ } else if (type === 'lastPush') {
dataSource = BrokerSyncStatusInfo.lastPushBrokerTopicSetConfInfo;
- } else if(type === 'lastReported') {
+ } else if (type === 'lastReported') {
dataSource = BrokerSyncStatusInfo.reportedBrokerTopicSetConfInfo;
}
- return <Table columns={columns}
- dataSource={dataSource}
- rowKey={r => type + r.topicName}
- dataSourceX={filterData.list}
- searchPlaceholder="请输入TopicName搜索"
- searchStyle={{
- position: 'absolute',
- top: '-55px',
- right: '10px',
- zIndex: 1
- }}
- filterFnX={value =>
- tableFilterHelper({
- key: value,
- srcArray: dataSource,
- targetArray: filterData.list,
- updateFunction: res =>
- updateFilterData(filterData => {
- filterData.list = res;
- }),
- filterList: [
- 'topicName',
- ],
- })
- }
- />;
- }
+ return (
+ <Table
+ columns={columns}
+ dataSource={dataSource}
+ rowKey={r => type + r.topicName}
+ dataSourceX={filterData.list}
+ searchPlaceholder="请输入TopicName搜索"
+ searchStyle={{
+ position: 'absolute',
+ top: '-55px',
+ right: '10px',
+ zIndex: 1,
+ }}
+ filterFnX={value =>
+ tableFilterHelper({
+ key: value,
+ srcArray: dataSource,
+ targetArray: filterData.list,
+ updateFunction: res =>
+ updateFilterData(filterData => {
+ filterData.list = res;
+ }),
+ filterList: ['topicName'],
+ })
+ }
+ />
+ );
+ };
// event
// acceptPublish && acceptSubscribe event
@@ -207,15 +239,17 @@ const Detail: React.FC = () => {
type: 'brokerStateChange',
title: `请确认操作`,
updateFunction: updateModelParams,
- params: { option, id: queryBrokerConf.data[0].brokerId,
+ params: {
+ option,
+ id: queryBrokerConf.data[0].brokerId,
callback: () => {
if (type === 'acceptPublish') {
setAcceptPublish(e);
} else if (type === 'acceptSubscribe') {
setAcceptSubscribe(e);
}
- }
- }
+ },
+ },
});
};
@@ -226,12 +260,17 @@ const Detail: React.FC = () => {
updateFunction: updateModelParams,
params: [queryBrokerConf.data[0].brokerId],
});
- }
+ };
// new broker
const onEditConf = (r: BrokerData) => {
- onOpenModal({type: 'editBroker', title: '编辑Broker', updateFunction: updateModelParams, params: r})
- }
+ onOpenModal({
+ type: 'editBroker',
+ title: '编辑Broker',
+ updateFunction: updateModelParams,
+ params: r,
+ });
+ };
return (
<Spin spinning={queryBrokerConf.loading && queryTopicInfo.loading}>
@@ -240,49 +279,80 @@ const Detail: React.FC = () => {
appendParams={`Broker（${id}）详情`}
/>
<div className="main-container">
- <TitleWrap title="运行状态" wrapperStyle={{position: 'relative'}}>
+ <TitleWrap title="运行状态" wrapperStyle={{ position: 'relative' }}>
<div className="broker-detail-options-wrapper">
<Switch
className="mr10"
- checked={acceptPublish} checkedChildren="订阅" unCheckedChildren="订阅"
+ checked={acceptPublish}
+ checkedChildren="订阅"
+ unCheckedChildren="订阅"
onChange={e => onSwitchChange(e, 'acceptPublish')}
/>
<Switch
className="mr10"
- checked={acceptSubscribe} checkedChildren="发布" unCheckedChildren="发布"
+ checked={acceptSubscribe}
+ checkedChildren="发布"
+ unCheckedChildren="发布"
onChange={e => onSwitchChange(e, 'acceptSubscribe')}
/>
- <Button className="mr10" type="primary" size="small" onClick={() => onOptions('online')}>
+ <Button
+ className="mr10"
+ type="primary"
+ size="small"
+ onClick={() => onOptions('online')}
+ >
上线
</Button>
- <Button className="mr10" type="primary" size="small" onClick={() => onOptions('offline')}>
+ <Button
+ className="mr10"
+ type="primary"
+ size="small"
+ onClick={() => onOptions('offline')}
+ >
下线
</Button>
- <Button className="mr10" type="primary" size="small" onClick={() => onOptions('reload')}>
+ <Button
+ className="mr10"
+ type="primary"
+ size="small"
+ onClick={() => onOptions('reload')}
+ >
重载
</Button>
</div>
<Form form={form}>
<Row gutter={24}>
- {queryBrokerConf.data && Object.keys(queryBrokerConf.data[0]).map((t: string, index: number) => {
- const label = transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, t);
- const ignoreList = ['acceptPublish', 'brokerVersion', 'acceptSubscribe'];
- if (queryBrokerConf.data[0][t] instanceof Object || !label || ignoreList.includes(t)) return null
- return (<Col span={12} key={'queryBrokerConf' + index}>
- <Form.Item
- labelCol={{span: 12}}
- label={label}
- >
- {queryBrokerConf.data[0][t] + ''}
- </Form.Item>
- </Col>)
- })}
+ {queryBrokerConf.data &&
+ Object.keys(queryBrokerConf.data[0]).map(
+ (t: string, index: number) => {
+ const label = transParamsWithConstantsMap(
+ BROKER_INFO_ZH_MAP,
+ t
+ );
+ const ignoreList = [
+ 'acceptPublish',
+ 'brokerVersion',
+ 'acceptSubscribe',
+ ];
+ if (
+ queryBrokerConf.data[0][t] instanceof Object ||
+ !label ||
+ ignoreList.includes(t)
+ )
+ return null;
+ return (
+ <Col span={12} key={'queryBrokerConf' + index}>
+ <Form.Item labelCol={{ span: 12 }} label={label}>
+ {queryBrokerConf.data[0][t] + ''}
+ </Form.Item>
+ </Col>
+ );
+ }
+ )}
</Row>
</Form>
</TitleWrap>
- <TitleWrap title="缺省配置">
- {renderConf()}
- </TitleWrap>
+ <TitleWrap title="缺省配置">{renderConf()}</TitleWrap>
<TitleWrap title="Topic集合配置">
<Tabs>
<TabPane tab="当前配置" key="cur">
@@ -297,7 +367,10 @@ const Detail: React.FC = () => {
</Tabs>
</TitleWrap>
</div>
- <CommonModal modalParams={modalParams} data={[queryBrokerConf.data && queryBrokerConf.data[0]]} />
+ <CommonModal
+ modalParams={modalParams}
+ data={[queryBrokerConf.data && queryBrokerConf.data[0]]}
+ />
</Spin>
);
};
diff --git a/web/src/pages/Broker/index.tsx b/web/src/pages/Broker/index.tsx
index bfd31d6..7cc91dc 100644
--- a/web/src/pages/Broker/index.tsx
+++ b/web/src/pages/Broker/index.tsx
@@ -2,48 +2,53 @@ import React, { useContext, useState } from 'react';
import GlobalContext from '@/context/globalContext';
import Breadcrumb from '@/components/Breadcrumb';
import Table from '@/components/Tablex';
-import { Form, Select, Button, Spin, Switch, message} from 'antd';
+import { Form, Select, Button, Spin, Switch, message } from 'antd';
import { useImmer } from 'use-immer';
import { useRequest } from '@/hooks';
import tableFilterHelper from '@/components/Tablex/tableFilterHelper';
import { boolean2Chinese, transParamsWithConstantsMap } from '@/utils';
-import {BROKER_INFO_ZH_MAP} from '@/constants/broker';
+import { BROKER_INFO_ZH_MAP } from '@/constants/broker';
import './index.less';
-import {Link} from "react-router-dom";
-import CommonModal, {OPTIONS, onOpenModal, BrokerResultData, BrokerData} from './commonModal'
+import { Link } from 'react-router-dom';
+import CommonModal, {
+ OPTIONS,
+ onOpenModal,
+ BrokerResultData,
+ BrokerData,
+} from './commonModal';
-const {Option} = Select;
+const { Option } = Select;
const Broker: React.FC = () => {
// column config
const columns = [
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'brokerId'),
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'brokerId'),
dataIndex: 'brokerId',
fixed: 'left',
render: (t: Array<any>) => <Link to={'/broker/' + t}>{t}</Link>,
},
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'brokerIp'),
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'brokerIp'),
dataIndex: 'brokerIp',
},
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'brokerPort'),
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'brokerPort'),
dataIndex: 'brokerPort',
},
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'manageStatus'),
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'manageStatus'),
dataIndex: 'manageStatus',
},
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'runStatus'),
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'runStatus'),
dataIndex: 'runStatus',
},
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'subStatus'),
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'subStatus'),
dataIndex: 'subStatus',
},
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'acceptPublish'),
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'acceptPublish'),
dataIndex: 'acceptPublish',
render: (t: string, r: BrokerResultData) => {
return (
@@ -55,7 +60,7 @@ const Broker: React.FC = () => {
},
},
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'acceptSubscribe'),
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'acceptSubscribe'),
dataIndex: 'acceptSubscribe',
render: (t: string, r: BrokerResultData) => {
return (
@@ -67,42 +72,42 @@ const Broker: React.FC = () => {
},
},
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'isConfChanged'),
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'isConfChanged'),
dataIndex: 'isConfChanged',
render: (t: string) => boolean2Chinese(t),
},
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'isConfLoaded'),
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'isConfLoaded'),
dataIndex: 'isConfLoaded',
render: (t: string) => boolean2Chinese(t),
},
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'isBrokerOnline'),
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'isBrokerOnline'),
dataIndex: 'isBrokerOnline',
render: (t: string) => boolean2Chinese(t),
},
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'acceptPublish'),
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'acceptPublish'),
dataIndex: 'isBrokerOnline',
render: (t: string) => boolean2Chinese(t),
},
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'brokerTLSPort'),
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'brokerTLSPort'),
dataIndex: 'brokerTLSPort',
render: (t: string) => boolean2Chinese(t),
},
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'enableTLS'),
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'enableTLS'),
dataIndex: 'enableTLS',
render: (t: boolean) => boolean2Chinese(t),
},
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'isRepAbnormal'),
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'isRepAbnormal'),
dataIndex: 'isRepAbnormal',
render: (t: boolean) => boolean2Chinese(t),
},
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP,'isAutoForbidden'),
+ title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'isAutoForbidden'),
dataIndex: 'isAutoForbidden',
render: (t: boolean) => boolean2Chinese(t),
},
@@ -131,16 +136,19 @@ const Broker: React.FC = () => {
const [brokerList, updateBrokerList] = useImmer<BrokerData>([]);
const [form] = Form.useForm();
// init query
- const { data, loading, run } = useRequest<any, BrokerData>((data: BrokerResultData) => ({
- url: '/api/op_query/admin_query_broker_run_status',
- data: data,
- }), {
- onSuccess: data => {
- updateBrokerList(d => {
- Object.assign(d, data);
- });
- },
- });
+ const { data, loading, run } = useRequest<any, BrokerData>(
+ (data: BrokerResultData) => ({
+ url: '/api/op_query/admin_query_broker_run_status',
+ data: data,
+ }),
+ {
+ onSuccess: data => {
+ updateBrokerList(d => {
+ Object.assign(d, data);
+ });
+ },
+ }
+ );
// table event
// acceptSubscribe && acceptPublish options
@@ -167,12 +175,17 @@ const Broker: React.FC = () => {
updateBrokerList(d => {
d[index][type] = e + '';
});
- }},
+ },
+ },
});
};
// new broker
const onNewBroker = () => {
- onOpenModal({type: 'newBroker', title: '新建Broker', updateFunction: updateModelParams})
+ onOpenModal({
+ type: 'newBroker',
+ title: '新建Broker',
+ updateFunction: updateModelParams,
+ });
};
// online, offline, etc.
const onOptionsChange = (type: string, r?: BrokerResultData) => {
diff --git a/web/src/pages/Broker/query.tsx b/web/src/pages/Broker/query.tsx
index 6f8b8e9..9e89789 100644
--- a/web/src/pages/Broker/query.tsx
+++ b/web/src/pages/Broker/query.tsx
@@ -1,9 +1,9 @@
import * as React from 'react';
import './index.less';
-import {OKProps} from "@/components/Modalx";
-import {useRequest} from "@/hooks";
-import {useContext, useEffect} from "react";
-import GlobalContext from "@/context/globalContext";
+import { OKProps } from '@/components/Modalx';
+import { useRequest } from '@/hooks';
+import { useContext, useEffect } from 'react';
+import GlobalContext from '@/context/globalContext';
interface ComProps {
fire: string;
@@ -12,15 +12,16 @@ interface ComProps {
}
const Comp = (props: ComProps) => {
- const {fire} = props;
+ const { fire } = props;
const { userInfo } = useContext(GlobalContext);
+ // eslint-disable-next-line
useEffect(() => {
- const {params, type} = props;
+ const { params, type } = props;
dispatchAction(type, params);
}, [fire, props]);
const dispatchAction = (type: string, p: OKProps) => {
- if(!fire) return null;
+ if (!fire) return null;
let promise;
switch (type) {
case 'newBroker':
@@ -40,10 +41,11 @@ const Comp = (props: ComProps) => {
break;
}
- promise && promise.then(t => {
- const {callback} = p.params;
- if(t.statusCode !== 0 && callback) callback(t);
- })
+ promise &&
+ promise.then(t => {
+ const { callback } = p.params;
+ if (t.statusCode !== 0 && callback) callback(t);
+ });
};
const newBrokerQuery = useRequest<any, any>(
@@ -51,7 +53,7 @@ const Comp = (props: ComProps) => {
{ manual: true }
);
const newBroker = (p: OKProps) => {
- const {params} = p;
+ const { params } = p;
return newBrokerQuery.run({
data: {
...params,
@@ -66,7 +68,7 @@ const Comp = (props: ComProps) => {
{ manual: true }
);
const editBroker = (p: OKProps) => {
- const {params} = p;
+ const { params } = p;
return updateBrokerQuery.run({
data: {
...params,
@@ -82,13 +84,16 @@ const Comp = (props: ComProps) => {
);
const brokerOptions = (type: string, p: OKProps) => {
const { params } = p;
- return brokerOptionsQuery.run(`/api/op_modify/admin_${type}_broker_configure`, {
- data: {
- brokerId: params ? params?.join(',') : params?.selectBroker.join(','),
- confModAuthToken: p.psw,
- createUser: userInfo.userName,
- },
- });
+ return brokerOptionsQuery.run(
+ `/api/op_modify/admin_${type}_broker_configure`,
+ {
+ data: {
+ brokerId: params ? params?.join(',') : params?.selectBroker.join(','),
+ confModAuthToken: p.psw,
+ createUser: userInfo.userName,
+ },
+ }
+ );
};
const brokerAcceptPublishQuery = useRequest<any, any>(
@@ -97,30 +102,27 @@ const Comp = (props: ComProps) => {
);
const brokerAcceptPublish = (type: string, p: OKProps) => {
const { params } = p;
- let data: {
- [key: string]: any;
- };
-
- data = {
+ const data: any = {
brokerId: params.id,
confModAuthToken: p.psw,
createUser: userInfo.userName,
- }
- if(params.type === 'acceptPublish') {
+ };
+ if (params.type === 'acceptPublish') {
data.isAcceptPublish = params.option;
}
- if(params.type === 'acceptSubscribe') {
+ if (params.type === 'acceptSubscribe') {
data.isAcceptSubscribe = params.option;
}
- return brokerAcceptPublishQuery.run(`/api/op_modify/admin_set_broker_read_or_write`, {
- data,
- });
+ return brokerAcceptPublishQuery.run(
+ `/api/op_modify/admin_set_broker_read_or_write`,
+ {
+ data,
+ }
+ );
};
- return (
- <></>
- );
+ return <></>;
};
export default Comp;
diff --git a/web/src/pages/Cluster/index.tsx b/web/src/pages/Cluster/index.tsx
index 7164854..6b82403 100644
--- a/web/src/pages/Cluster/index.tsx
+++ b/web/src/pages/Cluster/index.tsx
@@ -2,11 +2,11 @@ import React, { useContext } from 'react';
import GlobalContext from '@/context/globalContext';
import Breadcrumb from '@/components/Breadcrumb';
import Table from '@/components/Tablex';
-import { Form, Input, Button, Spin } from 'antd';
+import { Spin } from 'antd';
import './index.less';
import { useRequest } from '@/hooks';
-import Modal, {OKProps} from "@/components/Modalx";
-import {useImmer} from "use-immer";
+import Modal, { OKProps } from '@/components/Modalx';
+import { useImmer } from 'use-immer';
interface ClusterResultData {
groupName: string;
@@ -28,7 +28,7 @@ const Cluster: React.FC = () => {
const [modalParams, updateModelParams] = useImmer<any>({
title: '请确认操作',
});
- const { data, loading, run } = useRequest<any, any>(queryClusterList, {
+ const { data, loading } = useRequest<any, any>(queryClusterList, {
formatResult: d => {
return {
list: d.data.map((t: any) => ({
@@ -38,10 +38,10 @@ const Cluster: React.FC = () => {
index: t.index,
port: t.port,
nodeStatus: t.statusInfo.nodeStatus,
- length: d.data.length
+ length: d.data.length,
})),
};
- }
+ },
});
const columns = [
{
@@ -51,10 +51,10 @@ const Cluster: React.FC = () => {
return {
children: t,
props: {
- rowSpan: index === 0 ? r.length : 0
- }
- }
- }
+ rowSpan: index === 0 ? r.length : 0,
+ },
+ };
+ },
},
{
title: '集群状态',
@@ -63,22 +63,22 @@ const Cluster: React.FC = () => {
return {
children: t,
props: {
- rowSpan: index === 0 ? r.length : 0
- }
- }
- }
+ rowSpan: index === 0 ? r.length : 0,
+ },
+ };
+ },
},
{
title: '节点名',
render: (t: string, r: ClusterResultData) => {
return `${r.groupName}-${r.hostName}`;
- }
+ },
},
{
title: 'IP地址',
render: (t: string, r: ClusterResultData) => {
return `${r.hostName}-${r.port}`;
- }
+ },
},
{
title: '节点名',
@@ -88,51 +88,50 @@ const Cluster: React.FC = () => {
title: '操作',
render: (t: string, r: ClusterResultData, index: number) => {
return {
- children: (<span className="options-wrapper">
- <a onClick={() => onSwitchCluster(t, r)}>
- 切换
- </a>
- </span>),
+ children: (
+ <span className="options-wrapper">
+ <a onClick={() => onSwitchCluster(t, r)}>切换</a>
+ </span>
+ ),
props: {
- rowSpan: index === 0 ? r.length : 0
- }
- }
- }
+ rowSpan: index === 0 ? r.length : 0,
+ },
+ };
+ },
},
];
- const switchClusterQuery = useRequest<any, any>((data?: ClusterResultData) => ({
- url: '/api/op_modify/admin_transfer_current_master',
- data,
- }), { manual: true });
+ const switchClusterQuery = useRequest<any, any>(
+ (data?: ClusterResultData) => ({
+ url: '/api/op_modify/admin_transfer_current_master',
+ data,
+ }),
+ { manual: true }
+ );
const onSwitchCluster = (t: string, r: ClusterResultData) => {
- updateModelParams(d => {
- d = Object.assign(d, {
- visible: true,
- onOk: (p: OKProps) => {
- switchClusterQuery.run({
- confModAuthToken: p.psw
- })
- },
- onCancel: () => {
- updateModelParams((m: any) => {
- m.visible = false;
- })
- }
- })
- })
+ updateModelParams(d => {
+ d = Object.assign(d, {
+ visible: true,
+ onOk: (p: OKProps) => {
+ switchClusterQuery.run({
+ confModAuthToken: p.psw,
+ });
+ },
+ onCancel: () => {
+ updateModelParams((m: any) => {
+ m.visible = false;
+ });
+ },
+ });
+ });
};
return (
<Spin spinning={loading}>
<Breadcrumb breadcrumbMap={breadMap}></Breadcrumb>
<div className="main-container">
- <Table
- columns={columns}
- dataSource={data?.list}
- rowKey="index"
- ></Table>
+ <Table columns={columns} dataSource={data?.list} rowKey="index"></Table>
</div>
- <Modal {...modalParams} >
+ <Modal {...modalParams}>
<div>
确认<span className="enhance">切换</span>集群?
</div>
diff --git a/web/src/pages/Topic/commonModal.tsx b/web/src/pages/Topic/commonModal.tsx
index 3200060..9d7783c 100644
--- a/web/src/pages/Topic/commonModal.tsx
+++ b/web/src/pages/Topic/commonModal.tsx
@@ -1,10 +1,10 @@
-import {boolean2Chinese} from "@/utils";
-import Table from "@/components/Tablex";
-import {Col, Form, Input, message, Row} from "antd";
-import Modal, {OKProps} from "@/components/Modalx";
-import React, {useState} from "react";
-import Query from "@/pages/Topic/query";
-import {FormProps} from "antd/lib/form";
+import { boolean2Chinese } from '@/utils';
+import Table from '@/components/Tablex';
+import { Col, Form, Input, message, Row } from 'antd';
+import Modal, { OKProps } from '@/components/Modalx';
+import React from 'react';
+import Query from '@/pages/Topic/query';
+import { FormProps } from 'antd/lib/form';
export const OPTIONS = [
{
@@ -17,13 +17,13 @@ export const OPTIONS_VALUES = OPTIONS.map(t => t.value);
// interface
export declare type TopicData = any[];
export interface TopicResultData {
- topicName: string,
- infoCount: string,
- totalCfgNumPart: string,
- totalRunNumPartCount: string,
- isSrvAcceptPublish: string|number,
- isSrvAcceptSubscribe: string|number,
- enableAuthControl: string|number,
+ topicName: string;
+ infoCount: string;
+ totalCfgNumPart: string;
+ totalRunNumPartCount: string;
+ isSrvAcceptPublish: string | number;
+ isSrvAcceptSubscribe: string | number;
+ enableAuthControl: string | number;
[key: string]: any;
}
export interface TopicModalProps {
@@ -71,13 +71,7 @@ const renderTopicOptions = (modalParams: any, dataSource: any[]) => {
render: (t: string) => boolean2Chinese(t),
},
];
- return (
- <Table
- columns={columns}
- dataSource={dataSource}
- rowKey="brokerId"
- />
- );
+ return <Table columns={columns} dataSource={dataSource} rowKey="brokerId" />;
};
const renderNewTopic = (form: any) => {
const brokerFormArr = [
@@ -135,7 +129,7 @@ const renderNewTopic = (form: any) => {
);
};
const renderChooseBroker = (modalParams: any) => {
- let {params} = modalParams;
+ const { params } = modalParams;
const columns = [
{
title: 'Broker',
@@ -175,18 +169,27 @@ const renderChooseBroker = (modalParams: any) => {
);
};
const renderEditTopic = (modalParams: any, form: FormProps['form']) => {
- const {params: p} = modalParams;
- const pickArr = ['topicName', 'numPartitions', 'unflushThreshold', 'unflushInterval', 'deleteWhen', 'deletePolicy', 'acceptPublish', 'acceptSubscribe'];
- let brokerFormArr : Array<{
+ const { params: p } = modalParams;
+ const pickArr = [
+ 'topicName',
+ 'numPartitions',
+ 'unflushThreshold',
+ 'unflushInterval',
+ 'deleteWhen',
+ 'deletePolicy',
+ 'acceptPublish',
+ 'acceptSubscribe',
+ ];
+ const brokerFormArr: Array<{
name: string;
defaultValue: string;
}> = [];
pickArr.forEach(t => {
brokerFormArr.push({
name: t,
- defaultValue: p[t]
- })
- })
+ defaultValue: p[t],
+ });
+ });
return (
<Form form={form}>
@@ -212,8 +215,8 @@ const renderTopicStateChange = (modalParams: any) => {
return (
<div>
- 请确认<span className="enhance">{params.option}</span> 以下broker列表的 topic :
- <span className="enhance">（{params.topicName}）</span> 的 Topic?
+ 请确认<span className="enhance">{params.option}</span> 以下broker列表的
+ topic :<span className="enhance">（{params.topicName}）</span> 的 Topic?
{renderChooseBroker(modalParams)}
</div>
);
@@ -244,12 +247,17 @@ const renderAuthorizeControlChange = (modalParams: any) => {
return (
<div>
- 请确认<span className="enhance">{params.value ? '启动' : '关闭'}topic<span className="enhance">（{params.topicName}）</span>的消费组授权控制</span>吗？
+ 请确认
+ <span className="enhance">
+ {params.value ? '启动' : '关闭'}topic
+ <span className="enhance">（{params.topicName}）</span>的消费组授权控制
+ </span>
+ 吗？
</div>
);
};
export const onOpenModal = (p: TopicModalProps) => {
- const {type, title, updateFunction, params} = p;
+ const { type, title, updateFunction, params } = p;
updateFunction((m: any) => {
m.type = type;
m.params = params;
@@ -259,30 +267,37 @@ export const onOpenModal = (p: TopicModalProps) => {
title,
onOk: (p: OKProps) => {
updateFunction((m: any) => {
- if(type === 'newTopic' || type === 'editTopic') {
+ if (type === 'newTopic' || type === 'editTopic') {
p.params = Object.assign(f && f.getFieldsValue(), {
callback: p.params.callback,
});
}
- if(type === 'chooseBroker' || type === 'topicStateChange' || type === 'deleteTopic') {
- if(!selectBroker.length) {
+ if (
+ type === 'chooseBroker' ||
+ type === 'topicStateChange' ||
+ type === 'deleteTopic'
+ ) {
+ if (!selectBroker.length) {
message.error('至少选择一列！');
return;
}
// end
- if(type === 'chooseBroker') {
- m.query = p.params.subType === 'edit' ? 'endEditChooseBroker' : 'endChooseBroker';
+ if (type === 'chooseBroker') {
+ m.query =
+ p.params.subType === 'edit'
+ ? 'endEditChooseBroker'
+ : 'endChooseBroker';
}
p.params = Object.assign({}, p.params, {
- selectBroker
- })
+ selectBroker,
+ });
}
m.okParams = p;
m.isOk = Date.now();
- })
+ });
},
onCancel: () =>
updateFunction((m: any) => {
@@ -296,7 +311,7 @@ export const onOpenModal = (p: TopicModalProps) => {
let selectBroker: any[] = [];
let f: FormProps['form'];
const Comp = (props: ComProps) => {
- const {modalParams, data} = props;
+ const { modalParams, data } = props;
const [form] = Form.useForm();
f = form;
@@ -304,20 +319,31 @@ const Comp = (props: ComProps) => {
<Modal {...modalParams}>
<div>
{modalParams.type &&
- OPTIONS_VALUES.includes(modalParams.type) && renderTopicOptions(modalParams, data.filter((t: TopicResultData) =>
- modalParams.params.includes(t.brokerId)
- ))}
+ OPTIONS_VALUES.includes(modalParams.type) &&
+ renderTopicOptions(
+ modalParams,
+ data.filter((t: TopicResultData) =>
+ modalParams.params.includes(t.brokerId)
+ )
+ )}
{modalParams.type === 'newTopic' && renderNewTopic(form)}
{modalParams.type === 'chooseBroker' && renderChooseBroker(modalParams)}
{modalParams.type === 'editTopic' && renderEditTopic(modalParams, form)}
- {modalParams.type === 'topicStateChange' && renderTopicStateChange(modalParams)}
+ {modalParams.type === 'topicStateChange' &&
+ renderTopicStateChange(modalParams)}
{modalParams.type === 'deleteTopic' && renderDeleteTopic(modalParams)}
- {modalParams.type === 'deleteConsumeGroup' && renderDeleteConsumeGroup(modalParams)}
- {modalParams.type === 'authorizeControl' && renderAuthorizeControlChange(modalParams)}
+ {modalParams.type === 'deleteConsumeGroup' &&
+ renderDeleteConsumeGroup(modalParams)}
+ {modalParams.type === 'authorizeControl' &&
+ renderAuthorizeControlChange(modalParams)}
</div>
- <Query fire={modalParams.isOk} params={modalParams.okParams} type={modalParams.visible && (modalParams.query || modalParams.type)} />
+ <Query
+ fire={modalParams.isOk}
+ params={modalParams.okParams}
+ type={modalParams.visible && (modalParams.query || modalParams.type)}
+ />
</Modal>
- )
+ );
};
-export default Comp;
\ No newline at end of file
+export default Comp;
diff --git a/web/src/pages/Topic/detail.tsx b/web/src/pages/Topic/detail.tsx
index 37cb1e5..0c9965c 100644
--- a/web/src/pages/Topic/detail.tsx
+++ b/web/src/pages/Topic/detail.tsx
@@ -1,20 +1,22 @@
-import React, {ReactNode, useContext, useState} from 'react';
+import React, { ReactNode, useContext, useState } from 'react';
import GlobalContext from '@/context/globalContext';
import Breadcrumb from '@/components/Breadcrumb';
import Table from '@/components/Tablex';
import TitleWrap from '@/components/TitleWrap';
-import {Form, Button, Spin, Col, Row, Switch} from 'antd';
+import { Form, Button, Spin, Col, Row, Switch } from 'antd';
import { useImmer } from 'use-immer';
import './index.less';
import { useRequest } from '@/hooks';
-import {useParams} from 'react-router-dom';
-import {boolean2Chinese, transParamsWithConstantsMap} from "@/utils";
-import tableFilterHelper from "@/components/Tablex/tableFilterHelper";
-import CommonModal, {onOpenModal, TopicResultData} from './commonModal';
-import BrokerModal, {BrokerData, BrokerModalProps, onOpenModal as onOpenBrokerModal} from '@/pages/Broker/commonModal';
-import {BROKER_INFO_ZH_MAP} from "@/constants/broker";
-import {PERSON_INFO_ZH_MAP} from "@/constants/person";
-import {TOPIC_INFO_ZH_MAP} from "@/constants/topic";
+import { useParams } from 'react-router-dom';
+import { boolean2Chinese, transParamsWithConstantsMap } from '@/utils';
+import tableFilterHelper from '@/components/Tablex/tableFilterHelper';
+import CommonModal, { onOpenModal, TopicResultData } from './commonModal';
+import BrokerModal, {
+ onOpenModal as onOpenBrokerModal,
+} from '@/pages/Broker/commonModal';
+import { BROKER_INFO_ZH_MAP } from '@/constants/broker';
+import { PERSON_INFO_ZH_MAP } from '@/constants/person';
+import { TOPIC_INFO_ZH_MAP } from '@/constants/topic';
declare type TopicQueryData = {
topicName: string;
@@ -30,28 +32,37 @@ const Detail: React.FC = () => {
const [isSrvAcceptSubscribe, setIsSrvAcceptSubscribe] = useState<any>(false);
const [enableAuthControl, setEnableAuthControl] = useState<any>(false);
const [filterData, updateFilterData] = useImmer<any>({});
- const queryTopicInfo = useRequest<any>((data: TopicQueryData = {
- topicName: name,
- }) => ({
- url: '/api/op_query/admin_query_topic_authorize_control',
- data: {
- ...data
- }
- }));
- const queryTopicConf = useRequest<any>((data: TopicQueryData = {
- topicName: name,
- }) => ({
- url: '/api/op_query/admin_query_topic_info',
- data: {
- ...data
- }
- }), {
- onSuccess: data => {
- setIsSrvAcceptPublish(data[0]['isSrvAcceptPublish']);
- setIsSrvAcceptSubscribe(data[0]['isSrvAcceptSubscribe']);
- setEnableAuthControl(data[0]['authData']['enableAuthControl']);
+ const queryTopicInfo = useRequest<any>(
+ (
+ data: TopicQueryData = {
+ topicName: name,
+ }
+ ) => ({
+ url: '/api/op_query/admin_query_topic_authorize_control',
+ data: {
+ ...data,
+ },
+ })
+ );
+ const queryTopicConf = useRequest<any>(
+ (
+ data: TopicQueryData = {
+ topicName: name,
+ }
+ ) => ({
+ url: '/api/op_query/admin_query_topic_info',
+ data: {
+ ...data,
+ },
+ }),
+ {
+ onSuccess: data => {
+ setIsSrvAcceptPublish(data[0]['isSrvAcceptPublish']);
+ setIsSrvAcceptSubscribe(data[0]['isSrvAcceptSubscribe']);
+ setEnableAuthControl(data[0]['authData']['enableAuthControl']);
+ },
}
- });
+ );
// render
const searchStyle = {
@@ -59,31 +70,44 @@ const Detail: React.FC = () => {
top: '-40px',
right: '10px',
zIndex: 1,
- width: '300px'
+ width: '300px',
};
const renderBrokerList = (): ReactNode => {
- const columns = [{
+ const columns = [
+ {
title: 'Broker',
render: (t: string, r: TopicResultData) => {
return `${r.brokerId}#${r.brokerIp}:${r.brokerPort}`;
},
},
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'runInfo.acceptPublish'),
+ title: transParamsWithConstantsMap(
+ BROKER_INFO_ZH_MAP,
+ 'runInfo.acceptPublish'
+ ),
dataIndex: ['runInfo', 'acceptPublish'],
render: (t: string) => boolean2Chinese(t),
},
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'runInfo.acceptSubscribe'),
+ title: transParamsWithConstantsMap(
+ BROKER_INFO_ZH_MAP,
+ 'runInfo.acceptSubscribe'
+ ),
dataIndex: ['runInfo', 'acceptSubscribe'],
render: (t: string) => boolean2Chinese(t),
},
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'runInfo.numPartitions'),
+ title: transParamsWithConstantsMap(
+ BROKER_INFO_ZH_MAP,
+ 'runInfo.numPartitions'
+ ),
dataIndex: ['runInfo', 'numPartitions'],
},
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'runInfo.brokerManageStatus'),
+ title: transParamsWithConstantsMap(
+ BROKER_INFO_ZH_MAP,
+ 'runInfo.brokerManageStatus'
+ ),
dataIndex: ['runInfo', 'brokerManageStatus'],
},
{
@@ -92,7 +116,10 @@ const Detail: React.FC = () => {
render: (t: string) => boolean2Chinese(t),
},
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'acceptSubscribe'),
+ title: transParamsWithConstantsMap(
+ BROKER_INFO_ZH_MAP,
+ 'acceptSubscribe'
+ ),
dataIndex: 'acceptSubscribe',
render: (t: string) => boolean2Chinese(t),
},
@@ -101,11 +128,17 @@ const Detail: React.FC = () => {
dataIndex: 'numPartitions',
},
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'unflushThreshold'),
+ title: transParamsWithConstantsMap(
+ BROKER_INFO_ZH_MAP,
+ 'unflushThreshold'
+ ),
dataIndex: 'unflushThreshold',
},
{
- title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'unflushInterval'),
+ title: transParamsWithConstantsMap(
+ BROKER_INFO_ZH_MAP,
+ 'unflushInterval'
+ ),
dataIndex: 'unflushInterval',
},
{
@@ -118,87 +151,96 @@ const Detail: React.FC = () => {
},
{
title: '操作',
- render: (t:string, r: TopicResultData) => {
- return (<span>
- <a onClick={() => onEdit(r)}>编辑</a>
- <a onClick={() => onReload(r)}>重载</a>
- <a onClick={() => onDeleteBroker(r)}>删除</a>
- </span>)
- }
- }];
- const {data} = queryTopicConf;
- if(!data || !data[0]) return null;
- const {topicInfo} = data[0];
+ render: (t: string, r: TopicResultData) => {
+ return (
+ <span>
+ <a onClick={() => onEdit(r)}>编辑</a>
+ <a onClick={() => onReload(r)}>重载</a>
+ <a onClick={() => onDeleteBroker(r)}>删除</a>
+ </span>
+ );
+ },
+ },
+ ];
+ const { data } = queryTopicConf;
+ if (!data || !data[0]) return null;
+ const { topicInfo } = data[0];
- return <Table columns={columns}
- dataSource={topicInfo}
- rowKey={r => `${r.brokerId}#${r.brokerIp}:${r.brokerPort}`}
- dataSourceX={filterData.topicInfoList}
- searchPlaceholder="请输入brokerId,Ip,Port搜索"
- searchStyle={searchStyle}
- filterFnX={value =>
- tableFilterHelper({
- key: value,
- srcArray: topicInfo,
- targetArray: filterData.topicInfoList,
- updateFunction: res =>
- updateFilterData(filterData => {
- filterData.topicInfoList = res;
- }),
- filterList: [
- 'brokerId',
- 'brokerIp',
- 'brokerPort'
- ],
- })
- }
- />;
- }
+ return (
+ <Table
+ columns={columns}
+ dataSource={topicInfo}
+ rowKey={r => `${r.brokerId}#${r.brokerIp}:${r.brokerPort}`}
+ dataSourceX={filterData.topicInfoList}
+ searchPlaceholder="请输入brokerId,Ip,Port搜索"
+ searchStyle={searchStyle}
+ filterFnX={value =>
+ tableFilterHelper({
+ key: value,
+ srcArray: topicInfo,
+ targetArray: filterData.topicInfoList,
+ updateFunction: res =>
+ updateFilterData(filterData => {
+ filterData.topicInfoList = res;
+ }),
+ filterList: ['brokerId', 'brokerIp', 'brokerPort'],
+ })
+ }
+ />
+ );
+ };
const renderConsumeGroupList = (): ReactNode => {
- const columns = [{
+ const columns = [
+ {
title: '消费组',
dataIndex: 'groupName',
- }, {
+ },
+ {
title: transParamsWithConstantsMap(PERSON_INFO_ZH_MAP, 'createUser'),
dataIndex: 'createUser',
- }, {
+ },
+ {
title: transParamsWithConstantsMap(PERSON_INFO_ZH_MAP, 'createDate'),
dataIndex: 'createDate',
},
{
title: '操作',
- render: (t:string, r: TopicResultData) => {
- return (<span>
- <a onClick={() => onDeleteConsumeGroup(r)}>删除</a>
- </span>)
- }
- }];
- const {data} = queryTopicInfo;
- if(!data || !data[0]) return null;
- const {authConsumeGroup} = data[0];
+ render: (t: string, r: TopicResultData) => {
+ return (
+ <span>
+ <a onClick={() => onDeleteConsumeGroup(r)}>删除</a>
+ </span>
+ );
+ },
+ },
+ ];
+ const { data } = queryTopicInfo;
+ if (!data || !data[0]) return null;
+ const { authConsumeGroup } = data[0];
- return <Table columns={columns}
- dataSource={authConsumeGroup}
- rowKey={r => `${r.brokerId}#${r.brokerIp}:${r.brokerPort}`}
- dataSourceX={filterData.list}
- searchPlaceholder="请输入消费组名称搜索"
- searchStyle={searchStyle}
- filterFnX={value =>
- tableFilterHelper({
- key: value,
- srcArray: authConsumeGroup,
- targetArray: filterData.list,
- updateFunction: res =>
- updateFilterData(filterData => {
- filterData.list = res;
- }),
- filterList: [
- 'groupName',
- ],
- })
- }
- />;
- }
+ return (
+ <Table
+ columns={columns}
+ dataSource={authConsumeGroup}
+ rowKey={r => `${r.brokerId}#${r.brokerIp}:${r.brokerPort}`}
+ dataSourceX={filterData.list}
+ searchPlaceholder="请输入消费组名称搜索"
+ searchStyle={searchStyle}
+ filterFnX={value =>
+ tableFilterHelper({
+ key: value,
+ srcArray: authConsumeGroup,
+ targetArray: filterData.list,
+ updateFunction: res =>
+ updateFilterData(filterData => {
+ filterData.list = res;
+ }),
+ filterList: ['groupName'],
+ })
+ }
+ />
+ );
+ };
// event
// isSrvAcceptPublish && isSrvAcceptSubscribe event
@@ -215,32 +257,34 @@ const Detail: React.FC = () => {
option = e ? '订阅' : '禁止可订阅';
}
- queryBrokerListByTopicNameQuery.run({
- data: {
- topicName,
- brokerId: ''
- },
- }).then((d: TopicResultData) => {
- onOpenModal({
- type: 'topicStateChange',
- title: `请确认操作`,
- updateFunction: updateModelParams,
- params: {
- option,
- value: e,
+ queryBrokerListByTopicNameQuery
+ .run({
+ data: {
topicName,
- data: d[0].topicInfo,
- type,
- callback: () => {
- if (type === 'isSrvAcceptPublish') {
- setIsSrvAcceptPublish(e);
- } else if (type === 'isSrvAcceptSubscribe') {
- setIsSrvAcceptSubscribe(e);
- }
- }
+ brokerId: '',
},
+ })
+ .then((d: TopicResultData) => {
+ onOpenModal({
+ type: 'topicStateChange',
+ title: `请确认操作`,
+ updateFunction: updateModelParams,
+ params: {
+ option,
+ value: e,
+ topicName,
+ data: d[0].topicInfo,
+ type,
+ callback: () => {
+ if (type === 'isSrvAcceptPublish') {
+ setIsSrvAcceptPublish(e);
+ } else if (type === 'isSrvAcceptSubscribe') {
+ setIsSrvAcceptSubscribe(e);
+ }
+ },
+ },
+ });
});
- });
};
// author
const onAuthorizeControl = (e: boolean) => {
@@ -256,29 +300,38 @@ const Detail: React.FC = () => {
topicName,
callback: () => {
setEnableAuthControl(e);
- }
+ },
},
});
- }
+ };
// edit topic
const onEdit = (r?: TopicResultData) => {
- const p = r || queryTopicConf.data[0].topicInfo[0]
+ const p = r || queryTopicConf.data[0].topicInfo[0];
onOpenModal({
- type: 'editTopic', title: '编辑Topic', updateFunction: updateModelParams, params: {
+ type: 'editTopic',
+ title: '编辑Topic',
+ updateFunction: updateModelParams,
+ params: {
...p,
callback: (d: any) => {
onOpenModal({
- type: 'chooseBroker', title: '选择【修改】broker列表', updateFunction: updateModelParams, params: {
+ type: 'chooseBroker',
+ title: '选择【修改】broker列表',
+ updateFunction: updateModelParams,
+ params: {
data: d,
subType: 'edit',
callback: () => {
- onOpenModal({type: 'close', updateFunction: updateModelParams})
+ onOpenModal({
+ type: 'close',
+ updateFunction: updateModelParams,
+ });
},
- }
+ },
});
- }
- }
- })
+ },
+ },
+ });
};
// reload topic
const queryBrokerInfo = useRequest<any, any>(
@@ -286,38 +339,42 @@ const Detail: React.FC = () => {
{ manual: true }
);
const onReload = (r: TopicResultData) => {
- queryBrokerInfo.run({
- data: {
- brokerId: r.brokerId
- }
- }).then(data => {
- onOpenBrokerModal({
- type: 'reload',
- title: `确认进行【重载】操作？`,
- updateFunction: updateBrokerModalParams,
- params: [data[0].brokerId],
+ queryBrokerInfo
+ .run({
+ data: {
+ brokerId: r.brokerId,
+ },
+ })
+ .then(data => {
+ onOpenBrokerModal({
+ type: 'reload',
+ title: `确认进行【重载】操作？`,
+ updateFunction: updateBrokerModalParams,
+ params: [data[0].brokerId],
+ });
});
- })
- }
+ };
// on delete broker
const onDeleteBroker = (r: TopicResultData) => {
- queryBrokerListByTopicNameQuery.run({
- data: {
- topicName: r.topicName,
- brokerId: r.brokerId
- },
- }).then((d: TopicResultData) => {
- onOpenModal({
- type: 'deleteTopic',
- title: `请确认操作`,
- updateFunction: updateModelParams,
- params: {
+ queryBrokerListByTopicNameQuery
+ .run({
+ data: {
topicName: r.topicName,
- data: d[0].topicInfo,
+ brokerId: r.brokerId,
},
+ })
+ .then((d: TopicResultData) => {
+ onOpenModal({
+ type: 'deleteTopic',
+ title: `请确认操作`,
+ updateFunction: updateModelParams,
+ params: {
+ topicName: r.topicName,
+ data: d[0].topicInfo,
+ },
+ });
});
- });
- }
+ };
const onDeleteConsumeGroup = (r: TopicResultData) => {
onOpenModal({
type: 'deleteConsumeGroup',
@@ -325,10 +382,10 @@ const Detail: React.FC = () => {
updateFunction: updateModelParams,
params: {
topicName: r.topicName,
- groupName: r.groupName
+ groupName: r.groupName,
},
});
- }
+ };
return (
<Spin spinning={queryTopicConf.loading && queryTopicInfo.loading}>
@@ -337,74 +394,115 @@ const Detail: React.FC = () => {
appendParams={`Topic（${name}）详情`}
/>
<div className="main-container">
- <TitleWrap title="基本信息" wrapperStyle={{position: 'relative'}} hasSplit={false}>
+ <TitleWrap
+ title="基本信息"
+ wrapperStyle={{ position: 'relative' }}
+ hasSplit={false}
+ >
<div className="topic-detail-options-wrapper">
<Switch
className="mr10"
- checked={isSrvAcceptPublish} checkedChildren="订阅" unCheckedChildren="订阅"
+ checked={isSrvAcceptPublish}
+ checkedChildren="订阅"
+ unCheckedChildren="订阅"
onChange={e => onSwitchChange(e, 'isSrvAcceptPublish')}
/>
<Switch
className="mr10"
- checked={isSrvAcceptSubscribe} checkedChildren="发布" unCheckedChildren="发布"
+ checked={isSrvAcceptSubscribe}
+ checkedChildren="发布"
+ unCheckedChildren="发布"
onChange={e => onSwitchChange(e, 'isSrvAcceptSubscribe')}
/>
<Switch
className="mr10"
- checked={enableAuthControl} checkedChildren="权限可控" unCheckedChildren="权限可控"
+ checked={enableAuthControl}
+ checkedChildren="权限可控"
+ unCheckedChildren="权限可控"
onChange={e => onAuthorizeControl(e)}
/>
</div>
<Form form={form}>
<Row gutter={24}>
- {queryTopicConf.data && Object.keys(queryTopicConf.data[0]).map((t: string, index: number) => {
- const label = transParamsWithConstantsMap(TOPIC_INFO_ZH_MAP, t);
- const ignoreList = ['isSrvAcceptPublish', 'isSrvAcceptSubscribe'];
- if (queryTopicConf.data[0][t] instanceof Object || !label || ignoreList.includes(t)) return null
- return (<Col span={12} key={'queryTopicConf' + index}>
- <Form.Item
- labelCol={{span: 12}}
- label={label}
- >
- {queryTopicConf.data[0][t] + ''}
- </Form.Item>
- </Col>)
- })}
+ {queryTopicConf.data &&
+ Object.keys(queryTopicConf.data[0]).map(
+ (t: string, index: number) => {
+ const label = transParamsWithConstantsMap(
+ TOPIC_INFO_ZH_MAP,
+ t
+ );
+ const ignoreList = [
+ 'isSrvAcceptPublish',
+ 'isSrvAcceptSubscribe',
+ ];
+ if (
+ queryTopicConf.data[0][t] instanceof Object ||
+ !label ||
+ ignoreList.includes(t)
+ )
+ return null;
+ return (
+ <Col span={12} key={'queryTopicConf' + index}>
+ <Form.Item labelCol={{ span: 12 }} label={label}>
+ {queryTopicConf.data[0][t] + ''}
+ </Form.Item>
+ </Col>
+ );
+ }
+ )}
</Row>
</Form>
</TitleWrap>
- <TitleWrap title="缺省配置" wrapperStyle={{position: 'relative'}}>
+ <TitleWrap title="缺省配置" wrapperStyle={{ position: 'relative' }}>
<div className="topic-detail-options-wrapper">
- <Button className="mr10" type="primary" size="small" onClick={() => onEdit()}>
+ <Button
+ className="mr10"
+ type="primary"
+ size="small"
+ onClick={() => onEdit()}
+ >
编辑
</Button>
</div>
<Form form={form}>
<Row gutter={24}>
- {['acceptPublish', 'acceptSubscribe', 'unflushThreshold', 'unflushInterval', 'deleteWhen', 'deletePolicy', 'numPartitions'].map((t: string, index: number) => {
- if(!queryTopicConf.data || !queryTopicConf.data[0].topicInfo[0]) return null;
+ {[
+ 'acceptPublish',
+ 'acceptSubscribe',
+ 'unflushThreshold',
+ 'unflushInterval',
+ 'deleteWhen',
+ 'deletePolicy',
+ 'numPartitions',
+ ].map((t: string, index: number) => {
+ if (
+ !queryTopicConf.data ||
+ !queryTopicConf.data[0].topicInfo[0]
+ )
+ return null;
const value = queryTopicConf.data[0].topicInfo[0][t];
- return (<Col span={12} key={'queryTopicConf' + index}>
- <Form.Item
- labelCol={{span: 12}}
- label={t}
- >
- {value + ''}
- </Form.Item>
- </Col>)
+ return (
+ <Col span={12} key={'queryTopicConf' + index}>
+ <Form.Item labelCol={{ span: 12 }} label={t}>
+ {value + ''}
+ </Form.Item>
+ </Col>
+ );
})}
</Row>
</Form>
</TitleWrap>
- <TitleWrap title="部署Broker列表">
- {renderBrokerList()}
- </TitleWrap>
- <TitleWrap title="消费组列表">
- {renderConsumeGroupList()}
- </TitleWrap>
+ <TitleWrap title="部署Broker列表">{renderBrokerList()}</TitleWrap>
+ <TitleWrap title="消费组列表">{renderConsumeGroupList()}</TitleWrap>
</div>
- <CommonModal modalParams={modalParams} data={[queryTopicConf.data && queryTopicConf.data[0]]} />
- <BrokerModal modalParams={brokerModalParams} data={[queryBrokerInfo.data && queryBrokerInfo.data[0]]} />
+ <CommonModal
+ modalParams={modalParams}
+ data={[queryTopicConf.data && queryTopicConf.data[0]]}
+ />
+ <BrokerModal
+ modalParams={brokerModalParams}
+ data={[queryBrokerInfo.data && queryBrokerInfo.data[0]]}
+ />
</Spin>
);
};
diff --git a/web/src/pages/Topic/index.tsx b/web/src/pages/Topic/index.tsx
index d85dc8b..cd112f9 100644
--- a/web/src/pages/Topic/index.tsx
+++ b/web/src/pages/Topic/index.tsx
@@ -2,38 +2,48 @@ import React, { useContext } from 'react';
import GlobalContext from '@/context/globalContext';
import Breadcrumb from '@/components/Breadcrumb';
import Table from '@/components/Tablex';
-import { Form, Button, Spin, Switch} from 'antd';
+import { Form, Button, Spin, Switch } from 'antd';
import { useImmer } from 'use-immer';
import { useRequest } from '@/hooks';
import tableFilterHelper from '@/components/Tablex/tableFilterHelper';
-import { boolean2Chinese, transParamsWithConstantsMap } from '@/utils';
-import {TOPIC_INFO_ZH_MAP} from '@/constants/topic';
+import { transParamsWithConstantsMap } from '@/utils';
+import { TOPIC_INFO_ZH_MAP } from '@/constants/topic';
import './index.less';
-import {Link} from "react-router-dom";
-import CommonModal, {OPTIONS, onOpenModal, TopicResultData, TopicData} from './commonModal'
+import { Link } from 'react-router-dom';
+import CommonModal, {
+ onOpenModal,
+ TopicResultData,
+ TopicData,
+} from './commonModal';
const Topic: React.FC = () => {
// column config
const columns = [
{
- title: transParamsWithConstantsMap(TOPIC_INFO_ZH_MAP,'topicName'),
+ title: transParamsWithConstantsMap(TOPIC_INFO_ZH_MAP, 'topicName'),
dataIndex: 'topicName',
render: (t: Array<any>) => <Link to={'/topic/' + t}>{t}</Link>,
},
{
- title: transParamsWithConstantsMap(TOPIC_INFO_ZH_MAP,'infoCount'),
+ title: transParamsWithConstantsMap(TOPIC_INFO_ZH_MAP, 'infoCount'),
dataIndex: 'infoCount',
},
{
- title: transParamsWithConstantsMap(TOPIC_INFO_ZH_MAP,'totalCfgNumPart'),
+ title: transParamsWithConstantsMap(TOPIC_INFO_ZH_MAP, 'totalCfgNumPart'),
dataIndex: 'totalCfgNumPart',
},
{
- title: transParamsWithConstantsMap(TOPIC_INFO_ZH_MAP,'totalRunNumPartCount'),
+ title: transParamsWithConstantsMap(
+ TOPIC_INFO_ZH_MAP,
+ 'totalRunNumPartCount'
+ ),
dataIndex: 'totalRunNumPartCount',
},
{
- title: transParamsWithConstantsMap(TOPIC_INFO_ZH_MAP,'isSrvAcceptPublish'),
+ title: transParamsWithConstantsMap(
+ TOPIC_INFO_ZH_MAP,
+ 'isSrvAcceptPublish'
+ ),
dataIndex: 'isSrvAcceptPublish',
render: (t: boolean, r: TopicResultData) => {
return (
@@ -45,7 +55,10 @@ const Topic: React.FC = () => {
},
},
{
- title: transParamsWithConstantsMap(TOPIC_INFO_ZH_MAP,'isSrvAcceptSubscribe'),
+ title: transParamsWithConstantsMap(
+ TOPIC_INFO_ZH_MAP,
+ 'isSrvAcceptSubscribe'
+ ),
dataIndex: 'isSrvAcceptSubscribe',
render: (t: boolean, r: TopicResultData) => {
return (
@@ -57,7 +70,10 @@ const Topic: React.FC = () => {
},
},
{
- title: transParamsWithConstantsMap(TOPIC_INFO_ZH_MAP,'enableAuthControl'),
+ title: transParamsWithConstantsMap(
+ TOPIC_INFO_ZH_MAP,
+ 'enableAuthControl'
+ ),
dataIndex: 'authData.enableAuthControl',
render: (t: boolean, r: TopicResultData) => {
return (
@@ -72,9 +88,9 @@ const Topic: React.FC = () => {
title: '操作',
dataIndex: 'topicIp',
render: (t: string, r: any) => {
- return <a onClick={() => onDelete(r)}>删除</a>
- }
- }
+ return <a onClick={() => onDelete(r)}>删除</a>;
+ },
+ },
];
const { breadMap } = useContext(GlobalContext);
const [modalParams, updateModelParams] = useImmer<any>({});
@@ -82,17 +98,20 @@ const Topic: React.FC = () => {
const [topicList, updateTopicList] = useImmer<TopicData>([]);
const [form] = Form.useForm();
// init query
- const { data, loading, run } = useRequest<any, TopicData>((data: TopicResultData) => ({
- url: '/api/op_query/admin_query_topic_info',
- data: data,
- }), {
- cacheKey: 'topicList',
- onSuccess: data => {
- updateTopicList(d => {
- Object.assign(d, data);
- });
- },
- });
+ const { data, loading, run } = useRequest<any, TopicData>(
+ (data: TopicResultData) => ({
+ url: '/api/op_query/admin_query_topic_info',
+ data: data,
+ }),
+ {
+ cacheKey: 'topicList',
+ onSuccess: data => {
+ updateTopicList(d => {
+ Object.assign(d, data);
+ });
+ },
+ }
+ );
// table event
// acceptSubscribe && acceptPublish options
@@ -108,33 +127,35 @@ const Topic: React.FC = () => {
option = e ? '订阅' : '禁止可订阅';
}
- queryBrokerListByTopicNameQuery.run({
- data: {
- topicName: r.topicName,
- brokerId: ''
- },
- }).then((d: TopicResultData) => {
- onOpenModal({
- type: 'topicStateChange',
- title: `请确认操作`,
- updateFunction: updateModelParams,
- params: {
- option,
- value: e,
+ queryBrokerListByTopicNameQuery
+ .run({
+ data: {
topicName: r.topicName,
- data: d[0].topicInfo,
- type,
- callback: () => {
- const index = data.findIndex(
- (t: TopicResultData) => t.topicName === r.topicName
- );
- updateTopicList(d => {
- d[index][type] = e + '';
- });
- }
+ brokerId: '',
},
+ })
+ .then((d: TopicResultData) => {
+ onOpenModal({
+ type: 'topicStateChange',
+ title: `请确认操作`,
+ updateFunction: updateModelParams,
+ params: {
+ option,
+ value: e,
+ topicName: r.topicName,
+ data: d[0].topicInfo,
+ type,
+ callback: () => {
+ const index = data.findIndex(
+ (t: TopicResultData) => t.topicName === r.topicName
+ );
+ updateTopicList(d => {
+ d[index][type] = e + '';
+ });
+ },
+ },
+ });
});
- });
};
// author
const onAuthorizeControl = (e: boolean, r: TopicResultData) => {
@@ -154,45 +175,56 @@ const Topic: React.FC = () => {
updateTopicList(d => {
d[index]['authData']['enableAuthControl'] = e + '';
});
- }
+ },
},
});
- }
+ };
// new topic
const onNewTopic = () => {
onOpenModal({
- type: 'newTopic', title: '新建Topic', updateFunction: updateModelParams, params: {
+ type: 'newTopic',
+ title: '新建Topic',
+ updateFunction: updateModelParams,
+ params: {
callback: (d: any) => {
onOpenModal({
- type: 'chooseBroker', title: '选择【新增】broker列表', updateFunction: updateModelParams, params: {
+ type: 'chooseBroker',
+ title: '选择【新增】broker列表',
+ updateFunction: updateModelParams,
+ params: {
data: d,
callback: () => {
- onOpenModal({type: 'close', updateFunction: updateModelParams})
+ onOpenModal({
+ type: 'close',
+ updateFunction: updateModelParams,
+ });
},
- }
+ },
});
- }
- }
- })
+ },
+ },
+ });
};
// delete
const onDelete = (r: TopicResultData) => {
- queryBrokerListByTopicNameQuery.run({
- data: {
- topicName: r.topicName,
- brokerId: ''
- },
- }).then((d: TopicResultData) => {
- onOpenModal({
- type: 'deleteTopic',
- title: `请确认操作`,
- updateFunction: updateModelParams,
- params: {
+ queryBrokerListByTopicNameQuery
+ .run({
+ data: {
topicName: r.topicName,
- data: d[0].topicInfo,
+ brokerId: '',
},
+ })
+ .then((d: TopicResultData) => {
+ onOpenModal({
+ type: 'deleteTopic',
+ title: `请确认操作`,
+ updateFunction: updateModelParams,
+ params: {
+ topicName: r.topicName,
+ data: d[0].topicInfo,
+ },
+ });
});
- });
};
return (
@@ -234,9 +266,7 @@ const Topic: React.FC = () => {
updateFilterData(filterData => {
filterData.list = res;
}),
- filterList: [
- 'topicName',
- ],
+ filterList: ['topicName'],
})
}
/>
diff --git a/web/src/pages/Topic/query.tsx b/web/src/pages/Topic/query.tsx
index fc2a612..bf17545 100644
--- a/web/src/pages/Topic/query.tsx
+++ b/web/src/pages/Topic/query.tsx
@@ -1,9 +1,9 @@
import * as React from 'react';
import './index.less';
-import {OKProps} from "@/components/Modalx";
-import {useRequest} from "@/hooks";
-import {useContext, useEffect} from "react";
-import GlobalContext from "@/context/globalContext";
+import { OKProps } from '@/components/Modalx';
+import { useRequest } from '@/hooks';
+import { useContext, useEffect } from 'react';
+import GlobalContext from '@/context/globalContext';
interface ComProps {
fire: string;
@@ -11,18 +11,19 @@ interface ComProps {
type: string;
}
-let newObjectTemp: string = '';
-let editObjectTemp: string = '';
+let newObjectTemp = '';
+let editObjectTemp = '';
const Comp = (props: ComProps) => {
- const {fire} = props;
+ const { fire } = props;
const { userInfo } = useContext(GlobalContext);
+ // eslint-disable-next-line
useEffect(() => {
- const {params, type} = props;
+ const { params, type } = props;
dispatchAction(type, params);
}, [fire]);
const dispatchAction = (type: string, p: OKProps) => {
- if(!fire) return null;
+ if (!fire) return null;
let promise;
switch (type) {
case 'newTopic':
@@ -51,17 +52,20 @@ const Comp = (props: ComProps) => {
break;
}
- promise && promise.then(t => {
- const {callback} = p.params;
- if(t.statusCode !== 0 && callback) callback(t);
- })
+ promise &&
+ promise.then(t => {
+ const { callback } = p.params;
+ if (t.statusCode !== 0 && callback) callback(t);
+ });
};
- const commonQuery = useRequest<any, any>(
- (url, data) => ({ url, ...data }),
- { manual: true }
- );
+ const commonQuery = useRequest<any, any>((url, data) => ({ url, ...data }), {
+ manual: true,
+ });
const newTopicQuery = useRequest<any, any>(
- data => ({ url: '/api/op_query/admin_query_broker_topic_config_info', ...data }),
+ data => ({
+ url: '/api/op_query/admin_query_broker_topic_config_info',
+ ...data,
+ }),
{ manual: true }
);
const newTopic = (p: OKProps) => {
@@ -69,7 +73,7 @@ const Comp = (props: ComProps) => {
return newTopicQuery.run({
data: {
topicName: '',
- brokerId: ''
+ brokerId: '',
},
});
};
@@ -80,18 +84,18 @@ const Comp = (props: ComProps) => {
);
const endChooseBroker = (p: OKProps) => {
const topicParams = JSON.parse(newObjectTemp);
- const {params} = p;
+ const { params } = p;
return endChooseBrokerQuery.run({
data: {
borkerId: params.selectBroker.join(','),
confModAuthToken: p.psw,
- ...topicParams
+ ...topicParams,
},
});
};
const editTopic = (p: OKProps) => {
- const {params} = p;
+ const { params } = p;
editObjectTemp = JSON.stringify(p.params);
return newTopicQuery.run({
data: {
@@ -102,14 +106,14 @@ const Comp = (props: ComProps) => {
};
const endEditChooseBroker = (p: OKProps) => {
const topicParams = JSON.parse(editObjectTemp);
- const {params} = p;
+ const { params } = p;
return commonQuery.run(`/api/op_modify/admin_modify_topic_info`, {
data: {
borkerId: params.selectBroker.join(','),
confModAuthToken: p.psw,
- ...topicParams
+ ...topicParams,
},
- })
+ });
};
const deleteTopic = (type: string, p: OKProps) => {
@@ -119,36 +123,35 @@ const Comp = (props: ComProps) => {
brokerId: params.selectBroker.join(','),
confModAuthToken: p.psw,
modifyUser: userInfo.userName,
- topicName: params.topicName
+ topicName: params.topicName,
},
});
};
const deleteConsumeGroup = (type: string, p: OKProps) => {
const { params } = p;
- return commonQuery.run(`/api/op_modify/admin_delete_allowed_consumer_group_info`, {
- data: {
- groupName: params.groupName,
- confModAuthToken: p.psw,
- topicName: params.topicName
- },
- });
+ return commonQuery.run(
+ `/api/op_modify/admin_delete_allowed_consumer_group_info`,
+ {
+ data: {
+ groupName: params.groupName,
+ confModAuthToken: p.psw,
+ topicName: params.topicName,
+ },
+ }
+ );
};
const topicStateChange = (type: string, p: OKProps) => {
const { params } = p;
- let data: {
- [key: string]: any;
- };
-
- data = {
+ const data: any = {
brokerId: params.selectBroker.join([',']),
confModAuthToken: p.psw,
modifyUser: userInfo.userName,
- topicName: params.topicName
- }
- if(params.type === 'isSrvAcceptPublish') {
+ topicName: params.topicName,
+ };
+ if (params.type === 'isSrvAcceptPublish') {
data.acceptPublish = params.value;
}
- if(params.type === 'isSrvAcceptSubscribe') {
+ if (params.type === 'isSrvAcceptSubscribe') {
data.acceptSubscribe = params.value;
}
@@ -159,25 +162,19 @@ const Comp = (props: ComProps) => {
const authorizeControl = (type: string, p: OKProps) => {
const { params } = p;
- let data: {
- [key: string]: any;
- };
-
- data = {
+ const data: any = {
confModAuthToken: p.psw,
topicName: params.topicName,
isEnable: params.value,
modifyUser: userInfo.userName,
- }
+ };
return commonQuery.run(`/api/op_modify/admin_set_topic_authorize_control`, {
data,
});
};
- return (
- <></>
- );
+ return <></>;
};
export default Comp;
diff --git a/web/src/router.tsx b/web/src/router.tsx
index 66e0cdc..46df97d 100644
--- a/web/src/router.tsx
+++ b/web/src/router.tsx
@@ -14,6 +14,7 @@ import GlobalContext from '@/context/globalContext';
const App = () => {
const [cluster, setCluster] = useState();
const [breadMap, setBreadMap] = useState();
+ // eslint-disable-next-line
const [userInfo, setUserInfo] = useState({
userName: 'webapi',
});
diff --git a/web/src/utils/index.ts b/web/src/utils/index.ts
index d741565..e410d91 100644
--- a/web/src/utils/index.ts
+++ b/web/src/utils/index.ts
@@ -1,7 +1,7 @@
import { isObject, isEmpty } from 'lodash';
export const isDevelopEnv = () => {
- return process.env.NODE_ENV === 'development'
+ return process.env.NODE_ENV === 'development';
};
export const isEmptyParam = (value: any): boolean => {
@@ -37,6 +37,9 @@ export const boolean2Chinese = (value: boolean | string): string => {
return !v ? '否' : '是';
};
-export const transParamsWithConstantsMap = (map: any, paramsName: string): string => {
+export const transParamsWithConstantsMap = (
+ map: any,
+ paramsName: string
+): string => {
return map[paramsName] || paramsName;
-}
+};