add fe page

2026-01-03 19:38:20 +08:00 · 2021-01-25 15:34:07 +08:00
parent 850d43df63
commit 7f115c1b3e
35 changed files with 329 additions and 225 deletions
--- a/kafka-manager-console/src/container/modal/admin/cluster.ts
+++ b/kafka-manager-console/src/container/modal/admin/cluster.ts
@@ -23,13 +23,22 @@ export const showEditClusterTopic = (item: IClusterTopics) => {
      {
        key: 'appId',
        label: '应用ID',
+        type: 'select',
+        options: app.adminAppData.map(item => {
+          return {
+            label: item.appId,
+            value: item.appId,
+          };
+        }),
        rules: [{
          required: true,
-          message: '请输入应用ID',
+          // message: '请输入应用ID',
+          // message: '请输入应用ID，应用名称只支持字母、数字、下划线、短划线，长度限制在3-64字符',
+          // pattern: /[_a-zA-Z0-9_-]{3,64}$/,
        }],
        attrs: {
          placeholder: '请输入应用ID',
-          disabled: true,
+          // disabled: true,
        },
      },
      {
@@ -104,7 +113,7 @@ export const showLogicalClusterOpModal = (clusterId: number, record?: ILogicalCl
  }
  const updateFormModal = (isShow: boolean) => {
    const formMap = wrapper.xFormWrapper.formMap;
-    isShow ? formMap.splice(2, 0,
+    isShow ? formMap.splice(3, 0,
      {
        key: 'appId',
        label: '所属应用',
@@ -119,7 +128,7 @@ export const showLogicalClusterOpModal = (clusterId: number, record?: ILogicalCl
        attrs: {
          placeholder: '请选择所属应用',
        },
-      }) : formMap.splice(2, 1);
+      }) : formMap.splice(3, 1);
    const formData = wrapper.xFormWrapper.formData;
    wrapper.ref && wrapper.ref.updateFormMap$(formMap, formData || {});
  };
@@ -129,30 +138,30 @@ export const showLogicalClusterOpModal = (clusterId: number, record?: ILogicalCl
    formMap: [
      {
        key: 'logicalClusterName',
-        label: '逻辑集群中文名称',
+        label: '逻辑集群名称',
        // defaultValue:'',
-        rules: [{ 
-          required: true, 
-          message: '请输入逻辑集群中文名称，支持中文、字母、数字、下划线(_)和短划线(-)组成，长度在3-128字符之间', // 不能以下划线（_）和短划线(-)开头和结尾
+        rules: [{
+          required: true,
+          message: '请输入逻辑集群名称，支持中文、字母、数字、下划线(_)和短划线(-)组成，长度在3-128字符之间', // 不能以下划线（_）和短划线(-)开头和结尾
          pattern: /^[a-zA-Z0-9_\-\u4e00-\u9fa5]{3,128}$/g, //(?!(_|\-))(?!.*?(_|\-)$)
        }],
        attrs: {
          // disabled: record ? true : false,
-          placeholder:'请输入逻辑集群中文名称'
+          placeholder: '请输入逻辑集群名称'
        },
      },
      {
-        key: 'logicalClusterName1',
-        label: '逻辑集群英文名称',
+        key: 'logicalClusterIdentification',
+        label: '逻辑集群标识',
        // defaultValue:'',
-        rules: [{ 
-          required: true, 
-          message: '请输入逻辑集群英文名称，支持字母、数字、下划线(_)和短划线(-)组成，长度在3-128字符之间', //不能以下划线（_）和短划线(-)开头和结尾
-          pattern:/^[a-zA-Z0-9_\-]{3,128}$/g, //(?!(_|\-))(?!.*?(_|\-)$)
+        rules: [{
+          required: true,
+          message: '请输入逻辑集群标识，支持字母、数字、下划线(_)和短划线(-)组成，长度在3-128字符之间', //不能以下划线（_）和短划线(-)开头和结尾
+          pattern: /^[a-zA-Z0-9_\-]{3,128}$/g, //(?!(_|\-))(?!.*?(_|\-)$)
        }],
        attrs: {
          disabled: record ? true : false,
-          placeholder:'请输入逻辑集群英文名称，创建后无法修改'
+          placeholder: '请输入逻辑集标识，创建后无法修改'
        },
      },
      {
@@ -233,7 +242,7 @@ export const showLogicalClusterOpModal = (clusterId: number, record?: ILogicalCl
        id: record ? record.logicalClusterId : '',
        mode: value.mode,
        name: value.logicalClusterName,
-        englishName:value.logicalClusterEName, // 存储逻辑集群英文名称
+        identification: value.logicalClusterIdentification,
        regionIdList: value.regionIdList,
      } as INewLogical;
      if (record) {
@@ -246,7 +255,25 @@ export const showLogicalClusterOpModal = (clusterId: number, record?: ILogicalCl
      });
    },
  };
-
+  if (record && record.mode != 0) {
+    isShow = true;
+    let formMap: any = xFormModal.formMap
+    formMap.splice(3, 0, {
+      key: 'appId',
+      label: '所属应用',
+      rules: [{ required: true, message: '请选择所属应用' }],
+      type: 'select',
+      options: app.adminAppData.map(item => {
+        return {
+          label: item.name,
+          value: item.appId,
+        };
+      }),
+      attrs: {
+        placeholder: '请选择所属应用',
+      },
+    })
+  }
  wrapper.open(xFormModal);
 };

--- a/kafka-manager-console/src/container/modal/admin/expand-partition.tsx
+++ b/kafka-manager-console/src/container/modal/admin/expand-partition.tsx
@@ -50,7 +50,10 @@ class CustomForm extends React.Component<IXFormProps> {
          notification.success({ message: '扩分成功' });
          this.props.form.resetFields();
          admin.getClusterTopics(this.props.clusterId);
-        });
+        }).catch(err => {
+          notification.error({ message: '扩分成功' });
+
+        })
      }
    });
  }
