feature:allow set vars filter in router configuration page

src/components/VarArgs/index.vue

@@ -0,0 +1,128 @@
+<!--
+#
+# 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.
+#
+-->
+
+<template>
+  <el-form>
+    <el-form-item
+      v-for="(item, index) in vars"
+      :key="index"
+      :label="'Var' + (index + 1)"
+      class="var-item"
+    >
+      <el-form-item :prop="'var.' + index + '.ip'">
+        <el-select
+          v-model="item.name"
+          :placeholder="$t('schema.route.inputMultipleValues')"
+          filterable
+          allow-create
+          default-first-option
+          @change="onChange"
+        >
+          <el-option
+            v-for="name in varNames"
+            :key="name"
+            :label="name"
+            :value="name"
+          />
+        </el-select>
+        <el-select
+          v-model="item.operator"
+          placeholder="Operator"
+          @change="onChange"
+        >
+          <el-option
+            v-for="operator in varOperator"
+            :key="operator"
+            :label="operator"
+            :value="operator"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-input
+          v-model="item.value"
+          placeholder=""
+          @input="onChange"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="danger"
+          @click.prevent="removeVar(index)"
+        >
+          {{ $t("button.delete") }}
+        </el-button>
+      </el-form-item>
+    </el-form-item>
+    <el-form-item>
+      <el-button @click="addVar">
+        {{ $t("button.add_var") }}
+      </el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
+
+@Component({
+  name: 'VarArgs'
+})
+export default class extends Vue {
+  @Prop({ default: () => [] }) private pVars!: any
+  private isFullscreen = false;
+  private get vars() {
+    const _vars = this.pVars.map((arr:Array<any>) => {
+      const [name, operator, value] = arr
+      return { name, operator, value }
+    })
+    return _vars
+  }
+  private varNames = ['remote_addr', 'host', 'uri', 'http_user_agent', 'http_referer', 'http_cookie', 'http_accept_language', 'request_uri', 'query_string', 'remote_port', 'hostname', 'arg_id'];
+
+  private varOperator = ['==', '~=', '>', '<', '~~'];
+
+  private onChange() {
+    const val = this.vars.map((e:any) => Object.values(e))
+    this.$emit('update:pVars', val)
+  }
+
+  private addVar() {
+    (this.vars as any).push({
+      name: null,
+      operator: null,
+      value: null
+    })
+    this.onChange()
+  }
+
+  private removeVar(index:number) {
+    this.$confirm('Do you want to remove the var?', 'Warning', {
+      confirmButtonText: 'Confirm',
+      cancelButtonText: 'Cancel',
+      type: 'warning'
+    })
+      .then(async() => {
+        this.vars.splice(index, 1)
+        this.onChange()
+      })
+      .catch(() => {})
+  }
+}
+</script>

src/lang/en.ts

@@ -67,6 +67,7 @@ export default {
     cancel: 'Cancel',
     add_plugin: 'Add Plugin',
     add_node: 'Add Node',
+    add_var: 'Add Var',
     delete: 'Delete',
     addValue: 'Add Value'
   },

src/lang/zh.ts

@@ -75,6 +75,7 @@ export default {
     cancel: '取消',
     add_plugin: '添加 Plugin',
     add_node: '添加 Node',
+    add_var: '添加 Var',
     delete: '删除',
     addValue: '添加值'
   },

src/views/schema/routes/edit.vue

@@ -194,6 +194,10 @@
           {{ $t('button.add_plugin') }}
         </el-button>
       </el-form-item>
+      <VarArgs
+        :p-vars.sync="form.vars"
+        @onChange="onVarArgsChange"
+      />
 
       <el-form-item>
         <el-button
@@ -222,6 +226,7 @@ import { Component, Vue } from 'vue-property-decorator'
 import { Form } from 'element-ui'
 
 import PluginDialog from '@/components/PluginDialog/index.vue'
+import VarArgs from '@/components/VarArgs/index.vue'
 
 import { getRouter, createRouter, updateRouter } from '@/api/schema/routes'
 import { getPluginList } from '@/api/schema/plugins'
@@ -232,7 +237,8 @@ import { TagsViewModule } from '@/store/modules/tags-view'
 @Component({
   name: 'RouterEdit',
   components: {
-    PluginDialog
+    PluginDialog,
+    VarArgs
   }
 })
 
@@ -245,6 +251,7 @@ export default class extends Vue {
     service_id: '',
     methods: [],
     plugins: {},
+    vars: [],
     desc: ''
   }
 
@@ -294,6 +301,7 @@ export default class extends Vue {
       service_id: '',
       methods: [],
       plugins: {},
+      vars: [],
       desc: ''
     }
   }
@@ -338,6 +346,7 @@ export default class extends Vue {
           service_id = '',
           methods = [],
           plugins = {},
+          vars = [],
           desc = ''
         }
       }
@@ -359,6 +368,7 @@ export default class extends Vue {
       service_id,
       methods,
       plugins,
+      vars,
       desc
     }
   }
@@ -476,6 +486,10 @@ export default class extends Vue {
         Vue.delete(this.form.plugins, name)
       }).catch(() => {})
   }
+
+  private onVarArgsChange(val: any) {
+    this.form.vars = val
+  }
 }
 </script>
 
@@ -497,5 +511,14 @@ export default class extends Vue {
       }
     }
   }
+  .var-item {
+    .el-form-item {
+      margin-bottom: 10px;
+      display: inline-block;
+      .el-form-item__content {
+        margin-right: 10px;
+      }
+    }
+  }
 }
 </style>

src/views/schema/upstream/edit.vue

@@ -389,7 +389,7 @@ export default class extends Vue {
   }
 
   private removeNode(item: any) {
-    this.$confirm(`Do you want to remove the node?`, 'Warning', {
+    this.$confirm('Do you want to remove the node?', 'Warning', {
       confirmButtonText: 'Confirm',
       cancelButtonText: 'Cancel',
       type: 'warning'
@@ -425,7 +425,6 @@ export default class extends Vue {
     .el-form-item {
       margin-bottom: 10px;
       display: inline-block;
-      .el-form-item__label {}
       .el-form-item__content {
         margin-right: 10px;
       }