Redesign the board

example.js

@@ -1,5 +1,5 @@
 const { setQueues, router } = require('./dist/index')
-const { Queue: QueueMQ, Worker } = require('bullmq')
+const { Queue: QueueMQ, Worker, QueueScheduler } = require('bullmq')
 const Queue3 = require('bull')
 const app = require('express')()
 
@@ -15,7 +15,7 @@ const redisOptions = {
 const createQueue3 = name => new Queue3(name, { redis: redisOptions })
 const createQueueMQ = name => new QueueMQ(name, { connection: redisOptions })
 
-const run = () => {
+const run = async () => {
   const exampleBullName = 'ExampleBull'
   const exampleBull = createQueue3(exampleBullName)
   const exampleBullMqName = 'ExampleBullMQ'
@@ -31,6 +31,11 @@ const run = () => {
     }
   })
 
+  const queueScheduler = new QueueScheduler(exampleBullMqName, {
+    connection: redisOptions,
+  })
+  await queueScheduler.waitUntilReady()
+
   new Worker(exampleBullMqName, async job => {
     for (let i = 0; i <= 100; i++) {
       await sleep(Math.random())

package.json

@@ -45,20 +45,25 @@
     "@types/bull": "^3.12.1",
     "@types/express": "^4.17.3",
     "@types/react-dom": "^16.9.5",
+    "classnames": "^2.2.6",
     "date-fns": "2.10.0",
     "ejs": "3.0.1",
     "express": "4.17.1",
+    "highlight.js": "^9.18.3",
     "pretty-bytes": "5.3.0",
     "react": "16.13.0",
     "react-dom": "16.13.0",
     "react-highlight": "0.12.0",
+    "react-router-dom": "^5.2.0",
     "redis-info": "^3.0.7"
   },
   "devDependencies": {
+    "@types/classnames": "^2.2.10",
     "@types/jest": "^24.9.0",
     "@types/node": "^13.1.8",
     "@types/pretty-bytes": "^5.2.0",
     "@types/react-highlight": "^0.12.2",
+    "@types/react-router-dom": "^5.1.5",
     "@types/redis-info": "^3.0.0",
     "@types/supertest": "^2.0.8",
     "@typescript-eslint/eslint-plugin": "^2.17.0",
@@ -67,7 +72,7 @@
     "babel-preset-react-app": "^7.0.2",
     "bull": "^3.13.0",
     "bullmq": "^1.8.2",
-    "css-loader": "^3.4.2",
+    "css-loader": "^4.2.2",
     "dockest": "2.0.0-beta.2",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.0",
@@ -79,12 +84,14 @@
     "jest": "^24.9.0",
     "mini-css-extract-plugin": "^0.11.0",
     "nodemon": "^2.0.2",
+    "postcss-loader": "^4.0.1",
+    "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.1.3",
+    "style-loader": "^1.2.1",
     "supertest": "^4.0.2",
     "ts-jest": "^24.3.0",
     "ts-loader": "^6.2.1",

src/@types/app.ts

@@ -1,6 +1,7 @@
+import { JobOptions, Queue } from 'bull'
+import { Job as JobMq, JobsOptions, Queue as QueueMq } from 'bullmq'
+import React from 'react'
 import { Status } from '../ui/components/constants'
-import { Queue, JobOptions } from 'bull'
-import { Queue as QueueMq, JobsOptions, Job as JobMq } from 'bullmq'
 
 export interface BullBoardQueue {
   queue: Queue | QueueMq
@@ -39,3 +40,16 @@ export interface AppQueue {
   counts: Record<Status, number>
   jobs: AppJob[]
 }
+
+export type SelectedStatuses = Record<AppQueue['name'], Status>
+
+export interface QueueActions {
+  promoteJob: (queueName: string) => (job: AppJob) => () => Promise<void>
+  retryJob: (queueName: string) => (job: AppJob) => () => Promise<void>
+  cleanJob: (queueName: string) => (job: AppJob) => () => Promise<void>
+  retryAll: (queueName: string) => () => Promise<void>
+  cleanAllDelayed: (queueName: string) => () => Promise<void>
+  cleanAllFailed: (queueName: string) => () => Promise<void>
+  cleanAllCompleted: (queueName: string) => () => Promise<void>
+  setSelectedStatuses: React.Dispatch<React.SetStateAction<SelectedStatuses>>
+}

src/@types/global.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const resource: Record<string, string>
+  export = resource
+}

src/@types/utils.d.ts

@@ -0,0 +1 @@
+export type KeyOf<T> = Array<keyof T>

src/index.spec.ts

@@ -30,7 +30,7 @@ describe('happy', () => {
     setQueues([paintQueue])
 
     await request(router)
-      .get('/queues')
+      .get('/api/queues')
       .expect('Content-Type', /json/)
       .expect(200)
       .then(res => {
@@ -99,7 +99,7 @@ describe('happy', () => {
     replaceQueues([codeQueue])
 
     await request(router)
-      .get('/queues')
+      .get('/api/queues')
       .expect('Content-Type', /json/)
       .expect(200)
       .then(res => {
@@ -155,7 +155,7 @@ describe('happy', () => {
     replaceQueues([codeQueue])
 
     await request(router)
-      .get('/queues')
+      .get('/api/queues')
       .expect('Content-Type', /json/)
       .expect(200)
       .then(res => {

src/index.ts

@@ -28,13 +28,13 @@ router.set('views', path.resolve(__dirname, '../dist/ui'))
 
 router.use('/static', express.static(path.resolve(__dirname, '../static')))
 
-router.get('/', entryPoint)
-router.get('/queues', wrapAsync(queuesHandler))
-router.put('/queues/:queueName/retry', wrapAsync(retryAll))
-router.put('/queues/:queueName/:id/retry', wrapAsync(retryJob))
-router.put('/queues/:queueName/:id/clean', wrapAsync(cleanJob))
-router.put('/queues/:queueName/:id/promote', wrapAsync(promoteJob))
-router.put('/queues/:queueName/clean/:queueStatus', wrapAsync(cleanAll))
+router.get(['/', '/queue/:queueName'], entryPoint)
+router.get('/api/queues', wrapAsync(queuesHandler))
+router.put('/api/queues/:queueName/retry', wrapAsync(retryAll))
+router.put('/api/queues/:queueName/:id/retry', wrapAsync(retryJob))
+router.put('/api/queues/:queueName/:id/clean', wrapAsync(cleanJob))
+router.put('/api/queues/:queueName/:id/promote', wrapAsync(promoteJob))
+router.put('/api/queues/:queueName/clean/:queueStatus', wrapAsync(cleanAll))
 
 type Q = Queue | QueueMq
 

src/ui/components/App.tsx

@@ -1,56 +1,51 @@
 import React from 'react'
+import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'
+import { Header } from './Header/Header'
+import { useStore } from '../hooks/useStore'
+import { Menu } from './Menu/Menu'
 
-import { Queue as QueueElement } from './Queue'
-import { RedisStats } from './RedisStats'
-import { Header } from './Header'
-import { useStore } from './hooks/useStore'
+import { QueuePage } from './QueuePage/QueuePage'
+import { RedisStats } from './RedisStats/RedisStats'
 
 export const App = ({ basePath }: { basePath: string }) => {
-  const {
-    state,
-    selectedStatuses,
-    setSelectedStatuses,
-    promoteJob,
-    retryJob,
-    retryAll,
-    cleanJob,
-    cleanAllDelayed,
-    cleanAllFailed,
-    cleanAllCompleted,
-  } = useStore(basePath)
+  const { state, actions, selectedStatuses } = useStore(basePath)
 
   return (
-    <>
-      <Header />
+    <BrowserRouter basename={basePath}>
+      <Header>
+        {state.data?.stats && <RedisStats stats={state.data?.stats} />}
+      </Header>
       <main>
-        {state.loading ? (
-          'Loading...'
-        ) : (
-          <>
-            {state.data?.stats ? (
-              <RedisStats stats={state.data.stats} />
-            ) : (
-              <>No stats to display </>
-            )}
+        <div>
+          {state.loading ? (
+            'Loading...'
+          ) : (
+            <Switch>
+              <Route
+                path="/queue/:name"
+                render={({ match: { params } }) => {
+                  const queue = state.data?.queues.find(
+                    q => q.name === params.name,
+                  )
 
-            {state.data?.queues.map(queue => (
-              <QueueElement
-                queue={queue}
-                key={queue.name}
-                selectedStatus={selectedStatuses[queue.name]}
-                selectStatus={setSelectedStatuses}
-                promoteJob={promoteJob(queue.name)}
-                retryJob={retryJob(queue.name)}
-                cleanJob={cleanJob(queue.name)}
-                retryAll={retryAll(queue.name)}
-                cleanAllDelayed={cleanAllDelayed(queue.name)}
-                cleanAllFailed={cleanAllFailed(queue.name)}
-                cleanAllCompleted={cleanAllCompleted(queue.name)}
+                  return (
+                    <QueuePage
+                      queue={queue}
+                      actions={actions}
+                      selectedStatus={selectedStatuses}
+                    />
+                  )
+                }}
               />
-            ))}
-          </>
-        )}
+
+              <Route exact path="/">
+                <Redirect to={`/queue/${state.data?.queues[0].name}`} />
+              </Route>
+            </Switch>
+          )}
+        </div>
       </main>
-    </>
+      <Menu queues={state.data?.queues.map(q => q.name)} />
+    </BrowserRouter>
   )
 }

src/ui/components/Header/Header.module.css

@@ -0,0 +1,34 @@
+.header {
+  z-index: 99;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: white;
+  transition: box-shadow 0.5s ease-in-out;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--header-height);
+  box-sizing: border-box;
+  border-bottom: 1px solid #e6e7e8;
+}
+
+.header > .logo {
+  width: var(--menu-width);
+  white-space: nowrap;
+  text-align: center;
+  font-size: 1.728rem;
+  height: inherit;
+  line-height: var(--header-height);
+  background-color: hsl(217, 22%, 24%);
+  color: #f5f8fa;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
+  z-index: 2;
+  box-sizing: content-box;
+}
+
+.header + main {
+  padding-top: var(--header-height);
+}

src/ui/components/Header/Header.tsx

@@ -0,0 +1,11 @@
+import React, { PropsWithChildren } from 'react'
+import s from './Header.module.css'
+
+export const Header = ({ children }: PropsWithChildren<{}>) => {
+  return (
+    <header className={s.header}>
+      <div className={s.logo}>🎯 Bull Dashboard</div>
+      {children}
+    </header>
+  )
+}

src/ui/components/Highlight/Highlight.tsx

@@ -0,0 +1,54 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore
+import hljs from 'highlight.js/lib/highlight'
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore
+import json from 'highlight.js/lib/languages/json'
+import React from 'react'
+import { stacktraceJS } from './languages/stacktrace'
+
+hljs.registerLanguage('json', json)
+hljs.registerLanguage('stacktrace', stacktraceJS)
+
+interface HighlightProps {
+  language: 'json' | 'stacktrace'
+  children: string | string[] | null
+}
+
+export class Highlight extends React.Component<HighlightProps> {
+  private codeRef = React.createRef<HTMLPreElement>()
+
+  public shouldComponentUpdate(nextProps: Readonly<HighlightProps>) {
+    return (
+      nextProps.language !== this.props.language ||
+      (Array.isArray(this.props.children)
+        ? this.props.children.some(
+            (item: any) =>
+              !([] as any).concat(nextProps.children).includes(item),
+          )
+        : nextProps.children !== this.props.children)
+    )
+  }
+
+  public componentDidMount() {
+    this.highlightCode()
+  }
+
+  public componentDidUpdate() {
+    this.highlightCode()
+  }
+
+  public render() {
+    const { language, children } = this.props
+    return (
+      <pre ref={this.codeRef}>
+        <code className={language}>{children}</code>
+      </pre>
+    )
+  }
+
+  private highlightCode() {
+    const node = this.codeRef.current?.querySelector('code')
+    hljs.highlightBlock(node)
+  }
+}