filtering raw data page

sge-frontend/src/redux/actions/mainDataTables/index.js

@@ -1,6 +1,6 @@
 import ApplicationService from "../../../services/ApplicationService";
 
-export const getVMEmissionSummary = () => {
+export const getVMEmissionSummary = (datacenterId) => {
   return async (dispatch) => {
     try {
       const response = await ApplicationService.http()
@@ -8,8 +8,8 @@ export const getVMEmissionSummary = () => {
           "/graphql",
           {
             query: `
-              {
+              query GetVMEmissions($datacenterId: ID) {
-                vmEmissionSummary {
+                vmEmissionSummary(datacenterId: $datacenterId) {
                   vmId
                   vmName
                   vmPower
@@ -17,7 +17,6 @@ export const getVMEmissionSummary = () => {
                   totalEmission
                   createdDate
                   physicalMachine
-                  project
                   dataCenter
                   co2
                   ch4
@@ -25,7 +24,10 @@ export const getVMEmissionSummary = () => {
                   reportGeneratedTime
                 }
               }
-            `
+            `,
+            variables: {
+              datacenterId: datacenterId
+            }
           },
           {
             headers: {

sge-frontend/src/views/DataSet/MainDataTables.js

@@ -2,21 +2,47 @@ import React, { useState, useEffect } from "react";
 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 { Card, CardHeader, CardTitle, Alert, Row, Col, Label } from "reactstrap";
 import { getVMEmissionSummary } from "../../redux/actions/mainDataTables/index";
+import { getDataCenters } from "../../redux/actions/dataCenter";
 import { editNumbers } from "../../components/edit-numbers";
+import Select from "react-select";
 
 function MainDataTables() {
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const mainDataTablesStore = useSelector((state) => state.mainDataTables);
+  const dataCenterStore = useSelector((state) => state.dataCenter);
   const [error, setError] = useState(null);
+  const [selectedDataCenter, setSelectedDataCenter] = useState(null);
+  const [dataCenterOptions, setDataCenterOptions] = useState([]);
+  const [loading, setLoading] = useState(false);
 
+  // Fetch datacenters on component mount
   useEffect(() => {
+    dispatch(getDataCenters());
+  }, [dispatch]);
+
+  // Update datacenter options when datacenters are loaded
+  useEffect(() => {
+    if (dataCenterStore?.dataCenters?.length > 0) {
+      const options = dataCenterStore.dataCenters.map((dataCenter) => ({
+        value: dataCenter.id,
+        label: dataCenter.dataCenter,
+        externalId: dataCenter.externalId,
+      }));
+      setDataCenterOptions(options);
+    }
+  }, [dataCenterStore?.dataCenters]);
+
+  // Fetch VM emission data when datacenter is selected
+  useEffect(() => {
+    if (selectedDataCenter?.value) {
       const fetchData = async () => {
         try {
           setLoading(true);
-        await dispatch(getVMEmissionSummary());
+          setError(null);
+          await dispatch(getVMEmissionSummary(selectedDataCenter.value));
         } catch (err) {
           console.error('Error in MainDataTables:', err);
           setError(err.message);
@@ -25,15 +51,14 @@ function MainDataTables() {
         }
       };
       fetchData();
-  }, [dispatch]);
+    }
+  }, [selectedDataCenter, dispatch]);
 
     // Debug log for store data
   useEffect(() => {
     console.log('Current store data:', mainDataTablesStore);
   }, [mainDataTablesStore]);
 
-  const [loading, setLoading] = useState(true);
-
   const columns = [
     { header: t("VM ID"), accessorKey: "vmId", Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span> },
     { header: t("VM Name"), accessorKey: "vmName", Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span> },
@@ -42,13 +67,15 @@ function MainDataTables() {
     { header: t("Total Emission"), accessorKey: "totalEmission", Cell: ({ cell }) => <span>{editNumbers(cell.getValue()) || "-"}</span> },
     { header: t("Created Date"), accessorKey: "createdDate", Cell: ({ cell }) => (<span>{cell.getValue() ? new Date(cell.getValue()).toLocaleString() : "-"}</span>), sortable: true },
     { header: t("Physical Machine"), accessorKey: "physicalMachine", Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span> },
-    { header: t("Project"), accessorKey: "project", Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span> },
     { header: t("Data Center"), accessorKey: "dataCenter", Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span> },
     { header: "CO2", accessorKey: "co2", Cell: ({ cell }) => <span>{editNumbers(cell.getValue()) || "-"}</span> },
     { header: "CH4", accessorKey: "ch4", Cell: ({ cell }) => <span>{editNumbers(cell.getValue()) || "-"}</span> },
     { header: "N2O", accessorKey: "n2o", Cell: ({ cell }) => <span>{editNumbers(cell.getValue()) || "-"}</span> },
   ];
 
+ 
+
+
   const tableData = mainDataTablesStore?.vmEmissionSummary || [];
   console.log('VM Emission data:', tableData);
 
@@ -66,6 +93,27 @@ function MainDataTables() {
         <CardHeader className="border-bottom">
           <CardTitle tag="h4">{t("Raw Data")}</CardTitle>
         </CardHeader>
+        
+        {/* Datacenter Selection */}
+        <div className="p-3 border-bottom">
+          <Row>
+            <Col md="6">
+              <Label for="datacenter-select">{t("Data Center")}</Label>
+              <Select
+                id="datacenter-select"
+                value={selectedDataCenter}
+                onChange={setSelectedDataCenter}
+                options={dataCenterOptions}
+                placeholder={t("Select a data center...")}
+                isClearable
+                isSearchable
+                isLoading={dataCenterStore?.loading}
+                noOptionsMessage={() => t("No data centers available")}
+              />
+            </Col>
+          </Row>
+        </div>
+        {selectedDataCenter ? (
           <MaterialReactTable
             columns={columns}
             data={tableData}
@@ -97,6 +145,11 @@ function MainDataTables() {
               showSkeletons: true,
             }}
           />
+        ) : (
+          <div className="p-4 text-center text-muted">
+            {t("Please select a data center to view raw data")}
+          </div>
+        )}
       </Card>
     </div>
   );