Resolve #5063

2 files changed, 57 insertions, 13 deletions

diff --git a/src/client/app/admin/views/db.vue b/src/client/app/admin/views/db.vue
new file mode 100644
index 0000000000..27bb81039e
--- /dev/null
+++ b/src/client/app/admin/views/db.vue
@@ -0,0 +1,39 @@
+<template>
+<div>
+	<ui-card>
+		<template #title><fa :icon="faDatabase"/> {{ $t('tables') }}</template>
+		<section v-if="tables">
+			<div v-for="table in Object.keys(tables)"><b>{{ table }}</b> {{ tables[table].count }} {{ tables[table].size | bytes }}</div>
+		</section>
+	</ui-card>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../i18n';
+import { faDatabase } from '@fortawesome/free-solid-svg-icons';
+
+export default Vue.extend({
+	i18n: i18n('admin/views/db.vue'),
+
+	data() {
+		return {
+			tables: null,
+			faDatabase
+		};
+	},
+
+	mounted() {
+		this.fetch();
+	},
+
+	methods: {
+		fetch() {
+			this.$root.api('admin/get-table-stats').then(tables => {
+				this.tables = tables;
+			});
+		},
+	}
+});
+</script>
diff --git a/src/client/app/admin/views/index.vue b/src/client/app/admin/views/index.vue
index 43e47038f3..8a13fe1bf6 100644
--- a/src/client/app/admin/views/index.vue
+++ b/src/client/app/admin/views/index.vue
@@ -22,6 +22,7 @@
 			<li @click="nav('instance')" :class="{ active: page == 'instance' }"><fa icon="cog" fixed-width/>{{ $t('instance') }}</li>
 			<li @click="nav('queue')" :class="{ active: page == 'queue' }"><fa :icon="faTasks" fixed-width/>{{ $t('queue') }}</li>
 			<li @click="nav('logs')" :class="{ active: page == 'logs' }"><fa :icon="faStream" fixed-width/>{{ $t('logs') }}</li>
+			<li @click="nav('db')" :class="{ active: page == 'db' }"><fa :icon="faDatabase" fixed-width/>{{ $t('db') }}</li>
 			<li @click="nav('moderators')" :class="{ active: page == 'moderators' }"><fa :icon="faHeadset" fixed-width/>{{ $t('moderators') }}</li>
 			<li @click="nav('users')" :class="{ active: page == 'users' }"><fa icon="users" fixed-width/>{{ $t('users') }}</li>
 			<li @click="nav('drive')" :class="{ active: page == 'drive' }"><fa icon="cloud" fixed-width/>{{ $t('@.drive') }}</li>
@@ -43,6 +44,7 @@
 			<div v-if="page == 'instance'"><x-instance/></div>
 			<div v-if="page == 'queue'"><x-queue/></div>
 			<div v-if="page == 'logs'"><x-logs/></div>
+			<div v-if="page == 'db'"><x-db/></div>
 			<div v-if="page == 'moderators'"><x-moderators/></div>
 			<div v-if="page == 'users'"><x-users/></div>
 			<div v-if="page == 'emoji'"><x-emoji/></div>
@@ -59,19 +61,20 @@
 import Vue from 'vue';
 import i18n from '../../i18n';
 import { version } from '../../config';
-import XDashboard from "./dashboard.vue";
-import XInstance from "./instance.vue";
-import XQueue from "./queue.vue";
-import XLogs from "./logs.vue";
-import XModerators from "./moderators.vue";
-import XEmoji from "./emoji.vue";
-import XAnnouncements from "./announcements.vue";
-import XUsers from "./users.vue";
-import XDrive from "./drive.vue";
-import XAbuse from "./abuse.vue";
-import XFederation from "./federation.vue";
+import XDashboard from './dashboard.vue';
+import XInstance from './instance.vue';
+import XQueue from './queue.vue';
+import XLogs from './logs.vue';
+import XDb from './db.vue';
+import XModerators from './moderators.vue';
+import XEmoji from './emoji.vue';
+import XAnnouncements from './announcements.vue';
+import XUsers from './users.vue';
+import XDrive from './drive.vue';
+import XAbuse from './abuse.vue';
+import XFederation from './federation.vue';
 
-import { faHeadset, faArrowLeft, faGlobe, faExclamationCircle, faTasks, faStream } from '@fortawesome/free-solid-svg-icons';
+import { faHeadset, faArrowLeft, faGlobe, faExclamationCircle, faTasks, faStream, faDatabase } from '@fortawesome/free-solid-svg-icons';
 import { faGrin } from '@fortawesome/free-regular-svg-icons';
 
 // Detect the user agent
@@ -85,6 +88,7 @@ export default Vue.extend({
 		XInstance,
 		XQueue,
 		XLogs,
+		XDb,
 		XModerators,
 		XEmoji,
 		XAnnouncements,
@@ -108,7 +112,8 @@ export default Vue.extend({
 			faGlobe,
 			faExclamationCircle,
 			faTasks,
-			faStream
+			faStream,
+			faDatabase,
 		};
 	},
 	methods: {