CEC-2269: Embdeded Superset (#228)

Co-authored-by: Alexander Andrews <aandrews@fiskerinc.com>

src/components/Dashboard/index.css

@@ -0,0 +1,4 @@
+iframe {
+  width: 100%;
+  height: 100%;
+}

src/components/Dashboard/index.jsx

@@ -1,27 +1,41 @@
 import React, { useEffect } from "react";
-import ResponsiveIFrame from "../Controls/ResponsiveIFrame";
-import { SupersetDashboardURL } from "../../services/superset";
+import api from "../../services/superset";
 import { useStatusContext } from "../Contexts/StatusContext";
-import useStyles from "../useStyles";
+import { useUserContext } from "../Contexts/UserContext";
+import './index.css'
+import { embedDashboard } from "@superset-ui/embedded-sdk";
+
 
 const Dashboard = () => {
-  const classes = useStyles();
   const { setTitle, setSitePath } = useStatusContext();
 
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+
   useEffect(() => {
     setTitle("Datascope");
     setSitePath([]);
+    embedDashboard({
+      id: api.SupersetDashboardID(), // given by the Superset embedding UI
+      supersetDomain: api.SupersetDashboardURL(),
+      mountPoint: document.getElementById("my-superset-container"), // any html element that can contain an iframe
+      fetchGuestToken: () => api.getGuestToken(token),
+      dashboardUiConfig: { hideTab: true, hideTitle: true }, // dashboard UI config: hideTitle, hideTab, hideChartControls (optional)
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
-    <ResponsiveIFrame
-      src={SupersetDashboardURL}
-      title="Dashboard"
-      classes={classes}
-      fullscreen
-    />
+    <div style={{
+      display: 'flex',
+      height: '85vh'
+    }} id="my-superset-container">
+    </div>
   );
 };
 
+//style={{position:'absolute', top:0, left:0, bottom:0, right:0, width:'100%', height:'100%', border:'none', margin:0, padding:0, overflow:'hidden'}}
 export default Dashboard;

src/components/useStyles.jsx

@@ -180,6 +180,15 @@ const useStyles = makeStyles((theme) => ({
     width: "100%",
     height: "100%",
   },
+  iframe: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    width: "100%",
+    height: "100%",
+  },
   embeddedWrapper: {
     marginTop: 10,
     position: "relative",

src/services/superset.js

@@ -1,5 +1,35 @@
-const SUPERSET_BASE_URL = process.env.REACT_APP_SUPERSET_URL;
+import {
+  getAuthHeaderOptions,
+  addQueryParams,
+} from "../utils/http";
 
-const SupersetDashboardURL = `${SUPERSET_BASE_URL}/r/3`;
+//Added the token we got from the first authorization and set it as the auth token, and that allowed us to hit the request
 
-export { SupersetDashboardURL };
+const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
+
+const supersetAPI = {
+  getGuestToken: async(token) => {
+    const u = addQueryParams(`${API_ENDPOINT}/dashboard/guest-token`);
+    let res = await fetch(u, {
+      method: "GET",
+      headers: Object.assign(
+        //{ "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    })
+    let r = await res.json()
+    let q = r["token"]
+    return q
+  },
+  SupersetDashboardURL: () => {
+    const SUPERSET_BASE_URL = process.env.REACT_APP_SUPERSET_URL;
+    return SUPERSET_BASE_URL
+  },
+  SupersetDashboardID: () => {
+    const SUPERSET_BASE_ID = process.env.REACT_APP_SUPERSET_KEYS_LIST;
+    return SUPERSET_BASE_ID
+  }
+
+}
+
+export default supersetAPI;