This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-apisix-dashboard.git
The following commit(s) were added to refs/heads/master by this push:
new df4c6be feature:allow set vars filter in router configuration page
(#160)
df4c6be is described below
commit df4c6bea1717b3c6eba07eeb7e4b5d58f22020d8
Author: chaofa <[email protected]>
AuthorDate: Tue Mar 24 16:12:30 2020 +0800
feature:allow set vars filter in router configuration page (#160)
* feature:allow set vars filter
* feature:allow set vars filter in router configuration page
* feature:allow set vars filter in router configuration page
* fiexed some irregular style
---
src/components/VarArgs/index.vue | 128 +++++++++++++++++++++++++++++++++++++
src/lang/en.ts | 1 +
src/lang/zh.ts | 1 +
src/views/schema/routes/edit.vue | 25 +++++++-
src/views/schema/upstream/edit.vue | 3 +-
5 files changed, 155 insertions(+), 3 deletions(-)
diff --git a/src/components/VarArgs/index.vue b/src/components/VarArgs/index.vue
new file mode 100644
index 0000000..1abcdec
--- /dev/null
+++ b/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>
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 4015730..8a2f4c2 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 c594dda..64164e1 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 890f676..84135c6 100644
--- a/src/views/schema/routes/edit.vue
+++ b/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>
diff --git a/src/views/schema/upstream/edit.vue
b/src/views/schema/upstream/edit.vue
index 7994700..445e42d 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;
}
