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

2020-05-29 17:33:30 +08:00 · 2020-05-29 17:33:30 +08:00 · e66c14b086
parent 6b646e3510
commit e66c14b086
6 changed files with 206 additions and 2 deletions
--- a/web/package-lock.json
+++ b/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",
--- a/web/package.json
+++ b/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",
--- a/web/src/components/AceEditor/index.tsx
+++ b/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);
+      }}
+    />
+  )
+}
--- a/web/src/locales/en.ts
+++ b/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',
--- a/web/src/locales/zh.ts
+++ b/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': '所属节点',
--- a/web/src/pages/Monitor/Collect/CollectForm/PLUGINForm.tsx
+++ b/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"