mirror of
https://github.com/nezhahq/nezha.git
synced 2025-01-23 21:28:14 -05:00
99 lines
5.0 KiB
HTML
99 lines
5.0 KiB
HTML
{{define "page/home"}}
|
||
{{template "common/header" .}}
|
||
{{template "common/menu" .}}
|
||
<div class="nb-container">
|
||
<div class="ui container">
|
||
<div class="ui four status cards">
|
||
<div v-for='server in servers' class="card">
|
||
<div class="content">
|
||
<div class="header"><i v-if='server.Host.CountryCode'
|
||
:class="server.Host.CountryCode + ' flag'"></i> @#server.Name#@
|
||
<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>
|
||
硬盘：@#server.State.DiskUsed#@/@#server.State.DiskTotal#@<br>
|
||
内存：@#server.State.MemUsed#@/@#server.State.MemTotal#@<br>
|
||
交换：@#server.State.SwapUsed#@/@#server.State.SwapTotal#@<br>
|
||
流量：<i class='arrow alternate circle down outline icon'></i>@#server.State.NetInTransfer#@ <i
|
||
class='arrow alternate circle up outline icon'></i>@#server.State.NetOutTransfer#@<br>
|
||
启动：@#server.Host.BootTime#@<br>
|
||
版本：@#'v'+server.Host.Version#@<br>
|
||
</div>
|
||
</div>
|
||
<div class="description">
|
||
<div class="ui grid">
|
||
<div class="three wide column">CPU</div>
|
||
<div class="thirteen wide column">
|
||
<div class="ui active progress" :data-value="server.State.CPU" data-total="100">
|
||
<div class="bar">
|
||
<div class="progress"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="three wide column">内存</div>
|
||
<div class="thirteen wide column">
|
||
<div class="ui active progress" :data-value="server.State.MemUsed"
|
||
:data-total="server.State.MemTotal">
|
||
<div class="bar">
|
||
<div class="progress"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="three wide column">交换</div>
|
||
<div class="thirteen wide column">
|
||
<div class="ui active progress" :data-value="server.State.SwapUsed"
|
||
:data-total="server.State.SwapTotal">
|
||
<div class="bar">
|
||
<div class="progress"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="three wide column">网络</div>
|
||
<div class="thirteen wide column">
|
||
<i class="arrow alternate circle down outline icon"></i>
|
||
@#server.State.NetInSpeed#@/s
|
||
<i class="arrow alternate circle up outline icon"></i>
|
||
@#server.State.NetOutSpeed#@/s
|
||
</div>
|
||
<div class="three wide column">硬盘</div>
|
||
<div class="thirteen wide column">
|
||
<div class="ui active progress" :data-value="server.State.DiskUsed"
|
||
:data-total="server.State.DiskTotal">
|
||
<div class="bar">
|
||
<div class="progress"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="three wide column">在线</div>
|
||
<div class="thirteen wide column">
|
||
<i class="clock icon"></i>@#server.State.Uptime#@
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{{template "common/footer" .}}
|
||
<script>
|
||
const servers = {{.Servers }};
|
||
var statusCards = new Vue({
|
||
el: 'div.status.cards',
|
||
delimiters: ['@#', '#@'],
|
||
data: {
|
||
servers,
|
||
},
|
||
mounted() {
|
||
$('.progress').progress();
|
||
$('.yellow.info.icon').popup({
|
||
popup: '.ui.content.popup'
|
||
});
|
||
},
|
||
methods: {
|
||
}
|
||
});
|
||
</script>
|
||
{{end}} |