homarr/packages/widgets/src/system-resources/component.tsx

"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import { Box, Center, Group, Loader, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";

import { clientApi } from "@homarr/api/client";

import { WidgetEmptyState } from "../common/empty-state";
import type { WidgetComponentProps } from "../definition";
import { getUsableWidgetQueryData } from "../common/query-state";
import { CombinedNetworkTrafficChart } from "./chart/combined-network-traffic";
import { SystemResourceCPUChart } from "./chart/cpu-chart";
import { SystemResourceGPUChart } from "./chart/gpu-chart";
import { SystemResourceMemoryChart } from "./chart/memory-chart";
import { NetworkTrafficChart } from "./chart/network-traffic";

const COMPACT_HISTORY_SIZE = 15;
const ADVANCED_HISTORY_SIZE = 60;

type ChartItem = {
  cpu: number;
  memory: number;
  gpu: number;
  network: { up: number; down: number } | null;
};

export const toChartItem = (healthInfo: {
  cpuUtilization: number;
  memUsedInBytes: number;
  gpu: { processorUtilization: number }[];
  network: { up: number; down: number } | null;
}): ChartItem => ({
  cpu: healthInfo.cpuUtilization,
  memory: healthInfo.memUsedInBytes,
  gpu:
    healthInfo.gpu.length > 0
      ? healthInfo.gpu.reduce((acc, gpu) => acc + gpu.processorUtilization, 0) / healthInfo.gpu.length
      : 0,
  network: healthInfo.network,
});

export const appendBoundedHistory = (history: ChartItem[], item: ChartItem, limit: number): ChartItem[] =>
  [...history, item].slice(-limit);

export const getNetworkHistory = (items: readonly ChartItem[]) =>
  items.flatMap((item) => (item.network === null ? [] : [item.network]));

export const getCompactChartBudget = (height: number): number => {
  if (height < 140) return 1;
  if (height < 260) return 2;
  return 4;
};

export default function SystemResources({
  integrationIds,
  options,
  width,
  height,
  displayMode,
}: WidgetComponentProps<"systemResources">) {
  const healthQuery = clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery({ integrationIds });
  const data = getUsableWidgetQueryData(healthQuery) ?? [];
  const { dataUpdatedAt, isPending } = healthQuery;
  const isAdvanced = displayMode === "advanced";
  const integrationKey = useMemo(() => integrationIds.join("\u0000"), [integrationIds]);
  const [historyByIntegration, setHistoryByIntegration] = useState<Record<string, ChartItem[]>>({});
  const previousIntegrationKey = useRef(integrationKey);

  useEffect(() => {
    if (previousIntegrationKey.current === integrationKey) return;
    previousIntegrationKey.current = integrationKey;
    setHistoryByIntegration({});
  }, [integrationKey]);

  const lastUpdatedAt = useRef(dataUpdatedAt);
  useEffect(() => {
    if (dataUpdatedAt === lastUpdatedAt.current) return;
    lastUpdatedAt.current = dataUpdatedAt;
    setHistoryByIntegration((previous) =>
      Object.fromEntries(
        data.map((entry) => [
          entry.integrationId,
          appendBoundedHistory(
            previous[entry.integrationId] ?? [],
            toChartItem(entry.healthInfo),
            ADVANCED_HISTORY_SIZE,
          ),
        ]),
      ),
    );
  }, [dataUpdatedAt, data]);

  const panelColumns = isAdvanced && width >= 960 && data.length > 1 ? 2 : 1;
  const panelWidth = width / panelColumns;
  const renderCharts = (entry: (typeof data)[number], availableWidth: number, availableHeight: number) => {
    const currentItem = toChartItem(entry.healthInfo);
    const fullHistory = historyByIntegration[entry.integrationId] ?? [currentItem];
    const history = isAdvanced ? fullHistory : fullHistory.slice(-COMPACT_HISTORY_SIZE);

    return (
      <SystemCharts
        key={entry.integrationId}
        integrationName={entry.integrationName}
        items={history}
        memoryCapacityInBytes={entry.healthInfo.memAvailableInBytes + entry.healthInfo.memUsedInBytes}
        options={options}
        width={availableWidth}
        height={availableHeight}
        isAdvanced={isAdvanced}
        showTitle={isAdvanced || data.length > 1}
      />
    );
  };

  if (isPending) {
    return (
      <Center h="100%">
        <Loader size="sm" />
      </Center>
    );
  }

  if (data.length === 0) return <WidgetEmptyState />;

  if (!isAdvanced && data.length === 1 && data[0]) {
    return (
      <Box h="100%" p="xs">
        {renderCharts(data[0], width, Math.max(0, height - 20))}
      </Box>
    );
  }

  const compactPanelHeight = Math.max(160, Math.floor(height / Math.min(data.length, 2)));

  return (
    <ScrollArea h="100%">
      <SimpleGrid cols={panelColumns} spacing="xs" p="xs">
        {data.map((entry) => renderCharts(entry, panelWidth, isAdvanced ? height : compactPanelHeight))}
      </SimpleGrid>
    </ScrollArea>
  );
}

