feat: add new statuses to overview page

felixmosh · Oct 17, 2023 · 6a4b2ce · 6a4b2ce
1 parent 816fe76
commit 6a4b2ce
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 48 deletions.
diff --git a/example.ts b/example.ts
@@ -65,6 +65,10 @@ const run = async () => {
       opts.delay = +opts.delay * 1000; // delay must be a number
     }
 
+    if (opts.priority) {
+      opts.priority = +opts.priority;
+    }
+
     exampleBull.add({ title: req.query.title }, opts);
     exampleBullMq.add('Add', { title: req.query.title }, opts);
 

diff --git a/packages/ui/src/components/JobCard/JobCard.tsx b/packages/ui/src/components/JobCard/JobCard.tsx
@@ -1,4 +1,4 @@
-import { STATUSES } from '@bull-board/api/dist/src/constants/statuses';
+import { STATUSES } from '@bull-board/api/src/constants/statuses';
 import { AppJob, Status } from '@bull-board/api/typings/app';
 import React from 'react';
 import { Link } from 'react-router-dom';

diff --git a/packages/ui/src/components/QueueCard/QueueStats/QueueStats.module.css b/packages/ui/src/components/QueueCard/QueueStats/QueueStats.module.css
@@ -31,6 +31,14 @@
   background-color: var(--waiting);
 }
 
+.waitingChildren {
+  background-color: var(--waitingChildren);
+}
+
+.prioritized {
+  background-color: var(--prioritized);
+}
+
 .completed {
   background-color: var(--completed);
 }
@@ -46,3 +54,7 @@
 .delayed {
   background-color: var(--delayed);
 }
+
+.paused {
+  background-color: var(--paused);
+}
diff --git a/packages/ui/src/components/QueueCard/QueueStats/QueueStats.tsx b/packages/ui/src/components/QueueCard/QueueStats/QueueStats.tsx
@@ -1,19 +1,19 @@
 import { AppQueue } from '@bull-board/api/typings/app';
 import React from 'react';
