feat: make bars clickable, closes #717

felixmosh · May 1, 2024 · 422c0cf · 422c0cf
1 parent e05fd57
commit 422c0cf
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/packages/ui/src/components/QueueCard/QueueStats/QueueStats.module.css b/packages/ui/src/components/QueueCard/QueueStats/QueueStats.module.css
@@ -19,14 +19,23 @@
   z-index: 10;
 }
 
-.progressBar > div {
+.progressBar > .bar {
   padding: 0.125rem;
-  transition: width 0.3s ease-in;
+  transition: width 0.3s ease-in, opacity 0.2s ease-in-out;
 
   min-width: min-content;
+  text-decoration: none;
 }
 
-.progressBar > div + div {
+.progressBar > .bar:visited {
+  color: inherit;
+}
+
+.progressBar > .bar:hover {
+  opacity: 0.75;
+}
+
+.progressBar > .bar + .bar {
   border-left: 2px solid #fff;
 }
 

diff --git a/packages/ui/src/components/QueueCard/QueueStats/QueueStats.tsx b/packages/ui/src/components/QueueCard/QueueStats/QueueStats.tsx
@@ -1,6 +1,9 @@
 import { AppQueue } from '@bull-board/api/typings/app';
+import cn from 'clsx';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { links } from '../../../utils/links';
 import { toCamelCase } from '../../../utils/toCamelCase';
 import s from './QueueStats.module.css';
 
@@ -21,18 +24,19 @@ export const QueueStats = ({ queue }: IQueueStatsProps) => {
             const value = queue.counts[status];
 
             return (
-              <div
+              <Link
+                to={links.queuePage(queue.name, { [queue.name]: status })}
                 key={status}
                 role="progressbar"
                 style={{ width: `${(value / total) * 100}%` }}
                 aria-valuenow={value}
                 aria-valuemin={0}
                 aria-valuemax={total}
-                className={s[toCamelCase(status)]}
+                className={cn(s[toCamelCase(status)], s.bar)}
                 title={t(`QUEUE.STATUS.${status.toUpperCase()}`)}
               >
                 {value}
-              </div>
+              </Link>
             );
           })}
       </div>