diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index bbabfe678..a48e9021c 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -405,12 +405,19 @@
   "SHENYU.DISCOVERY.SELECTOR.CONFIGURATION": "Discovery Configuration",
   "SHENYU.DISCOVERY.SELECTOR.UPSTREAM": "Discovery Upstreams",
   "SHENYU.DISCOVERY.SELECTOR.UPSTREAM.ADD": "Add Discovery Upstream",
-  "SHENYU.DISCOVERY.SELECTOR.UPSTREAM.DELETE": "Sure to delete?",
+  "SHENYU.DISCOVERY.SELECTOR.UPSTREAM.DELETE.CONFIRM": "Sure to delete?",
+  "SHENYU.DISCOVERY.SELECTOR.UPSTREAM.CANCEL.CONFIRM": "Sure to cancel?",
   "SHENYU.DISCOVERY.SELECTOR.UPSTREAM.OPERATION": "operation",
+  "SHENYU.DISCOVERY.SELECTOR.UPSTREAM.CANCEL": "Cancel",
+  "SHENYU.DISCOVERY.SELECTOR.UPSTREAM.SAVE": "Save",
+  "SHENYU.DISCOVERY.SELECTOR.UPSTREAM.EDIT": "Edit",
   "SHENYU.DISCOVERY.SELECTOR.UPSTREAM.DateCreated": "DateCreated",
   "SHENYU.DISCOVERY.SELECTOR.UPSTREAM.DateUpdated": "DateUpdated",
   "SHENYU.DISCOVERY.SELECTOR.CONFIG.BASIC": "Basic Config",
   "SHENYU.DISCOVERY.SELECTOR.CONFIG.DISCOVERY": "Discovery Config",
+  "SHENYU.DISCOVERY.SELECTOR.CONFIG.IMPORT": "Import Background Discovery Config",
+  "SHENYU.DISCOVERY.SELECTOR.CONFIG.IMPORT.CONFIRM": "Configuration Import Confirmation",
   "SHENYU.DISCOVERY.SELECTOR.DELETE.CONFIRM": "Are you sure to delete this selector?",
+  "SHENYU.DISCOVERY.SELECTOR.CONFIG.IMPORT.SURE": "Import",
   "SHENYU.COMMON.REFRESH": "Refresh"
-}
\ No newline at end of file
+}
diff --git a/src/locales/zh-CN.json b/src/locales/zh-CN.json
index e457a42a3..369f99133 100644
--- a/src/locales/zh-CN.json
+++ b/src/locales/zh-CN.json
@@ -408,12 +408,19 @@
   "SHENYU.DISCOVERY.SELECTOR.CONFIGURATION": "服务发现配置",
   "SHENYU.DISCOVERY.SELECTOR.UPSTREAM": "服务下游列表",
   "SHENYU.DISCOVERY.SELECTOR.UPSTREAM.ADD": "添加下游服务",
-  "SHENYU.DISCOVERY.SELECTOR.UPSTREAM.DELETE": "确定删除吗",
+  "SHENYU.DISCOVERY.SELECTOR.UPSTREAM.DELETE.CONFIRM": "确定删除吗",
+  "SHENYU.DISCOVERY.SELECTOR.UPSTREAM.CANCEL.CONFIRM": "确定取消吗",
   "SHENYU.DISCOVERY.SELECTOR.UPSTREAM.OPERATION": "操作",
+  "SHENYU.DISCOVERY.SELECTOR.UPSTREAM.CANCEL": "取消",
+  "SHENYU.DISCOVERY.SELECTOR.UPSTREAM.SAVE": "保存",
+  "SHENYU.DISCOVERY.SELECTOR.UPSTREAM.EDIT": "编辑",
   "SHENYU.DISCOVERY.SELECTOR.UPSTREAM.DateCreated": "创建时间",
   "SHENYU.DISCOVERY.SELECTOR.UPSTREAM.DateUpdated": "更新时间",
   "SHENYU.DISCOVERY.SELECTOR.CONFIG.BASIC": "基本配置",
   "SHENYU.DISCOVERY.SELECTOR.CONFIG.DISCOVERY": "服务发现",
+  "SHENYU.DISCOVERY.SELECTOR.CONFIG.IMPORT": "导入后台服务发现配置",
+  "SHENYU.DISCOVERY.SELECTOR.CONFIG.IMPORT.CONFIRM": "后台配置导入确认",
+  "SHENYU.DISCOVERY.SELECTOR.CONFIG.IMPORT.SURE": "导入",
   "SHENYU.DISCOVERY.SELECTOR.DELETE.CONFIRM": "确定删除该选择器吗?",
   "SHENYU.COMMON.REFRESH": "刷新"
 }
