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

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

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