Improve admin dashboard

src/client/app/admin/views/ap-log.vue

@@ -0,0 +1,113 @@
+<template>
+<div class="hyhctythnmwihguaaapnbrbszsjqxpio">
+	<table>
+		<thead>
+			<tr>
+				<th>%fa:exchange-alt% In/Out</th>
+				<th>%fa:server% Host</th>
+				<th>%fa:bolt% Activity</th>
+				<th>%fa:user% Actor</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr v-for="log in logs" :key="log.id">
+				<td :class="log.direction">{{ log.direction == 'in' ? '<' : '>' }} {{ log.direction }}</td>
+				<td>{{ log.host }}</td>
+				<td>{{ log.activity }}</td>
+				<td>@{{ log.actor }}</td>
+			</tr>
+		</tbody>
+	</table>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	data() {
+		return {
+			logs: [],
+			connection: null
+		};
+	},
+
+	mounted() {
+		this.connection = (this as any).os.stream.useSharedConnection('apLog');
+		this.connection.on('stats', this.onLog);
+		this.connection.on('statsLog', this.onLogs);
+		this.connection.send('requestLog', {
+			id: Math.random().toString().substr(2, 8),
+			length: 50
+		});
+
+		setInterval(() => {
+			this.onLog({
+				direction: ['in', 'out'][Math.floor(Math.random() * 2)],
+				activity: 'Create',
+				host: 'misskey.ai',
+				actor: 'foobar'
+			});
+		}, 1000);
+	},
+
+	beforeDestroy() {
+		this.connection.dispose();
+	},
+
+	methods: {
+		onLog(log) {
+			log.id = Math.random();
+			this.logs.unshift(log);
+			if (this.logs.length > 50) this.logs.pop();
+		},
+
+		onLogs(logs) {
+			logs.reverse().forEach(log => this.onLog(log));
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.hyhctythnmwihguaaapnbrbszsjqxpio
+	display block
+	padding 16px
+	height 250px
+	overflow auto
+	box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
+	background var(--face)
+	border-radius 8px
+
+	> table
+		width 100%
+		max-width 100%
+		overflow auto
+		border-spacing 0
+		border-collapse collapse
+		color #555
+
+		thead
+			font-weight bold
+			border-bottom solid 2px #eee
+
+			tr
+				th
+					text-align left
+
+		tbody
+			tr
+				&:nth-child(odd)
+					background #fbfbfb
+
+		th, td
+			padding 8px 16px
+			min-width 128px
+
+		td.in
+			color #d26755
+
+		td.out
+			color #55bb83
+
+</style>

src/client/app/admin/views/dashboard.vue

@@ -7,6 +7,7 @@
 		<p><b>Node</b><span>{{ meta.node }}</span></p>
 		<p>藍ちゃかわいい</p>
 	</header>
+
 	<div v-if="stats" class="stats">
 		<div>
 			<div>
@@ -34,22 +35,22 @@
 		</div>
 		<div>
 			<div>
-				<div>%fa:user%</div>
+				<div>%fa:database%</div>
 				<div>
-					<span>%i18n:@accounts%</span>
-					<b>{{ stats.usersCount | number }}</b>
+					<span>%i18n:@drive%</span>
+					<b>{{ stats.driveUsageLocal | bytes }}</b>
 				</div>
 			</div>
 			<div>
-				<span>%fa:globe% %i18n:@federated%</span>
+				<span>%fa:home% %i18n:@this-instance%</span>
 			</div>
 		</div>
 		<div>
 			<div>
-				<div>%fa:pencil-alt%</div>
+				<div>%fa:hdd R%</div>
 				<div>
-					<span>%i18n:@notes%</span>
-					<b>{{ stats.notesCount | number }}</b>
+					<span>%i18n:@instances%</span>
+					<b>{{ stats.instances | number }}</b>
 				</div>
 			</div>
 			<div>
@@ -65,6 +66,10 @@
 	<div class="cpu-memory">
 		<x-cpu-memory :connection="connection"/>
 	</div>
+
+	<div class="ap">
+		<x-ap-log/>
+	</div>
 </div>
 </template>
 
@@ -72,11 +77,13 @@
 import Vue from "vue";
 import XCpuMemory from "./cpu-memory.vue";
 import XCharts from "./charts.vue";
+import XApLog from "./ap-log.vue";
 
 export default Vue.extend({
 	components: {
 		XCpuMemory,
-		XCharts
+		XCharts,
+		XApLog
 	},
 	data() {
 		return {

src/client/app/common/views/filters/bytes.ts

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 
 Vue.filter('bytes', (v, digits = 0) => {
+	if (v == null) return '?';
 	const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
 	if (v == 0) return '0';
 	const isMinus = v < 0;

src/client/app/common/views/filters/number.ts

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 
 Vue.filter('number', (n) => {
+	if (n == null) return 'N/A';
 	return n.toLocaleString();
 });