feat: add stdin and env filed in the plugin collect page

web/package-lock.json

@@ -2543,6 +2543,28 @@
         "@types/react": "*"
       }
     },
+    "@umijs/hooks": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npm.taobao.org/@umijs/hooks/download/@umijs/hooks-1.9.2.tgz",
+      "integrity": "sha1-ZHvsyG1OaqlveDce2rmHtTOEW4s=",
+      "requires": {
+        "@umijs/use-request": "^1.4.2",
+        "intersection-observer": "^0.7.0",
+        "lodash.isequal": "^4.5.0",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.0.0"
+      }
+    },
+    "@umijs/use-request": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npm.taobao.org/@umijs/use-request/download/@umijs/use-request-1.4.2.tgz",
+      "integrity": "sha1-hnNDXT0MQgUGK3TjXz+w0lOXwhM=",
+      "requires": {
+        "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1",
+        "umi-request": "^1.2.17"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.8.5",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
@@ -2741,6 +2763,11 @@
         "negotiator": "0.6.2"
       }
     },
+    "ace-builds": {
+      "version": "1.4.11",
+      "resolved": "https://registry.npm.taobao.org/ace-builds/download/ace-builds-1.4.11.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Face-builds%2Fdownload%2Face-builds-1.4.11.tgz",
+      "integrity": "sha1-sfGaiRr87x0mUiRzCCuvgAZ+hV8="
+    },
     "acorn": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.2.1.tgz",
@@ -5139,6 +5166,11 @@
         }
       }
     },
+    "diff-match-patch": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npm.taobao.org/diff-match-patch/download/diff-match-patch-1.0.5.tgz",
+      "integrity": "sha1-q7WE1fEM0Rlt/FWqA3AVkq4/ezc="
+    },
     "diffie-hellman": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@@ -8025,6 +8057,11 @@
         "ipaddr.js": "^1.9.0"
       }
     },
+    "intersection-observer": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npm.taobao.org/intersection-observer/download/intersection-observer-0.7.0.tgz",
+      "integrity": "sha1-7ha+6XjbU1FurS8KgVSwm0ALvck="
+    },
     "intl-format-cache": {
       "version": "4.2.22",
       "resolved": "http://registry.npm.xiaojukeji.com/intl-format-cache/download/intl-format-cache-4.2.22.tgz",
@@ -8715,6 +8752,11 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npm.taobao.org/lodash.get/download/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+    },
     "lodash.isarguments": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
@@ -8725,6 +8767,11 @@
       "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
       "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U="
     },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npm.taobao.org/lodash.isequal/download/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
     "lodash.keys": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
@@ -11358,6 +11405,18 @@
         "scheduler": "^0.13.6"
       }
     },
+    "react-ace": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npm.taobao.org/react-ace/download/react-ace-8.1.0.tgz",
+      "integrity": "sha1-ZoCsy3MGoYUObvQ3CgDwAH6tyLQ=",
+      "requires": {
+        "ace-builds": "^1.4.6",
+        "diff-match-patch": "^1.0.4",
+        "lodash.get": "^4.4.2",
+        "lodash.isequal": "^4.5.0",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-addons-update": {
       "version": "15.6.2",
       "resolved": "https://registry.npmjs.org/react-addons-update/-/react-addons-update-15.6.2.tgz",
@@ -12274,6 +12333,11 @@
         "ajv-keywords": "^3.1.0"
       }
     },
+    "screenfull": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npm.taobao.org/screenfull/download/screenfull-5.0.2.tgz",
+      "integrity": "sha1-uazc8exnapSGdN9c0P9muQKwvtc="
+    },
     "select": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
@@ -13476,6 +13540,22 @@
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz",
       "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw=="
     },
