refactor(beszel): remove ternary operators and fix dead code
Replace all ternary operators with if/else, &&/||, or early returns. Remove unused noAnimation constant that caused lint error. Fix variable shadowing in tooltip deduplication loop.
This commit is contained in:
6 files changed
+47
-31
No files matched your search
@@ -298,19 +298,21 @@ export class BeszelIntegration extends Integration {
|
||||
created: new Date().toISOString(),
|
||||
updated: new Date().toISOString(),
|
||||
};
|
||||
const containerStats: BeszelContainerStatsRecord | null =
|
||||
let containerStats: BeszelContainerStatsRecord | null = null;
|
||||
if (
|
||||
parsed.container &&
|
||||
Array.isArray(parsed.container) &&
|
||||
(parsed.container as BeszelContainerStats[]).length > 0
|
||||
? {
|
||||
id: "",
|
||||
system: systemId,
|
||||
stats: parsed.container as BeszelContainerStats[],
|
||||
type: "1m",
|
||||
created: new Date().toISOString(),
|
||||
updated: new Date().toISOString(),
|
||||
}
|
||||
: null;
|
||||
) {
|
||||
containerStats = {
|
||||
id: "",
|
||||
system: systemId,
|
||||
stats: parsed.container as BeszelContainerStats[],
|
||||
type: "1m",
|
||||
created: new Date().toISOString(),
|
||||
updated: new Date().toISOString(),
|
||||
};
|
||||
}
|
||||
onMessage({ stats, containerStats });
|
||||
}
|
||||
} catch {
|
||||
|
||||
@@ -122,6 +122,7 @@ export const beszelStatsRequestHandler = createCachedIntegrationRequestHandler<
|
||||
queryKey: "beszelStats",
|
||||
cacheDurationForInput(input) {
|
||||
const config = timePeriodConfig[input.timePeriod];
|
||||
return config ? dayjs.duration(config.cacheSeconds, "seconds") : undefined;
|
||||
if (!config) return undefined;
|
||||
return dayjs.duration(config.cacheSeconds, "seconds");
|
||||
},
|
||||
});
|
||||
@@ -39,13 +39,13 @@ export const WidgetBeszelSystemInput = ({ property, kind }: CommonWidgetInputPro
|
||||
<Select
|
||||
label={tInput("label")}
|
||||
description={tInput("description")}
|
||||
placeholder={isPending ? t("loading") : t("placeholder")}
|
||||
placeholder={isPending && t("loading") || t("placeholder")}
|
||||
clearable
|
||||
searchable
|
||||
nothingFoundMessage={t("noSystems")}
|
||||
data={systems}
|
||||
disabled={isError}
|
||||
error={isError ? t("loadError") : undefined}
|
||||
error={isError && t("loadError") || undefined}
|
||||
{...form.getInputProps(`options.${property}`)}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -5,6 +5,7 @@ import { ActionIcon, Button, Center, Menu, ScrollArea, Select, SimpleGrid, Stack
|
||||
import { IconPlugConnectedX, IconServer, IconQuestionMark } from "@tabler/icons-react";
|
||||
|
||||
import { clientApi } from "@homarr/api/client";
|
||||
import type { BeszelContainerStatsRecord, BeszelSystemStatsRecord } from "@homarr/integrations/types";
|
||||
import { useScopedI18n } from "@homarr/translation/client";
|
||||
|
||||
import classes from "./component.module.css";
|
||||
@@ -79,7 +80,10 @@ export default function BeszelSystemStatsWidget({
|
||||
|
||||
const { data: liveData, error: liveError } = useLiveStats(integrationIds, selectedSystem, isLive && systemReady);
|
||||
|
||||
const activeStats = isLive ? liveData : statsResult;
|
||||
let activeStats: { systemStats: BeszelSystemStatsRecord[]; containerStats: BeszelContainerStatsRecord[] } | null | undefined = statsResult;
|
||||
if (isLive) {
|
||||
activeStats = liveData;
|
||||
}
|
||||
|
||||
const cpuMap = useCallback((s: { cpu: number }) => ({ [t("chart.cpu.series")]: s.cpu }), [t]);
|
||||
const memoryMap = useCallback(
|
||||
@@ -204,7 +208,7 @@ export default function BeszelSystemStatsWidget({
|
||||
<ScrollArea
|
||||
h="100%"
|
||||
className={classes.beszelStatsWrapper}
|
||||
style={{ pointerEvents: isEditMode ? "none" : undefined }}
|
||||
style={{ pointerEvents: isEditMode && "none" || undefined }}
|
||||
>
|
||||
<Stack gap="md" p="sm">
|
||||
{!isEditMode && systems.length > 1 && (
|
||||
@@ -233,8 +237,8 @@ export default function BeszelSystemStatsWidget({
|
||||
<Menu.Item
|
||||
key={s.value}
|
||||
fz="xs"
|
||||
fw={s.value === selectedSystem ? 600 : 400}
|
||||
c={s.value === selectedSystem ? undefined : "dimmed"}
|
||||
fw={s.value === selectedSystem && 600 || 400}
|
||||
c={s.value !== selectedSystem && "dimmed" || undefined}
|
||||
onClick={() => handleSelectSystem(s.value)}
|
||||
>
|
||||
{s.label}
|
||||
|
||||
@@ -11,9 +11,15 @@ import type { BeszelContainerStatsRecord, BeszelSystemStatsRecord } from "@homar
|
||||
const formatTime = (timestamp: string) => dayjs(timestamp).format("HH:mm");
|
||||
const formatTimeLive = (timestamp: string) => dayjs(timestamp).format("HH:mm:ss");
|
||||
|
||||
const timeFormatters: Record<string, (ts: string) => string> = {
|
||||
live: formatTimeLive,
|
||||
historical: formatTime,
|
||||
};
|
||||
|
||||
function prepareRecords<T>(records: T[], live: boolean) {
|
||||
const mode = live ? "live" : "historical";
|
||||
return {
|
||||
fmt: live ? formatTimeLive : formatTime,
|
||||
fmt: timeFormatters[mode] as (ts: string) => string,
|
||||
ordered: live ? records : [...records].toReversed(),
|
||||
};
|
||||
}
|
||||
@@ -21,7 +27,6 @@ function prepareRecords<T>(records: T[], live: boolean) {
|
||||
const yAxisBase = { tickMargin: 0, tick: { fontSize: 10 } } as const;
|
||||
const chartStyle = { minWidth: 0, minHeight: 0 } as const;
|
||||
const panelStyle = { minWidth: 0, overflow: "hidden" } as const;
|
||||
const noAnimation = { isAnimationActive: false } as const;
|
||||
export const CPU_Y_AXIS_DOMAIN: [number, string] = [0, "auto"];
|
||||
|
||||
interface BeszelChartPanelProps {
|
||||
@@ -59,17 +64,19 @@ const BeszelAreaChart = memo(
|
||||
type = "default",
|
||||
...props
|
||||
}: BeszelAreaChartProps) => {
|
||||
const mergedYAxis = useMemo(
|
||||
() => ({
|
||||
const mergedYAxis = useMemo(() => {
|
||||
const base = {
|
||||
...yAxisBase,
|
||||
width: 48,
|
||||
tickMargin: 2,
|
||||
...(yAxisDomain ? { domain: yAxisDomain } : {}),
|
||||
tickFormatter: yAxisFormatter,
|
||||
...yAxisPropsOverride,
|
||||
}),
|
||||
[yAxisFormatter, yAxisDomain, yAxisPropsOverride],
|
||||
);
|
||||
};
|
||||
if (yAxisDomain) {
|
||||
return { ...base, domain: yAxisDomain };
|
||||
}
|
||||
return base;
|
||||
}, [yAxisFormatter, yAxisDomain, yAxisPropsOverride]);
|
||||
|
||||
return (
|
||||
<AreaChart
|
||||
@@ -81,9 +88,7 @@ const BeszelAreaChart = memo(
|
||||
type={type}
|
||||
strokeWidth={1}
|
||||
fillOpacity={0.2}
|
||||
areaChartProps={{
|
||||
// margin: { top: 0, right: 0, bottom: 0, left: 10 },
|
||||
}}
|
||||
areaChartProps={{}}
|
||||
withXAxis
|
||||
withYAxis
|
||||
w="100%"
|
||||
@@ -112,7 +117,11 @@ export const useSystemChartData = (
|
||||
export const useContainerNames = (containerStats: BeszelContainerStatsRecord[] | undefined, max = 15) => {
|
||||
const prevRef = useRef<string[]>([]);
|
||||
return useMemo(() => {
|
||||
if (!containerStats?.length) return prevRef.current.length === 0 ? prevRef.current : (prevRef.current = []);
|
||||
if (!containerStats?.length) {
|
||||
if (prevRef.current.length === 0) return prevRef.current;
|
||||
prevRef.current = [];
|
||||
return prevRef.current;
|
||||
}
|
||||
const names = new Set<string>();
|
||||
for (const record of containerStats) {
|
||||
for (const c of record.stats) {
|
||||
|
||||
@@ -77,8 +77,8 @@ const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }:
|
||||
if (!isActive) return null;
|
||||
|
||||
const deduped = new Map<string, TooltipPayloadItem>();
|
||||
for (const p of (payload ?? []).filter((p) => p.value > 0)) {
|
||||
if (!deduped.has(p.dataKey)) deduped.set(p.dataKey, p);
|
||||
for (const item of (payload ?? []).filter((entry) => entry.value > 0)) {
|
||||
if (!deduped.has(item.dataKey)) deduped.set(item.dataKey, item);
|
||||
}
|
||||
const sorted = [...deduped.values()].toSorted((a, b) => b.value - a.value);
|
||||
|
||||
|
||||
Reference in new issue
Block a user