Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-11-18 11:36:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update virtual-machines.tsx

Browse Source
This commit is contained in:
MacRimi
2025-10-18 18:48:01 +02:00
parent 4d3b3d984d
commit fc5ff1782b
1 changed files with 26 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
AppImage/components/virtual-machines.tsx
View File

@@ -140,23 +140,33 @@ const formatStorage = (sizeInGB: number): string => {
} }
const getUsageColor = (percent: number): string => { const getUsageColor = (percent: number): string => {
if (percent >= 80) return "text-red-500" if (percent >= 95) return "text-red-500"
if (percent >= 50) return "text-yellow-500" if (percent >= 86) return "text-orange-500"
if (percent >= 71) return "text-yellow-500"
return "text-white" return "text-white"
} }
const getIconColor = (percent: number): string => { const getIconColor = (percent: number): string => {
if (percent >= 80) return "text-red-500" if (percent >= 95) return "text-red-500"
if (percent >= 50) return "text-yellow-500" if (percent >= 86) return "text-orange-500"
if (percent >= 71) return "text-yellow-500"
return "text-green-500" return "text-green-500"
} }
const getProgressColor = (percent: number): string => { const getProgressColor = (percent: number): string => {
if (percent >= 80) return "[&>div]:bg-red-500" if (percent >= 95) return "[&>div]:bg-red-500"
if (percent >= 50) return "[&>div]:bg-yellow-500" if (percent >= 86) return "[&>div]:bg-orange-500"
if (percent >= 71) return "[&>div]:bg-yellow-500"
return "[&>div]:bg-blue-500" return "[&>div]:bg-blue-500"
} }
const getModalProgressColor = (percent: number): string => {
if (percent >= 95) return "bg-red-500"
if (percent >= 86) return "bg-orange-500"
if (percent >= 71) return "bg-yellow-500"
return "bg-blue-500"
}
export function VirtualMachines() { export function VirtualMachines() {
const { const {
data: vmData, data: vmData,
@@ -342,17 +352,17 @@ export function VirtualMachines() {
const getMemoryUsageColor = (percent: number | null) => { const getMemoryUsageColor = (percent: number | null) => {
if (percent === null) return "bg-blue-500" if (percent === null) return "bg-blue-500"
if (percent >= 90) return "bg-red-500" if (percent >= 95) return "bg-red-500"
if (percent >= 80) return "bg-orange-500" if (percent >= 86) return "bg-orange-500"
if (percent >= 60) return "bg-yellow-500" if (percent >= 71) return "bg-yellow-500"
return "bg-green-500" return "bg-blue-500"
} }
const getMemoryPercentTextColor = (percent: number | null) => { const getMemoryPercentTextColor = (percent: number | null) => {
if (percent === null) return "text-muted-foreground" if (percent === null) return "text-muted-foreground"
if (percent >= 90) return "text-red-500" if (percent >= 95) return "text-red-500"
if (percent >= 80) return "text-orange-500" if (percent >= 86) return "text-orange-500"
if (percent >= 60) return "text-yellow-500" if (percent >= 71) return "text-yellow-500"
return "text-green-500" return "text-green-500"
} }
@@ -684,7 +694,7 @@ export function VirtualMachines() {
</div> </div>
<Progress <Progress
value={selectedVM.cpu * 100} value={selectedVM.cpu * 100}
className={`h-1.5 ${getProgressColor(selectedVM.cpu * 100)}`} className={`h-1.5 ${getModalProgressColor(selectedVM.cpu * 100)}`}
/> />
</div> </div>
<div> <div>
@@ -696,7 +706,7 @@ export function VirtualMachines() {
</div> </div>
<Progress <Progress
value={(selectedVM.mem / selectedVM.maxmem) * 100} value={(selectedVM.mem / selectedVM.maxmem) * 100}
className={`h-1.5 ${getProgressColor((selectedVM.mem / selectedVM.maxmem) * 100)}`} className={`h-1.5 ${getModalProgressColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
/> />
</div> </div>
<div> <div>
@@ -708,7 +718,7 @@ export function VirtualMachines() {
</div> </div>
<Progress <Progress
value={(selectedVM.disk / selectedVM.maxdisk) * 100} value={(selectedVM.disk / selectedVM.maxdisk) * 100}
className={`h-1.5 ${getProgressColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`} className={`h-1.5 ${getModalProgressColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`}
/> />
</div> </div>
<div> <div>