@ant-design/icons#DeleteFilled JavaScript Examples

render() {
    const { version } = this.props.settings;
    // const versionConf = version instanceof Array ? version : [];
    // console.log(">> version", version)

    return (
      <SettingBlock title={'应用版本相关设置'}>
        <Table
          size={'small'}
          pagination={false}
          columns={[
            ...VersionConfigColumns,
            {
              title: '操作',
              render: (_, record, index) => {
                return (
                  <>
                    <Popconfirm title={'确定删除吗?'} onConfirm={() => this.onDelete(index)}>
                      <Button shape={'circle'}>
                        <DeleteFilled />
                      </Button>
                    </Popconfirm>
                    <Button
                      shape={'circle'}
                      onClick={() => this.onEdit(index)}
                      style={{ marginLeft: '10px' }}
                    >
                      <EditFilled />
                    </Button>
                  </>
                );
              },
            },
          ]}
          dataSource={version}
          footer={() => (
            <div style={{ textAlign: 'center' }}>
              <Button onClick={this.onAddConfig}>
                <FileAddFilled />
                新增
              </Button>
            </div>
          )}
        />

        <ModalAddVersion
          visible={this.state.modalAddVersion}
          onCancel={() => this.setState({ modalAddVersion: false })}
          onSubmit={this.onAddVersion}
        />

        <ModalEditVersion
          visible={this.state.modalEditVersion}
          onCancel={() => this.setState({ modalEditVersion: false })}
          onSubmit={this.onUpdateVersion}
          fields={this.state.currentEditFields}
        />
      </SettingBlock>
    );
  }

render() {
    const { etcd } = this.props.settings;
    // console.log(">> etcd", etcd)

    return (
      <SettingBlock title={'Etcd查询前缀设置'}>
        <Table
          size={'small'}
          pagination={false}
          columns={[
            ...EtcdConfigColumns,
            {
              title: '操作',
              render: (_, record, index) => {
                return (
                  <>
                    <Popconfirm title={'确定删除吗?'} onConfirm={() => this.onDelete(index)}>
                      <Button shape={'circle'}>
                        <DeleteFilled />
                      </Button>
                    </Popconfirm>
                    <Button
                      shape={'circle'}
                      onClick={() => this.onEdit(index)}
                      style={{ marginLeft: '10px' }}
                    >
                      <EditFilled />
                    </Button>
                  </>
                );
              },
            },
          ]}
          dataSource={etcd}
          footer={() => (
            <div style={{ textAlign: 'center' }}>
              <Button onClick={this.onAddConfig}>
                <FileAddFilled />
                新增
              </Button>
            </div>
          )}
        />

        <ModalAddEtcd
          visible={this.state.modalAddEtcd}
          onCancel={() => this.setState({ modalAddEtcd: false })}
          onSubmit={this.onAddEtcd}
        />

        <ModalEditEtcd
          visible={this.state.modalEditEtcd}
          onCancel={() => this.setState({ modalEditEtcd: false })}
          onSubmit={this.onUpdateEtcd}
          fields={this.state.currentEditFields}
        />
      </SettingBlock>
    );
  }

render() {
    const { gateway } = this.props.settings;

    return (
      <SettingBlock title={'网关设置'}>
        <Table
          size={'small'}
          pagination={false}
          columns={[
            ...GatewayConfigColumns,
            {
              title: '操作',
              render: (_, record, index) => {
                return (
                  <>
                    <Popconfirm title={'确定删除吗?'} onConfirm={() => this.onDelete(index)}>
                      <Button shape={'circle'}>
                        <DeleteFilled />
                      </Button>
                    </Popconfirm>
                    <Button
                      shape={'circle'}
                      onClick={() => this.onEdit(index)}
                      style={{ marginLeft: '10px' }}
                    >
                      <EditFilled />
                    </Button>
                  </>
                );
              },
            },
          ]}
          dataSource={gateway}
          footer={() => (
            <div style={{ textAlign: 'center' }}>
              <Button onClick={this.onAddConfig}>
                <FileAddFilled />
                新增
              </Button>
            </div>
          )}
        />

        <ModalAddGateway
          visible={this.state.modalAddGateway}
          onCancel={() => this.setState({ modalAddGateway: false })}
          onSubmit={this.onAddGateway}
        />

        <ModalEditGateway
          visible={this.state.modalEditGateway}
          onCancel={() => this.setState({ modalEditGateway: false })}
          onSubmit={this.onUpdateGateway}
          fields={this.state.currentEditFields}
        />
      </SettingBlock>
    );
  }

