实现基本的匹配条件管理

This commit is contained in:
GoEdgeLab
2020-09-29 11:28:39 +08:00
parent 43de7e4678
commit ba2bbaff0b
19 changed files with 613 additions and 23 deletions

View File

@@ -0,0 +1,39 @@
package conds
import (
"encoding/json"
"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/server/settings/conds/condutils"
"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs/shared"
"github.com/iwind/TeaGo/actions"
)
type AddCondPopupAction struct {
actionutils.ParentAction
}
func (this *AddCondPopupAction) Init() {
}
func (this *AddCondPopupAction) RunGet(params struct{}) {
this.Data["components"] = condutils.ReadAllAvailableCondTypes()
this.Show()
}
func (this *AddCondPopupAction) RunPost(params struct {
CondType string
CondJSON []byte
Must *actions.Must
}) {
condConfig := &shared.HTTPRequestCond{}
err := json.Unmarshal(params.CondJSON, condConfig)
if err != nil {
this.Fail("解析条件设置时发生了错误:" + err.Error())
}
condConfig.Type = params.CondType
this.Data["cond"] = condConfig
this.Success()
}

View File

@@ -0,0 +1,37 @@
package conds
import (
"encoding/json"
"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/server/settings/conds/condutils"
"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs/shared"
"github.com/iwind/TeaGo/actions"
)
type AddGroupPopupAction struct {
actionutils.ParentAction
}
func (this *AddGroupPopupAction) Init() {
}
func (this *AddGroupPopupAction) RunGet(params struct{}) {
this.Data["components"] = condutils.ReadAllAvailableCondTypes()
this.Show()
}
func (this *AddGroupPopupAction) RunPost(params struct {
CondGroupJSON []byte
Must *actions.Must
}) {
groupConfig := &shared.HTTPRequestCondGroup{}
err := json.Unmarshal(params.CondGroupJSON, groupConfig)
if err != nil {
this.Fail("解析条件时发生错误:" + err.Error())
}
this.Data["group"] = groupConfig
this.Success()
}

View File

@@ -0,0 +1,48 @@
package condutils
import (
"encoding/json"
"github.com/iwind/TeaGo/Tea"
_ "github.com/iwind/TeaGo/bootstrap"
"github.com/iwind/TeaGo/files"
"github.com/iwind/TeaGo/logs"
"path/filepath"
)
type CondJSComponent struct {
Type string `json:"type"`
Name string `json:"name"`
Description string `json:"description"`
Component string `json:"component"`
}
// 读取所有可用的条件
func ReadAllAvailableCondTypes() []*CondJSComponent {
result := []*CondJSComponent{}
dir := Tea.Root + "/web/"
if Tea.IsTesting() {
dir = filepath.Dir(Tea.Root) + "/web"
}
dir += "/public/js/conds/"
jsonFiles := files.NewFile(dir).List()
for _, file := range jsonFiles {
if file.Ext() == ".json" {
data, err := file.ReadAll()
if err != nil {
logs.Println("[COND]read data from json file: " + err.Error())
continue
}
c := []*CondJSComponent{}
err = json.Unmarshal(data, &c)
if err != nil {
logs.Println("[COND]decode json failed: " + err.Error())
continue
}
result = append(result, c...)
}
}
return result
}

View File

@@ -0,0 +1,7 @@
package condutils
import "testing"
func TestReadAllAvailableCondTypes(t *testing.T) {
t.Log(ReadAllAvailableCondTypes())
}

View File

@@ -0,0 +1,17 @@
package conds
import (
"github.com/TeaOSLab/EdgeAdmin/internal/web/helpers"
"github.com/iwind/TeaGo"
)
func init() {
TeaGo.BeforeStart(func(server *TeaGo.Server) {
server.
Helper(helpers.NewUserMustAuth()).
Prefix("/servers/server/settings/conds").
GetPost("/addGroupPopup", new(AddGroupPopupAction)).
GetPost("/addCondPopup", new(AddCondPopupAction)).
EndAll()
})
}

View File

