From 6a4b2cecb299c70ccdcb2e25c4db299397dc4078 Mon Sep 17 00:00:00 2001
From: Felix Mosheev <9304194+felixmosh@users.noreply.github.com>
Date: Tue, 17 Oct 2023 12:39:42 +0300
Subject: [PATCH] feat: add new statuses to overview page

---
 example.ts                                    |  4 ++
 .../ui/src/components/JobCard/JobCard.tsx     |  2 +-
 .../QueueStats/QueueStats.module.css          | 12 ++++
 .../QueueCard/QueueStats/QueueStats.tsx       |  8 +--
 .../StatusLegend/StatusLegend.module.css      | 12 ++++
 .../components/StatusLegend/StatusLegend.tsx  |  5 +-
 .../StatusMenu/StatusMenu.module.css          | 71 ++++++++++---------
 .../ui/src/constants/queue-stats-status.ts    |  5 +-
 packages/ui/src/index.css                     | 11 +--
 packages/ui/src/pages/QueuePage/QueuePage.tsx |  2 +-
 packages/ui/src/utils/toCamelCase.ts          |  6 ++
 11 files changed, 90 insertions(+), 48 deletions(-)
 create mode 100644 packages/ui/src/utils/toCamelCase.ts

diff --git a/example.ts b/example.ts
index eb4ff5f1..093dc1b5 100644
--- 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
index 440f80b3..cb60de67 100644
--- 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
index bc80b71e..670f662d 100644
--- 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
index 65d93118..5058132d 100644
--- a/packages/ui/src/components/QueueCard/QueueStats/QueueStats.tsx
+++ b/packages/ui/src/components/QueueCard/QueueStats/QueueStats.tsx
@@ -1,6 +1,6 @@
 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 {
@@ -8,12 +8,12 @@ interface IQueueStatsProps {
 }
 
 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
index 99ef57d0..b87af3bd 100644
--- 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
index 464528ee..b77caca8 100644
--- 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
index 24b90447..c86fe82f 100644
--- 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
index 9bba2515..4ad73b35 100644
--- 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
index c1421405..039dfcc5 100644
--- 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
index bf56fd54..0fce1375 100644
--- 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
new file mode 100644
index 00000000..ded49f4a
--- /dev/null
+++ 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('');
+}