mirror of
https://github.com/TeaOSLab/EdgeAdmin.git
synced 2025-12-16 05:36:36 +08:00
实现基本的监控终端管理
This commit is contained in:
刘祥超
@@ -1,5 +1,6 @@
|
||||
<first-menu>
|
||||
<menu-item href="/clusters/monitors" code="index">任务</menu-item>
|
||||
<menu-item href="/clusters/monitors/logs" code="log">日志</menu-item>
|
||||
<!--<menu-item href="/clusters/monitors" code="index">任务</menu-item>-->
|
||||
<!--<menu-item href="/clusters/monitors/logs" code="log">日志</menu-item>-->
|
||||
<menu-item href="/clusters/monitors/reporters" code="reporter">终端</menu-item>
|
||||
<menu-item href="/clusters/monitors/groups" code="group">分组</menu-item>
|
||||
</first-menu>
|
||||
15
web/views/@default/clusters/monitors/groups/createPopup.html
Normal file
15
web/views/@default/clusters/monitors/groups/createPopup.html
Normal file
@@ -0,0 +1,15 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>创建分组</h3>
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<csrf-token></csrf-token>
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">分组名称</td>
|
||||
<td>
|
||||
<input type="text" name="name" maxlength="50" ref="focus"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,16 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>修改分组</h3>
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<csrf-token></csrf-token>
|
||||
<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="50" ref="focus" v-model="group.name"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
23
web/views/@default/clusters/monitors/groups/index.html
Normal file
23
web/views/@default/clusters/monitors/groups/index.html
Normal file
@@ -0,0 +1,23 @@
|
||||
{$layout}
|
||||
{$template "../menu"}
|
||||
|
||||
<second-menu>
|
||||
<menu-item @click.prevent="createGroup">[添加分组]</menu-item>
|
||||
</second-menu>
|
||||
|
||||
<p class="comment" v-if="groups.length == 0">暂时还没有分组。</p>
|
||||
<table class="ui table selectable celled" v-if="groups.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>分组名称</th>
|
||||
<th class="two wide">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr v-for="group in groups">
|
||||
<td>{{group.name}}</td>
|
||||
<td>
|
||||
<a href="" @click.prevent="updateGroup(group.id)">修改</a>
|
||||
<a href="" @click.prevent="deleteGroup(group.id)">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
31
web/views/@default/clusters/monitors/groups/index.js
Normal file
31
web/views/@default/clusters/monitors/groups/index.js
Normal file
@@ -0,0 +1,31 @@
|
||||
Tea.context(function () {
|
||||
this.createGroup = function () {
|
||||
teaweb.popup(".createPopup", {
|
||||
callback: function () {
|
||||
teaweb.success("保存成功", function () {
|
||||
teaweb.reload()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.updateGroup = function (groupId) {
|
||||
teaweb.popup(".group.updatePopup?groupId=" + groupId, {
|
||||
callback: function () {
|
||||
teaweb.success("保存成功", function () {
|
||||
teaweb.reload()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.deleteGroup = function (groupId) {
|
||||
teaweb.confirm("确定要删除此分组吗？", function () {
|
||||
this.$post(".group.delete")
|
||||
.params({
|
||||
groupId: groupId
|
||||
})
|
||||
.refresh()
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -1,2 +1,60 @@
|
||||
{$layout}
|
||||
{$template "menu"}
|
||||
{$template "menu"}
|
||||
|
||||
<div class="margin"></div>
|
||||
|
||||
<form class="ui form" method="get" action="/clusters/monitors">
|
||||
<div class="ui fields inline">
|
||||
<div class="ui field">
|
||||
集群:
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<select class="ui dropdown" name="clusterId" v-model="clusterId">
|
||||
<option v-for="cluster in clusters" :value="cluster.id">{{cluster.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<button class="ui button" type="submit">查看</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p class="comment" v-if="tasks.length == 0">暂时还没有任务。</p>
|
||||
|
||||
<table class="ui table selectable celled" v-if="tasks.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>节点</th>
|
||||
<th>IP</th>
|
||||
<th class="one wide">端口</th>
|
||||
<th>综合延时</th>
|
||||
<th>综合级别</th>
|
||||
<th>综合连通率</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr v-for="task in tasks">
|
||||
<td>
|
||||
<span v-if="task.node.id > 0">{{task.node.name}}<link-icon :href="'/clusters/cluster/node?nodeId=' + task.node.id + '&clusterId=' + clusterId"></link-icon></span>
|
||||
</td>
|
||||
<td>
|
||||
{{task.ip}}<link-icon :href="'/clusters/ip-addrs/addr?addrId=' + task.addr.id"></link-icon>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="task.port > 0">{{task.port}}</span>
|
||||
<span v-else class="disabled">-</span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="task.costMs > 0" :class="task.color">{{task.costMs}}ms</span>
|
||||
<span v-else class="disabled">-</span>
|
||||
</td>
|
||||
<td>
|
||||
<span :class="task.color">{{task.levelName}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="task.connectivity > 0" :class="task.color">{{task.connectivity}}%</span>
|
||||
<span v-else class="disabled">-</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="page" v-html="page"></div>
|
||||
18
web/views/@default/clusters/monitors/index.js
Normal file
18
web/views/@default/clusters/monitors/index.js
Normal file
@@ -0,0 +1,18 @@
|
||||
Tea.context(function () {
|
||||
this.tasks.forEach(function (v) {
|
||||
switch (v.level) {
|
||||
case "good":
|
||||
v.color = "green"
|
||||
break
|
||||
case "normal":
|
||||
v.color = "blue"
|
||||
break
|
||||
case "bad":
|
||||
v.color = "orange"
|
||||
break
|
||||
case "broken":
|
||||
v.color = "red"
|
||||
break
|
||||
}
|
||||
})
|
||||
})
|
||||
@@ -5,11 +5,17 @@
|
||||
<csrf-token></csrf-token>
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">名称 *</td>
|
||||
<td class="title">终端名称 *</td>
|
||||
<td>
|
||||
<input type="text" name="name" maxlength="50" ref="focus"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>所属分组</td>
|
||||
<td>
|
||||
<report-node-groups-selector></report-node-groups-selector>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
|
||||
@@ -7,11 +7,19 @@
|
||||
|
||||
<form class="ui form" method="get" action="/clusters/monitors/reporters">
|
||||
<div class="ui fields inline">
|
||||
<div class="ui field" v-if="groups.length > 0">
|
||||
<select class="ui dropdown auto-width" name="groupId" v-model="groupId">
|
||||
<option value="0">[全部分组]</option>
|
||||
<option v-for="group in groups" :value="group.id">{{group.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<input type="text" name="keyword" v-model="keyword" placeholder="名称、地域、IP..."/>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<button class="ui button" type="submit">搜索</button>
|
||||
|
||||
<a href="/clusters/monitors/reporters" v-if="groupId > 0 || keyword.length > 0">[清除条件]</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -33,6 +41,12 @@
|
||||
<tr v-for="reporter in reporters">
|
||||
<td>
|
||||
<a :href="Tea.url('.reporter', {reporterId: reporter.id})"><keyword :v-word="keyword">{{reporter.name}}</keyword></a>
|
||||
<div v-if="reporter.groups.length > 0" style="margin-top: 0.5em">
|
||||
<div class="ui label basic tiny" v-for="group in reporter.groups"><span class="small">{{group.name}}</span></div>
|
||||
</div>
|
||||
<div v-if="reporter.shouldUpgrade">
|
||||
<span class="red small" title="需要升级">v{{reporter.status.buildVersion}} -> v{{reporter.newVersion}}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="reporter.location.length > 0"><keyword :v-word="keyword">{{reporter.location}}</keyword></span>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">名称</td>
|
||||
<td class="title">终端名称</td>
|
||||
<td>
|
||||
{{reporter.name}}
|
||||
</td>
|
||||
@@ -17,6 +17,15 @@
|
||||
<span v-else class="green">在线</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>所属分组</td>
|
||||
<td>
|
||||
<div v-if="reporter.groups.length > 0">
|
||||
<span v-for="group in reporter.groups" class="ui label basic tiny">{{group.name}}</span>
|
||||
</div>
|
||||
<span v-else class="disabled">全部分组</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>区域</td>
|
||||
<td>
|
||||
@@ -42,6 +51,10 @@
|
||||
<span v-else class="disabled">没有设置</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="reporter.status.buildVersion.length > 0">
|
||||
<td>版本号</td>
|
||||
<td>v{{reporter.status.buildVersion}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h4>安装信息</h4>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<tr>
|
||||
<th class="two wide">类型</th>
|
||||
<th class="four wide">对象</th>
|
||||
<th class="one wide">结果</th>
|
||||
<th class="one wide">级别</th>
|
||||
<th class="two wide">耗时</th>
|
||||
<th>错误信息</th>
|
||||
</tr>
|
||||
@@ -33,10 +33,12 @@
|
||||
<td>{{result.typeName}}</td>
|
||||
<td>{{result.targetDesc}}</td>
|
||||
<td>
|
||||
<span v-if="result.isOk" class="green">成功</span>
|
||||
<span v-else class="red">失败</span>
|
||||
<span :class="result.color">{{result.levelName}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="result.isOk" :class="result.color">{{result.costMs}}ms</span>
|
||||
<span v-else class="disabled">-</span>
|
||||
</td>
|
||||
<td>{{result.costMs}}ms</td>
|
||||
<td>
|
||||
<span v-if="!result.isOk" class="red">{{result.error}}</span>
|
||||
<span v-else class="disabled">-</span>
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
Tea.context(function () {
|
||||
this.results.forEach(function (v) {
|
||||
switch (v.level) {
|
||||
case "good":
|
||||
v.color = "green"
|
||||
break
|
||||
case "normal":
|
||||
v.color = "blue"
|
||||
break
|
||||
case "bad":
|
||||
v.color = "orange"
|
||||
break
|
||||
case "broken":
|
||||
v.color = "red"
|
||||
break
|
||||
}
|
||||
})
|
||||
})
|
||||
@@ -6,11 +6,17 @@
|
||||
<input type="hidden" name="reporterId" :value="reporter.id"/>
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">名称 *</td>
|
||||
<td class="title">终端名称 *</td>
|
||||
<td>
|
||||
<input type="text" name="name" maxlength="50" ref="focus" v-model="reporter.name"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>所属分组</td>
|
||||
<td>
|
||||
<report-node-groups-selector :v-group-ids="reporter.groupIds"></report-node-groups-selector>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user