This is an automated email from the ASF dual-hosted git repository. zakwu pushed a commit to branch new-web-client in repository https://gitbox.apache.org/repos/asf/incubator-tubemq.git
The following commit(s) were added to refs/heads/new-web-client by this push: new a074953 fix(eslint): fix eslint error a074953 is described below commit a074953f50a6e872dcf2b3e8f8117f72b7000b91 Author: zakwu <123537...@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; -} +};