omar/sgeUpdated
1
0
Fork 0
forked from Abdulbari/sgeUpdated
Code Pull Requests Actions Activity

Fix the DataCenterOverview tab display by removing project relation

Browse Source
This commit is contained in:
Khaled Elagamy
2025-08-19 05:39:02 +03:00
parent b5901a049c
commit 8bd6d94174
1 changed files with 87 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
sge-frontend/src/views/DataCenter.js
View File

@@ -18,10 +18,10 @@ const DataCenter = () => {
const [refreshInterval, setRefreshInterval] = useState(null);
const getAllPhysicalMachines = (dataCenter) => {
if (!dataCenter.projects) return [];
return dataCenter.projects.flatMap(project =>
project.physicalMachines || []
);
// Physical machines are directly in the dataCenter object, not in projects
const pms = dataCenter.physicalMachines || [];
console.log(`Physical machines for ${dataCenter.dataCenter}:`, pms);
return pms;
};
// Table columns following your pattern
@@ -38,18 +38,23 @@ const DataCenter = () => {
sortable: true,
minWidth: "200px",
},
// Projects
// Projects - Based on API response, this field might not exist or be structured differently
{
name: "Projects",
selector: (row) => (row.projects || []).length,
selector: (row) => row.projects?.length || 0,
sortable: true,
minWidth: "200px",
cell: (row) => (
<div>
{(row.projects || []).length > 0 ? (
{row.projects && row.projects.length > 0 ? (
<div className="d-flex flex-column">
{row.projects.map((project, index) => (
<div key={project.id} className={`badge badge-light-primary ${index > 0 ? 'mt-1' : ''}`}>
<div
key={project.id}
className={`badge badge-light-primary ${
index > 0 ? "mt-1" : ""
}`}
>
{project.name}
</div>
))}
@@ -80,27 +85,39 @@ const DataCenter = () => {
name: "Virtual Machines",
selector: (row) => {
const pms = getAllPhysicalMachines(row);
const vms = pms.reduce((acc, pm) => {
if (!pm.vms) return acc;
return {
active: acc.active + pm.vms.filter(vm => vm.state?.toLowerCase() === "active").length,
total: acc.total + pm.vms.length
};
}, { active: 0, total: 0 });
const vms = pms.reduce(
(acc, pm) => {
if (!pm.vms) return acc;
return {
active:
acc.active +
pm.vms.filter((vm) => vm.state?.toLowerCase() === "active")
.length,
total: acc.total + pm.vms.length,
};
},
{ active: 0, total: 0 }
);
return vms.total;
},
sortable: true,
minWidth: "200px",
cell: (row) => {
const pms = getAllPhysicalMachines(row);
const vms = pms.reduce((acc, pm) => {
if (!pm.vms) return acc;
return {
active: acc.active + pm.vms.filter(vm => vm.state?.toLowerCase() === "active").length,
total: acc.total + pm.vms.length
};
}, { active: 0, total: 0 });
const vms = pms.reduce(
(acc, pm) => {
if (!pm.vms) return acc;
return {
active:
acc.active +
pm.vms.filter((vm) => vm.state?.toLowerCase() === "active")
.length,
total: acc.total + pm.vms.length,
};
},
{ active: 0, total: 0 }
);
return (
<div className="d-flex align-items-center">
<Monitor size={16} className="mr-2" />
@@ -109,7 +126,9 @@ const DataCenter = () => {
<div className="small">
<span className="text-success">{vms.active} Active</span>
<span className="text-muted mx-1">•</span>
<span className="text-warning">{vms.total - vms.active} Inactive</span>
<span className="text-warning">
{vms.total - vms.active} Inactive
</span>
</div>
</div>
</div>
@@ -183,14 +202,23 @@ const DataCenter = () => {
</thead>
<tbody>
{pm.vms.map((vm) => {
const isActive = vm.state && ["ACTIVE", "active"].includes(vm.state);
const isActive =
vm.state && ["ACTIVE", "active"].includes(vm.state);
return (
<tr key={vm.id}>
<td>
<span className="font-weight-bold">{vm.vmName || vm.vm_name}</span>
<span className="font-weight-bold">
{vm.vmName || vm.vm_name}
</span>
</td>
<td>
<div className={`d-inline-block px-2 py-1 rounded-pill ${isActive ? 'bg-light-success text-success' : 'bg-light-warning text-warning'}`}>
<div
className={`d-inline-block px-2 py-1 rounded-pill ${
isActive
? "bg-light-success text-success"
: "bg-light-warning text-warning"
}`}
>
{vm.state}
</div>
</td>
@@ -204,23 +232,48 @@ const DataCenter = () => {
<td>
<div className="d-flex align-items-center">
<div className="mr-3">
<small className="text-muted d-block">CPU</small>
<span>{(vm.config?.cpu || (vm.confg && vm.confg[1])) || '-'}</span>
<small className="text-muted d-block">
CPU
</small>
<span>
{vm.config?.cpu ||
(vm.confg && vm.confg[1]) ||
"-"}
</span>
</div>
<div className="mr-3">
<small className="text-muted d-block">RAM</small>
<span>{(vm.config?.ram || (vm.confg && vm.confg[2])) || '-'} GB</span>
<small className="text-muted d-block">
RAM
</small>
<span>
{vm.config?.ram ||
(vm.confg && vm.confg[2]) ||
"-"}{" "}
GB
</span>
</div>
<div>
<small className="text-muted d-block">Disk</small>
<span>{(vm.config?.disk || (vm.confg && vm.confg[3])) || '-'} GB</span>
<small className="text-muted d-block">
Disk
</small>
<span>
{vm.config?.disk ||
(vm.confg && vm.confg[3]) ||
"-"}{" "}
GB
</span>
</div>
</div>
</td>
<td>
<div className="d-flex align-items-center">
<Server size={14} className="mr-1" />
<span>{vm.host || vm.hostingPm || (vm.confg && vm.confg[4]) || '-'}</span>
<span>
{vm.host ||
vm.hostingPm ||
(vm.confg && vm.confg[4]) ||
"-"}
</span>
</div>
</td>
</tr>
@@ -241,8 +294,6 @@ const DataCenter = () => {
);
};
return (
<div style={{ marginTop: "2%" }}>
<Card>