interface SystemChartsProps {
  integrationName: string;
  items: ChartItem[];
  memoryCapacityInBytes: number;
  options: WidgetComponentProps<"systemResources">["options"];
  width: number;
  height: number;
  isAdvanced: boolean;
  showTitle: boolean;
}

const SystemCharts = ({
  integrationName,
  items,
  memoryCapacityInBytes,
  options,
  width,
  height,
  isAdvanced,
  showTitle,
}: SystemChartsProps) => {
  const networkItems = getNetworkHistory(items);
  const availableCharts = options.visibleCharts.filter((chart) => chart !== "network" || networkItems.length > 0);
  const visibleCharts = isAdvanced ? availableCharts : availableCharts.slice(0, getCompactChartBudget(height));
  const showNetwork = visibleCharts.includes("network");
  const chartCount = visibleCharts.length;
  const chartColumns = isAdvanced && width >= 560 ? 2 : 1;
  const chartHeight = isAdvanced
    ? 180
    : `calc((100% - ${Math.max(0, chartCount - 1) * 10}px) / ${Math.max(1, chartCount)})`;

  return (
    <Stack gap="xs" h={isAdvanced ? "auto" : height} miw={0}>
      {showTitle && (
        <Text size="sm" fw={600} truncate="end">
          {integrationName}
        </Text>
      )}
      <SimpleGrid cols={chartColumns} spacing="xs" style={{ flex: 1, minHeight: 0 }}>
        {chartCount === 0 && (
          <Center h="100%">
            <Text size="sm" c="dimmed">
              —
            </Text>
          </Center>
        )}
        {visibleCharts.includes("cpu") && (
          <Box h={chartHeight}>
            <SystemResourceCPUChart
              cpuUsageOverTime={items.map((item) => item.cpu)}
              hasShadow={options.hasShadow}
              labelDisplayMode={options.labelDisplayMode}
            />
          </Box>
        )}
        {visibleCharts.includes("memory") && (
          <Box h={chartHeight}>
            <SystemResourceMemoryChart
              memoryUsageOverTime={items.map((item) => item.memory)}
              totalCapacityInBytes={memoryCapacityInBytes}
              hasShadow={options.hasShadow}
              labelDisplayMode={options.labelDisplayMode}
            />
          </Box>
        )}
        {visibleCharts.includes("gpu") && (
          <Box h={chartHeight}>
            <SystemResourceGPUChart
              gpuUsageOverTime={items.map((item) => item.gpu)}
              hasShadow={options.hasShadow}
              labelDisplayMode={options.labelDisplayMode}
            />
          </Box>
        )}
        {showNetwork &&
          (width >= 300 ? (
            <Group h={chartHeight} gap="xs" grow wrap="nowrap">
              <NetworkTrafficChart
                usageOverTime={networkItems.map((network) => network.down)}
                isUp={false}
                hasShadow={options.hasShadow}
                labelDisplayMode={options.labelDisplayMode}
              />
              <NetworkTrafficChart
                usageOverTime={networkItems.map((network) => network.up)}
                isUp
                hasShadow={options.hasShadow}
                labelDisplayMode={options.labelDisplayMode}
              />
            </Group>
          ) : (
            <Box h={chartHeight}>
              <CombinedNetworkTrafficChart
                usageOverTime={networkItems}
                hasShadow={options.hasShadow}
                labelDisplayMode={options.labelDisplayMode}
              />
            </Box>
          ))}
      </SimpleGrid>
    </Stack>
  );
};