Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
Sharkey
Manage
Activity
Members
Labels
Plan
Issues
342
Issue boards
Milestones
Iterations
Wiki
Requirements
Code
Merge requests
27
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Locked files
Build
Pipelines
Jobs
Pipeline schedules
Test cases
Artifacts
Deploy
Releases
Package Registry
Container Registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Service Desk
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Code review analytics
Issue analytics
Insights
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
TransFem.org
Sharkey
Commits
1f3f5f05
Commit
1f3f5f05
authored
7 years ago
by
syuilo
Browse files
Options
Downloads
Patches
Plain Diff
[Client] Improve server home widget
parent
bef3d57c
No related branches found
Branches containing commit
No related tags found
Tags containing commit
No related merge requests found
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
src/web/app/desktop/tags/home-widgets/server.tag
+111
-12
111 additions, 12 deletions
src/web/app/desktop/tags/home-widgets/server.tag
with
111 additions
and
12 deletions
src/web/app/desktop/tags/home-widgets/server.tag
+
111
−
12
View file @
1f3f5f05
...
...
@@ -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
d
x="1"
d
y="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
d
x="1"
d
y="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 C
onnection
()
;
this.connection =
this.opts.c
onnection;
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>
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment