T4

src/components/datapipelining.js

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+
+const DataPipelining = () => {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  // Trigger pipeline function
+  const triggerPipeline = async () => {
+    setLoading(true);
+    try {
+      const response = await fetch('http://localhost:6789/api/pipeline_schedules/3/pipeline_runs/abc123', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          "pipeline_run": {
+            "variables": {
+              "env": "staging",
+              "schema": "public"
+            }
+          }
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to trigger pipeline');
+      }
+
+      const result = await response.json();
+      setData(result); // Store the result if needed
+      console.log('Pipeline Triggered Successfully', result);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <h1>Data Pipelining</h1>
+
+      {/* Button to trigger pipeline */}
+      {/*<button onClick={triggerPipeline}>Trigger Pipeline</button>*/}
+
+      {/* Loading state */}
+      {/*{loading && <div>Loading...</div>}*/}
+
+      {/* Error state */}
+      {/*{error && <div>Error: {error}</div>}*/}
+
+      {/* Success state */}
+      {/*{data && <div>Pipeline Triggered Successfully</div>}*/}
+
+      {/* Display Mage AI Dashboard in an iframe */}
+      <div style={{ marginTop: '20px' }}>
+        <h2>Mage AI Dashboard</h2>
+        <iframe
+          src="http://localhost:6789"
+          width="100%"
+          height="800px"
+          style={{ border: 'none' }}
+          title="Mage AI Dashboard"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DataPipelining;

src/pages/dashboard.js

@@ -1,3 +1,4 @@
+
 import { useAuth0 } from '@auth0/auth0-react';
 import "./dashboard-styles.css";
 import React, { useContext, createContext, useState } from 'react';
@@ -11,6 +12,7 @@ import DataGeneration from '../components/datageneration';
 import FaultMainPage from '../components/faultmanagement/faultmainpage';
 import FaultSide from '../components/faultmanagement/faultside';
 import DataIngestion from '../components/data_ingestion/DataIngestion';
+import DataPipelining from '../components/datapipelining';
 
 const SidebarContext = createContext();
 
@@ -58,8 +60,7 @@ export default function Dashboard() {
     { label: 'Data Ingestion', component: <DataIngestion />},
     { label: 'Dashboarding' },
     { 
-      label: 'Data Pipelining', 
-      url: 'http://localhost:6789',
+      label: 'Data Pipelining',  component: <DataPipelining />
     },
     { label: 'KPI Formulas' },
     { label: 'Data Generation', component: <DataGeneration /> },
@@ -119,6 +120,12 @@ export default function Dashboard() {
         <div className="bg-blue-300 h-[calc(100vh-4.5rem)] w-[20%] overflow-hidden">
           <FaultSide />
         </div>
+        <div className="bg-background h-[calc(100vh-4.5rem)] flex-1 overflow-hidden">
+          <div className="scrollable-content">
+             <DataPipelining />
+          </div>
+        </div>
+
       </div>
     </div>
   );