修复一些前端问题

km-console/packages/config-manager-fe/config/webpack.common.js

@@ -16,6 +16,13 @@ const babelOptions = {
   cacheDirectory: true,
   babelrc: false,
   presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-typescript'), require.resolve('@babel/preset-react')],
+  overrides: [
+    // TODO：编译时需要做的事情更多，应该只针对目标第三方库
+    {
+      include: './node_modules',
+      sourceType: 'unambiguous'
+    }
+  ],
   plugins: [
     [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
     [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],

km-console/packages/layout-clusters-fe/package.json

@@ -108,6 +108,7 @@
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "prettier": "2.3.2",
     "progress-bar-webpack-plugin": "^1.12.1",
+    "pubsub-js": "^1.9.4",
     "query-string": "^7.0.1",
     "react-refresh": "^0.10.0",
     "react-router-dom": "5.2.1",

km-console/packages/layout-clusters-fe/src/components/CardBar/ConnectDetailCard.tsx

@@ -49,7 +49,7 @@ const ConnectDetailCard = (props: { record: any }) => {
             return (
               <>
                 {
-                  <span style={{ fontFamily: 'HelveticaNeue-Medium', fontSize: 32, color: '#212529' }}>
+                  <span style={{ fontFamily: 'HelveticaNeue-Medium', fontSize: 28, color: '#212529' }}>
                     {Utils.firstCharUppercase(type) || '-'}
                   </span>
                 }
@@ -64,7 +64,7 @@ const ConnectDetailCard = (props: { record: any }) => {
             return (
               <>
                 {
-                  <span style={{ fontFamily: 'HelveticaNeue-Medium', fontSize: 32, color: stateEnum[state].color }}>
+                  <span style={{ fontFamily: 'HelveticaNeue-Medium', fontSize: 28, color: stateEnum[state].color }}>
                     {Utils.firstCharUppercase(state) || '-'}
                   </span>
                 }

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

@@ -48,6 +48,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 {
@@ -98,9 +104,7 @@ const CommonConfig = () => {
         clustersPermissions.childList.forEach((node: PermissionNode) => node.has && userPermissions.push(node.permissionName));
 
       // 获取用户在系统管理拥有的权限
-      const configPermissions = userPermissionTree.find(
-          (sys: PermissionNode) => sys.permissionName === ClustersPermissionMap.SYS_MANAGE
-      );
+      const configPermissions = userPermissionTree.find((sys: PermissionNode) => sys.permissionName === ClustersPermissionMap.SYS_MANAGE);
       configPermissions &&
         configPermissions.childList.forEach((node: PermissionNode) => node.has && userPermissions.push(node.permissionName));
 

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

@@ -1,17 +1,16 @@
 import api from '@src/api';
 import CodeMirrorFormItem from '@src/components/CodeMirrorFormItem';
 import customMessage from '@src/components/Message';
-import { Button, Divider, Drawer, Form, message, Space, Utils } from 'knowdesign';
+import { Button, Divider, Drawer, Form, message, Space, Utils, Select } from 'knowdesign';
 import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { ConnectCluster, ConnectorPlugin, ConnectorPluginConfig, OperateInfo } from './AddConnector';
 
 const PLACEHOLDER = `配置格式如下
 
 {
-  "connectClusterName": "",  // Connect Cluster 名称
+  "name": "",  // Connect Cluster 名称
   "config": {  // 具体配置项
-    "name": "",
     "connector.class": "",
     "tasks.max": 1,
     ...
@@ -43,11 +42,16 @@ export default forwardRef((props: any, ref) => {
   const onOpen = (type: 'create' | 'edit', connectClusterName?: string, defaultConfigs?: { [key: string]: any }) => {
     if (defaultConfigs) {
       setDefaultConfigs({ ...defaultConfigs, connectClusterName });
+      const connectorName = connectClusterName;
+      const connectClusterId = connectClusters.find((cluster) => cluster.label === connectClusterName).value;
       form.setFieldsValue({
+        connectClusterId,
+        connectorName,
         configs: JSON.stringify(
           {
-            connectClusterName,
-            config: defaultConfigs,
+            // connectClusterName,
+            name: defaultConfigs.name,
+            config: { ...defaultConfigs, name: undefined },
           },
           null,
           2
@@ -63,10 +67,11 @@ export default forwardRef((props: any, ref) => {
     form.validateFields().then(
       (data) => {
         const postData = JSON.parse(data.configs);
-        postData.connectorName = postData.config.name;
-        postData.connectClusterId = connectClusters.find((cluster) => cluster.label === postData.connectClusterName).value;
-        delete postData.connectClusterName;
-
+        postData.connectorName = postData.name;
+        postData.connectClusterId = data.connectClusterId;
+        postData.config.name = postData.name;
+        // delete postData.connectClusterName;
+        delete postData.name;
         Object.entries(postData.config).forEach(([key, val]) => {
           if (val === null) {
             delete postData.config[key];
@@ -161,6 +166,26 @@ export default forwardRef((props: any, ref) => {
       }
     >
       <Form form={form} layout="vertical">
+        <Form.Item
+          name="connectClusterId"
+          label="Connect 集群"
+          rules={[
+            {
+              required: true,
+              validator(rule, value) {
+                if (!value) {
+                  return Promise.reject('Connect 集群不能为空');
+                } else {
+                  return Promise.resolve();
+                }
+              },
+            },
+          ]}
+          initialValue={defaultConfigs?.connectClusterId}
+          className="connector-json-connectCluster"
+        >
+          <Select options={connectClusters} placeholder="请选择 Connect 集群" disabled={type === 'edit'} />
+        </Form.Item>
         <Form.Item
           name="configs"
           validateTrigger="onBlur"
@@ -175,40 +200,27 @@ export default forwardRef((props: any, ref) => {
                   if (typeof v !== 'object') {
                     return Promise.reject('输入内容必须为 JSON');
                   }
-                  let connectClusterId = -1;
-                  // 校验 connectClusterName 字段
-                  if (!v.connectClusterName) {
-                    return Promise.reject('内容缺少 connectClusterName 字段或字段内容为空');
+                  let connectClusterId = form.getFieldValue('connectClusterId');
+                  // 校验 connectorName 字段
+                  if (!v.name) {
+                    return Promise.reject('内容缺少 name 项');
                   } else {
-                    if (type === 'edit') {
-                      if (v.connectClusterName !== defaultConfigs.connectClusterName) {
-                        return Promise.reject('编辑模式下不允许修改 connectClusterName 字段');
-                      }
-                    } else {
-                      if (!connectClusters.length) {
-                        getConnectClusters();
-                        return Promise.reject('connectClusterName 列表获取失败，请重试');
-                      }
-                      const targetConnectCluster = connectClusters.find((cluster) => cluster.label === v.connectClusterName);
-                      if (!targetConnectCluster) {
-                        return Promise.reject('connectClusterName 不存在，请检查');
-                      } else {
-                        connectClusterId = targetConnectCluster.value;
-                      }
+                    if (type === 'edit' && v.name !== defaultConfigs.name) {
+                      return Promise.reject('编辑模式下不允许修改 name 字段');
                     }
                   }
 
                   if (!v.config || typeof v.config !== 'object') {
                     return Promise.reject('内容缺少 config 字段或字段格式错误');
                   } else {
-                    // 校验 connectorName 字段
-                    if (!v.config.name) {
-                      return Promise.reject('config 字段下缺少 name 项');
-                    } else {
-                      if (type === 'edit' && v.config.name !== defaultConfigs.name) {
-                        return Promise.reject('编辑模式下不允许修改 name 字段');
-                      }
-                    }
+                    // // 校验 connectorName 字段
+                    // if (!v.config.name) {
+                    //   return Promise.reject('config 字段下缺少 name 项');
+                    // } else {
+                    //   if (type === 'edit' && v.config.name !== defaultConfigs.name) {
+                    //     return Promise.reject('编辑模式下不允许修改 name 字段');
+                    //   }
+                    // }
                     if (!v.config['connector.class']) {
                       return Promise.reject('config 字段下缺少 connector.class 项');
                     } else if (type === 'edit' && v.config['connector.class'] !== defaultConfigs['connector.class']) {
@@ -217,6 +229,10 @@ export default forwardRef((props: any, ref) => {
                   }
 
                   if (type === 'create') {
+                    // 校验创建时是否选择了connect集群
+                    if (!connectClusterId) {
+                      return Promise.reject('请先选择 Connect 集群');
+                    }
                     // 异步校验 connector 名称是否重复 以及 className 是否存在
                     return Promise.all([
                       Utils.request(api.isConnectorExist(connectClusterId, v.config.name)),

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

@@ -315,6 +315,7 @@ export const getWorkersColumns = (arg?: any) => {
 
 // Detail
 export const getConnectorsDetailColumns = (arg?: any) => {
+  const [global] = AppContainer.useGlobalValue();
   const columns = [
     {
       title: 'Task ID',
@@ -363,16 +364,20 @@ export const getConnectorsDetailColumns = (arg?: any) => {
       render: (_t: any, r: any) => {
         return (
           <div>
-            <Popconfirm
-              title="是否重试当前任务？"
-              onConfirm={() => arg?.retryOption(r.taskId)}
-              // onCancel={cancel}
-              okText="是"
-              cancelText="否"
-              overlayClassName="connect-popconfirm"
-            >
-              <a>重试</a>
-            </Popconfirm>
+            {global.hasPermission(ClustersPermissionMap.CONNECTOR_RESTART) ? (
+              <Popconfirm
+                title="是否重试当前任务？"
+                onConfirm={() => arg?.retryOption(r.taskId)}
+                // onCancel={cancel}
+                okText="是"
+                cancelText="否"
+                overlayClassName="connect-popconfirm"
+              >
+                <a>重试</a>
+              </Popconfirm>
+            ) : (
+              <></>
+            )}
           </div>
         );
       },

km-console/packages/layout-clusters-fe/src/pages/Connect/index.less

@@ -185,9 +185,10 @@
 
 .operate-connector-drawer-use-json {
   .CodeMirror.cm-s-default {
-    height: calc(100vh - 146px);
+    height: calc(100vh - 196px);
   }
   .dcloud-form-item {
+    margin-top: 16px;
     margin-bottom: 0 !important;
   }
 }

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

@@ -4,7 +4,7 @@ import { useParams } from 'react-router-dom';
 import EditTable from '../TestingProduce/component/EditTable';
 import Api from '@src/api/index';
 import moment from 'moment';
-import PubSub from 'pubsub-js'
+import PubSub from 'pubsub-js';
 
 const CustomSelectResetTime = (props: { value?: string; onChange?: (val: Number | String) => void }) => {
   const { value, onChange } = props;

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

@@ -13,7 +13,7 @@ const carouselList = [
       <img className="carousel-eg-ctr-two-img img-one" src={egTwoContent} />
       <div className="carousel-eg-ctr-two-desc desc-one">
         <span>Github: </span>
-        <span>5.8K</span>
+        <span>6.8K</span>
         <span>+ Star的的实时流处理平台</span>
       </div>
       <div className="carousel-eg-ctr-two-desc desc-two">

km-console/packages/layout-clusters-fe/src/pages/MirrorMaker2/index.less

@@ -185,7 +185,7 @@
 
 .operate-connector-drawer-use-json {
   .CodeMirror.cm-s-default {
-    height: calc(100vh - 146px);
+    height: calc(100vh - 196px);
   }
   .dcloud-form-item {
     margin-bottom: 0 !important;