From 18832dc4489b027e99961c78f88b1ddce7ab8355 Mon Sep 17 00:00:00 2001 From: zengqiao Date: Thu, 25 Aug 2022 20:32:49 +0800 Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- km-console/.eslintrc.js | 1 + km-console/README.md | 30 +++- .../packages/config-manager-fe/README.md | 43 +++++- .../config/d1-spa-webpack.js | 37 ----- .../config-manager-fe/src/@types/index.d.ts | 0 .../config-manager-fe/src/api/constant.ts | 7 - .../src/pages/UserManage/RoleTabContent.tsx | 42 ++++-- .../src/pages/UserManage/index.less | 10 ++ .../packages/layout-clusters-fe/README.md | 51 ++++--- .../layout-clusters-fe/src/common/api.tsx | 35 ----- .../layout-clusters-fe/src/common/config.tsx | 4 - .../components/CardBar/BrokerHealthCheck.tsx | 14 +- .../src/components/TopicJob/ReplicaMove.tsx | 5 +- .../src/constants/common.ts | 128 +++++++++++++++++- .../src/{common => constants}/reg.ts | 0 .../src/interface/index.tsx | 84 ------------ .../layout-clusters-fe/src/lib/url-parser.ts | 32 ----- .../layout-clusters-fe/src/lib/utils.ts | 88 ------------ .../src/pages/BrokerDetail/index.tsx | 30 ++-- .../pages/Consumers/ConsumerGroupDetail.tsx | 2 +- .../src/pages/Consumers/index.tsx | 8 +- .../src/pages/Jobs/RebalancePlan.tsx | 26 ++-- .../src/pages/LoadRebalance/ClusterNorms.tsx | 17 +-- .../pages/MutliClusterPage/AccessCluster.tsx | 2 +- .../src/pages/SecurityUsers/index.less | 6 +- .../src/pages/SecurityUsers/index.tsx | 43 ++++-- .../pages/SingleClusterDetail/LeftSider.tsx | 1 + .../src/pages/SingleClusterDetail/index.less | 15 +- .../src/pages/TestingConsumer/Consume.tsx | 8 +- .../src/pages/TestingProduce/config.tsx | 3 +- .../src/pages/TopicDetail/Messages.tsx | 2 +- 31 files changed, 369 insertions(+), 405 deletions(-) delete mode 100644 km-console/packages/config-manager-fe/config/d1-spa-webpack.js create mode 100644 km-console/packages/config-manager-fe/src/@types/index.d.ts delete mode 100644 km-console/packages/config-manager-fe/src/api/constant.ts delete mode 100755 km-console/packages/layout-clusters-fe/src/common/api.tsx delete mode 100755 km-console/packages/layout-clusters-fe/src/common/config.tsx rename km-console/packages/layout-clusters-fe/src/{common => constants}/reg.ts (100%) delete mode 100755 km-console/packages/layout-clusters-fe/src/interface/index.tsx delete mode 100644 km-console/packages/layout-clusters-fe/src/lib/url-parser.ts delete mode 100644 km-console/packages/layout-clusters-fe/src/lib/utils.ts diff --git a/km-console/.eslintrc.js b/km-console/.eslintrc.js index 8c805084..1e900306 100644 --- a/km-console/.eslintrc.js +++ b/km-console/.eslintrc.js @@ -29,5 +29,6 @@ module.exports = { '@typescript-eslint/no-var-requires': 0, 'prettier/prettier': 2, // 这项配置 对于不符合prettier规范的写法，eslint会提示报错 'no-console': 1, + 'react/display-name': 0, }, }; diff --git a/km-console/README.md b/km-console/README.md index 74565c4e..71e78853 100644 --- a/km-console/README.md +++ b/km-console/README.md @@ -1,19 +1,43 @@ ## 安装项目依赖 -* 安装lerna +- 安装 lerna + ``` -npm i -g lerna +npm install -g lerna +``` + +- 安装项目依赖 + +``` +npm run i ``` ## 启动项目 + ``` npm run start ``` + ### 环境信息 + http://localhost:port ## 构建项目 + ``` npm run build -``` \ No newline at end of file +``` + +## 目录结构 + +- packages + - layout-clusters-fe: 基座应用 & 多集群管理 + - config-manager-fe: 子应用 - 系统管理 +- tool: 启动 & 打包脚本 +- ... + +## 常见问题 + +Q: 执行 `npm run start` 时看不到应用构建和热加载过程？ +A: 需要到具体的应用中执行 `npm run start`，例如 `cd packages/layout-clusters-fe` 后，执行 `npm run start`。 diff --git a/km-console/packages/config-manager-fe/README.md b/km-console/packages/config-manager-fe/README.md index e6dc0726..af095162 100644 --- a/km-console/packages/config-manager-fe/README.md +++ b/km-console/packages/config-manager-fe/README.md @@ -1,11 +1,40 @@ -# `logi-fe` +## 使用说明 -> TODO: description +### 依赖安装： -## Usage +``` +npm install +``` -### 启动 -* npm i @didi/d1-cli -g -* d1 start +### 启动： -### 常见问题 +``` +npm run start +``` + +### 构建： + +``` +npm run build +``` + +构建后的代码默认会存放到项目根路径下 `km-rest/src/main/resources/templates/config` 文件夹里 + +## 目录结构 + +- config: 开发 & 构建配置 + - theme.js: antd 主题配置 + - d1-webpack.base.js: webpack 基础配置 +- src：源代码所在目录 + - @types: TypeScript 全局类型声明 + - api: 请求定义 + - assets：全局资源 img、css + - components：公共组件 + - constants: 全局配置、通用方法 + - locales: 国际化语言 + - pages: 路由匹配的页面组件 + - app.tsx: 菜单、路由配置组件 + - index.html: 单页 + - index.tsx: 入口文件 +- tsconfig.json: TypeScript 配置 +- webpack.config.js: webpack 配置入口 diff --git a/km-console/packages/config-manager-fe/config/d1-spa-webpack.js b/km-console/packages/config-manager-fe/config/d1-spa-webpack.js deleted file mode 100644 index 1d0fc910..00000000 --- a/km-console/packages/config-manager-fe/config/d1-spa-webpack.js +++ /dev/null @@ -1,37 +0,0 @@ -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const ProgressBarPlugin = require('progress-bar-webpack-plugin'); -const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); -const StatsPlugin = require('stats-webpack-plugin'); -const { CleanWebpackPlugin } = require('clean-webpack-plugin'); -const TerserJSPlugin = require('terser-webpack-plugin'); -const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); -const HappyPack = require('happypack'); -const os = require('os'); -const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }); -const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); - -var cwd = process.cwd(); -const path = require('path'); -const isProd = process.env.NODE_ENV === 'production'; - -const babelOptions = { - cacheDirectory: true, - babelrc: false, - presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-typescript'), require.resolve('@babel/preset-react')], - plugins: [ - new HtmlWebpackPlugin({ - meta: { - manifest: 'manifest.json', - }, - template: './src/index.html', - inject: 'body', - }), - ], - output: { - library: pkgJson.ident, - libraryTarget: 'amd', - }, - entry: { - [pkgJson.ident]: ['./src/index.tsx'], - }, -}; diff --git a/km-console/packages/config-manager-fe/src/@types/index.d.ts b/km-console/packages/config-manager-fe/src/@types/index.d.ts new file mode 100644 index 00000000..e69de29b diff --git a/km-console/packages/config-manager-fe/src/api/constant.ts b/km-console/packages/config-manager-fe/src/api/constant.ts deleted file mode 100644 index 2ec4270d..00000000 --- a/km-console/packages/config-manager-fe/src/api/constant.ts +++ /dev/null @@ -1,7 +0,0 @@ -export const defaultPagination = { - current: 1, - pageSize: 10, - position: 'bottomRight', - showSizeChanger: true, - pageSizeOptions: ['10', '20', '50', '100'], -}; diff --git a/km-console/packages/config-manager-fe/src/pages/UserManage/RoleTabContent.tsx b/km-console/packages/config-manager-fe/src/pages/UserManage/RoleTabContent.tsx index eeeaea86..c72fbb1b 100644 --- a/km-console/packages/config-manager-fe/src/pages/UserManage/RoleTabContent.tsx +++ b/km-console/packages/config-manager-fe/src/pages/UserManage/RoleTabContent.tsx @@ -376,7 +376,8 @@ export default (props: { curTabKey: string }): JSX.Element => { const [pagination, setPagination] = useState(defaultPagination); const [loading, setLoading] = useState(true); const [deleteBtnLoading, setDeleteBtnLoading] = useState(-1); - const [form] = Form.useForm(); + const [searchKeywords, setSearchKeywords] = useState(''); + const [searchKeywordsInput, setSearchKeywordsInput] = useState(''); const detailRef = useRef(null); const assignRolesRef = useRef(null); @@ -472,11 +473,10 @@ export default (props: { curTabKey: string }): JSX.Element => { ]; const getRoleList = (query = {}) => { - const formData = form.getFieldsValue(); const data = { page: pagination.current, size: pagination.pageSize, - ...formData, + roleName: searchKeywords, ...query, }; @@ -582,19 +582,33 @@ export default (props: { curTabKey: string }): JSX.Element => { } }, [curTabKey]); + useEffect(() => { + (searchKeywords || searchKeywords === '') && getRoleList({ pageNo: 1 }); + }, [searchKeywords]); + return ( <> -
-
getRoleList({ page: 1 })}> - - - - - - -
+
+ { + setSearchKeywords(searchKeywordsInput); + }} + style={{ fontSize: '16px' }} + /> + } + placeholder="请输入角色名称" + value={searchKeywordsInput} + onPressEnter={(_) => { + setSearchKeywords(searchKeywordsInput); + }} + onChange={(e) => { + setSearchKeywordsInput(e.target.value); + }} + /> {global.hasPermission && global.hasPermission(ConfigPermissionMap.ROLE_ADD) ? (
{data?.reassignmentJson && ( <> -

执行文件

+

执行文件

Reassignment json file（点击下载） diff --git a/km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/ClusterNorms.tsx b/km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/ClusterNorms.tsx index 1adb4da1..67ab2107 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/ClusterNorms.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/ClusterNorms.tsx @@ -1,18 +1,5 @@ import React, { useState, useEffect, useRef } from 'react'; -import { - Utils, - Drawer, - Button, - Form, - Space, - Divider, - AppContainer, - Input, - Transfer, - message, - IconFont, - InputNumber, -} from 'knowdesign'; +import { Utils, Drawer, Button, Form, Space, Divider, AppContainer, Input, Transfer, message, IconFont, InputNumber } from 'knowdesign'; import { CloseOutlined } from '@ant-design/icons'; import api from '../../api'; import './style/BalanceDrawer.less'; @@ -38,7 +25,7 @@ const ClusterNorms: React.FC = ({ onClose, visible, genData }) => { // 周期均衡 form.validateFields().then((values) => { const params = values?.brokers?.map((item: any) => { - const brokerId = nodeData?.filter((key) => key.brokerId === item && item)[0]?.brokerId; + const brokerId = nodeData?.filter((key) => key.brokerId === item)[0]?.brokerId; const newValue = brokerId && { brokerId, cpu: values?.cpu, disk: values?.disk, flow: values?.flow }; return { clusterId: global?.clusterInfo?.id + '', diff --git a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessCluster.tsx b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessCluster.tsx index e284a40b..e106c313 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessCluster.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessCluster.tsx @@ -4,7 +4,7 @@ import { Button, Divider, Drawer, Form, Input, InputNumber, message, Radio, Sele import * as React from 'react'; import { useIntl } from 'react-intl'; import api from '../../api'; -import { regClusterName, regUsername } from '../../common/reg'; +import { regClusterName, regUsername } from '../../constants/reg'; import { bootstrapServersErrCodes, jmxErrCodes, zkErrCodes } from './config'; import CodeMirrorFormItem from '@src/components/CodeMirrorFormItem'; diff --git a/km-console/packages/layout-clusters-fe/src/pages/SecurityUsers/index.less b/km-console/packages/layout-clusters-fe/src/pages/SecurityUsers/index.less index 98f2ff0e..2e9996fe 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/SecurityUsers/index.less +++ b/km-console/packages/layout-clusters-fe/src/pages/SecurityUsers/index.less @@ -10,8 +10,12 @@ border-top-right-radius: 12px; .operate-bar { display: flex; - justify-content: space-between; + justify-content: right; margin-bottom: 12px; + .search-input { + width: 248px; + margin-right: 8px; + } } } } diff --git a/km-console/packages/layout-clusters-fe/src/pages/SecurityUsers/index.tsx b/km-console/packages/layout-clusters-fe/src/pages/SecurityUsers/index.tsx index 12d45269..cf1621aa 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/SecurityUsers/index.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/SecurityUsers/index.tsx @@ -21,7 +21,7 @@ import { CloseOutlined, EyeInvisibleOutlined, EyeOutlined, LoadingOutlined } fro import './index.less'; import api from '@src/api'; import { useParams } from 'react-router-dom'; -import { regKafkaPassword } from '@src/common/reg'; +import { regKafkaPassword } from '@src/constants/reg'; export const randomString = (len = 32, chars = 'abcdefghijklmnopqrstuvwxyz1234567890'): string => { const maxPos = chars.length; @@ -283,18 +283,17 @@ const SecurityUsers = (): JSX.Element => { const [loading, setLoading] = useState(true); const [data, setData] = useState([]); const [pagination, setPagination] = useState(defaultPagination); - const [form] = Form.useForm(); + const [searchKeywords, setSearchKeywords] = useState(''); + const [searchKeywordsInput, setSearchKeywordsInput] = useState(''); const editDrawerRef = useRef(null); const getKafkaUserList = (query = {}) => { - const formData = form.getFieldsValue(); const queryParams = { pageNo: pagination.current, pageSize: pagination.pageSize, - ...formData, + searchKeywords, ...query, }; - setLoading(true); Utils.request(api.getKafkaUsers(clusterId), { method: 'POST', @@ -413,6 +412,10 @@ const SecurityUsers = (): JSX.Element => { getKafkaUserList(); }, []); + useEffect(() => { + (searchKeywords || searchKeywords === '') && getKafkaUserList({ pageNo: 1 }); + }, [searchKeywords]); + return (
{ />
-
getKafkaUserList({ pageNo: 1 })}> - - - - - - -
+ { + setSearchKeywords(searchKeywordsInput); + }} + style={{ fontSize: '16px' }} + /> + } + placeholder="请输入 Kafka User" + value={searchKeywordsInput} + onPressEnter={(_) => { + setSearchKeywords(searchKeywordsInput); + }} + onChange={(e) => { + setSearchKeywordsInput(e.target.value); + }} + />