diff --git a/beszel/site/src/components/charts/container-chart.tsx b/beszel/site/src/components/charts/container-chart.tsx index b4661ee..78d8d27 100644 --- a/beszel/site/src/components/charts/container-chart.tsx +++ b/beszel/site/src/components/charts/container-chart.tsx @@ -170,7 +170,7 @@ export default memo(function ContainerChart({ content={} /> {Object.keys(chartConfig).map((key) => { - const filtered = filter && !key.includes(filter) + const filtered = filter && !key.toLowerCase().includes(filter.toLowerCase()) let fillOpacity = filtered ? 0.05 : 0.4 let strokeOpacity = filtered ? 0.1 : 1 return ( diff --git a/beszel/site/src/components/charts/temperature-chart.tsx b/beszel/site/src/components/charts/temperature-chart.tsx index 2ac4dc5..df672eb 100644 --- a/beszel/site/src/components/charts/temperature-chart.tsx +++ b/beszel/site/src/components/charts/temperature-chart.tsx @@ -18,8 +18,11 @@ import { } from "@/lib/utils" import { ChartData } from "@/types" import { memo, useMemo } from "react" +import { $temperatureFilter } from "@/lib/stores" +import { useStore } from "@nanostores/react" export default memo(function TemperatureChart({ chartData }: { chartData: ChartData }) { + const filter = useStore($temperatureFilter) const { yAxisWidth, updateYAxisWidth } = useYAxisWidth() if (chartData.systemStats.length === 0) { @@ -86,22 +89,28 @@ export default memo(function TemperatureChart({ chartData }: { chartData: ChartD formatShortDate(data[0].payload.created)} contentFormatter={(item) => decimalString(item.value) + " °C"} - // indicator="line" + filter={filter} /> } /> - {colors.map((key) => ( - - ))} + {colors.map((key) => { + const filtered = filter && !key.toLowerCase().includes(filter.toLowerCase()) + let strokeOpacity = filtered ? 0.1 : 1 + return ( + + ) + })} {colors.length < 12 && } />} diff --git a/beszel/site/src/components/routes/system.tsx b/beszel/site/src/components/routes/system.tsx index 0fab3ca..5606e81 100644 --- a/beszel/site/src/components/routes/system.tsx +++ b/beszel/site/src/components/routes/system.tsx @@ -1,6 +1,15 @@ import { t } from "@lingui/core/macro" import { Plural, Trans } from "@lingui/react/macro" -import { $systems, pb, $chartTime, $containerFilter, $userSettings, $direction, $maxValues } from "@/lib/stores" +import { + $systems, + pb, + $chartTime, + $containerFilter, + $userSettings, + $direction, + $maxValues, + $temperatureFilter, +} from "@/lib/stores" import { ChartData, ChartTimes, ContainerStatsRecord, GPUData, SystemRecord, SystemStatsRecord } from "@/types" import { ChartType, Os } from "@/lib/enums" import React, { lazy, memo, useCallback, useEffect, useMemo, useRef, useState } from "react" @@ -219,7 +228,7 @@ export default function SystemDetail({ name }: { name: string }) { cache.set(cs_cache_key, containerData) } if (containerData.length) { - !containerFilterBar && setContainerFilterBar() + !containerFilterBar && setContainerFilterBar() } else if (containerFilterBar) { setContainerFilterBar(null) } @@ -557,6 +566,7 @@ export default function SystemDetail({ name }: { name: string }) { grid={grid} title={t`Temperature`} description={t`Temperatures of system sensors`} + cornerEl={} > @@ -654,12 +664,12 @@ export default function SystemDetail({ name }: { name: string }) { ) } -function ContainerFilterBar() { - const containerFilter = useStore($containerFilter) +function FilterBar({ store = $containerFilter }: { store?: typeof $containerFilter }) { + const containerFilter = useStore(store) const { t } = useLingui() const handleChange = useCallback((e: React.ChangeEvent) => { - $containerFilter.set(e.target.value) + store.set(e.target.value) }, []) return ( @@ -672,7 +682,7 @@ function ContainerFilterBar() { size="icon" aria-label="Clear" className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100" - onClick={() => $containerFilter.set("")} + onClick={() => store.set("")} > diff --git a/beszel/site/src/components/ui/chart.tsx b/beszel/site/src/components/ui/chart.tsx index 83e105a..4446621 100644 --- a/beszel/site/src/components/ui/chart.tsx +++ b/beszel/site/src/components/ui/chart.tsx @@ -129,7 +129,7 @@ const ChartTooltipContent = React.forwardRef< React.useMemo(() => { if (filter) { - payload = payload?.filter((item) => (item.name as string)?.includes(filter)) + payload = payload?.filter((item) => (item.name as string)?.toLowerCase().includes(filter.toLowerCase())) } if (itemSorter) { // @ts-ignore diff --git a/beszel/site/src/lib/stores.ts b/beszel/site/src/lib/stores.ts index 236ffa5..5efb692 100644 --- a/beszel/site/src/lib/stores.ts +++ b/beszel/site/src/lib/stores.ts @@ -38,6 +38,9 @@ $userSettings.subscribe((value) => { /** Container chart filter */ export const $containerFilter = atom("") +/** Temperature chart filter */ +export const $temperatureFilter = atom("") + /** Fallback copy to clipboard dialog content */ export const $copyContent = atom("")