seecoder-paas-ui/src/components/ConfigModal.js

import React, { PureComponent } from 'react';
import { PageHeader, Button, Descriptions, Modal, Card, Icon, Row, Col, Form, Popconfirm, Input, Space, Divider } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import styles from './ConfigModal.less'

export default class ConfigModal extends PureComponent {
  formRef = React.createRef();
  state = {
  }

  setFormValues(config) {
    if (config) {
      this.formRef.current.setFieldsValue({
        ...(config.config || {}),
        envsArr: Object.keys(config.config.envs || {}).map(key => ({ key, value: config.config.envs[key] })),
        mountsArr: Object.keys(config.config.mounts || {}).map(key => ({ key, value: config.config.mounts[key] })),
        ingressAnnotaionsArr: Object.keys(config.config.ingressAnnotaions || {}).map(key => ({ key, value: config.config.ingressAnnotaions[key] })),
        hostPathArr: Object.keys(config.config.hostPath || {}).map(key => ({ key, value: config.config.hostPath[key] })),
      });
    }
  }

  componentDidMount() {
    this.setFormValues(this.props.config);
  }

  componentWillReceiveProps(props) {
    if (props.config != this.props.config)
    this.setFormValues(props.config);
  }

  onOk() {
    this.formRef.current.validateFields().then(values => {
      this.props.onOk({
        ...this.props.config,
        config: {
          ...values,
          envs: (values.envsArr || []).reduce((obj, item) => {
            obj[item.key] = item.value;
            return obj;
          }, {}),
          mounts: (values.mountsArr || []).reduce((obj, item) => {
            obj[item.key] = item.value;
            return obj;
          }, {}),
          hostPath: (values.hostPathArr || []).reduce((obj, item) => {
            obj[item.key] = item.value;
            return obj;
          }, {}),
          ingressAnnotaions: (values.ingressAnnotaionsArr || []).reduce((obj, item) => {
            obj[item.key] = item.value;
            return obj;
          }, {}),
        }
      })
    });
  }