@@ -93,7 +96,7 @@ class CustomForm extends React.Component<IXFormProps> {
          {/* 运维管控-topic信息-扩分区操作 */}
          <Form.Item label="所属region" >
            {getFieldDecorator('regionNameList', {
-              initialValue: admin.topicsBasic ? admin.topicsBasic.regionNameList : '',
+              initialValue: admin.topicsBasic && admin.topicsBasic.regionNameList.length > 0 ? admin.topicsBasic.regionNameList.join(',') : ' ',
              rules: [{ required: true, message: '请输入所属region' }],
            })(<Input disabled={true} />)}
          </Form.Item>
--- a/kafka-manager-console/src/container/modal/admin/task.ts
+++ b/kafka-manager-console/src/container/modal/admin/task.ts
@@ -186,10 +186,10 @@ export const createMigrationTasks = () => {
        label: '初始限流',
        rules: [{
          required: true,
-          message: '请输入初始限流',
+          message: '请输入初始限流，并按照：“限流上限>初始限流>限流下限”的大小顺序',
        }],
        attrs: {
-          placeholder: '请输入初始限流',
+          placeholder: '请输入初始限流，并按照：“限流上限>初始限流>限流下限”的大小顺序',
          suffix: 'MB/s',
        },
      },
@@ -198,10 +198,10 @@ export const createMigrationTasks = () => {
        label: '限流上限',
        rules: [{
          required: true,
-          message: '请输入限流上限',
+          message: '请输入限流上限，并按照：“限流上限>初始限流>限流下限”的大小顺序',
        }],
        attrs: {
-          placeholder: '请输入限流上限',
+          placeholder: '请输入限流上限，并按照：“限流上限>初始限流>限流下限”的大小顺序',
          suffix: 'MB/s',
        },
      },
@@ -210,10 +210,10 @@ export const createMigrationTasks = () => {
        label: '限流下限',
        rules: [{
          required: true,
-          message: '请输入限流下限',
+          message: '请输入限流下限，并按照：“限流上限>初始限流>限流下限”的大小顺序',
        }],
        attrs: {
-          placeholder: '请输入限流下限',
+          placeholder: '请输入限流下限，并按照：“限流上限>初始限流>限流下限”的大小顺序',
          suffix: 'MB/s',
        },
      },
@@ -224,7 +224,7 @@ export const createMigrationTasks = () => {
        rules: [{
          required: false,
          message: '请输入至少5个字符',
-          pattern: /^.{5,}.$/,
+          pattern: /^.{4,}.$/,
        }],
        attrs: {
          placeholder: '请输入备注',
--- a/kafka-manager-console/src/container/modal/app.tsx
+++ b/kafka-manager-console/src/container/modal/app.tsx
@@ -29,7 +29,7 @@ export const showEditModal = (record?: IAppItem, from?: string, isDisabled?: boo
        rules: [{
          required: isDisabled ? false : true,
          message: '应用名称只支持中文、字母、数字、下划线、短划线，长度限制在3-64字符',
-          pattern: /[\u4e00-\u9fa5_a-zA-Z0-9_-]{3,64}/,
+          pattern: /[\u4e00-\u9fa5_a-zA-Z0-9_-]{3,64}$/,
        }],
        attrs: { disabled: isDisabled },
      }, {
--- a/kafka-manager-console/src/container/modal/cluster.tsx
+++ b/kafka-manager-console/src/container/modal/cluster.tsx
@@ -29,7 +29,7 @@ export const showCpacityModal = (item: IClusterData) => {
        key: 'description',
        label: '申请原因',
        type: 'text_area',
-        rules: [{ required: true, pattern: /^.{5,}.$/, message: '请输入至少5个字符' }],
+        rules: [{ required: true, pattern: /^.{4,}.$/, message: '请输入至少5个字符' }],
        attrs: {
          placeholder: '请输入至少5个字符',
        },
@@ -44,12 +44,12 @@ export const showCpacityModal = (item: IClusterData) => {
        type: value.type,
        applicant: users.currentUser.username,
        description: value.description,
-        extensions: JSON.stringify({clusterId: item.clusterId}),
+        extensions: JSON.stringify({ clusterId: item.clusterId }),
      };
      cluster.applyCpacity(cpacityParams).then(data => {
        notification.success({
          message: `申请${value.type === 5 ? '扩容' : '缩容'}成功`,
-         });
+        });
        window.location.href = `${urlPrefix}/user/order-detail/?orderId=${data.id}&region=${region.currentRegion}`;
      });
    },
--- a/kafka-manager-console/src/container/modal/topic.tsx
+++ b/kafka-manager-console/src/container/modal/topic.tsx
@@ -22,7 +22,7 @@ export const applyTopic = () => {
    formMap: [
      {
        key: 'clusterId',
-        label: '所属逻辑集群：',
+        label: '所属集群：',
        type: 'select',
        options: cluster.clusterData,
        rules: [{ required: true, message: '请选择' }],
@@ -75,7 +75,7 @@ export const applyTopic = () => {
        key: 'description',
        label: '申请原因',
        type: 'text_area',
-        rules: [{ required: true, pattern: /^.{5,}.$/s, message: '请输入至少5个字符' }],
+        rules: [{ required: true, pattern: /^.{4,}.$/s, message: '请输入至少5个字符' }],
        attrs: {
          placeholder: `概要描述Topic的数据源, Topic数据的生产者/消费者, Topic的申请原因及备注信息等。（最多100个字）
 例如:
@@ -180,13 +180,14 @@ export const showApplyQuatoModal = (item: ITopic | IAppsIdInfo, record: IQuotaQu
  const isConsume = item.access === 0 || item.access === 2;
  const xFormModal = {
    formMap: [
+      // {
+      //   key: 'clusterName',
+      //   label: '逻辑集群名称',
+      //   rules: [{ required: true, message: '' }],
+      //   attrs: { disabled: true },
+      //   invisible: !item.hasOwnProperty('clusterName'),
+      // }, 
      {
-        key: 'clusterName',
-        label: '逻辑集群名称',
-        rules: [{ required: true, message: '' }],
-        attrs: { disabled: true },
-        invisible: !item.hasOwnProperty('clusterName'),
-      }, {
        key: 'topicName',
        label: 'Topic名称',
        rules: [{ required: true, message: '' }],
@@ -225,7 +226,7 @@ export const showApplyQuatoModal = (item: ITopic | IAppsIdInfo, record: IQuotaQu
        key: 'description',
        label: '申请原因',
        type: 'text_area',
-        rules: [{ required: true, pattern: /^.{5,}.$/, message: quotaRemarks }],
+        rules: [{ required: true, pattern: /^.{4,}.$/, message: quotaRemarks }],
        attrs: {
          placeholder: quotaRemarks,
        },
@@ -292,13 +293,15 @@ const updateFormModal = (appId: string) => {
 export const showTopicApplyQuatoModal = (item: ITopic) => {
  const xFormModal = {
    formMap: [
+      // {
+      //   key: 'clusterName',
+      //   label: '逻辑集群名称',
+      //   rules: [{ required: true, message: '' }],
+      //   attrs: { disabled: true },
+      //   defaultValue: item.clusterName,
+      //   // invisible: !item.hasOwnProperty('clusterName'),
+      // }, 
      {
-        key: 'clusterName',
-        label: '逻辑集群名称',
-        rules: [{ required: true, message: '' }],
-        attrs: { disabled: true },
-        // invisible: !item.hasOwnProperty('clusterName'),
-      }, {
        key: 'topicName',
        label: 'Topic名称',
        rules: [{ required: true, message: '' }],
@@ -530,7 +533,7 @@ const showAllPermission = (appId: string, item: ITopic, access: number) => {
        rules: [{
          required: true,
          validator: (rule: any, value: string, callback: any) => {
-            const regexp = /^.{5,}.$/;
+            const regexp = /^.{4,}.$/;
            value = value.trim();
            if (!regexp.test(value)) {
              callback('请输入至少5个字符');
@@ -629,7 +632,7 @@ export const showPermissionModal = (item: ITopic) => {
        rules: [{
          required: true,
          validator: (rule: any, value: string, callback: any) => {
-            const regexp = /^.{5,}.$/;
+            const regexp = /^.{4,}.$/;
            value = value.trim();
            if (!regexp.test(value)) {
              callback('请输入至少5个字符');
@@ -678,7 +681,7 @@ export const showTopicEditModal = (item: ITopic) => {
        key: 'description',
        label: '备注',
        type: 'text_area',
-        rules: [{ required: false }, { pattern: /^.{5,}.$/, message: '请输入至少5个字符' }],
+        rules: [{ required: false }, { pattern: /^.{4,}.$/, message: '请输入至少5个字符' }],
      },
    ],
    formData: {