V2.4.1 FE

2026-01-05 21:12:13 +08:00 · 2021-04-25 20:43:20 +08:00
parent 2672502c07
commit 47b8fe5022
63 changed files with 1558 additions and 329 deletions
--- a/kafka-manager-console/src/container/modal/admin/cluster.ts
+++ b/kafka-manager-console/src/container/modal/admin/cluster.ts
@@ -22,11 +22,11 @@ export const showEditClusterTopic = (item: IClusterTopics) => {
      },
      {
        key: 'appId',
-        label: '应用ID',
+        label: '应用名称',
        type: 'select',
        options: app.adminAppData.map(item => {
          return {
-            label: item.appId,
+            label: item.name,
            value: item.appId,
          };
        }),
@@ -61,6 +61,7 @@ export const showEditClusterTopic = (item: IClusterTopics) => {
        attrs: {
          placeholder: '请输入保存时间',
          suffix: '小时',
+          prompttype: '修改保存时间，预计一分钟左右生效!'
        },
      },
      {
--- a/kafka-manager-console/src/container/modal/admin/confirm-detail-topic.tsx
+++ b/kafka-manager-console/src/container/modal/admin/confirm-detail-topic.tsx
@@ -35,7 +35,6 @@ class CustomForm extends React.Component<IXFormProps> {
    this.props.form.validateFields((err: any, values: any) => {
      const deleteData = this.props.formData;
      if (!err) {
-        // console.log('values', values);
        if (values.topicName !== this.props.formData.topicName) {
          notification.error({ message: 'topic名称不正确，请重新输入' });
        } else {
@@ -77,7 +76,6 @@ class CustomForm extends React.Component<IXFormProps> {
  }

  public render() {
-    // console.log('props', this.props);
    const { formData = {} as any, visible } = this.props;
    const { getFieldDecorator } = this.props.form;
    let metadata = [] as IBrokersMetadata[];
--- a/kafka-manager-console/src/container/modal/admin/expand-partition.tsx
+++ b/kafka-manager-console/src/container/modal/admin/expand-partition.tsx
@@ -111,11 +111,11 @@ class CustomForm extends React.Component<IXFormProps> {
            })(<Input placeholder="请输入分区数" />)}
          </Form.Item>
          <Form.Item label="类型">
-            {/* <Form.Item label={this.state.checked ? 'Region类型' : 'Borker类型'} > */}
+            {/* <Form.Item label={this.state.checked ? 'Region类型' : 'Broker类型'} > */}
            {/* <Switch onChange={(checked) => this.onSwitchChange(checked)} /> */}
            <Radio.Group value={this.state.checked ? 'region' : 'broker'} onChange={(e) => { this.onSwitchChange(e.target.value === 'region' ? true : false); }}>
              <Radio.Button value="region">Region类型</Radio.Button>
-              <Radio.Button value="broker">Borker类型</Radio.Button>
+              <Radio.Button value="broker">Broker类型</Radio.Button>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="brokerIdList" style={{ display: this.state.checked ? 'none' : '' }}>
--- a/kafka-manager-console/src/container/modal/admin/task.ts
+++ b/kafka-manager-console/src/container/modal/admin/task.ts
@@ -28,8 +28,8 @@ const updateInputModal = (status?: string) => {
  formMap[4].invisible = status === 'region';
  formMap[5].invisible = status !== 'region';

-  formMap[4].rules = [{required: status !== 'region'}];
-  formMap[5].rules = [{required: status === 'region'}];
+  formMap[4].rules = [{ required: status !== 'region' }];
+  formMap[5].rules = [{ required: status === 'region' }];
  // tslint:disable-next-line:no-unused-expression
  wrapper.ref && wrapper.ref.updateFormMap$(formMap, wrapper.xFormWrapper.formData);
 };
@@ -103,7 +103,7 @@ export const createMigrationTasks = () => {
          label: 'Region',
          value: 'region',
        }, {
-          label: 'Borker',
+          label: 'Broker',
          value: 'broker',
        }],
        rules: [{
@@ -141,7 +141,7 @@ export const createMigrationTasks = () => {
          placeholder: '请选择目标Region',
        },
      },
-      
+
      {
        key: 'beginTime',
        label: '计划开始时间',
@@ -158,26 +158,26 @@ export const createMigrationTasks = () => {
      },
      {
        key: 'originalRetentionTime',
-        label: '原本保存时间',
+        label: '原Topic保存时间',
        rules: [{
          required: true,
-          message: '请输入原本保存时间',
+          message: '请输入原Topic保存时间',
        }],
        attrs: {
          disabled: true,
-          placeholder: '请输入原本保存时间',
+          placeholder: '请输入原Topic保存时间',
          suffix: '小时',
        },
      },
      {
        key: 'reassignRetentionTime',
-        label: '迁移保存时间',
+        label: '迁移后Topic保存时间',
        rules: [{
          required: true,
-          message: '请输入迁移保存时间',
+          message: '请输入迁移后Topic保存时间',
        }],
        attrs: {
-          placeholder: '请输入迁移保存时间',
+          placeholder: '请输入迁移后Topic保存时间',
          suffix: '小时',
        },
      },
--- a/kafka-manager-console/src/container/modal/admin/user.ts
+++ b/kafka-manager-console/src/container/modal/admin/user.ts
@@ -24,26 +24,111 @@ export const showApplyModal = (record?: IUser) => {
          value: +item,
        })),
        rules: [{ required: true, message: '请选择角色' }],
-      }, {
-        key: 'password',
-        label: '密码',
-        type: FormItemType.inputPassword,
-        rules: [{ required: !record, message: '请输入密码' }],
-      },
+      }, 
+      // {
+      //   key: 'password',
+      //   label: '密码',
+      //   type: FormItemType.inputPassword,
+      //   rules: [{ required: !record, message: '请输入密码' }],
+      // },
    ],
    formData: record || {},
    visible: true,
    title: record ? '修改用户' : '新增用户',
    onSubmit: (value: IUser) => {
      if (record) {
-        return users.modfiyUser(value).then(() => {
-          message.success('操作成功');
-        });
+        return users.modfiyUser(value)
      }
      return users.addUser(value).then(() => {
        message.success('操作成功');
      });
    },
  };
+  if(!record){
+   let formMap: any = xFormModal.formMap
+    formMap.splice(2, 0,{
+        key: 'password',
+        label: '密码',
+        type: FormItemType.inputPassword,
+        rules: [{ required: !record, message: '请输入密码' }],
+      },)
+  }
  wrapper.open(xFormModal);
 };
