diff options
Diffstat (limited to 'src/web')
| -rw-r--r-- | src/web/app/desktop/tags/home-widgets/server.tag | 123 |
1 files changed, 111 insertions, 12 deletions
diff --git a/src/web/app/desktop/tags/home-widgets/server.tag b/src/web/app/desktop/tags/home-widgets/server.tag index c0187edcb9..44249352ed 100644 --- a/src/web/app/desktop/tags/home-widgets/server.tag +++ b/src/web/app/desktop/tags/home-widgets/server.tag @@ -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> - |