feat: Dashboard page with basic queue stats

packages/ui/src/App.tsx

@@ -0,0 +1,69 @@
+import React, { Suspense } from 'react';
+import { Route, Switch } from 'react-router-dom';
+import { ToastContainer } from 'react-toastify';
+import { ConfirmModal } from './components/ConfirmModal/ConfirmModal';
+import { Header } from './components/Header/Header';
+import { HeaderActions } from './components/HeaderActions/HeaderActions';
+import { Menu } from './components/Menu/Menu';
+import { Title } from './components/Title/Title';
+import { useActiveQueue } from './hooks/useActiveQueue';
+import { useScrollTopOnNav } from './hooks/useScrollTopOnNav';
+import { useStore } from './hooks/useStore';
+
+const QueuePageLazy = React.lazy(() =>
+  import('./pages/QueuePage/QueuePage').then(({ QueuePage }) => ({ default: QueuePage }))
+);
+
+const OverviewPageLazy = React.lazy(() =>
+  import('./pages/OverviewPage/OverviewPage').then(({ OverviewPage }) => ({
+    default: OverviewPage,
+  }))
+);
+
+export const App = () => {
+  useScrollTopOnNav();
+  const { state, actions, selectedStatuses, confirmProps } = useStore();
+  const activeQueue = useActiveQueue(state.data);
+
+  return (
+    <>
+      <Header>
+        <Title name={activeQueue?.name} description={activeQueue?.description} />
+        <HeaderActions />
+      </Header>
+      <main>
+        <div>
+          {state.loading ? (
+            'Loading...'
+          ) : (
+            <>
+              <Suspense fallback={() => 'Loading...'}>
+                <Switch>
+                  <Route
+                    path="/queue/:name"
+                    render={() => (
+                      <QueuePageLazy
+                        queue={activeQueue || null}
+                        actions={actions}
+                        selectedStatus={selectedStatuses}
+                      />
+                    )}
+                  />
+
+                  <Route
+                    path="/"
+                    exact
+                    render={() => <OverviewPageLazy queues={state.data?.queues} />}
+                  />
+                </Switch>
+              </Suspense>
+              <ConfirmModal {...confirmProps} />
+            </>
+          )}
+        </div>
+      </main>
+      <Menu queues={state.data?.queues} selectedStatuses={selectedStatuses} />
+      <ToastContainer />
+    </>
+  );
+};

packages/ui/src/components/Card/Card.module.css

@@ -0,0 +1,8 @@
+.card {
+  background-color: #fff;
+  box-shadow: 0 1px 1px 0 rgba(60, 75, 100, 0.14), 0 2px 1px -1px rgba(60, 75, 100, 0.12),
+  0 1px 3px 0 rgba(60, 75, 100, 0.2);
+  border-radius: 0.25rem;
+  padding: 1em;
+  display: flex;
+}

packages/ui/src/components/Card/Card.tsx

@@ -0,0 +1,10 @@
+import cn from 'clsx';
+import React, { PropsWithChildren } from 'react';
+import s from './Card.module.css';
+
+interface ICardProps {
+  className?: string;
+}
+export const Card = ({ children, className }: PropsWithChildren<ICardProps>) => (
+  <div className={cn(s.card, className)}>{children}</div>
+);

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

@@ -28,6 +28,7 @@
   z-index: 2;
   display: flex;
   justify-content: center;