+
+// const handleCfPassword = (rule:any, value:any, callback:any)=>{
+//   if()
+// }
+export const showApplyModalModifyPassword = (record: IUser) => {
+  const xFormModal:any = {
+    formMap: [
+      // {
+      //   key: 'oldPassword',
+      //   label: '旧密码',
+      //   type: FormItemType.inputPassword,
+      //   rules: [{ 
+      //     required: true, 
+      //     message: '请输入旧密码',
+      //   }]
+      // },
+      {
+        key: 'newPassword',
+        label: '新密码',
+        type: FormItemType.inputPassword,
+        rules: [
+          { 
+            required: true, 
+            message: '请输入新密码',
+          }
+        ],
+        attrs:{
+          onChange:(e:any)=>{
+            users.setNewPassWord(e.target.value)
+          }
+        }
+      }, 
+      {
+        key: 'confirmPassword',
+        label: '确认密码',
+        type: FormItemType.inputPassword,
+        rules: [
+          { 
+            required: true, 
+            message: '请确认密码',
+            validator:(rule:any, value:any, callback:any) => {
+              // 验证新密码的一致性
+              if(users.newPassWord){
+                if(value!==users.newPassWord){
+                  rule.message = "两次密码输入不一致";
+                  callback('两次密码输入不一致')
+                }else{
+                  callback()
+                }
+              }else if(!value){
+                rule.message = "请确认密码";
+                callback('请确认密码');
+              }else{
+                callback()
+              }
+            },
+          }
+        ],
+      },
+    ],
+    formData: record || {},
+    visible: true,
+    title: '修改密码',
+    onSubmit: (value: IUser) => {
+      let params:any = {
+        username:record?.username,
+        password:value.confirmPassword,
+        role:record?.role,
+      }
+      return users.modfiyUser(params).then(() => {
+          message.success('操作成功');
+      });
+    },
+  }
+  wrapper.open(xFormModal);
+};
+
--- a/kafka-manager-console/src/container/modal/admin/version.ts
+++ b/kafka-manager-console/src/container/modal/admin/version.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { notification } from 'component/antd';
-import { IUploadFile, IConfigure } from 'types/base-type';
+import { notification, Select } from 'component/antd';
+import { IUploadFile, IConfigure, IConfigGateway } from 'types/base-type';
 import { version } from 'store/version';
 import { admin } from 'store/admin';
 import { wrapper } from 'store';
