rl-core-front 0.19.8 → 0.19.10

package/src/features/queues/hooks/use-queue-jobs.ts

@@ -1,20 +1,23 @@
 "use client";
 
 import type { SortingState } from "@tanstack/react-table";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import {
+  ALL_QUEUES,
   QueueCounts,
   QueueJob,
   QueueJobState,
   QueueName,
+  QueueScope,
   queuesService,
+  QueueStateCounts,
 } from "#core/features/queues/services/queues.service";
 import { useLatestRequest } from "#core/hooks/use-latest-request";
 import { useRequest } from "#core/hooks/use-request";
 import { useTabState } from "#core/hooks/use-tab-state";
 
-const EMPTY_COUNTS: QueueCounts = {
+const EMPTY_STATE_COUNTS: QueueStateCounts = {
   waiting: 0,
   active: 0,
   completed: 0,
@@ -22,35 +25,52 @@ const EMPTY_COUNTS: QueueCounts = {
   delayed: 0,
 };
 
+const EMPTY_COUNTS: QueueCounts = { ...EMPTY_STATE_COUNTS, byQueue: [] };
+
+const QUEUE_JOB_STATES = Object.values(QueueJobState);
+const QUEUE_SCOPES: QueueScope[] = [ALL_QUEUES, ...Object.values(QueueName)];
+
+/**
+ * De quanto em quanto tempo a lista se relê enquanto há job andando.
+ *
+ * Existe porque fila é tela de coisa em movimento: sem isto, um job a 40% fica
+ * a 40% até alguém apertar F5, e a tela passa a mentir sobre o que está
+ * acontecendo. Cinco segundos é o intervalo em que a barra anda visivelmente
+ * sem a tela virar um tráfego de requisição.
+ */
+const LIVE_REFRESH_MS = 5000;
+
 export interface UseQueueJobsResult {
   rows: QueueJob[];
-  counts: QueueCounts;
+  /** O total de cada estado no escopo — os cartões do topo. */
+  counts: QueueStateCounts;
+  /** Quantos jobs do estado atual cada fila tem — o número ao lado de cada fila. */
+  countsByQueue: Record<QueueScope, number>;
   total: number;
   page: number;
   pageSize: number;
   state: QueueJobState;
-  queue: QueueName;
+  queue: QueueScope;
   sorting: SortingState;
   loading: boolean;
   setPage: (page: number) => void;
   setPageSize: (size: number) => void;
   setSorting: (sorting: SortingState) => void;
   setState: (state: QueueJobState) => void;
-  setQueue: (queue: QueueName) => void;
+  setQueue: (queue: QueueScope) => void;
   refresh: () => Promise<void>;
-  retry: (id: string) => Promise<void>;
-  remove: (id: string) => Promise<void>;
+  retry: (job: QueueJob) => Promise<void>;
+  remove: (job: QueueJob) => Promise<void>;
 }
 
 /**
  * A fila como a tela de administração a vê.
  *
- * Abre em `failed` de propósito: quem entra aqui está atrás do que deu errado.
- * O que está andando bem não precisa de tela.
+ * Abre em **todas as filas** e em `failed`: quem entra aqui está atrás do que
+ * deu errado, e não sabe de antemão em qual das três está — abrir numa fila só
+ * fazia a tela começar vazia em projeto que não usa a geral, o que é
+ * indistinguível de "nada foi enfileirado".
  */
-const QUEUE_JOB_STATES = Object.values(QueueJobState);
-const QUEUE_NAMES = Object.values(QueueName);
-
 export function useQueueJobs(): UseQueueJobsResult {
   const { run, loading } = useRequest();
   const latest = useLatestRequest();
@@ -69,57 +89,101 @@ export function useQueueJobs(): UseQueueJobsResult {
     QueueJobState.FAILED,
     { param: "state" },
   );
-  const { tab: queue, setTab: setQueueValue } = useTabState(
+  const { tab: queue, setTab: setQueueValue } = useTabState<QueueScope>(
     "queues-queue",
-    QUEUE_NAMES,
-    QueueName.JOBS,
+    QUEUE_SCOPES,
+    ALL_QUEUES,
     { param: "queue" },
   );
   // Sem ordem escolhida, a lista sai na ordem do Redis — que é a mais recente
   // primeiro e não custa varredura nenhuma no backend.
   const [sorting, setSorting] = useState<SortingState>([]);
 
-  const fetch = useCallback(async (): Promise<void> => {
-    // `latest` descarta a resposta que outra busca já passou para trás —
-    // trocar de estado e de página em sequência devolve as duas fora de ordem.
-    const result = await latest(() =>
-      Promise.all([
-        // O `page` da tabela é base zero; o da API, base um.
-        run(() =>
-          queuesService.list({
-            state,
-            queue,
-            page: page + 1,
-            limit: pageSize,
-            sortBy: sorting[0]?.id,
-            sortDir: sorting[0]
-              ? sorting[0].desc
-                ? "DESC"
-                : "ASC"
-              : undefined,
-          }),
-        ),
-        run(() => queuesService.counts(queue)),
-      ]),
-    );
-    if (!result) {
-      return;
-    }
-    const [list, summary] = result;
-    if (list) {
-      setRows(list.items);
-      setTotal(list.meta.total);
-    }
-    if (summary) {
-      setCounts(summary);
-    }
-  }, [latest, run, state, queue, page, pageSize, sorting]);
+  /**
+   * Busca a página e os contadores.
+   *
+   * `quiet` é a releitura do relógio, e ela não passa pelo `useRequest`: o `run`
+   * acende o `loading`, e com ele o `DataTable` troca as linhas por um spinner —
+   * a cada cinco segundos a lista inteira sumiria e voltaria debaixo do mouse.
+   * Também não avisa erro: um Redis fora do ar renderia um toast a cada cinco
+   * segundos, e o que já está na tela é a resposta honesta até a tentativa
+   * seguinte.
+   */
+  const load = useCallback(
+    async (quiet = false): Promise<void> => {
+      const wrap = quiet
+        ? <T>(fn: () => Promise<T>): Promise<T | null> => fn().catch(() => null)
+        : run;
+
+      // `latest` descarta a resposta que outra busca já passou para trás —
+      // trocar de estado e de página em sequência devolve as duas fora de ordem.
+      const result = await latest(() =>
+        Promise.all([
+          // O `page` da tabela é base zero; o da API, base um.
+          wrap(() =>
+            queuesService.list({
+              state,
+              queue,
+              page: page + 1,
+              limit: pageSize,
+              sortBy: sorting[0]?.id,
+              sortDir: sorting[0]
+                ? sorting[0].desc
+                  ? "DESC"
+                  : "ASC"
+                : undefined,
+            }),
+          ),
+          wrap(() => queuesService.counts(queue)),
+        ]),
+      );
+      if (!result) {
+        return;
+      }
+      const [list, summary] = result;
+      if (list) {
+        setRows(list.items);
+        setTotal(list.meta.total);
+      }
+      if (summary) {
+        setCounts(summary);
+      }
+    },
+    [latest, run, state, queue, page, pageSize, sorting],
+  );
 
   useEffect(() => {
     void (async (): Promise<void> => {
-      await fetch();
+      await load();
     })();
-  }, [fetch]);
+  }, [load]);
+
+  /*
+    Enquanto houver job andando, a tela se relê sozinha.
+
+    Só nesse caso: uma lista de falhas antigas não muda por si, e recarregá-la
+    a cada cinco segundos gastaria três consultas ao Redis para redesenhar o
+    mesmo. O `ref` é o que mantém o intervalo com uma função só — recriá-lo a
+    cada `load` novo reiniciaria a contagem em todo render.
+  */
+  const loadRef = useRef(load);
+
+  useEffect(() => {
+    loadRef.current = load;
+  }, [load]);
+
+  const running = counts.waiting + counts.active > 0;
+
+  useEffect(() => {
+    if (!running) {
+      return;
+    }
+    const timer = window.setInterval(() => {
+      void loadRef.current(true);
+    }, LIVE_REFRESH_MS);
+
+    return () => window.clearInterval(timer);
+  }, [running]);
 
   const setState = (next: QueueJobState): void => {
     setStateValue(next);
@@ -128,8 +192,8 @@ export function useQueueJobs(): UseQueueJobsResult {
     setPage(0);
   };
 
-  /** Trocar de fila é trocar de conjunto inteiro: página e contadores vão junto. */
-  const setQueue = (next: QueueName): void => {
+  /** Estreitar para uma fila é trocar de conjunto: a página volta ao começo. */
+  const setQueue = (next: QueueScope): void => {
     setQueueValue(next);
     setPage(0);
   };
@@ -140,12 +204,30 @@ export function useQueueJobs(): UseQueueJobsResult {
    */
   const act = async (action: Promise<void>): Promise<void> => {
     await action;
-    await fetch();
+    await load();
   };
 
+  /*
+    Quantos jobs do estado atual cada fila tem.
+
+    O total do escopo entra como a contagem de "Todas" para o número ao lado de
+    cada opção sair do mesmo lugar — somar as filas aqui daria o mesmo valor
+    duas vezes, calculado de dois jeitos.
+  */
+  const countsByQueue = {
+    [ALL_QUEUES]: counts[state],
+    ...Object.fromEntries(
+      Object.values(QueueName).map((name) => [
+        name,
+        counts.byQueue.find((row) => row.queue === name)?.counts[state] ?? 0,
+      ]),
+    ),
+  } as Record<QueueScope, number>;
+
   return {
     rows,
     counts,
+    countsByQueue,
     total,
     page,
     pageSize,
@@ -158,8 +240,8 @@ export function useQueueJobs(): UseQueueJobsResult {
     setSorting,
     setState,
     setQueue,
-    refresh: fetch,
-    retry: (id) => act(queuesService.retry(id, queue)),
-    remove: (id) => act(queuesService.remove(id, queue)),
+    refresh: () => load(),
+    retry: (job) => act(queuesService.retry(job.id, job.queue)),
+    remove: (job) => act(queuesService.remove(job.id, job.queue)),
   };
 }

package/src/features/queues/queues-screen.tsx

@@ -6,30 +6,32 @@ import type {
   PaginationState,
   SortingState,
 } from "@tanstack/react-table";
-import { RotateCcw, Trash2 } from "lucide-react";
 import type { JSX } from "react";
 import { useMemo } from "react";
 
+import { formatDateTime, formatDuration } from "#core/_utils/format";
 import {
   Badge,
-  Button,
   Card,
   DataTable,
   DataTableFeatures,
-  RowActions,
   SegmentedControl,
   SegmentedOption,
 } from "#core/components/ui";
 import { useAuth, useI18n } from "#core/contexts";
+import { QueueJobDetail } from "#core/features/queues/components";
 import { useQueueJobs } from "#core/features/queues/hooks/use-queue-jobs";
 import {
+  ALL_QUEUES,
   QueueJob,
   QueueJobState,
   QueueName,
+  QueueScope,
 } from "#core/features/queues/services/queues.service";
 import { useConfirm } from "#core/hooks/use-confirm";
+import { cn } from "#core/lib/utils";
 
-/** Rótulo de cada estado — a mesma chave serve à barra e aos cartões. */
+/** Chave de tradução de cada estado e de cada fila — o texto mora no i18n (§6). */
 const STATE_LABEL: Record<QueueJobState, string> = {
   [QueueJobState.WAITING]: "queues.stateWaiting",
   [QueueJobState.ACTIVE]: "queues.stateActive",
@@ -38,10 +40,18 @@ const STATE_LABEL: Record<QueueJobState, string> = {
   [QueueJobState.DELAYED]: "queues.stateDelayed",
 };
 
-/** Rótulo de cada fila. A geral e a de relatórios rodam em processos diferentes. */
-const QUEUE_LABEL: Record<QueueName, string> = {
+const QUEUE_LABEL: Record<QueueScope, string> = {
+  [ALL_QUEUES]: "queues.queueAll",
   [QueueName.JOBS]: "queues.queueJobs",
   [QueueName.EXPORTS]: "queues.queueExports",
+  [QueueName.IMAGES]: "queues.queueImages",
+};
+
+/** A cor do ponto de cada fila — o que separa as três de relance na coluna. */
+const QUEUE_DOT: Record<QueueName, string> = {
+  [QueueName.JOBS]: "bg-muted-foreground",
+  [QueueName.EXPORTS]: "bg-violet-500",
+  [QueueName.IMAGES]: "bg-cyan-500",
 };
 
 const STATE_VARIANT: Record<
@@ -55,6 +65,9 @@ const STATE_VARIANT: Record<
   [QueueJobState.DELAYED]: "secondary",
 };
 
+/** As opções do seletor de fila, com "todas" na frente — é o padrão da tela. */
+const QUEUE_SCOPES: QueueScope[] = [ALL_QUEUES, ...Object.values(QueueName)];
+
 /**
  * Fila de processamento — o que está rodando, o que falhou e o que fazer com
  * isso.
@@ -62,42 +75,46 @@ const STATE_VARIANT: Record<
  * Substitui o painel do bull-board: aqui a tela mora no mesmo shell, com a
  * mesma permissão e a mesma tradução do resto do sistema, em vez de um segundo
  * frontend embutido no backend com autenticação própria.
+ *
+ * A fila **não** é um modo desta tela. São três filas e cinco estados, e escolher
+ * uma de cada vez fazia a tela abrir na fila que o projeto talvez nem use — com
+ * o upload e o relatório de todo mundo do outro lado de um botão que ninguém
+ * sabia que precisava apertar. Aqui ela abre em todas, e o número ao lado de cada
+ * uma diz onde está o problema antes de alguém clicar.
  */
 export function QueuesScreen(): JSX.Element {
-  const { t } = useI18n();
+  const { t, locale } = useI18n();
   const { hasPermission } = useAuth();
   const { confirm, confirmDialog } = useConfirm();
   const queue = useQueueJobs();
 
   const canManage = hasPermission("queues:manage:any");
 
-  const stateOptions = useMemo<SegmentedOption[]>(
-    () =>
-      Object.values(QueueJobState).map((value) => ({
-        value,
-        label: t(STATE_LABEL[value]),
-      })),
-    [t],
-  );
-
   const queueOptions = useMemo<SegmentedOption[]>(
     () =>
-      Object.values(QueueName).map((value) => ({
+      QUEUE_SCOPES.map((value) => ({
         value,
         label: t(QUEUE_LABEL[value]),
+        count: queue.countsByQueue[value],
+        // Vermelho só onde o número é o problema: em "concluídos" ele é a
+        // notícia boa, e pintá-lo de vermelho ensinaria a ignorar a cor.
+        countTone:
+          queue.state === QueueJobState.FAILED
+            ? ("danger" as const)
+            : ("neutral" as const),
       })),
-    [t],
+    [t, queue.countsByQueue, queue.state],
   );
 
   /** Remover é sem volta: some da fila e não há de onde reprocessar depois. */
-  const removeJob = async (id: string): Promise<void> => {
+  const removeJob = async (job: QueueJob): Promise<void> => {
     const confirmed = await confirm({
       title: t("queues.removeTitle"),
       description: t("queues.removeDescription"),
       destructive: true,
     });
     if (confirmed) {
-      await queue.remove(id);
+      await queue.remove(job);
     }
   };
 
@@ -116,10 +133,31 @@ export function QueuesScreen(): JSX.Element {
           </div>
         ),
       },
+      {
+        accessorKey: "queue",
+        header: t("queues.queue"),
+        meta: { label: t("queues.queue") },
+        // O ponto colorido, e não só o nome: com as três filas na mesma lista,
+        // é ele que deixa "isto é upload" legível sem ler.
+        cell: ({ row }) => (
+          <span className="inline-flex items-center gap-2 whitespace-nowrap">
+            <span
+              className={cn(
+                "h-1.5 w-1.5 flex-none rounded-full",
+                QUEUE_DOT[row.original.queue],
+              )}
+            />
+            {t(QUEUE_LABEL[row.original.queue])}
+          </span>
+        ),
+      },
       {
         accessorKey: "state",
         header: t("queues.state"),
         meta: { label: t("queues.state") },
+        // Sem seta: `state` não está no `SORTABLE_JOB_FIELDS` do backend, e a
+        // listagem já é de um estado só — ordenar por ele não mudaria nada.
+        enableSorting: false,
         cell: ({ row }) => {
           const state = row.original.state as QueueJobState;
           return (
@@ -133,100 +171,82 @@ export function QueuesScreen(): JSX.Element {
         accessorKey: "percent",
         header: t("queues.progress"),
         meta: { label: t("queues.progress") },
-        cell: ({ getValue }) => {
-          const percent = getValue() as number | null;
-          return percent == null ? "—" : `${percent}%`;
+        cell: ({ row }) => {
+          const { percent, state } = row.original;
+          if (percent === null) {
+            return <span className="text-muted-foreground">—</span>;
+          }
+          return (
+            <div className="flex items-center gap-2">
+              <span
+                role="img"
+                aria-label={`${percent}%`}
+                className="h-1.5 w-20 flex-none overflow-hidden rounded-full bg-muted"
+              >
+                <span
+                  className={cn(
+                    "block h-full rounded-full",
+                    state === QueueJobState.COMPLETED
+                      ? "bg-success"
+                      : "bg-warning",
+                  )}
+                  style={{ width: `${percent}%` }}
+                />
+              </span>
+              <span className="text-xs tabular-nums text-muted-foreground">
+                {percent}%
+              </span>
+            </div>
+          );
         },
       },
       {
         accessorKey: "attemptsMade",
         header: t("queues.attempts"),
         meta: { label: t("queues.attempts") },
+        // "2" sozinho não diz se ainda vai tentar; com o teto ao lado, diz.
+        cell: ({ row }) => (
+          <span className="tabular-nums text-muted-foreground">
+            {row.original.attemptsMade}/{row.original.maxAttempts}
+          </span>
+        ),
       },
       {
         accessorKey: "createdAt",
         header: t("queues.createdAt"),
-        meta: { label: t("queues.createdAt") },
-        cell: ({ getValue }) => new Date(String(getValue())).toLocaleString(),
-      },
-      {
-        accessorKey: "payload",
-        header: t("queues.payload"),
-        enableSorting: false,
-        // O conteúdo do job, cru. É o que responde *qual* pedido falhou, e não
-        // só *que* falhou — sem ele, um relatório que quebrou não diz qual
-        // recorte quebrou. Sai só aqui porque esta tela é de monitoramento do
-        // administrador, onde ver tudo é a função.
-        meta: { label: t("queues.payload") },
-        cell: ({ getValue }) => {
-          const payload = getValue();
-          if (payload == null) {
-            return "—";
-          }
-
-          const text = JSON.stringify(payload);
+        meta: { label: t("queues.createdAt"), wrap: true },
+        // A duração embaixo da data: numa lista de falhas, "quebrou depois de
+        // 3 minutos" e "quebrou em 4ms" são problemas diferentes, e descobrir
+        // qual é exigiria abrir linha por linha.
+        cell: ({ row }) => {
+          const duration = formatDuration(row.original.startedAt, row.original.finishedAt);
           return (
-            <span
-              className="line-clamp-2 max-w-md font-mono text-xs"
-              title={text}
-            >
-              {text}
-            </span>
+            <div className="flex flex-col whitespace-nowrap tabular-nums">
+              <span>{formatDateTime(row.original.createdAt, locale)}</span>
+              {duration && (
+                <span className="text-xs text-muted-foreground">{duration}</span>
+              )}
+            </div>
           );
         },
       },
       {
         accessorKey: "failedReason",
         header: t("queues.reason"),
-        meta: { label: t("queues.reason") },
-        // Cru e por inteiro no `title`: quem lê esta tela é quem vai consertar
-        // a causa, e a mensagem truncada some justamente na parte útil.
+        meta: { label: t("queues.reason"), maxWidth: "24rem" },
+        // Cortado aqui e inteiro no detalhe da linha: numa tabela, a célula que
+        // cresce para caber um stacktrace desloca todas as vizinhas.
         cell: ({ getValue }) => {
           const reason = getValue() as string | null;
           return reason ? (
-            <span
-              className="line-clamp-2 max-w-md font-mono text-xs"
-              title={reason}
-            >
-              {reason}
-            </span>
+            <span className="text-xs text-destructive">{reason}</span>
           ) : (
-            "—"
+            <span className="text-muted-foreground">—</span>
           );
         },
       },
-      {
-        id: "actions",
-        header: () => <div className="text-center">{t("common.actions")}</div>,
-        enableSorting: false,
-        meta: { shrink: true },
-        enableHiding: false,
-        cell: ({ row }) =>
-          canManage ? (
-            <RowActions>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => void queue.retry(row.original.id)}
-              >
-                <RotateCcw className="h-4 w-4" />
-                {t("queues.retry")}
-              </Button>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="text-destructive"
-                onClick={() => void removeJob(row.original.id)}
-              >
-                <Trash2 className="h-4 w-4" />
-                {t("common.delete")}
-              </Button>
-            </RowActions>
-          ) : null,
-      },
     ],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [t, canManage, queue],
+    [t, locale],
   );
 
   const pagination: PaginationState = {
@@ -283,7 +303,9 @@ export function QueuesScreen(): JSX.Element {
       <DataTable
         columns={columns}
         data={queue.rows}
-        getRowId={(r) => r.id}
+        // A fila entra no id: as três numeram os jobs por conta própria, e o
+        // `13` de `exports` e o de `images` seriam a mesma linha para a tabela.
+        getRowId={(r) => `${r.queue}:${r.id}`}
         storageKey="queues-jobs"
         loading={queue.loading}
         manualPagination
@@ -294,21 +316,21 @@ export function QueuesScreen(): JSX.Element {
         sorting={queue.sorting}
         onSortingChange={onSortingChange}
         emptyMessage={t("queues.empty")}
+        renderRowDetail={(job) => (
+          <QueueJobDetail
+            job={job}
+            canManage={canManage}
+            onRetry={(target) => void queue.retry(target)}
+            onRemove={(target) => void removeJob(target)}
+          />
+        )}
         toolbar={
-          <div className="flex flex-wrap items-center gap-3">
-            <SegmentedControl
-              value={queue.queue}
-              onValueChange={(value) => queue.setQueue(value as QueueName)}
-              options={queueOptions}
-              label={t("queues.queue")}
-            />
-            <SegmentedControl
-              value={queue.state}
-              onValueChange={(value) => queue.setState(value as QueueJobState)}
-              options={stateOptions}
-              label={t("queues.state")}
-            />
-          </div>
+          <SegmentedControl
+            value={queue.queue}
+            onValueChange={(value) => queue.setQueue(value as QueueScope)}
+            options={queueOptions}
+            label={t("queues.queue")}
+          />
         }
       />