Add access log widget

6 files changed, 123 insertions, 0 deletions

diff --git a/src/web/app/common/mixins/index.ts b/src/web/app/common/mixins/index.ts
index 45427fb9d3..a11bfa7b64 100644
--- a/src/web/app/common/mixins/index.ts
+++ b/src/web/app/common/mixins/index.ts
@@ -3,6 +3,7 @@ import * as riot from 'riot';
 import activateMe from './i';
 import activateApi from './api';
 import ServerStreamManager from '../scripts/server-stream-manager';
+import RequestsStreamManager from '../scripts/requests-stream-manager';
 
 export default (me, stream) => {
 	activateMe(me);
@@ -11,4 +12,5 @@ export default (me, stream) => {
 	(riot as any).mixin('stream', { stream });
 
 	(riot as any).mixin('server-stream', { serverStream: new ServerStreamManager() });
+	(riot as any).mixin('requests-stream', { requestsStream: new RequestsStreamManager() });
 };
diff --git a/src/web/app/common/scripts/requests-stream-manager.ts b/src/web/app/common/scripts/requests-stream-manager.ts
new file mode 100644
index 0000000000..44db913e78
--- /dev/null
+++ b/src/web/app/common/scripts/requests-stream-manager.ts
@@ -0,0 +1,12 @@
+import StreamManager from './stream-manager';
+import Connection from './requests-stream';
+
+export default class RequestsStreamManager extends StreamManager<Connection> {
+	public getConnection() {
+		if (this.connection == null) {
+			this.connection = new Connection();
+		}
+
+		return this.connection;
+	}
+}
diff --git a/src/web/app/common/scripts/requests-stream.ts b/src/web/app/common/scripts/requests-stream.ts
new file mode 100644
index 0000000000..325224587a
--- /dev/null
+++ b/src/web/app/common/scripts/requests-stream.ts
@@ -0,0 +1,14 @@
+'use strict';
+
+import Stream from './stream';
+
+/**
+ * Requests stream connection
+ */
+class Connection extends Stream {
+	constructor() {
+		super('requests');
+	}
+}
+
+export default Connection;
diff --git a/src/web/app/desktop/tags/home-widgets/access-log.tag b/src/web/app/desktop/tags/home-widgets/access-log.tag
new file mode 100644
index 0000000000..a148577563
--- /dev/null
+++ b/src/web/app/desktop/tags/home-widgets/access-log.tag
@@ -0,0 +1,93 @@
+<mk-access-log-home-widget>
+	<virtual if={ data.design == 0 }>
+		<p class="title"><i class="fa fa-server"></i>%i18n:desktop.tags.mk-access-log-home-widget.title%</p>
+	</virtual>
+	<div ref="log">
+		<p each={ requests }>
+			<span class="ip" style="color:{ fg }; background:{ bg }">{ ip }</span>
+			<span>{ method }</span>
+			<span>{ path }</span>
+		</p>
+	</div>
+	<style>
+		:scope
+			display block
+			overflow hidden
+			background #fff
+
+			> .title
+				z-index 1
+				margin 0
+				padding 0 16px
+				line-height 42px
+				font-size 0.9em
+				font-weight bold
+				color #888
+				box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+				> i
+					margin-right 4px
+
+			> div
+				max-height 250px
+				overflow auto
+
+				> p
+					margin 0
+					padding 8px
+					font-size 0.8em
+					color #555
+
+					&:nth-child(odd)
+						background rgba(0, 0, 0, 0.025)
+
+					> .ip
+						margin-right 4px
+
+	</style>
+	<script>
+		import seedrandom from 'seedrandom';
+
+		this.data = {
+			design: 0
+		};
+
+		this.mixin('widget');
+
+		this.mixin('requests-stream');
+		this.connection = this.requestsStream.getConnection();
+		this.connectionId = this.requestsStream.use();
+
+		this.requests = [];
+
+		this.on('mount', () => {
+			this.connection.on('request', this.onRequest);
+		});
+
+		this.on('unmount', () => {
+			this.connection.off('request', this.onRequest);
+			this.requestsStream.dispose(this.connectionId);
+		});
+
+		this.onRequest = request => {
+			const random = seedrandom(request.ip);
+			const r = Math.floor(random() * 255);
+			const g = Math.floor(random() * 255);
+			const b = Math.floor(random() * 255);
+			const luma = (0.2126 * r) + (0.7152 * g) + (0.0722 * b); // SMPTE C, Rec. 709 weightings
+			request.bg = `rgb(${r}, ${g}, ${b})`;
+			request.fg = luma >= 165 ? '#000' : '#fff';
+
+			this.requests.push(request);
+			if (this.requests.length > 30) this.requests.shift();
+			this.update();
+
+			this.refs.log.scrollTop = this.refs.log.scrollHeight;
+		};
+
+		this.func = () => {
+			if (++this.data.design == 2) this.data.design = 0;
+			this.save();
+		};
+	</script>
+</mk-access-log-home-widget>
diff --git a/src/web/app/desktop/tags/home.tag b/src/web/app/desktop/tags/home.tag
index fd286851d9..88d06d2baa 100644
--- a/src/web/app/desktop/tags/home.tag
+++ b/src/web/app/desktop/tags/home.tag
@@ -20,6 +20,7 @@
 					<option value="recommended-polls">投票</option>
 					<option value="post-form">投稿フォーム</option>
 					<option value="channel">チャンネル</option>
+					<option value="access-log">アクセスログ</option>
 					<option value="server">サーバー情報</option>
 					<option value="donation">寄付のお願い</option>
 					<option value="nav">ナビゲーション</option>
diff --git a/src/web/app/desktop/tags/index.ts b/src/web/app/desktop/tags/index.ts
index 15677471c3..8b5a52d670 100644
--- a/src/web/app/desktop/tags/index.ts
+++ b/src/web/app/desktop/tags/index.ts
@@ -43,6 +43,7 @@ require('./home-widgets/slideshow.tag');
 require('./home-widgets/channel.tag');
 require('./home-widgets/timemachine.tag');
 require('./home-widgets/post-form.tag');
+require('./home-widgets/access-log.tag');
 require('./timeline.tag');
 require('./messaging/window.tag');
 require('./messaging/room-window.tag');