Maintenance & build optimization

.prettierrc

@@ -1,5 +1,6 @@
 {
   "semi": false,
   "singleQuote": true,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "arrowParens": "always"
 }

package.json

@@ -42,64 +42,63 @@
     "prepare": "yarn run snyk-protect"
   },
   "dependencies": {
-    "@types/bull": "^3.12.1",
-    "@types/express": "^4.17.3",
-    "@types/react-dom": "^16.9.5",
+    "@types/bull": "^3.14.4",
+    "@types/express": "^4.17.9",
+    "@types/express-serve-static-core": "^4.17.14",
+    "@types/react-dom": "^17.0.0",
     "classnames": "^2.2.6",
-    "date-fns": "2.10.0",
-    "ejs": "3.0.1",
+    "date-fns": "2.16.1",
+    "ejs": "3.1.5",
     "express": "4.17.1",
     "highlight.js": "^10.4.1",
-    "pretty-bytes": "5.3.0",
-    "react": "16.13.0",
-    "react-dom": "16.13.0",
-    "react-highlight": "0.12.0",
+    "pretty-bytes": "5.4.1",
+    "query-string": "^6.13.7",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
     "react-router-dom": "^5.2.0",
-    "redis-info": "^3.0.7"
+    "redis-info": "^3.0.8"
   },
   "devDependencies": {
-    "@types/classnames": "^2.2.10",
-    "@types/jest": "^24.9.0",
-    "@types/node": "^13.1.8",
+    "@types/classnames": "^2.2.11",
+    "@types/jest": "^26.0.16",
+    "@types/node": "^14.14.10",
     "@types/pretty-bytes": "^5.2.0",
     "@types/react-highlight": "^0.12.2",
-    "@types/react-router-dom": "^5.1.5",
+    "@types/react-router-dom": "^5.1.6",
     "@types/redis-info": "^3.0.0",
-    "@types/supertest": "^2.0.8",
-    "@typescript-eslint/eslint-plugin": "^2.17.0",
-    "@typescript-eslint/parser": "^2.17.0",
-    "@typescript-eslint/typescript-estree": "^2.17.0",
-    "babel-preset-react-app": "^7.0.2",
-    "bull": "^3.13.0",
-    "bullmq": "1.8.14",
-    "css-loader": "^4.2.2",
-    "dockest": "2.0.0-beta.2",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.10.0",
+    "@types/supertest": "^2.0.10",
+    "@typescript-eslint/eslint-plugin": "^4.9.0",
+    "@typescript-eslint/parser": "^4.9.0",
+    "@typescript-eslint/typescript-estree": "^4.9.0",
+    "bull": "^3.20.0",
+    "bullmq": "1.11.0",
+    "css-loader": "^5.0.1",
+    "css-minimizer-webpack-plugin": "^1.1.5",
+    "dockest": "2.1.0",
+    "eslint": "^7.15.0",
+    "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-no-only-tests": "^2.4.0",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.19.0",
-    "fork-ts-checker-webpack-plugin": "^5.1.0",
-    "html-webpack-plugin": "^4.4.1",
-    "jest": "^24.9.0",
-    "mini-css-extract-plugin": "^0.11.0",
-    "nodemon": "^2.0.2",
-    "postcss-loader": "^4.0.1",
+    "eslint-plugin-prettier": "^3.2.0",
+    "eslint-plugin-react": "^7.21.5",
+    "fork-ts-checker-webpack-plugin": "^6.0.5",
+    "html-webpack-plugin": "^4.5.0",
+    "jest": "^26.6.3",
+    "mini-css-extract-plugin": "^1.3.2",
+    "nodemon": "^2.0.6",
+    "postcss-loader": "^4.1.0",
     "postcss-preset-env": "^6.7.0",
-    "prettier": "^1.19.1",
-    "prettier-eslint": "^9.0.1",
-    "react-dev-utils": "^8.0.0",
-    "snyk": "^1.316.1",
-    "source-map-loader": "^0.2.4",
-    "style-loader": "^1.2.1",
-    "supertest": "^4.0.2",
-    "ts-jest": "^24.3.0",
-    "ts-loader": "^6.2.1",
-    "ts-node": "^8.6.2",
-    "typescript": "^3.8.3",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10",
-    "webpack-manifest-plugin": "^2.2.0"
+    "prettier": "^2.2.1",
+    "prettier-eslint": "^12.0.0",
+    "react-dev-utils": "^11.0.1",
+    "snyk": "^1.434.2",
+    "style-loader": "^2.0.0",
+    "supertest": "^6.0.1",
+    "ts-jest": "^26.4.4",
+    "ts-loader": "^8.0.11",
+    "ts-node": "^9.1.0",
+    "typescript": "^4.1.2",
+    "webpack": "^5.10.0",
+    "webpack-cli": "^4.2.0"
   },
   "snyk": true
 }

src/dockest.ts

