andwati/dokploy
1
0
Fork 0
mirror of https://github.com/andwati/dokploy.git synced 2026-11-10 05:55:18 +00: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
apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-chart.tsx
+5 -22
View File
@@ -3,7 +3,6 @@ import {
Area, Area,
AreaChart, AreaChart,
CartesianGrid, CartesianGrid,
Legend,
ResponsiveContainer, ResponsiveContainer,
Tooltip, Tooltip,
YAxis, YAxis,
@@ -22,7 +21,6 @@ export const DockerDiskChart = ({ acummulativeData, diskTotal }: Props) => {
name: `Point ${index + 1}`, name: `Point ${index + 1}`,
usedGb: +item.value.diskUsage, usedGb: +item.value.diskUsage,
totalGb: +item.value.diskTotal, totalGb: +item.value.diskTotal,
freeGb: item.value.diskFree,
}; };
}); });
@@ -39,36 +37,23 @@ export const DockerDiskChart = ({ acummulativeData, diskTotal }: Props) => {
}} }}
> >
<defs> <defs>
<linearGradient id="colorUsed" x1="0" y1="0" x2="0" y2="1"> <linearGradient id="colorDisk" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#6C28D9" stopOpacity={0.8} /> <stop offset="5%" stopColor="#27272A" stopOpacity={0.8} />
<stop offset="95%" stopColor="#6C28D9" stopOpacity={0} /> <stop offset="95%" stopColor="white" 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> </linearGradient>
</defs> </defs>
<YAxis stroke="#A1A1AA" domain={[0, diskTotal]} /> <YAxis stroke="#A1A1AA" domain={[0, diskTotal]} />
<CartesianGrid strokeDasharray="3 3" stroke="#27272A" /> <CartesianGrid strokeDasharray="3 3" stroke="#27272A" />
{/* @ts-ignore */} {/* @ts-ignore */}
<Tooltip content={<CustomTooltip />} /> <Tooltip content={<CustomTooltip />} />
<Legend />
<Area <Area
type="monotone" type="monotone"
dataKey="usedGb" dataKey="usedGb"
stroke="#6C28D9" stroke="#27272A"
fillOpacity={1} fillOpacity={1}
fill="url(#colorUsed)" fill="url(#colorDisk)"
name="Used GB" name="Used GB"
/> />
<Area
type="monotone"
dataKey="freeGb"
stroke="#8884d8"
fillOpacity={1}
fill="url(#colorFree)"
name="Free GB"
/>
</AreaChart> </AreaChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>
@@ -83,7 +68,6 @@ interface CustomTooltipProps {
payload: { payload: {
time: string; time: string;
usedGb: number; usedGb: number;
freeGb: number;
totalGb: 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"> <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>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
<p>{`Disk usage: ${payload[0].payload.usedGb} GB`}</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> <p>{`Total disk: ${payload[0].payload.totalGb} GB`}</p>
</div> </div>
); );