修复前端新增角色失败等问题 (#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>

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">

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',

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;

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">