ChenKaiLiuG/GoEdgeAdmin
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

增加独立的IP地址管理功能

Browse Source
This commit is contained in:
GoEdgeLab
2021-08-31 17:24:30 +08:00
parent 06d7f8d754
commit 31aa942c0f
31 changed files with 822 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/public/js/components/cluster/cluster-selector.js
View File

@@ -1,5 +1,6 @@
// 单个集群选择
Vue.component("cluster-selector", {
props: ["v-cluster-id"],
mounted: function () {
let that = this
@@ -9,7 +10,6 @@ Vue.component("cluster-selector", {
that.clusters = resp.data.clusters
})
},
props: ["v-cluster-id"],
data: function () {
let clusterId = this.vClusterId
if (clusterId == null) {
@@ -21,7 +21,7 @@ Vue.component("cluster-selector", {
}
},
template: `<div>
<select class="ui dropdown auto-width" name="clusterId" v-model="clusterId">
<select class="ui dropdown" style="max-width: 10em" name="clusterId" v-model="clusterId">
<option value="0">[选择集群]</option>
<option v-for="cluster in clusters" :value="cluster.id">{{cluster.name}}</option>
</select>

9
web/public/js/components/node/node-ip-addresses-box.js
View File

@@ -1,9 +1,10 @@
// 节点IP地址管理（标签形式）
Vue.component("node-ip-addresses-box", {
props: ["vIpAddresses"],
props: ["v-ip-addresses", "role"],
data: function () {
return {
ipAddresses: (this.vIpAddresses == null) ? [] : this.vIpAddresses
ipAddresses: (this.vIpAddresses == null) ? [] : this.vIpAddresses,
supportThresholds: this.role != "ns"
}
},
methods: {
@@ -12,7 +13,7 @@ Vue.component("node-ip-addresses-box", {
window.UPDATING_NODE_IP_ADDRESS = null
let that = this;
teaweb.popup("/nodes/ipAddresses/createPopup", {
teaweb.popup("/nodes/ipAddresses/createPopup?supportThresholds=" + (this.supportThresholds ? 1 : 0), {
callback: function (resp) {
that.ipAddresses.push(resp.data.ipAddress);
},
@@ -26,7 +27,7 @@ Vue.component("node-ip-addresses-box", {
window.UPDATING_NODE_IP_ADDRESS = address
let that = this;
teaweb.popup("/nodes/ipAddresses/updatePopup", {
teaweb.popup("/nodes/ipAddresses/updatePopup?supportThresholds=" + (this.supportThresholds ? 1 : 0), {
callback: function (resp) {
Vue.set(that.ipAddresses, index, resp.data.ipAddress);
},

4
web/views/@default/clusters/ip-addrs/@menu.html Normal file
View File

@@ -0,0 +1,4 @@
<first-menu>
<menu-item href="." code="index">IP地址</menu-item>
<menu-item href=".logs" code="log">变更日志</menu-item>
</first-menu>

7
web/views/@default/clusters/ip-addrs/addr/@menu.html Normal file
View File

@@ -0,0 +1,7 @@
<first-menu>
<menu-item href="/clusters/ip-addrs">全部地址</menu-item>
<span class="item disabled">|</span>
<menu-item :href="'.?addrId=' + addr.id" code="addr">"{{addr.ip}}"详情</menu-item>
<menu-item :href="'.logs?addrId=' + addr.id" code="log">日志</menu-item>
<menu-item :href="'.update?addrId=' + addr.id" code="update">修改</menu-item>
</first-menu>

54
web/views/@default/clusters/ip-addrs/addr/index.html Normal file
View File

@@ -0,0 +1,54 @@
{$layout}
{$template "menu"}
<table class="ui table definition selectable">
<tr>
<td class="title">IP地址</td>
<td>
{{addr.ip}}
</td>
</tr>
<tr>
<td>状态</td>
<td>
<label-on :v-is-on="addr.isOn" v-if="!addr.isOn"></label-on>
<span v-else-if="addr.isUp" class="green">在线</span>
<span v-else class="red">离线</span>
</td>
</tr>
<tr>
<td>所属集群</td>
<td><link-icon :href="'/clusters/cluster?clusterId=' + addr.cluster.id">{{addr.cluster.name}}</link-icon></td>
</tr>
<tr>
<td>所属节点</td>
<td>
<link-icon :href="'/clusters/cluster/node?clusterId=' + addr.cluster.id + '&nodeId=' + addr.node.id">{{addr.node.name}}</link-icon>
</td>
</tr>
<tr>
<td>名称</td>
<td>
<span v-if="addr.name.length > 0">{{addr.name}}</span>
<span v-else class="disabled">-</span>
</td>
</tr>
<tr>
<td>是否可以访问</td>
<td>
<span v-if="addr.canAccess" class="green">Y</span>
<span v-else class="disabled">N</span>
</td>
</tr>
<tr>
<td>阈值</td>
<td>
<div v-if="addr.thresholds.length > 0">
<span v-for="threshold in addr.thresholds" class="ui basic tiny label">
{{threshold.item}} {{threshold.operator}} {{threshold.value}}
</span>
</div>
<span v-else class="disabled">没有设置阈值。</span>
</td>
</tr>
</table>

34
web/views/@default/clusters/ip-addrs/addr/logs.html Normal file
View File

@@ -0,0 +1,34 @@
{$layout}
{$template "menu"}
<p class="comment" v-if="logs.length == 0">暂时还没有日志。</p>
<div v-if="logs.length > 0">
<div class="margin"></div>
<table class="ui table selectable celled">
<thead>
<tr>
<th class="two wide">操作人</th>
<th class="two wide">状态</th>
<th>描述</th>
<th style="width: 12em">时间</th>
</tr>
</thead>
<tr v-for="log in logs">
<td>
<span v-if="log.admin.id > 0">{{log.admin.name}}</span>
<span v-else class="grey">{{log.admin.name}}</span>
</td>
<td>
<span v-if="!log.isOn" class="red">停用</span>
<span v-else-if="!log.canAccess" class="red">不可访问</span>
<span v-else-if="log.isUp" class="green">上线</span>
<span v-else class="red">离线</span>
</td>
<td>{{log.description}}</td>
<td>{{log.createdTime}}</td>
</tr>
</table>
</div>
<div class="page" v-html="page"></div>

53
web/views/@default/clusters/ip-addrs/addr/update.html Normal file
View File

@@ -0,0 +1,53 @@
{$layout}
{$template "menu"}
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
<csrf-token></csrf-token>
<input type="hidden" name="addrId" :value="addr.id"/>
<table class="ui table definition selectable">
<tr>
<td class="title">IP地址 *</td>
<td>
<input type="text" name="ip" maxlength="128" ref="focus" v-model="addr.ip"/>
</td>
</tr>
<tr>
<td>是否可以访问</td>
<td>
<div class="ui checkbox">
<input type="checkbox" name="canAccess" value="1" v-model="addr.canAccess"/>
<label></label>
</div>
<p class="comment">是否为可以公开访问的IP，如果选中，也会作为DNS解析记录的值使用。</p>
</td>
</tr>
<tr>
<td colspan="2"><more-options-indicator></more-options-indicator></td>
</tr>
<tbody v-show="moreOptionsVisible">
<tr>
<td>是否启用</td>
<td>
<div class="ui checkbox">
<input type="checkbox" name="isOn" value="1" v-model="addr.isOn"/>
<label></label>
</div>
<p class="comment">选中表示当前IP有效。</p>
</td>
</tr>
<tr>
<td class="title">名称</td>
<td>
<input type="text" name="name" maxlength="50" v-model="addr.name"/>
</td>
</tr>
<tr v-if="teaIsPlus && supportThresholds">
<td>上线阈值</td>
<td>
<node-ip-address-thresholds-box :v-thresholds="addr.thresholds"></node-ip-address-thresholds-box>
</td>
</tr>
</tbody>
</table>
<submit-btn></submit-btn>
</form>

3
web/views/@default/clusters/ip-addrs/addr/update.js Normal file
View File

@@ -0,0 +1,3 @@
Tea.context(function () {
this.success = NotifySuccess("保存成功", Tea.url(".addr", { addrId: this.addr.id }))
})

86
web/views/@default/clusters/ip-addrs/index.html Normal file
View File

@@ -0,0 +1,86 @@
{$layout}
{$template "menu"}
<div class="margin"></div>
<form class="ui form" method="get" action="/clusters/ip-addrs">
<div class="ui fields inline">
<div class="ui field">
集群：
</div>
<div class="ui field">
<cluster-selector :v-cluster-id="clusterId"></cluster-selector>
</div>
<div class="ui field">
状态：
</div>
<div class="ui field">
<select class="ui dropdown" name="upState" v-model="upState">
<option value="0">[全部]</option>
<option value="1">在线</option>
<option value="2">离线</option>
</select>
</div>
<div class="ui field">
<input type="text" placeholder="IP、名称..." name="keyword" v-model="keyword"/>
</div>
<div class="ui field">
<button class="ui button" type="submit">搜索</button>
&nbsp;
<a href="/clusters/ip-addrs" v-if="clusterId > 0 || upState > 0 || keyword.length > 0">[清除条件]</a>
</div>
</div>
</form>
<p class="comment" v-if="addrs.length == 0">暂时还没有IP地址。</p>
<div v-if="addrs.length > 0">
<div class="margin"></div>
<table class="ui table selectable celled">
<thead>
<tr>
<th>IP</th>
<th>所属集群</th>
<th>所属节点</th>
<th>名称</th>
<th>可访问</th>
<th>阈值</th>
<th>状态</th>
<th class="two op">操作</th>
</tr>
</thead>
<tr v-for="addr in addrs">
<td>
<a :href="'/clusters/ip-addrs/addr?addrId=' + addr.id"><keyword :v-word="keyword">{{addr.ip}}</keyword></a>
</td>
<td>
<link-icon :href="'/clusters/cluster?clusterId=' + addr.cluster.id">{{addr.cluster.name}}</link-icon>
</td>
<td>
<link-icon :href="'/clusters/cluster/node?clusterId=' + addr.cluster.id + '&nodeId=' + addr.node.id"><keyword :v-word="keyword">{{addr.node.name}}</keyword></link-icon>
</td>
<td>
<span v-if="addr.name.length > 0"><keyword :v-word="keyword">{{addr.name}}</keyword></span>
<span v-else class="disabled">-</span>
</td>
<td>
<span v-if="addr.canAccess" class="green">Y</span>
<span v-else class="disabled">N</span>
</td>
<td>
<span v-if="addr.hasThresholds" class="green">Y</span>
<span v-else class="disabled">N</span>
</td>
<td>
<label-on :v-is-on="addr.isOn" v-if="!addr.isOn"></label-on>
<span v-else-if="addr.isUp" class="green">在线</span>
<span v-else class="red">离线</span>
</td>
<td>
<a :href="'/clusters/ip-addrs/addr?addrId=' + addr.id">详情</a> &nbsp;
<a href="" @click.prevent="deleteAddr(addr.id)">删除</a>
</td>
</tr>
</table>
</div>
<div class="page" v-html="page"></div>

13
web/views/@default/clusters/ip-addrs/index.js Normal file
View File

@@ -0,0 +1,13 @@
Tea.context(function () {
this.deleteAddr = function (addrId) {
teaweb.confirm("确定要删除这个IP地址吗？", function () {
this.$post(".addr.delete")
.params({
addrId: addrId
})
.success(function () {
teaweb.reload()
})
})
}
})

39
web/views/@default/clusters/ip-addrs/logs.html Normal file
View File

@@ -0,0 +1,39 @@
{$layout}
{$template "menu"}
<p class="comment" v-if="logs.length == 0">暂时还没有日志。</p>
<div v-if="logs.length > 0">
<div class="margin"></div>
<table class="ui table selectable celled">
<thead>
<tr>
<th class="two wide">操作人</th>
<th>IP</th>
<th class="two wide">状态</th>
<th>描述</th>
<th style="width: 12em">时间</th>
</tr>
</thead>
<tr v-for="log in logs">
<td>
<span v-if="log.admin.id > 0">{{log.admin.name}}</span>
<span v-else class="grey">{{log.admin.name}}</span>
</td>
<td>
<span v-if="log.addr != null"><a :href="'/clusters/ip-addrs/addr?addrId=' + log.addr.id">{{log.addr.ip}}</a></span>
<span v-else class="disabled">已删除</span>
</td>
<td>
<span v-if="!log.isOn" class="red">停用</span>
<span v-else-if="!log.canAccess" class="red">不可访问</span>
<span v-else-if="log.isUp" class="green">上线</span>
<span v-else class="red">离线</span>
</td>
<td>{{log.description}}</td>
<td>{{log.createdTime}}</td>
</tr>
</table>
</div>
<div class="page" v-html="page"></div>

4
web/views/@default/nodes/ipAddresses/createPopup.html
View File

@@ -25,12 +25,12 @@
</tr>
<tbody v-show="moreOptionsVisible">
<tr>
<td class="title">备注</td>
<td class="title">名称</td>
<td>
<input type="text" name="name" maxlength="50"/>
</td>
</tr>
<tr v-if="teaIsPlus">
<tr v-if="teaIsPlus && supportThresholds">
<td>上线阈值</td>
<td>
<node-ip-address-thresholds-box></node-ip-address-thresholds-box>

4
web/views/@default/nodes/ipAddresses/updatePopup.html
View File

@@ -36,12 +36,12 @@
</td>
</tr>
<tr>
<td class="title">备注</td>
<td class="title">名称</td>
<td>
<input type="text" name="name" maxlength="50" v-model="address.name"/>
</td>
</tr>
<tr v-if="teaIsPlus">
<tr v-if="teaIsPlus && supportThresholds">
<td>上线阈值</td>
<td>
<node-ip-address-thresholds-box :v-thresholds="address.thresholds"></node-ip-address-thresholds-box>

2
web/views/@default/ns/clusters/cluster/createNode.html
View File

@@ -13,7 +13,7 @@
<tr>
<td>IP地址 *</td>
<td>
<node-ip-addresses-box role="dns"></node-ip-addresses-box>
<node-ip-addresses-box role="ns"></node-ip-addresses-box>
<p class="comment">用于访问节点和域名解析等。</p>
</td>
</tr>

2
web/views/@default/ns/clusters/cluster/node/update.html
View File

@@ -16,7 +16,7 @@
<tr>
<td>IP地址 *</td>
<td>
<node-ip-addresses-box :v-ip-addresses="node.ipAddresses"></node-ip-addresses-box>
<node-ip-addresses-box role="ns" :v-ip-addresses="node.ipAddresses"></node-ip-addresses-box>
<p class="comment">用于访问节点和域名解析等。</p>
</td>
</tr>