+  text-decoration: none;
 }
 
 .header > .logo > .img {

packages/ui/src/components/Header/Header.tsx

@@ -1,5 +1,6 @@
 import cn from 'clsx';
 import React, { PropsWithChildren } from 'react';
+import { NavLink } from 'react-router-dom';
 import { useUIConfig } from '../../hooks/useUIConfig';
 import { getStaticPath } from '../../utils/getStaticPath';
 import s from './Header.module.css';
@@ -11,7 +12,7 @@ export const Header = ({ children }: PropsWithChildren<any>) => {
 
   return (
     <header className={s.header}>
-      <div className={s.logo}>
+      <NavLink to={'/'} className={s.logo}>
         {!!logoPath && (
           <img
             src={logoPath}
@@ -22,7 +23,7 @@ export const Header = ({ children }: PropsWithChildren<any>) => {
           />
         )}
         {boardTitle}
-      </div>
+      </NavLink>
       <div className={s.content}>{children}</div>
     </header>
   );

packages/ui/src/components/JobCard/JobCard.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Card } from '../Card/Card';
 import { Details } from './Details/Details';
 import { JobActions } from './JobActions/JobActions';
 import s from './JobCard.module.css';
@@ -23,7 +24,7 @@ interface JobCardProps {
 const greenStatuses = [STATUSES.active, STATUSES.completed];
 
 export const JobCard = ({ job, status, actions, readOnlyMode, allowRetries }: JobCardProps) => (
-  <div className={s.card}>
+  <Card className={s.card}>
     <div className={s.sideInfo}>
       <span title={`#${job.id}`}>#{job.id}</span>
       <Timeline job={job} status={status} />
@@ -57,5 +58,5 @@ export const JobCard = ({ job, status, actions, readOnlyMode, allowRetries }: Jo
         )}
       </div>
     </div>
-  </div>
+  </Card>
 );

packages/ui/src/components/JobCard/Progress/Progress.tsx

@@ -12,34 +12,32 @@ export const Progress = ({
   percentage: number;
   status: Status;
   className?: string;
-}) => {
-  return (
-    <svg className={cn(s.progress, className)} viewBox="0 0 148 148">
-      <circle
-        cx="70"
-        cy="70"
-        r="70"
-        fill="none"
-        stroke="#EDF2F7"
-        strokeWidth="8"
-        strokeLinecap="round"
-        style={{ transform: 'translate(4px, 4px)' }}
-      ></circle>
-      <circle
-        cx="70"
-        cy="70"
-        r="70"
-        fill="none"
-        stroke={status === STATUSES.failed ? '#F56565' : '#48BB78'}
-        strokeWidth="8"
-        strokeLinecap="round"
-        strokeDasharray="600"
-        strokeDashoffset={600 - ((600 - 160) * percentage) / 100}
-        style={{ transform: 'translate(4px, -4px) rotate(-90deg)' }}
-      ></circle>
-      <text textAnchor="middle" x="74" y="88">
-        {percentage}%
-      </text>
-    </svg>
-  );
-};
+}) => (
+  <svg className={cn(s.progress, className)} viewBox="0 0 148 148">
+    <circle
+      cx="70"
+      cy="70"
+      r="70"
+      fill="none"
+      stroke="#E5E7EB"
+      strokeWidth="8"
+      strokeLinecap="round"
+      style={{ transform: 'translate(4px, 4px)' }}
+    ></circle>
+    <circle
+      cx="70"
+      cy="70"
+      r="70"
+      fill="none"
+      stroke={status === STATUSES.failed ? '#F56565' : '#48BB78'}
+      strokeWidth="8"
+      strokeLinecap="round"
+      strokeDasharray="600"
+      strokeDashoffset={600 - ((600 - 160) * percentage) / 100}
+      style={{ transform: 'translate(4px, -4px) rotate(-90deg)' }}
+    ></circle>
+    <text textAnchor="middle" x="74" y="88">
+      {percentage}%
+    </text>
+  </svg>
+);

packages/ui/src/components/QueueCard/QueueCard.module.css

@@ -0,0 +1,4 @@
+.queueCard {
+  flex-direction: column;
+  gap: 0.5rem;
+}

packages/ui/src/components/QueueCard/QueueCard.tsx

@@ -0,0 +1,16 @@
+import { AppQueue } from '@bull-board/api/dist/typings/app';
+import React from 'react';
+import { Card } from '../Card/Card';
+import { QueueStats } from './QueueStats/QueueStats';
+import s from './QueueCard.module.css';
+
+interface IQueueCardProps {
+  queue: AppQueue;
+}
+
+export const QueueCard = ({ queue }: IQueueCardProps) => (
+  <Card className={s.queueCard}>
+    <div>{queue.name}</div>
+    <QueueStats queue={queue} />
+  </Card>
+);

packages/ui/src/components/QueueCard/QueueStats/QueueStats.module.css

@@ -0,0 +1,47 @@
+.stats {
+  display: flex;
+  white-space: nowrap;
+  gap: 1rem;
+  align-items: center;
+}
+
+.progressBar {
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+  height: 1rem;
+  border-radius: 9999px;
+  background-color: #e5e7eb;
+  line-height: 1;
+  font-size: 0.75rem;
+  color: #fff;
+  text-align: center;
+}
+
+.progressBar > div {
+  padding: 0.125rem;
+}
+
+.progressBar > div + div {
+  border-left: 2px solid #fff;
+}
+
+.waiting {
+  background-color: var(--waiting);
+}
+
+.completed {
+  background-color: var(--completed);
+}
+
+.failed {
+  background-color: var(--failed);
+}
+
+.active {
+  background-color: var(--active);
+}
+
+.delayed {
+  background-color: var(--delayed);
+}

packages/ui/src/components/QueueCard/QueueStats/QueueStats.tsx

@@ -0,0 +1,39 @@
+import { AppQueue } from '@bull-board/api/dist/typings/app';
+import React from 'react';
+import { queueStatsStatusList } from '../../../constants/queue-stats-status';
+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);
+
+  return (
+    <div className={s.stats}>
+      <div className={s.progressBar}>
+        {queueStatsStatusList
+          .filter((status) => queue.counts[status] > 0)
+          .map((status) => {
+            const value = queue.counts[status];
+
+            return (
+              <div
+                key={status}
+                role="progressbar"
+                style={{ width: `${(value / total) * 100}%` }}
+                aria-valuenow={value}
+                aria-valuemin={0}
+                aria-valuemax={total}
+                className={s[status]}
+              >
+                {value}
+              </div>
+            );
+          })}
+      </div>
+      <div>{total} Jobs</div>
+    </div>
+  );
+};