admin/ota-admin-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CEC-2269: Embdeded Superset (#228)

Browse Source 
Co-authored-by: Alexander Andrews <aandrews@fiskerinc.com>
This commit is contained in:
Alexander Andrews
2022-10-28 12:51:12 -04:00
committed by GitHub
parent 9a9766df12
commit c5a86a5e61
11 changed files with 201 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.env.dev
View File

@@ -2,4 +2,5 @@ REACT_APP_CERT_SERVICE_URL=https://dev-gw.cloud.fiskerinc.com/certificate
REACT_APP_AUTH_SERVICE_URL=https://dev-gw.cloud.fiskerinc.com/compute_auth
REACT_APP_UPLOAD_SERVICE_URL=https://dev-gw.cloud.fiskerinc.com/ota_update
REACT_APP_AUTH_CALLBACK_URL=https://dev-ota-admin.cloud.fiskerinc.com
REACT_APP_SUPERSET_URL=https://dev-superset.cloud.fiskerinc.com/superset/dashboard/8/?native_filters_key=KPnPthpLQ8rT--6PUdsPzQAcwnleRGHk_3dg0PVYfrXc3SE6zZ2x0p7JuerAZ0Pg
REACT_APP_SUPERSET_URL=https://dev-superset-new.cloud.fiskerinc.com
REACT_APP_SUPERSET_KEYS_LIST=0b01ac72-9ef4-4a5f-be34-b1ac0bf972cc

3
.env.local
View File

@@ -2,4 +2,5 @@ REACT_APP_AUTH_SERVICE_URL=http://localhost/compute_auth
REACT_APP_CERT_SERVICE_URL=http://localhost/certificate
REACT_APP_UPLOAD_SERVICE_URL=http://localhost/ota_update
REACT_APP_AUTH_CALLBACK_URL=http://localhost:3000
REACT_APP_SUPERSET_URL=https://dev-superset.cloud.fiskerinc.com/superset/dashboard/8/?native_filters_key=KPnPthpLQ8rT--6PUdsPzQAcwnleRGHk_3dg0PVYfrXc3SE6zZ2x0p7JuerAZ0Pg
REACT_APP_SUPERSET_URL=https://dev-superset-new.cloud.fiskerinc.com
REACT_APP_SUPERSET_KEYS_LIST=0b01ac72-9ef4-4a5f-be34-b1ac0bf972cc

3
.env.prd
View File

@@ -2,4 +2,5 @@ REACT_APP_AUTH_SERVICE_URL=https://gw.cloud.fiskerinc.com/compute_auth
REACT_APP_CERT_SERVICE_URL=https://gw.cloud.fiskerinc.com/certificate
REACT_APP_UPLOAD_SERVICE_URL=https://gw.cloud.fiskerinc.com/ota_update
REACT_APP_AUTH_CALLBACK_URL=https://ota-admin.cloud.fiskerinc.com
REACT_APP_SUPERSET_URL=https://superset.cloud.fiskerinc.com/superset/dashboard/9/?native_filters_key=mfJ1VjGTcLUKz7gQs_DgClZhjcdNucYMrPruNibcyDnhkDwdHbAumBRVTpA5tFH_
REACT_APP_SUPERSET_URL=https://superset.cloud.fiskerinc.com
REACT_APP_SUPERSET_KEYS_LIST=0b01ac72-9ef4-4a5f-be34-b1ac0bf972cc

3
.env.stg
View File

@@ -2,4 +2,5 @@ REACT_APP_AUTH_SERVICE_URL=https://stg-gw.cloud.fiskerinc.com/compute_auth
REACT_APP_CERT_SERVICE_URL=https://stg-gw.cloud.fiskerinc.com/certificate
REACT_APP_UPLOAD_SERVICE_URL=https://stg-gw.cloud.fiskerinc.com/ota_update
REACT_APP_AUTH_CALLBACK_URL=https://stg-ota-admin.cloud.fiskerinc.com
REACT_APP_SUPERSET_URL=https://stg-superset.cloud.fiskerinc.com/superset/dashboard/11/?native_filters_key=Vsj5MqKEPxPnyCgVzFWSSI3E_KgEJxD30afm_URlamPqBi6ypNKsaQ90YhQ6Fc54
REACT_APP_SUPERSET_URL=https://stg-superset.cloud.fiskerinc.com
REACT_APP_SUPERSET_KEYS_LIST=0b01ac72-9ef4-4a5f-be34-b1ac0bf972cc

1
.env.template
View File

@@ -3,3 +3,4 @@ REACT_APP_UPLOAD_SERVICE_URL=http://localhost/ota_update
REACT_APP_AUTH_CALLBACK_URL=http://localhost:3000
REACT_APP_SUPERSET_URL=https://dev-superset.cloud.fiskerinc.com
REACT_APP_CERT_SERVICE_URL=http://localhost/certificate
REACT_APP_SUPERSET_KEYS_LIST=0b01ac72-9ef4-4a5f-be34-b1ac0bf972cc

119
package-lock.json generated
View File

@@ -16,14 +16,17 @@
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@material-ui/pickers": "^3.3.10",
"@superset-ui/embedded-sdk": "^0.1.0-alpha.7",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.26.1",
"buffer": "^6.0.3",
"clsx": "^1.1.1",
"date-fns": "^2.29.2",
"email-validator": "^2.0.4",
"env-cmd": "^10.1.0",
"jwt-decode": "^3.1.2",
"leaflet": "^1.8.0",
"material-ui-dropzone": "^3.5.0",
"moment": "^2.29.4",
@@ -4540,6 +4543,19 @@
"@sinonjs/commons": "^1.7.0"
}
},
"node_modules/@superset-ui/embedded-sdk": {
"version": "0.1.0-alpha.7",
"resolved": "https://registry.npmjs.org/@superset-ui/embedded-sdk/-/embedded-sdk-0.1.0-alpha.7.tgz",
"integrity": "sha512-sBzfSnPvRw15D6A053t4gpKDydHaAjyn88By1Z3Vl3PWZScW6sTHh8n/5A69qMSJVorqFQ3g0IUquTF8sutGEQ==",
"dependencies": {
"@superset-ui/switchboard": "^0.18.26-0"
}
},
"node_modules/@superset-ui/switchboard": {
"version": "0.18.26-0",
"resolved": "https://registry.npmjs.org/@superset-ui/switchboard/-/switchboard-0.18.26-0.tgz",
"integrity": "sha512-MYvigrspA0EgNU6tA9UrsXcrUYid9YktsbIPx/D4Xd5cWWrJrJl303imQ/SIZbC25faJCd2gL30ORll60Yz3Ww=="
},
"node_modules/@surma/rollup-plugin-off-main-thread": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -6343,6 +6359,25 @@
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
},
"node_modules/base64-js": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/feross"
},
{
"type": "patreon",
"url": "https://www.patreon.com/feross"
},
{
"type": "consulting",
"url": "https://feross.org/support"
}
]
},
"node_modules/batch": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
@@ -6497,6 +6532,29 @@
"node-int64": "^0.4.0"
}
},
"node_modules/buffer": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
"integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/feross"
},
{
"type": "patreon",
"url": "https://www.patreon.com/feross"
},
{
"type": "consulting",
"url": "https://feross.org/support"
}
],
"dependencies": {
"base64-js": "^1.3.1",
"ieee754": "^1.2.1"
}
},
"node_modules/buffer-from": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -10007,6 +10065,25 @@
"node": ">=4"
}
},
"node_modules/ieee754": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
"integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/feross"
},
{
"type": "patreon",
"url": "https://www.patreon.com/feross"
},
{
"type": "consulting",
"url": "https://feross.org/support"
}
]
},
"node_modules/ignore": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@@ -11682,6 +11759,11 @@
"node": ">=4.0"
}
},
"node_modules/jwt-decode": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
"integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
},
"node_modules/kind-of": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -20612,6 +20694,19 @@
"@sinonjs/commons": "^1.7.0"
}
},
"@superset-ui/embedded-sdk": {
"version": "0.1.0-alpha.7",
"resolved": "https://registry.npmjs.org/@superset-ui/embedded-sdk/-/embedded-sdk-0.1.0-alpha.7.tgz",
"integrity": "sha512-sBzfSnPvRw15D6A053t4gpKDydHaAjyn88By1Z3Vl3PWZScW6sTHh8n/5A69qMSJVorqFQ3g0IUquTF8sutGEQ==",
"requires": {
"@superset-ui/switchboard": "^0.18.26-0"
}
},
"@superset-ui/switchboard": {
"version": "0.18.26-0",
"resolved": "https://registry.npmjs.org/@superset-ui/switchboard/-/switchboard-0.18.26-0.tgz",
"integrity": "sha512-MYvigrspA0EgNU6tA9UrsXcrUYid9YktsbIPx/D4Xd5cWWrJrJl303imQ/SIZbC25faJCd2gL30ORll60Yz3Ww=="
},
"@surma/rollup-plugin-off-main-thread": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -21979,6 +22074,11 @@
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
},
"base64-js": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
},
"batch": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
@@ -22107,6 +22207,15 @@
"node-int64": "^0.4.0"
}
},
"buffer": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
"integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
"requires": {
"base64-js": "^1.3.1",
"ieee754": "^1.2.1"
}
},
"buffer-from": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -24686,6 +24795,11 @@
"harmony-reflect": "^1.4.6"
}
},
"ieee754": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
"integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
},
"ignore": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@@ -25913,6 +26027,11 @@
"object.assign": "^4.1.2"
}
},
"jwt-decode": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
"integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
},
"kind-of": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",

3
package.json
View File

@@ -11,14 +11,17 @@
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@material-ui/pickers": "^3.3.10",
"@superset-ui/embedded-sdk": "^0.1.0-alpha.7",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.26.1",
"buffer": "^6.0.3",
"clsx": "^1.1.1",
"date-fns": "^2.29.2",
"email-validator": "^2.0.4",
"env-cmd": "^10.1.0",
"jwt-decode": "^3.1.2",
"leaflet": "^1.8.0",
"material-ui-dropzone": "^3.5.0",
"moment": "^2.29.4",

4
src/components/Dashboard/index.css Normal file
View File

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

34
src/components/Dashboard/index.jsx
View File

@@ -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;

9
src/components/useStyles.jsx
View File

@@ -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",

34
src/services/superset.js
View File

@@ -1,5 +1,35 @@
import {
getAuthHeaderOptions,
addQueryParams,
} from "../utils/http";
//Added the token we got from the first authorization and set it as the auth token, and that allowed us to hit the request
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
}
const SupersetDashboardURL = `${SUPERSET_BASE_URL}/r/3`;
}
export { SupersetDashboardURL };
export default supersetAPI;