feat(webhook): delivery list — server-side фильтр по status

Раньше при page=50 admin не мог найти редкий dlq среди
delivered'ов: client-side filter показал бы 1 совпадение из 50,
а на page=1 могли быть ещё. Делаем server-side через ?status=.

Backend:
- WebhookDeliveryRepository.findBySubscriptionIdAndStatusOrderByCreatedAtDesc
  — Spring Data derived query, JPA генерирует SQL.
- GET /admin/webhooks/subscriptions/{id}/deliveries?status=dlq —
  опциональный param. Invalid status → 400 OrdinisException.
  Allowed: pending, retrying, delivered, dlq.

UI:
- 4 chip'а pending/retrying/delivered/dlq над таблицей deliveries
  (одинаковый паттерн со scope-чипами в dictionaries).
- Click toggle + reset page=0. 'Сбросить' появляется когда фильтр
  активен.
- Status в URL пока не персистится — для одной session-страницы
  не критично.
This commit is contained in:
Zimin A.N.
2026-05-06 21:34:04 +03:00
parent fbb0aa121a
commit f2cf34e2fc
5 changed files with 89 additions and 10 deletions
+17 -5
View File
@@ -220,21 +220,33 @@ export const useWebhookSubscription = (id: string) =>
enabled: Boolean(id),
})
export const webhookDeliveriesQuery = (id: string, page: number, size: number) =>
export const webhookDeliveriesQuery = (
id: string,
page: number,
size: number,
statusFilter?: string,
) =>
queryOptions({
queryKey: ['webhooks', 'deliveries', id, page, size] as const,
queryKey: ['webhooks', 'deliveries', id, page, size, statusFilter ?? null] as const,
queryFn: async (): Promise<WebhookDeliveryPage> => {
const params: Record<string, string | number> = { page, size }
if (statusFilter) params.status = statusFilter
const { data } = await apiClient.get<WebhookDeliveryPage>(
`/admin/webhooks/subscriptions/${encodeURIComponent(id)}/deliveries`,
{ params: { page, size } },
{ params },
)
return data
},
})
export const useWebhookDeliveries = (id: string, page: number, size: number) =>
export const useWebhookDeliveries = (
id: string,
page: number,
size: number,
statusFilter?: string,
) =>
useQuery({
...webhookDeliveriesQuery(id, page, size),
...webhookDeliveriesQuery(id, page, size, statusFilter),
enabled: Boolean(id),
})
+4
View File
@@ -71,6 +71,8 @@ i18n
'webhooks.deliveries.col.lastError': 'Последняя ошибка',
'webhooks.deliveries.action.retry': 'Повторить доставку',
'webhooks.deliveries.confirmRetry': 'Сбросить attemptCount=0 и поставить в очередь повтор? Receiver получит payload снова.',
'webhooks.deliveries.filter.label': 'Фильтр по статусу',
'webhooks.deliveries.filter.clear': 'Сбросить',
'audit.title': 'Журнал аудита',
'audit.subtitle': 'Юридически значимый лог изменений НСИ',
'audit.filter.dictionary': 'Справочник',
@@ -327,6 +329,8 @@ i18n
'webhooks.deliveries.col.lastError': 'Last error',
'webhooks.deliveries.action.retry': 'Retry delivery',
'webhooks.deliveries.confirmRetry': 'Reset attemptCount=0 and queue a retry? The receiver will get the payload again.',
'webhooks.deliveries.filter.label': 'Status filter',
'webhooks.deliveries.filter.clear': 'Clear',
'audit.title': 'Audit log',
'audit.subtitle': 'Legally significant log of NSI changes',
'audit.filter.dictionary': 'Dictionary',
+44 -1
View File
@@ -53,7 +53,12 @@ function WebhookDetailPage() {
const { t } = useTranslation()
const sub = useWebhookSubscription(id)
const [page, setPage] = useState(0)
const deliveries = useWebhookDeliveries(id, page, 50)
const [statusFilter, setStatusFilter] = useState<string | undefined>(undefined)
const deliveries = useWebhookDeliveries(id, page, 50, statusFilter)
const handleStatusToggle = (s: string) => {
setPage(0)
setStatusFilter((curr) => (curr === s ? undefined : s))
}
const rotateMut = useRotateWebhookSecret()
const deleteMut = useDeleteWebhook()
const retryMut = useRetryWebhookDelivery()
@@ -213,6 +218,44 @@ function WebhookDetailPage() {
/>
</div>
<div
className="flex flex-wrap items-center gap-1.5 mb-3"
role="group"
aria-label={t('webhooks.deliveries.filter.label')}
>
{(['pending', 'retrying', 'delivered', 'dlq'] as const).map((s) => {
const active = statusFilter === s
return (
<button
key={s}
type="button"
onClick={() => handleStatusToggle(s)}
aria-pressed={active}
className={[
'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-sm border text-2xs uppercase tracking-label font-secondary transition-colors',
active
? 'border-ultramarain bg-ultramarain/8 text-ultramarain'
: 'border-regolith bg-white text-carbon/70 hover:border-carbon/40',
].join(' ')}
>
{s}
</button>
)
})}
{statusFilter && (
<button
type="button"
onClick={() => {
setPage(0)
setStatusFilter(undefined)
}}
className="text-xs text-ultramarain hover:underline ml-2"
>
{t('webhooks.deliveries.filter.clear')}
</button>
)}
</div>
{deliveries.isLoading ? (
<LoadingBlock size="sm" />
) : !deliveries.data || deliveries.data.content.length === 0 ? (