mirror of
https://github.com/henrygd/beszel.git
synced 2026-03-22 05:36:15 +01:00
fix container net chart totals when filter is active
This commit is contained in:
@@ -38,6 +38,23 @@ export default memo(function ContainerChart({
|
|||||||
|
|
||||||
const isNetChart = chartType === ChartType.Network
|
const isNetChart = chartType === ChartType.Network
|
||||||
|
|
||||||
|
// Filter with set lookup
|
||||||
|
const filteredKeys = useMemo(() => {
|
||||||
|
if (!filter) {
|
||||||
|
return new Set<string>()
|
||||||
|
}
|
||||||
|
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])
|
||||||
|
|
||||||
// biome-ignore lint/correctness/useExhaustiveDependencies: not necessary
|
// biome-ignore lint/correctness/useExhaustiveDependencies: not necessary
|
||||||
const { toolTipFormatter, dataFunction, tickFormatter } = useMemo(() => {
|
const { toolTipFormatter, dataFunction, tickFormatter } = useMemo(() => {
|
||||||
const obj = {} as {
|
const obj = {} as {
|
||||||
@@ -85,10 +102,14 @@ export default memo(function ContainerChart({
|
|||||||
let totalSent = 0
|
let totalSent = 0
|
||||||
let totalRecv = 0
|
let totalRecv = 0
|
||||||
const payloadData = item?.payload && typeof item.payload === "object" ? item.payload : {}
|
const payloadData = item?.payload && typeof item.payload === "object" ? item.payload : {}
|
||||||
for (const value of Object.values(payloadData)) {
|
for (const [containerKey, value] of Object.entries(payloadData)) {
|
||||||
if (!value || typeof value !== "object") {
|
if (!value || typeof value !== "object") {
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
|
// Skip filtered out containers
|
||||||
|
if (filteredKeys.has(containerKey)) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
const [sent, recv] = getRxTxBytes(value as { b?: [number, number]; ns?: number; nr?: number })
|
const [sent, recv] = getRxTxBytes(value as { b?: [number, number]; ns?: number; nr?: number })
|
||||||
totalSent += sent
|
totalSent += sent
|
||||||
totalRecv += recv
|
totalRecv += recv
|
||||||
@@ -124,24 +145,7 @@ export default memo(function ContainerChart({
|
|||||||
obj.dataFunction = (key: string, data: any) => data[key]?.[dataKey] ?? null
|
obj.dataFunction = (key: string, data: any) => data[key]?.[dataKey] ?? null
|
||||||
}
|
}
|
||||||
return obj
|
return obj
|
||||||
}, [])
|
}, [filteredKeys])
|
||||||
|
|
||||||
// Filter with set lookup
|
|
||||||
const filteredKeys = useMemo(() => {
|
|
||||||
if (!filter) {
|
|
||||||
return new Set<string>()
|
|
||||||
}
|
|
||||||
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())
|
// console.log('rendered at', new Date())
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user