141 lines
3.5 KiB
React
141 lines
3.5 KiB
React
// Components
|
|
import { Stack } from "@mui/material";
|
|
import InfraAreaChart from "./InfraAreaChart.jsx";
|
|
import SkeletonLayout from "./skeleton.jsx";
|
|
|
|
// Utils
|
|
import {
|
|
PercentTick,
|
|
TzTick,
|
|
InfrastructureTooltip,
|
|
TemperatureTooltip,
|
|
} from "@/Components/v1/Charts/Utils/chartUtils.jsx";
|
|
import { useTheme } from "@emotion/react";
|
|
import { useHardwareUtils } from "../../Hooks/useHardwareUtils.jsx";
|
|
import { useTranslation } from "react-i18next";
|
|
const AreaChartBoxes = ({ shouldRender, monitor, dateRange }) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
const { buildTemps } = useHardwareUtils();
|
|
|
|
if (!shouldRender) {
|
|
return <SkeletonLayout />;
|
|
}
|
|
|
|
const { stats } = monitor ?? {};
|
|
const { checks } = stats;
|
|
|
|
let latestCheck = checks[0];
|
|
const { temps, tempKeys } = buildTemps(checks);
|
|
|
|
const configs = [
|
|
{
|
|
type: "memory",
|
|
data: checks,
|
|
dataKeys: ["avgMemoryUsage"],
|
|
heading: t("memoryUsage"),
|
|
strokeColor: theme.palette.accent.main, // CAIO_REVIEW
|
|
gradientStartColor: theme.palette.accent.main, // CAIO_REVIEW
|
|
yLabel: t("memoryUsage"),
|
|
yDomain: [0, 1],
|
|
yTick: <PercentTick />,
|
|
xTick: <TzTick dateRange={dateRange} />,
|
|
toolTip: (
|
|
<InfrastructureTooltip
|
|
dotColor={theme.palette.primary.main}
|
|
yKey={"avgMemoryUsage"}
|
|
yLabel={"Memory usage"}
|
|
dateRange={dateRange}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
type: "cpu",
|
|
data: checks,
|
|
dataKeys: ["avgCpuUsage"],
|
|
heading: t("cpuUsage"),
|
|
strokeColor: theme.palette.success.main,
|
|
gradientStartColor: theme.palette.success.main,
|
|
yLabel: t("cpuUsage"),
|
|
yDomain: [0, 1],
|
|
yTick: <PercentTick />,
|
|
xTick: <TzTick dateRange={dateRange} />,
|
|
toolTip: (
|
|
<InfrastructureTooltip
|
|
dotColor={theme.palette.success.main}
|
|
yKey={"avgCpuUsage"}
|
|
yLabel={"CPU usage"}
|
|
dateRange={dateRange}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
type: "temperature",
|
|
data: temps,
|
|
dataKeys: tempKeys,
|
|
strokeColor: theme.palette.error.main,
|
|
gradientStartColor: theme.palette.error.main,
|
|
heading: t("cpuTemperature"),
|
|
yLabel: "Temperature",
|
|
xTick: <TzTick dateRange={dateRange} />,
|
|
yDomain: [
|
|
0,
|
|
Math.max(Math.max(...temps.flatMap((t) => tempKeys.map((k) => t[k]))) * 1.1, 200),
|
|
],
|
|
toolTip: (
|
|
<TemperatureTooltip
|
|
keys={tempKeys}
|
|
dotColor={theme.palette.error.main}
|
|
dateRange={dateRange}
|
|
/>
|
|
),
|
|
},
|
|
...(latestCheck?.disks?.map((disk, idx) => ({
|
|
type: "disk",
|
|
data: checks,
|
|
diskIndex: idx,
|
|
dataKeys: [`disks[${idx}].usagePercent`],
|
|
heading: `Disk${idx} usage`,
|
|
strokeColor: theme.palette.warning.main,
|
|
gradientStartColor: theme.palette.warning.main,
|
|
yLabel: t("diskUsage"),
|
|
yDomain: [0, 1],
|
|
yTick: <PercentTick />,
|
|
xTick: <TzTick dateRange={dateRange} />,
|
|
toolTip: (
|
|
<InfrastructureTooltip
|
|
dotColor={theme.palette.warning.main}
|
|
yKey={`disks.usagePercent`}
|
|
yLabel={"Disc usage"}
|
|
yIdx={idx}
|
|
dateRange={dateRange}
|
|
/>
|
|
),
|
|
})) || []),
|
|
];
|
|
|
|
return (
|
|
<Stack
|
|
direction={"row"}
|
|
// height={chartContainerHeight} // FE team HELP! Possibly no longer needed?
|
|
gap={theme.spacing(8)} // FE team HELP!
|
|
flexWrap="wrap" // //FE team HELP! Better way to do this?
|
|
sx={{
|
|
"& > *": {
|
|
flexBasis: `calc(50% - ${theme.spacing(8)})`,
|
|
maxWidth: `calc(50% - ${theme.spacing(8)})`,
|
|
},
|
|
}}
|
|
>
|
|
{configs.map((config) => (
|
|
<InfraAreaChart
|
|
key={`${config.type}-${config.diskIndex ?? ""}`}
|
|
config={config}
|
|
/>
|
|
))}
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default AreaChartBoxes;
|