function ModalAddVersion(props) {
  let [form] = Form.useForm();

  let onFinish = (vals) => {
    props.onSubmit && props.onSubmit(vals);
  };

  return (
    <Modal title={'新增应用版本相关设置'} {...props} width={600} onOk={() => form.submit()}>
      <Form form={form} labelCol={{ span: 5 }} onFinish={onFinish}>
        <Form.Item
          label={'应用版本名称'}
          name={'name'}
          rules={[
            { required: true, message: '请填写版本名称' },
            // {pattern: /^(http|https):\/\/[a-zA-Z0-9\.\-\_:]{3,}$\/[abc]*/, message: "地址不符合规则，示例：http://1.2.3.4:3000"}
          ]}
        >
          <Input placeholder={'示例: 支持v1.6~v1.7'} />
        </Form.Item>

        <Form.Item
          label={'应用版本号'}
          name={'version'}
          rules={[
            { required: true, message: '请填写版本号' },
            // {pattern: /^(http|https):\/\/[a-zA-Z0-9\.\-\_:]{3,}$\/[abc]*/, message: "地址不符合规则，示例：http://1.2.3.4:3000"}
          ]}
        >
          <Input placeholder={'示例: v1.0,v1.2'} />
        </Form.Item>

        <Form.Item
          label={'应用版本Key'}
          name={'versionKey'}
          rules={[
            { required: true, message: '请填写框架版本Key' },
            // {pattern: /^(http|https):\/\/[a-zA-Z0-9\.\-\_:]{3,}$\/[abc]*/, message: "地址不符合规则，示例：http://1.2.3.4:3000"}
          ]}
        >
          <Input placeholder={'示例: jupiter1.0series'} />
        </Form.Item>

        <Form.List name={'dashboards'}>
          {(fields, { add, remove }) => {
            return (
              <div>
                <Form.Item label={'Dashboard配置'}>
                  {fields.map((field, index) => {
                    return (
                      <div
                        style={{
                          marginBottom: '10px',
                          display: 'grid',
                          gridTemplateColumns: '150px auto 50px',
                          gridColumnGap: '10px',
                        }}
                        key={field.key}
                      >
                        <Form.Item
                          {...field}
                          name={[field.name, 'name']}
                          key={[field.fieldKey, 'name']}
                          noStyle
                        >
                          <Input placeholder={'Dashboard名称'} />
                        </Form.Item>
                        <Form.Item
                          {...field}
                          name={[field.name, 'value']}
                          key={[field.fieldKey, 'value']}
                          noStyle
                          rules={[
                            { required: true, message: '请填写面板路径' },
                            { pattern: /^\/grafana\/.*/, message: '面板路径必须以 /grafana 开头' },
                          ]}
                        >
                          <Input placeholder={'Dashboard地址'} />
                        </Form.Item>
                        <Button onClick={() => remove(index)}>
                          <DeleteFilled />
                        </Button>
                      </div>
                    );
                  })}
                  <div style={{ marginTop: '10px' }}>
                    <Button
                      type="dashed"
                      onClick={() => {
                        add();
                      }}
                    >
                      <PlusOutlined /> 新增Dashboard配置
                    </Button>
                  </div>
                </Form.Item>
              </div>
            );
          }}
        </Form.List>
      </Form>
    </Modal>
  );
}

