jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2025-12-17 10:46:16 +01:00
Code Issues Packages Projects Releases 2 Wiki Activity

improve chart filtering logic to support multiple terms (#1274)

Browse Source
This commit is contained in:
henrygd
2025-10-18 17:10:08 -04:00
parent 5360f762e4
commit ae55b86493
6 changed files with 32 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
internal/site/src/components/charts/container-chart.tsx
View File

@@ -94,8 +94,11 @@ export default memo(function ContainerChart({
if (!filter) {
return new Set<string>()
}
const filterLower = filter.toLowerCase()
return new Set(Object.keys(chartConfig).filter((key) => !key.toLowerCase().includes(filterLower)))
const filterTerms = filter.toLowerCase().split(" ").filter(term => term.length > 0)
return new Set(Object.keys(chartConfig).filter((key) => {
const keyLower = key.toLowerCase()
return !filterTerms.some(term => keyLower.includes(term))
}))
}, [chartConfig, filter])
// console.log('rendered at', new Date())

3
internal/site/src/components/charts/temperature-chart.tsx
View File

@@ -91,7 +91,8 @@ export default memo(function TemperatureChart({ chartData }: { chartData: ChartD
}
/>
{colors.map((key) => {
const filtered = filter && !key.toLowerCase().includes(filter.toLowerCase())
const filterTerms = filter ? filter.toLowerCase().split(" ").filter(term => term.length > 0) : []
const filtered = filterTerms.length > 0 && !filterTerms.some(term => key.toLowerCase().includes(term))
const strokeOpacity = filtered ? 0.1 : 1
return (
<Line

2
internal/site/src/components/lang-toggle.tsx
View File

@@ -12,7 +12,7 @@ export function LangToggle() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant={"ghost"} size="icon" className="hidden 450:flex">
<Button variant={"ghost"} size="icon" className="hidden sm:flex">
<LanguagesIcon className="absolute h-[1.2rem] w-[1.2rem] light:opacity-85" />
<span className="sr-only">Language</span>
</Button>

8
internal/site/src/components/navbar.tsx
View File

@@ -50,7 +50,7 @@ export default function Navbar() {
<div className="flex items-center ms-auto" onMouseEnter={() => import("@/components/routes/settings/general")}>
<Link
href={getPagePath($router, "containers")}
className={cn("", buttonVariants({ variant: "ghost", size: "icon" }))}
className={cn(buttonVariants({ variant: "ghost", size: "icon" }))}
aria-label="Containers"
>
<ContainerIcon className="h-[1.2rem] w-[1.2rem]" strokeWidth={1.5} />
@@ -60,13 +60,13 @@ export default function Navbar() {
<Link
href={getPagePath($router, "settings", { name: "general" })}
aria-label="Settings"
className={cn("", buttonVariants({ variant: "ghost", size: "icon" }))}
className={cn(buttonVariants({ variant: "ghost", size: "icon" }))}
>
<SettingsIcon className="h-[1.2rem] w-[1.2rem]" />
</Link>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button aria-label="User Actions" className={cn("", buttonVariants({ variant: "ghost", size: "icon" }))}>
<button aria-label="User Actions" className={cn(buttonVariants({ variant: "ghost", size: "icon" }))}>
<UserIcon className="h-[1.2rem] w-[1.2rem]" />
</button>
</DropdownMenuTrigger>
@@ -120,7 +120,7 @@ export default function Navbar() {
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<AddSystemButton className="ms-2" />
<AddSystemButton className="ms-2 hidden 450:flex" />
</div>
</div>
)

2
internal/site/src/components/routes/home.tsx
View File

@@ -14,7 +14,7 @@ export default memo(() => {
return useMemo(
() => (
<>
<div className="grid gap-4">
<div className="flex flex-col gap-4">
<ActiveAlerts />
<Suspense>
<SystemsTable />

6
internal/site/src/components/ui/chart.tsx
View File

@@ -129,7 +129,11 @@ const ChartTooltipContent = React.forwardRef<
React.useMemo(() => {
if (filter) {
payload = payload?.filter((item) => (item.name as string)?.toLowerCase().includes(filter.toLowerCase()))
const filterTerms = filter.toLowerCase().split(" ").filter(term => term.length > 0)
payload = payload?.filter((item) => {
const itemName = (item.name as string)?.toLowerCase()
return filterTerms.some(term => itemName?.includes(term))
})
}
if (itemSorter) {
// @ts-expect-error