fe/src/components/DeviceSelect/HostSelect/index.tsx at 30e81336bd3388218e8c0b56e3aff923829978b3 · n9e/fe · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import React from 'react';
import { Form, Card, Space, Select } from 'antd';
import { PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import _ from 'lodash';
import ValuesSelect from './ValuesSelect';
import Preview from './Preview';
import '../locale';

interface Props {
  prefixName: (string | number)[];
}

export default function index(props: Props) {
  const { t } = useTranslation('DeviceSelect');
  const queryKeyOptions = ['all_hosts', 'group_ids', 'tags', 'hosts'];
  const { prefixName } = props;
  const form = Form.useFormInstance();
  const prefixNameValues = Form.useWatch(prefixName);

  return (
    <div>
      <Form.List
        name={prefixName}
        initialValue={[
          {
            key: 'all_hosts',
          },
        ]}
      >
        {(fields, { add, remove }) => (
          <Card
            title={
              <Space>
                <span>{t('host.title')}</span>
                <PlusCircleOutlined
                  onClick={() =>
                    add({
                      key: 'group_ids',
                      op: '==',
                      values: [],
                    })
                  }
                />
              </Space>
            }
            size='small'
          >
            {fields.map((field, idx) => {
              const queryKey = form.getFieldValue([...prefixName, field.name, 'key']);
              const queryOp = form.getFieldValue([...prefixName, field.name, 'op']);
              return (
                <div key={field.key}>
                  <Space align='baseline'>
                    {idx > 0 && <div className='alert-rule-host-condition-tips'>{t('host.and')}</div>}
                    <Form.Item {...field} name={[field.name, 'key']} rules={[{ required: true, message: 'Missing key' }]}>
                      <Select
                        style={{ minWidth: idx > 0 ? 100 : 142 }}
                        onChange={() => {
                          const values = _.cloneDeep(form.getFieldsValue());
                          _.set(values, [...prefixName, field.name, 'op'], '==');
                          _.set(values, [...prefixName, field.name, 'values'], undefined);
                          form.setFieldsValue(values);
                        }}
                      >
                        {queryKeyOptions.map((item) => (
                          <Select.Option key={item} value={item}>
                            {t(`host.key.${item}`)}
                          </Select.Option>
                        ))}
                      </Select>
                    </Form.Item>
                    {queryKey !== 'all_hosts' && (
                      <Space align='baseline'>
                        <Form.Item {...field} name={[field.name, 'op']} rules={[{ required: true, message: 'Missing op' }]}>
                          <Select
                            style={{ minWidth: 60 }}
                            options={_.concat(
                              [
                                {
                                  value: '==',
                                  label: '==',
                                },
                                {
                                  value: '!=',
                                  label: '!=',
                                },
                              ],
                              queryKey === 'hosts'
                                ? [
                                    {
                                      value: '=~',
                                      label: '=~',
                                    },
                                    {
                                      value: '!~',
                                      label: '!~',
                                    },
                                  ]
                                : [],
                            )}
                            onChange={() => {
                              const values = _.cloneDeep(form.getFieldsValue());
                              _.set(values, [...prefixName, field.name, 'values'], undefined);
                              form.setFieldsValue(values);
                            }}
                          />
                        </Form.Item>
                        <ValuesSelect queryKey={queryKey} queryOp={queryOp} field={field} />
                      </Space>
                    )}
                    <MinusCircleOutlined onClick={() => remove(field.name)} />
                  </Space>
                </div>
              );
            })}
            <Preview queries={prefixNameValues} />
          </Card>
        )}
      </Form.List>
    </div>
  );
}