[WIP] introducing typescript, still unstable

.eslintrc.js

@@ -0,0 +1,43 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  root: true,
+  extends: [
+    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    'prettier',
+    'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+  ],
+  plugins: ['@typescript-eslint', 'no-only-tests'],
+  parserOptions: {
+    ecmaVersion: 2019, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+    ecmaFeatures: {
+      modules: true,
+    },
+  },
+  env: {
+    node: true,
+    es6: true,
+    jest: true,
+    browser: true,
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  rules: {
+    // Routes
+    'no-console': 'warn',
+    'no-only-tests/no-only-tests': 'error',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-empty-interface': 'off',
+
+    // UI
+    'prettier/prettier': 'error',
+    'react/prop-types': 'off',
+    'react/display-name': 'off',
+  },
+}

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
 static/
+dist/
 yarn-error.log
 *.rdb

package.json

@@ -6,7 +6,7 @@
     "redis",
     "queue"
   ],
-  "main": "index.js",
+  "main": "dist/index.js",
   "private": false,
   "version": "0.6.0",
   "license": "MIT",
@@ -18,10 +18,13 @@
     "url": "https://github.com/vcapretz/bull-board/issues"
   },
   "scripts": {
-    "prepublishOnly": "rm -rf ./build && yarn build",
+    "prepublishOnly": "yarn build:clean && yarn build",
     "prepare": "yarn build",
-    "build": "NODE_ENV=production webpack",
+    "build": "yarn build:clean && yarn build:ui && yarn build:routes",
+    "build:ui": "NODE_ENV=production webpack",
+    "build:routes": "yarn tsc",
     "build:watch": "NODE_ENV=production webpack --watch",
+    "build:clean": "rm -rf ./static ./dist",
     "lint": "prettier --check \"./**/*.js\" && eslint --ext .js .",
     "start": "node example.js",
     "start:example": "yarn build && yarn start"
@@ -36,16 +39,29 @@
     "react-highlight": "0.12.0"
   },
   "devDependencies": {
+    "@types/bull": "^3.12.0",
+    "@types/express": "^4.17.2",
+    "@types/jest": "^24.9.0",
+    "@types/node": "^13.1.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.12.1",
     "bullmq": "^1.6.6",
     "css-loader": "^2.1.1",
     "eslint": "^6.8.0",
-    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-config-prettier": "^6.9.0",
+    "eslint-plugin-no-only-tests": "^2.4.0",
+    "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.18.0",
+    "jest": "^24.9.0",
     "prettier": "^1.19.1",
+    "prettier-eslint": "^9.0.1",
     "react-dev-utils": "^8.0.0",
     "style-loader": "^0.23.1",
+    "ts-jest": "^24.3.0",
+    "typescript": "^3.7.5",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10",
     "webpack-manifest-plugin": "^2.2.0"

src/index.ts

@@ -0,0 +1,56 @@
+import express, { RequestHandler } from 'express'
+import path from 'path'
+import {} from 'bull'
+
+import { queues as queuesRoute } from './routes/queues'
+import { retryAll } from './routes/retryAll'
+import { retryJob } from './routes/retryJob'
+import { cleanAll } from './routes/cleanAll'
+import { entryPoint } from './routes/index'
+
+const app = express()
+const queues = {}
+
+const wrapAsync = (fn: RequestHandler): RequestHandler => async (
+  req,
+  res,
+  next,
+) => Promise.resolve(fn(req, res, next)).catch(next)
+
+const UI = () => {
+  app.locals.queues = queues
+
+  app.set('view engine', 'ejs')
+  app.set('views', `${__dirname}/ui`)
+
+  app.use('/static', express.static(path.join(__dirname, './static')))
+
+  app.get('/', entryPoint)
+  app.get('/queues', wrapAsync(queuesRoute))
+  app.put('/queues/:queueName/retry', wrapAsync(retryAll))
+  app.put('/queues/:queueName/:id/retry', wrapAsync(retryJob))
+  app.put('/queues/:queueName/clean/:queueStatus', wrapAsync(cleanAll))
+
+  return app
+}
+
+const getQueueVersion = queue => {
+  if (typeof queue.drain === 'function') {
+    return 4
+  }
+
+  if (typeof queue.pauseWorker === 'function') {
+    return 4
+  }
+
+  return 3
+}
+
+export default {
+  UI: UI(),
+  setQueues(bullQueues) {
+    bullQueues.forEach(item => {
+      queues[item.name] = { ...item, version: getQueueVersion(item) }
+    })
+  },
+}

routes/cleanAll.js → src/routes/cleanAll.ts

@@ -1,4 +1,6 @@
-module.exports = async function handler(req, res) {
+import { RequestHandler } from 'express'
+
+export const cleanAll: RequestHandler = async (req, res) => {
   try {
     const { queueName, queueStatus } = req.params
     const { queues } = req.app.locals

src/routes/index.ts

@@ -0,0 +1,7 @@
+import { RequestHandler } from 'express'
+
+export const entryPoint: RequestHandler = (req, res) => {
+  const basePath = req.proxyUrl || req.baseUrl
+
+  res.render('index', { basePath })
+}

routes/getDataForQueues.js → src/routes/queues.ts

@@ -1,3 +1,5 @@
+import { RequestHandler } from 'express'
+
 const metrics = [
   'redis_version',
   'used_memory',
@@ -6,7 +8,7 @@ const metrics = [
   'blocked_clients',
 ]
 
-async function getStats(queue) {
+const getStats = async queue => {
   const client = await queue.client
   await client.info()
 
@@ -26,7 +28,7 @@ async function getStats(queue) {
   return validMetrics
 }
 
-function formatJob(job) {
+const formatJob = job => {
   return {
     id: job.id,
     timestamp: job.timestamp,
@@ -43,12 +45,10 @@ function formatJob(job) {
   }
 }
 
-const formatJobMQ = job => {
-  return {
-    ...formatJob(job),
-    progress: job.progress,
-  }
-}
+const formatJobMQ = job => ({
+  ...formatJob(job),
+  progress: job.progress,
+})
 
 const statuses = [
   'active',
@@ -59,7 +59,7 @@ const statuses = [
   'paused',
 ]
 
-module.exports = async function getDataForQueues({ queues, query = {} }) {
+const getDataForQueues = async ({ queues, query = {} }) => {
   const pairs = Object.entries(queues)
 
   if (pairs.length == 0) {
@@ -88,3 +88,14 @@ module.exports = async function getDataForQueues({ queues, query = {} }) {
 
   return { stats, queues: counts }
 }
+
+export const queues: RequestHandler = async (req, res) => {
+  const { queues } = req.app.locals
+
+  res.json(
+    await getDataForQueues({
+      queues,
+      query: req.query,
+    }),
+  )
+}

routes/retryAll.js → src/routes/retryAll.ts

@@ -1,4 +1,6 @@
-module.exports = async function handler(req, res) {
+import { RequestHandler } from 'express'
+
+export const retryAll: RequestHandler = async (req, res) => {
   try {
     const { queueName } = req.params
     const { queues } = req.app.locals

routes/retryJob.js → src/routes/retryJob.ts

@@ -1,4 +1,6 @@
-module.exports = async function retryJob(req, res) {
+import { RequestHandler } from 'express'
+
+export const retryJob: RequestHandler = async (req, res) => {
   try {
     const { queues } = req.app.locals
     const { queueName, id } = req.params

tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "esModuleInterop": true,
+    "lib": ["es2019"],
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "noImplicitAny": true,
+    "sourceMap": true,
+    "strict": true,
+    "target": "es2019",
+    "noUnusedParameters": true,
+    "noUnusedLocals": true,
+    "resolveJsonModule": true,
+    "declaration": true
+  },
+  "include": ["./src"],
+  "exclude": ["./src/ui"]
+}

webpack.config.js

@@ -1,11 +1,13 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
 const path = require('path')
 const webpack = require('webpack')
 
 module.exports = {
   mode: 'production',
   bail: true,
   devtool: false,
-  entry: ['./ui/index.js'],
+  entry: ['./src/ui/index.js'],
   output: {
     path: path.resolve(__dirname, './static'),
     filename: 'bundle.js',