status実装
とりあえずCPU使用率だけ
This commit is contained in:
syuilo
parent
598d6f7593
commit
5d9b5820af
10 changed files with 188 additions and 6 deletions
|
|
@ -25,6 +25,7 @@ Note that Misskey uses following subdomains:
|
|||
* **api**.*{primary domain}*
|
||||
* **auth**.*{primary domain}*
|
||||
* **about**.*{primary domain}*
|
||||
* **status**.*{primary domain}*
|
||||
* **dev**.*{primary domain}*
|
||||
* **file**.*{secondary domain}*
|
||||
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ Misskeyは以下のサブドメインを使います:
|
|||
* **api**.*{primary domain}*
|
||||
* **auth**.*{primary domain}*
|
||||
* **about**.*{primary domain}*
|
||||
* **status**.*{primary domain}*
|
||||
* **dev**.*{primary domain}*
|
||||
* **file**.*{secondary domain}*
|
||||
|
||||
|
|
|
|||
|
|
@ -81,6 +81,7 @@ type Mixin = {
|
|||
api_url: string;
|
||||
auth_url: string;
|
||||
about_url: string;
|
||||
status_url: string;
|
||||
dev_url: string;
|
||||
drive_url: string;
|
||||
};
|
||||
|
|
@ -115,6 +116,7 @@ export default function load() {
|
|||
mixin.auth_url = `${mixin.scheme}://auth.${mixin.host}`;
|
||||
mixin.dev_url = `${mixin.scheme}://dev.${mixin.host}`;
|
||||
mixin.about_url = `${mixin.scheme}://about.${mixin.host}`;
|
||||
mixin.status_url = `${mixin.scheme}://status.${mixin.host}`;
|
||||
mixin.drive_url = `${mixin.secondary_scheme}://file.${mixin.secondary_host}`;
|
||||
|
||||
return Object.assign(config, mixin);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ const url = `${scheme}//${host}`;
|
|||
const apiUrl = `${scheme}//api.${host}`;
|
||||
const devUrl = `${scheme}//dev.${host}`;
|
||||
const aboutUrl = `${scheme}//about.${host}`;
|
||||
const statusUrl = `${scheme}//status.${host}`;
|
||||
|
||||
export default {
|
||||
host,
|
||||
|
|
@ -15,5 +16,6 @@ export default {
|
|||
url,
|
||||
apiUrl,
|
||||
devUrl,
|
||||
aboutUrl
|
||||
aboutUrl,
|
||||
statusUrl
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<mk-nav-home-widget><a href={ CONFIG.aboutUrl }>Misskeyについて</a><i>・</i><a href={ CONFIG.aboutUrl + '/status' }>ステータス</a><i>・</i><a href="http://zawazawa.jp/misskey/">Wiki</a><i>・</i><a href="https://github.com/syuilo/misskey">リポジトリ</a><i>・</i><a href={ CONFIG.devUrl }>開発者</a><i>・</i><a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on <i class="fa fa-twitter"></i></a>
|
||||
<mk-nav-home-widget><a href={ CONFIG.aboutUrl }>Misskeyについて</a><i>・</i><a href={ CONFIG.statusUrl }>ステータス</a><i>・</i><a href="http://zawazawa.jp/misskey/">Wiki</a><i>・</i><a href="https://github.com/syuilo/misskey">リポジトリ</a><i>・</i><a href={ CONFIG.devUrl }>開発者</a><i>・</i><a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on <i class="fa fa-twitter"></i></a>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
|
|
|
|||
23
src/web/app/status/script.js
Normal file
23
src/web/app/status/script.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
/**
|
||||
* Status
|
||||
*/
|
||||
|
||||
// Style
|
||||
import './style.styl';
|
||||
|
||||
import * as riot from 'riot';
|
||||
require('./tags');
|
||||
import init from '../init';
|
||||
|
||||
document.title = 'Misskey System Status';
|
||||
|
||||
/**
|
||||
* init
|
||||
*/
|
||||
init(me => {
|
||||
mount(document.createElement('mk-index'));
|
||||
});
|
||||
|
||||
function mount(content) {
|
||||
riot.mount(document.getElementById('app').appendChild(content));
|
||||
}
|
||||
12
src/web/app/status/style.styl
Normal file
12
src/web/app/status/style.styl
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
@import "../base"
|
||||
|
||||
html
|
||||
color #456267
|
||||
background #fff
|
||||
|
||||
body
|
||||
margin 0
|
||||
padding 32px 0
|
||||
|
||||
@media (max-width 600px)
|
||||
padding 0
|
||||
1
src/web/app/status/tags/index.js
Normal file
1
src/web/app/status/tags/index.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
require('./index.tag');
|
||||
139
src/web/app/status/tags/index.tag
Normal file
139
src/web/app/status/tags/index.tag
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
<mk-index>
|
||||
<h1>Misskey Status</h1>
|
||||
<main>
|
||||
<mk-cpu-usage connection={ connection }/>
|
||||
</main>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
|
||||
> h1
|
||||
padding 16px
|
||||
|
||||
> *
|
||||
margin 0 auto
|
||||
max-width 700px
|
||||
|
||||
> main
|
||||
> *
|
||||
padding 16px
|
||||
border-top solid 2px #456267
|
||||
|
||||
> h2
|
||||
margin 0
|
||||
</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 => {
|
||||
this.update({
|
||||
initializing: false,
|
||||
meta
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
this.on('unmount', () => {
|
||||
this.connection.close();
|
||||
});
|
||||
|
||||
</script>
|
||||
</mk-index>
|
||||
|
||||
<mk-cpu-usage>
|
||||
<h2>CPU <b>{ percentage }%</b></h2>
|
||||
<mk-line-chart ref="chart"/>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
</style>
|
||||
<script>
|
||||
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.chart.addData(1 - stats.cpu_usage);
|
||||
|
||||
const percentage = (stats.cpu_usage * 100).toFixed(0);
|
||||
|
||||
this.update({
|
||||
percentage
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</mk-cpu-usage>
|
||||
|
||||
<mk-line-chart>
|
||||
<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id={ gradientId } x1="0" x2="0" y1="1" y2="0">
|
||||
<stop offset="0%" stop-color="transparent"></stop>
|
||||
<stop offset="100%" stop-color="#456267"></stop>
|
||||
</linearGradient>
|
||||
<mask id={ maskId } x="0" y="0" riot-width={ viewBoxX } riot-height={ viewBoxY }>
|
||||
<polygon
|
||||
riot-points={ polygonPoints }
|
||||
fill="#fff"
|
||||
fill-opacity="0.5"/>
|
||||
</mask>
|
||||
</defs>
|
||||
<line x1="0" y1="0" riot-x2={ viewBoxX } y2="0" stroke="#eee" stroke-width="0.5"/>
|
||||
<line x1="0" y1="25%" riot-x2={ viewBoxX } y2="25%" stroke="#eee" stroke-width="0.25"/>
|
||||
<line x1="0" y1="50%" riot-x2={ viewBoxX } y2="50%" stroke="#eee" stroke-width="0.25"/>
|
||||
<line x1="0" y1="75%" riot-x2={ viewBoxX } y2="75%" stroke="#eee" stroke-width="0.25"/>
|
||||
<line x1="0" y1="100%" riot-x2={ viewBoxX } y2="100%" stroke="#eee" stroke-width="0.5"/>
|
||||
<rect
|
||||
x="-1" y="-1"
|
||||
riot-width={ viewBoxX + 2 } riot-height={ viewBoxY + 2 }
|
||||
style="stroke: none; fill: url(#{ gradientId }); mask: url(#{ maskId })"/>
|
||||
<polyline
|
||||
riot-points={ polylinePoints }
|
||||
fill="none"
|
||||
stroke="#456267"
|
||||
stroke-width="0.5"/>
|
||||
</svg>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
|
||||
> svg
|
||||
display block
|
||||
width 100%
|
||||
</style>
|
||||
<script>
|
||||
import uuid from '../../common/scripts/uuid';
|
||||
|
||||
this.viewBoxX = 100;
|
||||
this.viewBoxY = 30;
|
||||
this.data = [];
|
||||
this.gradientId = uuid();
|
||||
this.maskId = uuid();
|
||||
|
||||
this.addData = data => {
|
||||
this.data.push(data);
|
||||
if (this.data.length > 100) this.data.shift();
|
||||
|
||||
const polylinePoints = this.data.map((d, i) => `${this.viewBoxX - ((this.data.length - 1) - i)},${d * this.viewBoxY}`).join(' ');
|
||||
const polygonPoints = `${this.viewBoxX - (this.data.length - 1)},${ this.viewBoxY } ${ polylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
|
||||
|
||||
this.update({
|
||||
polylinePoints,
|
||||
polygonPoints
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</mk-line-chart>
|
||||
|
|
@ -14,10 +14,11 @@ module.exports = langs.map(([lang, locale]) => {
|
|||
|
||||
// Entries
|
||||
const entry = {
|
||||
'desktop': './src/web/app/desktop/script.js',
|
||||
'mobile': './src/web/app/mobile/script.js',
|
||||
'dev': './src/web/app/dev/script.js',
|
||||
'auth': './src/web/app/auth/script.js'
|
||||
desktop: './src/web/app/desktop/script.js',
|
||||
mobile: './src/web/app/mobile/script.js',
|
||||
status: './src/web/app/status/script.js',
|
||||
dev: './src/web/app/dev/script.js',
|
||||
auth: './src/web/app/auth/script.js'
|
||||
};
|
||||
|
||||
const output = {
|
||||
|
|
|
|||
Loading…
Reference in a new issue