KJZH001/nezha-2024
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #150 from MikoyChinese/theme-mdui

Browse Source 
Update realtime tooltip and fix some bugs.

Co-authored-by: MikoyChinese <22676744+MikoyChinese@users.noreply.github.com>
This commit is contained in:
naiba 2022-01-10 03:36:04 +02:00 committed by GitHub
commit ce8d14ba39
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 79 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
resource/template/theme-mdui/footer.html vendored Normal file
View File

@ -0,0 +1,14 @@
{{define "theme-mdui/footer"}}
<footer class="mdui-m-t-5">
<div class="mdui-p-a-3 mdui-typo">
<center>
<p>
<a href="/"><at>{{.Title}}</at></a>
Powered by <a href="https://github.com/naiba/nezha"><st>哪吒监控&lt;{{.Version}}&gt;</st></a>&nbsp;| Theme designed by Mikoy Chinese
</p>
</center>
</div>
</footer>
{{end}}

71
resource/template/theme-mdui/home.html vendored
View File

@ -24,32 +24,7 @@
</head> </head>
<body> <body>
<!-- Menu --> {{template "theme-mdui/menu" .}}
<div class="mdui-appbar">
<div class="mdui-tab mdui-color-theme" mdui-tab>
{{if .IsAdminPage}}
<a href="/server" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">computer</i>主机</a>
<a href="/monitor" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">accessibility</i>服务</a>
<a href="/cron" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">access_time</i>任务</a>
<a href="/notification" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">notifications</i>报警</a>
<a href="/setting" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">settings</i>设置</a>
{{else}}
<a href="/" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">home</i>首页</a>
<a href="/service" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">accessibility</i>服务</a>
{{end}}
<div class="mdui-toolbar-spacer"></div>
{{if .Admin}}
{{if .IsAdminPage}}
<a href="/" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">arrow_back</i>返回前台</a>
{{else}}
<a href="/server" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">arrow_forward</i>管理后台</a>
{{end}}
<a class="mdui-ripple mdui-ripple-white mdui-hoverable" onclick="showConfirm('确认注销？','注销后您必须重新登录才能使用',logout,{{.Admin.ID}})"><i class="mdui-icon material-icons">directions_run</i>注销登录</a>
{{else}}
<a href="/login" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">person</i>登录</a>
{{end}}
</div>
</div>
<div id="app"> <div id="app">
<div id="container" class="mdui-container"> <div id="container" class="mdui-container">
@ -64,9 +39,10 @@
<div class="mdui-card-primary"> <div class="mdui-card-primary">
<div class="mdui-card-primary-title mdui-text-truncate">@#server.Name#@</div> <div class="mdui-card-primary-title mdui-text-truncate">@#server.Name#@</div>
</div> </div>
<div class="mdui-card-menu" :mdui-tooltip="formatTooltip(server)"> <div v-if="server.live" class="mdui-card-menu">
<i class="mdui-icon material-icons">info_outline</i> <i :id="'info-' + server.ID" class="mdui-icon material-icons">info_outline</i>
</div> </div>
<div v-else class="mdui-card-menu mdui-typo-title mdui-text-color-grey">Offline</div>
<div class="mdui-card-content"> <div class="mdui-card-content">
<ul class="mdui-list"> <ul class="mdui-list">
<li class="mdui-list-item"> <li class="mdui-list-item">
@ -80,7 +56,7 @@
</div> </div>
</div> </div>
</li> </li>
<li class="mdui-list-item"> <li class="mdui-list-item" :id="'mem-' + server.ID">
<i class="mdui-list-item-icon mdui-icon material-icons">straighten</i> <i class="mdui-list-item-icon mdui-icon material-icons">straighten</i>
<div class="mdui-list-item-content"> <div class="mdui-list-item-content">
<at class="mdui-list-item-title mdui-list-item-one-line">MEM <span>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</span></at> <at class="mdui-list-item-title mdui-list-item-one-line">MEM <span>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</span></at>
@ -150,8 +126,8 @@
<td class="mdui-text-center"><at>@#formatByteSize(server.State.NetOutTransfer)#@</at></td> <td class="mdui-text-center"><at>@#formatByteSize(server.State.NetOutTransfer)#@</at></td>
<td class="mdui-text-center"><st>@#formatByteSize(server.State.NetInTransfer)#@</st></td> <td class="mdui-text-center"><st>@#formatByteSize(server.State.NetInTransfer)#@</st></td>
<td class="progress"> <td class="progress">
<div class="mdui-progress" style="height: 30px;"> <div class="mdui-progress" style="height: 30px; background-color: #edbbd2;">
<div class="mdui-progress-determinate mdui-color-indigo-400" :style="'width: ' + (server.live?server.State.CPU:'0') + '%;'"> <div class="mdui-progress-determinate mdui-color-pink-a400" :style="'width: ' + (server.live?server.State.CPU:'0') + '%;'">
<span class="mdui-text-truncate progress-text">@#server.live?parseInt(server.State.CPU):'NaN'#@%</span> <span class="mdui-text-truncate progress-text">@#server.live?parseInt(server.State.CPU):'NaN'#@%</span>
</div> </div>
</div> </div>
@ -172,16 +148,7 @@
</div> </div>
</div> </div>
<footer class="mdui-m-t-5"> {{template "theme-mdui/footer" .}}
<div class="mdui-p-a-3 mdui-typo">
<center>
<p>
<a href="/"><at>{{.Title}}</at></a>
Powered by <a href="https://github.com/naiba/nezha"><st>哪吒监控&lt;{{.Version}}&gt;</st></a>&nbsp;| Theme designed by Mikoy Chinese
</p>
</center>
</div>
</footer>
<script src="/static/theme-mdui/mdui.js"></script> <script src="/static/theme-mdui/mdui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mdui@1.0.2/dist/js/mdui.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mdui@1.0.2/dist/js/mdui.min.js"></script>
@ -270,6 +237,7 @@
} }
}); });
} }
var infoTooltip = {}, memTooltip = {};
ws.onmessage = function (evt) { ws.onmessage = function (evt) {
const data = JSON.parse(evt.data) const data = JSON.parse(evt.data)
statusCards.servers = data.servers statusCards.servers = data.servers
@ -282,9 +250,30 @@
ns.live = false ns.live = false
} else { } else {
ns.live = true ns.live = true
if (statusCards.showCard) {
var disk = statusCards.formatByteSize(ns.State.DiskUsed) + '/' + statusCards.formatByteSize(ns.Host.DiskTotal);
var upTime = statusCards.secondToDate(ns.State.Uptime);
var content =
`System: ${ns.Host.Platform}-${ns.Host.PlatformVersion}[${ns.Host.Arch}]
CPU: ${ns.Host.CPU}
Disk: ${disk}
Online: ${upTime}
Version: ${ns.Host.Version}`;
if (infoTooltip[ns.ID]) {infoTooltip[ns.ID].$element[0].innerText = content;}
else {
if (document.getElementById(`info-${ns.ID}`)) infoTooltip[ns.ID] = new mdui.Tooltip(`#info-${ns.ID}`, {})
}
var content = `${statusCards.formatByteSize(ns.State.MemUsed)}/${statusCards.formatByteSize(ns.Host.MemTotal)}`;
if (memTooltip[ns.ID]) {memTooltip[ns.ID].$element[0].innerText = content;}
else {
if (document.getElementById(`mem-${ns.ID}`)) memTooltip[ns.ID] = new mdui.Tooltip(`#mem-${ns.ID}`, {});
}
} else {mdui.$('div').remove('.mdui-tooltip'); infoTooltip = {}; memTooltip = {};}
} }
} }
} }
mdui.mutation();
} }
ws.onclose = function () { ws.onclose = function () {
mdui.snackbar({ mdui.snackbar({

30
resource/template/theme-mdui/menu.html vendored Normal file
View File

@ -0,0 +1,30 @@
{{define "theme-mdui/menu"}}
<!-- Menu -->
<div class="mdui-appbar">
<div class="mdui-tab mdui-color-theme" mdui-tab>
{{if .IsAdminPage}}
<a href="/server" class="mdui-ripple mdui-ripple-white mdui-hoverable "><i class="mdui-icon material-icons">computer</i>主机</a>
<a href="/monitor" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">accessibility</i>服务</a>
<a href="/cron" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">access_time</i>任务</a>
<a href="/notification" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">notifications</i>报警</a>
<a href="/setting" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">settings</i>设置</a>
{{else}}
<a href="/" class='mdui-ripple mdui-ripple-white mdui-hoverable{{if eq .MatchedPath "/"}} mdui-tab-active{{end}}'><i class="mdui-icon material-icons">home</i>首页</a>
<a href="/service" class='mdui-ripple mdui-ripple-white mdui-hoverable{{if eq .MatchedPath "/service"}} mdui-tab-active{{end}}'><i class="mdui-icon material-icons">accessibility</i>服务</a>
{{end}}
<div class="mdui-toolbar-spacer"></div>
{{if .Admin}}
{{if .IsAdminPage}}
<a href="/" class='mdui-ripple mdui-ripple-white mdui-hoverable {{if eq .MatchedPath "/"}} mdui-tab-active{{end}}'><i class="mdui-icon material-icons">arrow_back</i>返回前台</a>
{{else}}
<a href="/server" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">arrow_forward</i>管理后台</a>
{{end}}
<a class="mdui-ripple mdui-ripple-white mdui-hoverable" onclick="showConfirm('确认注销？','注销后您必须重新登录才能使用',logout,{{.Admin.ID}})"><i class="mdui-icon material-icons">directions_run</i>注销登录</a>
{{else}}
<a href="/login" class="mdui-ripple mdui-ripple-white mdui-hoverable">登录</a>
{{end}}
</div>
</div>
{{end}}

41
resource/template/theme-mdui/service.html vendored
View File

@ -17,32 +17,8 @@
</head> </head>
<body> <body>
<!-- Menu -->
<div class="mdui-appbar"> {{template "theme-mdui/menu" .}}
<div class="mdui-tab mdui-color-theme" mdui-tab>
{{if .IsAdminPage}}
<a href="/server" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">computer</i>主机</a>
<a href="/monitor" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">accessibility</i>服务</a>
<a href="/cron" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">access_time</i>任务</a>
<a href="/notification" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">notifications</i>报警</a>
<a href="/setting" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">settings</i>设置</a>
{{else}}
<a href="/" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">home</i>首页</a>
<a href="/service" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">accessibility</i>服务</a>
{{end}}
<div class="mdui-toolbar-spacer"></div>
{{if .Admin}}
{{if .IsAdminPage}}
<a href="/" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">arrow_back</i>返回前台</a>
{{else}}
<a href="/server" class="mdui-ripple mdui-ripple-white mdui-hoverable"><i class="mdui-icon material-icons">arrow_forward</i>管理后台</a>
{{end}}
<a class="mdui-ripple mdui-ripple-white mdui-hoverable" onclick="showConfirm('确认注销？','注销后您必须重新登录才能使用',logout,{{.Admin.ID}})"><i class="mdui-icon material-icons">directions_run</i>注销登录</a>
{{else}}
<a href="/login" class="mdui-ripple mdui-ripple-white mdui-hoverable">登录</a>
{{end}}
</div>
</div>
<!-- Container --> <!-- Container -->
<div id="container" class="mdui-container mdui-m-t-1"> <div id="container" class="mdui-container mdui-m-t-1">
@ -84,7 +60,7 @@
<div class="mdui-spinner mdui-spinner-colorful"></div> <div class="mdui-spinner mdui-spinner-colorful"></div>
<p>{{statusName (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}</p> <p>{{statusName (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}</p>
{{else if ge $percent 80.0}} {{else if ge $percent 80.0}}
<i class="mdui-icon material-iconsi mdui-text-color-orange">sentiment_dissatisfied</i> <i class="mdui-icon material-icons mdui-text-color-orange">sentiment_dissatisfied</i>
<p>{{statusName (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}</p> <p>{{statusName (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}</p>
{{else}} {{else}}
<i class="mdui-icon material-icons mdui-text-color-red-a700">sentiment_very_dissatisfied</i> <i class="mdui-icon material-icons mdui-text-color-red-a700">sentiment_very_dissatisfied</i>
@ -98,16 +74,7 @@
</div> </div>
</div> </div>
<footer class="mdui-m-t-5"> {{template "theme-mdui/footer" .}}
<div class="mdui-p-a-3 mdui-typo">
<center>
<p>
<a href="/"><at>{{.Title}}</at></a>
Powered by <a href="https://github.com/naiba/nezha"><st>哪吒监控&lt;{{.Version}}&gt;</st></a>&nbsp;| Theme designed by Mikoy Chinese
</p>
</center>
</div>
</footer>
<script src="/static/theme-mdui/mdui.js"></script> <script src="/static/theme-mdui/mdui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mdui@1.0.2/dist/js/mdui.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mdui@1.0.2/dist/js/mdui.min.js"></script>

1
resource/template/theme-mdui/viewpassword.html vendored
View File

@ -39,6 +39,7 @@
if (res.redirected) { if (res.redirected) {
window.location.href = res.url; window.location.href = res.url;
} else { } else {
window.location.reload();
mdui.snackbar({ mdui.snackbar({
message: '密码错误', message: '密码错误',
position: 'top', position: 'top',