+    "umi-request": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npm.taobao.org/umi-request/download/umi-request-1.3.3.tgz?cache=0&sync_timestamp=1590568018088&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fumi-request%2Fdownload%2Fumi-request-1.3.3.tgz",
+      "integrity": "sha1-nwU6O798jol2XKjjwBGPHLhIHxE=",
+      "requires": {
+        "isomorphic-fetch": "^2.2.1",
+        "qs": "^6.9.1"
+      },
+      "dependencies": {
+        "qs": {
+          "version": "6.9.4",
+          "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.9.4.tgz",
+          "integrity": "sha1-kJCykNH5FyjTwi5UhDykSupatoc="
+        }
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",

web/package.json

@@ -16,6 +16,8 @@
   "dependencies": {
     "@d3-charts/ts-graph": "~0.1.15",
     "@hot-loader/react-dom": "^16.8.6",
+    "@umijs/hooks": "^1.9.2",
+    "ace-builds": "^1.4.11",
     "antd": "^3.24.0",
     "classnames": "^2.2.6",
     "color": "^3.1.0",
@@ -31,6 +33,7 @@
     "query-string": "^5.0.1",
     "rc-notification": "^3.3.1",
     "react": "16.x",
+    "react-ace": "^8.1.0",
     "react-addons-update": "^15.6.2",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dnd": "^7.4.5",

web/src/components/AceEditor/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import AceEditor from 'react-ace';
+import 'ace-builds/src-noconflict/mode-sh';
+import 'ace-builds/src-noconflict/theme-monokai';
+
+interface Props {
+  style: any;
+  placeholder: string;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export default function Editor(props: Props) {
+  return (
+    <AceEditor
+      placeholder={props.placeholder === undefined ? 'Placeholder Text' : props.placeholder}
+      style={{ width: '100%', ...props.style }}
+      mode="sh"
+      theme="monokai"
+      name="blah2"
+      fontSize={14}
+      showPrintMargin={false}
+      showGutter
+      highlightActiveLine
+      setOptions={{
+        enableBasicAutocompletion: true,
+        enableLiveAutocompletion: true,
+        enableSnippets: true,
+        showLineNumbers: true,
+        tabSize: 2,
+      }}
+      value={props.value}
+      onChange={(newValue) => {
+        props.onChange(newValue);
+      }}
+    />
+  )
+}

web/src/locales/en.ts

@@ -241,6 +241,7 @@ export default {
   'collect.plugin.filepath': 'FilePath',
   'collect.plugin.params': 'Params',
   'collect.plugin.filepath.placeholder': 'The absolute path of the plugin',
+  'collect.plugin.env': 'ENV',
 
   'graph.subscribe': 'Subscribe',
   'graph.subscribe.node': 'Node',

web/src/locales/zh.ts

@@ -242,6 +242,7 @@ export default {
   'collect.plugin.filepath': '文件路径',
   'collect.plugin.params': '参数',
   'collect.plugin.filepath.placeholder': '待执行插件所在的绝对路径',
+  'collect.plugin.env': '环境变量',
 
   'graph.subscribe': '订阅图表',
   'graph.subscribe.node': '所属节点',

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

@@ -1,9 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import _ from 'lodash';
-import { Button, Form, Select, Input, TreeSelect } from 'antd';
+import { Button, Form, Select, Input, TreeSelect, Icon, Row, Col} from 'antd';
+import { useDynamicList } from '@umijs/hooks'
 import { injectIntl, FormattedMessage } from 'react-intl';
 import { renderTreeNodes } from '@cpts/Layout/utils';
+import AceEditor from '@cpts/AceEditor';
 import { nameRule, interval } from '../config';
 
 
@@ -27,6 +29,26 @@ const CollectForm = (props: any) => {
   const initialValues = getInitialValues(props.initialValues);
   const { getFieldProps, getFieldDecorator } = props.form;
 
+  if (initialValues.env) {
+    try {
+      const env = JSON.parse(initialValues.env);
+      initialValues.env = _.map(env, (value, name) => {
+        return {
+          name, value,
+        };
+      });
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
+  const { list, remove, getKey, push, resetList } = useDynamicList(initialValues.env);
+
+
+  useEffect(() => {
+    resetList(initialValues.env);
+  }, [JSON.stringify(initialValues.env)]);
+
   getFieldDecorator('collect_type', {
     initialValue: initialValues.collect_type,
   });
@@ -41,6 +63,14 @@ const CollectForm = (props: any) => {
         return;
       }
       setSubmitLoading(true);
+      if (values.env) {
+        const { env } = values;
+        const newEnv: any = {};
+        _.forEach(env, (item) => {
+          newEnv[item.name] = item.value;
+        });
+        values.env = JSON.stringify(newEnv);
+      }
       props.onSubmit(values).catch(() => {
         setSubmitLoading(false);
       });
@@ -104,6 +134,57 @@ const CollectForm = (props: any) => {
           style={{ width: 500 }}
         />
       </FormItem>
+      <FormItem {...formItemLayout} label={<FormattedMessage id="collect.plugin.env"/>}>
+        {
+          _.map(list, (item: any, index: number) => {
+            return (
+              <Row key={getKey(index)} gutter={10}>
+                <Col span={9}>
+                  <FormItem>
+                    {getFieldDecorator(`env[${getKey(index)}].name`, { initialValue: item.name, rules: [{ required: true }] })(
+                      <Input placeholder="field name" style={{ width: '100%' }} />,
+                    )}
+                  </FormItem>
+                </Col>
+                <Col span={10}>
+                  <FormItem>
+                    {getFieldDecorator(`env[${getKey(index)}].value`, { initialValue: item.value, rules: [{ required: true }] })(
+                      <Input placeholder="field value" style={{ width: '100%' }} />,
+                    )}
+                  </FormItem>
+                </Col>
+                <Col span={5}>
+                  {list.length > 0 && (
+                    <Icon
+                      type="minus-circle-o"
+                      style={{ marginLeft: 8 }}
+                      onClick={() => {
+                        remove(index);
+                      }}
+                    />
+                  )}
+                </Col>
+              </Row>
+            );
+          })
+        }
+        <Icon
+          type="plus-circle-o"
+          style={{ marginLeft: 8 }}
+          onClick={() => {
+            push({ name: '', value: '' });
+          }}
+        />
+      </FormItem>
+      <FormItem {...formItemLayout} label="Stdin">
+        <AceEditor
+          placeholder=""
+          {...getFieldProps('stdin', {
+            initialValue: initialValues.stdin,
+          })}
+          style={{ width: 500, height: 200 }}
+        />
+      </FormItem>
       <FormItem {...formItemLayout} label={<FormattedMessage id="collect.common.step" />}>
         <Select
           size="default"