feat: introduce bull dashboard

CHANGELOG.md

@@ -10,6 +10,14 @@
 You should also include the user name that made the change.
 -->
 
+## 12.x.x (unreleased)
+
+### Improvements
+- Bull Dashboardを組み込み、ジョブキューの確認や操作を行えるように @syuilo
+
+### Bugfixes
+- 
+
 ## 12.108.1 (2022/03/12)
 
 ### Bugfixes

package.json

@@ -31,6 +31,7 @@
 		"cleanall": "npm run clean-all"
 	},
 	"dependencies": {
+		"@bull-board/koa": "3.10.0",
 		"@types/gulp": "4.0.9",
 		"@types/gulp-rename": "2.0.1",
 		"execa": "5.1.1",

packages/backend/src/queue/queues.ts

@@ -8,3 +8,12 @@ export const deliverQueue = initializeQueue<DeliverJobData>('deliver', config.de
 export const inboxQueue = initializeQueue<InboxJobData>('inbox', config.inboxJobPerSec || 16);
 export const dbQueue = initializeQueue<DbJobData>('db');
 export const objectStorageQueue = initializeQueue<ObjectStorageJobData>('objectStorage');
+
+export const queues = [
+	systemQueue,
+	endedPollNotificationQueue,
+	deliverQueue,
+	inboxQueue,
+	dbQueue,
+	objectStorageQueue,
+];

packages/backend/src/server/web/index.ts

@@ -10,6 +10,9 @@ import Router from '@koa/router';
 import send from 'koa-send';
 import favicon from 'koa-favicon';
 import views from 'koa-views';
+import { createBullBoard } from '@bull-board/api';
+import { BullAdapter  } from '@bull-board/api/bullAdapter.js';
+import { KoaAdapter } from '@bull-board/koa';
 
 import packFeed from './feed.js';
 import { fetchMeta } from '@/misc/fetch-meta.js';
@@ -20,6 +23,7 @@ import * as Acct from '@/misc/acct.js';
 import { getNoteSummary } from '@/misc/get-note-summary.js';
 import { urlPreviewHandler } from './url-preview.js';
 import { manifestHandler } from './manifest.js';
+import { queues } from '@/queue/queues.js';
 
 const _filename = fileURLToPath(import.meta.url);
 const _dirname = dirname(_filename);
@@ -31,6 +35,37 @@ const assets = `${_dirname}/../../../../../built/_client_dist_/`;
 // Init app
 const app = new Koa();
 
+//#region Bull Dashboard
+const bullBoardPath = '/queue';
+
+// Authenticate
+app.use(async (ctx, next) => {
+	if (ctx.path === bullBoardPath || ctx.path.startsWith(bullBoardPath + '/')) {
+		const token = ctx.cookies.get('token');
+		if (token == null) {
+			ctx.status = 401;
+			return;
+		}
+		const user = await Users.findOne({ token });
+		if (user == null || !(user.isAdmin || user.isModerator)) {
+			ctx.status = 403;
+			return;
+		}
+	}
+	await next();
+});
+
+const serverAdapter = new KoaAdapter();
+
+createBullBoard({
+	queues: queues.map(q => new BullAdapter(q)),
+	serverAdapter,
+});
+
+serverAdapter.setBasePath(bullBoardPath);
+app.use(serverAdapter.registerPlugin());
+//#endregion
+
 // Init renderer
 app.use(views(_dirname + '/views', {
 	extension: 'pug',

packages/client/src/account.ts

@@ -116,6 +116,7 @@ export async function login(token: Account['token'], redirect?: string) {
 	if (_DEV_) console.log('logging as token ', token);
 	const me = await fetchAccount(token);
 	localStorage.setItem('account', JSON.stringify(me));
+	document.cookie = `token=${token}; path=/; max-age=31536000`; // bull dashboardの認証とかで使う
 	await addAccount(me.id, token);
 
 	if (redirect) {

packages/client/src/pages/admin/queue.vue

@@ -17,6 +17,7 @@ import XQueue from './queue.chart.vue';
 import * as os from '@/os';
 import { stream } from '@/stream';
 import * as symbols from '@/symbols';
+import * as config from '@/config';
 
 export default defineComponent({
 	components: {
@@ -32,6 +33,14 @@ export default defineComponent({
 				title: this.$ts.jobQueue,
 				icon: 'fas fa-clipboard-list',
 				bg: 'var(--bg)',
+				actions: [{
+					asFullButton: true,
+					icon: 'fas fa-up-right-from-square',
+					text: this.$ts.dashboard,
+					handler: () => {
+						window.open(config.url + '/queue', '_blank');
+					},
+				}],
 			},
 			connection: markRaw(stream.useChannel('queueStats')),
 		}