Upstream support websocket enable and hashOn select (#118)

* feature: upstream support enable websocket and hashOn

* fix tips

* add space

* fix format as comment

* fix

Author: lilien1010

src/lang/en.ts

@@ -75,5 +75,13 @@ export default {
       inputMultipleValues: 'Input value then press return button',
       propertyHostsTip: 'Any values are supported'
     }
+  },
+  upstream: {
+    websocket: {
+      EnabledTip: 'WebSocket enabled',
+      DisabledTip: 'WebSocket disabled'
+    },
+    keyTip: 'You can edit and input any value here,and press Enter to confirm.',
+    hashOnTip: 'Select a hash on.'
   }
 }

src/lang/zh.ts

@@ -83,5 +83,13 @@ export default {
       inputMultipleValues: '输入值后并回车',
       propertyHostsTip: '任何值均可'
     }
+  },
+  upstream: {
+    websocket: {
+      EnabledTip: 'WebSocket 打开',
+      DisabledTip: 'WebSocket 关闭'
+    },
+    keyTip: '你可以编辑并输入任何值,输入值后回车确认。',
+    hashOnTip: '选择 chash 参数来源。'
   }
 }

src/views/schema/routes/edit.vue

@@ -383,6 +383,7 @@ export default class extends Vue {
           }
         })
 
+        delete data['tempPlugin']
         if (this.isEditMode) {
           await updateRouter(this.$route.params.id, data)
         } else {

src/views/schema/upstream/edit.vue

@@ -53,6 +53,28 @@
         </el-select>
       </el-form-item>
 
+      <el-form-item
+        label="Hash On"
+      >
+        <el-select
+          v-model="form.hash_on"
+          filterable
+          default-first-option
+          value-key="form.hash_on"
+          :disabled="form.type !== 'chash'"
+        >
+          <el-option
+            v-for="item in defaultHashOnKeys"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <p class="tip">
+          {{ $t('upstream.hashOnTip') }}
+        </p>
+      </el-form-item>
+
       <el-form-item
         label="Key"
       >
@@ -73,6 +95,23 @@
             :value="item.value"
           />
         </el-select>
+        <p class="tip">
+          {{ $t('upstream.keyTip') }}
+        </p>
+      </el-form-item>
+
+      <el-form-item
+        label="WebSocket"
+      >
+        <el-switch
+          v-model="form.enable_websocket"
+
+          active-color="#13ce66"
+          inactive-color="#ff4949"
+        />
+        <p class="tip">
+          {{ form.enable_websocket ? $t('upstream.websocket.EnabledTip') : $t('upstream.websocket.DisabledTip') }}
+        </p>
       </el-form-item>
 
       <el-form-item
@@ -159,7 +198,9 @@ export default class extends Vue {
     type: null,
     key: null,
     nodes: [],
-    desc: ''
+    desc: '',
+    enable_websocket: null,
+    hash_on: null
   }
 
   private rules = {
@@ -171,6 +212,25 @@ export default class extends Vue {
 
   private types = ['roundrobin', 'chash']
 
+  private defaultHashOnKeys = [
+    {
+      value: 'vars',
+      label: 'vars'
+    },
+    {
+      value: 'header',
+      label: 'header'
+    },
+    {
+      value: 'cookie',
+      label: 'cookie'
+    },
+    {
+      value: 'consumer',
+      label: 'consumer'
+    }
+  ]
+
   private defaultHashKeys = [
     {
       value: 'remote_addr',
@@ -230,7 +290,9 @@ export default class extends Vue {
           type = null,
           nodes = [],
           key = null,
-          desc = ''
+          desc = '',
+          enable_websocket = false,
+          hash_on = null
         }
       }
     } = (await getUpstream(id)) as any
@@ -248,7 +310,9 @@ export default class extends Vue {
       type,
       key,
       nodes,
-      desc
+      desc,
+      enable_websocket,
+      hash_on
     }
   }
 
@@ -348,6 +412,13 @@ export default class extends Vue {
       .el-input {
         width: 193px;
       }
+      .tip {
+        line-height: 24px;
+        font-size: 12px;
+        margin: 0;
+        color: #8e8c8c;
+        display: inline;
+      }
     }
   }
   .node-item {