|
1 | 1 | import { ROUTES } from "@/app/routes.const"; |
2 | 2 | import { BlankSlate } from "@/components/blank-slate"; |
| 3 | +import { BadgeLocale } from "@/components/badge-locale"; |
| 4 | +import { DialogDelete } from "@/components/dialog.delete"; |
3 | 5 | import { LoadProvider } from "@/components/loading-provider"; |
4 | 6 | import { SubPageHeader } from "@/components/sub.page.header"; |
5 | | -import { Badge } from "@/components/ui/badge"; |
| 7 | +import { Button } from "@/components/ui/button"; |
| 8 | +import type { TurSECoreInfo } from "@/models/se/se-core-info.model.ts"; |
6 | 9 | import { TurSEInstanceService } from "@/services/se/se.service"; |
7 | | -import { IconDatabase } from "@tabler/icons-react"; |
| 10 | +import { |
| 11 | + IconChevronDown, |
| 12 | + IconDatabase, |
| 13 | + IconEraser, |
| 14 | + IconServer, |
| 15 | + IconTrash, |
| 16 | +} from "@tabler/icons-react"; |
8 | 17 | import { useEffect, useState } from "react"; |
9 | 18 | import { useParams } from "react-router-dom"; |
10 | 19 |
|
11 | 20 | const turSEInstanceService = new TurSEInstanceService(); |
12 | 21 |
|
| 22 | +// --- Core grouping --- |
| 23 | + |
| 24 | +interface LocaleEntry { |
| 25 | + locale: string; |
| 26 | + coreInfo: TurSECoreInfo; |
| 27 | +} |
| 28 | + |
| 29 | +interface CoreGroup { |
| 30 | + base: string; |
| 31 | + locales: LocaleEntry[]; |
| 32 | +} |
| 33 | + |
| 34 | +// Matches: {base}_{lang}_{COUNTRY} or {base}_{lang} |
| 35 | +const LOCALE_PATTERN = /^(.+)_([a-z]{2}_[A-Z]{2})$|^(.+)_([a-z]{2})$/; |
| 36 | + |
| 37 | +function groupCores(cores: TurSECoreInfo[]): CoreGroup[] { |
| 38 | + const map = new Map<string, LocaleEntry[]>(); |
| 39 | + |
| 40 | + for (const coreInfo of cores) { |
| 41 | + const m = LOCALE_PATTERN.exec(coreInfo.name); |
| 42 | + if (m) { |
| 43 | + const base = m[1] ?? m[3]; |
| 44 | + const locale = m[2] ?? m[4]; |
| 45 | + if (!map.has(base)) map.set(base, []); |
| 46 | + map.get(base)?.push({ locale, coreInfo }); |
| 47 | + } else if (!map.has(coreInfo.name)) { |
| 48 | + map.set(coreInfo.name, []); |
| 49 | + } |
| 50 | + } |
| 51 | + |
| 52 | + return Array.from(map.entries()) |
| 53 | + .sort(([a], [b]) => a.localeCompare(b)) |
| 54 | + .map(([base, locales]) => ({ base, locales })); |
| 55 | +} |
| 56 | + |
| 57 | +function formatNumDocs(n: number): string { |
| 58 | + return n.toLocaleString(); |
| 59 | +} |
| 60 | + |
| 61 | +// --- Locale row with actions --- |
| 62 | + |
| 63 | +interface LocaleRowProps { |
| 64 | + locale: string; |
| 65 | + coreInfo: TurSECoreInfo; |
| 66 | + onDelete: (coreName: string) => void; |
| 67 | + onClear: (coreName: string) => void; |
| 68 | +} |
| 69 | + |
| 70 | +function LocaleRow({ locale, coreInfo, onDelete, onClear }: Readonly<LocaleRowProps>) { |
| 71 | + const [deleteOpen, setDeleteOpen] = useState(false); |
| 72 | + const [clearOpen, setClearOpen] = useState(false); |
| 73 | + |
| 74 | + return ( |
| 75 | + <div className="flex items-center gap-3 px-4 py-2.5 pl-10 bg-muted/20"> |
| 76 | + <BadgeLocale locale={locale} /> |
| 77 | + <span className="text-sm text-muted-foreground flex-1 font-mono">{coreInfo.name}</span> |
| 78 | + <span className="text-xs text-muted-foreground tabular-nums"> |
| 79 | + {formatNumDocs(coreInfo.numDocs)} docs |
| 80 | + </span> |
| 81 | + <div className="flex items-center gap-1"> |
| 82 | + <DialogDelete |
| 83 | + feature="documents" |
| 84 | + name={coreInfo.name} |
| 85 | + open={clearOpen} |
| 86 | + setOpen={setClearOpen} |
| 87 | + onDelete={() => { setClearOpen(false); onClear(coreInfo.name); }} |
| 88 | + trigger={ |
| 89 | + <Button variant="ghost" size="icon-sm" title="Remove all documents"> |
| 90 | + <IconEraser className="size-4" /> |
| 91 | + </Button> |
| 92 | + } |
| 93 | + title="Remove all documents?" |
| 94 | + description="This will delete all indexed documents from this core." |
| 95 | + confirmLabel="Yes, remove all documents" |
| 96 | + /> |
| 97 | + <DialogDelete |
| 98 | + feature="core" |
| 99 | + name={coreInfo.name} |
| 100 | + open={deleteOpen} |
| 101 | + setOpen={setDeleteOpen} |
| 102 | + onDelete={() => { setDeleteOpen(false); onDelete(coreInfo.name); }} |
| 103 | + trigger={ |
| 104 | + <Button variant="ghost" size="icon-sm" title="Delete core"> |
| 105 | + <IconTrash className="size-4" /> |
| 106 | + </Button> |
| 107 | + } |
| 108 | + /> |
| 109 | + </div> |
| 110 | + </div> |
| 111 | + ); |
| 112 | +} |
| 113 | + |
| 114 | +// --- Group row --- |
| 115 | + |
| 116 | +interface CoreGroupRowProps { |
| 117 | + group: CoreGroup; |
| 118 | + onDelete: (coreName: string) => void; |
| 119 | + onClear: (coreName: string) => void; |
| 120 | +} |
| 121 | + |
| 122 | +function CoreGroupRow({ group, onDelete, onClear }: Readonly<CoreGroupRowProps>) { |
| 123 | + const [open, setOpen] = useState(true); |
| 124 | + const hasLocales = group.locales.length > 0; |
| 125 | + const localeCount = group.locales.length; |
| 126 | + const totalDocs = group.locales.reduce((sum, { coreInfo }) => sum + coreInfo.numDocs, 0); |
| 127 | + |
| 128 | + return ( |
| 129 | + <div className="rounded-lg border bg-background overflow-hidden"> |
| 130 | + <button |
| 131 | + type="button" |
| 132 | + onClick={() => hasLocales && setOpen((v) => !v)} |
| 133 | + className="flex w-full items-center gap-3 px-4 py-3 text-left hover:bg-muted/50 transition-colors" |
| 134 | + > |
| 135 | + <IconServer className="size-4 text-muted-foreground shrink-0" /> |
| 136 | + <span className="text-sm font-semibold flex-1">{group.base}</span> |
| 137 | + {hasLocales && ( |
| 138 | + <> |
| 139 | + <span className="text-xs text-muted-foreground"> |
| 140 | + {formatNumDocs(totalDocs)} docs |
| 141 | + </span> |
| 142 | + <span className="text-xs text-muted-foreground">·</span> |
| 143 | + <span className="text-xs text-muted-foreground"> |
| 144 | + {localeCount} locale{localeCount === 1 ? "" : "s"} |
| 145 | + </span> |
| 146 | + <IconChevronDown |
| 147 | + className={`size-4 text-muted-foreground transition-transform duration-200 ${open ? "rotate-180" : ""}`} |
| 148 | + /> |
| 149 | + </> |
| 150 | + )} |
| 151 | + </button> |
| 152 | + |
| 153 | + {hasLocales && open && ( |
| 154 | + <div className="border-t divide-y"> |
| 155 | + {group.locales.map(({ locale, coreInfo }) => ( |
| 156 | + <LocaleRow |
| 157 | + key={coreInfo.name} |
| 158 | + locale={locale} |
| 159 | + coreInfo={coreInfo} |
| 160 | + onDelete={onDelete} |
| 161 | + onClear={onClear} |
| 162 | + /> |
| 163 | + ))} |
| 164 | + </div> |
| 165 | + )} |
| 166 | + </div> |
| 167 | + ); |
| 168 | +} |
| 169 | + |
13 | 170 | export default function SEInstanceCoresPage() { |
14 | 171 | const { id } = useParams() as { id: string }; |
15 | | - const [cores, setCores] = useState<string[]>(); |
| 172 | + const [cores, setCores] = useState<TurSECoreInfo[]>(); |
16 | 173 | const [error, setError] = useState<string | null>(null); |
17 | 174 |
|
18 | | - useEffect(() => { |
| 175 | + const loadCores = () => { |
19 | 176 | turSEInstanceService.getCores(id) |
20 | 177 | .then(setCores) |
21 | 178 | .catch(() => setError("Connection error or timeout while fetching Solr cores.")); |
| 179 | + }; |
| 180 | + |
| 181 | + useEffect(() => { |
| 182 | + loadCores(); |
22 | 183 | }, [id]); |
23 | 184 |
|
| 185 | + const handleDelete = (coreName: string) => { |
| 186 | + turSEInstanceService.deleteCore(id, coreName) |
| 187 | + .then(loadCores) |
| 188 | + .catch(() => setError(`Failed to delete core: ${coreName}`)); |
| 189 | + }; |
| 190 | + |
| 191 | + const handleClear = (coreName: string) => { |
| 192 | + turSEInstanceService.clearCore(id, coreName) |
| 193 | + .then(loadCores) |
| 194 | + .catch(() => setError(`Failed to remove documents from: ${coreName}`)); |
| 195 | + }; |
| 196 | + |
| 197 | + const groups = cores ? groupCores(cores) : []; |
| 198 | + |
24 | 199 | return ( |
25 | 200 | <LoadProvider checkIsNotUndefined={cores} error={error} tryAgainUrl={`${ROUTES.SE_INSTANCE}/${id}/cores`}> |
26 | 201 | {cores && cores.length > 0 ? ( |
27 | 202 | <> |
28 | | - <SubPageHeader icon={IconDatabase} name="Cores" feature="Cores" |
29 | | - description="Solr cores and collections available in this Search Engine." /> |
30 | | - <div className="px-6 pb-6"> |
31 | | - <div className="grid gap-2"> |
32 | | - {cores.map((core) => ( |
33 | | - <div key={core} |
34 | | - className="flex items-center gap-3 rounded-lg border px-4 py-3 bg-background"> |
35 | | - <IconDatabase className="size-4 text-muted-foreground shrink-0" /> |
36 | | - <span className="text-sm font-medium flex-1">{core}</span> |
37 | | - <Badge variant="secondary">core</Badge> |
38 | | - </div> |
39 | | - ))} |
40 | | - </div> |
| 203 | + <SubPageHeader |
| 204 | + icon={IconDatabase} |
| 205 | + name="Cores" |
| 206 | + feature="Cores" |
| 207 | + description="Solr cores and collections available in this Search Engine." |
| 208 | + /> |
| 209 | + <div className="px-6 pb-6 space-y-2"> |
| 210 | + {groups.map((group) => ( |
| 211 | + <CoreGroupRow |
| 212 | + key={group.base} |
| 213 | + group={group} |
| 214 | + onDelete={handleDelete} |
| 215 | + onClear={handleClear} |
| 216 | + /> |
| 217 | + ))} |
41 | 218 | </div> |
42 | 219 | </> |
43 | 220 | ) : ( |
|
0 commit comments