[MDS-5402] Fixed metabase embeds not showing up on homepage (#2667)

[MDS-5402] Fix embed of dashboard metabase questions

Co-authored-by: simensma-fresh <[email protected]>

Author: simensma-fresh

services/core-api/app/api/reporting/namespace.py

@@ -4,4 +4,4 @@
 
 api = Namespace('reporting', description='Authenticated reports')
 
-api.add_resource(MetabaseDashboardResource, '/dashboard/<int:id>')
+api.add_resource(MetabaseDashboardResource, '/<string:type>/<int:id>')

services/core-api/app/api/reporting/resources/metabase.py

@@ -8,15 +8,28 @@
 from app.api.utils.resources_mixins import UserMixin 
 from app.api.utils.search import search_targets, append_result, execute_search, SearchResult
 from app.api.search.response_models import SEARCH_RESULT_RETURN_MODEL
-
+from werkzeug.exceptions import BadRequest
 
 class MetabaseDashboardResource(Resource, UserMixin):
-    def get(self, id):
-        payload = {"resource": {"dashboard": id}, "params": {}}
+
+    @api.doc(
+        description='Generates an embeddable link to a Metabase dashboard or question',
+        params={
+            'type': 'Type of resource to embed (dashboard/question)',
+            'id': 'Metabase id of resource to embed'
+        }
+    )
+    def get(self, type, id):
+        if type not in ('dashboard', 'question'):
+            raise BadRequest('Type must be dashboard or question')
+
+        payload = {"resource": {}, "params": {}}
+        payload["resource"][type] = id
+        
         token = jwt.encode(payload,
                            current_app.config['METABASE_EMBEDDING_SECRET_KEY'],
                            algorithm="HS256")
 
         dashboard_url = current_app.config[
-            'METABASE_SITE_URL'] + "/embed/dashboard/" + token.decode("utf8")
+            'METABASE_SITE_URL'] + f'/embed/{type}/' + token.decode("utf8")
         return {'dashboard_url': dashboard_url}

services/core-web/common/actionCreators/reportingActionCreator.js

@@ -6,10 +6,9 @@ import { createRequestHeader } from "../utils/RequestHeaders";
 import CustomAxios from "../customAxios";
 
 // This file is anticipated to have multiple exports
-// eslint-disable-next-line import/prefer-default-export
-export const fetchMetabaseDashboard = (dashboardId) =>
+export const fetchMetabaseDashboard = (dashboardId, type = "dashboard") =>
   CustomAxios({ errorToastMessage: "Unable to fetch dashboard." })
-    .get(`${ENVIRONMENT.apiUrl + API.DASHBOARD(dashboardId)}`, createRequestHeader())
+    .get(`${ENVIRONMENT.apiUrl + API.DASHBOARD(dashboardId, type)}`, createRequestHeader())
     .then((response) => {
       const { dashboard_url } = response.data || {};
       return dashboard_url;

services/core-web/common/constants/API.js

@@ -110,7 +110,7 @@ export const SEARCH_OPTIONS = "/search/options";
 export const SIMPLE_SEARCH = "/search/simple";
 
 // Reporting
-export const DASHBOARD = (dashboardId) => `/reporting/dashboard/${dashboardId}`;
+export const DASHBOARD = (dashboardId, type = "dashboard") => `/reporting/${type}/${dashboardId}`;
 
 // Variances
 export const COMPLIANCE_CODES = "/compliance/codes";

services/core-web/src/components/homepage/HomeInfographs.tsx

@@ -10,7 +10,9 @@ const HomeInfographs = () => {
 
   useEffect(() => {
     (async () => {
-      const newGraphUrls = await Promise.all(graphIds.map((id) => fetchMetabaseDashboard(id)));
+      const newGraphUrls = await Promise.all(
+        graphIds.map((id) => fetchMetabaseDashboard(id, "question"))
+      );
       setInfographUrls(newGraphUrls);
     })();
   }, []);

services/minespace-web/common/actionCreators/reportingActionCreator.js

@@ -6,10 +6,9 @@ import { createRequestHeader } from "../utils/RequestHeaders";
 import CustomAxios from "../customAxios";
 
 // This file is anticipated to have multiple exports
-// eslint-disable-next-line import/prefer-default-export
-export const fetchMetabaseDashboard = (dashboardId) =>
+export const fetchMetabaseDashboard = (dashboardId, type = "dashboard") =>
   CustomAxios({ errorToastMessage: "Unable to fetch dashboard." })
-    .get(`${ENVIRONMENT.apiUrl + API.DASHBOARD(dashboardId)}`, createRequestHeader())
+    .get(`${ENVIRONMENT.apiUrl + API.DASHBOARD(dashboardId, type)}`, createRequestHeader())
     .then((response) => {
       const { dashboard_url } = response.data || {};
       return dashboard_url;

services/minespace-web/common/constants/API.js

@@ -110,7 +110,7 @@ export const SEARCH_OPTIONS = "/search/options";
 export const SIMPLE_SEARCH = "/search/simple";
 
 // Reporting
-export const DASHBOARD = (dashboardId) => `/reporting/dashboard/${dashboardId}`;
+export const DASHBOARD = (dashboardId, type = "dashboard") => `/reporting/${type}/${dashboardId}`;
 
 // Variances
 export const COMPLIANCE_CODES = "/compliance/codes";