mirror of
https://github.com/TeaOSLab/EdgeAdmin.git
synced 2025-12-10 08:20:24 +08:00
管理平台也可以单独管理某个服务的黑白名单
This commit is contained in:
刘祥超
@@ -0,0 +1,5 @@
|
||||
<first-menu>
|
||||
<menu-item :href="'/servers/server/settings/waf?serverId=' + serverId" code="index">设置</menu-item>
|
||||
<menu-item :href="'/servers/server/settings/waf/ipadmin/allowList?serverId=' + serverId" code="allowList">白名单</menu-item>
|
||||
<menu-item :href="'/servers/server/settings/waf/ipadmin/denyList?serverId=' + serverId" code="denyList">黑名单</menu-item>
|
||||
</first-menu>
|
||||
@@ -2,6 +2,7 @@
|
||||
{$template "/left_menu"}
|
||||
|
||||
<div class="right-box">
|
||||
{$template "menu"}
|
||||
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="webId" :value="webId"/>
|
||||
<http-firewall-config-box :v-firewall-config="firewallConfig" :v-firewall-policy="firewallPolicy"></http-firewall-config-box>
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
{$layout}
|
||||
{$template "/left_menu"}
|
||||
|
||||
<div class="right-box">
|
||||
{$template "../menu"}
|
||||
|
||||
<div class="ui message warning" v-if="!featureIsOn">尚未为当前用户开通此功能。</div>
|
||||
|
||||
{$ if .featureIsOn}
|
||||
<second-menu>
|
||||
<menu-item @click.prevent="createIP('white')">添加IP</menu-item>
|
||||
<span class="item">|</span>
|
||||
<span class="item">ID: {{listId}} <tip-icon content="ID可以用于使用API操作此IP名单"></tip-icon></span>
|
||||
</second-menu>
|
||||
|
||||
<p class="comment" v-if="items.length == 0">暂时还没有IP。</p>
|
||||
|
||||
<table class="ui table selectable celled" v-if="items.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>IP</th>
|
||||
<th>过期时间</th>
|
||||
<th>备注</th>
|
||||
<th class="two op">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr v-for="item in items">
|
||||
<td>{{item.ipFrom}}<span v-if="item.ipTo.length > 0"> - {{item.ipTo}}</span></td>
|
||||
<td>
|
||||
<span v-if="item.expiredTime.length > 0">{{item.expiredTime}}</span>
|
||||
<span v-else class="disabled">不过期</span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="item.reason.length > 0">{{item.reason}}</span>
|
||||
<span v-else class="disabled">-</span>
|
||||
</td>
|
||||
<td>
|
||||
<a href="" @click.prevent="updateItem(item.id)">修改</a>
|
||||
<a href="" @click.prevent="deleteItem(item.id)">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="page" v-html="page"></div>
|
||||
{$end}
|
||||
</div>
|
||||
@@ -0,0 +1,36 @@
|
||||
Tea.context(function () {
|
||||
this.updateItem = function (itemId) {
|
||||
teaweb.popup(Tea.url(".updateIPPopup?listId=" + this.listId, {itemId: itemId}), {
|
||||
height: "23em",
|
||||
callback: function () {
|
||||
teaweb.success("保存成功", function () {
|
||||
teaweb.reload()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.deleteItem = function (itemId) {
|
||||
let that = this
|
||||
teaweb.confirm("确定要删除这个IP吗？", function () {
|
||||
that.$post(".deleteIP")
|
||||
.params({
|
||||
"listId": this.listId,
|
||||
"itemId": itemId
|
||||
})
|
||||
.refresh()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加IP名单菜单
|
||||
*/
|
||||
this.createIP = function (type) {
|
||||
teaweb.popup("/servers/server/settings/waf/ipadmin/createIPPopup?listId=" + this.listId + '&type=' + type, {
|
||||
height: "23em",
|
||||
callback: function () {
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,42 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3 v-if="type == 'white'">添加IP到白名单</h3>
|
||||
<h3 v-if="type == 'black'">添加IP到黑名单</h3>
|
||||
|
||||
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="listId" :value="listId"/>
|
||||
<csrf-token></csrf-token>
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">开始IP *</td>
|
||||
<td>
|
||||
<input type="text" name="ipFrom" maxlength="64" placeholder="x.x.x.x" ref="focus"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>结束IP</td>
|
||||
<td>
|
||||
<input type="text" name="ipTo" maxlength="64" placeholder="x.x.x.x"/>
|
||||
<p class="comment">表示IP段的时候需要填写此项。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<tr>
|
||||
<td>过期时间</td>
|
||||
<td>
|
||||
<datetime-input :v-name="'expiredAt'"></datetime-input>
|
||||
<p class="comment">在加入名单某一段时间后会失效，留空表示永久有效。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>备注</td>
|
||||
<td><input type="text" name="reason" maxlength="100"/></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="comment">添加后将会在5分钟后生效。</p>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,46 @@
|
||||
{$layout}
|
||||
{$template "/left_menu"}
|
||||
|
||||
<div class="right-box">
|
||||
{$template "../menu"}
|
||||
|
||||
<div class="ui message warning" v-if="!featureIsOn">尚未为当前用户开通此功能。</div>
|
||||
|
||||
{$ if .featureIsOn}
|
||||
<second-menu>
|
||||
<menu-item @click.prevent="createIP('white')">添加IP</menu-item>
|
||||
<span class="item">|</span>
|
||||
<span class="item">ID: {{listId}} <tip-icon content="ID可以用于使用API操作此IP名单"></tip-icon></span>
|
||||
</second-menu>
|
||||
|
||||
<p class="comment" v-if="items.length == 0">暂时还没有IP。</p>
|
||||
|
||||
<table class="ui table selectable celled" v-if="items.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>IP</th>
|
||||
<th>过期时间</th>
|
||||
<th>备注</th>
|
||||
<th class="two op">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr v-for="item in items">
|
||||
<td>{{item.ipFrom}}<span v-if="item.ipTo.length > 0"> - {{item.ipTo}}</span></td>
|
||||
<td>
|
||||
<span v-if="item.expiredTime.length > 0">{{item.expiredTime}}</span>
|
||||
<span v-else class="disabled">不过期</span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="item.reason.length > 0">{{item.reason}}</span>
|
||||
<span v-else class="disabled">-</span>
|
||||
</td>
|
||||
<td>
|
||||
<a href="" @click.prevent="updateItem(item.id)">修改</a>
|
||||
<a href="" @click.prevent="deleteItem(item.id)">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="page" v-html="page"></div>
|
||||
{$end}
|
||||
</div>
|
||||
@@ -0,0 +1,36 @@
|
||||
Tea.context(function () {
|
||||
this.updateItem = function (itemId) {
|
||||
teaweb.popup(Tea.url(".updateIPPopup?listId=" + this.listId, {itemId: itemId}), {
|
||||
height: "23em",
|
||||
callback: function () {
|
||||
teaweb.success("保存成功", function () {
|
||||
teaweb.reload()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.deleteItem = function (itemId) {
|
||||
let that = this
|
||||
teaweb.confirm("确定要删除这个IP吗？", function () {
|
||||
that.$post(".deleteIP")
|
||||
.params({
|
||||
"listId": this.listId,
|
||||
"itemId": itemId
|
||||
})
|
||||
.refresh()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加IP名单菜单
|
||||
*/
|
||||
this.createIP = function (type) {
|
||||
teaweb.popup("/servers/server/settings/waf/ipadmin/createIPPopup?listId=" + this.listId + '&type=' + type, {
|
||||
height: "23em",
|
||||
callback: function () {
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,16 @@
|
||||
.region-letter-group .item {
|
||||
padding-left: 1em !important;
|
||||
padding-right: 1em !important;
|
||||
}
|
||||
.country-group {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
.country-group .country-list .item {
|
||||
float: left;
|
||||
width: 12em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.country-group .country-list .item .checkbox label {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,oBACC;EACC,4BAAA;EACA,6BAAA;;AAIF;EAaC,mBAAA;;AAbD,cACC,cACC;EACC,WAAA;EACA,WAAA;EACA,oBAAA;;AALH,cACC,cACC,MAKC,UAAU;EACT,0BAAA","file":"index.css"}
|
||||
@@ -0,0 +1,51 @@
|
||||
{$layout}
|
||||
|
||||
{$template "../waf_menu"}
|
||||
{$template "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 selectable definition">
|
||||
<tr>
|
||||
<td class="title">已封禁</td>
|
||||
<td>
|
||||
<span v-if="countSelectedCountries == 0" class="disabled">暂时没有选择封禁区域。</span>
|
||||
<div class="ui label tiny basic" v-for="country in countries" v-if="country.isChecked" style="margin-bottom: 0.5em">
|
||||
<input type="hidden" name="countryIds" :value="country.id"/>
|
||||
({{country.letter}}){{country.name}} <a href="" @click.prevent="deselectCountry(country)" title="取消封禁"><i class="icon remove"></i></a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>选择封禁区域</td>
|
||||
<td>
|
||||
<more-options-indicator>选择区域</more-options-indicator>
|
||||
|
||||
<div class="ui menu tabular tiny region-letter-group" v-show="moreOptionsVisible">
|
||||
<a href="" v-for="group in letterGroups" class="item" :class="{active: group == selectedGroup}" @click.prevent="selectGroup(group)">{{group}}</a>
|
||||
<div class="item right">
|
||||
<div class="ui checkbox" @click.prevent="checkAll">
|
||||
<input type="checkbox" v-model="isCheckingAll"/>
|
||||
<label>全选</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="group in letterGroups" v-show="moreOptionsVisible">
|
||||
<div v-for="letter in group" v-if="letterCountries[letter] != null && group == selectedGroup" class="country-group">
|
||||
<h4>{{letter}}</h4>
|
||||
<div class="country-list">
|
||||
<div class="item" v-for="country in letterCountries[letter]">
|
||||
<div class="ui checkbox" @click.prevent="selectCountry(country)">
|
||||
<input type="checkbox" v-model="country.isChecked"/>
|
||||
<label>{{country.name}}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,66 @@
|
||||
Tea.context(function () {
|
||||
this.letterGroups = [
|
||||
"ABC", "DEF", "GHI", "JKL", "MNO", "PQR", "STU", "VWX", "YZ"
|
||||
];
|
||||
this.selectedGroup = "ABC"
|
||||
this.letterCountries = {}
|
||||
let that = this
|
||||
this.countSelectedCountries = this.countries.$count(function (k, country) {
|
||||
return country.isChecked
|
||||
})
|
||||
this.countries.forEach(function (country) {
|
||||
if (typeof (that.letterCountries[country.letter]) == "undefined") {
|
||||
that.letterCountries[country.letter] = []
|
||||
}
|
||||
that.letterCountries[country.letter].push(country)
|
||||
})
|
||||
this.isCheckingAll = false
|
||||
|
||||
this.selectGroup = function (group) {
|
||||
this.selectedGroup = group
|
||||
}
|
||||
|
||||
this.selectCountry = function (country) {
|
||||
country.isChecked = !country.isChecked
|
||||
this.change()
|
||||
}
|
||||
|
||||
this.deselectCountry = function (country) {
|
||||
country.isChecked = false
|
||||
this.change()
|
||||
}
|
||||
|
||||
this.checkAll = function () {
|
||||
this.isCheckingAll = !this.isCheckingAll
|
||||
|
||||
this.countries.forEach(function (country) {
|
||||
country.isChecked = that.isCheckingAll
|
||||
})
|
||||
|
||||
this.change()
|
||||
}
|
||||
|
||||
this.success = function () {
|
||||
teaweb.success("保存成功", function () {
|
||||
teaweb.reload()
|
||||
})
|
||||
}
|
||||
|
||||
this.change = function () {
|
||||
this.countSelectedCountries = this.countries.$count(function (k, country) {
|
||||
return country.isChecked
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加IP名单菜单
|
||||
*/
|
||||
this.createIP = function (type) {
|
||||
teaweb.popup("/servers/components/waf/ipadmin/createIPPopup?firewallPolicyId=" + this.firewallPolicyId + '&type=' + type, {
|
||||
height: "23em",
|
||||
callback: function () {
|
||||
window.location = "/servers/components/waf/ipadmin/lists?firewallPolicyId=" + this.firewallPolicyId + "&type=" + type
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,22 @@
|
||||
.region-letter-group {
|
||||
.item {
|
||||
padding-left: 1em !important;
|
||||
padding-right: 1em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.country-group {
|
||||
.country-list {
|
||||
.item {
|
||||
float: left;
|
||||
width: 12em;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
.checkbox label {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
Tea.context(function () {
|
||||
this.updateItem = function (itemId) {
|
||||
teaweb.popup(Tea.url(".updateIPPopup?firewallPolicyId=" + this.firewallPolicyId, {itemId: itemId}), {
|
||||
height: "23em",
|
||||
callback: function () {
|
||||
teaweb.success("保存成功", function () {
|
||||
teaweb.reload()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.deleteItem = function (itemId) {
|
||||
let that = this
|
||||
teaweb.confirm("确定要删除这个IP吗？", function () {
|
||||
that.$post(".deleteIP")
|
||||
.params({
|
||||
"firewallPolicyId": this.firewallPolicyId,
|
||||
"itemId": itemId
|
||||
})
|
||||
.refresh()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加IP名单菜单
|
||||
*/
|
||||
this.createIP = function (type) {
|
||||
teaweb.popup("/servers/components/waf/ipadmin/createIPPopup?firewallPolicyId=" + this.firewallPolicyId + '&type=' + type, {
|
||||
height: "23em",
|
||||
callback: function () {
|
||||
window.location = "/servers/components/waf/ipadmin/lists?firewallPolicyId=" + this.firewallPolicyId + "&type=" + type
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,9 @@
|
||||
.province-list .item {
|
||||
float: left;
|
||||
width: 12em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.province-list .item .checkbox label {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
/*# sourceMappingURL=provinces.css.map */
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["provinces.less"],"names":[],"mappings":"AAAA,cACC;EACC,WAAA;EACA,WAAA;EACA,oBAAA;;AAJF,cACC,MAKC,UAAU;EACT,0BAAA","file":"provinces.css"}
|
||||
@@ -0,0 +1,46 @@
|
||||
{$layout}
|
||||
|
||||
{$template "../waf_menu"}
|
||||
{$template "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 selectable definition">
|
||||
<tr>
|
||||
<td class="title">已封禁</td>
|
||||
<td>
|
||||
<span v-if="countSelectedProvinces == 0" class="disabled">暂时没有选择封禁省份。</span>
|
||||
<div class="ui label tiny basic" v-for="province in provinces" v-if="province.isChecked" style="margin-bottom: 0.5em">
|
||||
<input type="hidden" name="provinceIds" :value="province.id"/>
|
||||
{{province.name}} <a href="" @click.prevent="deselectProvince(province)" title="取消封禁"><i class="icon remove"></i></a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>选择封禁区域</td>
|
||||
<td>
|
||||
|
||||
<first-menu>
|
||||
<menu-item><more-options-indicator>选择省份/自治区</more-options-indicator></menu-item>
|
||||
<div class="item right" v-if="moreOptionsVisible">
|
||||
<div class="ui checkbox" @click.prevent="checkAll">
|
||||
<input type="checkbox" v-model="isCheckingAll"/>
|
||||
<label>全选</label>
|
||||
</div>
|
||||
</div>
|
||||
</first-menu>
|
||||
|
||||
<div class="province-list" v-show="moreOptionsVisible" style="margin-top:0.5em">
|
||||
<div class="item" v-for="province in provinces">
|
||||
<div class="ui checkbox" @click.prevent="selectProvince(province)">
|
||||
<input type="checkbox" v-model="province.isChecked"/>
|
||||
<label>{{province.name}}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,52 @@
|
||||
Tea.context(function () {
|
||||
this.isCheckingAll = false
|
||||
|
||||
this.countSelectedProvinces = this.provinces.$count(function (k, province) {
|
||||
return province.isChecked
|
||||
})
|
||||
|
||||
this.selectProvince = function (province) {
|
||||
province.isChecked = !province.isChecked
|
||||
this.change()
|
||||
}
|
||||
|
||||
this.deselectProvince = function (province) {
|
||||
province.isChecked = false
|
||||
this.change()
|
||||
}
|
||||
|
||||
this.checkAll = function () {
|
||||
this.isCheckingAll = !this.isCheckingAll
|
||||
let that = this
|
||||
this.provinces.forEach(function (province) {
|
||||
province.isChecked = that.isCheckingAll
|
||||
})
|
||||
|
||||
this.change()
|
||||
}
|
||||
|
||||
this.success = function () {
|
||||
teaweb.success("保存成功", function () {
|
||||
teaweb.reload()
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
this.change = function () {
|
||||
this.countSelectedProvinces = this.provinces.$count(function (k, province) {
|
||||
return province.isChecked
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加IP名单菜单
|
||||
*/
|
||||
this.createIP = function (type) {
|
||||
teaweb.popup("/servers/components/waf/ipadmin/createIPPopup?firewallPolicyId=" + this.firewallPolicyId + '&type=' + type, {
|
||||
height: "23em",
|
||||
callback: function () {
|
||||
window.location = "/servers/components/waf/ipadmin/lists?firewallPolicyId=" + this.firewallPolicyId + "&type=" + type
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,11 @@
|
||||
.province-list {
|
||||
.item {
|
||||
float: left;
|
||||
width: 12em;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
.checkbox label {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>修改IP</h3>
|
||||
|
||||
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="itemId" :value="item.id"/>
|
||||
<csrf-token></csrf-token>
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">开始IP *</td>
|
||||
<td>
|
||||
<input type="text" name="ipFrom" maxlength="64" placeholder="x.x.x.x" ref="focus" v-model="item.ipFrom"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>结束IP</td>
|
||||
<td>
|
||||
<input type="text" name="ipTo" maxlength="64" placeholder="x.x.x.x" v-model="item.ipTo"/>
|
||||
<p class="comment">表示IP段的时候需要填写此项。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<tr>
|
||||
<td>过期时间</td>
|
||||
<td>
|
||||
<datetime-input :v-name="'expiredAt'" :v-timestamp="item.expiredAt"></datetime-input>
|
||||
<p class="comment">在加入名单某一段时间后会失效，留空表示永久有效。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>备注</td>
|
||||
<td><input type="text" name="reason" maxlength="100" v-model="item.reason"/></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
Reference in New Issue
Block a user