  render() {
    return (
      <Modal
        visible={this.props.visible}
        forceRender
        onCancel={() => this.props.onCancel()}
        title={"更新配置"}
        okText="确认"
        cancelText="取消"
        onOk={this.onOk.bind(this)}
        className={styles.modal}
        width="80%"
      >
        <Form
          ref={this.formRef}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 20 }}
          labelAlign="right"
        >
          <Form.Item 
            name="hostPrefix"
            label="域名前缀"
            tooltip="有域名前缀时会根据端口对服务进行暴露，生成域名规则为{域名前缀}-{端口}.{主域名}"
          >
            <Input placeholder="域名前缀"></Input>
          </Form.Item >
          <Form.Item 
            name="servicePort"
            label="服务端口"
            tooltip="服务端口，多个用英文逗号隔开"
          >
            <Input placeholder='服务端口，多个用英文逗号隔开'></Input>
          </Form.Item >
          <Form.Item 
            name="replicas"
            label="实例数"
            tooltip="服务部署的实例数目，即pod数量，默认为1"
          >
            <Input placeholder="实例数"></Input>
          </Form.Item >
          <Form.Item 
            name="runArgs"
            label="运行参数"
            tooltip="服务运行参数"
          >
            <Input placeholder="运行参数"></Input>
          </Form.Item>
          <Form.Item 
            name="runCommands"
            label="运行命令"
            tooltip="服务运行命令"
          >
            <Input placeholder="运行命令"></Input>
          </Form.Item >
          <Divider plain>环境变量配置</Divider>
          <div className={styles.list}>
            <Form.List name="envsArr" label="key-value">
              {(fields, {add, remove}) => (
                  <>
                    {fields.map(field => (
                        <div key={`env-${field.fieldKey}`} field={field} className={styles.field}>
                          <Form.Item
                            {...field}
                            key={`env-key-${field.fieldKey}`}
                            label="key"
                            name={[field.name, 'key']}
                            fieldKey={[field.fieldKey, 'key']}
                            rules={[{ required: true, message: 'key不能为空' }]}
                          >
                            <Input placeholder="环境变量key" />
                          </Form.Item>
                          <Form.Item
                            {...field}
                            key={`env-value-${field.fieldKey}`}
                            label="value"
                            name={[field.name, 'value']}
                            fieldKey={[field.fieldKey, 'value']}
                            rules={[{ required: true, message: 'value不能为空' }]}
                          >
                            <Input placeholder="环境变量value" />
                          </Form.Item>
                          <MinusCircleOutlined style={{fontSize: 18, marginLeft: 10}} onClick={() => remove(field.name)} />
                        </div>
                    ))}
                    <Form.Item className={styles.addBtn}>
                      <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                        添加
                      </Button>
                    </Form.Item>
                  </>
              )}
            </Form.List>
          </div>
          <Divider plain>挂载文件配置</Divider>
          <div className={styles.list}>
            <Form.List name="mountsArr">
              {(fields, {add, remove}) => (
                  <>
                    {fields.map(field => (
                        <div key={`mount-${field.fieldKey}`} className={styles.field}>
                          <Form.Item
                            {...field}
                            key={`mount-key-${field.fieldKey}`}
                            label="文件路径"
                            name={[field.name, 'key']}
                            fieldKey={[field.fieldKey, 'key']}
                            rules={[{ required: true, message: '文件路径不能为空' }]}
                          >
                            <Input placeholder="文件路径" />
                          </Form.Item>
                          <Form.Item
                            {...field}
                            label="文件内容"
                            key={`mount-value-${field.fieldKey}`}
                            style={{alignItems: 'center'}}
                            name={[field.name, 'value']}
                            fieldKey={[field.fieldKey, 'value']}
                          >
                            <Input.TextArea placeholder="文件内容" />
                          </Form.Item>
                          <MinusCircleOutlined style={{fontSize: 18, marginLeft: 10}} onClick={() => remove(field.name)} />
                        </div>
                    ))}
                    <Form.Item className={styles.addBtn} >
                      <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                        添加
                      </Button>
                    </Form.Item>
                  </>
              )}
            </Form.List>
          </div>
          <Divider plain>节点文件挂载</Divider>
          <div className={styles.list}>
            <Form.List name="hostPathArr">
              {(fields, {add, remove}) => (
                  <>
                    {fields.map(field => (
                        <div key={`hostPath-${field.fieldKey}`} className={styles.field}>
                          <Form.Item
                            {...field}
                            key={`hostPath-key-${field.fieldKey}`}
                            name={[field.name, 'key']}
                            label="节点路径"
                            fieldKey={[field.fieldKey, 'key']}
                            rules={[{ required: true, message: '节点文件路径不能为空' }]}
                          >
                            <Input placeholder="节点文件路径" />
                          </Form.Item>
                          <Form.Item
                            {...field}
                            key={`hostPath-value-${field.fieldKey}`}
                            name={[field.name, 'value']}
                            label="挂载路径"
                            fieldKey={[field.fieldKey, 'value']}
                            rules={[{ required: true, message: '挂载文件路径不能为空' }]}
                          >
                            <Input placeholder="挂载文件路径" />
                          </Form.Item>
                          <MinusCircleOutlined style={{fontSize: 18, marginLeft: 10}} onClick={() => remove(field.name)} />
                        </div>
                    ))}
                    <Form.Item className={styles.addBtn} >
                      <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                        添加
                      </Button>
                    </Form.Item>
                  </>
              )}
            </Form.List>
          </div>
          <Divider plain>ingress控制器annotations</Divider>
          <div className={styles.list}>
            <Form.List name="ingressAnnotationsArr">
              {(fields, {add, remove}) => (
                  <>
                    {fields.map(field => (
                        <div key={`ingress-${field.fieldKey}`} className={styles.field}>
                          <Form.Item
                            {...field}
                            label="key"
                            key={`ingress-key-${field.fieldKey}`}
                            name={[field.name, 'key']}
                            fieldKey={[field.fieldKey, 'key']}
                            rules={[{ required: true, message: 'annotationKey不能为空' }]}
                          >
                            <Input placeholder="annotationKey" />
                          </Form.Item>
                          <Form.Item
                            {...field}
                            key={`ingress-value-${field.fieldKey}`}
                            name={[field.name, 'value']}
                            label="value"
                            fieldKey={[field.fieldKey, 'value']}
                            rules={[{ required: true, message: 'annotationValue不能为空' }]}
                          >
                            <Input placeholder="annotationValue" />
                          </Form.Item>
                          <MinusCircleOutlined style={{fontSize: 18, marginLeft: 10}} onClick={() => remove(field.name)} />
                        </div>
                    ))}
                    <Form.Item className={styles.addBtn} >
                      <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                        添加
                      </Button>
                    </Form.Item>
                  </>
              )}
            </Form.List>
          </div>
        </Form>
      </Modal>
    )
  }
}