forked from Abdulbari/sgeUpdated
fixed issue GUI and Datacenter tab related
This commit is contained in:
@@ -41,14 +41,23 @@ const DataCenter = () => {
|
||||
// Projects
|
||||
{
|
||||
name: "Projects",
|
||||
selector: (row) =>
|
||||
(row.projects || []).map((p) => p.name).join(", "),
|
||||
sortable: false,
|
||||
selector: (row) => (row.projects || []).length,
|
||||
sortable: true,
|
||||
minWidth: "200px",
|
||||
cell: (row) => (
|
||||
<span>
|
||||
{(row.projects || []).map((p) => p.name).join(", ") || "-"}
|
||||
</span>
|
||||
<div>
|
||||
{(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' : ''}`}>
|
||||
{project.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-muted">-</span>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
// Physical Machines
|
||||
@@ -68,26 +77,41 @@ const DataCenter = () => {
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Total Active VMs",
|
||||
name: "Virtual Machines",
|
||||
selector: (row) => {
|
||||
const pms = getAllPhysicalMachines(row);
|
||||
return pms.reduce(
|
||||
(total, pm) => total + (pm.vms?.active?.length || 0),
|
||||
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: "150px",
|
||||
minWidth: "200px",
|
||||
cell: (row) => {
|
||||
const pms = getAllPhysicalMachines(row);
|
||||
const totalVMs = pms.reduce(
|
||||
(total, pm) => total + (pm.vms?.active?.length || 0),
|
||||
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-1" />
|
||||
<span>{totalVMs}</span>
|
||||
<Monitor size={16} className="mr-2" />
|
||||
<div>
|
||||
<div className="font-weight-bold">{vms.total} Total</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
@@ -138,76 +162,78 @@ const DataCenter = () => {
|
||||
<div key={pm.id} className="mb-3 border rounded p-3">
|
||||
<h6 className="text-primary">{pm.name}</h6>
|
||||
|
||||
{/* Active VMs */}
|
||||
<p className="mb-2">
|
||||
<strong>Active VMs ({pm.vms?.active?.length || 0}):</strong>
|
||||
</p>
|
||||
{pm.vms?.active?.length > 0 ? (
|
||||
<div className="ml-3">
|
||||
{pm.vms.active.map((vm) => (
|
||||
<div
|
||||
key={vm.id}
|
||||
className="mb-2 p-2 border-left border-success"
|
||||
>
|
||||
<div className="row">
|
||||
<div className="col-md-3">
|
||||
<strong>Name:</strong> {vm.name}
|
||||
</div>
|
||||
<div className="col-md-2">
|
||||
<strong>Status:</strong>
|
||||
<span className="badge badge-success ml-1">
|
||||
{vm.status}
|
||||
</span>
|
||||
</div>
|
||||
<div className="col-md-2">
|
||||
<strong>Power:</strong> {vm.power}
|
||||
</div>
|
||||
<div className="col-md-5">
|
||||
<strong>Config:</strong> CPU: {vm.config?.cpu}, RAM:{" "}
|
||||
{vm.config?.ram}, Disk: {vm.config?.disk}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{/* All VMs */}
|
||||
<div className="mb-2 d-flex justify-content-between align-items-center">
|
||||
<h6 className="mb-0">
|
||||
<Monitor size={16} className="mr-1" />
|
||||
Virtual Machines ({pm.vms?.length || 0})
|
||||
</h6>
|
||||
</div>
|
||||
{pm.vms?.length > 0 ? (
|
||||
<div className="table-responsive mt-2">
|
||||
<table className="table table-bordered table-hover">
|
||||
<thead className="thead-light">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>Power (W)</th>
|
||||
<th>Configuration</th>
|
||||
<th>Host</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{pm.vms.map((vm) => {
|
||||
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>
|
||||
</td>
|
||||
<td>
|
||||
<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>
|
||||
<td>
|
||||
{vm.power ? (
|
||||
<span>{vm.power.toFixed(2)}</span>
|
||||
) : (
|
||||
<span className="text-muted">-</span>
|
||||
)}
|
||||
</td>
|
||||
<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>
|
||||
</div>
|
||||
<div className="mr-3">
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-muted ml-3">No active VMs</p>
|
||||
)}
|
||||
|
||||
{/* Inactive VMs */}
|
||||
<p className="mb-2 mt-3">
|
||||
<strong>Inactive VMs ({pm.vms?.inactive?.length || 0}):</strong>
|
||||
</p>
|
||||
{pm.vms?.inactive?.length > 0 ? (
|
||||
<div className="ml-3">
|
||||
{pm.vms.inactive.map((vm) => (
|
||||
<div
|
||||
key={vm.id}
|
||||
className="mb-2 p-2 border-left border-warning"
|
||||
>
|
||||
<div className="row">
|
||||
<div className="col-md-3">
|
||||
<strong>Name:</strong> {vm.name}
|
||||
</div>
|
||||
<div className="col-md-2">
|
||||
<strong>Status:</strong>
|
||||
<span className="badge badge-warning ml-1">
|
||||
{vm.status}
|
||||
</span>
|
||||
</div>
|
||||
<div className="col-md-2">
|
||||
<strong>Power:</strong> {vm.power}
|
||||
</div>
|
||||
<div className="col-md-5">
|
||||
<strong>Config:</strong> CPU: {vm.config?.cpu}, RAM:{" "}
|
||||
{vm.config?.ram}, Disk: {vm.config?.disk}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="text-center p-3 bg-light-secondary rounded">
|
||||
<Monitor size={24} className="text-muted mb-1" />
|
||||
<p className="text-muted mb-0">No virtual machines found</p>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-muted ml-3">No inactive VMs</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -28,7 +28,8 @@ import { Edit } from "@mui/icons-material";
|
||||
import { useSnackbar } from "notistack";
|
||||
import { default as SweetAlert } from "sweetalert2";
|
||||
import withReactContent from "sweetalert2-react-content";
|
||||
import { getDataCenters, createDataCenter, updateDataCenter, deleteDataCenter } from "../redux/actions/dataCenter";
|
||||
import { getDataCenters, createDataCenter, updateDataCenter, deleteDataCenter, getEmissionScopes } from "../redux/actions/dataCenter";
|
||||
import { getAreas, getAreasWithCriteria } from "../redux/actions/areas";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { getSectors, getSectorById, getSubSectorById, getConsuptionUnits } from "../redux/actions/datas";
|
||||
import { getAllEmissionSources } from "../redux/actions/emissionSources";
|
||||
@@ -105,6 +106,8 @@ const DataCenterManagement = () => {
|
||||
externalId: "",
|
||||
number: "",
|
||||
address: "",
|
||||
areaId: null,
|
||||
cityId: null,
|
||||
latitude: null,
|
||||
longitude: null,
|
||||
ayposURL: "",
|
||||
@@ -120,14 +123,18 @@ const DataCenterManagement = () => {
|
||||
const [mapPosition, setMapPosition] = useState(null);
|
||||
|
||||
const dataCenterStore = useSelector((state) => state.dataCenter);
|
||||
const emissionScopeStore = useSelector((state) => state.emissionScope);
|
||||
const datasStore = useSelector((state) => state.datas);
|
||||
const emissionSourceStore = useSelector((state) => state.emissionSources);
|
||||
const areasStore = useSelector((state) => state.areas);
|
||||
const [sectorsOptions, setSectorsOptions] = useState([]);
|
||||
const [subSectorsOptions, setSubSectorsOptions] = useState([]);
|
||||
const [emissionSourcesOptions, setEmissionSourcesOptions] = useState([]);
|
||||
const [consuptionUnitsOptions, setConsuptionUnitsOptions] = useState([]);
|
||||
const [activitySubUnitsOptions, setActivitySubUnitsOptions] = useState([]);
|
||||
const [emissionScopesOptions, setEmissionScopesOptions] = useState([]);
|
||||
const [areasOptions, setAreasOptions] = useState([]);
|
||||
const [citiesOptions, setCitiesOptions] = useState([]);
|
||||
|
||||
// Add state for selected sector and sub sector like in data input
|
||||
const [selectedSector, setSelectedSector] = useState(null);
|
||||
@@ -215,6 +222,8 @@ const DataCenterManagement = () => {
|
||||
useEffect(() => {
|
||||
dispatch(getDataCenters());
|
||||
dispatch(getSectors());
|
||||
dispatch(getAreas());
|
||||
dispatch(getEmissionScopes());
|
||||
}, [dispatch]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -295,17 +304,48 @@ const DataCenterManagement = () => {
|
||||
}, [datasStore?.consuptionUnits]);
|
||||
|
||||
useEffect(() => {
|
||||
setEmissionScopesOptions([
|
||||
{
|
||||
label: "Şehir İçi",
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
label: "Şehir Dışı",
|
||||
value: true,
|
||||
},
|
||||
]);
|
||||
}, []);
|
||||
if (emissionScopeStore?.emissionScopes) {
|
||||
setEmissionScopesOptions(
|
||||
emissionScopeStore.emissionScopes.map((scope) => ({
|
||||
value: scope.id,
|
||||
label: scope.tag,
|
||||
}))
|
||||
);
|
||||
}
|
||||
}, [emissionScopeStore?.emissionScopes]);
|
||||
|
||||
// Set areas options when areas data is loaded
|
||||
useEffect(() => {
|
||||
if (areasStore?.areas) {
|
||||
setAreasOptions(
|
||||
areasStore.areas.map((area) => ({
|
||||
value: area.id,
|
||||
label: area.tag,
|
||||
}))
|
||||
);
|
||||
}
|
||||
}, [areasStore?.areas]);
|
||||
|
||||
// Set cities options when selected area changes
|
||||
useEffect(() => {
|
||||
if (selectedDataCenter.areaId && areasStore?.areas) {
|
||||
const selectedArea = areasStore.areas.find(
|
||||
(area) => area.id === selectedDataCenter.areaId
|
||||
);
|
||||
if (selectedArea?.cities) {
|
||||
setCitiesOptions(
|
||||
selectedArea.cities.map((city) => ({
|
||||
value: city.id,
|
||||
label: city.name,
|
||||
}))
|
||||
);
|
||||
} else {
|
||||
setCitiesOptions([]);
|
||||
}
|
||||
} else {
|
||||
setCitiesOptions([]);
|
||||
}
|
||||
}, [selectedDataCenter.areaId, areasStore?.areas]);
|
||||
|
||||
const handleEditDataCenter = (row) => {
|
||||
setEditingDataCenter(row);
|
||||
@@ -314,10 +354,12 @@ const DataCenterManagement = () => {
|
||||
externalId: row.externalId,
|
||||
number: row.number,
|
||||
address: row.address,
|
||||
areaId: row.area?.id,
|
||||
cityId: null, // City is a string in the backend, not an object
|
||||
latitude: row.latitude,
|
||||
longitude: row.longitude,
|
||||
ayposURL: row.ayposURL,
|
||||
city: row.city,
|
||||
city: row.city || "",
|
||||
emissionScopeId: row.emissionScope?.id,
|
||||
sectorId: row.sector?.id,
|
||||
subSectorId: row.subSector?.id,
|
||||
@@ -364,9 +406,56 @@ const DataCenterManagement = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const errors = [];
|
||||
|
||||
// Required fields
|
||||
if (!selectedDataCenter.name) {
|
||||
errors.push(t("DataCenter.nameRequired"));
|
||||
}
|
||||
if (!selectedDataCenter.externalId) {
|
||||
errors.push(t("DataCenter.externalIdRequired"));
|
||||
}
|
||||
if (!selectedDataCenter.sectorId) {
|
||||
errors.push(t("DataCenter.sectorRequired"));
|
||||
}
|
||||
|
||||
// Validate external ID is a number
|
||||
if (selectedDataCenter.externalId && isNaN(parseInt(selectedDataCenter.externalId))) {
|
||||
errors.push(t("DataCenter.externalIdMustBeNumber"));
|
||||
}
|
||||
|
||||
// Validate coordinates if either is provided
|
||||
if ((selectedDataCenter.latitude && !selectedDataCenter.longitude) ||
|
||||
(!selectedDataCenter.latitude && selectedDataCenter.longitude)) {
|
||||
errors.push(t("DataCenter.bothCoordinatesRequired"));
|
||||
}
|
||||
|
||||
// Validate area and city are selected together
|
||||
if (selectedDataCenter.areaId && !selectedDataCenter.cityId) {
|
||||
errors.push(t("DataCenter.cityRequired"));
|
||||
}
|
||||
|
||||
// Validate sector hierarchy
|
||||
if (selectedDataCenter.subSectorId && !selectedDataCenter.sectorId) {
|
||||
errors.push(t("DataCenter.sectorRequired"));
|
||||
}
|
||||
if (selectedDataCenter.emissionSourceId && !selectedDataCenter.subSectorId) {
|
||||
errors.push(t("DataCenter.subSectorRequired"));
|
||||
}
|
||||
if (selectedDataCenter.consuptionUnitId && !selectedDataCenter.emissionSourceId) {
|
||||
errors.push(t("DataCenter.emissionSourceRequired"));
|
||||
}
|
||||
|
||||
return errors;
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!selectedDataCenter.name || !selectedDataCenter.externalId) {
|
||||
enqueueSnackbar(t("Common.fillRequiredFields"), { variant: "error" });
|
||||
const validationErrors = validateForm();
|
||||
if (validationErrors.length > 0) {
|
||||
validationErrors.forEach(error => {
|
||||
enqueueSnackbar(error, { variant: "error" });
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -397,10 +486,20 @@ const DataCenterManagement = () => {
|
||||
handleCloseModal();
|
||||
} catch (error) {
|
||||
console.error("Submit error:", error);
|
||||
enqueueSnackbar(
|
||||
error?.message || t("DataCenter.submitError"),
|
||||
{ variant: "error" }
|
||||
);
|
||||
|
||||
// Handle specific error cases
|
||||
if (error.message?.includes("duplicate")) {
|
||||
enqueueSnackbar(t("DataCenter.duplicateExternalId"), { variant: "error" });
|
||||
} else if (error.message?.includes("permission")) {
|
||||
enqueueSnackbar(t("Common.noPermission"), { variant: "error" });
|
||||
} else if (error.message?.includes("not found")) {
|
||||
enqueueSnackbar(t("DataCenter.resourceNotFound"), { variant: "error" });
|
||||
} else {
|
||||
enqueueSnackbar(
|
||||
error?.message || t("DataCenter.submitError"),
|
||||
{ variant: "error" }
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -599,19 +698,49 @@ const DataCenterManagement = () => {
|
||||
</Col>
|
||||
<Col sm="6">
|
||||
<FormGroup>
|
||||
<Label for="city">{t("DataCenter.city")}</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="city"
|
||||
id="city"
|
||||
placeholder={t("DataCenter.city")}
|
||||
value={selectedDataCenter.city}
|
||||
onChange={(e) =>
|
||||
<Label for="area">Area</Label>
|
||||
<Select
|
||||
id="area"
|
||||
name="area"
|
||||
placeholder="Select area"
|
||||
options={areasOptions}
|
||||
value={areasOptions?.find(
|
||||
(option) => option.value === selectedDataCenter.areaId
|
||||
)}
|
||||
onChange={(option) => {
|
||||
setSelectedDataCenter({
|
||||
...selectedDataCenter,
|
||||
city: e.target.value,
|
||||
})
|
||||
}
|
||||
areaId: option?.value,
|
||||
cityId: null,
|
||||
city: "",
|
||||
});
|
||||
}}
|
||||
isClearable
|
||||
filterOption={customFilterForSelect}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col sm="6">
|
||||
<FormGroup>
|
||||
<Label for="city">City</Label>
|
||||
<Select
|
||||
id="city"
|
||||
name="city"
|
||||
placeholder="Select city"
|
||||
options={citiesOptions}
|
||||
value={citiesOptions?.find(
|
||||
(option) => option.value === selectedDataCenter.cityId
|
||||
)}
|
||||
onChange={(option) => {
|
||||
setSelectedDataCenter({
|
||||
...selectedDataCenter,
|
||||
cityId: option?.value,
|
||||
city: option?.label || "",
|
||||
});
|
||||
}}
|
||||
isClearable
|
||||
filterOption={customFilterForSelect}
|
||||
isDisabled={!selectedDataCenter.areaId}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
@@ -670,7 +799,7 @@ const DataCenterManagement = () => {
|
||||
</Col>
|
||||
<Col sm="6">
|
||||
<FormGroup>
|
||||
<Label for="sector">Sector</Label>
|
||||
<Label for="sector">Sector <span className="text-danger">*</span></Label>
|
||||
<Select
|
||||
id="sector"
|
||||
name="sector"
|
||||
|
||||
@@ -3,7 +3,7 @@ import { MaterialReactTable } from "material-react-table";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Card, CardHeader, CardTitle, Alert } from "reactstrap";
|
||||
import { getVMEmissionSummary } from "../../redux/actions/mainDataTables/index";
|
||||
import { getMainDataTablesWithPaginate } from "../../redux/actions/mainDataTables/index";
|
||||
import { editNumbers } from "../../components/edit-numbers";
|
||||
|
||||
function MainDataTables() {
|
||||
@@ -13,13 +13,18 @@ function MainDataTables() {
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
// Fetch VM emission data
|
||||
dispatch(getVMEmissionSummary());
|
||||
} catch (err) {
|
||||
console.error('Error in MainDataTables:', err);
|
||||
setError(err.message);
|
||||
}
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await dispatch(getMainDataTablesWithPaginate());
|
||||
} catch (err) {
|
||||
console.error('Error in MainDataTables:', err);
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, [dispatch]);
|
||||
|
||||
// Debug log for store data
|
||||
@@ -27,44 +32,46 @@ function MainDataTables() {
|
||||
console.log('Current store data:', mainDataTablesStore);
|
||||
}, [mainDataTablesStore]);
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
header: "VM ID",
|
||||
accessorKey: "vmId",
|
||||
header: t("ID"),
|
||||
accessorKey: "id",
|
||||
Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span>,
|
||||
},
|
||||
{
|
||||
header: "Data Center",
|
||||
accessorKey: "dataCenter",
|
||||
header: t("Year"),
|
||||
accessorKey: "year",
|
||||
Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span>,
|
||||
},
|
||||
{
|
||||
header: "Project",
|
||||
accessorKey: "project",
|
||||
Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span>,
|
||||
header: t("Sector"),
|
||||
accessorKey: "sector",
|
||||
Cell: ({ cell, row }) => <span>{row.original?.sector?.tag || "-"}</span>,
|
||||
},
|
||||
{
|
||||
header: "Physical Machine",
|
||||
accessorKey: "physicalMachine",
|
||||
Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span>,
|
||||
header: t("Sub Sector"),
|
||||
accessorKey: "subSector",
|
||||
Cell: ({ cell, row }) => <span>{row.original?.subSector?.tag || "-"}</span>,
|
||||
},
|
||||
{
|
||||
header: "Virtual Machine",
|
||||
accessorKey: "vmName",
|
||||
Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span>,
|
||||
header: t("Activity Sub Unit"),
|
||||
accessorKey: "activitySubUnit",
|
||||
Cell: ({ cell, row }) => <span>{row.original?.activitySubUnit?.tag || "-"}</span>,
|
||||
},
|
||||
{
|
||||
header: "VM Power (W)",
|
||||
accessorKey: "vmPower",
|
||||
Cell: ({ cell }) => <span>{editNumbers(cell.getValue()) || "-"}</span>,
|
||||
header: t("Emission Source"),
|
||||
accessorKey: "emissionSource",
|
||||
Cell: ({ cell, row }) => <span>{row.original?.emissionSource?.tag || "-"}</span>,
|
||||
},
|
||||
{
|
||||
header: "VM Status",
|
||||
accessorKey: "vmStatus",
|
||||
Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span>,
|
||||
header: t("Emission Scope"),
|
||||
accessorKey: "emissionScope",
|
||||
Cell: ({ cell, row }) => <span>{row.original?.emissionScope?.tag || "-"}</span>,
|
||||
},
|
||||
{
|
||||
header: "Total Emissions",
|
||||
header: t("Total Emission"),
|
||||
accessorKey: "totalEmission",
|
||||
Cell: ({ cell }) => <span>{editNumbers(cell.getValue()) || "-"}</span>,
|
||||
},
|
||||
@@ -84,17 +91,18 @@ function MainDataTables() {
|
||||
Cell: ({ cell }) => <span>{editNumbers(cell.getValue()) || "-"}</span>,
|
||||
},
|
||||
{
|
||||
header: "Created Date",
|
||||
header: t("Created Date"),
|
||||
accessorKey: "createdDate",
|
||||
Cell: ({ cell }) => (
|
||||
<span>
|
||||
{cell.getValue() ? new Date(cell.getValue()).toLocaleString() : "-"}
|
||||
</span>
|
||||
),
|
||||
sortable: true,
|
||||
},
|
||||
];
|
||||
|
||||
const tableData = mainDataTablesStore?.vmEmissionSummary || [];
|
||||
const tableData = mainDataTablesStore?.mainDataTablesWithPaginate?.content || [];
|
||||
console.log('VM Emission data:', tableData);
|
||||
|
||||
if (error) {
|
||||
@@ -109,7 +117,7 @@ function MainDataTables() {
|
||||
<div style={{ marginTop: "2%" }}>
|
||||
<Card>
|
||||
<CardHeader className="border-bottom">
|
||||
<CardTitle tag="h4">{t("Carbon Emission Data")}</CardTitle>
|
||||
<CardTitle tag="h4">{t("Raw Data")}</CardTitle>
|
||||
</CardHeader>
|
||||
<MaterialReactTable
|
||||
columns={columns}
|
||||
@@ -137,7 +145,9 @@ function MainDataTables() {
|
||||
density: 'compact'
|
||||
}}
|
||||
state={{
|
||||
isLoading: !mainDataTablesStore?.vmEmissionSummary
|
||||
isLoading: loading,
|
||||
showProgressBars: true,
|
||||
showSkeletons: true,
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user