diff --git a/src/models/common.js b/src/models/common.js
index 1c392de78..db1ae7f0a 100644
--- a/src/models/common.js
+++ b/src/models/common.js
@@ -109,7 +109,8 @@ export default {
       const json = yield call(addSelector, payload);
       if (json.code === 200) {
         message.success(getIntlContent('SHENYU.COMMON.RESPONSE.ADD.SUCCESS'));
-        callback();
+        const selectorId = json.data;
+        callback(selectorId);
         yield put({ type: "reload", fetchValue });
       } else {
         message.warn(json.message);
diff --git a/src/models/discovery.js b/src/models/discovery.js
index fc1980696..0eed512ac 100644
--- a/src/models/discovery.js
+++ b/src/models/discovery.js
@@ -25,8 +25,9 @@ import {
   updateProxySelector,
   getDiscovery,
   refreshProxySelector,
-  deleteDiscovery
-
+  deleteDiscovery,
+  bindingSelector,
+  updateDiscoveryUpstream
 } from "../services/api";
 import {getIntlContent} from "../utils/IntlUtils";
 
@@ -35,7 +36,7 @@ export default {
 
   state: {
     typeEnums: [],
-    selectorList: [],
+    proxySelectorList: [],
     chosenType: '',
     totalPage: 0,
     currentPage: 1,
@@ -43,7 +44,7 @@ export default {
   },
 
   effects: {
-    * fetchSelector(params, {call, put}) {
+    * fetchProxySelectors(params, {call, put}) {
       const {payload} = params;
       const json = yield call(fetchProxySelector, payload);
       if (json.code === 200) {
@@ -80,6 +81,7 @@ export default {
         message.warn(json.message);
       }
     },
+
     * delete(params, {call, put}) {
       const {payload, fetchValue} = params;
       const { list } = payload;
@@ -92,6 +94,7 @@ export default {
         message.warn(json.message);
       }
     },
+
     * update(params, {call, put}) {
       const {payload, callback, fetchValue} = params;
       const json = yield call(updateProxySelector, payload);
@@ -103,11 +106,12 @@ export default {
         message.warn(json.message);
       }
     },
+
     * reload(params, {put}) {
       const {fetchValue} = params;
       const {name = '', currentPage, pageSize} = fetchValue;
       const payload = {name, currentPage, pageSize};
-      yield put({type: "fetchSelector", payload});
+      yield put({type: "fetchProxySelectors", payload});
     },
 
 
@@ -116,9 +120,9 @@ export default {
       const json = yield call(postDiscoveryInsertOrUpdate, payload);
       if (json.code === 200) {
         message.success(getIntlContent('SHENYU.COMMON.RESPONSE.CONFIGURATION.SUCCESS'));
-        const { data } = json;
+        const discoveryConfigData = json.data;
         if (callback) {
-          callback(data);
+          callback(discoveryConfigData);
         }
       } else {
         message.warn(json.message);
@@ -162,6 +166,27 @@ export default {
       }
     },
 
+    * bindSelector(params, {call}) {
+      const {payload} = params;
+      const json = yield call(bindingSelector, payload);
+      if (json.code === 200) {
+        // message.success(getIntlContent('SHENYU.COMMON.RESPONSE.ADD.SUCCESS'));
+        // callback();
+      } else {
+        message.warn(json.message);
+      }
+    },
+
+    * updateDiscoveryUpstream(params, {call}) {
+      const { discoveryHandlerId, upstreams } = params.payload;
+      const json = yield call(updateDiscoveryUpstream, discoveryHandlerId, upstreams);
+      if (json.code === 200) {
+        // message.success(getIntlContent('SHENYU.COMMON.RESPONSE.UPDATE.SUCCESS'));
+      } else {
+        message.warn(json.message);
+      }
+    },
+
   },
 
   reducers: {
@@ -169,7 +194,7 @@ export default {
       return {
         ...state,
         totalPage: payload.total,
-        selectorList: payload.dataList,
+        proxySelectorList: payload.dataList,
       };
     },
 
diff --git a/src/routes/Plugin/Common/Selector.js b/src/routes/Plugin/Common/Selector.js
index 40e334138..021d2a09b 100644
--- a/src/routes/Plugin/Common/Selector.js
+++ b/src/routes/Plugin/Common/Selector.js
@@ -32,15 +32,19 @@ import {
   Icon,
   InputNumber,
   DatePicker,
-  TimePicker
+  TimePicker, Tabs, Divider
 } from "antd";
 import { connect } from "dva";
 import classnames from "classnames";
 import styles from "../index.less";
 import { getIntlContent } from "../../../utils/IntlUtils";
 import SelectorCopy from "./SelectorCopy";
+import { findKeyByValue } from "../../../utils/utils";
+import DiscoveryImportModal from "../Discovery/DiscoveryImportModal";
+import EditableFormTable from "../Discovery/DiscoveryUpstreamTable.js";
 
 const { Item } = Form;
+const { TabPane } = Tabs;
 const { Option } = Select;
 
 const formItemLayout = {
@@ -54,10 +58,11 @@ const formCheckLayout = {
 
 let id = 0;
 
-@connect(({ pluginHandle, global, shenyuDict }) => ({
+@connect(({ pluginHandle, global, shenyuDict, discovery }) => ({
   pluginHandle,
   platform: global.platform,
-  shenyuDict
+  shenyuDict,
+  discovery
 }))
 class AddModal extends Component {
   constructor(props) {
@@ -75,6 +80,7 @@ class AddModal extends Component {
     }
 
     const { divideUpstreams = [], gray = false, serviceId = "" } = data;
+    const { discoveryUpstreams = [], isDiscovery, isAdd = true, discoveryConfig = {} } = this.props;
 
     if (pluginId === "8") {
       id = divideUpstreams.length;
@@ -85,18 +91,36 @@ class AddModal extends Component {
       gray,
       serviceId,
       divideUpstreams,
-
-      visible: false
+      visible: false,
+      pluginHandleList: [],
+      upstreams: discoveryUpstreams,
+      recordCount: discoveryUpstreams ? discoveryUpstreams.length : 0,
+      discoveryHandler: null,
+      defaultValueList: null,
+      configPropsJson: {},
+      selectedDiscoveryValue : 'local',
+      showDiscoveryImportModal: false,
+      importedDiscoveryId: ''
     };
 
     this.initSelectorCondition(props);
-    this.initDics();
+
+    if (isDiscovery && !isAdd){
+      this.state.configPropsJson = JSON.parse(discoveryConfig.props);
+      this.state.selectedDiscoveryValue = discoveryConfig.discoveryType;
+    }
   }
 
   componentDidMount() {
-    const { dispatch, pluginId, handle, multiSelectorHandle } = this.props;
+    const { dispatch, pluginId, handle, multiSelectorHandle, isDiscovery } = this.props;
     this.setState({ pluginHandleList: [] });
     let type = 1;
+    this.initDics();
+
+    dispatch({
+      type: "discovery/fetchEnumType"
+    })
+
     dispatch({
       type: "pluginHandle/fetchByPluginId",
       payload: {
@@ -106,6 +130,20 @@ class AddModal extends Component {
         isHandleArray: multiSelectorHandle,
         callBack: pluginHandles => {
           this.setPluginHandleList(pluginHandles);
+          if (isDiscovery && Object.keys(pluginHandles).length > 0) {
+            const filteredArray = pluginHandles[0].filter(item => item.field !== 'discoveryHandler');
+
+            const handlerArray = pluginHandles[0].filter(item => item.field === 'discoveryHandler');
+            this.setState({discoveryHandler: handlerArray});
+
+            pluginHandles[0] = filteredArray;
+            this.setState({ pluginHandleList: pluginHandles });
+
+            if (handlerArray.length !== 0) {
+              let defaultValue = handlerArray[0].defaultValue;
+              this.setState({ defaultValueList: defaultValue.split(",")  });
+            }
+          }
         }
       }
     });
@@ -137,16 +175,22 @@ class AddModal extends Component {
     this.initDic("operator");
     this.initDic("matchMode");
     this.initDic("paramType");
+    this.initDic("discoveryMode");
   };
 
   initDic = type => {
-    const { dispatch } = this.props;
+    const { dispatch, isAdd = true} = this.props;
     dispatch({
       type: "shenyuDict/fetchByType",
       payload: {
         type,
         callBack: dics => {
           this.state[`${type}Dics`] = dics;
+          if (type === "discoveryMode" && isAdd ) {
+            let configProps = dics.filter(item => item.dictName === 'zookeeper');
+            let propsEntries = JSON.parse(configProps[0]?.dictValue || "{}");
+            this.setState({configPropsJson: propsEntries});
+          }
         }
       }
     });
@@ -187,8 +231,8 @@ class AddModal extends Component {
 
   handleSubmit = e => {
     e.preventDefault();
-    const { form, handleOk, multiSelectorHandle, pluginId } = this.props;
-    const { selectorConditions, selectValue, pluginHandleList } = this.state;
+    const { form, handleOk, multiSelectorHandle, pluginId, isDiscovery } = this.props;
+    const { selectorConditions, selectValue, pluginHandleList, defaultValueList, configPropsJson, upstreams, importedDiscoveryId } = this.state;
     let handle = [];
 
     form.validateFieldsAndScroll((err, values) => {
@@ -196,38 +240,67 @@ class AddModal extends Component {
         const mySubmit =
           selectValue !== "0" && this.checkConditions(selectorConditions);
         if (mySubmit || selectValue === "0") {
-          pluginHandleList.forEach((handleList, index) => {
-            handle[index] = {};
-            handleList.forEach(item => {
-              if (pluginId === "8") {
-                const { keys, divideUpstreams } = values;
-                const data = {
-                  [item.field]: values[item.field],
-                  gray: values.gray
-                };
-
-                if (Array.isArray(divideUpstreams) && divideUpstreams.length) {
-                  data.divideUpstreams = keys.map(key => divideUpstreams[key]);
+          if ( isDiscovery ) {
+            // The discoveryProps refer to the attributes corresponding to each registration center mode
+            const discoveryPropsJson = {};
+            Object.entries(configPropsJson).forEach(([key]) => {
+              discoveryPropsJson[key] = form.getFieldValue(key);
+            });
+            const discoveryProps = JSON.stringify(discoveryPropsJson);
+
+            // The handler refers to the url, status, weight, protocol, etc. of the discovery module.
+            let handler = {};
+            if ( defaultValueList !== null) {
+              defaultValueList.forEach(item => {
+                if ((values[item]) !== undefined){
+                  handler[values[item]] = item;
                 }
-                handle[index] = data;
-                delete values[item.field];
-                delete values.divideUpstreams;
-                delete values.gray;
-                delete values.key;
-              } else {
-                handle[index][item.field] = values[item.field + index];
-                delete values[item.field + index];
-              }
+              });
+            }
+            handler = JSON.stringify(handler);
+
+            handleOk({...values,
+              sort: Number(values.sort),
+              selectorConditions,
+              handler,
+              discoveryProps,
+              upstreams,
+              importedDiscoveryId});
+
+          } else {
+            pluginHandleList.forEach((handleList, index) => {
+              handle[index] = {};
+              handleList.forEach(item => {
+                if (pluginId === "8") {
+                  const {keys, divideUpstreams} = values;
+                  const data = {
+                    [item.field]: values[item.field],
+                    gray: values.gray
+                  };
+
+                  if (Array.isArray(divideUpstreams) && divideUpstreams.length) {
+                    data.divideUpstreams = keys.map(key => divideUpstreams[key]);
+                  }
+                  handle[index] = data;
+                  delete values[item.field];
+                  delete values.divideUpstreams;
+                  delete values.gray;
+                  delete values.key;
+                } else {
+                  handle[index][item.field] = values[item.field + index];
+                  delete values[item.field + index];
+                }
+              });
+            });
+            handleOk({
+              ...values,
+              handle: multiSelectorHandle
+                ? JSON.stringify(handle)
+                : JSON.stringify(handle[0]),
+              sort: Number(values.sort),
+              selectorConditions
             });
-          });
-          handleOk({
-            ...values,
-            handle: multiSelectorHandle
-              ? JSON.stringify(handle)
-              : JSON.stringify(handle[0]),
-            sort: Number(values.sort),
-            selectorConditions
-          });
+          }
         }
       }
     });
@@ -332,10 +405,15 @@ class AddModal extends Component {
     const {
       form: { getFieldDecorator, getFieldValue, setFieldsValue },
       multiSelectorHandle,
-      pluginId
+      pluginId,
+      isDiscovery
     } = this.props;
     const labelWidth = 75;
 
+    if (isDiscovery) {
+      return;
+    }
+
     if (pluginId === "8") {
       getFieldDecorator("keys", {
         initialValue: Array.from({
@@ -754,10 +832,43 @@ class AddModal extends Component {
     this.setState({ visible: false, selectValue: formData.type });
   };
 
+  handleImportDiscoveryConfig = configData => {
+    const { form } = this.props;
+    const {
+      type = '',
+      serverList = '',
+      id: discoveryId = '',
+      props = '{}'
+    } = configData || {};
+    const formData = {
+      selectedDiscoveryType: type,
+      serverList
+    };
+    this.setState(
+      { selectedDiscoveryValue: type, showDiscoveryImportModal: false, importedDiscoveryId: discoveryId },
+      () => {
+        form.setFieldsValue(formData);
+        this.state.configPropsJson = JSON.parse(props);
+      }
+    );
+  };
+
   onDealChange = (value, item) => {
     item.value = value;
   };
 
+  handleTableChange = (newData) => {
+    this.setState({ upstreams: newData });
+  };
+
+  handleCountChange = (newCount) => {
+    this.setState({ recordCount: newCount });
+  };
+
+  handleDiscoveryValueChange = (value) => {
+    this.setState({selectedDiscoveryValue: value})
+  }
+
   renderOperatorOptions = (operators, paramType) => {
     if (operators && operators instanceof Array) {
       let operatorsFil = operators.map(operate => {
@@ -856,9 +967,18 @@ class AddModal extends Component {
     }
   }
 
-  render() {
+  handleOptions() {
+    const { discovery } = this.props;
+    if (!discovery || !Array.isArray(discovery.typeEnums)) {
+      return [];
+    }
+    return discovery.typeEnums.map(type =>
+      <Option key={type} value={type.toString()}>{type.toString()}</Option>
+    )
+  }
+
+  renderBasicConfig = () => {
     let {
-      onCancel,
       form,
       name = "",
       platform,
@@ -882,278 +1002,514 @@ class AddModal extends Component {
 
     type = `${type.toString()}` || "1";
     let { selectorTypeEnums } = platform;
-
     const { getFieldDecorator } = form;
-
-    return (
-      <Modal
-        width='900px'
-        centered
-        title={getIntlContent("SHENYU.SELECTOR.NAME")}
-        visible
-        okText={getIntlContent("SHENYU.COMMON.SURE")}
-        cancelText={getIntlContent("SHENYU.COMMON.CALCEL")}
-        onOk={this.handleSubmit}
-        onCancel={onCancel}
-      >
-        <Form onSubmit={this.handleSubmit} className="login-form">
-          <Item
-            label={getIntlContent("SHENYU.PLUGIN.SELECTOR.LIST.COLUMN.NAME")}
-            {...formItemLayout}
-          >
-            {getFieldDecorator("name", {
-              rules: [
-                {
+    return(
+      <>
+        <Item
+          label={getIntlContent("SHENYU.PLUGIN.SELECTOR.LIST.COLUMN.NAME")}
+          {...formItemLayout}
+        >
+          {getFieldDecorator("name", {
+            rules: [
+              {
                   required: true,
                   message: getIntlContent("SHENYU.COMMON.INPUTNAME")
-                }
-              ],
-              initialValue: name
-            })(
-              <Input
-                allowClear
-                placeholder={getIntlContent(
-                  "SHENYU.PLUGIN.SELECTOR.LIST.COLUMN.NAME"
-                )}
-                addonAfter={
-                  <Button
-                    size="small"
-                    type="link"
-                    onClick={() => {
-                      this.setState({ visible: true });
-                    }}
-                  >
-                    {getIntlContent("SHENYU.SELECTOR.COPY")}
-                  </Button>
-                }
-              />
+              }
+            ],
+            initialValue: name
+        })(
+          <Input
+            allowClear
+            placeholder={getIntlContent(
+                "SHENYU.PLUGIN.SELECTOR.LIST.COLUMN.NAME"
             )}
-          </Item>
-          <SelectorCopy
-            visible={visible}
-            onOk={this.handleCopyData}
-            onCancel={() => {
-              this.setState({ visible: false });
-            }}
+            addonAfter={
+              <Button
+                size="small"
+                type="link"
+                onClick={() => {
+                    this.setState({ visible: true });
+                }}
+              >
+                {getIntlContent("SHENYU.SELECTOR.COPY")}
+              </Button>
+            }
           />
-          <Item
-            label={getIntlContent("SHENYU.COMMON.TYPE")}
-            {...formItemLayout}
-          >
-            {getFieldDecorator("type", {
+          )}
+        </Item>
+        <SelectorCopy
+          visible={visible}
+          onOk={this.handleCopyData}
+          onCancel={() => {
+              this.setState({ visible: false });
+          }}
+        />
+        <Item
+          label={getIntlContent("SHENYU.COMMON.TYPE")}
+          {...formItemLayout}
+        >
+          {getFieldDecorator("type", {
               rules: [
-                {
-                  required: true,
-                  message: getIntlContent("SHENYU.COMMON.INPUTTYPE")
-                }
+                  {
+                      required: true,
+                      message: getIntlContent("SHENYU.COMMON.INPUTTYPE")
+                  }
               ],
               initialValue: type
-            })(
-              <Select
-                placeholder={getIntlContent("SHENYU.COMMON.TYPE")}
-                onChange={value => this.getSelectValue(value)}
-              >
-                {selectorTypeEnums.map(item => {
-                  return (
-                    <Option key={item.code} value={item.code.toString()}>
-                      {getIntlContent(
-                        `SHENYU.COMMON.SELECTOR.TYPE.${item.name.toUpperCase()}`,
-                        item.name
-                      )}
-                    </Option>
-                  );
-                })}
-              </Select>
-            )}
-          </Item>
-          {selectValue !== "0" && (
-            <Fragment>
-              <Item
-                label={getIntlContent("SHENYU.COMMON.MATCHTYPE")}
-                {...formItemLayout}
-              >
-                {getFieldDecorator("matchMode", {
-                  rules: [
+          })(
+            <Select
+              placeholder={getIntlContent("SHENYU.COMMON.TYPE")}
+              onChange={value => this.getSelectValue(value)}
+            >
+              {selectorTypeEnums.map(item => {
+                return (
+                  <Option key={item.code} value={item.code.toString()}>
+                    {getIntlContent(
+                      `SHENYU.COMMON.SELECTOR.TYPE.${item.name.toUpperCase()}`,
+                      item.name
+                    )}
+                  </Option>
+                );
+              })}
+            </Select>
+          )}
+        </Item>
+        {selectValue !== "0" && (
+          <Fragment>
+            <Item
+              label={getIntlContent("SHENYU.COMMON.MATCHTYPE")}
+              {...formItemLayout}
+            >
+              {getFieldDecorator("matchMode", {
+                rules: [
                     {
-                      required: true,
-                      message: getIntlContent("SHENYU.COMMON.INPUTMATCHTYPE")
+                        required: true,
+                        message: getIntlContent("SHENYU.COMMON.INPUTMATCHTYPE")
                     }
-                  ],
-                  initialValue: `${matchMode}`
-                })(
-                  <Select
-                    placeholder={getIntlContent("SHENYU.COMMON.MATCHTYPE")}
-                  >
-                    {matchModeDics &&
-                      matchModeDics.map(item => {
-                        return (
-                          <Option key={item.dictValue} value={item.dictValue}>
-                            {item.dictName}
-                          </Option>
-                        );
-                      })}
-                  </Select>
-                )}
-              </Item>
-              <div className={styles.condition}>
-                <Item
-                  label={getIntlContent("SHENYU.COMMON.CONDITION")}
-                  required
-                  {...formItemLayout}
+                ],
+                initialValue: `${matchMode}`
+              })(
+                <Select
+                  placeholder={getIntlContent("SHENYU.COMMON.MATCHTYPE")}
                 >
-                  {selectorConditions.map((item, index) => {
-                    return (
-                      <Row key={index} gutter={8}>
-                        <Col span={5}>
-                          <Select
-                            onChange={value => {
+                  {matchModeDics &&
+                    matchModeDics.map(item => {
+                      return (
+                        <Option key={item.dictValue} value={item.dictValue}>
+                          {item.dictName}
+                        </Option>
+                      );
+                    })}
+                </Select>
+              )}
+            </Item>
+            <div className={styles.condition}>
+              <Item
+                label={getIntlContent("SHENYU.COMMON.CONDITION")}
+                required
+                {...formItemLayout}
+              >
+                {selectorConditions.map((item, index) => {
+                  return (
+                    <Row key={index} gutter={8}>
+                      <Col span={5}>
+                        <Select
+                          onChange={value => {
                               this.conditionChange(index, "paramType", value);
-                            }}
-                            value={item.paramType}
-                          >
-                            {this.renderParamTypeOptions(paramTypeDics)}
-                          </Select>
-                        </Col>
-                        <Col
-                          span={4}
-                          style={{
-                            display: this.state[`paramTypeValueEn${index}`]
-                              ? "none"
-                              : "block"
                           }}
+                          value={item.paramType}
                         >
-                          <Input
-                            allowClear
-                            onChange={e => {
-                              this.conditionChange(
+                          {this.renderParamTypeOptions(paramTypeDics)}
+                        </Select>
+                      </Col>
+                      <Col
+                        span={4}
+                        style={{
+                            display: this.state[`paramTypeValueEn${index}`]
+                                ? "none"
+                                : "block"
+                        }}
+                      >
+                        <Input
+                          allowClear
+                          onChange={e => {
+                            this.conditionChange(
                                 index,
                                 "paramName",
                                 e.target.value
-                              );
-                            }}
-                            placeholder={item.paramName}
-                          />
-                        </Col>
-                        <Col span={4}>
-                          <Select
-                            onChange={value => {
-                              this.conditionChange(index, "operator", value);
-                            }}
-                            value={item.operator}
-                          >
-                            {this.renderOperatorOptions(operatorDics, item.paramType)}
-                          </Select>
-                        </Col>
-
-                        <Col
-                          span={7}
-                          style={{
-                            display: item.operator === "isBlank"
-                              ? "none"
-                              : "block"
+                            );
+                          }}
+                          placeholder={item.paramName}
+                        />
+                      </Col>
+                      <Col span={4}>
+                        <Select
+                          onChange={value => {
+                            this.conditionChange(index, "operator", value);
                           }}
+                          value={item.operator}
                         >
-                          <Tooltip title={item.paramValue}>
-                            {this.getParamValueInput(item, index)}
-                          </Tooltip>
-                        </Col>
-                        <Col span={4}>
-                          <Button
-                            type="danger"
-                            onClick={() => {
+                          {this.renderOperatorOptions(operatorDics, item.paramType)}
+                        </Select>
+                      </Col>
+
+                      <Col
+                        span={7}
+                        style={{
+                            display: item.operator === "isBlank"
+                                ? "none"
+                                : "block"
+                        }}
+                      >
+                        <Tooltip title={item.paramValue}>
+                          {this.getParamValueInput(item, index)}
+                        </Tooltip>
+                      </Col>
+                      <Col span={4}>
+                        <Button
+                          type="danger"
+                          onClick={() => {
                               this.handleDelete(index);
-                            }}
-                            style={{ marginLeft: 10 }}
-                          >
-                            {getIntlContent("SHENYU.COMMON.DELETE.NAME")}
-                          </Button>
-                        </Col>
-                      </Row>
-                    );
+                          }}
+                          style={{ marginLeft: 10 }}
+                        >
+                          {getIntlContent("SHENYU.COMMON.DELETE.NAME")}
+                        </Button>
+                      </Col>
+                    </Row>
+                  );
                   })}
-                </Item>
-                <Item
-                  label={' '}
-                  colon={false}
-                  {...formItemLayout}
-                >
-                  <Button className={styles.addButton} onClick={this.handleAdd} type="primary">
-                    {getIntlContent("SHENYU.COMMON.ADD")} {" "}
-                    {getIntlContent("SHENYU.COMMON.CONDITION")}
-                  </Button>
-                </Item>
-              </div>
-
-            </Fragment>
-          )}
-          <div className={styles.layout}>
-            <Item
-              {...formCheckLayout}
-              label={getIntlContent("SHENYU.SELECTOR.CONTINUE")}
-            >
-              {getFieldDecorator("continued", {
-                initialValue: continued,
-                valuePropName: "checked",
-                rules: [{ required: true }]
-              })(<Switch />)}
-            </Item>
-            <Item
-              style={{ margin: "0 30px" }}
-              {...formCheckLayout}
-              label={getIntlContent("SHENYU.SELECTOR.PRINTLOG")}
-            >
-              {getFieldDecorator("loged", {
-                initialValue: loged,
-                valuePropName: "checked",
-                rules: [{ required: true }]
-              })(<Switch />)}
-            </Item>
-            <Item
-              {...formCheckLayout}
-              label={getIntlContent("SHENYU.SELECTOR.WHETHEROPEN")}
-            >
-              {getFieldDecorator("enabled", {
-                initialValue: enabled,
-                valuePropName: "checked",
-                rules: [{ required: true }]
-              })(<Switch />)}
-            </Item>
-            <Item
-              style={{ margin: "0 30px" }}
-              {...formCheckLayout}
-              label={getIntlContent("SHENYU.SELECTOR.MATCHRESTFUL")}
-            >
-              {getFieldDecorator("matchRestful", {
+              </Item>
+              <Item
+                label={' '}
+                colon={false}
+                {...formItemLayout}
+              >
+                <Button className={styles.addButton} onClick={this.handleAdd} type="primary">
+                  {getIntlContent("SHENYU.COMMON.ADD")} {" "}
+                  {getIntlContent("SHENYU.COMMON.CONDITION")}
+                </Button>
+              </Item>
+            </div>
+          </Fragment>
+      )}
+        <div className={styles.layout}>
+          <Item
+            {...formCheckLayout}
+            label={getIntlContent("SHENYU.SELECTOR.CONTINUE")}
+          >
+            {getFieldDecorator("continued", {
+              initialValue: continued,
+              valuePropName: "checked",
+              rules: [{ required: true }]
+            })(<Switch />)}
+          </Item>
+          <Item
+            style={{ margin: "0 30px" }}
+            {...formCheckLayout}
+            label={getIntlContent("SHENYU.SELECTOR.PRINTLOG")}
+          >
+            {getFieldDecorator("loged", {
+              initialValue: loged,
+              valuePropName: "checked",
+              rules: [{ required: true }]
+            })(<Switch />)}
+          </Item>
+          <Item
+            {...formCheckLayout}
+            label={getIntlContent("SHENYU.SELECTOR.WHETHEROPEN")}
+          >
+            {getFieldDecorator("enabled", {
+              initialValue: enabled,
+              valuePropName: "checked",
+              rules: [{ required: true }]
+            })(<Switch />)}
+          </Item>
+          <Item
+            style={{ margin: "0 30px" }}
+            {...formCheckLayout}
+            label={getIntlContent("SHENYU.SELECTOR.MATCHRESTFUL")}
+          >
+            {getFieldDecorator("matchRestful", {
                 initialValue: matchRestful,
                 valuePropName: "checked",
                 rules: [{ required: true }]
-              })(<Switch />)}
-            </Item>
-          </div>
-          {this.renderPluginHandler()}
-          <Item
-            label={getIntlContent("SHENYU.SELECTOR.EXEORDER")}
-            {...formItemLayout}
-          >
-            {getFieldDecorator("sort", {
-              initialValue: sort,
-              rules: [
-                {
+            })(<Switch />)}
+          </Item>
+        </div>
+        {this.renderPluginHandler()}
+        <Item
+          label={getIntlContent("SHENYU.SELECTOR.EXEORDER")}
+          {...formItemLayout}
+        >
+          {getFieldDecorator("sort", {
+            initialValue: sort,
+            rules: [
+              {
                   required: true,
                   message: getIntlContent("SHENYU.SELECTOR.INPUTNUMBER")
-                },
-                {
+              },
+              {
                   pattern: /^([1-9][0-9]{0,2}|1000)$/,
                   message: getIntlContent("SHENYU.SELECTOR.INPUTNUMBER")
-                }
-              ]
-            })(
-              <Input
-                allowClear
-                placeholder={getIntlContent("SHENYU.SELECTOR.INPUTORDER")}
+              }
+            ]
+          })(
+            <Input
+              allowClear
+              placeholder={getIntlContent("SHENYU.SELECTOR.INPUTORDER")}
+            />
+          )}
+        </Item>
+      </>
+    )
+  }
+
+  renderDiscoveryConfig = () => {
+    const { form, isAdd = true, discoveryConfig = {} } = this.props;
+    const { discoveryModeDics, upstreams, recordCount, discoveryHandler, defaultValueList, configPropsJson, selectedDiscoveryValue } = this.state;
+    const { getFieldDecorator } = form;
+    return(
+      <>
+        <Item label={getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.TYPE")} {...formItemLayout}>
+          {getFieldDecorator('selectedDiscoveryType', {
+            rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.TYPE.INPUT")}],
+            initialValue: discoveryConfig.discoveryType !== '' ? discoveryConfig.discoveryType : 'local'
+          })(
+            <Select
+              placeholder={getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.TYPE.INPUT")}
+              disabled={!isAdd}
+              onChange={value => {
+                this.handleDiscoveryValueChange(value)
+                let configProps = discoveryModeDics.filter(item => item.dictName === value);
+                let propsEntries = JSON.parse(configProps[0]?.dictValue || "{}");
+                this.setState({configPropsJson: propsEntries})
+              }
+              }
+            >
+              {this.handleOptions()}
+            </Select>,
+          )}
+        </Item>
+
+        {
+          selectedDiscoveryValue !== 'local' ? (
+            <>
+              <Item label={getIntlContent("SHENYU.DISCOVERY.SELECTOR.LISTENERNODE")} {...formItemLayout}>
+                {getFieldDecorator('listenerNode', {
+                  rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.SELECTOR.LISTENERNODE.INPUT")}],
+                  initialValue: discoveryConfig.listenerNode
+                })(<Input
+                  allowClear
+                  disabled={!isAdd}
+                  placeholder={getIntlContent("SHENYU.DISCOVERY.SELECTOR.LISTENERNODE.INPUT")}
+                />)}
+              </Item>
+
+              {discoveryHandler !== null && Array.isArray(discoveryHandler) && discoveryHandler.length !== 0 && (
+                <Item label={getIntlContent("SHENYU.DISCOVERY.SELECTOR.HANDLER")} {...formItemLayout}>
+                  <div
+                    className={styles.handleWrap}
+                    style={{
+                      display: "flex"
+                    }}
+                  >
+                    <div
+                      style={{
+                        display: "flex",
+                        justifyContent: "space-between",
+                        flexDirection: "row"
+                      }}
+                    >
+                      <ul
+                        className={classnames({
+                          [styles.handleUl]: true,
+                          [styles.springUl]: true
+                        })}
+                        style={{ width: "100%" }}
+                      >
+                        {(() => {
+                          let item = discoveryHandler[0];
+                          let checkRule = item.checkRule;
+                          let required = item.required === "1";
+                          let rules = [];
+                          if (required) {
+                            rules.push({
+                              required: { required },
+                              message:
+                                  getIntlContent("SHENYU.COMMON.PLEASEINPUT") +
+                                  item.label
+                            });
+                          }
+                          if (checkRule) {
+                            rules.push({
+                              // eslint-disable-next-line no-eval
+                              pattern: eval(checkRule),
+                              message: `${getIntlContent(
+                                  "SHENYU.PLUGIN.RULE.INVALID"
+                              )}:(${checkRule})`
+                            });
+                          }
+                          if (defaultValueList != null) {
+                            return defaultValueList.map((value, index) => (
+                              <li key={index}>
+                                <Item>
+                                  {getFieldDecorator(value, {
+                                    initialValue: isAdd === true ? findKeyByValue(discoveryConfig.handler, value): findKeyByValue(JSON.parse(discoveryConfig.handler), value),
+                                    rules
+                                  })(
+                                    <Input
+                                      allowClear
+                                      disabled={!isAdd}
+                                      addonAfter={
+                                        <div style={{ width: '50px' }}>
+                                          {value}
+                                        </div>
+                                      }
+                                      placeholder={`Your ${value}`}
+                                      key={value}
+                                    />
+                                  )}
+                                </Item>
+                              </li>
+                            ));
+                          }
+                        })()}
+                      </ul>
+                    </div>
+                  </div>
+                </Item>
+              )}
+
+              <Item label={getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.SERVERLIST")} {...formItemLayout}>
+                {getFieldDecorator('serverList', {
+                  rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.SERVERLIST.INPUT")}],
+                  initialValue: discoveryConfig.serverList
+                })(<Input
+                  allowClear
+                  disabled={!isAdd}
+                  placeholder={getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.SERVERLIST.INPUT")}
+                />)}
+              </Item>
+
+              {Object.keys(configPropsJson).length > 0 && (
+                <div style={{ marginLeft: '60px', marginTop: '15px', marginBottom: '15px', fontWeight: '500' }}>
+                  {getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.PROPS")}
+                  <span style={{ marginLeft: '2px', fontWeight: '500' }}>:</span>
+                </div>
+              )}
+
+              <div style={{ marginLeft: '40px', marginRight: '35px', display: 'flex', alignItems: 'baseline' }}>
+                <div style={{ marginLeft: '8px', width: '100%' }}>
+                  <Row gutter={[16, 4]} justify="center">
+                    {Object.entries(configPropsJson).map(([key, value]) => (
+                      <Col span={12} key={key}>
+                        <Item>
+                          {getFieldDecorator(key, {
+                            initialValue: value
+                          })(
+                            <Input
+                              allowClear
+                              disabled={!isAdd}
+                              placeholder={isAdd ? `Enter ${key}` : ''}
+                              addonBefore={key}
+                              style={{ width: '100%' }}
+                            />
+                          )}
+                        </Item>
+                      </Col>
+                    ))}
+                  </Row>
+                </div>
+              </div>
+
+              {
+                isAdd !== true ? (
+                  <>
+                    <Divider>{getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM")}</Divider>
+                    <EditableFormTable
+                      isLocal={false}
+                      dataSource={upstreams}
+                      recordCount={recordCount}
+                      onTableChange={this.handleTableChange}
+                      onCountChange={this.handleCountChange}
+                    />
+                    {/* <Table dataSource={upstreams} columns={columns} />; */}
+                  </>
+                ):null
+              }
+            </>
+          ) : (
+            <>
+              <Divider>{getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM")}</Divider>
+              <EditableFormTable
+                isLocal={true}
+                dataSource={upstreams}
+                recordCount={recordCount}
+                onTableChange={this.handleTableChange}
+                onCountChange={this.handleCountChange}
               />
-            )}
-          </Item>
+            </>
+          )
+        }
+      </>
+    )
+
+  }
+
+
+  render() {
+    const {
+      onCancel,
+      isDiscovery,
+      isAdd = true
+    } = this.props;
+    const operations = (
+      <Button
+        type="primary"
+        icon="import"
+        onClick={() => {
+          this.setState({ showDiscoveryImportModal: true });
+        }}
+        disabled={!isAdd}
+      >
+        {getIntlContent("SHENYU.DISCOVERY.SELECTOR.CONFIG.IMPORT")}
+      </Button>
+    );
+    return (
+      <Modal
+        width='1100px'
+        centered
+        title={getIntlContent("SHENYU.SELECTOR.NAME")}
+        // visible here defaults to true, because the visibility of modal is determined by the popup attribute in index.js
+        visible
+        okText={getIntlContent("SHENYU.COMMON.SURE")}
+        cancelText={getIntlContent("SHENYU.COMMON.CALCEL")}
+        onOk={this.handleSubmit}
+        onCancel={onCancel}
+      >
+        <Form onSubmit={this.handleSubmit} className="login-form">
+          {// divide, grpc, websocket plugin
+            isDiscovery ? (
+              <Tabs defaultActiveKey="1" size="small" tabBarExtraContent={operations}>
+                <TabPane tab={getIntlContent("SHENYU.DISCOVERY.SELECTOR.CONFIG.BASIC")} key="1">
+                  {this.renderBasicConfig()}
+                </TabPane>
+                <TabPane tab={getIntlContent("SHENYU.DISCOVERY.SELECTOR.CONFIG.DISCOVERY")} key="2">
+                  {this.renderDiscoveryConfig()}
+                  <DiscoveryImportModal
+                    pluginName={this.props.pluginName}
+                    disabled={!isAdd}
+                    visible={this.state.showDiscoveryImportModal}
+                    onOk={this.handleImportDiscoveryConfig}
+                    onCancel={() => {
+                      this.setState({ showDiscoveryImportModal: false });
+                    }}
+                  />
+                </TabPane>
+              </Tabs>
+            ) : this.renderBasicConfig()
+          }
         </Form>
       </Modal>
     );
diff --git a/src/routes/Plugin/Common/index.js b/src/routes/Plugin/Common/index.js
index 1323218da..574a6619f 100644
--- a/src/routes/Plugin/Common/index.js
+++ b/src/routes/Plugin/Common/index.js
@@ -65,7 +65,8 @@ export default class Common extends Component {
     }
   }
 
-  componentDidUpdate(prevProps) {
+  /* eslint-disable no-unused-vars */
+  componentDidUpdate(prevProps,  prevState, snapshot) {
     const preId = prevProps.match.params.id;
     const newId = this.props.match.params.id;
     const { selectorPage, selectorPageSize } = this.state;
@@ -89,6 +90,7 @@ export default class Common extends Component {
       }
     }
   }
+  /* eslint-enable no-unused-vars */
 
   componentWillUnmount() {
     const { dispatch } = this.props;
@@ -179,25 +181,96 @@ export default class Common extends Component {
     const { id: pluginId, config } = plugin;
     const multiSelectorHandle =
       this.getPluginConfigField(config, "multiSelectorHandle") === "1";
-    this.setState({
-      popup: (
-        <Selector
-          pluginId={pluginId}
-          multiSelectorHandle={multiSelectorHandle}
-          handleOk={selector => {
-            dispatch({
-              type: "common/addSelector",
-              payload: { pluginId, ...selector },
-              fetchValue: { pluginId, currentPage: selectorPage, pageSize: selectorPageSize },
-              callback: () => {
-                this.closeModal();
-              }
-            });
-          }}
-          onCancel={this.closeModal}
-        />
-      )
-    });
+    const isDiscovery = ["5", "15", "26"].includes(pluginId);
+    if (isDiscovery) {
+      let discoveryConfig = {
+        discoveryType: '',
+        serverList: '',
+        handler: {},
+        listenerNode: '',
+        props: {}
+      }
+      let typeValue =
+        name === "divide" ? "http" :
+          name === "websocket" ? "ws" :
+            name === "grpc" ? "grpc" : "http";
+      this.setState({
+        popup: (
+          <Selector
+            pluginName={name}
+            pluginId={pluginId}
+            multiSelectorHandle={multiSelectorHandle}
+            isAdd={true}
+            discoveryConfig={discoveryConfig}
+            isDiscovery={true}
+            handleOk={selector => {
+              const { name: selectorName, listenerNode, serverList, selectedDiscoveryType, discoveryProps, handler, upstreams, importedDiscoveryId } = selector;
+              const upstreamsWithProps = upstreams.map(item => ({
+                protocol: item.protocol,
+                url: item.url,
+                status: parseInt(item.status, 10),
+                weight: item.weight,
+                startupTime: item.startupTime,
+                props: JSON.stringify({
+                  warmupTime: item.warmupTime
+                })
+              }));
+              dispatch({
+                type: "common/addSelector",
+                payload: { pluginId, ...selector, upstreams: upstreamsWithProps },
+                fetchValue: { pluginId, currentPage: selectorPage, pageSize: selectorPageSize },
+                callback: (selectorId) => {
+                  dispatch({
+                    type: "discovery/bindSelector",
+                    payload: {
+                      selectorId,
+                      name: selectorName,
+                      pluginName: name,
+                      listenerNode,
+                      handler,
+                      type: typeValue,
+                      discoveryUpstreams: upstreamsWithProps,
+                      discovery: {
+                        id: importedDiscoveryId,
+                        discoveryType: selectedDiscoveryType,
+                        serverList,
+                        props: discoveryProps,
+                        name: selectorName
+                      }
+                    }
+                  })
+                  this.closeModal();
+                }
+              });
+            }}
+            onCancel={this.closeModal}
+          />
+        )
+      });
+    }else {
+      this.setState({
+        popup: (
+          <Selector
+            pluginName={name}
+            pluginId={pluginId}
+            multiSelectorHandle={multiSelectorHandle}
+            isDiscovery={false}
+            handleOk={selector => {
+              dispatch({
+                type: "common/addSelector",
+                payload: { pluginId, ...selector },
+                fetchValue: { pluginId, currentPage: selectorPage, pageSize: selectorPageSize },
+                callback: () => {
+                  this.closeModal();
+                }
+              });
+            }}
+            onCancel={this.closeModal}
+          />
+        )
+      });
+    }
+
   };
 
   searchRuleOnchange = e => {
@@ -297,6 +370,7 @@ export default class Common extends Component {
     const { id: pluginId, config } = plugin;
     const multiSelectorHandle =
       this.getPluginConfigField(config, "multiSelectorHandle") === "1";
+    const isDiscovery = ["5", "15", "26"].includes(pluginId);
     const { id } = record;
     dispatch({
       type: "common/fetchSeItem",
@@ -304,11 +378,37 @@ export default class Common extends Component {
         id
       },
       callback: selector => {
+       if ( isDiscovery ){
+        let discoveryConfig = {
+          props: selector.discoveryVO ? selector.discoveryVO.props: "{}",
+          discoveryType: selector.discoveryVO ? selector.discoveryVO.type: 'local',
+          serverList: selector.discoveryVO ? selector.discoveryVO.serverList: '',
+          handler: selector.discoveryHandler ? selector.discoveryHandler.handler: "{}",
+          listenerNode: selector.discoveryHandler ? selector.discoveryHandler.listenerNode : '',
+        }
+        let updateArray = [];
+        if (selector.discoveryUpstreams) {
+          updateArray = selector.discoveryUpstreams.map((item) => {
+            let propsObj = JSON.parse(item.props || "{}");
+            if (item.props === null) {
+              propsObj = {
+                warmupTime: 10,
+              };
+            }
+            return { ...item, key: item.id, warmupTime: propsObj.warmupTime };
+          });
+        }
+        let discoveryHandlerId = selector.discoveryHandler ? selector.discoveryHandler.id : '';
         this.setState({
           popup: (
             <Selector
+              pluginName={name}
               {...selector}
               multiSelectorHandle={multiSelectorHandle}
+              discoveryConfig={discoveryConfig}
+              discoveryUpstreams={updateArray}
+              isAdd={false}
+              isDiscovery={true}
               handleOk={values => {
                 dispatch({
                   type: "common/updateSelector",
@@ -323,6 +423,24 @@ export default class Common extends Component {
                     pageSize: selectorPageSize
                   },
                   callback: () => {
+                    const {upstreams} = values
+                    const upstreamsWithHandlerId = upstreams.map(item => ({
+                      protocol: item.protocol,
+                      url: item.url,
+                      status: parseInt(item.status, 10),
+                      weight: item.weight,
+                      props: JSON.stringify({
+                        warmupTime: item.warmupTime
+                      }),
+                      discoveryHandlerId
+                    }));
+                    dispatch({
+                      type: "discovery/updateDiscoveryUpstream",
+                      payload: {
+                        discoveryHandlerId,
+                        upstreams: upstreamsWithHandlerId
+                      }
+                    })
                     this.closeModal();
                   }
                 });
@@ -331,6 +449,37 @@ export default class Common extends Component {
             />
           )
         });
+        } else {
+          this.setState({
+            popup: (
+              <Selector
+                pluginName={name}
+                {...selector}
+                multiSelectorHandle={multiSelectorHandle}
+                isDiscovery={false}
+                handleOk={values => {
+                  dispatch({
+                    type: "common/updateSelector",
+                    payload: {
+                      pluginId,
+                      ...values,
+                      id
+                    },
+                    fetchValue: {
+                      pluginId,
+                      currentPage: selectorPage,
+                      pageSize: selectorPageSize
+                    },
+                    callback: () => {
+                      this.closeModal();
+                    }
+                  });
+                }}
+                onCancel={this.closeModal}
+              />
+            )
+          });
+        }
       }
     });
   };
diff --git a/src/routes/Plugin/Discovery/TcpCard.js b/src/routes/Plugin/Discovery/DiscoveryCard.js
similarity index 92%
rename from src/routes/Plugin/Discovery/TcpCard.js
rename to src/routes/Plugin/Discovery/DiscoveryCard.js
index 55d79b128..936408966 100644
--- a/src/routes/Plugin/Discovery/TcpCard.js
+++ b/src/routes/Plugin/Discovery/DiscoveryCard.js
@@ -19,16 +19,16 @@ import React, {Component} from "react";
 import {Card, Popover, Typography, Skeleton, Icon, Popconfirm} from "antd";
 
 import {getIntlContent} from "../../../utils/IntlUtils";
-import tcpStyles from "./tcp.less";
+import discoveryStyles from "./discovery.less";
 
 import { formatTimestamp } from "../../../utils/utils";
-import {ConsulIcon, EtcdIcon, LocalIcon, NacosIcon, ZkIcon} from "./DiscoveryIcon";
+import {ConsulIcon, EtcdIcon, LocalIcon, NacosIcon, ZkIcon, EurekaIcon} from "./DiscoveryIcon";
 import AuthButton from "../../../utils/AuthButton";
 
 const { Text } = Typography;
 const { Meta } = Card;
 
-export class TcpCard extends Component {
+export class DiscoveryCard extends Component {
 
   render() {
     const { updateSelector, data, handleDelete, handleRefresh } = this.props
@@ -56,6 +56,7 @@ export class TcpCard extends Component {
       nacos: <NacosIcon style={{ fontSize: '40px', color: '#354458' }} />,
       consul: <ConsulIcon style={{ fontSize: '40px', color: '#354458' }} />,
       etcd: <EtcdIcon style={{ fontSize: '40px', color: '#354458' }} />,
+      eureka: <EurekaIcon style={{ fontSize: '40px', color: '#354458' }} />,
     };
 
     const getAvatarIcon = () => {
@@ -67,7 +68,7 @@ export class TcpCard extends Component {
         <Card
           title={<div style={{ fontSize: '17px', lineHeight: '1.5'}}>{data.name}</div>}
           bordered={false}
-          className={tcpStyles.tcpCard}
+          className={discoveryStyles.discoveryCard}
           actions={[
             <AuthButton perms="plugin:tcp:modify">
               <Icon type="reload" key="reload" style={{color: '#2E496E', fontSize: "17px"}} onClick={() => handleRefresh(data.discoveryHandlerId)} />
@@ -85,7 +86,7 @@ export class TcpCard extends Component {
             >
               <AuthButton perms="plugin:tcpSelector:delete">
                 <Icon type="delete" key="delete" style={{color: "#CC0000", fontSize: "17px"}} />
-              </AuthButton>,
+              </AuthButton>
             </Popconfirm>
           ]}
           extra={<div style={{ fontSize: '15px', lineHeight: '1.5', marginRight: '14px'}}>{formatTimestamp(createTime)}</div>}
diff --git a/src/routes/Plugin/Discovery/DiscoveryConfigModal.js b/src/routes/Plugin/Discovery/DiscoveryConfigModal.js
index 5c6be0fd3..0ad11ff23 100644
--- a/src/routes/Plugin/Discovery/DiscoveryConfigModal.js
+++ b/src/routes/Plugin/Discovery/DiscoveryConfigModal.js
@@ -59,13 +59,13 @@ class DiscoveryConfigModal extends Component {
     e.preventDefault();
     form.validateFieldsAndScroll((err, values) => {
       if (!err) {
-        let { name, serverList, tcpType } = values;
+        let { name, serverList, discoveryType } = values;
         const propsjson = {};
         Object.entries(configPropsJson).forEach(([key]) => {
           propsjson[key] = form.getFieldValue(key);
         });
         const props = JSON.stringify(propsjson);
-        handleOk({ name, serverList, props, tcpType});
+        handleOk({ name, serverList, props, discoveryType});
       }
     });
   };
@@ -82,7 +82,7 @@ class DiscoveryConfigModal extends Component {
   render() {
     const { handleCancel, form, data, isSetConfig, handleConfigDelete, dispatch } = this.props
     const { getFieldDecorator } = form;
-    const { name, serverList, type: tcpType, id} = data || {};
+    const { name, serverList, type: discoveryType, id} = data || {};
     const { configPropsJson, discoveryDicts } = this.state;
     const formItemLayout = {
       labelCol: {
@@ -109,8 +109,8 @@ class DiscoveryConfigModal extends Component {
               placement="topLeft"
               title={getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.DELETE")}
               onConfirm={() => handleConfigDelete(id)}
-              okText="Yes"
-              cancelText="No"
+              okText={getIntlContent("SHENYU.COMMON.SURE")}
+              cancelText={getIntlContent("SHENYU.COMMON.CALCEL")}
               key="popconfirm"
             >
               <Button key="delete" type="danger" style={{ marginRight: '10px' }}>
@@ -129,9 +129,9 @@ class DiscoveryConfigModal extends Component {
       >
         <Form onSubmit={this.handleSubmit}>
           <Form.Item label={getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.TYPE")} {...formItemLayout}>
-            {getFieldDecorator('tcpType', {
+            {getFieldDecorator('discoveryType', {
               rules: [{ required: true, message: getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.TYPE.INPUT") }],
-              initialValue: tcpType !== "" ? tcpType : undefined
+              initialValue: discoveryType !== "" ? discoveryType : undefined
             })(
               <Select
                 placeholder={getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.TYPE.INPUT")}
@@ -179,7 +179,7 @@ class DiscoveryConfigModal extends Component {
             <span style={{ marginLeft: '2px', fontWeight: '500' }}>:</span>
           </div>
           <div style={{ marginLeft: '35px', display: 'flex', alignItems: 'baseline' }}>
-            <div style={{ marginLeft: '8px' }}>
+            <div style={{ marginLeft: '8px', width: '100%' }}>
               <Row gutter={[16, 4]} justify="center">
                 {Object.entries(configPropsJson).map(([key, value]) => (
                   <Col span={12} key={key}>
@@ -190,7 +190,7 @@ class DiscoveryConfigModal extends Component {
                         <Input
                           allowClear
                           disabled={isSetConfig}
-                          placeholder={`Enter ${key}`}
+                          placeholder={!isSetConfig ? `Enter ${key}` : ''}
                           addonBefore={key}
                         />
                       )}
diff --git a/src/routes/Plugin/Discovery/DiscoveryIcon.js b/src/routes/Plugin/Discovery/DiscoveryIcon.js
index bd9edaf2e..2f3fbcd40 100644
--- a/src/routes/Plugin/Discovery/DiscoveryIcon.js
+++ b/src/routes/Plugin/Discovery/DiscoveryIcon.js
@@ -100,11 +100,26 @@ const EtcdSvg = () => (
   </svg>
 )
 
+const EurekaSvg = () => (
+  <svg
+    className="icon"
+    viewBox="0 0 1024 1024"
+    width="1em"
+    height="1em"
+  >
+    <path
+      d="M985.417388 0H38.457749C17.231069 0 0 17.231069 0 38.457749v947.084502c0 21.22668 17.231069 38.457749 38.457749 38.457749h947.084502c21.22668 0 38.332886-17.231069 38.457749-38.332886V38.457749C1023.875137 17.231069 1006.644068 0 985.417388 0zM744.182417 820.723326H279.69272V203.151811h449.506158v92.897939H390.32118V449.506158h311.158152v92.897939H390.32118v185.42129H744.182417v92.897939z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
 export const ZkIcon = props => <Icon component={ZkSvg} {...props} />;
 export const LocalIcon = props => <Icon component={LocalSvg} {...props} />;
 export const NacosIcon = props => <Icon component={NacosSvg} {...props} />;
 export const ConsulIcon = props => <Icon component={ConsulSvg} {...props} />;
 export const EtcdIcon = props => <Icon component={EtcdSvg} {...props} />;
+export const EurekaIcon = props => <Icon component={EurekaSvg} {...props} />;
 
 
 
diff --git a/src/routes/Plugin/Discovery/DiscoveryImportModal.js b/src/routes/Plugin/Discovery/DiscoveryImportModal.js
new file mode 100644
index 000000000..7e9c03f61
--- /dev/null
+++ b/src/routes/Plugin/Discovery/DiscoveryImportModal.js
@@ -0,0 +1,94 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { Component } from "react";
+import { Modal } from "antd";
+import { connect } from "dva";
+import { getIntlContent } from "../../../utils/IntlUtils";
+
+@connect(({ discovery }) => ({
+  discovery
+}))
+
+class DiscoveryImportModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      configList: {},
+      loading: false
+    };
+  }
+
+  componentDidMount() {
+    const { dispatch, pluginName } = this.props
+    dispatch({
+      type: "discovery/fetchDiscovery",
+      payload: {
+        pluginName,
+        level: "1"
+      },
+      callback: discoveryConfigList => {
+        this.setState({configList: discoveryConfigList})
+      }
+    })
+  }
+
+  handleCancel = () => {
+    const { onCancel } = this.props;
+    // eslint-disable-next-line no-unused-expressions
+    onCancel && onCancel();
+  };
+
+  handleOk = async () => {
+    const { onOk } = this.props;
+    const { configList } = this.state;
+    // eslint-disable-next-line no-unused-expressions
+    onOk && onOk(configList);
+  };
+
+  render() {
+    const { visible = false } = this.props;
+    const { loading, configList } = this.state;
+    const { type = '', serverList =  '', props: discoveryProps = '{}' } = configList || {};
+    return (
+      <Modal
+        visible={visible}
+        centered
+        title={getIntlContent("SHENYU.DISCOVERY.SELECTOR.CONFIG.IMPORT.CONFIRM")}
+        onCancel={this.handleCancel}
+        onOk={this.handleOk}
+        confirmLoading={loading}
+        okText={getIntlContent("SHENYU.DISCOVERY.SELECTOR.CONFIG.IMPORT.SURE")}
+        cancelText={getIntlContent("SHENYU.COMMON.CALCEL")}
+      >
+        <ul>
+          <li style={{ marginBottom: '8px' }}>
+            <strong>{getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.TYPE")}:</strong> {type}
+          </li>
+          <li style={{ marginBottom: '8px' }}>
+            <strong>{getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.SERVERLIST")}:</strong> {serverList}
+          </li>
+          <li>
+            <strong>{getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.PROPS")}:</strong> <pre><code>{JSON.stringify(JSON.parse(discoveryProps), null, 4)}</code></pre>
+          </li>
+        </ul>
+      </Modal>
+    );
+  }
+}
+
+export default DiscoveryImportModal;
diff --git a/src/routes/Plugin/Discovery/DiscoveryUpstreamTable.js b/src/routes/Plugin/Discovery/DiscoveryUpstreamTable.js
new file mode 100644
index 000000000..33357b713
--- /dev/null
+++ b/src/routes/Plugin/Discovery/DiscoveryUpstreamTable.js
@@ -0,0 +1,287 @@
+import React, {Component} from "react";
+import {Button, Form, Input, InputNumber, Popconfirm, Select, Table} from 'antd';
+import {getIntlContent} from "../../../utils/IntlUtils";
+
+const EditableContext = React.createContext();
+const { Option } = Select;
+
+class EditableCell extends Component {
+  getInput = () => {
+    if (this.props.inputType === 'number') {
+      return <InputNumber />;
+    } else if (this.props.inputType === 'dropdown') {
+      // return <Select />;
+      return (
+        <Select>
+          <Option value="0">open</Option>
+          <Option value="1">close</Option>
+        </Select>
+      );
+    }
+    return <Input />;
+  };
+
+  renderCell = ({ getFieldDecorator }) => {
+    const {
+      editing,
+      dataIndex,
+      title,
+      inputType,
+      record,
+      index,
+      children,
+      ...restProps
+    } = this.props;
+    return (
+      <td {...restProps}>
+        {editing ? (
+          <Form.Item style={{ margin: 0 }}>
+            {getFieldDecorator(dataIndex, {
+              rules: [
+                {
+                  required: true,
+                  message: `Please Input ${title}!`,
+                },
+              ],
+              initialValue: record[dataIndex],
+            })(this.getInput())}
+          </Form.Item>
+        ) : (
+          children
+        )}
+      </td>
+    );
+  };
+
+  render() {
+    return <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>;
+  }
+}
+
+class EditableTable extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      editingKey: '',
+      isLocal: this.props.isLocal
+    };
+    this.columns = [
+      {
+        title: 'protocol',
+        dataIndex: 'protocol',
+        editable: true,
+        width: '25%',
+        align: 'center'
+      },
+      {
+        title: 'url',
+        dataIndex: 'url',
+        editable: this.state.isLocal,
+        width: '35%',
+        align: 'center'
+      },
+      {
+        title: 'status',
+        dataIndex: 'status',
+        editable: true,
+        width: '19%',
+        align: 'center',
+        render: (text) => {
+          return text === 0 || text === '0' ? 'open' : 'close';
+        },
+      },
+      {
+        title: 'weight',
+        dataIndex: 'weight',
+        editable: true,
+        align: 'center'
+      },
+      {
+        title: 'startupTime',
+        dataIndex: 'startupTime',
+        editable: this.state.isLocal,
+        align: 'center'
+      },
+      {
+        title: 'warmupTime',
+        dataIndex: 'warmupTime',
+        editable: true,
+        align: 'center'
+      },
+      {
+        title: getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM.OPERATION"),
+        dataIndex: 'operation',
+        width: '18%',
+        align: 'center',
+        render: (text, record) => {
+          const { editingKey } = this.state;
+          const editable = this.isEditing(record);
+          return (
+            <span>
+              {editable ? (
+                <span>
+                  <EditableContext.Consumer>
+                    {form => (
+                      <a
+                        onClick={() => this.save(form, record.key)}
+                        style={{ marginRight: 8 }}
+                      >
+                        {getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM.SAVE")}
+                      </a>
+                    )}
+                  </EditableContext.Consumer>
+                  <Popconfirm
+                    title={getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM.CANCEL.CONFIRM")}
+                    onConfirm={() => this.cancel(record.key)}
+                    okText={getIntlContent("SHENYU.COMMON.SURE")}
+                    cancelText={getIntlContent("SHENYU.COMMON.CALCEL")}
+                  >
+                    <a>{getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM.CANCEL")}</a>
+                  </Popconfirm>
+                </span>
+                ) : (
+                  <span>
+                    <Button
+                      type="link"
+                      disabled={editingKey !== ''}
+                      onClick={() => this.edit(record.key)}
+                    >
+                      {getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM.EDIT")}
+                    </Button>
+                    {' '}
+                    {this.props.dataSource.length >= 1 && this.state.isLocal ? (
+                      <Popconfirm
+                        title={getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM.DELETE.CONFIRM")}
+                        onConfirm={() => this.handleDelete(record.key)}
+                        okText={getIntlContent("SHENYU.COMMON.SURE")}
+                        cancelText={getIntlContent("SHENYU.COMMON.CALCEL")}
+                      >
+                        <a>{getIntlContent("SHENYU.BUTTON.SYSTEM.DELETE")}</a>
+                      </Popconfirm>
+                    ) : null}
+                  </span>
+                )
+              }
+            </span>
+          );
+        },
+      },
+    ];
+  }
+
+  isEditing = record => record.key === this.state.editingKey;
+
+  cancel = () => {
+    this.setState({ editingKey: '' });
+  };
+
+  handleDelete = key => {
+    const { dataSource } = this.props;
+    const newData = dataSource.filter(item => item.key !== key);
+    this.props.onTableChange(newData);
+  };
+
+  handleAdd = () => {
+    const { dataSource, recordCount } = this.props;
+    const newRecordCount = recordCount + 1;
+    const newData = {
+      key: newRecordCount,
+      protocol: 'http://',
+      url: 'localhost:',
+      status: 0,
+      weight: 50,
+      startupTime: 0,
+      warmupTime: 10
+    };
+    this.props.onTableChange([...dataSource, newData]);
+    this.props.onCountChange(newRecordCount);
+  };
+
+  save(form, key) {
+    form.validateFields((error, row) => {
+      if (error) {
+        return;
+      }
+      const newData = [...this.props.dataSource];
+      const index = newData.findIndex(item => key === item.key);
+      if (index > -1) {
+        const item = newData[index];
+        newData.splice(index, 1, {
+          ...item,
+          ...row,
+        });
+        this.props.onTableChange(newData);
+        this.setState({ editingKey: '' });
+      } else {
+        const { recordCount } = this.props;
+        row.key = recordCount + 1;
+        newData.push(row);
+        this.props.onCountChange(recordCount + 1);
+        this.props.onTableChange(newData);
+        this.setState({ editingKey: '' });
+      }
+    });
+  }
+
+  edit(key) {
+    this.setState({ editingKey: key });
+  }
+
+  render() {
+    const components = {
+      body: {
+        cell: EditableCell,
+      },
+    };
+
+    const columns = this.columns.map(col => {
+      if (!col.editable) {
+        return col;
+      }
+
+      let inputType = 'text';
+      if (col.dataIndex === 'weight' || col.dataIndex === 'startupTime' || col.dataIndex === 'warmupTime') {
+        inputType = 'number';
+      } else if (col.dataIndex === 'status') {
+        inputType = 'dropdown';
+      }
+      return {
+        ...col,
+        onCell: record => ({
+          record,
+          inputType,
+          dataIndex: col.dataIndex,
+          title: col.title,
+          editing: this.isEditing(record),
+        }),
+      };
+    });
+
+    return (
+      <div>
+        {this.state.isLocal && (
+          <Button onClick={this.handleAdd} type="primary" style={{ marginBottom: 16 }}>
+            {getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM.ADD")}
+          </Button>
+        )}
+        <EditableContext.Provider value={this.props.form}>
+          <Table
+            components={components}
+            bordered
+            dataSource={this.props.dataSource}
+            columns={columns}
+            rowClassName="editable-row"
+            pagination={{
+              onChange: this.cancel,
+            }}
+          />
+        </EditableContext.Provider>
+      </div>
+
+    );
+  }
+}
+
+const EditableFormTable = Form.create()(EditableTable);
+export default EditableFormTable;
+
diff --git a/src/routes/Plugin/Discovery/ProxySelectorModal.js b/src/routes/Plugin/Discovery/ProxySelectorModal.js
index 7132bfd8c..01e3cf1e7 100644
--- a/src/routes/Plugin/Discovery/ProxySelectorModal.js
+++ b/src/routes/Plugin/Discovery/ProxySelectorModal.js
@@ -17,13 +17,13 @@
 
 import React, {Component} from "react";
 import {connect} from "dva";
-import {Button, Col, Divider, Form, Input, Modal, Row, Select, Table, Tabs, Tooltip} from "antd";
+import {Button, Col, Divider, Form, Input, Modal, Row, Select, Tabs, Tooltip} from "antd";
 import classnames from "classnames";
 import {getIntlContent} from "../../../utils/IntlUtils";
-import EditableTable from './UpstreamTable';
 import styles from "../index.less";
 import ProxySelectorCopy from "./ProxySelectorCopy.js";
 import {findKeyByValue} from "../../../utils/utils";
+import EditableFormTable from "./DiscoveryUpstreamTable";
 
 
 const FormItem = Form.Item;
@@ -53,7 +53,7 @@ class ProxySelectorModal extends Component {
   }
 
   componentDidMount() {
-    const { isAdd, isSetConfig, tcpType, data, pluginId, dispatch } = this.props;
+    const { isAdd, isSetConfig, discoveryType, data, pluginId, dispatch } = this.props;
     const { discoveryDicts } = this.state;
     const { props } = this.props.data || {};
 
@@ -62,7 +62,7 @@ class ProxySelectorModal extends Component {
       dispatch({
         type: 'discovery/saveGlobalType',
         payload: {
-          chosenType: tcpType
+          chosenType: discoveryType
         }
       });
     }else{
@@ -88,10 +88,13 @@ class ProxySelectorModal extends Component {
         callBack: (pluginHandles) => {
           if  (Object.keys(pluginHandles).length > 0) {
             const filteredArray = pluginHandles[0].filter(item => item.field !== 'discoveryHandler');
+
             const handlerArray = pluginHandles[0].filter(item => item.field === 'discoveryHandler');
-            pluginHandles[0] = filteredArray;
             this.setState({discoveryHandler: handlerArray});
+
+            pluginHandles[0] = filteredArray;
             this.setState({ pluginHandleList: pluginHandles });
+
             let defaultValue = handlerArray[0].defaultValue;
             this.setState({ defaultValueList: defaultValue.split(",")  });
           }
@@ -106,12 +109,15 @@ class ProxySelectorModal extends Component {
     e.preventDefault();
     form.validateFieldsAndScroll((err, values) => {
       if (!err) {
-        let {name, forwardPort, listenerNode, serverList, discoveryType} = values;
+        let {name, forwardPort, listenerNode, serverList, selectedDiscoveryType} = values;
         const discoveryPropsJson = {};
         Object.entries(configPropsJson).forEach(([key]) => {
           discoveryPropsJson[key] = form.getFieldValue(key);
         });
+        // The discoveryProps refer to the attributes corresponding to each registration center mode
         const discoveryProps = JSON.stringify(discoveryPropsJson);
+
+        // The handler refers to the url, status, weight, protocol, etc. of the discovery module.
         let handler = {};
         if ( defaultValueList !== null) {
           defaultValueList.forEach(item => {
@@ -120,6 +126,8 @@ class ProxySelectorModal extends Component {
             }
           });
         }
+        handler = JSON.stringify(handler);
+
         let handleResult = [];
         handleResult[0] = {};
         if(Object.keys(pluginHandleList).length > 0){
@@ -127,9 +135,9 @@ class ProxySelectorModal extends Component {
             handleResult[0][item.field] = values[item.field + 0];
           });
         }
-        handler = JSON.stringify(handler);
+        // The props refer to the properties of each plug-in
         let props = JSON.stringify(handleResult[0]);
-        handleOk({name, forwardPort, props, listenerNode, handler, discoveryProps, serverList, discoveryType, upstreams});
+        handleOk({name, forwardPort, props, listenerNode, handler, discoveryProps, serverList, selectedDiscoveryType, upstreams});
       }
     });
   };
@@ -141,7 +149,7 @@ class ProxySelectorModal extends Component {
       name,
       forwardPort,
       listenerNode,
-      discoveryType: discovery.type,
+      selectedDiscoveryType: discovery.type,
       serverList: discovery.serverList
     };
     dispatch({
@@ -176,7 +184,7 @@ class ProxySelectorModal extends Component {
 
 
   render() {
-    const { tcpType, form, handleCancel, isSetConfig, isAdd, chosenType, dispatch } = this.props;
+    const { discoveryType, form, handleCancel, isSetConfig, isAdd, chosenType, dispatch } = this.props;
     const { recordCount, upstreams, pluginHandleList, visible, discoveryHandler, defaultValueList, discoveryDicts, configPropsJson } = this.state;
     const { getFieldDecorator } = form;
     const { name, forwardPort, listenerNode, discovery, handler } = this.props.data || {};
@@ -189,32 +197,6 @@ class ProxySelectorModal extends Component {
         sm: { span: 19 }
       }
     };
-    const columns = [
-      {
-        title: 'protocol',
-        dataIndex: 'protocol',
-        key: 'protocol',
-        align: 'center'
-      },
-      {
-        title: 'url',
-        dataIndex: 'url',
-        key: 'url',
-        align: 'center'
-      },
-      {
-        title: 'status',
-        dataIndex: 'status',
-        key: 'status',
-        align: 'center'
-      },
-      {
-        title: 'weight',
-        dataIndex: 'weight',
-        key: 'weight',
-        align: 'center'
-      },
-    ];
 
     return (
       <Modal
@@ -426,9 +408,9 @@ class ProxySelectorModal extends Component {
             </TabPane>
             <TabPane tab={getIntlContent("SHENYU.DISCOVERY.SELECTOR.CONFIG.DISCOVERY")} key="2">
               <FormItem label={getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.TYPE")} {...formItemLayout}>
-                {getFieldDecorator('discoveryType', {
+                {getFieldDecorator('selectedDiscoveryType', {
                   rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.TYPE.INPUT")}],
-                  initialValue: tcpType !== '' ? tcpType : undefined
+                  initialValue: discoveryType !== '' ? discoveryType : undefined
                 })(
                   <Select
                     placeholder={getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.TYPE.INPUT")}
@@ -526,7 +508,7 @@ class ProxySelectorModal extends Component {
                                                 {value}
                                               </div>
                                             }
-                                            placeholder={`Your ${value}`}
+                                            placeholder={isAdd? `Your ${value}` : ''}
                                             key={value}
                                           />
                                         )}
@@ -560,7 +542,7 @@ class ProxySelectorModal extends Component {
                             <span style={{ marginLeft: '2px', fontWeight: '500' }}>:</span>
                           </div>
                           <div style={{ marginLeft: '35px', display: 'flex', alignItems: 'baseline' }}>
-                            <div style={{ marginLeft: '8px' }}>
+                            <div style={{ marginLeft: '8px', width: '100%' }}>
                               <Row gutter={[16, 4]} justify="center">
                                 {Object.entries(configPropsJson).map(([key, value]) => (
                                   <Col span={12} key={key}>
@@ -571,7 +553,7 @@ class ProxySelectorModal extends Component {
                                         <Input
                                           allowClear
                                           disabled={!isAdd}
-                                          placeholder={`Enter ${key}`}
+                                          placeholder={isAdd ? `Enter ${key}` : ''}
                                           addonBefore={key}
                                         />
                                       )}
@@ -589,7 +571,13 @@ class ProxySelectorModal extends Component {
                       isAdd !== true ? (
                         <>
                           <Divider>{getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM")}</Divider>
-                          <Table dataSource={upstreams} columns={columns} />;
+                          <EditableFormTable
+                            isLocal={false}
+                            dataSource={upstreams}
+                            recordCount={recordCount}
+                            onTableChange={this.handleTableChange}
+                            onCountChange={this.handleCountChange}
+                          />
                         </>
                       ):null
                     }
@@ -597,7 +585,8 @@ class ProxySelectorModal extends Component {
                 ) : (
                   <>
                     <Divider>{getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM")}</Divider>
-                    <EditableTable
+                    <EditableFormTable
+                      isLocal={true}
                       dataSource={upstreams}
                       recordCount={recordCount}
                       onTableChange={this.handleTableChange}
diff --git a/src/routes/Plugin/Discovery/UpstreamTable.js b/src/routes/Plugin/Discovery/UpstreamTable.js
deleted file mode 100644
index d1cc7f1ad..000000000
--- a/src/routes/Plugin/Discovery/UpstreamTable.js
+++ /dev/null
@@ -1,213 +0,0 @@
-import React, {Component, createContext} from "react";
-import { Table, Input, Button, Popconfirm, Form } from 'antd';
-import AuthButton from "../../../utils/AuthButton";
-import {getIntlContent} from "../../../utils/IntlUtils";
-
-
-const EditableContext = createContext();
-
-const EditableRow = ({ form, index, ...props }) => (
-  <EditableContext.Provider value={form}>
-    <tr {...props} />
-  </EditableContext.Provider>
-);
-
-const EditableFormRow = Form.create()(EditableRow);
-
-class EditableCell extends Component {
-  state = {
-    editing: false,
-  };
-
-  toggleEdit = () => {
-    this.setState(prevState => ({ editing: !prevState.editing }), () => {
-      if (this.state.editing) {
-        this.input.focus();
-      }
-    });
-  };
-
-  save = e => {
-    const { record, handleSave } = this.props;
-    this.form.validateFields((error, values) => {
-      if (error && error[e.currentTarget.id]) {
-        return;
-      }
-      this.toggleEdit();
-      handleSave({ ...record, ...values });
-    });
-  };
-
-
-  renderCell = form => {
-    this.form = form;
-    const { children, dataIndex, record, title } = this.props;
-    const { editing } = this.state;
-    return editing ? (
-      <Form.Item style={{ margin: 0 }}>
-        {form.getFieldDecorator(dataIndex, {
-          rules: [
-            {
-              required: true,
-              message: `${title} is required.`,
-            },
-          ],
-          initialValue: record[dataIndex],
-        })(<Input allowClear ref={node => { this.input = node }} onPressEnter={this.save} onBlur={this.save} />
-        )}
-      </Form.Item>
-    ) : (
-      <div
-        className="editable-cell-value-wrap"
-        style={{ paddingRight: 24 }}
-        onClick={this.toggleEdit}
-      >
-        {children}
-      </div>
-    );
-  };
-
-  render() {
-    const {
-      editable,
-      dataIndex,
-      title,
-      record,
-      index,
-      handleSave,
-      children,
-      ...restProps
-    } = this.props;
-    return (
-      <td {...restProps}>
-        {editable ? (
-          <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
-        ) : (
-          children
-        )}
-      </td>
-    );
-  }
-}
-
-
-export default class EditableTable extends Component {
-  constructor(props) {
-    super(props);
-    this.columns = [
-      {
-        title: 'protocol',
-        dataIndex: 'protocol',
-        editable: true,
-        // width: '20%',
-        align: 'center'
-      },
-      {
-        title: 'url',
-        dataIndex: 'url',
-        editable: true,
-        width: '33%',
-        align: 'center'
-      },
-      {
-        title: 'status',
-        dataIndex: 'status',
-        editable: true,
-        // width: '19%',
-        align: 'center'
-      },
-      {
-        title: 'weight',
-        dataIndex: 'weight',
-        editable: true,
-        // width: '19%',
-        align: 'center'
-      },
-      {
-        title: getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM.OPERATION"),
-        dataIndex: 'operation',
-        align: 'center',
-        render: (text, record) =>
-          this.props.dataSource.length >= 1 ? (
-            <Popconfirm title={getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM.DELETE")} onConfirm={() => this.handleDelete(record.key)}>
-              <a>{getIntlContent("SHENYU.BUTTON.SYSTEM.DELETE")}</a>
-            </Popconfirm>
-          ) : null,
-      },
-    ];
-
-  }
-
-  handleDelete = key => {
-    const { dataSource } = this.props;
-    const newData = dataSource.filter(item => item.key !== key);
-    this.props.onTableChange(newData);
-  };
-
-  handleAdd = () => {
-    const { dataSource, recordCount} = this.props;
-    const newRecordCount = recordCount + 1;
-    const newData = {
-      key: newRecordCount,
-      protocol: 'protocol',
-      url: 'url',
-      status: '0',
-      weight: '0',
-    };
-    this.props.onTableChange([...dataSource, newData]);
-    this.props.onCountChange(newRecordCount);
-  };
-
-  handleSave = row => {
-    const newData = [...this.props.dataSource];
-    const index = newData.findIndex(item => row.key === item.key);
-    const item = newData[index];
-    newData.splice(index, 1, {
-      ...item,
-      ...row,
-    });
-    this.props.onTableChange(newData);
-  };
-
-  render() {
-    const { dataSource } = this.props;
-    const components = {
-      body: {
-        row: EditableFormRow,
-        cell: EditableCell,
-      },
-    };
-    const columns = this.columns.map(col => {
-      if (!col.editable) {
-        return col;
-      }
-      return {
-        ...col,
-        onCell: record => ({
-          record,
-          editable: col.editable,
-          dataIndex: col.dataIndex,
-          title: col.title,
-          handleSave: this.handleSave,
-        }),
-      };
-    });
-    return (
-      <div>
-        <AuthButton perms="plugin:tcpSelector:add">
-          <Button onClick={this.handleAdd} type="primary" style={{ marginBottom: 16 }}>
-            {getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM.ADD")}
-          </Button>
-        </AuthButton>
-        <Table
-          components={components}
-          rowClassName={() => 'editable-row'}
-          bordered
-          dataSource={dataSource}
-          columns={columns}
-        />
-      </div>
-    );
-  }
-}
-
diff --git a/src/routes/Plugin/Discovery/tcp.less b/src/routes/Plugin/Discovery/discovery.less
similarity index 99%
rename from src/routes/Plugin/Discovery/tcp.less
rename to src/routes/Plugin/Discovery/discovery.less
index ba2d5ae77..eddaaf46c 100644
--- a/src/routes/Plugin/Discovery/tcp.less
+++ b/src/routes/Plugin/Discovery/discovery.less
@@ -79,7 +79,7 @@
 }
 
 
-.tcpCard {
+.discoveryCard {
   :global {
     .ant-card-body {
       padding: 10px
diff --git a/src/routes/Plugin/Discovery/index.js b/src/routes/Plugin/Discovery/index.js
index 6d9efe9a9..baaf7c6d5 100644
--- a/src/routes/Plugin/Discovery/index.js
+++ b/src/routes/Plugin/Discovery/index.js
@@ -19,10 +19,10 @@ import React, {Component} from 'react';
 import {connect} from 'dva';
 import {Button, Pagination, Row, Switch, Tag, Input, Typography, message} from "antd";
 import {getIntlContent} from "../../../utils/IntlUtils";
-import tcpStyles from './tcp.less'
+import discoveryStyles from './discovery.less'
 import DiscoveryConfigModal from "./DiscoveryConfigModal";
 import ProxySelectorModal from "./ProxySelectorModal";
-import {TcpCard} from "./TcpCard";
+import {DiscoveryCard} from "./DiscoveryCard";
 import AuthButton from "../../../utils/AuthButton";
 import { getUpdateModal, updatePluginsEnabled } from "../../../utils/plugin";
 
@@ -35,13 +35,13 @@ const {Title} = Typography;
   ...shenyuDict,
   loading: loading.effects["global/fetchPlatform"]
 }))
-export default class TCPProxy extends Component {
+export default class DiscoveryProxy extends Component {
   constructor(props) {
     super(props);
     this.state = {
       searchKey: '',
       cardData: {
-        tcpType: '',
+        discoveryType: '',
         name: '',
         forwardPort: '',
         type: 'tcp',
@@ -71,7 +71,7 @@ export default class TCPProxy extends Component {
   componentDidMount() {
     const {dispatch, currentPage, pageSize} = this.props
     dispatch({
-      type: "discovery/fetchSelector",
+      type: "discovery/fetchProxySelectors",
       payload: {
         name: '',
         currentPage,
@@ -95,9 +95,9 @@ export default class TCPProxy extends Component {
   }
 
   // eslint-disable-next-line react/sort-comp
-  renderCards(selectorList = []) {
-    return selectorList.map(selector =>
-      <TcpCard key={selector.id} updateSelector={this.updateSelector} data={selector} handleDelete={this.handleDelete} handleRefresh={this.handleRefresh} />
+  renderCards(proxySelectorList = []) {
+    return proxySelectorList.map(selector =>
+      <DiscoveryCard key={selector.id} updateSelector={this.updateSelector} data={selector} handleDelete={this.handleDelete} handleRefresh={this.handleRefresh} />
     );
   }
 
@@ -111,7 +111,7 @@ export default class TCPProxy extends Component {
     })
     const {searchKey} = this.state;
     this.props.dispatch({
-      type: "discovery/fetchSelector",
+      type: "discovery/fetchProxySelectors",
       payload: {
         currentPage: page,
         pageSize,
@@ -152,7 +152,7 @@ export default class TCPProxy extends Component {
     this.setState({popup: ""});
     this.setState({
       cardData: {
-        tcpType: '',
+        discoveryType: '',
         name: '',
         forwardPort: '',
         type: 'tcp',
@@ -163,15 +163,7 @@ export default class TCPProxy extends Component {
           serverList: '',
           props: {}
         },
-        discoveryUpstreams: [
-          // {
-          //   protocol: '1',
-          //   url: '1',
-          //   status:'1',
-          //   weight: '1',
-          //   key: '1'
-          // }
-        ]
+        discoveryUpstreams: []
       }
     });
   };
@@ -201,11 +193,11 @@ export default class TCPProxy extends Component {
               discoveryDicts={discoveryDics}
               handleConfigDelete={this.handleConfigDelete}
               handleOk={values => {
-                const {name, serverList, props, tcpType} = values;
+                const {name, serverList, props, discoveryType} = values;
                 dispatch({
                   type: "discovery/set",
                   payload: {
-                    type: tcpType,
+                    type: discoveryType,
                     serverList,
                     name,
                     props,
@@ -257,7 +249,7 @@ export default class TCPProxy extends Component {
     const {searchKey} = this.state;
     const {currentPage, pageSize} = this.props
     this.props.dispatch({
-      type: "discovery/fetchSelector",
+      type: "discovery/fetchProxySelectors",
       payload: {
         currentPage,
         pageSize,
@@ -278,11 +270,11 @@ export default class TCPProxy extends Component {
         level: "1"
       },
       callback: discoveryConfigList => {
-        let tcpType = '';
+        let discoveryType = '';
         let id = null;
         let isSetConfig = false;
         if (discoveryConfigList !== null) {
-          tcpType = discoveryConfigList.type;
+          discoveryType = discoveryConfigList.type;
           id = discoveryConfigList.id
           isSetConfig = true;
         }
@@ -294,12 +286,22 @@ export default class TCPProxy extends Component {
               typeEnums={typeEnums}
               data={cardData}
               discoveryUpstreams={cardData.discoveryUpstreams}
-              tcpType={tcpType}
+              discoveryType={discoveryType}
               isAdd={true}
               isSetConfig={isSetConfig}
               discoveryDicts={discoveryDics}
               handleOk={values => {
-                const {name, forwardPort, props, listenerNode, handler, discoveryProps, serverList, discoveryType, upstreams} = values;
+                const {name, forwardPort, props, listenerNode, handler, discoveryProps, serverList, selectedDiscoveryType, upstreams} = values;
+                const upstreamsWithProps = upstreams.map(item => ({
+                  protocol: item.protocol,
+                  url: item.url,
+                  status: parseInt(item.status, 10),
+                  weight: item.weight,
+                  startupTime: item.startupTime,
+                  props: JSON.stringify({
+                    warmupTime: item.warmupTime
+                  })
+                }));
                 dispatch({
                   type: 'discovery/add',
                   payload: {
@@ -314,11 +316,11 @@ export default class TCPProxy extends Component {
                       id,
                       level: "0", // 0 selector
                       pluginName,
-                      discoveryType,
+                      discoveryType: selectedDiscoveryType,
                       serverList,
                       props: discoveryProps
                     },
-                    discoveryUpstreams: upstreams
+                    discoveryUpstreams: upstreamsWithProps
                   },
                   callback: () => {
                     this.closeModal();
@@ -340,9 +342,9 @@ export default class TCPProxy extends Component {
   }
 
   updateSelector = (id) => {
-    const {dispatch, selectorList, tcpType: discoveryType, currentPage, pageSize, plugins, typeEnums} = this.props;
+    const {dispatch, proxySelectorList, discoveryType, currentPage, pageSize, plugins, typeEnums} = this.props;
     const { discoveryDics, pluginName } = this.state;
-    const data = selectorList.find(value => value.id === id)
+    const data = proxySelectorList.find(value => value.id === id)
     const plugin = this.getPlugin(plugins, pluginName);
     let isSetConfig = false
     this.setState({
@@ -352,14 +354,20 @@ export default class TCPProxy extends Component {
       isSetConfig = true
     }
     const updateArray = data.discoveryUpstreams.map((item) => {
-      return { ...item, key: item.id };
+      let propsObj = JSON.parse(item.props || "{}");
+      if (item.props === null) {
+        propsObj = {
+          warmupTime: 10,
+        };
+      }
+      return { ...item, key: item.id, warmupTime: propsObj.warmupTime };
     });
     this.setState({
       popup: (
         <ProxySelectorModal
           recordCount={updateArray.length}
           discoveryUpstreams={updateArray}
-          tcpType={data.discovery.type}
+          discoveryType={data.discovery.type}
           typeEnums={typeEnums}
           isAdd={false}
           isSetConfig={isSetConfig}
@@ -368,6 +376,16 @@ export default class TCPProxy extends Component {
           discoveryDicts={discoveryDics}
           handleOk={values => {
             const {name, forwardPort, props, listenerNode, handler, discoveryProps, serverList, upstreams} = values;
+            const upstreamsWithProps = upstreams.map(item => ({
+              protocol: item.protocol,
+              url: item.url,
+              status: parseInt(item.status, 10),
+              weight: item.weight,
+              startupTime: item.startupTime,
+              props: JSON.stringify({
+                warmupTime: item.warmupTime
+              })
+            }));
             dispatch({
               type: 'discovery/update',
               payload: {
@@ -384,7 +402,7 @@ export default class TCPProxy extends Component {
                   serverList,
                   props: discoveryProps
                 },
-                discoveryUpstreams: upstreams
+                discoveryUpstreams: upstreamsWithProps
               },
               callback: () => {
                 this.closeUpdateModal();
@@ -446,14 +464,14 @@ export default class TCPProxy extends Component {
 
   render() {
     const {popup} = this.state;
-    const {selectorList, totalPage, currentPage, pageSize} = this.props;
+    const {proxySelectorList, totalPage, currentPage, pageSize} = this.props;
     const tag = {
       text: this.state.isPluginEnabled ? getIntlContent("SHENYU.COMMON.OPEN") : getIntlContent("SHENYU.COMMON.CLOSE"),
       color: this.state.isPluginEnabled ? 'green' : 'red'
     }
     return (
       <>
-        <div className={tcpStyles.main}>
+        <div className={discoveryStyles.main}>
           <Row style={{marginBottom: '0px', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
             <div style={{display: 'flex', alignItems: 'end', flex: 1, margin: 0}}>
               <Title level={2} style={{textTransform: 'capitalize', margin: '0 20px 0 0'}}>
@@ -476,7 +494,7 @@ export default class TCPProxy extends Component {
           </Row>
 
           <Row>
-            <div className={tcpStyles["header-bar"]}>
+            <div className={discoveryStyles["header-bar"]}>
               <h3 style={{overflow: "visible", margin: 0}}>
                 {getIntlContent("SHENYU.PLUGIN.SELECTOR.LIST.TITLE")}
               </h3>
@@ -529,7 +547,7 @@ export default class TCPProxy extends Component {
               alignItems: 'stretch'
             }}
             >
-              {this.renderCards(selectorList)}
+              {this.renderCards(proxySelectorList)}
             </div>
           </Row>
 
diff --git a/src/routes/Plugin/PluginRuleHandle/ParamPluginRuleHandle.js b/src/routes/Plugin/PluginRuleHandle/ParamPluginRuleHandle.js
index 7728ac87e..2aa8af2d2 100644
--- a/src/routes/Plugin/PluginRuleHandle/ParamPluginRuleHandle.js
+++ b/src/routes/Plugin/PluginRuleHandle/ParamPluginRuleHandle.js
@@ -16,7 +16,7 @@
  */
 
 import React, {Component} from "react";
-import {Form, Select, Row, Col, Input, Button, Tabs, Table} from "antd";
+import {Button, Col, Form, Input, Row, Select, Table, Tabs} from "antd";
 import {getIntlContent} from '../../../utils/IntlUtils'
 
 const {Option} = Select;
@@ -96,7 +96,6 @@ class ParamPluginRuleConfig extends Component {
     const data = {};
     const currentData = this.getCurrentData();
     const valueStr = JSON.stringify(currentData);
-    // console.log(currentData);
     if (value !== undefined) {
       try {
         Object.assign(data, JSON.parse(value));
@@ -315,8 +314,7 @@ export default class ParamPluginRuleHandle extends Component {
     const {
       form: {getFieldValue}
     } = this.props;
-    const value = getFieldValue("handle");
-    return value;
+    return getFieldValue("handle");
   };
 
   render() {
diff --git a/src/services/api.js b/src/services/api.js
index 28bb80ca0..e6b3ee365 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -1081,3 +1081,22 @@ export function fetchAlertReport(params) {
     }
   });
 }
+
+export function bindingSelector(params) {
+  return request(`${baseUrl}/proxy-selector/binding`,
+    {
+      method: `POST`,
+      body: params
+    });
+}
+
+export function updateDiscoveryUpstream(discoveryHandlerId, upstreams) {
+  return request(`${baseUrl}/discovery-upstream/${discoveryHandlerId}`,
+    {
+        method: `PUT`,
+        body: upstreams
+    });
+}
+
+
+
diff --git a/src/utils/AuthRoute.js b/src/utils/AuthRoute.js
index 50b9ff9ce..9380412a8 100644
--- a/src/utils/AuthRoute.js
+++ b/src/utils/AuthRoute.js
@@ -241,7 +241,6 @@ const setMenuIconAndSort = (menus, permissions) => {
       if (Array.isArray(menuArr)) {
         menuArr.forEach(menu => {
           const currentMenu = iconAndSortMap[formatRouteUrl(menu.path)];
-          // console.log(menu, currentMenu, menu.path);
           if (
             currentMenu &&
             currentMenu.meta.icon &&