Merge pull request apache#29 from tgunther-zerofox/ZFE-75240-proxy-re…

…quests-to-superset

Add host to assets and add spa_bff/superset prefix

.terra/insights/superset.tf

@@ -45,6 +45,16 @@ variable "zf_api_host" {
   }
 }
 
+variable "zf_dashboard_host" {
+  type = "map"
+
+  default = {
+    qa   = "https://cloud-qa.zerofox.com"
+    stag = "https://cloud-stag.zerofox.com"
+    prod = "https://cloud.zerofox.com"
+  }
+}
+
 # ----------------------------------------
 # Providers
 # ----------------------------------------
@@ -161,6 +171,7 @@ module "nomad-job" {
   git_sha           = "${var.git_sha}"
   docker_file        = "../../Dockerfile"
   docker_path       = "../.."
+  docker_build_args = ["ASSET_BASE_URL=${lookup(var.zf_dashboard_host, var.env)}/spa_bff/superset"]
   rendered_template = "${data.template_file.nomad_job_spec.rendered}"
 }
 

Dockerfile

@@ -22,6 +22,7 @@ ARG PY_VER=3.8.16-slim
 FROM node:16-slim AS superset-node
 
 ARG NPM_BUILD_CMD="build"
+ARG ASSET_BASE_URL
 ENV BUILD_CMD=${NPM_BUILD_CMD}
 ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
 
@@ -43,7 +44,7 @@ RUN npm ci
 COPY ./superset-frontend .
 
 # This seems to be the most expensive step
-RUN npm run ${BUILD_CMD}
+RUN ASSET_BASE_URL=${ASSET_BASE_URL} npm run ${BUILD_CMD}
 
 ######################################################################
 # Final lean image...
@@ -108,7 +109,7 @@ WORKDIR /app
 USER superset
 
 # Copy BI Superset
-COPY bi_superset/ /app/bi_superset/ 
+COPY bi_superset/ /app/bi_superset/
 COPY bi_superset/superset_config.py /app/superset_config.py
 
 # Injects bi_cli into superset cli

bi_superset/superset_config.py

@@ -88,12 +88,15 @@ def get_env_variable(var_name: str, default: Optional[str] = None) -> str:
     WTF_CSRF_ENABLED = False
 
     # Guest token config options
+    # To run with `embedded/sample.html` you need to have the Gamma roles on the Guest token
+    # GUEST_ROLE_NAME = "Gamma"
     GUEST_ROLE_NAME = "Public"
     GUEST_TOKEN_JWT_SECRET = get_env_variable("GUEST_TOKEN_JWT_SECRET", None)
     GUEST_TOKEN_JWT_ALGO = "HS256"
     GUEST_TOKEN_HEADER_NAME = "X-GuestToken"
     GUEST_TOKEN_JWT_EXP_SECONDS = 60*60  # 1 hour
     ZF_JWT_PUBLIC_SECRET = get_env_variable("ZF_JWT_PUBLIC_SECRET", None)
+    STATIC_ASSETS_PREFIX = f'{os.environ.get("ZF_DASHBOARD_HOST")}/spa_bff/superset'
 
 BQ_DATASET = os.getenv("BQ_DATASET", None)
 ZF_API_HOST = os.getenv("ZF_API_HOST", "https://api-qa.zerofox.com")

embedded/README.md

@@ -0,0 +1,23 @@
+# Run sample local embedded Dashboard
+
+## ZF-Dashboard
+
+1. Configure on `.env`: `SUPERSET_URL=http://host.docker.internal:8088`
+2. Run zf-dashboard locally on Docker
+
+## Superset
+
+1. Run `make build`
+2. Run `make run`
+3. Log in and make sure you have a Dashboard configured to be embedded. Copy the ID of the Dashboard
+
+## Sample
+
+1. Edit the ID of the `embedded/sample.html` to the one you copied
+2. You might have some CORS issues locally. Open Chrome running `open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security` to avoid CORS problems at all
+3. Open `embedded/sample.html` in your browser
+
+# Tips
+
+- Run `cd superset-frontend` and `npm run build-dev` to run assets locally faster
+- Run `make build` and `make run` to update Superset if you change Phyton code

embedded/sample.html

@@ -0,0 +1,89 @@
+<script src="https://unpkg.com/@superset-ui/embedded-sdk"></script>
+
+<div id="my-superset-container"></div>
+
+<style>
+  iframe { width: 100%; height: 700px; border: 0; overflow: hidden; }
+</style>
+
+<script>
+  supersetEmbeddedSdk.embedDashboard({
+    // replace with your local id
+    id: "9842845b-15da-4b0f-a1a5-0006e2c91e47",
+    // supersetDomain: "http://localhost:8088",
+    supersetDomain: "http://localhost:8000/spa_bff/superset",
+    mountPoint: document.getElementById("my-superset-container"),
+    fetchGuestToken: fetchGuestToken,
+    dashboardUiConfig: {
+        hideTitle: true,
+        filters: {
+            expanded: true,
+        }
+    },
+  });
+
+  async function fetchAccessToken() {
+  try {
+    const body = {
+      username: "admin",
+      password: "admin",
+      provider: "db",
+      refresh: true,
+    }
+
+    const response = await fetch(
+      "http://localhost:8088/api/v1/security/login",
+      {
+        method: "POST",
+        body: JSON.stringify(body),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    )
+
+    const jsonResponse = await response.json()
+    return jsonResponse?.access_token
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+async function fetchGuestToken() {
+  const accessToken = await fetchAccessToken()
+  try {
+    const body = {
+      resources: [
+        {
+          type: "dashboard",
+          // replace with your local id
+          id: "9842845b-15da-4b0f-a1a5-0006e2c91e47",
+        },
+      ],
+      rls: [],
+      user: {
+        username: "admin",
+        first_name: "admin",
+        last_name: "admin",
+      },
+    }
+    const response = await fetch(
+      "http://localhost:8088/api/v1/security/guest_token/",
+      {
+        method: "POST",
+        body: JSON.stringify(body),
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${accessToken}`,
+        },
+      }
+    )
+    const jsonResponse = await response.json()
+    return jsonResponse?.token
+  } catch (error) {
+    console.error(error)
+  }
+}
+</script>
+
+