feat: add plugin collect page

web/src/locales/en.ts

@@ -236,6 +236,12 @@ export default {
   'collect.proc.type.name': 'Process Name',
   'collect.proc.type.input.pattern.msg': 'Cannot contain Chinese',
 
+  'collect.plugin': 'Plugin',
+  'collect.plugin.name.placeholder': 'Description of the collection',
+  'collect.plugin.filepath': 'FilePath',
+  'collect.plugin.params': 'Params',
+  'collect.plugin.filepath.placeholder': 'The absolute path of the plugin',
+
   'graph.subscribe': 'Subscribe',
   'graph.subscribe.node': 'Node',
   'graph.subscribe.screen': 'Screen',

web/src/locales/zh.ts

@@ -237,6 +237,12 @@ export default {
   'collect.proc.type.name': '进程名',
   'collect.proc.type.input.pattern.msg': '不能包含中文',
 
+  'collect.plugin': '插件',
+  'collect.plugin.name.placeholder': '对采集配置的说明',
+  'collect.plugin.filepath': '文件路径',
+  'collect.plugin.params': '参数',
+  'collect.plugin.filepath.placeholder': '待执行插件所在的绝对路径',
+
   'graph.subscribe': '订阅图表',
   'graph.subscribe.node': '所属节点',
   'graph.subscribe.screen': '选择大盘',

web/src/pages/Monitor/Collect/CollectForm/PLUGINForm.tsx

+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import _ from 'lodash';
+import { Button, Form, Select, Input, TreeSelect } from 'antd';
+import { injectIntl, FormattedMessage } from 'react-intl';
+import { renderTreeNodes } from '@cpts/Layout/utils';
+import { nameRule, interval } from '../config';
+
+
+const FormItem = Form.Item;
+const { Option } = Select;
+const formItemLayout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 14 },
+};
+const defaultFormData = {
+  collect_type: 'plugin',
+  timeout: 3,
+  step: 10,
+};
+
+const getInitialValues = (initialValues: any) => {
+  return _.assignIn({}, defaultFormData, _.cloneDeep(initialValues));
+}
+
+const CollectForm = (props: any) => {
+  const initialValues = getInitialValues(props.initialValues);
+  const { getFieldProps, getFieldDecorator } = props.form;
+
+  getFieldDecorator('collect_type', {
+    initialValue: initialValues.collect_type,
+  });
+
+  const [submitLoading, setSubmitLoading] = useState(false);
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault();
+    props.form.validateFields((errors: any, values: any) => {
+      if (errors) {
+        console.error(errors);
+        return;
+      }
+      setSubmitLoading(true);
+      props.onSubmit(values).catch(() => {
+        setSubmitLoading(false);
+      });
+    });
+  }
+
+  return (
+    <Form layout="horizontal" onSubmit={handleSubmit}>
+      <FormItem
+        {...formItemLayout}
+        label={<FormattedMessage id="collect.common.node" />}
+      >
+        {
+          getFieldDecorator('nid', {
+            initialValue: initialValues.nid,
+            rules: [{ required: true }],
+          })(
+            <TreeSelect
+              style={{ width: 500 }}
+              showSearch
+              allowClear
+              treeDefaultExpandAll
+              treeNodeFilterProp="title"
+              treeNodeLabelProp="path"
+              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+            >
+              {renderTreeNodes(props.treeData)}
+            </TreeSelect>,
+          )
+        }
+      </FormItem>
+      <FormItem {...formItemLayout} label={<FormattedMessage id="collect.common.name" />}>
+        <Input
+          {...getFieldProps('name', {
+            initialValue: initialValues.name,
+            rules: [
+              { required: true },
+              nameRule,
+            ],
+          })}
+          size="default"
+          style={{ width: 500 }}
+          placeholder={props.intl.formatMessage({ id: 'collect.plugin.name.placeholder' })}
+        />
+      </FormItem>
+      <FormItem {...formItemLayout} label={<FormattedMessage id="collect.plugin.filepath" />}>
+        <Input
+          {...getFieldProps('file_path', {
+            initialValue: initialValues.file_path,
+            rules: [{ required: true }]
+          })}
+          style={{ width: 500 }}
+          placeholder={props.intl.formatMessage({ id: 'collect.plugin.filepath.placeholder' })}
+        />
+      </FormItem>
+      <FormItem {...formItemLayout} label={<FormattedMessage id="collect.plugin.params" />}>
+        <Input
+          {...getFieldProps('params', {
+            initialValue: initialValues.params,
+          })}
+          style={{ width: 500 }}
+        />
+      </FormItem>
+      <FormItem {...formItemLayout} label={<FormattedMessage id="collect.common.step" />}>
+        <Select
+          size="default"
+          style={{ width: 100 }}
+          {...getFieldProps('step', {
+            initialValue: initialValues.step,
+            rules: [
+              { required: true },
+            ],
+          })}
+        >
+          {
+            _.map(interval, item => <Option key={item} value={item}>{item}</Option>)
+          }
+        </Select> {<FormattedMessage id="collect.common.step.unit" />}
+      </FormItem>
+      <FormItem {...formItemLayout} label={<FormattedMessage id="collect.common.note" />}>
+        <Input
+          type="textarea"
+          placeholder=""
+          {...getFieldProps('comment', {
+            initialValue: initialValues.comment,
+          })}
+          style={{ width: 500 }}
+        />
+      </FormItem>
+      <FormItem wrapperCol={{ offset: 6 }} style={{ marginTop: 24 }}>
+        <Button type="primary" htmlType="submit" loading={submitLoading}>{<FormattedMessage id="form.submit" />}</Button>
+        <Button
+          style={{ marginLeft: 8 }}
+        >
+          <Link to={{ pathname: '/collect' }}>{<FormattedMessage id="form.goback" />}</Link>
+        </Button>
+      </FormItem>
+    </Form>
+  );
+}
+
+export default Form.create()(injectIntl(CollectForm));

web/src/pages/Monitor/Collect/CollectForm/PORTForm.tsx

@@ -61,7 +61,7 @@ class CollectForm extends Component<Props & WrappedComponentProps> {
   render() {
     const { form } = this.props;
     const initialValues = this.getInitialValues();
-    const { getFieldDecorator, getFieldProps } = form!;
+    const { getFieldDecorator, getFieldProps } = form! as any;
     const service = _.chain(initialValues.tags).split(',').filter(item => item.indexOf('service=') === 0).head().split('service=').last().value();
     getFieldProps('collect_type', {
       initialValue: initialValues.collect_type,

web/src/pages/Monitor/Collect/CollectForm/index.tsx

 import LOGForm from './LOGForm';
 import PORTForm from './PORTForm';
 import PROCForm from './PROCForm';
+import PLUGINForm from './PLUGINForm';
 
 export default {
   log: LOGForm,
   port: PORTForm,
   proc: PROCForm,
+  plugin: PLUGINForm,
 };

web/src/pages/Monitor/Collect/config.tsx

@@ -2,6 +2,7 @@ export const typeMap: any = {
   log: '日志',
   port: '端口',
   proc: '进程',
+  plugin: '插件',
 };
 export const interval = [10, 30, 60, 120, 300, 600, 1800, 3600];
 export const nameRule = {