diff --git a/docs/setup.en.md b/docs/setup.en.md
index 9348db6671..b6391c6780 100644
--- a/docs/setup.en.md
+++ b/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}*
diff --git a/docs/setup.ja.md b/docs/setup.ja.md
index fe67e35474..a770ac8c21 100644
--- a/docs/setup.ja.md
+++ b/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}*
diff --git a/src/config.ts b/src/config.ts
index ca940420e8..53b7108fdc 100644
--- a/src/config.ts
+++ b/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);
diff --git a/src/web/app/common/scripts/config.js b/src/web/app/common/scripts/config.js
index 16f75d6e16..d108b834bb 100644
--- a/src/web/app/common/scripts/config.js
+++ b/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
};
diff --git a/src/web/app/desktop/tags/home-widgets/nav.tag b/src/web/app/desktop/tags/home-widgets/nav.tag
index 304be8f954..16a93545a4 100644
--- a/src/web/app/desktop/tags/home-widgets/nav.tag
+++ b/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
diff --git a/src/web/app/status/script.js b/src/web/app/status/script.js
new file mode 100644
index 0000000000..06d4d9a7a4
--- /dev/null
+++ b/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));
+}
diff --git a/src/web/app/status/style.styl b/src/web/app/status/style.styl
new file mode 100644
index 0000000000..e560febf98
--- /dev/null
+++ b/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
diff --git a/src/web/app/status/tags/index.js b/src/web/app/status/tags/index.js
new file mode 100644
index 0000000000..f41151949f
--- /dev/null
+++ b/src/web/app/status/tags/index.js
@@ -0,0 +1 @@
+require('./index.tag');
diff --git a/src/web/app/status/tags/index.tag b/src/web/app/status/tags/index.tag
new file mode 100644
index 0000000000..b75b9710c1
--- /dev/null
+++ b/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>
diff --git a/webpack/webpack.config.ts b/webpack/webpack.config.ts
index 0154d3b191..7035d4bb9a 100644
--- a/webpack/webpack.config.ts
+++ b/webpack/webpack.config.ts
@@ -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 = {