function ModalEditVersion(props) {
  let [form] = Form.useForm();

  let onFinish = (vals) => {
    props.onSubmit && props.onSubmit(vals);
  };

  useEffect(() => {
    props.visible &&
      form.setFieldsValue({
        ...props.fields,
        dashboards: props.fields.dashboards || [],
      });
  }, [props.visible]);

  return (
    <Modal title={'修改应用版本相关配置'} {...props} width={600} onOk={() => form.submit()}>
      <Form form={form} labelCol={{ span: 5 }} onFinish={onFinish}>
        <Form.Item
          label={'应用版本名称'}
          name={'name'}
          initialValue={props.fields.name}
          rules={[
            { required: true, message: '请填写版本名称' },
            // {pattern: /^(http|https):\/\/[a-zA-Z0-9\.\-\_:]{3,}$\/[abc]*/, message: "地址不符合规则，示例：http://1.2.3.4:3000"}
          ]}
        >
          <Input placeholder={'示例: 支持v1.6~v1.7'} />
        </Form.Item>

        <Form.Item
          label={'应用版本号'}
          name={'version'}
          initialValue={props.fields.version}
          rules={[
            { required: true, message: '请填写版本号' },
            // {pattern: /^(http|https):\/\/[a-zA-Z0-9\.\-\_:]{3,}$\/[abc]*/, message: "地址不符合规则，示例：http://1.2.3.4:3000"}
          ]}
        >
          <Input placeholder={'示例: v1.0,v1.2'} />
        </Form.Item>

        <Form.Item
          label={'应用版本Key'}
          name={'versionKey'}
          initialValue={props.fields.versionKey}
          rules={[
            { required: true, message: '请填写框架版本Key' },
            // {pattern: /^(http|https):\/\/[a-zA-Z0-9\.\-\_:]{3,}$\/[abc]*/, message: "地址不符合规则，示例：http://1.2.3.4:3000"}
          ]}
        >
          <Input placeholder={'示例: jupiter1.0series'} />
        </Form.Item>

        <Form.List name={'dashboards'} initialValue={props.fields.dashboards}>
          {(fields, { add, remove }) => {
            return (
              <div>
                <Form.Item label={'Dashboard配置'}>
                  {fields.map((field, index) => {
                    return (
                      <div
                        style={{
                          marginBottom: '10px',
                          display: 'grid',
                          gridTemplateColumns: '150px auto 50px',
                          gridColumnGap: '10px',
                        }}
                        key={field.key}
                      >
                        <Form.Item
                          {...field}
                          name={[field.name, 'name']}
                          key={[field.fieldKey, 'name']}
                          noStyle
                        >
                          <Input placeholder={'Dashboard名称'} />
                        </Form.Item>
                        <Form.Item
                          {...field}
                          name={[field.name, 'value']}
                          key={[field.fieldKey, 'value']}
                          noStyle
                        >
                          <Input placeholder={'Dashboard地址'} />
                        </Form.Item>
                        <Button onClick={() => remove(index)}>
                          <DeleteFilled />
                        </Button>
                      </div>
                    );
                  })}
                  <div style={{ marginTop: '10px' }}>
                    <Button
                      type="dashed"
                      onClick={() => {
                        add();
                      }}
                    >
                      <PlusOutlined /> Dashboard配置
                    </Button>
                  </div>
                </Form.Item>
              </div>
            );
          }}
        </Form.List>
      </Form>
    </Modal>
  );
}

