feat: add queue description option and show the queue name on the board.

felixmosh · Jul 28, 2022 · 91f03fb · 91f03fb
1 parent 393b99e
commit 91f03fb
Show file tree

Hide file tree

Showing 11 changed files with 135 additions and 65 deletions.
diff --git a/packages/api/src/handlers/queues.ts b/packages/api/src/handlers/queues.ts
@@ -109,8 +109,11 @@ async function getAppQueues(
         ? await queue.getJobs(status, pagination.range.start, pagination.range.end)
         : [];
 
+      const description = queue.getDescription() || undefined;
+
       return {
         name: queueName,
+        description,
         counts: counts as Record<Status, number>,
         jobs: jobs.filter(Boolean).map((job) => formatJob(job, queue)),
         pagination,

diff --git a/packages/api/src/queueAdapters/base.ts b/packages/api/src/queueAdapters/base.ts
@@ -11,12 +11,18 @@ export abstract class BaseAdapter {
   public readonly readOnlyMode: boolean;
   public readonly allowRetries: boolean;
   public readonly prefix: string;
+  public readonly description: string;
   private formatters = new Map<FormatterField, (data: any) => any>();
 
   protected constructor(options: Partial<QueueAdapterOptions> = {}) {
     this.readOnlyMode = options.readOnlyMode === true;
     this.allowRetries = this.readOnlyMode ? false : options.allowRetries !== false;
     this.prefix = options.prefix || '';
+    this.description = options.description || '';
+  }
+
+  public getDescription(): string {
+    return this.description;
   }
 
   public setFormatter<T extends FormatterField>(

diff --git a/packages/api/typings/app.ts b/packages/api/typings/app.ts
@@ -13,6 +13,7 @@ export interface QueueAdapterOptions {
   readOnlyMode: boolean;
   allowRetries: boolean;
   prefix: string;
+  description: string;
 }
 
 export type BullBoardQueues = Map<string, BaseAdapter>;
@@ -77,6 +78,7 @@ export interface AppJob {
 
 export interface AppQueue {
   name: string;
+  description?: string;
   counts: Record<Status, number>;
   jobs: AppJob[];
   pagination: Pagination;

diff --git a/packages/ui/src/components/App.tsx b/packages/ui/src/components/App.tsx
@@ -1,22 +1,28 @@
 import React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
+import { useActiveQueue } from '../hooks/useActiveQueue';
 import { useScrollTopOnNav } from '../hooks/useScrollTopOnNav';
 import { useStore } from '../hooks/useStore';
 import { Api } from '../services/Api';
+import { QueueTitle } from './QueueTitle/QueueTitle';
+import { ConfirmModal } from './ConfirmModal/ConfirmModal';
 import { Header } from './Header/Header';
 import { Menu } from './Menu/Menu';
 import { QueuePage } from './QueuePage/QueuePage';
 import { RedisStats } from './RedisStats/RedisStats';
-import { ConfirmModal } from './ConfirmModal/ConfirmModal';
 
 export const App = ({ api }: { api: Api }) => {
   useScrollTopOnNav();
   const { state, actions, selectedStatuses, confirmProps } = useStore(api);
+  const activeQueue = useActiveQueue(state.data);
 
   return (
     <>
-      <Header>{state.data?.stats && <RedisStats stats={state.data?.stats} />}</Header>
+      <Header>
+        {!!activeQueue && <QueueTitle queue={activeQueue} />}
+        {state.data?.stats && <RedisStats stats={state.data?.stats} />}
+      </Header>
       <main>
         <div>
           {state.loading ? (
@@ -26,18 +32,13 @@ export const App = ({ api }: { api: Api }) => {
               <Switch>
                 <Route
                   path="/queue/:name"
-                  render={({ match: { params } }) => {
-                    const currentQueueName = decodeURIComponent(params.name);
-                    const queue = state.data?.queues?.find((q) => q.name === currentQueueName);
-
-                    return (
-                      <QueuePage
-                        queue={queue || undefined}
-                        actions={actions}
-                        selectedStatus={selectedStatuses}
-                      />
-                    );
-                  }}
+                  render={() => (
+                    <QueuePage
+                      queue={activeQueue || undefined}
+                      actions={actions}
+                      selectedStatus={selectedStatuses}
+                    />
+                  )}
                 />
 
                 <Route path="/" exact>

diff --git a/packages/ui/src/components/Header/Header.module.css b/packages/ui/src/components/Header/Header.module.css
@@ -1,42 +1,52 @@
 .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;
+  z-index: 99;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: white;
+  transition: box-shadow 0.5s ease-in-out;
+  display: flex;
+  height: var(--header-height);
+  box-sizing: border-box;
+  border-bottom: 1px solid #e6e7e8;
 }
 
 .header > .logo {
-    width: var(--menu-width);
-    flex-basis: var(--menu-width);
-    flex-shrink: 0;
-    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;
+  width: var(--menu-width);
+  flex-basis: var(--menu-width);
+  flex-shrink: 0;
+  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;
 }
 
 .header > .logo > img {
-    width: 1.2em;
-    margin-right: 0.3em;
-    margin-bottom: -0.2em;
+  width: 1.2em;
+  margin-right: 0.3em;
+  margin-bottom: -0.2em;
+}
+
+.header .content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 2rem;
+  overflow: hidden;
+}
+
+.content.positionRight {
+  justify-content: flex-end;
 }
 
 .header + main {
-    padding-top: var(--header-height);
+  padding-top: var(--header-height);
 }
diff --git a/packages/ui/src/components/Header/Header.tsx b/packages/ui/src/components/Header/Header.tsx
@@ -1,3 +1,4 @@
+import cn from 'clsx';
 import React, { PropsWithChildren } from 'react';
 import s from './Header.module.css';
 import { getStaticPath } from '../../utils/getStaticPath';
@@ -8,6 +9,8 @@ export const Header = ({ children }: PropsWithChildren<any>) => (
       <img src={getStaticPath('/images/logo.svg')} alt="Bull Dashboard" />
       Bull Dashboard
     </div>
-    {children}
+    <div className={cn(s.content, { [s.positionRight]: React.Children.count(children) === 1 })}>
+      {children}
+    </div>
   </header>
 );
diff --git a/packages/ui/src/components/QueueTitle/QueueTitle.module.css b/packages/ui/src/components/QueueTitle/QueueTitle.module.css
@@ -0,0 +1,19 @@
+.queueTitle {
+  color: #718096;
+  overflow: hidden;
+}
+
+.name {
+  font-size: 1.2rem;
+  font-weight: 400;
+}
+
+.description {
+  margin: 0;
+  opacity: 0.85;
+  font-size: 0.85rem;
+  font-weight: 200;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/packages/ui/src/components/QueueTitle/QueueTitle.tsx b/packages/ui/src/components/QueueTitle/QueueTitle.tsx
@@ -0,0 +1,13 @@
+import { AppQueue } from '@bull-board/api/typings/app';
+import React from 'react';
+import s from './QueueTitle.module.css';
+
+interface QueueTitleProps {
+  queue: AppQueue;
+}
+export const QueueTitle = ({ queue }: QueueTitleProps) => (
+  <div className={s.queueTitle}>
+    <h1 className={s.name}>{queue.name}</h1>
+    {!!queue.description && <p className={s.description}>{queue.description}</p>}
+  </div>
+);
diff --git a/packages/ui/src/components/RedisStats/RedisStats.module.css b/packages/ui/src/components/RedisStats/RedisStats.module.css
@@ -1,25 +1,26 @@
 .stats {
-    padding: 0 1rem 0.5rem;
-    display: flex;
-    color: #718096;
-    font-weight: 200;
-    align-items: center;
+  padding-bottom: 0.5rem;
+  display: flex;
+  color: #718096;
+  font-weight: 200;
+  align-items: center;
+  flex-shrink: 0;
 }
 
 .stats > div {
-    text-align: center;
-    margin: 0 0.5rem;
-    position: relative;
+  text-align: center;
+  margin: 0 0.5rem;
+  position: relative;
 }
 
 .stats span {
-    display: block;
-    font-size: 1.44rem;
-    margin-top: 0.125em;
+  display: block;
+  font-size: 1.44rem;
+  margin-top: 0.125em;
 }
 
 .stats small {
-    position: absolute;
-    white-space: nowrap;
-    left: 0;
+  position: absolute;
+  white-space: nowrap;
+  left: 0;
 }
diff --git a/packages/ui/src/hooks/useActiveQueue.ts b/packages/ui/src/hooks/useActiveQueue.ts
@@ -1,13 +1,24 @@
+import { AppQueue } from '@bull-board/api/dist/typings/app';
 import { matchPath } from 'react-router';
 import { useLocation } from 'react-router-dom';
+import { Store } from './useStore';
 
-export function useActiveQueue(): string | undefined {
+export function useActiveQueue(data: Store['state']['data']): AppQueue | null {
   const { pathname } = useLocation();
+
+  if (!data) {
+    return null;
+  }
+
   const match = matchPath<{ name: string }>(pathname, {
     path: '/queue/:name',
     exact: true,
     strict: true,
   });
 
-  return decodeURIComponent(match?.params.name || '') || undefined;
+  const activeQueueName = decodeURIComponent(match?.params.name || '');
+
+  const activeQueue = data?.queues?.find((q) => q.name === activeQueueName);
+
+  return activeQueue || null;
 }
diff --git a/packages/ui/src/hooks/useStore.ts b/packages/ui/src/hooks/useStore.ts
@@ -26,21 +26,22 @@ export interface Store {
 
 export const useStore = (api: Api): Store => {
   const query = useQuery();
-  const activeQueue = useActiveQueue();
 
   const [state, setState] = useState<State>({
     data: null,
     loading: true,
   });
+
+  const activeQueue = useActiveQueue(state.data);
   const { confirmProps, openConfirm } = useConfirm();
 
   const selectedStatuses = useSelectedStatuses();
 
   const update = () =>
     api
       .getQueues({
-        activeQueue,
-        status: activeQueue ? selectedStatuses[activeQueue] : undefined,
+        activeQueue: activeQueue?.name,
+        status: activeQueue ? selectedStatuses[activeQueue.name] : undefined,
         page: query.get('page') || '1',
       })
       .then((data) => {