修复一些前端问题 (#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,16 +126,24 @@ export const getGtoupTopicColumns = (arg?: any) => {
       render: (value: any, record: any) => {
         return (
           <div>
-            <a onClick={() => arg.resetOffset(record)}>重置Offset</a>
+            {global.hasPermission(ClustersPermissionMap.CONSUMERS_RESET_OFFSET) ? (
-            <Popconfirm
+              <a onClick={() => arg.resetOffset(record)}>重置Offset</a>
-              placement="top"
+            ) : (
-              title={`是否要删除当前Topic？`}
+              <></>
-              onConfirm={() => arg.deleteOffset(record)}
+            )}
-              okText="是"
+            {global.hasPermission(ClustersPermissionMap.GROUP_TOPIC_DELETE) ? (
-              cancelText="否"
+              <Popconfirm
-            >
+                placement="top"
-              <Button type="link">删除</Button>
+                title={`是否要删除当前Topic？`}
-            </Popconfirm>
+                onConfirm={() => arg.deleteOffset(record)}
+                okText="是"
+                cancelText="否"
+              >
+                <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>
-      <span style={{ marginLeft: 6 }} onClick={switchPwStatus}>
+      {global.hasPermission(ClustersPermissionMap.SECURITY_USER_VIEW_PASSWORD) ? (
-        {loading ? <LoadingOutlined /> : pw === initialShowPassword ? <EyeInvisibleOutlined /> : <EyeOutlined />}
+        <span style={{ marginLeft: 6 }} onClick={switchPwStatus}>
-      </span>
+          {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,30 +352,39 @@ const SecurityUsers = (): JSX.Element => {
           return <PasswordContent clusterId={clusterId} name={record.name} />;
         },
       },
-      {
+    ];
+    if (global.hasPermission) {
+      baseColumns.push({
         title: '操作',
         dataIndex: '',
         width: 240,
         render(record: UsersProps) {
           return (
             <>
-              <Button
+              {global.hasPermission(ClustersPermissionMap.SECURITY_USER_EDIT_PASSWORD) ? (
-                type="link"
+                <Button
-                size="small"
+                  type="link"
-                style={{ paddingLeft: 0 }}
+                  size="small"
-                onClick={() => editDrawerRef.current.onOpen(true, UsersOperate.ChangePassword, getKafkaUserList, record)}
+                  style={{ paddingLeft: 0 }}
-              >
+                  onClick={() => editDrawerRef.current.onOpen(true, UsersOperate.ChangePassword, getKafkaUserList, record)}
-                修改密码
+                >
-              </Button>
+                  修改密码
-              <Button type="link" size="small" onClick={() => onDelete(record)}>
+                </Button>
-                删除
+              ) : (
-              </Button>
+                <></>
+              )}
+              {global.hasPermission(ClustersPermissionMap.SECURITY_USER_DELETE) ? (
+                <Button type="link" size="small" onClick={() => onDelete(record)}>
+                  删除
+                </Button>
+              ) : (
+                <></>
+              )}
             </>
           );
         },
-      },
+      });
-    ];
+    }
-
     return baseColumns;
   };
 
@@ -454,13 +467,17 @@ const SecurityUsers = (): JSX.Element => {
                 setSearchKeywordsInput(e.target.value);
               }}
             />
-            <Button
+            {global.hasPermission && global.hasPermission(ClustersPermissionMap.SECURITY_USER_ADD) ? (
-              type="primary"
+              <Button
-              // icon={<PlusOutlined />}
+                type="primary"
-              onClick={() => editDrawerRef.current.onOpen(true, UsersOperate.Add, getKafkaUserList)}
+                // icon={<PlusOutlined />}
-            >
+                onClick={() => editDrawerRef.current.onOpen(true, UsersOperate.Add, getKafkaUserList)}
-              新增KafkaUser
+              >
-            </Button>
+                新增KafkaUser
+              </Button>
+            ) : (
+              <></>
+            )}
           </div>
         </div>