修复一些前端问题 (#1195)

请不要在没有先创建Issue的情况下创建Pull Request。

## 变更的目的是什么

XXXXX

## 简短的更新日志

[[Optimize]Security、Consumer权限点更新
[BugFix]JMX端口维护信息错误

## 验证这一变化

XXXX

请遵循此清单，以帮助我们快速轻松地整合您的贡献：

* [ ] 一个 PR（Pull Request的简写）只解决一个问题，禁止一个 PR 解决多个问题；
* [ ] 确保 PR 有对应的 Issue（通常在您开始处理之前创建），除非是书写错误之类的琐碎更改不需要 Issue ；
* [ ] 格式化 PR 及 Commit-Log 的标题及内容，例如 #861 。PS：Commit-Log 需要在 Git Commit
代码时进行填写，在 GitHub 上修改不了；
* [ ] 编写足够详细的 PR 描述，以了解 PR 的作用、方式和原因；
* [ ] 编写必要的单元测试来验证您的逻辑更正。如果提交了新功能或重大更改，请记住在 test 模块中添加 integration-test；
* [ ] 确保编译通过，集成测试通过；

km-console/packages/layout-clusters-fe/src/pages/CommonConfig.tsx

@@ -33,6 +33,9 @@ export enum ClustersPermissionMap {
   TOPIC_CANCEL_REPLICATOR = 'Topic-详情-取消Topic复制',
   // Consumers
   CONSUMERS_RESET_OFFSET = 'Consumers-重置Offset',
+  GROUP_DELETE = 'Group-删除',
+  GROUP_TOPIC_DELETE = 'GroupOffset-Topic纬度删除',
+  GROUP_PARTITION_DELETE = 'GroupOffset-Partition纬度删除',
   // Test
   TEST_CONSUMER = 'Test-Consumer',
   TEST_PRODUCER = 'Test-Producer',
@@ -54,6 +57,7 @@ export enum ClustersPermissionMap {
   SECURITY_USER_ADD = 'Security-User新增',
   SECURITY_USER_DELETE = 'Security-User删除',
   SECURITY_USER_EDIT_PASSWORD = 'Security-User修改密码',
+  SECURITY_USER_VIEW_PASSWORD = 'Security-User查看密码',
 }
 
 export interface PermissionNode {

km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/config.tsx

@@ -22,7 +22,8 @@ export const defaultPagination = {
 };
 
 export const getGroupColumns = (arg?: any) => {
-  const columns = [
+  const [global] = AppContainer.useGlobalValue();
+  const columns: any = [
     {
       title: 'ConsumerGroup',
       dataIndex: 'name',
@@ -63,7 +64,9 @@ export const getGroupColumns = (arg?: any) => {
       width: 200,
       render: (t: number) => (t ? t.toLocaleString() : '-'),
     },
-    {
+  ];
+  if (global.hasPermission && global.hasPermission(ClustersPermissionMap.GROUP_DELETE)) {
+    columns.push({
       title: '操作',
       dataIndex: 'options',
       key: 'options',
@@ -77,8 +80,8 @@ export const getGroupColumns = (arg?: any) => {
           </div>
         );
       },
-    },
+    });
-  ];
+  }
   return columns;
 };
 
@@ -114,7 +117,7 @@ export const getGtoupTopicColumns = (arg?: any) => {
       render: (t: number) => (t ? t.toLocaleString() : '-'),
     },
   ];
-  if (global.hasPermission && global.hasPermission(ClustersPermissionMap.CONSUMERS_RESET_OFFSET)) {
+  if (global.hasPermission) {
     columns.push({
       title: '操作',
       dataIndex: 'desc',
@@ -123,7 +126,12 @@ export const getGtoupTopicColumns = (arg?: any) => {
       render: (value: any, record: any) => {
         return (
           <div>
+            {global.hasPermission(ClustersPermissionMap.CONSUMERS_RESET_OFFSET) ? (
               <a onClick={() => arg.resetOffset(record)}>重置Offset</a>
+            ) : (
+              <></>
+            )}
+            {global.hasPermission(ClustersPermissionMap.GROUP_TOPIC_DELETE) ? (
               <Popconfirm
                 placement="top"
                 title={`是否要删除当前Topic？`}
@@ -133,6 +141,9 @@ export const getGtoupTopicColumns = (arg?: any) => {
               >
                 <Button type="link">删除</Button>
               </Popconfirm>
+            ) : (
+              <></>
+            )}
           </div>
         );
       },

km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessCluster.tsx

@@ -537,7 +537,7 @@ const ConnectorForm = (props: {
     setSelectedTabKey(undefined);
     try {
       const jmxPortInfo = JSON.parse(initFieldsValue.jmxProperties) || {};
-      form.setFieldsValue({ ...initFieldsValue, jmxProperties: jmxPortInfo.jmxProperties });
+      form.setFieldsValue({ ...initFieldsValue, jmxProperties: jmxPortInfo.jmxPort });
     } catch {
       form.setFieldsValue({ ...initFieldsValue });
     }
@@ -546,7 +546,7 @@ const ConnectorForm = (props: {
   useLayoutEffect(() => {
     try {
       const jmxPortInfo = JSON.parse(initFieldsValue.jmxProperties) || {};
-      form.setFieldsValue({ ...initFieldsValue, jmxProperties: jmxPortInfo.jmxProperties });
+      form.setFieldsValue({ ...initFieldsValue, jmxProperties: jmxPortInfo.jmxPort });
     } catch {
       form.setFieldsValue({ ...initFieldsValue });
     }

km-console/packages/layout-clusters-fe/src/pages/SecurityUsers/index.tsx

@@ -23,7 +23,7 @@ import api from '@src/api';
 import { useParams } from 'react-router-dom';
 import { regKafkaPassword } from '@src/constants/reg';
 import { tableHeaderPrefix } from '@src/constants/common';
-
+import { ClustersPermissionMap } from '../CommonConfig';
 export const randomString = (len = 32, chars = 'abcdefghijklmnopqrstuvwxyz1234567890'): string => {
   const maxPos = chars.length;
   let str = '';
@@ -85,7 +85,7 @@ const PasswordContent = (props: { clusterId: string; name: string }) => {
   const { clusterId, name } = props;
   const [loading, setLoading] = useState(false);
   const [pw, setPw] = useState(initialShowPassword);
-
+  const [global] = AppContainer.useGlobalValue();
   const switchPwStatus = () => {
     if (!loading) {
       setLoading(true);
@@ -113,9 +113,13 @@ const PasswordContent = (props: { clusterId: string; name: string }) => {
       <Tooltip title={pw} placement="bottom">
         <div style={{ maxWidth: '80%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{pw}</div>
       </Tooltip>
+      {global.hasPermission(ClustersPermissionMap.SECURITY_USER_VIEW_PASSWORD) ? (
         <span style={{ marginLeft: 6 }} onClick={switchPwStatus}>
           {loading ? <LoadingOutlined /> : pw === initialShowPassword ? <EyeInvisibleOutlined /> : <EyeOutlined />}
         </span>
+      ) : (
+        <></>
+      )}
     </div>
   );
 };
@@ -323,7 +327,7 @@ const SecurityUsers = (): JSX.Element => {
   };
 
   const columns = () => {
-    const baseColumns = [
+    const baseColumns: any = [
       {
         title: 'KafkaUser',
         dataIndex: 'name',
@@ -348,13 +352,16 @@ const SecurityUsers = (): JSX.Element => {
           return <PasswordContent clusterId={clusterId} name={record.name} />;
         },
       },
-      {
+    ];
+    if (global.hasPermission) {
+      baseColumns.push({
         title: '操作',
         dataIndex: '',
         width: 240,
         render(record: UsersProps) {
           return (
             <>
+              {global.hasPermission(ClustersPermissionMap.SECURITY_USER_EDIT_PASSWORD) ? (
                 <Button
                   type="link"
                   size="small"
@@ -363,15 +370,21 @@ const SecurityUsers = (): JSX.Element => {
                 >
                   修改密码
                 </Button>
+              ) : (
+                <></>
+              )}
+              {global.hasPermission(ClustersPermissionMap.SECURITY_USER_DELETE) ? (
                 <Button type="link" size="small" onClick={() => onDelete(record)}>
                   删除
                 </Button>
+              ) : (
+                <></>
+              )}
             </>
           );
         },
-      },
+      });
-    ];
+    }
-
     return baseColumns;
   };
 
@@ -454,6 +467,7 @@ const SecurityUsers = (): JSX.Element => {
                 setSearchKeywordsInput(e.target.value);
               }}
             />
+            {global.hasPermission && global.hasPermission(ClustersPermissionMap.SECURITY_USER_ADD) ? (
               <Button
                 type="primary"
                 // icon={<PlusOutlined />}
@@ -461,6 +475,9 @@ const SecurityUsers = (): JSX.Element => {
               >
                 新增KafkaUser
               </Button>
+            ) : (
+              <></>
+            )}
           </div>
         </div>