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,38 +2,63 @@ 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(() => {
-    const fetchData = async () => {
+    dispatch(getDataCenters());
-      try {
-        setLoading(true);
-        await dispatch(getVMEmissionSummary());
-      } catch (err) {
-        console.error('Error in MainDataTables:', err);
-        setError(err.message);
-      } finally {
-        setLoading(false);
-      }
-    };
-    fetchData();
   }, [dispatch]);
 
-  // Debug log for store data
+  // 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);
+          setError(null);
+          await dispatch(getVMEmissionSummary(selectedDataCenter.value));
+        } catch (err) {
+          console.error('Error in MainDataTables:', err);
+          setError(err.message);
+        } finally {
+          setLoading(false);
+        }
+      };
+      fetchData();
+    }
+  }, [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,37 +93,63 @@ function MainDataTables() {
         <CardHeader className="border-bottom">
           <CardTitle tag="h4">{t("Raw Data")}</CardTitle>
         </CardHeader>
-        <MaterialReactTable
+        
-          columns={columns}
+        {/* Datacenter Selection */}
-          data={tableData}
+        <div className="p-3 border-bottom">
-          enableColumnFilters={true}
+          <Row>
-          enableFilters={true}
+            <Col md="6">
-          enableGlobalFilter={true}
+              <Label for="datacenter-select">{t("Data Center")}</Label>
-          enablePagination={true}
+              <Select
-          enableColumnResizing={true}
+                id="datacenter-select"
-          enableStickyHeader={true}
+                value={selectedDataCenter}
-          muiTableContainerProps={{ sx: { maxHeight: 'calc(100vh - 180px)' } }}
+                onChange={setSelectedDataCenter}
-          muiTableProps={{
+                options={dataCenterOptions}
-            sx: {
+                placeholder={t("Select a data center...")}
-              tableLayout: 'auto',
+                isClearable
-            },
+                isSearchable
-          }}
+                isLoading={dataCenterStore?.loading}
-          initialState={{
+                noOptionsMessage={() => t("No data centers available")}
-            pagination: {
+              />
-              pageSize: 100,
+            </Col>
-              pageIndex: 0
+          </Row>
-            },
+        </div>
-            sorting: [
+        {selectedDataCenter ? (
-              { id: 'createdDate', desc: true }
+          <MaterialReactTable
-            ],
+            columns={columns}
-            density: 'compact'
+            data={tableData}
-          }}
+            enableColumnFilters={true}
-          state={{
+            enableFilters={true}
-            isLoading: loading,
+            enableGlobalFilter={true}
-            showProgressBars: true,
+            enablePagination={true}
-            showSkeletons: true,
+            enableColumnResizing={true}
-          }}
+            enableStickyHeader={true}
-        />
+            muiTableContainerProps={{ sx: { maxHeight: 'calc(100vh - 180px)' } }}
+            muiTableProps={{
+              sx: {
+                tableLayout: 'auto',
+              },
+            }}
+            initialState={{
+              pagination: {
+                pageSize: 100,
+                pageIndex: 0
+              },
+              sorting: [
+                { id: 'createdDate', desc: true }
+              ],
+              density: 'compact'
+            }}
+            state={{
+              isLoading: loading,
+              showProgressBars: true,
+              showSkeletons: true,
+            }}
+          />
+        ) : (
+          <div className="p-4 text-center text-muted">
+            {t("Please select a data center to view raw data")}
+          </div>
+        )}
       </Card>
     </div>
   );