[Client] Improve server home widget

This commit is contained in:
syuilo 2017-06-10 03:19:56 +09:00
parent 455a46f2cb
commit 1d9f1d1aa3

View file

@ -3,8 +3,10 @@
<button onclick={ toggle } title="%i18n:desktop.tags.mk-server-home-widget.toggle%"><i class="fa fa-sort"></i></button> <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> <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-cpu-and-memory-usage if={ !initializing } show={ view == 0 } connection={ connection }/> <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-cpu if={ !initializing } show={ view == 1 } connection={ connection } meta={ meta }/>
<mk-server-home-widget-info if={ !initializing } show={ view == 2 } connection={ connection } meta={ meta }/> <mk-server-home-widget-memory if={ !initializing } show={ view == 2 } connection={ connection }/>
<mk-server-home-widget-disk if={ !initializing } show={ view == 3 } connection={ connection }/>
<mk-server-home-widget-info if={ !initializing } show={ view == 4 } connection={ connection } meta={ meta }/>
<style> <style>
:scope :scope
display block display block
@ -74,7 +76,7 @@
this.toggle = () => { this.toggle = () => {
this.view++; this.view++;
if (this.view == 3) this.view = 0; if (this.view == 5) this.view = 0;
}; };
</script> </script>
</mk-server-home-widget> </mk-server-home-widget>
@ -177,47 +179,137 @@
</script> </script>
</mk-server-home-widget-cpu-and-memory-usage> </mk-server-home-widget-cpu-and-memory-usage>
<mk-server-home-widget-disk-usage> <mk-server-home-widget-cpu>
<svg viewBox="0 0 1 1" preserveAspectRatio="none"> <mk-server-home-widget-pie ref="pie"/>
<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> <div>
<p>Storage</p> <p>CPU</p>
<p>Total: { bytesToSize(total) }</p> <p>{ cores } Cores</p>
<p>Available: { bytesToSize(available) }</p>
<p>Used: { bytesToSize(used) }</p>
</div> </div>
<style> <style>
:scope :scope
display block display block
> svg > mk-server-home-widget-pie
display block
padding 10px padding 10px
height 100px height 100px
float left float left
> circle > div
transform-origin center float left
transform rotate(-90deg) width calc(100% - 100px)
padding 10px 10px 10px 0
> text > p
font-size 0.15px margin 0
fill rgba(0, 0, 0, 0.6) font-size 12px
color #505050
&:first-child
font-weight bold
&:after
content ""
display block
clear both
</style>
<script>
this.cores = this.opts.meta.cpu.cores;
this.connection = this.opts.connection;
this.on('mount', () => {
this.connection.on('stats', this.onStats);
});
this.on('unmount', () => {
this.connection.off('stats', this.onStats);
});
this.onStats = stats => {
this.refs.pie.render(stats.cpu_usage);
};
</script>
</mk-server-home-widget-cpu>
<mk-server-home-widget-memory>
<mk-server-home-widget-pie ref="pie"/>
<div>
<p>Memory</p>
<p>Total: { bytesToSize(total) }</p>
<p>Used: { bytesToSize(used) }</p>
<p>Free: { bytesToSize(free) }</p>
</div>
<style>
:scope
display block
> mk-server-home-widget-pie
padding 10px
height 100px
float left
> 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.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.mem.used = stats.mem.total - stats.mem.free;
this.refs.pie.render(stats.mem.used / stats.mem.total);
this.update({
total: stats.mem.total,
used: stats.mem.used,
free: stats.mem.free
});
};
</script>
</mk-server-home-widget-memory>
<mk-server-home-widget-disk>
<mk-server-home-widget-pie ref="pie"/>
<div>
<p>Storage</p>
<p>Total: { bytesToSize(total) }</p>
<p>Available: { bytesToSize(available) }</p>
<p>Used: { bytesToSize(used) }</p>
</div>
<style>
:scope
display block
> mk-server-home-widget-pie
padding 10px
height 100px
float left
> div > div
float left float left
@ -241,7 +333,6 @@
<script> <script>
import bytesToSize from '../../../common/scripts/bytes-to-size'; import bytesToSize from '../../../common/scripts/bytes-to-size';
this.r = 0.4;
this.connection = this.opts.connection; this.connection = this.opts.connection;
this.bytesToSize = bytesToSize; this.bytesToSize = bytesToSize;
@ -256,21 +347,16 @@
this.onStats = stats => { this.onStats = stats => {
stats.disk.used = stats.disk.total - stats.disk.free; stats.disk.used = stats.disk.total - stats.disk.free;
const color = `hsl(${180 - (stats.disk.used / stats.disk.total * 180)}, 80%, 70%)`; this.refs.pie.render(stats.disk.used / stats.disk.total);
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({ this.update({
color,
p,
strokeDashoffset,
total: stats.disk.total, total: stats.disk.total,
used: stats.disk.used, used: stats.disk.used,
available: stats.disk.available available: stats.disk.available
}); });
}; };
</script> </script>
</mk-server-home-widget-disk-usage> </mk-server-home-widget-disk>
<mk-server-home-widget-info> <mk-server-home-widget-info>
<p>Maintainer: { meta.maintainer }</p> <p>Maintainer: { meta.maintainer }</p>
@ -283,3 +369,55 @@
this.meta = this.opts.meta; this.meta = this.opts.meta;
</script> </script>
</mk-server-home-widget-info> </mk-server-home-widget-info>
<mk-server-home-widget-pie>
<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 * 100).toFixed(0) }%</text>
</svg>
<style>
:scope
display block
> svg
display block
height 100%
> circle
transform-origin center
transform rotate(-90deg)
transition stroke-dashoffset 0.5s ease
> text
font-size 0.15px
fill rgba(0, 0, 0, 0.6)
</style>
<script>
this.r = 0.4;
this.render = p => {
const color = `hsl(${180 - (p * 180)}, 80%, 70%)`;
const strokeDashoffset = (1 - p) * (Math.PI * (this.r * 2));
this.update({
p,
color,
strokeDashoffset
});
};
</script>
</mk-server-home-widget-pie>