function ModalAddGateway(props) {
  let [form] = Form.useForm();

  let onFinish = (vals) => {
    props.onSubmit && props.onSubmit(vals);
  };

  return (
    <Modal title={'新增网关代理'} {...props} width={600} onOk={() => form.submit()}>
      <Form form={form} labelCol={{ span: 5 }} onFinish={onFinish}>
        <Form.Item label={'名称'} name={'name'} rules={[{ required: true, message: '请输入名称' }]}>
          <Input />
        </Form.Item>
        <Form.Item
          label={'访问域名'}
          name={'domain'}
          rules={[{ required: true, message: '请输入访问域名' }]}
        >
          <Input placeholder={'该域名指向Juno网关'} />
        </Form.Item>
        <Form.Item
          label={'服务地址'}
          name={'host'}
          rules={[{ required: true, message: '请输入服务地址' }]}
        >
          <Input placeholder={'背代理的服务地址，示例: example.com'} />
        </Form.Item>
        <Form.Item
          label={'服务协议'}
          name={'scheme'}
          rules={[{ required: true, message: '请输入服务协议' }]}
        >
          <Radio.Group>
            <Radio.Button value={'http'}>HTTP</Radio.Button>
            <Radio.Button value={'https'}>HTTPS</Radio.Button>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          label={'服务超时(秒)'}
          name={'timeout'}
          rules={[{ required: true, message: '请输入服务超时' }]}
        >
          <InputNumber />
        </Form.Item>

        <Form.List name={'headers'}>
          {(fields, { add, remove }) => {
            return (
              <div>
                <Form.Item label={'Headers'}>
                  {fields.map((field, index) => {
                    return (
                      <div
                        style={{
                          marginBottom: '10px',
                          display: 'grid',
                          gridTemplateColumns: '100px auto 50px',
                          gridColumnGap: '10px',
                        }}
                        key={field.key}
                      >
                        <Form.Item
                          {...field}
                          name={[field.name, 'name']}
                          key={[field.fieldKey, 'name']}
                          noStyle
                        >
                          <Input placeholder={'Header名称'} />
                        </Form.Item>
                        <Form.Item
                          {...field}
                          name={[field.name, 'value']}
                          key={[field.fieldKey, 'value']}
                          noStyle
                        >
                          <Input placeholder={'Header值'} />
                        </Form.Item>
                        <Button onClick={() => remove(index)}>
                          <DeleteFilled />
                        </Button>
                      </div>
                    );
                  })}
                  <div style={{ marginTop: '10px' }}>
                    <Button
                      type="dashed"
                      onClick={() => {
                        add();
                      }}
                    >
                      <PlusOutlined /> 新增Header
                    </Button>
                  </div>
                </Form.Item>
              </div>
            );
          }}
        </Form.List>
      </Form>
    </Modal>
  );
}

function ModalEditGateway(props) {
  let [form] = Form.useForm();

  let onFinish = (vals) => {
    props.onSubmit && props.onSubmit(vals);
  };

  useEffect(() => {
    props.visible &&
      form.setFieldsValue({
        ...props.fields,
        headers: props.fields.headers || [],
      });
  }, [props.visible]);

  return (
    <Modal title={'修改网关代理设置'} {...props} width={600} onOk={() => form.submit()}>
      <Form form={form} labelCol={{ span: 5 }} onFinish={onFinish}>
        <Form.Item
          label={'名称'}
          name={'name'}
          rules={[{ required: true, message: '请输入名称' }]}
          initialValue={props.fields.name}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={'访问域名'}
          name={'domain'}
          rules={[{ required: true, message: '请输入访问域名' }]}
          initialValue={props.fields.domain}
        >
          <Input placeholder={'该域名指向Juno网关'} />
        </Form.Item>
        <Form.Item
          label={'服务地址'}
          name={'host'}
          rules={[{ required: true, message: '请输入服务地址' }]}
          initialValue={props.fields.host}
        >
          <Input placeholder={'背代理的服务地址，示例: example.com'} />
        </Form.Item>
        <Form.Item
          label={'服务协议'}
          name={'scheme'}
          rules={[{ required: true, message: '请输入服务协议' }]}
          initialValue={props.fields.scheme}
        >
          <Radio.Group>
            <Radio.Button value={'http'}>HTTP</Radio.Button>
            <Radio.Button value={'https'}>HTTPS</Radio.Button>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          label={'服务超时(秒)'}
          name={'timeout'}
          rules={[{ required: true, message: '请输入服务超时' }]}
          initialValue={props.fields.timeout}
        >
          <InputNumber />
        </Form.Item>

        <Form.List name={'headers'} initialValue={props.fields.headers}>
          {(fields, { add, remove }) => {
            return (
              <div>
                <Form.Item label={'Headers'}>
                  {fields.map((field, index) => {
                    return (
                      <div
                        style={{
                          marginBottom: '10px',
                          display: 'grid',
                          gridTemplateColumns: '100px auto 50px',
                          gridColumnGap: '10px',
                        }}
                        key={field.key}
                      >
                        <Form.Item
                          {...field}
                          name={[field.name, 'name']}
                          key={[field.fieldKey, 'name']}
                          noStyle
                        >
                          <Input placeholder={'Header名称'} />
                        </Form.Item>
                        <Form.Item
                          {...field}
                          name={[field.name, 'value']}
                          key={[field.fieldKey, 'value']}
                          noStyle
                        >
                          <Input placeholder={'Header值'} />
                        </Form.Item>
                        <Button onClick={() => remove(index)}>
                          <DeleteFilled />
                        </Button>
                      </div>
                    );
                  })}
                  <div style={{ marginTop: '10px' }}>
                    <Button
                      type="dashed"
                      onClick={() => {
                        add();
                      }}
                    >
                      <PlusOutlined /> 新增Header
                    </Button>
                  </div>
                </Form.Item>
              </div>
            );
          }}
        </Form.List>
      </Form>
    </Modal>
  );
}

