[logging] add selected tab name into perf logging (#10080)

superset-frontend/src/dashboard/components/Dashboard.jsx

@@ -91,12 +91,15 @@ class Dashboard extends React.PureComponent {
   }
 
   componentDidMount() {
+    const appContainer = document.getElementById('app');
+    const bootstrapData = appContainer?.getAttribute('data-bootstrap') || '';
     const { dashboardState, layout } = this.props;
     const eventData = {
       is_edit_mode: dashboardState.editMode,
       mount_duration: Logger.getTimestamp(),
       is_empty: isDashboardEmpty(layout),
       is_published: dashboardState.isPublished,
+      bootstrap_data_length: bootstrapData.length,
     };
     const directLinkComponentId = getLocationHash();
     if (directLinkComponentId) {

superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx

@@ -150,12 +150,13 @@ class Tabs extends React.PureComponent {
         },
       });
     } else if (tabIndex !== this.state.tabIndex) {
+      const pathToTabIndex = getDirectPathToTabIndex(component, tabIndex);
+      const targetTabId = pathToTabIndex[pathToTabIndex.length - 1];
       this.props.logEvent(LOG_ACTIONS_SELECT_DASHBOARD_TAB, {
-        tab_id: component.id,
+        target_id: targetTabId,
         index: tabIndex,
       });
 
-      const pathToTabIndex = getDirectPathToTabIndex(component, tabIndex);
       this.props.onChangeTab({ pathToTabIndex });
     }
   }

superset-frontend/src/middleware/loggerMiddleware.js

@@ -68,7 +68,12 @@ const loggerMiddleware = store => next => action => {
     return next(action);
   }
 
-  const { dashboardInfo, explore, impressionId } = store.getState();
+  const {
+    dashboardInfo,
+    explore,
+    impressionId,
+    dashboardLayout,
+  } = store.getState();
   let logMetadata = {
     impression_id: impressionId,
     version: 'v2',
@@ -111,6 +116,12 @@ const loggerMiddleware = store => next => action => {
     };
   }
 
+  if (eventData.target_id && dashboardLayout.present) {
+    const meta = dashboardLayout.present[eventData.target_id].meta;
+    // chart name or tab/header text
+    eventData.target_name = meta.chartId ? meta.sliceName : meta.text;
+  }
+
   logMessageQueue.append(eventData);
   return eventData;
 };