@@ -97,8 +97,8 @@ const updateFormModal = (type: number) => {
    formMap[2].attrs = {
      accept: version.fileSuffix,
    },
-    // tslint:disable-next-line:no-unused-expression
-    wrapper.ref && wrapper.ref.updateFormMap$(formMap, wrapper.xFormWrapper.formData, true);
+      // tslint:disable-next-line:no-unused-expression
+      wrapper.ref && wrapper.ref.updateFormMap$(formMap, wrapper.xFormWrapper.formData, true);
  }
 };

@@ -157,8 +157,8 @@ export const showModifyModal = (record: IUploadFile) => {

 export const showConfigureModal = async (record?: IConfigure) => {
  if (record) {
-    const result:any = await format2json(record.configValue);
-    record.configValue = result.result;
+    const result: any = await format2json(record.configValue);
+    record.configValue = result.result || record.configValue;
  }
  const xFormModal = {
    formMap: [
@@ -193,10 +193,69 @@ export const showConfigureModal = async (record?: IConfigure) => {
        return admin.editConfigure(value).then(data => {
          notification.success({ message: '编辑配置成功' });
        });
+      } else {
+        return admin.addNewConfigure(value).then(data => {
+          notification.success({ message: '新建配置成功' });
+        });
+      }
+    },
+  };
+  wrapper.open(xFormModal);
+};
+
+export const showConfigGatewayModal = async (record?: IConfigGateway) => {
+  const xFormModal = {
+    formMap: [
+      {
+        key: 'type',
+        label: '配置类型',
+        rules: [{ required: true, message: '请选择配置类型' }],
+        type: "select",
+        options: admin.gatewayType.map((item: any, index: number) => ({
+          key: index,
+          label: item.configName,
+          value: item.configType,
+        })),
+        attrs: {
+          disabled: record ? true : false,
+        }
+      }, {
+        key: 'name',
+        label: '配置键',
+        rules: [{ required: true, message: '请输入配置键' }],
+        attrs: {
+          disabled: record ? true : false,
+        },
+      }, {
+        key: 'value',
+        label: '配置值',
+        type: 'text_area',
+        rules: [{
+          required: true,
+          message: '请输入配置值',
+        }],
+      }, {
+        key: 'description',
+        label: '描述',
+        type: 'text_area',
+        rules: [{ required: true, message: '请输入备注' }],
+      },
+    ],
+    formData: record || {},
+    visible: true,
+    isWaitting: true,
+    title: `${record ? '编辑配置' : '新建配置'}`,
+    onSubmit: async (parmas: IConfigGateway) => {
+      if (record) {
+        parmas.id = record.id;
+        return admin.editConfigGateway(parmas).then(data => {
+          notification.success({ message: '编辑配置成功' });
+        });
+      } else {
+        return admin.addNewConfigGateway(parmas).then(data => {
+          notification.success({ message: '新建配置成功' });
+        });
      }
-      return admin.addNewConfigure(value).then(data => {
-        notification.success({ message: '新建配置成功' });
-      });
    },
  };
  wrapper.open(xFormModal);
--- a/kafka-manager-console/src/container/modal/app.tsx
+++ b/kafka-manager-console/src/container/modal/app.tsx
@@ -85,7 +85,7 @@ export const showEditModal = (record?: IAppItem, from?: string, isDisabled?: boo
    ],
    formData: record,
    visible: true,
-    title: isDisabled ? '详情' : record ? '编辑' : <div><span>应用申请</span><a className='applicationDocument' href="###" target='_blank'>应用申请文档</a></div>,
+    title: isDisabled ? '详情' : record ? '编辑' : <div><span>应用申请</span><a className='applicationDocument' href="https://github.com/didi/Logi-KafkaManager/blob/master/docs/user_guide/resource_apply.md" target='_blank'>资源申请文档</a></div>,
    // customRenderElement: isDisabled ? '' : record ? '' : <span className="tips">集群资源充足时，预计1分钟自动审批通过</span>,
    isWaitting: true,
    onSubmit: (value: IAppItem) => {
--- a/kafka-manager-console/src/container/modal/expert.tsx
+++ b/kafka-manager-console/src/container/modal/expert.tsx
@@ -20,14 +20,14 @@ export interface IRenderData {
 }

 export const migrationModal = (renderData: IRenderData[]) => {
- const xFormWrapper = {
+  const xFormWrapper = {
    type: 'drawer',
    visible: true,
    width: 1000,
    title: '新建迁移任务',
-    customRenderElement: <WrappedDataMigrationFormTable data={renderData}/>,
+    customRenderElement: <WrappedDataMigrationFormTable data={renderData} />,
    nofooter: true,
    noform: true,
  };
- wrapper.open(xFormWrapper as IXFormWrapper);
+  wrapper.open(xFormWrapper as IXFormWrapper);
 };
--- a/kafka-manager-console/src/container/modal/offline-app-modal-new.tsx
+++ b/kafka-manager-console/src/container/modal/offline-app-modal-new.tsx
@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { Table, Modal, Tooltip, Icon, message, notification, Alert, Button } from 'component/antd';
+import { app } from 'store/app';
+import { getApplyOnlineColumns } from 'container/topic/config';
+import { observer } from 'mobx-react';
+import { modal } from 'store/modal';
+import { users } from 'store/users';
+import { urlPrefix } from 'constants/left-menu';
+import { region } from 'store';
+
+@observer
+export class ConnectAppNewList extends React.Component {
+
+  public componentDidMount() {
+    app.getAppsConnections(modal.params);
+  }
+
+  public handleCancel = () => {
+    app.setAppsConnections([]);
+    modal.close();
+  }
+
+  public handleSubmit = () => {
+    const connectionList = app.appsConnections;
+    if (connectionList && connectionList.length) {
+      return message.warning('存在连接信息，无法申请下线！');
+    }
+    const offlineParams = {
+      type: 11,
+      applicant: users.currentUser.username,
+      description: '',
+      extensions: JSON.stringify({ appId: modal.params }),
+    };
+    app.applyAppOffline(offlineParams).then((data: any) => {
+      notification.success({ message: '申请下线成功' });
+      window.location.href = `${urlPrefix}/user/order-detail/?orderId=${data.id}&region=${region.currentRegion}`;
+    });
+    modal.close();
+  }
+
+  public render() {
+    const connectionList = app.appsConnections;
+    return (
+      <>
+        <Modal
+          visible={true}
+          className="stream-debug-modal"
+          title="提示"
+          maskClosable={false}
+          onCancel={this.handleCancel}
+          // onOk={this.handleSubmit}
+          // okText="确认"
+          // cancelText="取消"
+          okButtonProps={{ disabled: app.connectLoading || !!app.appsConnections.length }}
+          footer={connectionList && connectionList.length ?
+            <Button type="primary" onClick={this.handleCancel}>确定</Button>
+            :
+            <>
+              <Button onClick={this.handleCancel}>取消</Button>
+              <Button type="primary" onClick={this.handleSubmit}>确定</Button>
+            </>
+          }
+          width={500}
+        >
+          <div style={{ textAlign: 'center', fontWeight: "bolder" }}>
+            {
+              connectionList && connectionList.length
+                ?
+                <span>该应用已与Topic关联，请先解除应用与Topic之间的关系。<a href={`${urlPrefix}/topic/app-detail?appId=${modal.params}`}>点击查看</a></span>
+                :
+                <span>应用下线后，AppID、密钥将会失效，请谨慎操作！</span>
+            }
+          </div>
+        </Modal>
+      </>
+    );
+  }
+}
--- a/kafka-manager-console/src/container/modal/order.tsx
+++ b/kafka-manager-console/src/container/modal/order.tsx
@@ -4,6 +4,7 @@ import { message, Icon, notification, Modal, Table, Tooltip } from 'component/an
 import { IApprovalOrder, IBaseOrder, IOrderInfo } from 'types/base-type';
 import { admin } from 'store/admin';
 import { modal } from 'store/modal';
+import { cluster } from 'store/cluster';
 import { cellStyle } from 'constants/table';
 import * as React from 'react';

@@ -37,6 +38,12 @@ const renderModalTilte = (type: number, status: number) => {
 export const showApprovalModal = (info: IOrderInfo, status: number, from?: string) => {
  const { id, type } = info;
  const formMap = [{
+    key: 'clusterId',
+    label: '所属集群',
+    type: 'input_number',
+    defaultValue: info.detail.logicalClusterName,
+    attrs: { disabled: true },
+  }, {
    key: 'partitionNum',
    label: '分区数',
    type: 'input_number',
@@ -75,8 +82,8 @@ export const showApprovalModal = (info: IOrderInfo, status: number, from?: strin
    // }],
    rules: [{
      required: true,
-      message: '请输入大于12小于999的整数',
-      pattern: /^([1-9]{1}[0-9]{2})$|^([2-9]{1}[0-9]{1})$|^(1[2-9]{1})$/,
+      message: '请输入大于0小于10000的整数',
+      pattern: /^\+?[1-9]\d{0,3}(\.\d*)?$/,
    }],
  }, {
    key: 'species',
@@ -87,7 +94,7 @@ export const showApprovalModal = (info: IOrderInfo, status: number, from?: strin
      label: 'Region',
      value: 'region',
    }, {
-      label: 'Borker',
+      label: 'Broker',
      value: 'broker',
    }],
    rules: [{ required: false, message: '请选择类型' }],
--- a/kafka-manager-console/src/container/modal/topic.tsx
+++ b/kafka-manager-console/src/container/modal/topic.tsx
@@ -88,7 +88,7 @@ export const applyTopic = () => {
    ],
    formData: {},
    visible: true,
-    title: '申请Topic',
+    title: <div><span>申请Topic</span><a className='applicationDocument' href="https://github.com/didi/Logi-KafkaManager/blob/master/docs/user_guide/resource_apply.md" target='_blank'>资源申请文档</a></div>,
    okText: '确认',
    // customRenderElement: <span className="tips">集群资源充足时，预计1分钟自动审批通过</span>,
    isWaitting: true,
@@ -399,8 +399,8 @@ export const updateAllTopicFormModal = () => {
  const formMap = wrapper.xFormWrapper.formMap;
  if (topic.authorities) {
    const { consume, send, checkStatus } = judgeAccessStatus(topic.authorities.access);
-    formMap[3].defaultValue = checkStatus;
-    formMap[3].options = [{
+    formMap[2].defaultValue = checkStatus;
+    formMap[2].options = [{
      label: `消费权限${consume ? '（已拥有）' : ''}`,
      value: '1',
      disabled: consume,
@@ -409,7 +409,7 @@ export const updateAllTopicFormModal = () => {
      value: '2',
      disabled: send,
    }];
-    formMap[3].rules = [{
+    formMap[2].rules = [{
      required: true,
      validator: (rule: any, value: any, callback: any) => getPowerValidator(rule, value, callback, checkStatus, 'allTopic'),
    }];
@@ -476,7 +476,6 @@ export const showAllPermissionModal = (item: ITopic) => {

 const showAllPermission = (appId: string, item: ITopic, access: number) => {
  const { consume, send, checkStatus } = judgeAccessStatus(access);
-
  const xFormModal = {
    formMap: [
      {
@@ -489,16 +488,6 @@ const showAllPermission = (appId: string, item: ITopic, access: number) => {
          disabled: true,
        },
      },
-      {
-        key: 'clusterName',
-        label: '集群名称',
-        defaultValue: item.clusterName,
-        rules: [{ required: true, message: '请输入集群名称' }],
-        attrs: {
-          placeholder: '请输入集群名称',
-          disabled: true,
-        },
-      },
      {
        key: 'appId',
        label: '绑定应用',
@@ -526,6 +515,26 @@ const showAllPermission = (appId: string, item: ITopic, access: number) => {
          validator: (rule: any, value: any, callback: any) => getPowerValidator(rule, value, callback, checkStatus, 'allTopic'),
        }],
      },
+      // {
+      //   key: 'clusterName',
+      //   label: '集群名称',
+      //   defaultValue: item.clusterName,
+      //   rules: [{ required: true, message: '请输入集群名称' }],
+      //   attrs: {
+      //     placeholder: '请输入集群名称',
+      //     disabled: true,
+      //   },
+      // },
+      // {
+      //   key: 'clusterName',
+      //   label: '集群名称',
+      //   defaultValue: item.clusterName,
+      //   rules: [{ required: true, message: '请输入集群名称' }],
+      //   attrs: {
+      //     placeholder: '请输入集群名称',
+      //     disabled: true,
+      //   },
+      // },
      {
        key: 'description',
        label: '申请原因',
@@ -587,16 +596,16 @@ export const showPermissionModal = (item: ITopic) => {
          disabled: true,
        },
      },
-      {
-        key: 'clusterName',
-        label: '集群名称',
-        defaultValue: item.clusterName,
-        rules: [{ required: true, message: '请输入集群名称' }],
-        attrs: {
-          placeholder: '请输入集群名称',
-          disabled: true,
-        },
-      },
+      // {
+      //   key: 'clusterName',
+      //   label: '集群名称',
+      //   defaultValue: item.clusterName,
+      //   rules: [{ required: true, message: '请输入集群名称' }],
+      //   attrs: {
+      //     placeholder: '请输入集群名称',
+      //     disabled: true,
+      //   },
+      // },
      {
        key: 'appName',
        label: '绑定应用',