From 0b9b621d3d60d29b1590bf17cb402b387e90444f Mon Sep 17 00:00:00 2001
From: dingchaofa <571797089@qq.com>
Date: Tue, 24 Mar 2020 13:07:29 +0800
Subject: [PATCH 1/5] feature:allow set vars filter

---
 src/components/VarArgs/index.vue | 121 +++++++++++++++++++++++++++++++
 1 file changed, 121 insertions(+)
 create mode 100644 src/components/VarArgs/index.vue

diff --git a/src/components/VarArgs/index.vue b/src/components/VarArgs/index.vue
new file mode 100644
index 0000000000..9e36fbab8c
--- /dev/null
+++ b/src/components/VarArgs/index.vue
@@ -0,0 +1,121 @@
+<!--
+#
+# 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"
+          filterable
+          allow-create
+          default-first-option
+          :placeholder="$t('schema.route.inputMultipleValues')"
+        >
+          <el-option
+            v-for="name in varNames"
+            :key="name"
+            :label="name"
+            :value="name"
+          />
+        </el-select>
+        <el-select
+          v-model="item.operator"
+          placeholder="Operator"
+        >
+          <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=""
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="danger"
+          @click.prevent="removeVar(item)"
+        >
+          {{ $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 } from 'vue-property-decorator'
+
+@Component({
+  name: 'VarArgs'
+})
+export default class extends Vue {
+  private isFullscreen = false;
+  private vars = [];
+  private varNames = ['arg_id', 'arg_name'];
+
+  private varOperator = ['==', '~=', '>', '<', '~~'];
+
+  @Watch('vars', { immediate: true, deep: true })
+  private onvarsChange() {
+    console.log(this.vars)
+    const val = this.vars.map(e => Object.values(e))
+    this.$emit('onChange', val)
+  }
+
+  private addVar() {
+    (this.vars as any).push({
+      name: null,
+      operator: null,
+      value: 0
+    })
+  }
+
+  private removeVar(item: any) {
+    this.$confirm(`Do you want to remove the var?`, 'Warning', {
+      confirmButtonText: 'Confirm',
+      cancelButtonText: 'Cancel',
+      type: 'warning'
+    })
+      .then(async() => {
+        const index = (this.vars as any).indexOf(item)
+        if (index !== -1) {
+          this.vars.splice(index, 1)
+        }
+      })
+      .catch(() => {})
+  }
+}
+</script>

From 5afc406849aa5d59b6342a4bc641c813f1b32bd6 Mon Sep 17 00:00:00 2001
From: dingchaofa <571797089@qq.com>
Date: Tue, 24 Mar 2020 13:11:58 +0800
Subject: [PATCH 2/5] feature:allow set vars filter in router configuration
 page

---
 src/lang/en.ts                   |  1 +
 src/lang/zh.ts                   |  1 +
 src/views/schema/routes/edit.vue | 23 ++++++++++++++++++++++-
 vue.config.js                    |  2 +-
 4 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/lang/en.ts b/src/lang/en.ts
index 40157301ab..8a2f4c2c16 100644
--- a/src/lang/en.ts
+++ b/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'
   },
diff --git a/src/lang/zh.ts b/src/lang/zh.ts
index c594dda522..64164e1085 100644
--- a/src/lang/zh.ts
+++ b/src/lang/zh.ts
@@ -75,6 +75,7 @@ export default {
     cancel: '取消',
     add_plugin: '添加 Plugin',
     add_node: '添加 Node',
+    add_var: '添加 Var',
     delete: '删除',
     addValue: '添加值'
   },
diff --git a/src/views/schema/routes/edit.vue b/src/views/schema/routes/edit.vue
index 890f6760a2..8acefae0a9 100644
--- a/src/views/schema/routes/edit.vue
+++ b/src/views/schema/routes/edit.vue
@@ -194,6 +194,7 @@
           {{ $t('button.add_plugin') }}
         </el-button>
       </el-form-item>
