feat: add status filters on overview page (#840)

* feat: use status legend as filters * fix: overview is considered a queue as well with its own status * feat: adjust styles for status tabs on overview page * fix: remove unecessary styles * refactor: use existing hook instead
felixmosh · Oct 23, 2024 · 4d0ae3d · 4d0ae3d
1 parent 6ecc79d
commit 4d0ae3d
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 14 deletions.
diff --git a/packages/ui/src/components/StatusLegend/StatusLegend.module.css b/packages/ui/src/components/StatusLegend/StatusLegend.module.css
@@ -6,7 +6,29 @@
   text-transform: uppercase;
 }
 
-.legend > li:before {
+.legend > li {
+  display: flex;
+  align-items: center;
+  border-bottom: 2px solid transparent;
+}
+
+.legend > li.isSelected {
+  border-color: var(--status-menu-active-border);
+  color: var(--status-menu-active-text);
+  font-weight: 500;
+}
+
+.legend > li > a {
+  text-decoration: none;
+  margin: 0 0 -2px;
+  padding: 0.5em 1em;
+  color: var(--status-menu-text);
+  transition: border-bottom-color 200ms ease-in-out, color 0.1s ease;
+  display: flex;
+  align-items: center;
+}
+
+.legend > li > a:before {
   content: '';
   background-color: var(--item-bg);
   border-radius: 50%;
@@ -16,8 +38,23 @@
   margin-right: 0.5rem;
 }
 
-.legend > li + li {
-  margin-left: 2rem;
+.legend > li > a span {
+  flex: 1;
+  white-space: nowrap;
+}
+
+.legend > li > a span:before {
+  display: block;
+  content: attr(title);
+  font-weight: 600;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.legend > li > a:hover,
+.legend > li > a:active {
+  border-color: #7a8085;
 }
 
 .waiting {

diff --git a/packages/ui/src/components/StatusLegend/StatusLegend.tsx b/packages/ui/src/components/StatusLegend/StatusLegend.tsx
@@ -1,18 +1,32 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import { queueStatsStatusList } from '../../constants/queue-stats-status';
-import { toCamelCase } from '../../utils/toCamelCase';
 import s from './StatusLegend.module.css';
+import { NavLink } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { toCamelCase } from '../../utils/toCamelCase';
+import cn from 'clsx';
+import { useQuery } from '../../hooks/useQuery';
 
 export const StatusLegend = () => {
   const { t } = useTranslation();
+  const query = useQuery();
+
   return (
     <ul className={s.legend}>
-      {queueStatsStatusList.map((status) => (
-        <li key={status} className={s[toCamelCase(status)]}>
-          {t(`QUEUE.STATUS.${status.toUpperCase()}`)}
-        </li>
-      ))}
+      {queueStatsStatusList.map((status) => {
+        const displayStatus = t(`QUEUE.STATUS.${status.toUpperCase()}`).toLocaleUpperCase();
+
+        return (<li key={status} className={cn(s[toCamelCase(status)], {
+          [s.isSelected]: query.get('status') === status,
+        })}>
+          <NavLink
+            to={`/?status=${status}`}
+            key={`overview-${status}`}
+          >
+            <span title={displayStatus}>{displayStatus}</span>
+          </NavLink>
+        </li>);
+      })}
     </ul>
   );
 };
diff --git a/packages/ui/src/hooks/useSelectedStatuses.ts b/packages/ui/src/hooks/useSelectedStatuses.ts
@@ -18,9 +18,8 @@ export function useSelectedStatuses(): SelectedStatuses {
 
   useEffect(() => {
     const status = getActiveStatus(search);
-    if (activeQueueName) {
-      setSelectedStatuses({ ...selectedStatuses, [activeQueueName]: status });
-    }
+
+    setSelectedStatuses({ ...selectedStatuses, [activeQueueName]: status });
   }, [search, activeQueueName]);
 
   return selectedStatuses;

diff --git a/packages/ui/src/pages/OverviewPage/OverviewPage.tsx b/packages/ui/src/pages/OverviewPage/OverviewPage.tsx
@@ -3,16 +3,21 @@ import { QueueCard } from '../../components/QueueCard/QueueCard';
 import { StatusLegend } from '../../components/StatusLegend/StatusLegend';
 import { useQueues } from '../../hooks/useQueues';
 import s from './OverviewPage.module.css';
+import { useSelectedStatuses } from '../../hooks/useSelectedStatuses';
 
 export const OverviewPage = () => {
   const { actions, queues } = useQueues();
   actions.pollQueues();
 
+  const selectedStatus = useSelectedStatuses();
+  const overviewPageStatus = selectedStatus[''];
+
   return (
     <section>
       <StatusLegend />
+
       <ul className={s.overview}>
-        {queues?.map((queue) => (
+        {queues?.filter((queue) => overviewPageStatus === 'latest' || queue.counts[overviewPageStatus] > 0).map((queue) => (
           <li key={queue.name}>
             <QueueCard queue={queue} />
           </li>