@@ -9,7 +9,7 @@ const { run } = new Dockest({
 run([
   {
     serviceName: 'redis',
-    healthcheck: async ({ defaultHealthchecks: { redis } }) => {
+    readinessCheck: async ({ defaultReadinessChecks: { redis } }) => {
       await redis()
     },
   },

src/index.spec.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/camelcase */
 import { Queue } from 'bullmq'
 import request from 'supertest'
 
@@ -38,7 +37,7 @@ describe('happy', () => {
       .get('/api/queues')
       .expect('Content-Type', /json/)
       .expect(200)
-      .then(res => {
+      .then((res) => {
         expect(JSON.parse(res.text)).toMatchInlineSnapshot(
           {
             stats: {
@@ -113,7 +112,7 @@ describe('happy', () => {
       .get('/api/queues')
       .expect('Content-Type', /json/)
       .expect(200)
-      .then(res => {
+      .then((res) => {
         expect(JSON.parse(res.text)).toMatchInlineSnapshot(
           {
             stats: {
@@ -171,7 +170,7 @@ describe('happy', () => {
       .get('/api/queues')
       .expect('Content-Type', /json/)
       .expect(200)
-      .then(res => {
+      .then((res) => {
         expect(JSON.parse(res.text)).toMatchInlineSnapshot(
           {
             stats: {

src/index.ts

@@ -1,5 +1,5 @@
-import express, { RequestHandler } from 'express'
-import { ParamsDictionary } from 'express-serve-static-core'
+import express from 'express'
+import { ParamsDictionary, RequestHandler } from 'express-serve-static-core'
 import path from 'path'
 import { BullBoardQueues, QueueAdapter } from './@types/app'
 import { cleanAll } from './routes/cleanAll'
@@ -38,17 +38,17 @@ router.put('/api/queues/:queueName/:id/promote', wrapAsync(promoteJob))
 router.put('/api/queues/:queueName/clean/:queueStatus', wrapAsync(cleanAll))
 
 export const setQueues = (bullQueues: ReadonlyArray<QueueAdapter>) => {
-  bullQueues.forEach(queue => {
+  bullQueues.forEach((queue) => {
     const name = queue.getName()
 
     bullBoardQueues[name] = { queue }
   })
 }
 
 export const replaceQueues = (bullQueues: ReadonlyArray<QueueAdapter>) => {
-  const queuesToPersist: string[] = bullQueues.map(queue => queue.getName())
+  const queuesToPersist: string[] = bullQueues.map((queue) => queue.getName())
 
-  Object.keys(bullBoardQueues).forEach(name => {
+  Object.keys(bullBoardQueues).forEach((name) => {
     if (queuesToPersist.indexOf(name) === -1) {
       delete bullBoardQueues[name]
     }

src/queueAdapters/bull.ts

@@ -30,7 +30,7 @@ export class BullAdapter implements QueueAdapter {
     start?: number,
     end?: number,
   ): Promise<Job[]> {
-    return this.queue.getJobs(jobStatuses, start, end)
+    return this.queue.getJobs(jobStatuses as any, start, end)
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

src/queueAdapters/bullMQ.ts

@@ -37,8 +37,8 @@ export class BullMQAdapter implements QueueAdapter {
   }
 
   public getJobCounts(...jobStatuses: JobStatus[]): Promise<JobCounts> {
-    return (this.queue.getJobCounts(...jobStatuses) as unknown) as Promise<
-      JobCounts
-    >
+    return (this.queue.getJobCounts(
+      ...jobStatuses,
+    ) as unknown) as Promise<JobCounts>
   }
 }

src/routes/cleanAll.ts

@@ -1,18 +1,20 @@
-import { RequestHandler } from 'express'
-
+import { Request, RequestHandler, Response } from 'express-serve-static-core'
 import { BullBoardQueues, JobCleanStatus } from '../@types/app'
 
 type RequestParams = {
   queueName: string
   queueStatus: JobCleanStatus
 }
 
-export const cleanAll: RequestHandler<RequestParams> = async (req, res) => {
+export const cleanAll: RequestHandler<RequestParams> = async (
+  req: Request,
+  res: Response,
+) => {
   try {
     const { queueName, queueStatus } = req.params
-    const {
-      bullBoardQueues,
-    }: { bullBoardQueues: BullBoardQueues } = req.app.locals
+    const { bullBoardQueues } = req.app.locals as {
+      bullBoardQueues: BullBoardQueues
+    }
 
     const GRACE_TIME_MS = 5000
 
@@ -23,7 +25,7 @@ export const cleanAll: RequestHandler<RequestParams> = async (req, res) => {
       })
     }
 
-    await queue.clean(queueStatus, GRACE_TIME_MS)
+    await queue.clean(queueStatus as any, GRACE_TIME_MS)
 
     return res.sendStatus(200)
   } catch (e) {

src/routes/cleanJob.ts

@@ -1,11 +1,11 @@
-import { RequestHandler } from 'express'
+import { Request, RequestHandler, Response } from 'express-serve-static-core'
 import { BullBoardQueues } from '../@types/app'
 
-export const cleanJob: RequestHandler = async (req, res) => {
+export const cleanJob: RequestHandler = async (req: Request, res: Response) => {
   try {
-    const {
-      bullBoardQueues,
-    }: { bullBoardQueues: BullBoardQueues } = req.app.locals
+    const { bullBoardQueues } = req.app.locals as {
+      bullBoardQueues: BullBoardQueues
+    }
     const { queueName, id } = req.params
     const { queue } = bullBoardQueues[queueName]
 

src/routes/index.ts

@@ -1,9 +1,7 @@
-import { RequestHandler } from 'express'
+import { Request, RequestHandler, Response } from 'express-serve-static-core'
 
-export const entryPoint: RequestHandler = (req, res) => {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-  // @ts-ignore
-  const basePath = req.proxyUrl || req.baseUrl
+export const entryPoint: RequestHandler = (req: Request, res: Response) => {
+  const basePath = (req as any).proxyUrl || req.baseUrl
 
   res.render('index', {
     basePath,

src/routes/promoteJob.ts

@@ -1,11 +1,14 @@
-import { RequestHandler } from 'express'
+import { Request, RequestHandler, Response } from 'express-serve-static-core'
 import { BullBoardQueues } from '../@types/app'
 
-export const promoteJob: RequestHandler = async (req, res) => {
+export const promoteJob: RequestHandler = async (
+  req: Request,
+  res: Response,
+) => {
   try {
-    const {
-      bullBoardQueues,
-    }: { bullBoardQueues: BullBoardQueues } = req.app.locals
+    const { bullBoardQueues } = req.app.locals as {
+      bullBoardQueues: BullBoardQueues
+    }
     const { queueName, id } = req.params
     const { queue } = bullBoardQueues[queueName]
 

src/routes/queues.ts

@@ -1,11 +1,11 @@
 import { Job } from 'bull'
 import { Job as JobMq } from 'bullmq'
-import { Request, RequestHandler } from 'express'
+import { Request, RequestHandler, Response } from 'express-serve-static-core'
 import { parse as parseRedisInfo } from 'redis-info'
 
 import * as api from '../@types/api'
-import { JobStatus } from '../@types/app'
 import * as app from '../@types/app'
+import { JobStatus } from '../@types/app'
 import { Status } from '../ui/components/constants'
 
 type MetricName = keyof app.ValidMetrics
@@ -33,7 +33,6 @@ const getStats = async ({
     return acc
   }, {} as Record<MetricName, string>)
 
-  // eslint-disable-next-line @typescript-eslint/camelcase
   validMetrics.total_system_memory =
     redisInfo.total_system_memory || redisInfo.maxmemory
 
@@ -85,7 +84,8 @@ const getDataForQueues = async (
   const queues: app.AppQueue[] = await Promise.all(
     pairs.map(async ([name, { queue }]) => {
       const counts = await queue.getJobCounts(...statuses)
-      const status = query[name] === 'latest' ? statuses : query[name]
+      const status =
+        query[name] === 'latest' ? statuses : (query[name] as JobStatus[])
       const jobs = await queue.getJobs(status, 0, 10)
 
       return {
@@ -104,7 +104,10 @@ const getDataForQueues = async (
   }
 }
 
-export const queuesHandler: RequestHandler = async (req, res) => {
+export const queuesHandler: RequestHandler = async (
+  req: Request,
+  res: Response,
+) => {
   const { bullBoardQueues } = req.app.locals
 
   res.json(await getDataForQueues(bullBoardQueues, req))

src/routes/retryAll.ts

@@ -1,21 +1,21 @@
-import { RequestHandler } from 'express'
+import { Request, RequestHandler, Response } from 'express-serve-static-core'
 
 import { BullBoardQueues } from '../@types/app'
 
-export const retryAll: RequestHandler = async (req, res) => {
+export const retryAll: RequestHandler = async (req: Request, res: Response) => {
   try {
     const { queueName } = req.params
-    const {
-      bullBoardQueues,
-    }: { bullBoardQueues: BullBoardQueues } = req.app.locals
+    const { bullBoardQueues } = req.app.locals as {
+      bullBoardQueues: BullBoardQueues
+    }
 
     const { queue } = bullBoardQueues[queueName]
     if (!queue) {
       return res.status(404).send({ error: 'queue not found' })
     }
 
     const jobs = await queue.getJobs(['failed'])
-    await Promise.all(jobs.map(job => job.retry()))
+    await Promise.all(jobs.map((job) => job.retry()))
 
     return res.sendStatus(200)
   } catch (e) {

src/routes/retryJob.ts

@@ -1,11 +1,11 @@
-import { RequestHandler } from 'express'
+import { Request, RequestHandler, Response } from 'express-serve-static-core'
 import { BullBoardQueues } from '../@types/app'
 
-export const retryJob: RequestHandler = async (req, res) => {
+export const retryJob: RequestHandler = async (req: Request, res: Response) => {
   try {
-    const {
-      bullBoardQueues,
-    }: { bullBoardQueues: BullBoardQueues } = req.app.locals
+    const { bullBoardQueues } = req.app.locals as {
+      bullBoardQueues: BullBoardQueues
+    }
     const { queueName, id } = req.params
     const { queue } = bullBoardQueues[queueName]