[type:issue] Support for gray release in divide-plugin.

Author: yunlongn

src/routes/Plugin/Common/index.js

@@ -431,6 +431,7 @@ export default class Common extends Component {
       startupTime: item.startupTime,
       props: JSON.stringify({
         warmupTime: item.warmupTime,
+        gray: item.gray + "",
       }),
       namespaceId: currentNamespaceId,
     }));
@@ -482,6 +483,7 @@ export default class Common extends Component {
       weight: item.weight,
       props: JSON.stringify({
         warmupTime: item.warmupTime,
+        gray: item.gray + "",
       }),
       discoveryHandlerId,
       namespaceId: currentNamespaceId,
@@ -543,9 +545,10 @@ export default class Common extends Component {
               if (item.props === null) {
                 propsObj = {
                   warmupTime: 10,
+                  gray: "false",
                 };
               }
-              return { ...item, key: item.id, warmupTime: propsObj.warmupTime };
+              return { ...item, key: item.id, warmupTime: propsObj.warmupTime, gray: propsObj.gray };
             });
           }
           let discoveryHandlerId = selector.discoveryHandler

src/routes/Plugin/Discovery/DiscoveryUpstreamTable.js

@@ -25,6 +25,7 @@ import {
   Popconfirm,
   Select,
   Table,
+  Switch,
 } from "antd";
 import { getIntlContent } from "../../../utils/IntlUtils";
 
@@ -43,6 +44,8 @@ class EditableCell extends Component {
           <Option value="1">close</Option>
         </Select>
       );
+    } else if (this.props.inputType === "switch") {
+      return <Switch />;
     }
     return <Input />;
   };
@@ -62,15 +65,26 @@ class EditableCell extends Component {
       <td {...restProps}>
         {editing ? (
           <Form.Item style={{ margin: 0 }}>
-            {getFieldDecorator(dataIndex, {
-              rules: [
-                {
-                  required: true,
-                  message: `Please Input ${title}!`,
-                },
-              ],
-              initialValue: record[dataIndex],
-            })(this.getInput())}
+            {dataIndex === "gray"
+              ? getFieldDecorator(dataIndex, {
+                rules: [
+                  {
+                    required: true,
+                    message: `Please Input ${title}!`,
+                  },
+                ],
+                valuePropName: "checked",
+                initialValue: record[dataIndex],
+              })(this.getInput())
+              : getFieldDecorator(dataIndex, {
+                rules: [
+                  {
+                    required: true,
+                    message: `Please Input ${title}!`,
+                  },
+                ],
+                initialValue: record[dataIndex],
+              })(this.getInput())}
           </Form.Item>
         ) : (
           children
@@ -136,6 +150,23 @@ class EditableTable extends Component {
         editable: true,
         align: "center",
       },
+      {
+        title: "gray",
+        dataIndex: "gray",
+        editable: true,
+        align: "center",
+        render: (text, record) => {
+          return (
+            <Switch
+              checked={Boolean(record.gray)}
+              onChange={(v) => {
+                record.gray = v;
+                this.saveGray(record, record.key);
+              }}
+            />
+          );
+        },
+      },
       {
         title: getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM.OPERATION"),
         dataIndex: "operation",
@@ -228,6 +259,7 @@ class EditableTable extends Component {
       weight: 50,
       startupTime: 0,
       warmupTime: 10,
+      gray: false,
     };
     this.props.onTableChange([...dataSource, newData]);
     this.props.onCountChange(newRecordCount);
@@ -259,6 +291,25 @@ class EditableTable extends Component {
     });
   }
 
+  saveGray(row, key) {
+    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);
+    } else {
+      const { recordCount } = this.props;
+      row.key = recordCount + 1;
+      newData.push(row);
+      this.props.onCountChange(recordCount + 1);
+      this.props.onTableChange(newData);
+    }
+  }
+
   edit(key) {
     this.setState({ editingKey: key });
   }
@@ -284,6 +335,8 @@ class EditableTable extends Component {
         inputType = "number";
       } else if (col.dataIndex === "status") {
         inputType = "dropdown";
+      } else if (col.dataIndex === "gray") {
+        inputType = "switch";
       }
       return {
         ...col,

src/routes/Plugin/Discovery/index.js

@@ -338,6 +338,7 @@ export default class DiscoveryProxy extends Component {
                   startupTime: item.startupTime,
                   props: JSON.stringify({
                     warmupTime: item.warmupTime,
+                    gray: item.gray + "",
                   }),
                 }));
                 dispatch({
@@ -406,9 +407,10 @@ export default class DiscoveryProxy extends Component {
       if (item.props === null) {
         propsObj = {
           warmupTime: 10,
+          gray: "false",
         };
       }
-      return { ...item, key: item.id, warmupTime: propsObj.warmupTime };
+      return { ...item, key: item.id, warmupTime: propsObj.warmupTime, gray: propsObj.gray };
     });
     this.setState({
       popup: (
@@ -441,6 +443,7 @@ export default class DiscoveryProxy extends Component {
               startupTime: item.startupTime,
               props: JSON.stringify({
                 warmupTime: item.warmupTime,
+                gray: item.gray + "",
               }),
             }));
             dispatch({