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) { if (!filter) {
return new Set<string>() return new Set<string>()
} }
const filterLower = filter.toLowerCase() const filterTerms = filter.toLowerCase().split(" ").filter(term => term.length > 0)
return new Set(Object.keys(chartConfig).filter((key) => !key.toLowerCase().includes(filterLower))) return new Set(Object.keys(chartConfig).filter((key) => {
const keyLower = key.toLowerCase()
return !filterTerms.some(term => keyLower.includes(term))
}))
}, [chartConfig, filter]) }, [chartConfig, filter])
// console.log('rendered at', new Date()) // 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) => { {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 const strokeOpacity = filtered ? 0.1 : 1
return ( return (
<Line <Line

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

@@ -12,7 +12,7 @@ export function LangToggle() {
return ( return (
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <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" /> <LanguagesIcon className="absolute h-[1.2rem] w-[1.2rem] light:opacity-85" />
<span className="sr-only">Language</span> <span className="sr-only">Language</span>
</Button> </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")}> <div className="flex items-center ms-auto" onMouseEnter={() => import("@/components/routes/settings/general")}>
<Link <Link
href={getPagePath($router, "containers")} href={getPagePath($router, "containers")}
className={cn("", buttonVariants({ variant: "ghost", size: "icon" }))} className={cn(buttonVariants({ variant: "ghost", size: "icon" }))}
aria-label="Containers" aria-label="Containers"
> >
<ContainerIcon className="h-[1.2rem] w-[1.2rem]" strokeWidth={1.5} /> <ContainerIcon className="h-[1.2rem] w-[1.2rem]" strokeWidth={1.5} />
@@ -60,13 +60,13 @@ export default function Navbar() {
<Link <Link
href={getPagePath($router, "settings", { name: "general" })} href={getPagePath($router, "settings", { name: "general" })}
aria-label="Settings" 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]" /> <SettingsIcon className="h-[1.2rem] w-[1.2rem]" />
</Link> </Link>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <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]" /> <UserIcon className="h-[1.2rem] w-[1.2rem]" />
</button> </button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
@@ -120,7 +120,7 @@ export default function Navbar() {
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
<AddSystemButton className="ms-2" /> <AddSystemButton className="ms-2 hidden 450:flex" />
</div> </div>
</div> </div>
) )

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

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

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

@@ -129,7 +129,11 @@ const ChartTooltipContent = React.forwardRef<
React.useMemo(() => { React.useMemo(() => {
if (filter) { 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) { if (itemSorter) {
// @ts-expect-error // @ts-expect-error