Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy.git synced 2026-06-15 20:25:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: show only used disk space in monitoring graph

Browse Source
This commit is contained in:
lasseveenliese
2026-03-08 23:46:06 +01:00
parent 8e9ab98a7a
commit fc8a5153f1
1 changed files with 5 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-chart.tsx
View File

@@ -3,7 +3,6 @@ import {
Area,
AreaChart,
CartesianGrid,
Legend,
ResponsiveContainer,
Tooltip,
YAxis,
@@ -22,7 +21,6 @@ export const DockerDiskChart = ({ acummulativeData, diskTotal }: Props) => {
name: `Point ${index + 1}`,
usedGb: +item.value.diskUsage,
totalGb: +item.value.diskTotal,
freeGb: item.value.diskFree,
};
});
@@ -39,36 +37,23 @@ export const DockerDiskChart = ({ acummulativeData, diskTotal }: Props) => {
}}
>
<defs>
<linearGradient id="colorUsed" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#6C28D9" stopOpacity={0.8} />
<stop offset="95%" stopColor="#6C28D9" stopOpacity={0} />
</linearGradient>
<linearGradient id="colorFree" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#6C28D9" stopOpacity={0.2} />
<stop offset="95%" stopColor="#6C28D9" stopOpacity={0} />
<linearGradient id="colorDisk" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#27272A" stopOpacity={0.8} />
<stop offset="95%" stopColor="white" stopOpacity={0} />
</linearGradient>
</defs>
<YAxis stroke="#A1A1AA" domain={[0, diskTotal]} />
<CartesianGrid strokeDasharray="3 3" stroke="#27272A" />
{/* @ts-ignore */}
<Tooltip content={<CustomTooltip />} />
<Legend />
<Area
type="monotone"
dataKey="usedGb"
stroke="#6C28D9"
stroke="#27272A"
fillOpacity={1}
fill="url(#colorUsed)"
fill="url(#colorDisk)"
name="Used GB"
/>
<Area
type="monotone"
dataKey="freeGb"
stroke="#8884d8"
fillOpacity={1}
fill="url(#colorFree)"
name="Free GB"
/>
</AreaChart>
</ResponsiveContainer>
</div>
@@ -83,7 +68,6 @@ interface CustomTooltipProps {
payload: {
time: string;
usedGb: number;
freeGb: number;
totalGb: number;
};
}[];
@@ -95,7 +79,6 @@ const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
<div className="custom-tooltip bg-background p-2 shadow-lg rounded-md text-primary border">
<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
<p>{`Disk usage: ${payload[0].payload.usedGb} GB`}</p>
<p>{`Disk free: ${payload[0].payload.freeGb} GB`}</p>
<p>{`Total disk: ${payload[0].payload.totalGb} GB`}</p>
</div>
);