[Optimize]security下的users、acls接入进权限管理(#1089) (#1154)

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

## 变更的目的是什么

XXXXX

## 简短的更新日志

XX

## 验证这一变化

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

@@ -45,6 +45,12 @@ export enum ClustersPermissionMap {
   CONNECTOR_DELETE = 'Connector-删除',
   CONNECTOR_RESTART = 'Connector-重启',
   CONNECTOR_STOP_RESUME = 'Connector-暂停&恢复',
+  // Security
+  SECURITY_ACL_ADD = 'Security-ACL新增',
+  SECURITY_ACL_DELETE = 'Security-ACL删除',
+  SECURITY_USER_ADD = 'Security-User新增',
+  SECURITY_USER_DELETE = 'Security-User删除',
+  SECURITY_USER_EDIT_PASSWORD = 'Security-User修改密码',
 }
 
 export interface PermissionNode {

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

@@ -14,6 +14,7 @@ import AddACLDrawer, {
   RESOURCE_TO_OPERATIONS_MAP,
   RESOURCE_MAP_KEYS,
 } from './EditDrawer';
+import { ClustersPermissionMap } from '../CommonConfig';
 import './index.less';
 
 const { confirm } = Modal;
@@ -105,7 +106,7 @@ const SecurityACLs = (): JSX.Element => {
   };
 
   const columns = () => {
-    const baseColumns = [
+    const baseColumns: any = [
       {
         title: 'Principal',
         dataIndex: 'kafkaUser',
@@ -143,7 +144,9 @@ const SecurityACLs = (): JSX.Element => {
         title: 'Host',
         dataIndex: 'aclClientHost',
       },
-      {
+    ];
+    if (global.hasPermission && global.hasPermission(ClustersPermissionMap.SECURITY_ACL_DELETE)) {
+      baseColumns.push({
         title: '操作',
         dataIndex: '',
         width: 120,
@@ -156,8 +159,8 @@ const SecurityACLs = (): JSX.Element => {
             </>
           );
         },
-      },
+      });
-    ];
+    }
 
     return baseColumns;
   };
@@ -238,15 +241,19 @@ const SecurityACLs = (): JSX.Element => {
               </Form.Item>
             </Form>
           </div>
-          <div className={`${tableHeaderPrefix}-right`}>
+          {global.hasPermission && global.hasPermission(ClustersPermissionMap.SECURITY_ACL_ADD) ? (
-            <Button
+            <div className={`${tableHeaderPrefix}-right`}>
-              type="primary"
+              <Button
-              // icon={<PlusOutlined />}
+                type="primary"
-              onClick={() => editDrawerRef.current.onOpen(true, getACLs)}
+                // icon={<PlusOutlined />}
-            >
+                onClick={() => editDrawerRef.current.onOpen(true, getACLs)}
-              新增ACL
+              >
-            </Button>
+                新增ACL
-          </div>
+              </Button>
+            </div>
+          ) : (
+            <></>
+          )}
         </div>
         <ProTable
           tableProps={{

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 = '';
@@ -323,7 +323,7 @@ const SecurityUsers = (): JSX.Element => {
   };
 
   const columns = () => {
-    const baseColumns = [
+    const baseColumns: any = [
       {
         title: 'KafkaUser',
         dataIndex: 'name',
@@ -348,30 +348,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 +463,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>