修复前端新增角色失败等问题 (#1107)

1.新增角色不选择系统管理权限点报错问题； 2.Connect配置项里面涉及敏感字段的值用*号代替； 3.Topic详情、ConsumerGroup详情，ConsumerGroup表格支持手动刷； 4.Topic Message预览，Offset为0不显示数值，添加offset排序； --------- Co-authored-by: 孙超 <jacksuny@foxmail.com> Co-authored-by: EricZeng <zengqiao_cn@163.com>
2025-12-24 03:42:07 +08:00 · 2023-08-01 16:34:30 +08:00
parent 90e5492060
commit b1892c21e2
10 changed files with 127 additions and 21 deletions
--- a/km-console/packages/config-manager-fe/src/pages/UserManage/RoleTabContent.tsx
+++ b/km-console/packages/config-manager-fe/src/pages/UserManage/RoleTabContent.tsx
@@ -96,7 +96,7 @@ const RoleDetailAndUpdate = forwardRef((props, ref): JSX.Element => {
          arr.push(permissions[i].id);
        }
      });
-      formData.permissionIdList = formData.permissionIdList.flat();
+      formData.permissionIdList = formData.permissionIdList.flat().filter((item) => item !== undefined);
      setConfirmLoading(true);
      request(api.editRole, {
        method: type === RoleOperate.Add ? 'POST' : 'PUT',
@@ -250,7 +250,7 @@ const RoleDetailAndUpdate = forwardRef((props, ref): JSX.Element => {
                    <CheckboxGroupContainer
                      key={i}
                      formInstance={form}
-                      fieldName="permissionIdList"
+                      fieldName={`permissionIdList`}
                      options={permission.options}
                      initSelectedOptions={initSelectedPermissions[permission.id] || []}
                      groupIdx={i}
--- a/km-console/packages/layout-clusters-fe/config/webpack.dev.js
+++ b/km-console/packages/layout-clusters-fe/config/webpack.dev.js
@@ -34,11 +34,11 @@ module.exports = {
    proxy: {
      '/ks-km/api/v3': {
        changeOrigin: true,
-        target: 'https://api-kylin-xg02.intra.xiaojukeji.com/ks-km/',
+        target: 'http://127.0.0.1/',
      },
      '/logi-security/api/v1': {
        changeOrigin: true,
-        target: 'https://api-kylin-xg02.intra.xiaojukeji.com/ks-km/',
+        target: 'http://127.0.0.1/',
      },
    },
  },
--- a/km-console/packages/layout-clusters-fe/src/components/utils.ts
+++ b/km-console/packages/layout-clusters-fe/src/components/utils.ts
@@ -0,0 +1,10 @@
+import { useCallback, useState } from 'react';
+
+export function useForceRefresh() {
+  const [refreshKey, setRefresh] = useState<number>(0);
+  const forceRefresh: () => void = useCallback(() => {
+    setRefresh((x) => x + 1);
+  }, []);
+
+  return [refreshKey, forceRefresh];
+}
--- a/km-console/packages/layout-clusters-fe/src/pages/Connect/AddConnector.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/Connect/AddConnector.tsx
@@ -816,6 +816,8 @@ const StepFormFifth = (props: SubFormProps) => {
                            <InputNumber />
                          ) : type.toUpperCase() === 'BOOLEAN' ? (
                            <Switch size="small" />
+                          ) : type.toUpperCase() === 'PASSWORD' ? (
+                            <Input.Password />
                          ) : (
                            <Input />
                          )}
--- a/km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/Detail.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/Detail.tsx
@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
-import { Drawer, ProTable, Utils } from 'knowdesign';
+import { Button, Space, Divider, Drawer, ProTable, Utils } from 'knowdesign';
 import { IconFont } from '@knowdesign/icons';
 import API from '@src/api/index';
 import { defaultPagination, hashDataParse } from '@src/constants/common';
 import { getGtoupTopicColumns } from './config';
 import { ExpandedRow } from './ExpandedRow';
 import ResetOffsetDrawer from './ResetOffsetDrawer';
+import { useForceRefresh } from '@src/components/utils';
 const { request } = Utils;

 export interface MetricLine {
@@ -63,6 +64,7 @@ const GroupDetail = (props: any) => {
  const [openKeys, setOpenKeys] = useState();
  const [resetOffsetVisible, setResetOffsetVisible] = useState(false);
  const [resetOffsetArg, setResetOffsetArg] = useState({});
+  const [refreshKey, forceRefresh] = useForceRefresh();

  const genData = async ({ pageNo, pageSize, groupName }: any) => {
    if (urlParams?.clusterId === undefined) return;
@@ -160,7 +162,7 @@ const GroupDetail = (props: any) => {
    //   // 获取Consumer列表 表格模式
    //   getTopicGroupMetric(hashData);
    // });
-  }, [hashDataParse(location.hash).groupName]);
+  }, [hashDataParse(location.hash).groupName, refreshKey]);

  return (
    <Drawer
@@ -182,6 +184,14 @@ const GroupDetail = (props: any) => {
      //     <Divider type="vertical" />
      //   </Space>
      // }
+      extra={
+        <Space>
+          <span style={{ display: 'inline-block', fontSize: '15px' }} onClick={forceRefresh as () => void}>
+            <i className="iconfont icon-shuaxin1" style={{ cursor: 'pointer' }} />
+          </span>
+          <Divider type="vertical" />
+        </Space>
+      }
    >
      <ProTable
        showQueryForm={false}
--- a/km-console/packages/layout-clusters-fe/src/pages/SecurityACLs/EditDrawer.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/SecurityACLs/EditDrawer.tsx
@@ -135,6 +135,7 @@ const AddDrawer = forwardRef((_, ref) => {

      if (configType === 'custom') {
        // 1. 自定义权限
+        // TODO: 需要和后端联调
        const { resourceType, resourcePatternType, aclPermissionType, aclOperation, aclClientHost } = formData;
        submitData.push({
          clusterId,
@@ -281,6 +282,42 @@ const AddDrawer = forwardRef((_, ref) => {
        </Form.Item>
        <Form.Item dependencies={['configType']} style={{ marginBottom: 0 }}>
          {({ getFieldValue }) => {
+            const SelectFormItems = (props: { type: string }) => {
+              const { type } = props;
+              return (
+                <Form.Item
+                  name={`${type}Name`}
+                  dependencies={[`${type}PatternType`]}
+                  validateTrigger="onBlur"
+                  rules={[
+                    ({ getFieldValue }) => ({
+                      validator: (rule: any, value: string) => {
+                        if (!value) {
+                          return Promise.reject(`${type}Name 不能为空`);
+                        }
+                        if (type === 'topic' && getFieldValue(`${type}PatternType`) === ACL_PATTERN_TYPE['Literal']) {
+                          return Utils.request(api.getTopicMetadata(clusterId as any, value)).then((res: any) => {
+                            return res?.exist ? Promise.resolve() : Promise.reject('该 Topic 不存在');
+                          });
+                        }
+                        return Promise.resolve();
+                      },
+                    }),
+                  ]}
+                >
+                  <AutoComplete
+                    filterOption={(value, option) => {
+                      if (option?.value.includes(value)) {
+                        return true;
+                      }
+                      return false;
+                    }}
+                    options={type === 'topic' ? topicMetaData : groupMetaData}
+                    placeholder={`请输入 ${type}Name`}
+                  />
+                </Form.Item>
+              );
+            };
            const PatternTypeFormItems = (props: { type: string }) => {
              const { type } = props;
              const UpperCaseType = type[0].toUpperCase() + type.slice(1);
@@ -388,6 +425,27 @@ const AddDrawer = forwardRef((_, ref) => {
                      }))}
                    />
                  </Form.Item>
+                  <Form.Item dependencies={['resourceType']}>
+                    {({ getFieldValue }) => {
+                      const type = getFieldValue('resourceType');
+                      if (type === ACL_RESOURCE_TYPE['Cluster'] || type === ACL_RESOURCE_TYPE['TransactionalId']) {
+                        //TODO需要和后端获取集群和事务接口联调
+                        return (
+                          <Form.Item
+                            name={`${type === 4 ? 'cluster' : 'transactionalId'}`}
+                            rules={[{ required: true, message: `${type === 4 ? 'Cluster名称' : 'TransactionalId'} 不能为空` }]}
+                          >
+                            <Input placeholder={`请输入${type === 4 ? 'Cluster名称' : 'TransactionalId'}`}></Input>
+                          </Form.Item>
+                        );
+                      } else if (type === ACL_RESOURCE_TYPE['Topic']) {
+                        return <PatternTypeFormItems type="topic" />;
+                      } else if (type === ACL_RESOURCE_TYPE['Group']) {
+                        return <PatternTypeFormItems type="group" />;
+                      }
+                      return null;
+                    }}
+                  </Form.Item>
                  <Form.Item dependencies={['resourceType']} style={{ marginBottom: 0 }}>
                    {({ getFieldValue }) => {
                      form.resetFields(['aclOperation']);
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/BrokersDetail.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/BrokersDetail.tsx
@@ -8,6 +8,7 @@ import { useParams } from 'react-router-dom';
 import TagsWithHide from '@src/components/TagsWithHide';
 import SwitchTab from '@src/components/SwitchTab';
 import RenderEmpty from '@src/components/RenderEmpty';
+import { useForceRefresh } from '@src/components/utils';

 interface PropsType {
  hashData: any;
@@ -401,11 +402,18 @@ export default (props: PropsType) => {
  const { hashData } = props;
  const [showMode, setShowMode] = useState<string>('card');

+  const [refreshKey, forceRefresh] = useForceRefresh();
  return (
    <>
-      <div className="brokers-tab-container">
+      <div className="brokers-tab-container" key={`${refreshKey}`}>
        <div className="overview">
          <div className="left">
+            <span
+              style={{ display: 'inline-block', padding: '0 10px', marginRight: '10px', borderRight: '1px solid #ccc', fontSize: '15px' }}
+              onClick={forceRefresh as () => void}
+            >
+              <i className="iconfont icon-shuaxin1" style={{ cursor: 'pointer' }} />
+            </span>
            <PartitionSummary clusterId={clusterId} topicName={hashData.topicName} />
          </div>
          <div className="cases-box">
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/config.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/config.tsx
@@ -81,7 +81,8 @@ export const getTopicMessagesColmns = () => {
      title: 'Offset',
      dataIndex: 'offset',
      key: 'offset',
-      render: (t: number) => (t ? t.toLocaleString() : '-'),
+      sorter: true,
+      render: (t: number) => (+t ? t.toLocaleString() : '-'),
    },
    {
      title: 'Timestamp',
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/index.less
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/index.less
@@ -26,6 +26,7 @@

    .left {
      display: flex;
+      align-items: center;
      .info-box {
        display: flex;
        height: 36px;
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/index.tsx
@@ -15,9 +15,21 @@ import Replicator from './Replicator';
 import './index.less';
 import TopicDetailHealthCheck from '@src/components/CardBar/TopicDetailHealthCheck';
 import { hashDataParse } from '@src/constants/common';
+import { useForceRefresh } from '@src/components/utils';

 const { TabPane } = Tabs;

+const Reload = (props: any) => {
+  return (
+    <span
+      style={{ display: 'inline-block', padding: '0 10px', marginRight: '10px', borderRight: '1px solid #ccc', fontSize: '15px' }}
+      onClick={props.forceRefresh as () => void}
+    >
+      <i className="iconfont icon-shuaxin1" style={{ cursor: 'pointer' }} />
+    </span>
+  );
+};
+
 const OperationsSlot: any = {
  // eslint-disable-next-line react/display-name
  // ['Partitions']: (arg: any) => {
@@ -70,17 +82,20 @@ const OperationsSlot: any = {
  // eslint-disable-next-line react/display-name
  ['ConsumerGroups']: (arg: any) => {
    return (
-      <SearchInput
-        onSearch={arg.setSearchKeywords}
-        attrs={{
-          value: arg.searchValue,
-          onChange: arg.setSearchValue,
-          placeholder: '请输入Consumer Group',
-          size: 'small',
-          style: { width: '210px', marginRight: '2px' },
-          maxLength: 128,
-        }}
-      />
+      <>
+        <Reload {...arg} />
+        <SearchInput
+          onSearch={arg.setSearchKeywords}
+          attrs={{
+            value: arg.searchValue,
+            onChange: arg.setSearchValue,
+            placeholder: '请输入Consumer Group',
+            size: 'small',
+            style: { width: '210px', marginRight: '2px' },
+            maxLength: 128,
+          }}
+        />
+      </>
    );
  },
 };
@@ -94,6 +109,7 @@ const TopicDetail = (props: any) => {
  const [searchValue, setSearchValue] = useState<string>('');
  const [visible, setVisible] = useState(false);
  const [hashData, setHashData] = useState<any>({});
+  const [refreshKey, forceRefresh] = useForceRefresh();

  const callback = (key: any) => {
    setSearchValue('');
@@ -184,7 +200,7 @@ const TopicDetail = (props: any) => {
        onChange={callback}
        tabBarExtraContent={
          OperationsSlot[positionType] &&
-          OperationsSlot[positionType]({ ...props, setSearchKeywords, setSearchValue, searchValue, positionType })
+          OperationsSlot[positionType]({ ...props, setSearchKeywords, setSearchValue, searchValue, positionType, forceRefresh })
        }
        destroyInactiveTabPane
      >
@@ -196,7 +212,7 @@ const TopicDetail = (props: any) => {
        </TabPane>
        <TabPane tab="ConsumerGroups" key="ConsumerGroups">
          {positionType === 'ConsumerGroups' && (
-            <Consumers searchKeywords={searchKeywords} positionType={positionType} hashData={hashData} />
+            <Consumers searchKeywords={searchKeywords} positionType={positionType} hashData={hashData} key={`${refreshKey}`} />
          )}
        </TabPane>
        <TabPane tab="ACLs" key="ACLs">