mirror of
https://github.com/nezhahq/nezha.git
synced 2025-01-22 12:48:14 -05:00
添加标签功能
This commit is contained in:
我若为王
parent
e3dad37670
commit
be3fc41755
@ -87,6 +87,7 @@ type serverForm struct {
|
||||
Name string `binding:"required"`
|
||||
DisplayIndex int
|
||||
Secret string
|
||||
Tag string
|
||||
}
|
||||
|
||||
func (ma *memberAPI) addOrEditServer(c *gin.Context) {
|
||||
@ -102,6 +103,7 @@ func (ma *memberAPI) addOrEditServer(c *gin.Context) {
|
||||
s.Secret = sf.Secret
|
||||
s.DisplayIndex = sf.DisplayIndex
|
||||
s.ID = sf.ID
|
||||
s.Tag = sf.Tag
|
||||
if sf.ID == 0 {
|
||||
s.Secret = com.MD5(fmt.Sprintf("%s%s%d", time.Now(), sf.Name, admin.ID))
|
||||
s.Secret = s.Secret[:10]
|
||||
|
||||
@ -14,10 +14,10 @@ type Server struct {
|
||||
Name string
|
||||
DisplayIndex int // 展示权重，越大越靠前
|
||||
Secret string `json:"-"`
|
||||
|
||||
Host *Host `gorm:"-"`
|
||||
State *State `gorm:"-"`
|
||||
LastActive time.Time
|
||||
Tag string
|
||||
Host *Host `gorm:"-"`
|
||||
State *State `gorm:"-"`
|
||||
LastActive time.Time
|
||||
|
||||
Stream pb.NezhaService_HeartbeatServer `gorm:"-" json:"-"`
|
||||
StreamClose chan<- error `gorm:"-" json:"-"`
|
||||
|
||||
@ -8,6 +8,10 @@
|
||||
<label>备注</label>
|
||||
<input type="text" name="name" placeholder="爱因斯坦-光速1号">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>标签</label>
|
||||
<input type="text" name="Tag" placeholder="服务器标签">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>展示权重</label>
|
||||
<input type="number" name="DisplayIndex" placeholder="越大越靠前">
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
<tr>
|
||||
<th>权重</th>
|
||||
<th>备注</th>
|
||||
<th>标签</th>
|
||||
<th>IP</th>
|
||||
<th>ID</th>
|
||||
<th>密钥</th>
|
||||
@ -26,6 +27,7 @@
|
||||
<tr>
|
||||
<td>{{$server.DisplayIndex}}</td>
|
||||
<td>{{$server.Name}}</td>
|
||||
<td>{{$server.Tag}}</td>
|
||||
<td>{{$server.Host.IP}}</td>
|
||||
<td>{{$server.ID}}</td>
|
||||
<td>{{$server.Secret}}</td>
|
||||
|
||||
@ -6,102 +6,116 @@
|
||||
{{template "common/menu" .}}
|
||||
<div class="nb-container">
|
||||
<div class="ui container">
|
||||
<div class="ui four stackable status cards">
|
||||
<div v-for='server in servers' :id="server.ID" class="card">
|
||||
<div class="content" v-if='server.Host'>
|
||||
<div class="header"><i :class="server.Host.CountryCode + ' flag'"></i><i
|
||||
v-if='server.Host.Platform == "darwin"' class="apple icon"></i><i
|
||||
v-if='server.Host.Platform == "linux"' class="linux icon"></i><i
|
||||
v-if='server.Host.Platform == "windows"' class="windows icon"></i><i
|
||||
v-if='server.Host.Platform == "freebsd"' class="freebsd icon"></i>@#server.Name +
|
||||
(server.live?'':' [已离线]')#@
|
||||
<i class="yellow info circle icon"></i>
|
||||
<div class='ui content popup'>
|
||||
系统：@#server.Host.Platform#@-@#server.Host.PlatformVersion#@ [<span
|
||||
v-if='server.Host.Virtualization'>@#server.Host.Virtualization#@:</span>@#server.Host.Arch#@]<br>
|
||||
CPU：@#server.Host.CPU#@<br>
|
||||
硬盘：@#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@<br>
|
||||
内存：@#formatByteSize(server.State.MemUsed)#@/@#formatByteSize(server.Host.MemTotal)#@<br>
|
||||
交换：@#formatByteSize(server.State.SwapUsed)#@/@#formatByteSize(server.Host.SwapTotal)#@<br>
|
||||
流量：<i
|
||||
class='arrow alternate circle down outline icon'></i>@#formatByteSize(server.State.NetInTransfer)#@<i
|
||||
class='arrow alternate circle up outline icon'></i>@#formatByteSize(server.State.NetOutTransfer)#@<br>
|
||||
启动：@# formatTimestamp(server.Host.BootTime) #@<br>
|
||||
版本：@#server.Host.Version#@<br>
|
||||
<div id="app">
|
||||
<div class="ui" v-for="group in groups" >
|
||||
<br>
|
||||
<div class="ui horizontal divider">
|
||||
@#group.Tag#@
|
||||
</div>
|
||||
|
||||
<div class="ui four stackable status cards"> <div v-for='server in group.data' :id="server.ID" class="card">
|
||||
<div class="content" v-if='server.Host'>
|
||||
<div class="header"><i :class="server.Host.CountryCode + ' flag'"></i><i
|
||||
v-if='server.Host.Platform == "darwin"' class="apple icon"></i><i
|
||||
v-if='server.Host.Platform == "linux"' class="linux icon"></i><i
|
||||
v-if='server.Host.Platform == "windows"' class="windows icon"></i><i
|
||||
v-if='server.Host.Platform == "freebsd"' class="freebsd icon"></i>@#server.Name +
|
||||
(server.live?'':' [已离线]')#@
|
||||
<i class="yellow info circle icon"></i>
|
||||
<div class='ui content popup'>
|
||||
系统：@#server.Host.Platform#@-@#server.Host.PlatformVersion#@ [<span
|
||||
v-if='server.Host.Virtualization'>@#server.Host.Virtualization#@:</span>@#server.Host.Arch#@]<br>
|
||||
CPU：@#server.Host.CPU#@<br>
|
||||
硬盘：@#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@<br>
|
||||
内存：@#formatByteSize(server.State.MemUsed)#@/@#formatByteSize(server.Host.MemTotal)#@<br>
|
||||
交换：@#formatByteSize(server.State.SwapUsed)#@/@#formatByteSize(server.Host.SwapTotal)#@<br>
|
||||
流量：<i
|
||||
class='arrow alternate circle down outline icon'></i>@#formatByteSize(server.State.NetInTransfer)#@<i
|
||||
class='arrow alternate circle up outline icon'></i>@#formatByteSize(server.State.NetOutTransfer)#@<br>
|
||||
启动：@# formatTimestamp(server.Host.BootTime) #@<br>
|
||||
版本：@#server.Host.Version#@<br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<div class="ui grid">
|
||||
<div class="three wide column">CPU</div>
|
||||
<div class="thirteen wide column">
|
||||
<div :class="formatPercent(server.live,server.State.CPU, 100).class">
|
||||
<div class="bar" :style="formatPercent(server.live,server.State.CPU, 100).style">
|
||||
<small>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small>
|
||||
<div class="description">
|
||||
<div class="ui grid">
|
||||
<div class="three wide column">CPU</div>
|
||||
<div class="thirteen wide column">
|
||||
<div :class="formatPercent(server.live,server.State.CPU, 100).class">
|
||||
<div class="bar"
|
||||
:style="formatPercent(server.live,server.State.CPU, 100).style">
|
||||
<small>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three wide column">内存</div>
|
||||
<div class="thirteen wide column">
|
||||
<div
|
||||
:class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class">
|
||||
<div class="bar"
|
||||
:style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style">
|
||||
<small>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small>
|
||||
<div class="three wide column">内存</div>
|
||||
<div class="thirteen wide column">
|
||||
<div
|
||||
:class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class">
|
||||
<div class="bar"
|
||||
:style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style">
|
||||
<small>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three wide column">交换</div>
|
||||
<div class="thirteen wide column">
|
||||
<div
|
||||
:class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class">
|
||||
<div class="bar"
|
||||
:style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style">
|
||||
<small>@#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal*100:0)#@%</small>
|
||||
<div class="three wide column">交换</div>
|
||||
<div class="thirteen wide column">
|
||||
<div
|
||||
:class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class">
|
||||
<div class="bar"
|
||||
:style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style">
|
||||
<small>@#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal*100:0)#@%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three wide column">网络</div>
|
||||
<div class="thirteen wide column">
|
||||
<i class="arrow alternate circle down outline icon"></i>
|
||||
@#formatByteSize(server.State.NetInSpeed)#@/s
|
||||
<i class="arrow alternate circle up outline icon"></i>
|
||||
@#formatByteSize(server.State.NetOutSpeed)#@/s
|
||||
</div>
|
||||
<div class="three wide column">硬盘</div>
|
||||
<div class="thirteen wide column">
|
||||
<div
|
||||
:class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class">
|
||||
<div class="bar"
|
||||
:style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
|
||||
<small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
|
||||
<div class="three wide column">网络</div>
|
||||
<div class="thirteen wide column">
|
||||
<i class="arrow alternate circle down outline icon"></i>
|
||||
@#formatByteSize(server.State.NetInSpeed)#@/s
|
||||
<i class="arrow alternate circle up outline icon"></i>
|
||||
@#formatByteSize(server.State.NetOutSpeed)#@/s
|
||||
</div>
|
||||
<div class="three wide column">硬盘</div>
|
||||
<div class="thirteen wide column">
|
||||
<div
|
||||
:class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class">
|
||||
<div class="bar"
|
||||
:style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
|
||||
<small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three wide column">在线</div>
|
||||
<div class="thirteen wide column">
|
||||
<i class="clock icon"></i>@#secondToDate(server.State.Uptime)#@
|
||||
<div class="three wide column">在线</div>
|
||||
<div class="thirteen wide column">
|
||||
<i class="clock icon"></i>@#secondToDate(server.State.Uptime)#@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" v-else>
|
||||
<p>@#server.Name#@</p>
|
||||
<p>节点已离线</p>
|
||||
</div>
|
||||
<div class="content" v-else>
|
||||
<p>@#server.Name#@</p>
|
||||
<p>节点已离线</p>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "common/footer" .}}
|
||||
<script>
|
||||
const initData = {{.Servers }};
|
||||
const initData = {{.Servers}};
|
||||
|
||||
var statusCards = new Vue({
|
||||
el: 'div.status.cards',
|
||||
el: '#app',
|
||||
delimiters: ['@#', '#@'],
|
||||
data: {
|
||||
servers: initData,
|
||||
data: initData,
|
||||
groups:[],
|
||||
cache: [],
|
||||
},
|
||||
created() {
|
||||
this.group()
|
||||
},
|
||||
mounted() {
|
||||
$('.yellow.info.icon').popup({
|
||||
popup: '.ui.content.popup',
|
||||
@ -109,6 +123,42 @@
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
group() {
|
||||
this.groups = this.groupingData(this.data, "Tag")
|
||||
console.log(this.groups)
|
||||
},
|
||||
groupingData(data, filed) {
|
||||
let map = {};
|
||||
|
||||
let dest = [];
|
||||
|
||||
data.forEach(item => {
|
||||
if (!map[item[filed]]) {
|
||||
dest.push({
|
||||
[filed]: item[filed],
|
||||
|
||||
data: [item]
|
||||
|
||||
});
|
||||
|
||||
map[item[filed]] = item;
|
||||
|
||||
} else {
|
||||
dest.forEach(dItem => {
|
||||
if (dItem[filed] == item[filed]) {
|
||||
dItem.data.push(item);
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
return dest;
|
||||
|
||||
},
|
||||
formatPercent(live, used, total) {
|
||||
const percent = live ? (parseInt(used / total * 100) || 0) : -1
|
||||
if (!this.cache[percent]) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user