+      <VarArgs @onChange="onVarArgsChange" />
 
       <el-form-item>
         <el-button
@@ -222,6 +223,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 +234,8 @@ import { TagsViewModule } from '@/store/modules/tags-view'
 @Component({
   name: 'RouterEdit',
   components: {
-    PluginDialog
+    PluginDialog,
+    VarArgs
   }
 })
 
@@ -245,6 +248,7 @@ export default class extends Vue {
     service_id: '',
     methods: [],
     plugins: {},
+    vars: [],
     desc: ''
   }
 
@@ -294,6 +298,7 @@ export default class extends Vue {
       service_id: '',
       methods: [],
       plugins: {},
+      vars: [],
       desc: ''
     }
   }
@@ -338,6 +343,7 @@ export default class extends Vue {
           service_id = '',
           methods = [],
           plugins = {},
+          vars = [],
           desc = ''
         }
       }
@@ -359,6 +365,7 @@ export default class extends Vue {
       service_id,
       methods,
       plugins,
+      vars,
       desc
     }
   }
@@ -476,6 +483,10 @@ export default class extends Vue {
         Vue.delete(this.form.plugins, name)
       }).catch(() => {})
   }
+
+  private onVarArgsChange(val: any) {
+    this.form.vars = val
+  }
 }
 </script>
 
@@ -497,5 +508,15 @@ export default class extends Vue {
       }
     }
   }
+  .var-item {
+    .el-form-item {
+      margin-bottom: 10px;
+      display: inline-block;
+      .el-form-item__label {}
+      .el-form-item__content {
+        margin-right: 10px;
+      }
+    }
+  }
 }
 </style>
diff --git a/vue.config.js b/vue.config.js
index 5e6dad19b7..06f3289fc6 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -28,7 +28,7 @@ module.exports = {
   productionSourceMap: false,
   devServer: {
     // https://cli.vuejs.org/zh/config/#devserver-proxy
-    proxy: 'http://127.0.0.1:9080/apisix/admin/'
+    proxy: 'http://192.168.10.152/apisix/admin/'
   },
   pluginOptions: {
     'style-resources-loader': {

From 1f8ab14eed03ddc116eb4ee1c36b2fe06e77a661 Mon Sep 17 00:00:00 2001
From: dingchaofa <571797089@qq.com>
Date: Tue, 24 Mar 2020 15:39:35 +0800
Subject: [PATCH 3/5] feature:allow set vars filter in router configuration
 page

---
 src/components/VarArgs/index.vue | 39 +++++++++++++++++++-------------
 src/views/schema/routes/edit.vue |  5 +++-
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/components/VarArgs/index.vue b/src/components/VarArgs/index.vue
index 9e36fbab8c..23d2d3ce6d 100644
--- a/src/components/VarArgs/index.vue
+++ b/src/components/VarArgs/index.vue
@@ -28,10 +28,11 @@
       <el-form-item :prop="'var.' + index + '.ip'">
         <el-select
           v-model="item.name"
+          :placeholder="$t('schema.route.inputMultipleValues')"
           filterable
           allow-create
           default-first-option
-          :placeholder="$t('schema.route.inputMultipleValues')"
+          @change="onChange"
         >
           <el-option
             v-for="name in varNames"
@@ -43,6 +44,7 @@
         <el-select
           v-model="item.operator"
           placeholder="Operator"
+          @change="onChange"
         >
           <el-option
             v-for="operator in varOperator"
@@ -56,12 +58,13 @@
         <el-input
           v-model="item.value"
           placeholder=""
+          @input="onChange"
         />
       </el-form-item>
       <el-form-item>
         <el-button
           type="danger"
-          @click.prevent="removeVar(item)"
+          @click.prevent="removeVar(index)"
         >
           {{ $t("button.delete") }}
         </el-button>
@@ -76,44 +79,48 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Watch } from 'vue-property-decorator'
+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 vars = [];
-  private varNames = ['arg_id', 'arg_name'];
+  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 = ['==', '~=', '>', '<', '~~'];
 
-  @Watch('vars', { immediate: true, deep: true })
-  private onvarsChange() {
-    console.log(this.vars)
-    const val = this.vars.map(e => Object.values(e))
-    this.$emit('onChange', val)
+  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: 0
+      value: null
     })
+    this.onChange()
   }
 