function K8SClusterSetting(props) {
  const k8sCluster = props.settings.k8s_cluster || { list: [] };

  const [visibleModalCreateCluster, visibleModalCreateClusterAct] = useBoolean(false);
  const [visibleModalEditCluster, visibleModalEditClusterAct] = useBoolean(false);
  const [currentEdit, setCurrentEdit] = useState(-1);
  const [saveField] = useSettingBlock('k8s_cluster', props.dispatch);

  const onEdit = (index) => {
    setCurrentEdit(index);
    visibleModalEditClusterAct.setTrue();
  };

  const onDelete = (index) => {
    let payload = k8sCluster;
    payload.list.splice(index, 1);
    save(payload);
  };

  const save = (payload) => {
    return new Promise(async (resolve) => {
      const res = await saveField(payload);

      props.dispatch({
        type: 'setting/loadSettings',
      });

      resolve(res);
    });
  };

  const onCreate = (fields) => {
    let payload = {
      ...k8sCluster,
      list: k8sCluster.list || [],
    };

    payload.list.push(fields);
    save(payload).then((r) => {
      visibleModalCreateClusterAct.setFalse();
    });
  };

  const onClickBtnCreate = () => {
    visibleModalCreateClusterAct.setTrue();
  };

  const onUpdate = (fields) => {
    let payload = k8sCluster;
    payload.list[currentEdit] = fields;
    save(payload).then((r) => {
      visibleModalEditClusterAct.setFalse();
      setCurrentEdit(-1);
    });
  };

  return (
    <SettingBlock title={'K8S集群设置'}>
      <Table
        size={'small'}
        pagination={false}
        columns={[
          { title: 'Name', dataIndex: 'name' },
          { title: 'Zone', dataIndex: 'zone_code' },
          {
            title: 'Env',
            dataIndex: 'env',
            render: (value = []) => value.map((env) => <Tag>{env}</Tag>),
          },
          {
            title: '操作',
            render: (_, record, index) => {
              return (
                <>
                  <Popconfirm title={'确定删除吗?'} onConfirm={() => onDelete(index)}>
                    <Button shape={'circle'}>
                      <DeleteFilled />
                    </Button>
                  </Popconfirm>
                  <Button
                    shape={'circle'}
                    onClick={() => onEdit(index)}
                    style={{ marginLeft: '10px' }}
                  >
                    <EditFilled />
                  </Button>
                </>
              );
            },
          },
        ]}
        dataSource={k8sCluster?.list || []}
        footer={() => (
          <div style={{ textAlign: 'center' }}>
            <Button onClick={onClickBtnCreate}>
              <FileAddFilled />
              新增
            </Button>
          </div>
        )}
      />

      <ModalCreateCluster
        visible={visibleModalCreateCluster}
        onCancel={visibleModalCreateClusterAct.setFalse}
        onOk={onCreate}
      />

      <ModalEditCluster
        visible={visibleModalEditCluster}
        onCancel={() => {
          visibleModalEditClusterAct.setFalse();
          setCurrentEdit(-1);
        }}
        index={currentEdit}
        cluster={currentEdit > -1 ? k8sCluster.list[currentEdit] : null}
        onOk={onUpdate}
      />
    </SettingBlock>
  );
}