|
| 1 | +import { useEffect, useRef, useState } from 'react' |
| 2 | +import { ListFilter, Loader2, Search } from 'lucide-react' |
| 3 | +import { useTranslation } from 'react-i18next' |
| 4 | +import { cn } from '@/shared/lib/utils' |
| 5 | +import { Button } from '@/shared/components/ui/button' |
| 6 | +import { Input } from '@/shared/components/ui/input' |
| 7 | +import { alertsHttpService as svc } from '../services/alerts-http.service' |
| 8 | +import { FILTER_FIELDS, FILTER_OPS, SELECT_CLS, fieldKey } from '../lib/alert-meta' |
| 9 | +import type { CustomFilter } from '../types/alert.types' |
| 10 | + |
| 11 | +export function AddFilterButton({ onAdd }: { onAdd: (f: CustomFilter) => void }) { |
| 12 | + const { t } = useTranslation() |
| 13 | + const [open, setOpen] = useState(false) |
| 14 | + const [field, setField] = useState(FILTER_FIELDS[0].field) |
| 15 | + const [operator, setOperator] = useState('IS') |
| 16 | + const [values, setValues] = useState<{ value: string; count: number }[]>([]) |
| 17 | + const [loadingValues, setLoadingValues] = useState(false) |
| 18 | + const [vq, setVq] = useState('') |
| 19 | + const ref = useRef<HTMLDivElement>(null) |
| 20 | + |
| 21 | + const op = FILTER_OPS.find((o) => o.id === operator) |
| 22 | + const needsValue = op?.needsValue ?? true |
| 23 | + |
| 24 | + useEffect(() => { |
| 25 | + if (!open) return |
| 26 | + const onDoc = (e: MouseEvent) => ref.current && !ref.current.contains(e.target as Node) && setOpen(false) |
| 27 | + document.addEventListener('mousedown', onDoc) |
| 28 | + return () => document.removeEventListener('mousedown', onDoc) |
| 29 | + }, [open]) |
| 30 | + |
| 31 | + // Fetch the field's real existing values when the field changes. |
| 32 | + useEffect(() => { |
| 33 | + if (!open || !needsValue) return |
| 34 | + setLoadingValues(true) |
| 35 | + setValues([]) |
| 36 | + svc |
| 37 | + .fieldValues(field) |
| 38 | + .then(setValues) |
| 39 | + .catch(() => setValues([])) |
| 40 | + .finally(() => setLoadingValues(false)) |
| 41 | + }, [open, field, needsValue]) |
| 42 | + |
| 43 | + const add = (value: string) => { |
| 44 | + const fdef = FILTER_FIELDS.find((f) => f.field === field)! |
| 45 | + onAdd({ field, label: fdef.label, operator, value }) |
| 46 | + setOpen(false) |
| 47 | + setVq('') |
| 48 | + } |
| 49 | + |
| 50 | + const filtered = values.filter((v) => (vq ? String(v.value).toLowerCase().includes(vq.toLowerCase()) : true)) |
| 51 | + |
| 52 | + return ( |
| 53 | + <div className="relative" ref={ref}> |
| 54 | + <button |
| 55 | + onClick={() => setOpen((v) => !v)} |
| 56 | + className="inline-flex items-center gap-1.5 rounded-full border border-dashed border-border px-3 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground" |
| 57 | + > |
| 58 | + <ListFilter size={12} /> {t('alerts.filters.add')} |
| 59 | + </button> |
| 60 | + {open && ( |
| 61 | + <div className="absolute left-0 top-full z-30 mt-1 w-80 rounded-md border border-border bg-popover p-3 shadow-lg"> |
| 62 | + <div className="space-y-2"> |
| 63 | + <select value={field} onChange={(e) => setField(e.target.value)} className={cn(SELECT_CLS, 'w-full')}> |
| 64 | + {FILTER_FIELDS.map((f) => ( |
| 65 | + <option key={f.field} value={f.field}> |
| 66 | + {t(`alerts.fields.${fieldKey(f.field)}`)} |
| 67 | + </option> |
| 68 | + ))} |
| 69 | + </select> |
| 70 | + <select value={operator} onChange={(e) => setOperator(e.target.value)} className={cn(SELECT_CLS, 'w-full')}> |
| 71 | + {FILTER_OPS.map((o) => ( |
| 72 | + <option key={o.id} value={o.id}> |
| 73 | + {t(`alerts.ops.${o.id}`)} |
| 74 | + </option> |
| 75 | + ))} |
| 76 | + </select> |
| 77 | + |
| 78 | + {needsValue ? ( |
| 79 | + <> |
| 80 | + <div className="relative"> |
| 81 | + <Search size={13} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" /> |
| 82 | + <Input |
| 83 | + value={vq} |
| 84 | + onChange={(e) => setVq(e.target.value)} |
| 85 | + placeholder={t('alerts.filters.filterValues')} |
| 86 | + className="h-8 pl-8 text-xs" |
| 87 | + autoFocus |
| 88 | + /> |
| 89 | + </div> |
| 90 | + <div className="max-h-48 overflow-y-auto rounded-md border border-border"> |
| 91 | + {loadingValues ? ( |
| 92 | + <div className="flex items-center gap-1.5 px-3 py-3 text-xs text-muted-foreground"> |
| 93 | + <Loader2 className="h-3.5 w-3.5 animate-spin" /> {t('alerts.filters.loadingValues')} |
| 94 | + </div> |
| 95 | + ) : filtered.length === 0 ? ( |
| 96 | + <div className="px-3 py-3 text-xs text-muted-foreground">{t('alerts.filters.noValues')}</div> |
| 97 | + ) : ( |
| 98 | + filtered.map((v) => ( |
| 99 | + <button |
| 100 | + key={v.value} |
| 101 | + onClick={() => add(v.value)} |
| 102 | + className="flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left text-xs hover:bg-muted" |
| 103 | + > |
| 104 | + <span className="truncate font-mono">{v.value || t('alerts.filters.empty')}</span> |
| 105 | + <span className="shrink-0 font-mono text-[10px] text-muted-foreground">{v.count.toLocaleString()}</span> |
| 106 | + </button> |
| 107 | + )) |
| 108 | + )} |
| 109 | + </div> |
| 110 | + <p className="text-[10px] text-muted-foreground">{t('alerts.filters.pickValue')}</p> |
| 111 | + </> |
| 112 | + ) : ( |
| 113 | + <div className="flex justify-end gap-2 pt-1"> |
| 114 | + <Button variant="outline" size="sm" onClick={() => setOpen(false)}> |
| 115 | + {t('alerts.filters.cancel')} |
| 116 | + </Button> |
| 117 | + <Button size="sm" onClick={() => add('')}> |
| 118 | + {t('alerts.filters.addBtn')} |
| 119 | + </Button> |
| 120 | + </div> |
| 121 | + )} |
| 122 | + </div> |
| 123 | + </div> |
| 124 | + )} |
| 125 | + </div> |
| 126 | + ) |
| 127 | +} |
0 commit comments