-  private removeVar(item: any) {
+  private removeVar(index:number) {
     this.$confirm(`Do you want to remove the var?`, 'Warning', {
       confirmButtonText: 'Confirm',
       cancelButtonText: 'Cancel',
       type: 'warning'
     })
       .then(async() => {
-        const index = (this.vars as any).indexOf(item)
-        if (index !== -1) {
-          this.vars.splice(index, 1)
-        }
+        this.vars.splice(index, 1)
+        this.onChange()
       })
       .catch(() => {})
   }
diff --git a/src/views/schema/routes/edit.vue b/src/views/schema/routes/edit.vue
index 8acefae0a9..a8797d66e1 100644
--- a/src/views/schema/routes/edit.vue
+++ b/src/views/schema/routes/edit.vue
@@ -194,7 +194,10 @@
           {{ $t('button.add_plugin') }}
         </el-button>
       </el-form-item>
-      <VarArgs @onChange="onVarArgsChange" />
+      <VarArgs
+        :p-vars.sync="form.vars"
+        @onChange="onVarArgsChange"
+      />
 
       <el-form-item>
         <el-button

From 1e4ad8fed70c004d41bad98afc6b51a69ab0bc14 Mon Sep 17 00:00:00 2001
From: dingchaofa <571797089@qq.com>
Date: Tue, 24 Mar 2020 15:56:55 +0800
Subject: [PATCH 4/5] fiexed some irregular style

---
 src/components/VarArgs/index.vue   | 2 +-
 src/views/schema/routes/edit.vue   | 1 -
 src/views/schema/upstream/edit.vue | 3 +--
 vue.config.js                      | 2 +-
 4 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/VarArgs/index.vue b/src/components/VarArgs/index.vue
index 23d2d3ce6d..1abcdecd8c 100644
--- a/src/components/VarArgs/index.vue
+++ b/src/components/VarArgs/index.vue
@@ -113,7 +113,7 @@ export default class extends Vue {
   }
 
   private removeVar(index:number) {
-    this.$confirm(`Do you want to remove the var?`, 'Warning', {
+    this.$confirm('Do you want to remove the var?', 'Warning', {
       confirmButtonText: 'Confirm',
       cancelButtonText: 'Cancel',
       type: 'warning'
diff --git a/src/views/schema/routes/edit.vue b/src/views/schema/routes/edit.vue
index a8797d66e1..84135c67b5 100644
--- a/src/views/schema/routes/edit.vue
+++ b/src/views/schema/routes/edit.vue
@@ -515,7 +515,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;
       }
diff --git a/src/views/schema/upstream/edit.vue b/src/views/schema/upstream/edit.vue
index 7994700922..445e42d032 100644
--- a/src/views/schema/upstream/edit.vue
+++ b/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;
       }
diff --git a/vue.config.js b/vue.config.js
index 06f3289fc6..5e6dad19b7 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -28,7 +28,7 @@ module.exports = {
   productionSourceMap: false,
   devServer: {
     // https://cli.vuejs.org/zh/config/#devserver-proxy
-    proxy: 'http://192.168.10.152/apisix/admin/'
+    proxy: 'http://127.0.0.1:9080/apisix/admin/'
   },
   pluginOptions: {
     'style-resources-loader': {

From c54450f7069ad1442d466bf66fda76e1e289314a Mon Sep 17 00:00:00 2001
From: dingchaofa <571797089@qq.com>
Date: Tue, 24 Mar 2020 18:18:31 +0800
Subject: [PATCH 5/5] feature:allow set filter_func in router configuation page

---
 src/lang/en.ts                   |  3 ++-
 src/lang/zh.ts                   |  3 ++-
 src/views/schema/routes/edit.vue | 37 ++++++++++++++++++++++++++------
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/lang/en.ts b/src/lang/en.ts
index 8a2f4c2c16..c82338e987 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -74,7 +74,8 @@ export default {
   schema: {
     route: {
       inputMultipleValues: 'Input value then press return button',
-      propertyHostsTip: 'Any values are supported'
+      propertyHostsTip: 'Any values are supported',
+      fileterFunc: 'User-defined filtering function，Begins with "function()" and ends with "end".'
     }
   },
   upstream: {
diff --git a/src/lang/zh.ts b/src/lang/zh.ts
index 64164e1085..b35ad59682 100644
--- a/src/lang/zh.ts
+++ b/src/lang/zh.ts
@@ -82,7 +82,8 @@ export default {
   schema: {
     route: {
       inputMultipleValues: '输入值后并回车',
-      propertyHostsTip: '任何值均可'
+      propertyHostsTip: '任何值均可',
+      fileterFunc: '用户自定义的过滤函数，以‘function()’开头，以‘end’结尾。'
     }
   },
   upstream: {
diff --git a/src/views/schema/routes/edit.vue b/src/views/schema/routes/edit.vue
index 84135c67b5..80c5dedc67 100644
--- a/src/views/schema/routes/edit.vue
+++ b/src/views/schema/routes/edit.vue
@@ -199,6 +199,18 @@
         @onChange="onVarArgsChange"
       />
 
+      <el-form-item
+        label="filter_func"
+        prop="filter_func"
+      >
+        <el-input
+          v-model="form.filter_func"
+          type="textarea"
+          :autosize="{minRows: 2, maxRows: 4}"
+          :placeholder="$t('schema.route.fileterFunc')"
+        />
+      </el-form-item>
+
       <el-form-item>
         <el-button
           type="primary"
@@ -234,6 +246,8 @@ import { getUpstreamList } from '@/api/schema/upstream'
 import { getServiceList } from '@/api/schema/services'
 import { TagsViewModule } from '@/store/modules/tags-view'
 
+import i18n from '@/lang'
+
 @Component({
   name: 'RouterEdit',
   components: {
@@ -252,17 +266,22 @@ export default class extends Vue {
     methods: [],
     plugins: {},
     vars: [],
-    desc: ''
+    desc: '',
+    filter_func: ''
   }
 
   // TODO: can add existed info from route list
   private ExistedUris = [{}]
   private ExistedHosts = [{}]
+  private validateFilterFuncRegexp = /^function\(\)[^]*?\bend$/
 
   private rules = {
     uris: {
       required: true
-    }
+    },
+    filter_func: [
+      { pattern: this.validateFilterFuncRegexp, trigger: 'blur', message: i18n.t('schema.route.fileterFunc') }
+    ]
   }
   private isEditMode: boolean = false
 
@@ -302,7 +321,8 @@ export default class extends Vue {
       methods: [],
       plugins: {},
       vars: [],
-      desc: ''
+      desc: '',
+      filter_func: ''
     }
   }
 
@@ -347,7 +367,8 @@ export default class extends Vue {
           methods = [],
           plugins = {},
           vars = [],
-          desc = ''
+          desc = '',
+          filter_func = ''
         }
       }
     } = await getRouter(id) as any
@@ -369,12 +390,13 @@ export default class extends Vue {
       methods,
       plugins,
       vars,
-      desc
+      desc,
+      filter_func
     }
   }
 
   private async onSubmit() {
-    (this.$refs.form as any).validate(async(valid: boolean) => {
+    (this.$refs.form as any).validate(async(valid: boolean, invalidField: any) => {
       if (valid) {
         let data = Object.assign({}, this.form)
         if (!data.methods.length) {
@@ -411,6 +433,9 @@ export default class extends Vue {
           })
         }
       } else {
+        if (invalidField.filter_func) {
+          this.$message.warning(invalidField.filter_func[0].message)
+        }
         return false
       }
     })