-import { queueStatsStatusList } from '../../../constants/queue-stats-status';
+import { toCamelCase } from '../../../utils/toCamelCase';
 import s from './QueueStats.module.css';
 
 interface IQueueStatsProps {
   queue: AppQueue;
 }
 
 export const QueueStats = ({ queue }: IQueueStatsProps) => {
-  const total = queueStatsStatusList.reduce((result, status) => result + queue.counts[status], 0);
+  const total = queue.statuses.reduce((result, status) => result + (queue.counts[status] || 0), 0);
 
   return (
     <div className={s.stats}>
       <div className={s.progressBar}>
-        {queueStatsStatusList
+        {queue.statuses
           .filter((status) => queue.counts[status] > 0)
           .map((status) => {
             const value = queue.counts[status];
@@ -26,7 +26,7 @@ export const QueueStats = ({ queue }: IQueueStatsProps) => {
                 aria-valuenow={value}
                 aria-valuemin={0}
                 aria-valuemax={total}
-                className={s[status]}
+                className={s[toCamelCase(status)]}
               >
                 {value}
               </div>

diff --git a/packages/ui/src/components/StatusLegend/StatusLegend.module.css b/packages/ui/src/components/StatusLegend/StatusLegend.module.css
@@ -24,6 +24,14 @@
   --item-bg: var(--waiting);
 }
 
+.waitingChildren {
+  --item-bg: var(--waitingChildren);
+}
+
+.prioritized {
+  --item-bg: var(--prioritized);
+}
+
 .active {
   --item-bg: var(--active);
 }
@@ -39,3 +47,7 @@
 .delayed {
   --item-bg: var(--delayed);
 }
+
+.paused {
+  --item-bg: var(--paused);
+}
diff --git a/packages/ui/src/components/StatusLegend/StatusLegend.tsx b/packages/ui/src/components/StatusLegend/StatusLegend.tsx
@@ -1,11 +1,12 @@
-import { queueStatsStatusList } from '../../constants/queue-stats-status';
 import React from 'react';
+import { queueStatsStatusList } from '../../constants/queue-stats-status';
+import { toCamelCase } from '../../utils/toCamelCase';
 import s from './StatusLegend.module.css';
 
 export const StatusLegend = () => (
   <ul className={s.legend}>
     {queueStatsStatusList.map((status) => (
-      <li key={status} className={s[status]}>
+      <li key={status} className={s[toCamelCase(status)]}>
         {status}
       </li>
     ))}

diff --git a/packages/ui/src/components/StatusMenu/StatusMenu.module.css b/packages/ui/src/components/StatusMenu/StatusMenu.module.css
@@ -1,59 +1,60 @@
 .statusMenu {
-    display: flex;
-    margin-bottom: 2rem;
-    border-bottom: 2px solid #e0e7eb;
+  display: flex;
+  margin-bottom: 2rem;
+  border-bottom: 2px solid #e0e7eb;
 }
 
 .statusMenu > a {
-    text-decoration: none;
-    border-bottom: 2px solid transparent;
-    margin: 0 0 -2px;
-    padding: 0.5em 1em;
-    color: rgba(0, 0, 0, 0.87);
-    transition: border-bottom-color 200ms ease-in-out, color 0.1s ease;
-    display: flex;
-    align-items: center;
+  text-decoration: none;
+  border-bottom: 2px solid transparent;
+  margin: 0 0 -2px;
+  padding: 0.5em 1em;
+  color: rgba(0, 0, 0, 0.87);
+  transition: border-bottom-color 200ms ease-in-out, color 0.1s ease;
+  display: flex;
+  align-items: center;
 }
 
 .statusMenu > a span {
-    flex: 1;
+  flex: 1;
+  white-space: nowrap;
 }
 
 .statusMenu > a span:before {
-    display: block;
-    content: attr(title);
-    font-weight: 600;
-    height: 0;
-    overflow: hidden;
-    visibility: hidden;
+  display: block;
+  content: attr(title);
+  font-weight: 600;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
 }
 
 .statusMenu > a:hover,
 .statusMenu > a:active {
-    border-color: hsl(210, 4%, 50%);
+  border-color: hsl(210, 4%, 50%);
 }
 
 .statusMenu > a.active {
-    border-color: #1b1c1d;
-    color: rgba(0, 0, 0, 0.95);
-    font-weight: 500;
+  border-color: #1b1c1d;
+  color: rgba(0, 0, 0, 0.95);
+  font-weight: 500;
 }
 
 .statusMenu > div {
-    flex: 1;
-    text-align: right;
+  flex: 1;
+  text-align: right;
 }
 
 .badge {
-    display: inline-block;
-    background-color: #a0aec0;
-    border-color: #a0aec0;
-    color: #fff;
-    font-size: 0.833rem;
-    padding: 0.25em 0.75em;
-    line-height: 1em;
-    text-align: center;
-    border-radius: 500rem;
-    margin: -0.5em 0 -0.5em 0.5rem;
-    font-weight: 400;
+  display: inline-block;
+  background-color: #a0aec0;
+  border-color: #a0aec0;
+  color: #fff;
+  font-size: 0.833rem;
+  padding: 0.25em 0.75em;
+  line-height: 1em;
+  text-align: center;
+  border-radius: 500rem;
+  margin: -0.5em 0 -0.5em 0.5rem;
+  font-weight: 400;
 }
diff --git a/packages/ui/src/constants/queue-stats-status.ts b/packages/ui/src/constants/queue-stats-status.ts
@@ -1,9 +1,12 @@
-import { STATUSES } from '@bull-board/api/dist/src/constants/statuses';
+import { STATUSES } from '@bull-board/api/src/constants/statuses';
 
 export const queueStatsStatusList = [
   STATUSES.active,
   STATUSES.waiting,
+  STATUSES.waitingChildren,
+  STATUSES.prioritized,
   STATUSES.completed,
   STATUSES.failed,
   STATUSES.delayed,
+  STATUSES.paused,
 ];
diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
@@ -2,11 +2,14 @@
   --menu-width: 260px;
   --header-height: 80px;
 
-  --failed: #f56565;
-  --completed: #48bb78;
+  --failed: #f87171;
+  --completed: #22c55e;
   --waiting: #e3a008;
-  --active: #1c64f2;
-  --delayed: #9061f9;
+  --waitingChildren: #fb923c;
+  --prioritized: #d946ef;
+  --active: #3b82f6;
+  --delayed: #8b5cf6;
+  --paused: #a8a29e;
 }
 
 body {

diff --git a/packages/ui/src/pages/QueuePage/QueuePage.tsx b/packages/ui/src/pages/QueuePage/QueuePage.tsx
@@ -1,4 +1,4 @@
-import { STATUSES } from '@bull-board/api/dist/src/constants/statuses';
+import { STATUSES } from '@bull-board/api/src/constants/statuses';
 import { JobRetryStatus } from '@bull-board/api/typings/app';
 import React from 'react';
 import { JobCard } from '../../components/JobCard/JobCard';

diff --git a/packages/ui/src/utils/toCamelCase.ts b/packages/ui/src/utils/toCamelCase.ts
@@ -0,0 +1,6 @@
+export function toCamelCase(val: string): string {
+  return val
+    .split('-')
+    .map((part, idx) => (idx > 0 ? `${part[0].toUpperCase()}${part.slice(1)}` : part))
+    .join('');
+}