tcjlj/nezha
1
0
Fork 0
mirror of https://github.com/nezhahq/nezha.git synced 2025-01-22 20:58:14 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

添加标签功能

Browse Source
This commit is contained in:
我若为王 2021-01-12 14:09:25 +08:00
parent e3dad37670
commit be3fc41755
5 changed files with 135 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cmd/dashboard/controller/member_api.go
View File

@ -87,6 +87,7 @@ type serverForm struct {
Name string `binding:"required"` Name string `binding:"required"`
DisplayIndex int DisplayIndex int
Secret string Secret string
Tag string
} }
func (ma *memberAPI) addOrEditServer(c *gin.Context) { func (ma *memberAPI) addOrEditServer(c *gin.Context) {
@ -102,6 +103,7 @@ func (ma *memberAPI) addOrEditServer(c *gin.Context) {
s.Secret = sf.Secret s.Secret = sf.Secret
s.DisplayIndex = sf.DisplayIndex s.DisplayIndex = sf.DisplayIndex
s.ID = sf.ID s.ID = sf.ID
s.Tag = sf.Tag
if sf.ID == 0 { if sf.ID == 0 {
s.Secret = com.MD5(fmt.Sprintf("%s%s%d", time.Now(), sf.Name, admin.ID)) s.Secret = com.MD5(fmt.Sprintf("%s%s%d", time.Now(), sf.Name, admin.ID))
s.Secret = s.Secret[:10] s.Secret = s.Secret[:10]

8
model/server.go
View File

@ -14,10 +14,10 @@ type Server struct {
Name string Name string
DisplayIndex int // 展示权重，越大越靠前 DisplayIndex int // 展示权重，越大越靠前
Secret string `json:"-"` Secret string `json:"-"`
Tag string
Host *Host `gorm:"-"` Host *Host `gorm:"-"`
State *State `gorm:"-"` State *State `gorm:"-"`
LastActive time.Time LastActive time.Time
Stream pb.NezhaService_HeartbeatServer `gorm:"-" json:"-"` Stream pb.NezhaService_HeartbeatServer `gorm:"-" json:"-"`
StreamClose chan<- error `gorm:"-" json:"-"` StreamClose chan<- error `gorm:"-" json:"-"`

4
resource/template/component/server.html
View File

@ -8,6 +8,10 @@
<label>备注</label> <label>备注</label>
<input type="text" name="name" placeholder="爱因斯坦-光速1号"> <input type="text" name="name" placeholder="爱因斯坦-光速1号">
</div> </div>
<div class="field">
<label>标签</label>
<input type="text" name="Tag" placeholder="服务器标签">
</div>
<div class="field"> <div class="field">
<label>展示权重</label> <label>展示权重</label>
<input type="number" name="DisplayIndex" placeholder="越大越靠前"> <input type="number" name="DisplayIndex" placeholder="越大越靠前">

2
resource/template/dashboard/server.html
View File

@ -15,6 +15,7 @@
<tr> <tr>
<th>权重</th> <th>权重</th>
<th>备注</th> <th>备注</th>
<th>标签</th>
<th>IP</th> <th>IP</th>
<th>ID</th> <th>ID</th>
<th>密钥</th> <th>密钥</th>
@ -26,6 +27,7 @@
<tr> <tr>
<td>{{$server.DisplayIndex}}</td> <td>{{$server.DisplayIndex}}</td>
<td>{{$server.Name}}</td> <td>{{$server.Name}}</td>
<td>{{$server.Tag}}</td>
<td>{{$server.Host.IP}}</td> <td>{{$server.Host.IP}}</td>
<td>{{$server.ID}}</td> <td>{{$server.ID}}</td>
<td>{{$server.Secret}}</td> <td>{{$server.Secret}}</td>

196
resource/template/theme-default/home.html
View File

@ -6,102 +6,116 @@
{{template "common/menu" .}} {{template "common/menu" .}}
<div class="nb-container"> <div class="nb-container">
<div class="ui container"> <div class="ui container">
<div class="ui four stackable status cards"> <div id="app">
<div v-for='server in servers' :id="server.ID" class="card"> <div class="ui" v-for="group in groups" >
<div class="content" v-if='server.Host'> <br>
<div class="header"><i :class="server.Host.CountryCode + ' flag'"></i><i <div class="ui horizontal divider">
v-if='server.Host.Platform == "darwin"' class="apple icon"></i><i @#group.Tag#@
v-if='server.Host.Platform == "linux"' class="linux icon"></i><i </div>
v-if='server.Host.Platform == "windows"' class="windows icon"></i><i
v-if='server.Host.Platform == "freebsd"' class="freebsd icon"></i>@#server.Name + <div class="ui four stackable status cards"> <div v-for='server in group.data' :id="server.ID" class="card">
(server.live?'':' [已离线]')#@ <div class="content" v-if='server.Host'>
<i class="yellow info circle icon"></i> <div class="header"><i :class="server.Host.CountryCode + ' flag'"></i><i
<div class='ui content popup'> v-if='server.Host.Platform == "darwin"' class="apple icon"></i><i
系统：@#server.Host.Platform#@-@#server.Host.PlatformVersion#@ [<span v-if='server.Host.Platform == "linux"' class="linux icon"></i><i
v-if='server.Host.Virtualization'>@#server.Host.Virtualization#@:</span>@#server.Host.Arch#@]<br> v-if='server.Host.Platform == "windows"' class="windows icon"></i><i
CPU：@#server.Host.CPU#@<br> v-if='server.Host.Platform == "freebsd"' class="freebsd icon"></i>@#server.Name +
硬盘：@#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@<br> (server.live?'':' [已离线]')#@
内存：@#formatByteSize(server.State.MemUsed)#@/@#formatByteSize(server.Host.MemTotal)#@<br> <i class="yellow info circle icon"></i>
交换：@#formatByteSize(server.State.SwapUsed)#@/@#formatByteSize(server.Host.SwapTotal)#@<br> <div class='ui content popup'>
流量：<i 系统：@#server.Host.Platform#@-@#server.Host.PlatformVersion#@ [<span
class='arrow alternate circle down outline icon'></i>@#formatByteSize(server.State.NetInTransfer)#@<i v-if='server.Host.Virtualization'>@#server.Host.Virtualization#@:</span>@#server.Host.Arch#@]<br>
class='arrow alternate circle up outline icon'></i>@#formatByteSize(server.State.NetOutTransfer)#@<br> CPU：@#server.Host.CPU#@<br>
启动：@# formatTimestamp(server.Host.BootTime) #@<br> 硬盘：@#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@<br>
版本：@#server.Host.Version#@<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> <div class="description">
<div class="description"> <div class="ui grid">
<div class="ui grid"> <div class="three wide column">CPU</div>
<div class="three wide column">CPU</div> <div class="thirteen wide column">
<div class="thirteen wide column"> <div :class="formatPercent(server.live,server.State.CPU, 100).class">
<div :class="formatPercent(server.live,server.State.CPU, 100).class"> <div class="bar"
<div class="bar" :style="formatPercent(server.live,server.State.CPU, 100).style"> :style="formatPercent(server.live,server.State.CPU, 100).style">
<small>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small> <small>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small>
</div>
</div> </div>
</div> </div>
</div> <div class="three wide column">内存</div>
<div class="three wide column">内存</div> <div class="thirteen wide column">
<div class="thirteen wide column"> <div
<div :class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class">
:class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class"> <div class="bar"
<div class="bar" :style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style">
:style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style"> <small>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small>
<small>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small> </div>
</div> </div>
</div> </div>
</div> <div class="three wide column">交换</div>
<div class="three wide column">交换</div> <div class="thirteen wide column">
<div class="thirteen wide column"> <div
<div :class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class">
:class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class"> <div class="bar"
<div class="bar" :style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style">
:style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style"> <small>@#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal*100:0)#@%</small>
<small>@#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal*100:0)#@%</small> </div>
</div> </div>
</div> </div>
</div> <div class="three wide column">网络</div>
<div class="three wide column">网络</div> <div class="thirteen wide column">
<div class="thirteen wide column"> <i class="arrow alternate circle down outline icon"></i>
<i class="arrow alternate circle down outline icon"></i> @#formatByteSize(server.State.NetInSpeed)#@/s
@#formatByteSize(server.State.NetInSpeed)#@/s <i class="arrow alternate circle up outline icon"></i>
<i class="arrow alternate circle up outline icon"></i> @#formatByteSize(server.State.NetOutSpeed)#@/s
@#formatByteSize(server.State.NetOutSpeed)#@/s </div>
</div> <div class="three wide column">硬盘</div>
<div class="three wide column">硬盘</div> <div class="thirteen wide column">
<div class="thirteen wide column"> <div
<div :class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class">
:class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class"> <div class="bar"
<div class="bar" :style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
:style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style"> <small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
<small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small> </div>
</div> </div>
</div> </div>
</div> <div class="three wide column">在线</div>
<div class="three wide column">在线</div> <div class="thirteen wide column">
<div class="thirteen wide column"> <i class="clock icon"></i>@#secondToDate(server.State.Uptime)#@
<i class="clock icon"></i>@#secondToDate(server.State.Uptime)#@ </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="content" v-else>
<div class="content" v-else> <p>@#server.Name#@</p>
<p>@#server.Name#@</p> <p>节点已离线</p>
<p>节点已离线</p> </div>
</div> </div></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{{template "common/footer" .}} {{template "common/footer" .}}
<script> <script>
const initData = {{.Servers }}; const initData = {{.Servers}};
var statusCards = new Vue({ var statusCards = new Vue({
el: 'div.status.cards', el: '#app',
delimiters: ['@#', '#@'], delimiters: ['@#', '#@'],
data: { data: {
servers: initData, data: initData,
groups:[],
cache: [], cache: [],
}, },
created() {
this.group()
},
mounted() { mounted() {
$('.yellow.info.icon').popup({ $('.yellow.info.icon').popup({
popup: '.ui.content.popup', popup: '.ui.content.popup',
@ -109,6 +123,42 @@
}); });
}, },
methods: { 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) { formatPercent(live, used, total) {
const percent = live ? (parseInt(used / total * 100) || 0) : -1 const percent = live ? (parseInt(used / total * 100) || 0) : -1
if (!this.cache[percent]) { if (!this.cache[percent]) {