feat: allow to embed superset dashboard in instructor dashboard

aspects/__init__.py

@@ -1,5 +1,9 @@
 """
 One-line description for README and other doc files.
 """
+import os
+from pathlib import Path
 
 __version__ = '0.1.0'
+
+ROOT_DIRECTORY = Path(os.path.dirname(os.path.abspath(__file__)))

aspects/apps.py

@@ -11,3 +11,24 @@ class AspectsConfig(AppConfig):
     """
 
     name = 'aspects'
+
+    plugin_app = {
+        "settings_config": {
+            "lms.djangoapp": {
+                "common": {"relative_path": "settings.common"},
+                "test": {"relative_path": "settings.test"},
+                "production": {"relative_path": "settings.production"},
+            },
+            "cms.djangoapp": {
+                "common": {"relative_path": "settings.common"},
+                "test": {"relative_path": "settings.test"},
+                "production": {"relative_path": "settings.production"},
+            },
+        },
+    }
+
+    def ready(self):
+        """Load modules of Aspects."""
+        from aspects.extensions import (  # pylint: disable=unused-import, import-outside-toplevel
+            filters,
+        )

aspects/extensions/filters.py

@@ -0,0 +1,70 @@
+"""
+Open edX Filters needed for Aspects integration.
+"""
+import pkg_resources
+from django.conf import settings
+from django.template import Context, Template
+from openedx_filters import PipelineStep
+from web_fragments.fragment import Fragment
+
+from aspects.utils import update_context
+
+TEMPLATE_ABSOLUTE_PATH = "/instructor_dashboard/"
+BLOCK_CATEGORY = "superset"
+
+
+class AddSupersetTab(PipelineStep):
+    """Add superset tab to instructor dashboard."""
+
+    def run_filter(
+        self, context, template_name
+    ):  # pylint: disable=arguments-differ, unused-argument
+        """Execute filter that modifies the instructor dashboard context.
+        Args:
+            context (dict): the context for the instructor dashboard.
+            _ (str): instructor dashboard template name.
+        """
+        course = context["course"]
+
+        instructor_dashboard_config = getattr(
+            settings, "SUPERSET_INSTRUCTOR_DASHBOARD", {}
+        )
+        dashboard_uuid = instructor_dashboard_config.get("dashboard_uuid")
+
+        extra_filters_format = getattr(settings, "SUPERSET_EXTRA_FILTERS_FORMAT", [])
+
+        default_filters = [
+            "org = '{course.org}'",
+            "course_name = '{course.display_name}'",
+            "course_run = '{course.id.run}'",
+        ]
+
+        filters = default_filters + extra_filters_format
+
+        context = update_context(
+            context, dashboard_uuid=dashboard_uuid, filters=filters
+        )
+        template = Template(self.resource_string("static/html/superset.html"))
+
+        html = template.render(Context(context))
+        frag = Fragment(html)
+
+        frag.add_css(self.resource_string("static/css/superset.css"))
+        frag.add_javascript(self.resource_string("static/js/embed_dashboard.js"))
+
+        section_data = {
+            "fragment": frag,
+            "section_key": BLOCK_CATEGORY,
+            "section_display_name": "Aspects",
+            "course_id": str(course.id),
+            "template_path_prefix": TEMPLATE_ABSOLUTE_PATH,
+        }
+        context["sections"].append(section_data)
+        return {
+            "context": context,
+        }
+
+    def resource_string(self, path):
+        """Handy helper for getting resources from our kit."""
+        data = pkg_resources.resource_string("aspects", path)
+        return data.decode("utf8")

aspects/settings/common.py

@@ -0,0 +1,49 @@
+"""
+Common Django settings for eox_hooks project.
+For more information on this file, see
+https://docs.djangoproject.com/en/2.22/topics/settings/
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/2.22/ref/settings/
+"""
+from aspects import ROOT_DIRECTORY
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/2.22/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+SECRET_KEY = "secret-key"
+
+
+# Application definition
+
+INSTALLED_APPS = [
+    "aspects",
+]
+
+
+# Internationalization
+# https://docs.djangoproject.com/en/2.22/topics/i18n/
+
+LANGUAGE_CODE = "en-us"
+
+TIME_ZONE = "UTC"
+
+USE_TZ = True
+
+
+def plugin_settings(settings):
+    """
+    Set of plugin settings used by the Open Edx platform.
+    More info: https://github.com/edx/edx-platform/blob/master/openedx/core/djangoapps/plugins/README.rst
+    """
+    settings.MAKO_TEMPLATE_DIRS_BASE.append(ROOT_DIRECTORY / "templates")
+    settings.SUPERSET_CONFIG = {
+        "url": "http://superset.local.overhang.io:8088",
+        "username": "superset",
+        "password": "superset",
+    }
+    settings.SUPERSET_INSTRUCTOR_DASHBOARD = {
+        "dashboard_slug": "instructor-dashboard",
+        "dashboard_uuid": "1d6bf904-f53f-47fd-b1c9-6cd7e284d286",
+    }
+    settings.SUPERSET_EXTRA_FILTERS_FORMAT = []

aspects/settings/production.py

@@ -0,0 +1,19 @@
+"""
+Production Django settings for Aspects project.
+"""
+
+
+def plugin_settings(settings):
+    """
+    Set of plugin settings used by the Open Edx platform.
+    More info: https://github.com/edx/edx-platform/blob/master/openedx/core/djangoapps/plugins/README.rst
+    """
+    settings.SUPERSET_CONFIG = getattr(settings, "ENV_TOKENS", {}).get(
+        "SUPERSET_CONFIG", settings.SUPERSET_CONFIG
+    )
+    settings.SUPERSET_INSTRUCTOR_DASHBOARD = getattr(settings, "ENV_TOKENS", {}).get(
+        "SUPERSET_INSTRUCTOR_DASHBOARD", settings.SUPERSET_INSTRUCTOR_DASHBOARD
+    )
+    settings.SUPERSET_EXTRA_FILTERS_FORMAT = getattr(settings, "ENV_TOKENS", {}).get(
+        "SUPERSET_EXTRA_FILTERS_FORMAT", settings.SUPERSET_EXTRA_FILTERS_FORMAT
+    )

aspects/settings/test.py

@@ -0,0 +1,42 @@
+"""
+Common Django settings for eox_hooks project.
+For more information on this file, see
+https://docs.djangoproject.com/en/2.22/topics/settings/
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/2.22/ref/settings/
+"""
+
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/2.22/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+DATABASES = {
+    "default": {
+        "ENGINE": "django.db.backends.sqlite3",
+        "NAME": "default.db",
+        "USER": "",
+        "PASSWORD": "",
+        "HOST": "",
+        "PORT": "",
+    },
+    "read_replica": {
+        "ENGINE": "django.db.backends.sqlite3",
+        "NAME": "read_replica.db",
+        "USER": "",
+        "PASSWORD": "",
+        "HOST": "",
+        "PORT": "",
+    },
+}
+
+SECRET_KEY = "not-so-secret-key"
+
+# Internationalization
+# https://docs.djangoproject.com/en/2.22/topics/i18n/
+
+LANGUAGE_CODE = "en-us"
+
+TIME_ZONE = "UTC"
+
+USE_TZ = True

aspects/static/css/superset.css

@@ -0,0 +1,5 @@
+.superset-embedded-container > iframe {
+    height: 720px;
+    width: 100%;
+    display: block;
+}

aspects/static/html/superset.html

@@ -0,0 +1,25 @@
+{% load i18n %}
+
+<script src="https://unpkg.com/@superset-ui/embedded-sdk"></script>
+
+<div class="email-notifier-instructor-wrapper" width="parent">
+    <h2>{{display_name}}</h2>
+
+    {% if exception %}
+    <p>{% trans 'Superset is not configured properly. Please contact your system administrator.'%}</p>
+    <p>
+        {{exception}}
+    </p>
+    {% elif not dashboard_uuid %}
+    <p>
+        Dashboard UUID is not set. Please set the dashboard UUID in the Studio. {{dashboard_uuid}}
+    </p>
+    {% elif superset_url and superset_token %}
+    <div class="superset-embedded-container" id="superset-embedded-container-{{xblock_id}}"></div>
+    <script type="text/javascript">
+        window.dashboard_uuid ="{{dashboard_uuid}}";
+        window.superset_url = "{{superset_url}}";
+        window.superset_token = "{{superset_token}}";
+    </script>
+    {% endif %}
+</div>

aspects/static/js/embed_dashboard.js

@@ -0,0 +1,30 @@
+function embedDashboard(dashboard_uuid, superset_url, superset_token, xblock_id) {
+  xblock_id = xblock_id || "";
+  window.supersetEmbeddedSdk
+    .embedDashboard({
+      id: dashboard_uuid, // given by the Superset embedding UI
+      supersetDomain: superset_url, // your Superset instance
+      mountPoint: document.getElementById(`superset-embedded-container-${xblock_id}`), // any html element that can contain an iframe
+      fetchGuestToken: () => superset_token, // function that returns a Promise with the guest token
+      dashboardUiConfig: {
+        // dashboard UI config: hideTitle, hideTab, hideChartControls, filters.visible, filters.expanded (optional)
+        hideTitle: true,
+        filters: {
+          expanded: false,
+        },
+        hideTab: true,
+        hideChartControls: false,
+        hideFilters: true,
+      },
+    })
+    .then((dashboard) => {
+      mountPoint = document.getElementById("superset-embedded-container");
+      /*
+      Perform extra operations on the dashboard object or the container
+      when the dashboard is loaded
+      */
+    });
+}
+if (window.dashboard_uuid !== undefined) {
+  embedDashboard(window.dashboard_uuid, window.superset_url, window.superset_token, window.xblock_id);
+}

aspects/static/js/superset.js

@@ -0,0 +1,36 @@
+/* Javascript for SupersetXBlock. */
+function SupersetXBlock(runtime, element, context) {
+  const dashboard_uuid = context.dashboard_uuid;
+  const superset_url = context.superset_url;
+  const superset_token = context.superset_token;
+  const xblock_id = context.xblock_id
+
+  function initSuperset(supersetEmbeddedSdk) {
+    embedDashboard(dashboard_uuid, superset_url, superset_token, xblock_id);
+  }
+
+  if (typeof require === "function") {
+    require(["supersetEmbeddedSdk"], function (supersetEmbeddedSdk) {
+      window.supersetEmbeddedSdk = supersetEmbeddedSdk;
+      initSuperset();
+    });
+  } else {
+    loadJS(function () {
+      initSuperset();
+    });
+  }
+}
+
+function loadJS(callback) {
+  if (window.supersetEmbeddedSdk) {
+    callback();
+  } else {
+    $.getScript("https://cdn.jsdelivr.net/npm/@superset-ui/[email protected]/bundle/index.min.js")
+      .done(function () {
+        callback();
+      })
+      .fail(function () {
+        console.error("Error loading supersetEmbeddedSdk.");
+      });
+  }
+}