1.4.5.2
This commit is contained in:
@@ -0,0 +1,39 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>添加分组</h3>
|
||||
|
||||
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="firewallPolicyId" :value="firewallPolicyId"/>
|
||||
<input type="hidden" name="type" :value="type"/>
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">分组名称 *</td>
|
||||
<td>
|
||||
<input type="text" name="name" maxlength="100" ref="focus"/>
|
||||
<p class="comment">给分组起一个容易识别的名称</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<tr>
|
||||
<td>分组描述</td>
|
||||
<td>
|
||||
<textarea name="description" maxlength="200" rows="3"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>启用当前分组</td>
|
||||
<td>
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="isOn" value="1" checked="checked"/>
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,44 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">策略名称 *</td>
|
||||
<td>
|
||||
<input type="text" name="name" maxlength="100" ref="focus"/>
|
||||
<p class="comment">给策略起一个容易识别的名字。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>启用预置的规则</td>
|
||||
<td>
|
||||
<div class="ui checkbox" v-for="group in groups" style="width:10em;margin-bottom:0.5em">
|
||||
<input type="checkbox" name="groupCodes" :value="group.code" :id="'group-checkbox-' + group.code" v-model="group.isOn"/>
|
||||
<label :for="'group-checkbox-' + group.code">{{group.name}}</label>
|
||||
</div>
|
||||
<p class="comment">可以启用一些我们预置的规则组。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<tr>
|
||||
<td>描述</td>
|
||||
<td>
|
||||
<textarea name="description" rows="3"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>启用当前分组</td>
|
||||
<td>
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="isOn" value="1" checked="checked"/>
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,234 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3 v-if="!isUpdating">添加规则</h3>
|
||||
<h3 v-if="isUpdating">修改规则</h3>
|
||||
|
||||
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="ruleId" :value="rule.id"/>
|
||||
<input type="hidden" name="optionsJSON" v-if="checkpoint != null && checkpoint.options != null" :value="JSON.stringify(checkpoint.options)"/>
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">参数 *</td>
|
||||
<td>
|
||||
<select name="prefix" class="ui dropdown auto-width" @change="changeCheckpoint()" v-model="rule.checkpointPrefix">
|
||||
<option value="">[选择参数]</option>
|
||||
<optgroup label="特殊参数"></optgroup>
|
||||
<option v-for="cp in checkpoints" v-if="cp.isComposed" :value="cp.prefix">{{cp.name}} - [{{cp.prefix}}]</option>
|
||||
<optgroup label="通用参数"></optgroup>
|
||||
<option v-for="cp in checkpoints" v-if="!cp.isComposed" :value="cp.prefix">{{cp.name}} - [{{cp.prefix}}]</option>
|
||||
</select>
|
||||
<p class="comment" v-if="checkpoint != null"><span class="ui label tiny basic">${<em style="font-style: normal;">{{checkpoint.prefix}}</em>}</span>{{checkpoint.description}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- 参数名 -->
|
||||
<tr v-if="checkpoint != null && checkpoint.hasParams">
|
||||
<td>参数名</td>
|
||||
<td>
|
||||
<select name="param" v-model="rule.checkpointParam" class="ui dropdown auto-width" v-if="checkpoint.params != null">
|
||||
<option v-for="o in checkpoint.params" :value="o.value">{{o.name}}</option>
|
||||
</select>
|
||||
<input type="text" name="param" maxlength="100" v-model="rule.checkpointParam" v-if="checkpoint.params == null"/>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- 组合规则的选项 -->
|
||||
<tbody v-if="checkpoint != null && checkpoint.isComposed">
|
||||
<tr>
|
||||
<td colspan="2">配置选项</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<!-- 通用header -->
|
||||
<http-cond-general-header-length v-if="checkpoint.prefix == 'requestGeneralHeaderLength' || checkpoint.prefix == 'responseGeneralHeaderLength'" :v-checkpoint="checkpoint"></http-cond-general-header-length>
|
||||
|
||||
<!-- 防盗链 -->
|
||||
<http-firewall-checkpoint-referer-block v-if="checkpoint.prefix == 'refererBlock'" :v-checkpoint="checkpoint"></http-firewall-checkpoint-referer-block>
|
||||
|
||||
<!-- CC -->
|
||||
<http-firewall-checkpoint-cc v-if="checkpoint.prefix == 'cc2'" :v-checkpoint="checkpoint"></http-firewall-checkpoint-cc>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<!-- 选项 -->
|
||||
<tbody v-if="checkpoint != null && !checkpoint.isComposed && checkpoint.options != null && checkpoint.options.length > 0">
|
||||
<tr v-for="option in checkpoint.options">
|
||||
<td>{{option.name}}</td>
|
||||
<td>
|
||||
<div class="ui fields inline" v-if="option.type == 'field'">
|
||||
<div class="ui field">
|
||||
<input type="text" name="" :placeholder="option.placeholder" :maxlength="(option.maxLength > 0)?option.maxLength:1024" :size="option.size" v-model="option.value"/>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
{{option.rightLabel}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui fields inline" v-if="option.type == 'options'">
|
||||
<div class="ui field">
|
||||
<select class="ui dropdown" :style="'width:' + option.size + 'em'" name="" v-model="option.value">
|
||||
<option v-for="opt in option.options" :value="opt.value">{{opt.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
{{option.rightLabel}}
|
||||
</div>
|
||||
</div>
|
||||
<p class="comment" v-if="option.comment != null && option.comment.length > 0">{{option.comment}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tbody v-show="checkpoint != null && !checkpoint.isComposed">
|
||||
<tr>
|
||||
<td>操作符 *</td>
|
||||
<td>
|
||||
<select class="ui dropdown auto-width" name="operator" v-model="rule.operator" @change="changeOperator()">
|
||||
<option v-for="op in operators" :value="op.code">{{op.name}}</option>
|
||||
</select>
|
||||
<p class="comment" v-if="operator != null" v-html="operator.description"></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-show="operator != null && operator.dataType != 'none'">
|
||||
<td>
|
||||
<span v-if="operator != null && operator.dataType == 'regexp'">匹配正则表达式</span>
|
||||
<span v-else-if="operator != null && operator.dataType == 'wildcard'">匹配单个通配符</span>
|
||||
<span v-else-if="operator != null && operator.dataType == 'number'">对比数字</span>
|
||||
<span v-else-if="operator != null && operator.dataType == 'string'">对比单个字符串</span>
|
||||
<span v-else-if="operator != null && operator.dataType == 'strings'">对比一组字符串</span>
|
||||
<span v-else-if="operator != null && operator.dataType == 'string|number'">对比单个字符串或数字</span>
|
||||
<span v-else-if="operator != null && operator.dataType == 'version'">对比单个版本号</span>
|
||||
<span v-else-if="operator != null && operator.dataType == 'versionRange'">对比版本号范围</span>
|
||||
<span v-else-if="operator != null && operator.dataType == 'ip'">对比单个IP</span>
|
||||
<span v-else-if="operator != null && operator.dataType == 'ips'">一组对比IP</span>
|
||||
<span v-else>对比值</span>
|
||||
</td>
|
||||
<td>
|
||||
<!-- 二进制数据 -->
|
||||
<div v-if="rule.operator == 'contains binary'">
|
||||
<textarea rows="3" maxlength="4096" name="value" v-model="rule.value"></textarea>
|
||||
<p class="comment">将二进制进行Base64Encode后放在这里,比如<code-label>Hello</code-label>对应<code-label>SGVsbG8=</code-label>。</p>
|
||||
</div>
|
||||
<div v-else-if="rule.operator == 'not contains binary'">
|
||||
<textarea rows="3" maxlength="4096" name="value" v-model="rule.value"></textarea>
|
||||
<p class="comment">将二进制进行Base64Encode后放在这里,比如<code-label>Hello</code-label>对应<code-label>SGVsbG8=</code-label>。</p>
|
||||
</div>
|
||||
|
||||
<!-- bool数据 -->
|
||||
<div v-else-if="checkpoint != null && checkpoint.dataType == 'bool'">
|
||||
<select name="value" class="ui selectable auto-width" v-model="rule.value" @change="changeRuleValue">
|
||||
<option value="">[请选择]</option>
|
||||
<option value="1">是(1)</option>
|
||||
<option value="0">否(0)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- wildcard -->
|
||||
<div v-else-if="operator != null && operator.dataType == 'wildcard'">
|
||||
<textarea rows="3" maxlength="4096" name="value" v-model="rule.value" @input="changeRuleValue"></textarea>
|
||||
<p class="comment">输入包含通配符的字符串,比如<code-label>Chrome/*</code-label>、<code-label>192.168.*.*</code-label>。</p>
|
||||
</div>
|
||||
|
||||
<!-- number -->
|
||||
<div v-else-if="operator != null && operator.dataType == 'number'">
|
||||
<input type="number" name="value" v-model="rule.value" @input="changeRuleValue" style="width: 16em" maxlength="30" placeholder="对比数字" step="any"/>
|
||||
<p class="comment">输入和参数对比的数字,比如<code-label>123</code-label>、<code-label>123.456</code-label>。</p>
|
||||
</div>
|
||||
|
||||
<!-- string|number -->
|
||||
<div v-else-if="operator != null && operator.dataType == 'string|number'">
|
||||
<input type="text" name="value" v-model="rule.value" @input="changeRuleValue" style="width: 16em" maxlength="30" placeholder="对比字符串或数字"/>
|
||||
<p class="comment">输入和参数对比的字符串或数字,比如<code-label>123</code-label>、<code-label>abc</code-label>。</p>
|
||||
</div>
|
||||
|
||||
<!-- version -->
|
||||
<div v-else-if="operator != null && operator.dataType == 'version'">
|
||||
<input type="text" name="value" v-model="rule.value" @input="changeRuleValue" style="width: 10em" maxlength="100" placeholder="对比版本号"/>
|
||||
<p class="comment">输入和参数对比的版本号,比如<code-label>1.2.7</code-label>。</p>
|
||||
</div>
|
||||
|
||||
<!-- versionRange -->
|
||||
<div v-else-if="operator != null && operator.dataType == 'versionRange'">
|
||||
<input type="text" name="value" v-model="rule.value" @input="changeRuleValue" style="width: 10em" maxlength="100" placeholder="版本号范围"/>
|
||||
<p class="comment">输入和参数对比的版本号范围,比如<code-label>1.2.7,1.3.7</code-label>。</p>
|
||||
</div>
|
||||
|
||||
<!-- IP -->
|
||||
<div v-else-if="operator != null && operator.dataType == 'ip'">
|
||||
<input type="text" name="value" v-model="rule.value" @input="changeRuleValue" style="width: 16em" maxlength="100" placeholder="对比IP"/>
|
||||
<p class="comment">输入和参数对比的IP,比如<code-label>192.168.2.100</code-label>。</p>
|
||||
</div>
|
||||
|
||||
<!-- 其余数据 -->
|
||||
<div v-else>
|
||||
<textarea rows="3" maxlength="4096" name="value" v-model="rule.value" @input="changeRuleValue"></textarea>
|
||||
<p class="comment" v-if="operator != null && operator.dataType == 'strings'">每行一个数据。</p>
|
||||
<p class="comment" v-if="operator != null && operator.dataType == 'regexp'">正则表达式中对于要匹配的内容中的特殊字符需要转义处理(即在字符前面加入反斜杠\),比如<code-label>.?*+()[]{}^$\</code-label>等符号要变成<code-label>\.\?\*\+\(\)\[\]\{\}\^\$\\</code-label>。</p>
|
||||
</div>
|
||||
<p class="comment" v-if="operator != null && operator.dataType == 'regexp' && rule.value.match(/\n/)"><span class="red">警告:发现你填写的正则表达式中包含了换行符,如果你的意图是每行都表示不同的选项,那么请使用竖杠(<code-label>|</code-label>)符号代替换行符,比如把<code-label>a换行b换行c换行</code-label>改成<code-label>a|b|c</code-label>,<a href="" @click.prevent="convertValueLine">[帮我转换]</a>。</span></p>
|
||||
|
||||
<!-- 特殊规则 -->
|
||||
<div style="margin-top: 1em">
|
||||
<!-- geo country name -->
|
||||
<div v-if="checkpoint != null && checkpoint.prefix == 'geoCountryName'" >
|
||||
<combo-box title="已添加" width="14em" data-url="/ui/countryOptions" data-key="countries" placeholder="点这里选择国家/地区" @change="selectGeoCountryName" ref="countryComboBox" key="combo-box-country"></combo-box>
|
||||
</div>
|
||||
|
||||
<!-- geo province name -->
|
||||
<div v-if="checkpoint != null && checkpoint.prefix == 'geoProvinceName'" >
|
||||
<combo-box title="已添加" data-url="/ui/provinceOptions" data-key="provinces" placeholder="点这里选择省份名称" @change="selectGeoProvinceName" ref="provinceComboBox" key="combo-box-province"></combo-box>
|
||||
</div>
|
||||
|
||||
<!-- geo city name -->
|
||||
<div v-if="checkpoint != null && checkpoint.prefix == 'geoCityName'" >
|
||||
<combo-box title="已添加" data-url="/ui/cityOptions" data-key="cities" placeholder="点这里选择城市名称" @change="selectGeoCityName" ref="cityComboBox" key="combo-box-city"></combo-box>
|
||||
</div>
|
||||
|
||||
<!-- ISP Name -->
|
||||
<div v-if="checkpoint != null && checkpoint.prefix == 'ispName'" >
|
||||
<combo-box title="已添加" data-url="/ui/providerOptions" data-key="providers" placeholder="点这里选择ISP名称" @change="selectISPName" ref="ispComboBox" key="combo-box-isp"></combo-box>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="operator != null && operator.dataType == 'regexp'">
|
||||
<td>正则表达式测试</td>
|
||||
<td>
|
||||
<a href="" v-if="!regexpTestIsOn" @click.prevent="changeRegexpTestIsOn">[输入测试字符串]</a>
|
||||
<div v-if="regexpTestIsOn">
|
||||
<textarea placeholder="输入要测试的内容" rows="3" v-model="regexpTestBody" ref="regexpTestBody" @input="changeRegexpTestBody"></textarea>
|
||||
<p class="comment">
|
||||
<span v-if="regexpTestResult.isOk" class="green">{{regexpTestResult.message}}</span>
|
||||
<span v-if="!regexpTestResult.isOk" class="red">{{regexpTestResult.message}}</span>
|
||||
|
||||
<a href="" @click.prevent="changeRegexpTestIsOn">[结束测试]</a>
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="(checkpoint == null || checkpoint.dataType != 'bool') && operator != null && operator.case != 'none'">
|
||||
<td>不区分大小写</td>
|
||||
<td>
|
||||
<div class="ui checkbox">
|
||||
<input name="case" type="checkbox" value="1" v-model="rule.isCaseInsensitive" @change="changeCaseInsensitive"/>
|
||||
<label></label>
|
||||
</div>
|
||||
<p class="comment">开启后忽略英文字母大小写</p>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- 参数过滤器 -->
|
||||
<tr v-if="checkpoint != null && !checkpoint.isComposed">
|
||||
<td>编解码</td>
|
||||
<td>
|
||||
<http-firewall-param-filters-box :v-filters="rule.paramFilters"></http-firewall-param-filters-box>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>备注</td>
|
||||
<td><input type="text" name="description" v-model="rule.description"/></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,231 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifyPopup
|
||||
|
||||
this.isUpdating = (window.parent.UPDATING_RULE != null)
|
||||
this.rule = {
|
||||
id: 0,
|
||||
param: "",
|
||||
paramFilters: [],
|
||||
checkpointPrefix: "",
|
||||
checkpointParam: "",
|
||||
value: "",
|
||||
isCaseInsensitive: false,
|
||||
operator: "match",
|
||||
checkpointOptions: null,
|
||||
description: "",
|
||||
isOn: true
|
||||
}
|
||||
if (window.parent.UPDATING_RULE != null) {
|
||||
this.rule = window.parent.UPDATING_RULE
|
||||
|
||||
let param = this.rule.param.substring(this.rule.param.indexOf("${") + 2, this.rule.param.indexOf("}"))
|
||||
let index = param.indexOf(".")
|
||||
if (index > 0) {
|
||||
this.rule.checkpointPrefix = param.substring(0, index)
|
||||
this.rule.checkpointParam = param.substring(index + 1)
|
||||
} else {
|
||||
this.rule.checkpointPrefix = param
|
||||
}
|
||||
this.$delay(function () {
|
||||
this.loadCheckpoint()
|
||||
if (this.rule.checkpointOptions != null && this.checkpoint != null && this.checkpoint.options != null) {
|
||||
let that = this
|
||||
this.checkpoint.options.forEach(function (option) {
|
||||
if (typeof (that.rule.checkpointOptions[option.code]) != "undefined") {
|
||||
option.value = that.rule.checkpointOptions[option.code]
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* checkpoint
|
||||
*/
|
||||
this.checkpoint = null
|
||||
|
||||
this.loadCheckpoint = function () {
|
||||
if (this.rule.checkpointPrefix.length == 0) {
|
||||
this.checkpoint = null
|
||||
return
|
||||
}
|
||||
let that = this
|
||||
this.checkpoint = this.checkpoints.$find(function (k, v) {
|
||||
return v.prefix == that.rule.checkpointPrefix
|
||||
})
|
||||
}
|
||||
|
||||
this.changeCheckpoint = function () {
|
||||
if (this.rule.checkpointPrefix.length == 0) {
|
||||
this.checkpoint = null
|
||||
return
|
||||
}
|
||||
let that = this
|
||||
this.checkpoint = this.checkpoints.$find(function (k, v) {
|
||||
return v.prefix == that.rule.checkpointPrefix
|
||||
})
|
||||
if (this.checkpoint == null) {
|
||||
return
|
||||
}
|
||||
switch (this.checkpoint.dataType) {
|
||||
case "bool":
|
||||
this.rule.operator = "eq"
|
||||
break
|
||||
case "number":
|
||||
this.rule.operator = "eq"
|
||||
break
|
||||
default:
|
||||
this.rule.operator = "match"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* operator
|
||||
*/
|
||||
this.changeOperator = function () {
|
||||
let that = this;
|
||||
this.operator = this.operators.$find(function (k, v) {
|
||||
return v.code == that.rule.operator
|
||||
})
|
||||
if (this.operator == null) {
|
||||
return
|
||||
}
|
||||
if (!this.isUpdating) {
|
||||
this.rule.isCaseInsensitive = (this.operator.case == "yes")
|
||||
}
|
||||
};
|
||||
this.changeOperator()
|
||||
|
||||
/**
|
||||
* caseInsensitive
|
||||
*/
|
||||
this.changeCaseInsensitive = function () {
|
||||
if (this.rule.operator == "match" || this.rule.operator == "not match") {
|
||||
if (this.regexpTestIsOn) {
|
||||
this.changeRegexpTestBody()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* value
|
||||
*/
|
||||
this.changeRuleValue = function () {
|
||||
if (this.rule.operator == "match" || this.rule.operator == "not match") {
|
||||
if (this.regexpTestIsOn) {
|
||||
this.changeRegexpTestBody()
|
||||
}
|
||||
} else {
|
||||
this.regexpTestIsOn = false
|
||||
this.regexpTestResult = {isOk: false, message: ""}
|
||||
}
|
||||
}
|
||||
|
||||
this.convertValueLine = function () {
|
||||
let value = this.rule.value
|
||||
if (value != null && value.length > 0) {
|
||||
let lines = value.split(/\n/)
|
||||
let resultLines = []
|
||||
lines.forEach(function (line) {
|
||||
line = line.trim()
|
||||
if (line.length > 0) {
|
||||
resultLines.push(line)
|
||||
}
|
||||
})
|
||||
this.rule.value = resultLines.join("|")
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 正则测试
|
||||
*/
|
||||
this.regexpTestIsOn = false
|
||||
this.regexpTestBody = ""
|
||||
this.regexpTestResult = {isOk: false, message: ""}
|
||||
|
||||
this.changeRegexpTestIsOn = function () {
|
||||
this.regexpTestIsOn = !this.regexpTestIsOn
|
||||
if (this.regexpTestIsOn) {
|
||||
this.$delay(function () {
|
||||
this.$refs.regexpTestBody.focus()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
this.changeRegexpTestBody = function () {
|
||||
this.$post(".testRegexp")
|
||||
.params({
|
||||
"regexp": this.rule.value,
|
||||
"body": this.regexpTestBody,
|
||||
"isCaseInsensitive": this.rule.isCaseInsensitive
|
||||
})
|
||||
.success(function (resp) {
|
||||
this.regexpTestResult = resp.data.result
|
||||
})
|
||||
}
|
||||
|
||||
// isp
|
||||
this.selectISPName = function (isp) {
|
||||
if (isp == null) {
|
||||
return
|
||||
}
|
||||
|
||||
let ispName = isp.name
|
||||
this.$refs.ispComboBox.clear()
|
||||
|
||||
if (this.rule.value.length == 0) {
|
||||
this.rule.value = ispName
|
||||
} else {
|
||||
this.rule.value += "|" + ispName
|
||||
}
|
||||
}
|
||||
|
||||
// country
|
||||
this.selectGeoCountryName = function (country) {
|
||||
if (country == null) {
|
||||
return
|
||||
}
|
||||
|
||||
let countryName = country.name
|
||||
this.$refs.countryComboBox.clear()
|
||||
|
||||
if (this.rule.value.length == 0) {
|
||||
this.rule.value = countryName
|
||||
} else {
|
||||
this.rule.value += "|" + countryName
|
||||
}
|
||||
}
|
||||
|
||||
// province
|
||||
this.selectGeoProvinceName = function (province) {
|
||||
if (province == null) {
|
||||
return
|
||||
}
|
||||
|
||||
let provinceName = province.name
|
||||
this.$refs.provinceComboBox.clear()
|
||||
|
||||
if (this.rule.value.length == 0) {
|
||||
this.rule.value = provinceName
|
||||
} else {
|
||||
this.rule.value += "|" + provinceName
|
||||
}
|
||||
}
|
||||
|
||||
// city
|
||||
this.selectGeoCityName = function (city) {
|
||||
if (city == null) {
|
||||
return
|
||||
}
|
||||
|
||||
let cityName = city.name
|
||||
this.$refs.cityComboBox.clear()
|
||||
|
||||
if (this.rule.value.length == 0) {
|
||||
this.rule.value = cityName
|
||||
} else {
|
||||
this.rule.value += "|" + cityName
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,52 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>添加规则集</h3>
|
||||
|
||||
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="groupId" :value="groupId"/>
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">规则集名称 *</td>
|
||||
<td>
|
||||
<input type="text" name="name" maxlength="100" ref="focus"/>
|
||||
<p class="comment">可以用来描述当前规则集用途。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>规则 *</td>
|
||||
<td>
|
||||
<http-firewall-rules-box :v-rules="rules" :v-type="type"></http-firewall-rules-box>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-show="rules.length > 1">
|
||||
<td>规则之间的关系</td>
|
||||
<td>
|
||||
<select class="ui dropdown" name="connector" style="width:10em" @change="changeConnector()" v-model="selectedConnector">
|
||||
<option v-for="connector in connectors" :value="connector.value">{{connector.name}}</option>
|
||||
</select>
|
||||
<p class="comment">{{selectedConnectorDescription}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>执行动作 *</td>
|
||||
<td>
|
||||
<http-firewall-actions-box :v-actions="actions" :v-firewall-policy="firewallPolicy" :v-group-type="type"></http-firewall-actions-box>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>允许局域网IP</td>
|
||||
<td>
|
||||
<checkbox name="ignoreLocal"></checkbox>
|
||||
<p class="comment">选中后,表示如果请求来自局域网IP,则直接跳过当前规则集。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>允许搜索引擎</td>
|
||||
<td>
|
||||
<checkbox name="ignoreSearchEngine"></checkbox>
|
||||
<p class="comment">选中后,表示如果请求来自常见搜索引擎的IP,则直接跳过当前规则集。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,43 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifyPopup
|
||||
|
||||
// rules
|
||||
this.rules = []
|
||||
|
||||
// connector
|
||||
this.selectedConnector = this.connectors[1].value
|
||||
this.selectedConnectorDescription = ""
|
||||
this.changeConnector = function () {
|
||||
let that = this
|
||||
this.selectedConnectorDescription = this.connectors.$find(function (k, v) {
|
||||
return v.value == that.selectedConnector
|
||||
}).description
|
||||
}
|
||||
this.changeConnector()
|
||||
|
||||
// action
|
||||
this.action = "block"
|
||||
|
||||
// action:go_group
|
||||
this.actionGroupId = 0
|
||||
|
||||
// action:go_set
|
||||
this.actionSetId = 0
|
||||
this.groupSets = function (groupId) {
|
||||
let group = null
|
||||
this.firewallPolicy.inbound.groups.forEach(function (v) {
|
||||
if (v.id == groupId) {
|
||||
group = v
|
||||
}
|
||||
})
|
||||
this.firewallPolicy.outbound.groups.forEach(function (v) {
|
||||
if (v.id == groupId) {
|
||||
group = v
|
||||
}
|
||||
})
|
||||
if (group == null) {
|
||||
return []
|
||||
}
|
||||
return group.sets
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,53 @@
|
||||
{$layout}
|
||||
|
||||
{$template "waf_menu"}
|
||||
|
||||
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="firewallPolicyId" :value="firewallPolicyId"/>
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">策略名称 *</td>
|
||||
<td>
|
||||
<input type="text" name="name" maxlength="100" ref="focus" v-model="firewallPolicy.name"/>
|
||||
<p class="comment">给策略起一个容易识别的名字。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>启用预置的规则</td>
|
||||
<td>
|
||||
<div class="ui checkbox" v-for="group in groups" style="width:10em;margin-bottom:0.5em">
|
||||
<input type="checkbox" name="groupCodes" :value="group.code" :id="'group-checkbox-' + group.code" v-model="group.isOn"/>
|
||||
<label :for="'group-checkbox-' + group.code">{{group.name}}</label>
|
||||
</div>
|
||||
<p class="comment">可以启用一些我们预置的规则组。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>阻止动作配置</td>
|
||||
<td>
|
||||
<http-firewall-block-options :v-block-options="firewallPolicy.blockOptions"></http-firewall-block-options>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<tr>
|
||||
<td>描述</td>
|
||||
<td>
|
||||
<textarea name="description" rows="3" v-model="firewallPolicy.description"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>启用当前策略</td>
|
||||
<td>
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="isOn" value="1" v-model="firewallPolicy.isOn"/>
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,3 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifySuccess("保存成功", "/servers/components/waf/policy?firewallPolicyId=" + this.firewallPolicyId)
|
||||
})
|
||||
@@ -0,0 +1,38 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>修改分组</h3>
|
||||
|
||||
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="groupId" :value="group.id"/>
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">分组名称 *</td>
|
||||
<td>
|
||||
<input type="text" name="name" maxlength="100" ref="focus" v-model="group.name"/>
|
||||
<p class="comment">给分组起一个容易识别的名称</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<tr>
|
||||
<td>分组描述</td>
|
||||
<td>
|
||||
<textarea name="description" maxlength="200" rows="3" v-model="group.description"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>启用当前分组</td>
|
||||
<td>
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="isOn" value="1" v-model="group.isOn" />
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,52 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>修改规则集</h3>
|
||||
|
||||
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="setId" :value="setConfig.id"/>
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">规则集名称 *</td>
|
||||
<td>
|
||||
<input type="text" name="name" maxlength="100" ref="focus" v-model="setConfig.name"/>
|
||||
<p class="comment">可以用来描述当前规则集用途。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>规则 *</td>
|
||||
<td>
|
||||
<http-firewall-rules-box :v-rules="rules" :v-type="type"></http-firewall-rules-box>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-show="rules.length > 1">
|
||||
<td>规则之间的关系</td>
|
||||
<td>
|
||||
<select class="ui dropdown" name="connector" style="width:10em" @change="changeConnector()" v-model="selectedConnector">
|
||||
<option v-for="connector in connectors" :value="connector.value">{{connector.name}}</option>
|
||||
</select>
|
||||
<p class="comment">{{selectedConnectorDescription}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>执行动作 *</td>
|
||||
<td>
|
||||
<http-firewall-actions-box :v-actions="actions" :v-firewall-policy="firewallPolicy" :v-action-configs="actionConfigs" :v-group-type="type"></http-firewall-actions-box>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>允许局域网IP</td>
|
||||
<td>
|
||||
<checkbox name="ignoreLocal" v-model="setConfig.ignoreLocal"></checkbox>
|
||||
<p class="comment">选中后表示如果请求来自局域网IP,则直接跳过当前规则集。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>允许搜索引擎</td>
|
||||
<td>
|
||||
<checkbox name="ignoreSearchEngine" v-model="setConfig.ignoreSearchEngine"></checkbox>
|
||||
<p class="comment">选中后,表示如果请求来自常见搜索引擎的IP,则直接跳过当前规则集。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,57 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifyPopup
|
||||
|
||||
// rules
|
||||
this.rules = this.setConfig.rules
|
||||
|
||||
// connector
|
||||
this.selectedConnector = this.setConfig.connector
|
||||
this.selectedConnectorDescription = ""
|
||||
this.changeConnector = function () {
|
||||
let that = this
|
||||
this.selectedConnectorDescription = this.connectors.$find(function (k, v) {
|
||||
return v.value == that.selectedConnector
|
||||
}).description
|
||||
}
|
||||
this.changeConnector()
|
||||
|
||||
// action
|
||||
this.action = this.setConfig.action
|
||||
|
||||
// action:go_group
|
||||
this.actionGroupId = 0
|
||||
if (this.action == "go_group" || this.action == "go_set" && this.setConfig.actionOptions != null) {
|
||||
this.$delay(function () {
|
||||
this.actionGroupId = this.setConfig.actionOptions["groupId"]
|
||||
})
|
||||
}
|
||||
|
||||
// action:go_set
|
||||
this.actionSetId = 0
|
||||
if (this.action == "go_set" && this.setConfig.actionOptions != null) {
|
||||
this.$delay(function () {
|
||||
this.actionSetId = this.setConfig.actionOptions["setId"]
|
||||
})
|
||||
}
|
||||
|
||||
this.groupSets = function (groupId) {
|
||||
if (this.firewallPolicy == null) {
|
||||
return
|
||||
}
|
||||
let group = null
|
||||
this.firewallPolicy.inbound.groups.forEach(function (v) {
|
||||
if (v.id == groupId) {
|
||||
group = v
|
||||
}
|
||||
})
|
||||
this.firewallPolicy.outbound.groups.forEach(function (v) {
|
||||
if (v.id == groupId) {
|
||||
group = v
|
||||
}
|
||||
})
|
||||
if (group == null) {
|
||||
return []
|
||||
}
|
||||
return group.sets
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user