status実装

とりあえずCPU使用率だけ

docs/setup.en.md

@@ -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}*
 

docs/setup.ja.md

@@ -26,6 +26,7 @@ Misskeyは以下のサブドメインを使います:
 * **api**.*{primary domain}*
 * **auth**.*{primary domain}*
 * **about**.*{primary domain}*
+* **status**.*{primary domain}*
 * **dev**.*{primary domain}*
 * **file**.*{secondary domain}*
 

src/config.ts

@@ -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);

src/web/app/common/scripts/config.js

@@ -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
 };

src/web/app/desktop/tags/home-widgets/nav.tag

@@ -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

src/web/app/status/script.js

@@ -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));
+}

src/web/app/status/style.styl

@@ -0,0 +1,12 @@
+@import "../base"
+
+html
+	color #456267
+	background #fff
+
+body
+	margin 0
+	padding 32px 0
+
+	@media (max-width 600px)
+		padding 0

src/web/app/status/tags/index.js

@@ -0,0 +1 @@
+require('./index.tag');

src/web/app/status/tags/index.tag

@@ -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>

webpack/webpack.config.ts

@@ -14,10 +14,11 @@ module.exports = langs.map(([lang, locale]) => {
 
 	// Entries
 	const entry = {
-		'desktop': './src/web/app/desktop/script.js',
+		desktop: './src/web/app/desktop/script.js',
-		'mobile': './src/web/app/mobile/script.js',
+		mobile: './src/web/app/mobile/script.js',
-		'dev': './src/web/app/dev/script.js',
+		status: './src/web/app/status/script.js',
-		'auth': './src/web/app/auth/script.js'
+		dev: './src/web/app/dev/script.js',
+		auth: './src/web/app/auth/script.js'
 	};
 
 	const output = {