[Client] Improve server home widget
This commit is contained in:
syuilo
parent
bef3d57c97
commit
1f3f5f0566
|
|
@ -2,8 +2,9 @@
|
|||
<p class="title"><i class="fa fa-server"></i>%i18n:desktop.tags.mk-server-home-widget.title%</p>
|
||||
<button onclick={ toggle } title="%i18n:desktop.tags.mk-server-home-widget.toggle%"><i class="fa fa-sort"></i></button>
|
||||
<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
|
||||
<mk-server-home-widget-stats if={ !initializing } show={ view == 0 }/>
|
||||
<mk-server-home-widget-info if={ !initializing } show={ view == 1 } meta={ meta }/>
|
||||
<mk-server-home-widget-cpu-and-memory-usage if={ !initializing } show={ view == 0 } connection={ connection }/>
|
||||
<mk-server-home-widget-disk-usage if={ !initializing } show={ view == 1 } connection={ connection }/>
|
||||
<mk-server-home-widget-info if={ !initializing } show={ view == 2 } connection={ connection } meta={ meta }/>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
|
|
@ -50,10 +51,13 @@
|
|||
|
||||
</style>
|
||||
<script>
|
||||
import Connection from '../../../common/scripts/server-stream';
|
||||
|
||||
this.mixin('api');
|
||||
|
||||
this.initializing = true;
|
||||
this.view = 0;
|
||||
this.connection = new Connection();
|
||||
|
||||
this.on('mount', () => {
|
||||
this.api('meta').then(meta => {
|
||||
|
|
@ -64,14 +68,18 @@
|
|||
});
|
||||
});
|
||||
|
||||
this.on('unmount', () => {
|
||||
this.connection.close();
|
||||
});
|
||||
|
||||
this.toggle = () => {
|
||||
this.view++;
|
||||
if (this.view == 2) this.view = 0;
|
||||
if (this.view == 3) this.view = 0;
|
||||
};
|
||||
</script>
|
||||
</mk-server-home-widget>
|
||||
|
||||
<mk-server-home-widget-stats>
|
||||
<mk-server-home-widget-cpu-and-memory-usage>
|
||||
<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none">
|
||||
<polygon
|
||||
riot-points={ cpuPolygonPoints }
|
||||
|
|
@ -82,7 +90,7 @@
|
|||
fill="none"
|
||||
stroke-width="1"
|
||||
riot-stroke={ cpuColor }/>
|
||||
<text dx="1" dy="5">CPU <tspan>{ cpuP }%</tspan></text>
|
||||
<text x="1" y="5">CPU <tspan>{ cpuP }%</tspan></text>
|
||||
</svg>
|
||||
<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none">
|
||||
<polygon
|
||||
|
|
@ -94,7 +102,7 @@
|
|||
fill="none"
|
||||
stroke-width="1"
|
||||
riot-stroke={ memColor }/>
|
||||
<text dx="1" dy="5">MEM <tspan>{ memP }%</tspan></text>
|
||||
<text x="1" y="5">MEM <tspan>{ memP }%</tspan></text>
|
||||
</svg>
|
||||
<style>
|
||||
:scope
|
||||
|
|
@ -125,12 +133,10 @@
|
|||
clear both
|
||||
</style>
|
||||
<script>
|
||||
import Connection from '../../../common/scripts/server-stream';
|
||||
|
||||
this.viewBoxX = 50;
|
||||
this.viewBoxY = 30;
|
||||
this.stats = [];
|
||||
this.connection = new Connection();
|
||||
this.connection = this.opts.connection;
|
||||
|
||||
this.on('mount', () => {
|
||||
this.connection.on('stats', this.onStats);
|
||||
|
|
@ -138,7 +144,6 @@
|
|||
|
||||
this.on('unmount', () => {
|
||||
this.connection.off('stats', this.onStats);
|
||||
this.connection.close();
|
||||
});
|
||||
|
||||
this.onStats = stats => {
|
||||
|
|
@ -170,7 +175,102 @@
|
|||
});
|
||||
};
|
||||
</script>
|
||||
</mk-server-home-widget-stats>
|
||||
</mk-server-home-widget-cpu-and-memory-usage>
|
||||
|
||||
<mk-server-home-widget-disk-usage>
|
||||
<svg viewBox="0 0 1 1" preserveAspectRatio="none">
|
||||
<circle
|
||||
riot-r={ r }
|
||||
cx="50%" cy="50%"
|
||||
fill="none"
|
||||
stroke-width="0.1"
|
||||
stroke="rgba(0, 0, 0, 0.05)"/>
|
||||
<circle
|
||||
riot-r={ r }
|
||||
cx="50%" cy="50%"
|
||||
riot-stroke-dasharray={ Math.PI * (r * 2) }
|
||||
riot-stroke-dashoffset={ strokeDashoffset }
|
||||
fill="none"
|
||||
stroke-width="0.1"
|
||||
riot-stroke={ color }/>
|
||||
<text x="50%" y="50%" dy="0.05" text-anchor="middle">{ p }%</text>
|
||||
</svg>
|
||||
<div>
|
||||
<p>Storage</p>
|
||||
<p>Total: { bytesToSize(total) }</p>
|
||||
<p>Available: { bytesToSize(available) }</p>
|
||||
<p>Used: { bytesToSize(used) }</p>
|
||||
</div>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
|
||||
> svg
|
||||
display block
|
||||
padding 10px
|
||||
height 100px
|
||||
float left
|
||||
|
||||
> circle
|
||||
transform-origin center
|
||||
transform rotate(-90deg)
|
||||
|
||||
> text
|
||||
font-size 0.15px
|
||||
fill rgba(0, 0, 0, 0.6)
|
||||
|
||||
> div
|
||||
float left
|
||||
width calc(100% - 100px)
|
||||
padding 10px 10px 10px 0
|
||||
|
||||
> p
|
||||
margin 0
|
||||
font-size 12px
|
||||
color #505050
|
||||
|
||||
&:first-child
|
||||
font-weight bold
|
||||
|
||||
&:after
|
||||
content ""
|
||||
display block
|
||||
clear both
|
||||
|
||||
</style>
|
||||
<script>
|
||||
import bytesToSize from '../../../common/scripts/bytes-to-size';
|
||||
|
||||
this.r = 0.4;
|
||||
this.connection = this.opts.connection;
|
||||
this.bytesToSize = bytesToSize;
|
||||
|
||||
this.on('mount', () => {
|
||||
this.connection.on('stats', this.onStats);
|
||||
});
|
||||
|
||||
this.on('unmount', () => {
|
||||
this.connection.off('stats', this.onStats);
|
||||
});
|
||||
|
||||
this.onStats = stats => {
|
||||
stats.disk.used = stats.disk.total - stats.disk.free;
|
||||
|
||||
const color = `hsl(${180 - (stats.disk.used / stats.disk.total * 180)}, 80%, 70%)`;
|
||||
const p = (stats.disk.used / stats.disk.total * 100).toFixed(0);
|
||||
const strokeDashoffset = (1 - (stats.disk.used / stats.disk.total)) * (Math.PI * (this.r * 2));
|
||||
|
||||
this.update({
|
||||
color,
|
||||
p,
|
||||
strokeDashoffset,
|
||||
total: stats.disk.total,
|
||||
used: stats.disk.used,
|
||||
available: stats.disk.available
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</mk-server-home-widget-disk-usage>
|
||||
|
||||
<mk-server-home-widget-info>
|
||||
<p>Maintainer: { meta.maintainer }</p>
|
||||
|
|
@ -183,4 +283,3 @@
|
|||
this.meta = this.opts.meta;
|
||||
</script>
|
||||
</mk-server-home-widget-info>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue