feat: refactor styles and some behavior of dashboard queue filter

felixmosh · Oct 23, 2024 · b821a84 · b821a84
1 parent 4d0ae3d
commit b821a84
Show file tree

Hide file tree

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

diff --git a/packages/ui/src/components/StatusLegend/StatusLegend.tsx b/packages/ui/src/components/StatusLegend/StatusLegend.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { queueStatsStatusList } from '../../constants/queue-stats-status';
+import { links } from '../../utils/links';
 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 = () => {
@@ -15,17 +15,19 @@ export const StatusLegend = () => {
     <ul className={s.legend}>
       {queueStatsStatusList.map((status) => {
         const displayStatus = t(`QUEUE.STATUS.${status.toUpperCase()}`).toLocaleUpperCase();
+        const isActive = query.get('status') === status;
 
-        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>);
+        return (
+          <li key={status} className={s[toCamelCase(status)]}>
+            <NavLink
+              to={links.dashboardPage(!isActive ? status : undefined)}
+              activeClassName={s.active}
+              isActive={() => isActive}
+            >
+              <span title={displayStatus}>{displayStatus}</span>
+            </NavLink>
+          </li>
+        );
       })}
     </ul>
   );

diff --git a/packages/ui/src/components/StatusMenu/StatusMenu.module.css b/packages/ui/src/components/StatusMenu/StatusMenu.module.css
@@ -31,7 +31,7 @@
 
 .statusMenu > a:hover,
 .statusMenu > a:active {
-  border-color: #7a8085;
+  border-color: var(--status-menu-hover-text);
 }
 
 .statusMenu > a.active {

diff --git a/packages/ui/src/hooks/useSelectedStatuses.ts b/packages/ui/src/hooks/useSelectedStatuses.ts
@@ -19,7 +19,9 @@ export function useSelectedStatuses(): SelectedStatuses {
   useEffect(() => {
     const status = getActiveStatus(search);
 
-    setSelectedStatuses({ ...selectedStatuses, [activeQueueName]: status });
+    if (activeQueueName) {
+      setSelectedStatuses({ ...selectedStatuses, [activeQueueName]: status });
+    }
   }, [search, activeQueueName]);
 
   return selectedStatuses;

diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
@@ -63,9 +63,10 @@
   --modal-content-bg: var(--card-bg);
   --modal-overlay-bg: rgba(0, 0, 0, 0.85);
   --status-menu-active-border: #1b1c1d;
-  --status-menu-active-text: rgba(0, 0, 0, 0.87);
   --status-menu-border-color: #e0e7eb;
-  --status-menu-text: rgba(0, 0, 0, 0.87);
+  --status-menu-text: var(--text-color);
+  --status-menu-active-text: rgba(0, 0, 0, 0.87);
+  --status-menu-hover-text: var(--text-secondary-color);
   --sticky-header-bg: rgba(245, 248, 250, 0.85);
   --tooltip-bg: rgba(45, 55, 72, 0.95);
   --tooltip-text-color: #fff;
@@ -157,6 +158,7 @@
 
   --status-menu-border-color: var(--separator-color);
   --status-menu-text: var(--card-text-secondary-color);
+  --status-menu-hover-text: var(--text-secondary-color);
   --status-menu-active-text: var(--text-color);
   --status-menu-active-border: var(--accent-color);
   --sticky-header-bg: rgba(24, 29, 36, 0.9);

diff --git a/packages/ui/src/pages/OverviewPage/OverviewPage.module.css b/packages/ui/src/pages/OverviewPage/OverviewPage.module.css
@@ -6,3 +6,18 @@
   margin: 2rem 0 0;
   padding: 0;
 }
+
+.message {
+  margin-top: 2rem;
+  white-space: pre-line;
+  line-height: 1.5rem;
+
+  a {
+    color: var(--accent-color);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--accent-color-d1);
+    }
+  }
+}
diff --git a/packages/ui/src/pages/OverviewPage/OverviewPage.tsx b/packages/ui/src/pages/OverviewPage/OverviewPage.tsx
@@ -1,28 +1,46 @@
+import { Status } from '@bull-board/api/dist/typings/app';
 import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { NavLink } from 'react-router-dom';
 import { QueueCard } from '../../components/QueueCard/QueueCard';
 import { StatusLegend } from '../../components/StatusLegend/StatusLegend';
+import { useQuery } from '../../hooks/useQuery';
 import { useQueues } from '../../hooks/useQueues';
+import { links } from '../../utils/links';
 import s from './OverviewPage.module.css';
-import { useSelectedStatuses } from '../../hooks/useSelectedStatuses';
 
 export const OverviewPage = () => {
+  const { t } = useTranslation();
   const { actions, queues } = useQueues();
-  actions.pollQueues();
-
-  const selectedStatus = useSelectedStatuses();
-  const overviewPageStatus = selectedStatus[''];
+  const query = useQuery();
 
+  actions.pollQueues();
+  const selectedStatus = query.get('status') as Status;
+  const queuesToView =
+    queues?.filter((queue) => !selectedStatus || queue.counts[selectedStatus] > 0) || [];
   return (
     <section>
       <StatusLegend />
 
-      <ul className={s.overview}>
-        {queues?.filter((queue) => overviewPageStatus === 'latest' || queue.counts[overviewPageStatus] > 0).map((queue) => (
-          <li key={queue.name}>
-            <QueueCard queue={queue} />
-          </li>
-        ))}
-      </ul>
+      {queuesToView.length > 0 && (
+        <ul className={s.overview}>
+          {queuesToView.map((queue) => (
+            <li key={queue.name}>
+              <QueueCard queue={queue} />
+            </li>
+          ))}
+        </ul>
+      )}
+      {queuesToView.length === 0 && !!selectedStatus && (
+        <div className={s.message}>
+          <Trans
+            t={t}
+            i18nKey="DASHBOARD.NO_FILTERED_MESSAGE"
+            values={{ status: t(`QUEUE.STATUS.${selectedStatus.toUpperCase()}`) }}
+            components={{ lnk: <NavLink to={links.dashboardPage()} /> }}
+          />
+        </div>
+      )}
     </section>
   );
 };
diff --git a/packages/ui/src/static/locales/en-US/messages.json b/packages/ui/src/static/locales/en-US/messages.json
@@ -7,7 +7,8 @@
   },
   "DASHBOARD": {
     "JOBS_COUNT_one": "{{count}} Job",
-    "JOBS_COUNT": "{{count}} Jobs"
+    "JOBS_COUNT": "{{count}} Jobs",
+    "NO_FILTERED_MESSAGE": "There are no queues that have a job with \"{{status}}\" status.\n<lnk>Click here</lnk> to clear the filter."
   },
   "JOB": {
     "DELAY_CHANGED": "*Delay changed; the new run time is currently unknown",

diff --git a/packages/ui/src/static/locales/es-ES/messages.json b/packages/ui/src/static/locales/es-ES/messages.json
@@ -7,7 +7,10 @@
   },
   "DASHBOARD": {
     "JOBS_COUNT_one": "{{count}} Tarea",
-    "JOBS_COUNT": "{{count}} Tareas"
+    "JOBS_COUNT_many": "{{count}} Job",
+    "JOBS_COUNT_other": "{{count}} Job",
+    "JOBS_COUNT": "{{count}} Tareas",
+    "NO_FILTERED_MESSAGE": "No hay colas que tengan un trabajo con el estado \"{{status}}\".\n<lnk>Haz clic aquí</lnk> para borrar el filtro."
   },
   "JOB": {
     "DELAY_CHANGED": "*Retraso modificado; el nuevo tiempo de ejecución es actualmente desconocido",
@@ -116,7 +119,9 @@
       "OFF": "Desactivado",
       "SECS": "{{count}} segundos",
       "MINS": "{{count}} minutos",
-      "MINS_one": "{{count}} minuto"
+      "MINS_one": "{{count}} minuto",
+      "MINS_many": "{{count}} minute",
+      "MINS_other": "{{count}} minute"
     },
     "DEFAULT_JOB_TAB": "Pestaña de tarea predeterminada",
     "JOBS_PER_PAGE": "Tareas por página (1-50)",
@@ -143,4 +148,4 @@
     "UPDATE": "Actualizar",
     "JOB_DATA": "Datos de la tarea"
   }
-}
+}
diff --git a/packages/ui/src/static/locales/fr-FR/messages.json b/packages/ui/src/static/locales/fr-FR/messages.json
@@ -9,7 +9,8 @@
     "JOBS_COUNT_one": "{{count}} Tâche",
     "JOBS_COUNT_many": "{{count}} Job",
     "JOBS_COUNT_other": "{{count}} Job",
-    "JOBS_COUNT": "{{count}} Tâches"
+    "JOBS_COUNT": "{{count}} Tâches",
+    "NO_FILTERED_MESSAGE": "Il n'y a aucune file d'attente avec un travail ayant le statut \"{{status}}\".\n<lnk>Cliquez ici</lnk> pour effacer le filtre."
   },
   "JOB": {
     "DELAY_CHANGED": "*Délai modifié; le nouveau temps d'exécution est actuellement inconnu",

diff --git a/packages/ui/src/static/locales/pt-BR/messages.json b/packages/ui/src/static/locales/pt-BR/messages.json
@@ -9,7 +9,8 @@
     "JOBS_COUNT_one": "{{count}} Tarefa",
     "JOBS_COUNT_many": "{{count}} Tarefas",
     "JOBS_COUNT_other": "{{count}} Tarefas",
-    "JOBS_COUNT": "{{count}} Tarefas"
+    "JOBS_COUNT": "{{count}} Tarefas",
+    "NO_FILTERED_MESSAGE": "Não há filas com um trabalho com o status \"{{status}}\".\n<lnk>Clique aqui</lnk> para limpar o filtro."
   },
   "JOB": {
     "DELAY_CHANGED": "*Delay changed; the new run time is currently unknown",

diff --git a/packages/ui/src/static/locales/zh-CN/messages.json b/packages/ui/src/static/locales/zh-CN/messages.json
@@ -6,7 +6,8 @@
     "PAUSED": "已暂停"
   },
   "DASHBOARD": {
-    "JOBS_COUNT": "{{count}} 个作业"
+    "JOBS_COUNT": "{{count}} 个作业",
+    "NO_FILTERED_MESSAGE": "没有具有 \"{{status}}\" 状态的队列。\n<lnk>点击这里</lnk> 清除过滤器。"
   },
   "JOB": {
     "DELAY_CHANGED": "*延迟已更改；新的运行时间目前未知",

diff --git a/packages/ui/src/utils/links.ts b/packages/ui/src/utils/links.ts
@@ -1,6 +1,13 @@
-import { SelectedStatuses } from '../../typings/app';
+import { SelectedStatuses, Status } from '../../typings/app';
 
 export const links = {
+  dashboardPage(status?: Status) {
+    const search = status ? new URLSearchParams({ status }).toString() : '';
+    return {
+      pathname: '/',
+      search,
+    };
+  },
   queuePage(
     queueName: string,
     selectedStatuses: SelectedStatuses = {}