@@ -66,11 +66,12 @@ func (this *IndexAction) RunGet(params struct {
}
func (this *IndexAction) RunPost(params struct {
WebId int64
GzipId int64
Level int
MinLength string
MaxLength string
WebId int64
GzipId int64
Level int
MinLength string
MaxLength string
CondGroupsJSON []byte
Must *actions.Must
}) {
@@ -98,10 +99,11 @@ func (this *IndexAction) RunPost(params struct {
if params.GzipId > 0 {
_, err := this.RPC().HTTPGzipRPC().UpdateHTTPGzip(this.AdminContext(), &pb.UpdateHTTPGzipRequest{
GzipId: params.GzipId,
Level: types.Int32(params.Level),
MinLength: minLength,
MaxLength: maxLength,
GzipId: params.GzipId,
Level: types.Int32(params.Level),
MinLength: minLength,
MaxLength: maxLength,
CondGroupsJSON: params.CondGroupsJSON,
})
if err != nil {
this.ErrorPage(err)
@@ -109,9 +111,10 @@ func (this *IndexAction) RunPost(params struct {
}
} else {
resp, err := this.RPC().HTTPGzipRPC().CreateHTTPGzip(this.AdminContext(), &pb.CreateHTTPGzipRequest{
Level: types.Int32(params.Level),
MinLength: minLength,
MaxLength: maxLength,
Level: types.Int32(params.Level),
MinLength: minLength,
MaxLength: maxLength,
CondGroupsJSON: params.CondGroupsJSON,
})
if err != nil {
this.ErrorPage(err)

View File

@@ -1,7 +1,8 @@
package ui
import (
"bytes"
"encoding/json"
"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/server/settings/conds/condutils"
"github.com/iwind/TeaGo/Tea"
"github.com/iwind/TeaGo/actions"
"github.com/iwind/TeaGo/files"
@@ -21,7 +22,6 @@ func (this *ComponentsAction) RunGet(params struct{}) {
}
f := files.NewFile(webRoot)
buf := bytes.NewBuffer([]byte{})
f.Range(func(file *files.File) {
if !file.IsFile() {
return
@@ -34,9 +34,17 @@ func (this *ComponentsAction) RunGet(params struct{}) {
logs.Error(err)
return
}
buf.Write(data)
buf.WriteByte('\n')
buf.WriteByte('\n')
this.Write(data)
this.Write([]byte{'\n', '\n'})
})
this.Write(buf.Bytes())
// 条件组件
typesJSON, err := json.Marshal(condutils.ReadAllAvailableCondTypes())
if err != nil {
logs.Println("ComponentsAction: " + err.Error())
} else {
this.WriteString("window.REQUEST_COND_COMPONENTS = ")
this.Write(typesJSON)
this.Write([]byte{'\n', '\n'})
}
}

View File

@@ -30,6 +30,7 @@ import (
_ "github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/server/settings/accessLog"
_ "github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/server/settings/cache"
_ "github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/server/settings/charset"
_ "github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/server/settings/conds"
_ "github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/server/settings/gzip"
_ "github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/server/settings/headers"
_ "github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/server/settings/http"

View File

@@ -15,5 +15,5 @@ Vue.component("more-options-indicator", {
}
}
},
template: '<a href="" style="font-weight: normal" @click.prevent="changeVisible()">更多选项 <i class="icon angle" :class="{down:!visible, up:visible}"></i> </a>'
template: '<a href="" style="font-weight: normal" @click.prevent="changeVisible()"><span v-if="!visible">更多选项</span><span v-if="visible">收起选项</span> <i class="icon angle" :class="{down:!visible, up:visible}"></i> </a>'
});

View File

@@ -0,0 +1,157 @@
// URL扩展名条件
Vue.component("http-cond-url-extension", {
props: ["v-cond"],
data: function () {
let cond = this.vCond
if (cond == null) {
cond = {
param: "${requestPathExtension}",
operator: "in",
value: "[]"
}
}
return {
cond: cond,
extensions: JSON.parse(cond.value), // TODO 可以拖动排序
isAdding: false,
addingExt: ""
}
},
watch: {
extensions: function () {
this.cond.value = JSON.stringify(this.extensions)
}
},
methods: {
addExt: function () {
this.isAdding = !this.isAdding
if (this.isAdding) {
let that = this
setTimeout(function () {
that.$refs.addingExt.focus()
}, 100)
}
},
cancelAdding: function () {
this.isAdding = false
this.addingExt = ""
},
confirmAdding: function () {
// TODO 做更详细的校验
// TODO 如果有重复的则提示之
if (this.addingExt.length == 0) {
return
}
if (this.addingExt[0] != ".") {
this.addingExt = "." + this.addingExt
}
this.addingExt = this.addingExt.replace(/\s+/g, "")
this.extensions.push(this.addingExt)
// 清除状态
this.cancelAdding()
},
removeExt: function (index) {
this.extensions.$remove(index)
}
},
template: `<div>
<input type="hidden" name="condJSON" :value="JSON.stringify(cond)"/>
<div v-if="extensions.length > 0">
<div class="ui label small" v-for="(ext, index) in extensions">{{ext}} <a href="" title="删除" @click.prevent="removeExt(index)"><i class="icon remove"></i></a></div>
<div class="ui divider"></div>
</div>
<div class="ui fields inline" v-if="isAdding">
<div class="ui field">
<input type="text" size="6" maxlength="100" v-model="addingExt" ref="addingExt" placeholder=".xxx" @keyup.enter="confirmAdding" @keypress.enter.prevent="1" />
</div>
<div class="ui field">
<button class="ui button tiny" type="button" @click.prevent="confirmAdding">确认</button>
<a href="" title="取消" @click.prevent="cancelAdding"><i class="icon remove"></i></a>
</div>
</div>
<button class="ui button tiny" type="button" @click.prevent="addExt()">+添加扩展名</button>
<p class="comment">扩展名需要包含点(.)符号,例如<span class="ui label tiny">.jpg</span>、<span class="ui label tiny">.png</span>之类。</p>
</div>`
})
// 根据MimeType
Vue.component("http-cond-mime-type", {
props: ["v-cond"],
data: function () {
let cond = this.vCond
if (cond == null) {
cond = {
type: "mime-type",
param: "${response.contentType}",
operator: "mime type",
value: "[]"
}
}
return {
cond: cond,
mimeTypes: JSON.parse(cond.value), // TODO 可以拖动排序
isAdding: false,
addingMimeType: ""
}
},
watch: {
mimeTypes: function () {
this.cond.value = JSON.stringify(this.mimeTypes)
}
},
methods: {
addMimeType: function () {
this.isAdding = !this.isAdding
if (this.isAdding) {
let that = this
setTimeout(function () {
that.$refs.addingMimeType.focus()
}, 100)
}
},
cancelAdding: function () {
this.isAdding = false
this.addingMimeType = ""
},
confirmAdding: function () {
// TODO 做更详细的校验
// TODO 如果有重复的则提示之
if (this.addingMimeType.length == 0) {
return
}
this.addingMimeType = this.addingMimeType.replace(/\s+/g, "")
this.mimeTypes.push(this.addingMimeType)
// 清除状态
this.cancelAdding()
},
removeMimeType: function (index) {
this.mimeTypes.$remove(index)
}
},
template: `<div>
<input type="hidden" name="condJSON" :value="JSON.stringify(cond)"/>
<div v-if="mimeTypes.length > 0">
<div class="ui label small" v-for="(mimeType, index) in mimeTypes">{{mimeType}} <a href="" title="删除" @click.prevent="removeMimeType(index)"><i class="icon remove"></i></a></div>
<div class="ui divider"></div>
</div>
<div class="ui fields inline" v-if="isAdding">
<div class="ui field">
<input type="text" size="16" maxlength="100" v-model="addingMimeType" ref="addingMimeType" placeholder="xxxxx/xxx" @keyup.enter="confirmAdding" @keypress.enter.prevent="1" />
</div>
<div class="ui field">
<button class="ui button tiny" type="button" @click.prevent="confirmAdding">确认</button>
<a href="" title="取消" @click.prevent="cancelAdding"><i class="icon remove"></i></a>
</div>
</div>
<button class="ui button tiny" type="button" @click.prevent="addMimeType()">+添加MimeType</button>
<p class="comment">服务器返回的内容的MimeType比如<span class="ui label tiny">text/html</span>、<span class="ui label tiny">image/*</span>等。</p>
</div>`
})

View File

@@ -7,17 +7,22 @@ Vue.component("http-gzip-box", {
isOn: true,
level: 0,
minLength: null,
maxLength: null
maxLength: null,
condGroups: []
}
}
return {
gzip: gzip,
advancedVisible: false
}
},
methods: {
isOn: function () {
return (!this.vIsLocation || this.vGzipRef.isPrior) && this.vGzipRef.isOn
},
changeAdvancedVisible: function (v) {
this.advancedVisible = v
}
},
template: `<div>
@@ -26,7 +31,7 @@ Vue.component("http-gzip-box", {
<prior-checkbox :v-config="vGzipRef" v-if="vIsLocation"></prior-checkbox>
<tbody v-show="!vIsLocation || vGzipRef.isPrior">
<tr>
<td class="title">启用压缩</td>
<td class="title">启用Gzip压缩</td>
<td>
<div class="ui checkbox">
<input type="checkbox" v-model="vGzipRef.isOn"/>
@@ -45,7 +50,10 @@ Vue.component("http-gzip-box", {
</select>
<p class="comment">级别越高,压缩比例越大。</p>
</td>
</tr>
</tr>
</tbody>
<more-options-tbody @change="changeAdvancedVisible"></more-options-tbody>
<tbody v-show="isOn() && advancedVisible">
<tr>
<td>Gzip内容最小长度</td>
<td>
@@ -61,6 +69,7 @@ Vue.component("http-gzip-box", {
</td>
</tr>
</tbody>
<http-request-conds-tbody v-show="isOn() && advancedVisible" :v-cond-groups="gzip.condGroups"></http-request-conds-tbody>
</table>
</div>`
})

View File

@@ -0,0 +1,83 @@
Vue.component("http-request-conds-tbody", {
props: ["v-cond-groups"],
data: function () {
let groups = this.vCondGroups
if (groups == null) {
groups = []
}
return {
groups: groups,
components: window.REQUEST_COND_COMPONENTS
}
},
methods: {
addGroup: function () {
let that = this
teaweb.popup("/servers/server/settings/conds/addGroupPopup", {
height: "30em",
callback: function (resp) {
that.groups.push(resp.data.group)
}
})
},
updateGroup: function (groupIndex, group) {
window.UPDATING_COND_GROUP = group
let that = this
teaweb.popup("/servers/server/settings/conds/addGroupPopup", {
height: "30em",
callback: function (resp) {
Vue.set(that.groups, groupIndex, resp.data.group)
}
})
},
removeGroup: function (groupIndex) {
let that = this
teaweb.confirm("确定要删除这一组条件吗?", function () {
that.groups.$remove(groupIndex)
})
},
typeName: function (cond) {
let c = this.components.$find(function (k, v) {
return v.type == cond.type
})
if (c != null) {
return c.name;
}
return cond.param + " " + cond.operator
}
},
template: `<tbody>
<tr>
<td>匹配条件</td>
<td>
<input type="hidden" name="condGroupsJSON" :value="JSON.stringify(groups)"/>
<div class="margin"></div>
<div v-if="groups.length > 0">
<table class="ui table">
<tr v-for="(group, groupIndex) in groups">
<td style="background: white">
<var v-for="(cond, index) in group.conds" style="font-style: normal;display: inline-block; margin-bottom:0.5em">
<span class="ui label tiny">
<var v-if="cond.type.length == 0" style="font-style: normal">{{cond.param}} <var>{{cond.operator}}</var></var>
<var v-if="cond.type.length > 0" style="font-style: normal">{{typeName(cond)}}: </var>
{{cond.value}}
</span>
<var v-if="index < group.conds.length - 1"> {{group.connector}} &nbsp;</var>
</var>
</td>
<td style="width: 5em; background: white">
<a href="" title="修改" @click.prevent="updateGroup(groupIndex, group)"><i class="icon pencil small"></i></a> <a href="" title="删除" @click.prevent="removeGroup(groupIndex)"><i class="icon remove"></i></a>
</td>
</tr>
</table>
<div class="ui divider"></div>
</div>
<div>
<button class="ui button tiny" type="button" @click.prevent="addGroup()">+</button>
</div>
</td>
</tr>
</tbody>`
})

View File

@@ -0,0 +1 @@
[]

View File

@@ -0,0 +1,14 @@
[
{
"type": "url-extension",
"name": "URL扩展名",
"description": "根据URL中的文件路径扩展名进行过滤",
"component": "http-cond-url-extension"
},
{
"type": "mime-type",
"name": "内容MimeType",
"description": "根据服务器返回的内容的MimeType进行过滤",
"component": "http-cond-mime-type"
}
]

View File

@@ -0,0 +1,28 @@
{$layout "layout_popup"}
<h3 v-if="!isUpdating">添加子条件</h3>
<h3 v-if="isUpdating">修改子条件</h3>
<form class="ui form" data-tea-action="$" data-tea-success="success">
<table class="ui table definition selectable">
<tr>
<td class="title">选择条件类型</td>
<td>
<select class="ui dropdown auto-width" name="condType" v-model="condType">
<option v-for="c in components" :value="c.type">{{c.name}}</option>
</select>
{$ range .components}
<p class="comment" v-if="condType == '{$ .Type}'">{$ .Description}</p>
{$ end}
</td>
</tr>
<tr>
<td>设置条件参数</td>
<td>
{$ range .components}
<{$ .Component} v-if="condType == '{$ .Type}'" :v-cond="cond"></{$ .Component}>
{$ end}
</td>
</tr>
</table>
<submit-btn></submit-btn>
</form>

View File

@@ -0,0 +1,14 @@
Tea.context(function () {
this.isUpdating = false
this.cond = null
this.success = NotifyPopup
this.condType = (this.components.length > 0) ? this.components[0].type : ""
// 是否正在修改
if (window.parent.UPDATING_COND != null) {
this.isUpdating = true
this.condType = window.parent.UPDATING_COND.type
this.cond = window.parent.UPDATING_COND
}
})

View File

@@ -0,0 +1,58 @@
{$layout "layout_popup"}
<h3>添加条件</h3>
<form class="ui form" data-tea-success="success" data-tea-action="$">
<input type="hidden" name="condGroupJSON" :value="JSON.stringify(group)"/>
<table class="ui table definition selectable">
<tr>
<td class="title">子条件列表</td>
<td>
<div v-if="group.conds.length > 0">
<var v-for="(cond, index) in group.conds" style="font-style: normal;display: inline-block; margin-bottom:0.5em">
<span class="ui label small">
<var v-if="cond.type.length == 0" style="font-style: normal">{{cond.param}} <var>{{cond.operator}}</var></var>
<var v-if="cond.type.length > 0" style="font-style: normal">{{typeName(cond)}}: </var>
{{cond.value}}
<a href="" title="修改" @click.prevent="updateCond(index, cond)"><i class="icon pencil small"></i></a> <a href="" title="删除" @click.prevent="removeCond(index)"><i class="icon remove"></i></a> </span>
<var v-if="index < group.conds.length - 1"> {{group.connector}} &nbsp;</var>
</var>
<div class="ui divider"></div>
</div>
<button class="ui button tiny" type="button" @click.prevent="addCond()">+</button>
</td>
</tr>
<tr>
<td colspan="2"><more-options-indicator></more-options-indicator></td>
</tr>
<tbody v-if="moreOptionsVisible">
<tr>
<td>子条件之间关系</td>
<td>
<select class="ui dropdown auto-width" v-model="group.connector">
<option value="and"></option>
<option value="or"></option>
</select>
<p class="comment" v-if="group.connector == 'and'">必须满足所有条件才能成立。</p>
<p class="comment" v-if="group.connector == 'or'">只要满足其中一个条件即可成立。</p>
</td>
</tr>
<tr>
<td>补充说明</td>
<td>
<textarea rows="3" v-model="group.description" maxlength="100"></textarea>
</td>
</tr>
<tr>
<td>是否启用</td>
<td>
<div class="ui checkbox">
<input type="checkbox" v-model="group.isOn"/>
<label></label>
</div>
</td>
</tr>
</tbody>
</table>
<submit-btn></submit-btn>
</form>

View File

@@ -0,0 +1,66 @@
Tea.context(function () {
this.success = NotifyPopup
this.group = {
connector: "or",
description: "",
isReverse: false,
conds: [],
isOn: true
}
// 是否在修改
this.$delay(function () {
if (window.parent.UPDATING_COND_GROUP != null) {
this.group = window.parent.UPDATING_COND_GROUP
}
})
// 条件类型名称
this.typeName = function (cond) {
let c = this.components.$find(function (k, v) {
return v.type == cond.type
})
if (c != null) {
return c.name;
}
return cond.param + " " + cond.operator
}
// 添加条件
this.addCond = function () {
window.UPDATING_COND = null
let that = this
teaweb.popup("/servers/server/settings/conds/addCondPopup", {
width: "32em",
height: "22em",
callback: function (resp) {
that.group.conds.push(resp.data.cond)
}
})
}
// 删除条件
this.removeCond = function (condIndex) {
let that = this
teaweb.confirm("确定要删除此条件?", function () {
that.group.conds.$remove(condIndex)
})
}
// 修改条件
this.updateCond = function (condIndex, cond) {
window.UPDATING_COND = cond
let that = this
teaweb.popup("/servers/server/settings/conds/addCondPopup", {
width: "32em",
height: "22em",
callback: function (resp) {
that.group.conds[condIndex] = resp.data.cond
}
})
}
})

View File

@@ -7,7 +7,7 @@
<input type="hidden" name="webId" :value="webId"/>
<input type="hidden" name="gzipId" :value="gzipConfig.id"/>
<http-gzip-box :v-gzip-config="gzipConfig"></http-gzip-box>
<http-gzip-box :v-gzip-ref="gzipRef" :v-gzip-config="gzipConfig"></http-gzip-box>
<div class="margin"></div>
<submit-btn></submit-btn>