ai-proj-demo/src/module/datasource/component/DatasourceAdd.jsx

import {
  ModalForm,
  ProFormSelect,
  ProFormText,
  ProFormRadio,
  ProFormTextArea,
  ProFormUploadButton,
  ProForm,
} from '@ant-design/pro-components'
import { Button, Col, message, Form } from 'antd'
import { useState } from 'react'
import {
  testDataSourceConnection,
  createDataSource,
  uploadFile,
} from '../services'
import Base64 from 'base-64'

const DATA_TYPE_MYSQL = 'mysql'
const KERBS_VALID_FALSE = false

export default function DatasourceAdd({ updateDataSource }) {
  // 数据源类型
  const [dataType, setDataType] = useState(DATA_TYPE_MYSQL)
  // 是否开启kerbsValid验证
  const [kerbsValid, setKerbsValid] = useState(KERBS_VALID_FALSE)
  const [kerberosServiceName, setKerberosServiceName] = useState('')
  const [principal, setPrincipal] = useState('')
  // Loading状态
  const [loading, setLoading] = useState(false)

  const [keytabFile, setKeytabFile] = useState([])
  const [krb5File, setKrb5File] = useState([])

  const [useSSL, setUseSSL] = useState(false)
  // Form表单
  const [form] = Form.useForm()
  // 测试连接
  const testConnect = async () => {
    const fields = [
      'datasource_name',
      'datasource',
      'database_name',
      'jdbc_username',
      'jdbc_password',
      'jdbc_url',
      'comments',
      'tag',
    ]
    try {
      await form.validateFields(fields)
      setLoading(true)
      const testData = form.getFieldsValue(fields)
      const params = {
        ...testData,
        tag: form.getFieldValue('tag').join('/'),
      }
      if (params.jdbc_password) {
        params.jdbc_password = Base64.encode(params.jdbc_password)
      }
      params['use_ssl'] = useSSL ? 1 : 0
      params['kerberos'] = kerbsValid ? 1 : 0
      if (kerbsValid) {
        let keytab = ''
        let krb5config = ''
        if (keytabFile && keytabFile.length) {
          keytab = await uploadKerbFile(keytabFile)
        }
        if (krb5File && krb5File.length) {
          krb5config = await uploadKerbFile(krb5File)
        }
        params['keytab'] = keytab
        params['krb5config'] = krb5config
        params['kerberos_service_name'] = kerberosServiceName
        params['principal'] = principal
        if (checkKrb(keytab, krb5config, kerberosServiceName, principal)) {
          const { data } = await testDataSourceConnection(params)
          if (data.code === 200) {
            if (data.data) {
              message.success('连接成功')
            } else {
              message.error('连接失败')
            }
          } else {
            message.error(data.msg)
          }
        }
      } else {
        const { data } = await testDataSourceConnection(params)
        if (data.code === 200) {
          if (data.data) {
            message.success('连接成功')
          } else {
            message.error('连接失败')
          }
        } else {
          message.error(data.msg)
        }
      }
    } catch (error) {
      message.error('表单验证错误，请检查表单信息是否完整')
    }
    setLoading(false)
  }
  // 完成添加
  const finishAdd = async () => {
    const fields = [
      'datasource_name',
      'datasource',
      'database_name',
      'jdbc_username',
      'jdbc_password',
      'jdbc_url',
      'comments',
      'tag',
    ]
    const params = {
      ...form.getFieldsValue(fields),
      tag: form.getFieldValue('tag').join('/'),
    }
    if (params.jdbc_password) {
      params.jdbc_password = Base64.encode(params.jdbc_password)
    }
    params['use_ssl'] = useSSL ? 1 : 0
    params['kerberos'] = kerbsValid ? 1 : 0
    if (kerbsValid) {
      let keytab = ''
      let krb5config = ''
      if (keytabFile && keytabFile.length) {
        keytab = await uploadKerbFile(keytabFile)
      }
      if (krb5File && krb5File.length) {
        krb5config = await uploadKerbFile(krb5File)
      }
      params['keytab'] = keytab
      params['krb5config'] = krb5config
      params['kerberos_service_name'] = kerberosServiceName
      params['principal'] = principal
      if (checkKrb(keytab, krb5config, kerberosServiceName, principal)) {
        const { data } = await createDataSource(params)
        if (data.data) {
          message.success('添加成功')
          updateDataSource()
        } else {
          message.error(data.msg)
        }
      }
    } else {
      const { data } = await createDataSource(params)
      if (data.data) {
        message.success('连接成功')
      } else {
        message.error(data.msg)
      }
    }
  }

  // 校验krb
  const checkKrb = (keytab, krb5config, kerberos_service_name, principal) => {
    if (keytab) {
      if (krb5config) {
        if (kerberos_service_name) {
          if (principal) {
            return true
          } else {
            message.error('缺少principal')
            return false
          }
        } else {
          message.error('缺少kerberos_service_name')
          return false
        }
      } else {
        message.error('缺少krb5config')
        return false
      }
    } else {
      message.error('缺少keytab')
      return false
    }
  }

  const uploadKerbFile = async fileList => {
    const file = new FormData()
    fileList.forEach(item => {
      file.append('file', item)
    })
    file.append('project_id', 'test')
    file.append('file_type', 'kerberos')
    const { data } = await uploadFile(file)
    let uri = ''
    if (data.code === 200) {
      uri = data.data
    } else {
      message.error(data.msg)
    }
    return uri
  }
  // 测试连接按钮
  const testConnectBtn = (
    <Button onClick={testConnect} loading={loading}>
      测试连接
    </Button>
  )

  //上传文件配置
  const keytabUpProps = {
    onRemove: file => {
      const index = keytabFile.indexOf(file)
      const newFileList = keytabFile.slice()
      newFileList.splice(index, 1)
      setKeytabFile(newFileList)
    },
    beforeUpload: file => {
      setKeytabFile([...keytabFile, file])
      return false
    },
    keytabFile,
  }

  const krd5UpProps = {
    onRemove: file => {
      const index = krb5File.indexOf(file)
      const newFileList = krb5File.slice()
      newFileList.splice(index, 1)
      setKrb5File(newFileList)
    },
    beforeUpload: file => {
      setKrb5File([...krb5File, file])
      return false
    },
    krb5File,
  }
  return (
    <ModalForm
      form={form}
      trigger={<Button type="primary">添加数据源</Button>}
      onFinish={finishAdd}
      initialValues={{
        datasource: DATA_TYPE_MYSQL,
        kerbsValid: KERBS_VALID_FALSE,
        use_ssl: false,
        comments: '',
      }}
      title="添加数据源"
      modalProps={{
        destroyOnClose: true,
        width: '70%',
        afterClose: () => {
          setDataType(DATA_TYPE_MYSQL)
          setKerbsValid(KERBS_VALID_FALSE)
          setUseSSL(false)
          form.resetFields()
        },
        okText: '确认添加',
      }}
      layout="horizontal"
      grid={true}
      labelCol={{ span: 8 }}
      colProps={{ span: 12 }}
      rowProps={{
        gutter: [45, 0],
      }}>
      <ProFormSelect
        label="选择数据源"
        name="datasource"
        fieldProps={{
          onChange: val => setDataType(val),
        }}
        valueEnum={{
          mysql: 'mysql',
          hive: 'hive',
        }}
        rules={[
          {
            required: true,
            message: '请选择数据源!',
          },
        ]}
      />
      <Col span={12} />
      <ProFormText
        label="数据源名称"
        name="datasource_name"
        rules={[
          {
            required: true,
            message: '请输入数据源名称!',
          },
        ]}
      />
      <ProFormSelect
        label="数据源标签"
        name="tag"
        fieldProps={{
          mode: 'tags',
        }}
        valueEnum={{
          线上: '线上',
          测试: '测试',
          开发: '开发',
        }}
        rules={[
          {
            required: true,
            message: '请选择数据源标签!',
          },
        ]}
      />
      <ProFormText
        label="数据库地址"
        name="jdbc_url"
        rules={[
          {
            required: true,
            message: '请输入数据库地址!',
          },
        ]}
      />
      <ProFormText
        label="数据库名称"
        name="database_name"
        rules={[
          {
            required: true,
            message: '请输入数据库名称!',
          },
        ]}
      />
      {!kerbsValid && (
        <ProFormText
          label="用户名"
          name="jdbc_username"
          rules={[
            {
              required: true,
              message: '请输入用户名!',
            },
          ]}
        />
      )}
      {kerbsValid && <ProFormText label="用户名" name="jdbc_username" />}
      {!kerbsValid && (
        <ProFormText.Password
          label="密码"
          name="jdbc_password"
          rules={[
            {
              required: true,
              message: '请输入密码!',
            },
          ]}
        />
      )}
      {kerbsValid && <ProFormText.Password label="密码" name="jdbc_password" />}
      <ProFormTextArea
        label="详情"
        name="comments"
        fieldProps={{ autoSize: true }}
      />
      {dataType === 'mysql' && (
        <ProFormRadio.Group
          label="use SSL"
          name="use_ssl"
          rules={[
            {
              required: true,
              message: '请选择是否使用SSL!',
            },
          ]}
          fieldProps={{
            onChange: e => {
              setUseSSL(e.target.value)
            },
            value: useSSL,
          }}
          options={[
            {
              label: '是',
              value: true,
            },
            {
              label: '否',
              value: false,
            },
          ]}
        />
      )}
      {dataType === 'hive' && (
        <ProFormRadio.Group
          label="kerberos验证"
          name="kerberosValid"
          fieldProps={{
            onChange: e => setKerbsValid(e.target.value),
            value: kerbsValid,
          }}
          options={[
            {
              label: '是',
              value: true,
            },
            {
              label: '否',
              value: false,
            },
          ]}
        />
      )}

      <Col span={12} style={{ paddingLeft: '22.5px', paddingRight: '22.5px' }}>
        <ProForm.Item label="测试连接" name="success">
          {testConnectBtn}
        </ProForm.Item>
      </Col>

      {dataType === 'hive' && kerbsValid ? (
        <>
          <ProFormUploadButton
            label="keytab文件"
            name="keytab"
            title="上传keyTabPath"
            fieldProps={{ ...keytabUpProps }}
            max={1}
          />
          <Col span={12} />
          <ProFormUploadButton
            label="krb5config文件"
            name="krb5config"
            title="上传krb5config"
            fieldProps={{ ...krd5UpProps }}
            max={1}
          />
          <Col span={12} />
          <ProFormText
            label="kerberos_service_name"
            name="kerberos_service_name"
            placeholder="输入kerberos_service_name"
            fieldProps={{
              onChange: e => setKerberosServiceName(e.target.value),
            }}
          />
          <Col span={12} />
          <ProFormText
            label="Principal"
            name="principal"
            placeholder="ylaiuser@EMR-56L6ZNTS"
            fieldProps={{
              onChange: e => setPrincipal(e.target.value),
            }}
          />
        </>
      ) : (
        <></>
      )}
    </ModalForm>
  )
}