feat: Add Dashboard Filter Support for Alert Reports

superset-frontend/src/features/alerts/AlertReportModal.tsx

@@ -77,6 +77,8 @@ import { NotificationMethod } from './components/NotificationMethod';
 import ValidatedPanelHeader from './components/ValidatedPanelHeader';
 import StyledPanel from './components/StyledPanel';
 import { buildErrorTooltipMessage } from './buildErrorTooltipMessage';
+import { getChartDataRequest } from 'src/components/Chart/chartAction';
+import { getFormData } from '../../utils';
 
 const TIMEOUT_MIN = 1;
 const TEXT_BASED_VISUALIZATION_TYPES = [
@@ -454,6 +456,14 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
   const [dashboardOptions, setDashboardOptions] = useState<MetaObject[]>([]);
   const [chartOptions, setChartOptions] = useState<MetaObject[]>([]);
   const [tabOptions, setTabOptions] = useState<TabNode[]>([]);
+  const [nativeFilterOptions, setNativeFilterOptions] = useState<object>([]);
+  const [nativeFilterValues, setNativeFilterValues] = useState<object>([]);
+
+  // todo(hughhh): refactor to handle multiple native filters
+  const [nativeFilter, setSelectedNativeFilter] = useState<object>({});
+  const [nativeFilters, setGlobalNativeFilters] = useState<object>({});
+
+  console.log('okkkkk', nativeFilter)
 
   // Validation
   const [validationStatus, setValidationStatus] = useState<ValidationObject>({
@@ -665,6 +675,11 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
 
     const shouldEnableForceScreenshot =
       contentType === ContentType.Chart && !isReport;
+
+
+    // todo(hughhh): refactor to handle multiple native filters
+    currentAlert.extra.dashboard.nativeFilters = [nativeFilter]
+
     const data: any = {
       ...currentAlert,
       type: isReport ? 'Report' : 'Alert',
@@ -825,16 +840,24 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
         endpoint: `/api/v1/dashboard/${dashboard.value}/tabs`,
       })
         .then(response => {
-          const { tab_tree: tabTree, all_tabs: allTabs } = response.json.result;
+          console.log(response.json.result);
+          const { tab_tree: tabTree, all_tabs: allTabs, native_filters: nativeFilters } = response.json.result;
           tabTree.push({
             title: 'All Tabs',
             // select tree only works with string value
             value: JSON.stringify(Object.keys(allTabs)),
           });
           setTabOptions(tabTree);
+          setGlobalNativeFilters(nativeFilters);
 
           const anchor = currentAlert?.extra?.dashboard?.anchor;
           if (anchor) {
+            setNativeFilterOptions(
+              nativeFilters[anchor].map((filter: any) => ({
+                value: filter.id,
+                label: filter.name,
+              })),
+            );
             try {
               const parsedAnchor = JSON.parse(anchor);
               if (Array.isArray(parsedAnchor)) {
@@ -878,6 +901,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
         return SupersetClient.get({
           endpoint: `/api/v1/report/related/dashboard?q=${query}`,
         }).then(response => {
+          console.log('dashboards', response.json.result);
           const list = response.json.result.map(
             (item: { value: number; text: string }) => ({
               value: item.value,
@@ -1051,6 +1075,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
     updateAlertState('chart', null);
     if (tabsEnabled) {
       setTabOptions([]);
+      setNativeFilterOptions([]);
       updateAnchorState('');
     }
   };
@@ -1111,6 +1136,61 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
     setForceScreenshot(event.target.checked);
   };
 
+  const onChangeDashboardFilter = (nativeFilterId: string) => {
+    console.log('dashboardFilter', nativeFilterId);
+    // set dashboardFilter
+    const anchor = currentAlert?.extra?.dashboard?.anchor
+    const inScopeFilters = nativeFilters[anchor];
+    const filter = inScopeFilters.filter((f: any) => f.id === nativeFilterId)[0]
+    console.log(filter) // use filter to grab values from API
+    console.log('about to get filter values', nativeFilterId);
+
+    const datasetId = filter.targets[0].datasetId;
+    const columnName = filter.targets[0].column.name;
+    const dashboardId = currentAlert?.dashboard?.value;
+
+    // Get values tied to the selected filter
+    const filterValues = {
+      formData: {
+        // enableEmptyFilter: false,
+        // defaultToFirstItem: false,
+        // multiSelect: true,
+        // searchAllOptions: false,
+        // inverseSelection: false,
+        datasource: `${datasetId}__table`,
+        groupby: [columnName],
+        // adhoc_filters: [],
+        // extra_filters: [],
+        // extra_form_data: {},
+        metrics: ["count"],
+        row_limit: 1000,
+        showSearch: true,
+        // url_params: {
+        //   native_filters_key: "0ktJOz1FTTo"
+        // },
+        // inView: true,
+        viz_type: "filter_select",
+        // type: "NATIVE_FILTER",
+        dashboardId: dashboardId,
+        // native_filter_id: "NATIVE_FILTER-8jS1fx4hl"
+      },
+      force: false,
+      ownState: {}
+    }
+    setSelectedNativeFilter({...nativeFilter, columnName, nativeFilterId})
+    getChartDataRequest(filterValues).then(response => {
+      setNativeFilterValues(response.json.result[0].data.map((item: any) => ({value: item[columnName], label: item[columnName]})))
+    });
+  }
+
+  const onChangeDashboardFilterValue = (filterValue: any) => {
+    console.log('dashboardValue', filterValue);
+
+    // todo(hughhh): refactor to handle multiple native filters 
+    // once you have multiselect
+    setSelectedNativeFilter({...nativeFilter, filterValues: [filterValue]});
+  }
+
   // Make sure notification settings has the required info
   const checkNotificationSettings = () => {
     if (!notificationSettings.length) {
@@ -1756,6 +1836,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
               </>
             )}
           </StyledInputContainer>
+
           {tabsEnabled && contentType === ContentType.Dashboard && (
             <StyledInputContainer>
               <>
@@ -1768,6 +1849,23 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
                   placeholder={t('Select a tab')}
                 />
               </>
+              <div style={{marginTop: '10px', display: 'flex', flexDirection: 'column'}}>
+              <div className="control-label">{t('Select Dashboard Filter')}</div>
+                <Select 
+                  disabled={nativeFilterOptions?.length < 1}
+                  ariaLabel={t('Select Filter')}
+                  value={nativeFilter.nativeFilter}
+                  options={nativeFilterOptions}
+                  onChange={onChangeDashboardFilter}
+                />
+                <div className="control-label">{t('Select Dashboard Value')}</div>
+                <Select 
+                  ariaLabel={t('Value')}
+                  value={nativeFilter.nativeFilterValue}
+                  options={nativeFilterValues}
+                  onChange={onChangeDashboardFilterValue}
+                />
+              </div>
             </StyledInputContainer>
           )}
           {isScreenshot && (
@@ -1790,6 +1888,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
               </div>
             </StyledInputContainer>
           )}
+
           {(isReport || contentType === ContentType.Dashboard) && (
             <div className="inline-container">
               <StyledCheckbox

superset-frontend/src/features/alerts/types.ts

@@ -94,8 +94,15 @@ export type DashboardState = {
   anchor?: string;
 };
 
+export type ExtraNativeFilter = {
+  columnName?: string;
+  filterValues?: Array<any>;
+  // filterOp?: string; // assuming all operators are 'IN' for now
+};
+
 export type Extra = {
   dashboard?: DashboardState;
+  nativeFilters?: Array<ExtraNativeFilter>;
 };
 
 export type Operator = '<' | '>' | '<=' | '>=' | '==' | '!=' | 'not null';

superset/commands/dashboard/permalink/create.py

@@ -66,11 +66,21 @@ def __init__(
     def run(self) -> str:
         self.validate()
         dashboard = DashboardDAO.get_by_id_or_slug(self.dashboard_id)
+        print("creating permalink...")
+
         value = {
             "dashboardId": str(dashboard.uuid),
-            "state": self.state,
+            "state": {**self.state, "urlParams": [['native_filter', '(NATIVE_FILTER-8jS1fx4hl:(extraFormData:(filters:!((col:country_name,op:IN,val:!(Brazil)))),filterState:(label:country_name,validateStatus:!f,value:!(Brazil)),id:NATIVE_FILTER-8jS1fx4hl,ownState:()))']]},
         }
         user_id = get_user_id()
+
+        print('.' * 10)
+        print(self.resource)
+        print(user_id)
+        print(value)
+        print(self.codec)   
+        print('.' * 10)
+
         entry = KeyValueDAO.upsert_entry(
             resource=self.resource,
             key=get_deterministic_uuid(self.salt, (user_id, value)),
@@ -79,7 +89,12 @@ def run(self) -> str:
         )
         db.session.flush()
         assert entry.id  # for type checks
-        return encode_permalink_key(key=entry.id, salt=self.salt)
+
+        hash = encode_permalink_key(key=entry.id, salt=self.salt)
+        print("permalink created")
+        print(hash)
+
+        return hash
 
     def validate(self) -> None:
         pass

superset/commands/report/execute.py

@@ -228,16 +228,27 @@ def get_dashboard_urls(
         Retrieve the URL for the dashboard tabs, or return the dashboard URL if no tabs are available.
         """  # noqa: E501
         force = "true" if self._report_schedule.force_screenshot else "false"
+
+
         if (
             dashboard_state := self._report_schedule.extra.get("dashboard")
         ) and feature_flag_manager.is_feature_enabled("ALERT_REPORT_TABS"):
             if anchor := dashboard_state.get("anchor"):
                 try:
                     anchor_list: list[str] = json.loads(anchor)
-                    return self._get_tabs_urls(anchor_list, user_friendly=user_friendly)
+                    urls = self._get_tabs_urls(anchor_list, user_friendly=user_friendly)
+                    return urls
                 except json.JSONDecodeError:
                     logger.debug("Anchor value is not a list, Fall back to single tab")
-            return [self._get_tab_url(dashboard_state)]
+
+            print('returning single tab url....')
+            native_filter_params = self._report_schedule.get_native_filters_params()
+            return [self._get_tab_url({
+                'anchor': anchor, 
+                'urlParams': {'native_filters': native_filter_params}, 
+                'dataMask': None,
+                'activeTabs': None}, 
+                user_friendly=user_friendly)]
 
         dashboard = self._report_schedule.dashboard
         dashboard_id_or_slug = (
@@ -260,29 +271,35 @@ def _get_tab_url(
         """
         Get one tab url
         """
+        print('in single tab....')
+        print(dashboard_state)
         permalink_key = CreateDashboardPermalinkCommand(
             dashboard_id=str(self._report_schedule.dashboard.uuid),
             state=dashboard_state,
         ).run()
+
         return get_url_path(
             "Superset.dashboard_permalink",
             key=permalink_key,
             user_friendly=user_friendly,
         )
 
     def _get_tabs_urls(
-        self, tab_anchors: list[str], user_friendly: bool = False
+        self, 
+        tab_anchors: list[str],
+        user_friendly: bool = False
     ) -> list[str]:
         """
         Get multple tabs urls
         """
+        print('hello5')
         return [
             self._get_tab_url(
                 {
                     "anchor": tab_anchor,
                     "dataMask": None,
                     "activeTabs": None,
-                    "urlParams": None,
+                    "urlParams": url_params,
                 },
                 user_friendly=user_friendly,
             )
@@ -320,6 +337,7 @@ def _get_screenshots(self) -> list[bytes]:
             ]
         else:
             urls = self.get_dashboard_urls()
+            print('urls', urls)
 
             window_width, window_height = app.config["WEBDRIVER_WINDOW"]["dashboard"]
             width = min(max_width, self._report_schedule.custom_width or window_width)
@@ -481,6 +499,11 @@ def _get_notification_content(self) -> NotificationContent:  # noqa: C901
         error_text = None
         header_data = self._get_log_data()
         url = self._get_url(user_friendly=True)
+
+        print("*"*100)
+        print(url)
+        print("*"*100)
+
         if (
             feature_flag_manager.is_feature_enabled("ALERTS_ATTACH_REPORTS")
             or self._report_schedule.type == ReportScheduleType.REPORT

superset/config.py

@@ -493,7 +493,7 @@ class D3TimeFormat(TypedDict, total=False):
     "EMBEDDED_SUPERSET": False,
     # Enables Alerts and reports new implementation
     "ALERT_REPORTS": False,
-    "ALERT_REPORT_TABS": False,
+    "ALERT_REPORT_TABS": True,
     "ALERT_REPORT_SLACK_V2": False,
     "DASHBOARD_RBAC": False,
     "ENABLE_ADVANCED_DATA_TYPES": False,

superset/daos/dashboard.py

@@ -19,6 +19,7 @@
 import logging
 from datetime import datetime
 from typing import Any
+from collections import defaultdict
 
 from flask import g
 from flask_appbuilder.models.sqla.interface import SQLAInterface
@@ -319,6 +320,21 @@ def copy_dashboard(
         cls.set_dash_metadata(dash, metadata, old_to_new_slice_ids)
         db.session.add(dash)
         return dash
+
+    @classmethod
+    def get_native_filter_configuration(cls, id: int):
+        dashboard = cls.get_by_id_or_slug(id)
+        metadata = json.loads(dashboard.json_metadata or "{}")
+        native_filter_configuration = metadata.get(
+            "native_filter_configuration", []
+        )
+
+        tab_filters = defaultdict(list)
+        for filter in native_filter_configuration:
+            for tab_key in filter.get("tabsInScope", []):
+                tab_filters[tab_key].append(filter)
+
+        return tab_filters
 
     @classmethod
     def update_native_filters_config(

superset/dashboards/api.py

@@ -470,7 +470,11 @@ def get_tabs(self, id_or_slug: str) -> Response:
         """  # noqa: E501
         try:
             tabs = DashboardDAO.get_tabs_for_dashboard(id_or_slug)
+            native_filters = DashboardDAO.get_native_filter_configuration(id_or_slug)
+
             result = self.tab_schema.dump(tabs)
+            result['native_filters'] = native_filters
+
             return self.response(200, result=result)
 
         except (TypeError, ValueError) as err: