Resolve #4165

2 files changed, 50 insertions, 2 deletions

diff --git a/src/client/app/admin/views/index.vue b/src/client/app/admin/views/index.vue
index aa831e8bf6..9de1da0d09 100644
--- a/src/client/app/admin/views/index.vue
+++ b/src/client/app/admin/views/index.vue
@@ -20,6 +20,7 @@
 		<ul>
 			<li @click="nav('dashboard')" :class="{ active: page == 'dashboard' }"><fa icon="home" fixed-width/>{{ $t('dashboard') }}</li>
 			<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('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>
@@ -40,6 +41,7 @@
 		<div class="page">
 			<div v-if="page == 'dashboard'"><x-dashboard/></div>
 			<div v-if="page == 'instance'"><x-instance/></div>
+			<div v-if="page == 'queue'"><x-queue/></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>
@@ -58,6 +60,7 @@ import i18n from '../../i18n';
 import { version } from '../../config';
 import XDashboard from "./dashboard.vue";
 import XInstance from "./instance.vue";
+import XQueue from "./queue.vue";
 import XModerators from "./moderators.vue";
 import XEmoji from "./emoji.vue";
 import XAnnouncements from "./announcements.vue";
@@ -65,7 +68,7 @@ import XHashtags from "./hashtags.vue";
 import XUsers from "./users.vue";
 import XDrive from "./drive.vue";
 import XAbuse from "./abuse.vue";
-import { faHeadset, faArrowLeft, faShareAlt, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+import { faHeadset, faArrowLeft, faShareAlt, faExclamationCircle, faTasks } from '@fortawesome/free-solid-svg-icons';
 import { faGrin } from '@fortawesome/free-regular-svg-icons';
 
 // Detect the user agent
@@ -77,6 +80,7 @@ export default Vue.extend({
 	components: {
 		XDashboard,
 		XInstance,
+		XQueue,
 		XModerators,
 		XEmoji,
 		XAnnouncements,
@@ -98,7 +102,8 @@ export default Vue.extend({
 			faArrowLeft,
 			faHeadset,
 			faShareAlt,
-			faExclamationCircle
+			faExclamationCircle,
+			faTasks
 		};
 	},
 	methods: {
diff --git a/src/client/app/admin/views/queue.vue b/src/client/app/admin/views/queue.vue
new file mode 100644
index 0000000000..e26b86e3ef
--- /dev/null
+++ b/src/client/app/admin/views/queue.vue
@@ -0,0 +1,43 @@
+<template>
+<div>
+	<ui-card>
+		<div slot="title">{{ $t('operation') }}</div>
+		<section>
+			<ui-button @click="removeAllJobs">{{ $t('remove-all-jobs') }}</ui-button>
+		</section>
+	</ui-card>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../i18n';
+
+export default Vue.extend({
+	i18n: i18n('admin/views/queue.vue'),
+
+	data() {
+		return {
+		};
+	},
+
+	methods: {
+		async removeAllJobs() {
+			const process = async () => {
+				await this.$root.api('admin/queue/clear');
+				this.$root.dialog({
+					type: 'success',
+					splash: true
+				});
+			};
+
+			await process().catch(e => {
+				this.$root.dialog({
+					type: 'error',
+					text: e.toString()
+				});
+			});
+		},
+	}
+});
+</script>