From 26a0275842eee5742a62cf6bd2a59907d87455d3 Mon Sep 17 00:00:00 2001
From: pmekala01 <66108297+pmekala01@users.noreply.github.com>
Date: Mon, 2 Dec 2024 02:30:14 -0600
Subject: [PATCH] Updated dashboard layout for DataPipelining

---
 package-lock.json                |  8 ++--
 src/components/datapipelining.js | 72 ++++++++++++++++++++++++++++++++
 src/pages/dashboard.js           | 11 ++++-
 3 files changed, 85 insertions(+), 6 deletions(-)
 create mode 100644 src/components/datapipelining.js

diff --git a/package-lock.json b/package-lock.json
index 86c06bb6c..3bb0fafa2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17048,16 +17048,16 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.6.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
-      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=14.17"
+        "node": ">=4.2.0"
       }
     },
     "node_modules/unbox-primitive": {
diff --git a/src/components/datapipelining.js b/src/components/datapipelining.js
new file mode 100644
index 000000000..15aea8758
--- /dev/null
+++ b/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;
diff --git a/src/pages/dashboard.js b/src/pages/dashboard.js
index d1c5e4ad2..fd6bf11af 100644
--- a/src/pages/dashboard.js
+++ b/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>
   );