chore(sqllab): Log current local storage usage (#24554)

Co-authored-by: Justin Park <justinpark@apache.org>

superset-frontend/src/SqlLab/components/App/App.test.jsx

@@ -25,6 +25,10 @@ import App from 'src/SqlLab/components/App';
 import sqlLabReducer from 'src/SqlLab/reducers/index';
 import { LOCALSTORAGE_MAX_USAGE_KB } from 'src/SqlLab/constants';
 import { LOG_EVENT } from 'src/logger/actions';
+import {
+  LOG_ACTIONS_SQLLAB_WARN_LOCAL_STORAGE_USAGE,
+  LOG_ACTIONS_SQLLAB_MONITOR_LOCAL_STORAGE_USAGE,
+} from 'src/logger/LogUtils';
 
 jest.mock('src/SqlLab/components/TabbedSqlEditors', () => () => (
   <div data-test="mock-tabbed-sql-editors" />
@@ -54,7 +58,7 @@ describe('SqlLab App', () => {
     expect(getByTestId('mock-tabbed-sql-editors')).toBeInTheDocument();
   });
 
-  it('logs current usage warning', async () => {
+  it('logs current usage warning', () => {
     const localStorageUsageInKilobytes = LOCALSTORAGE_MAX_USAGE_KB + 10;
     const storeExceedLocalStorage = mockStore(
       sqlLabReducer(
@@ -73,6 +77,38 @@ describe('SqlLab App', () => {
     expect(storeExceedLocalStorage.getActions()).toContainEqual(
       expect.objectContaining({
         type: LOG_EVENT,
+        payload: expect.objectContaining({
+          eventName: LOG_ACTIONS_SQLLAB_WARN_LOCAL_STORAGE_USAGE,
+        }),
+      }),
+    );
+  });
+
+  it('logs current local storage usage', () => {
+    const localStorageUsageInKilobytes = LOCALSTORAGE_MAX_USAGE_KB - 10;
+    const storeExceedLocalStorage = mockStore(
+      sqlLabReducer(
+        {
+          localStorageUsageInKilobytes,
+        },
+        {},
+      ),
+    );
+
+    const { rerender } = render(<App />, {
+      useRedux: true,
+      store: storeExceedLocalStorage,
+    });
+    rerender(<App updated />);
+    expect(storeExceedLocalStorage.getActions()).toContainEqual(
+      expect.objectContaining({
+        type: LOG_EVENT,
+        payload: expect.objectContaining({
+          eventName: LOG_ACTIONS_SQLLAB_MONITOR_LOCAL_STORAGE_USAGE,
+          eventData: expect.objectContaining({
+            current_usage: localStorageUsageInKilobytes,
+          }),
+        }),
       }),
     );
   });

superset-frontend/src/SqlLab/components/App/index.jsx

@@ -30,7 +30,10 @@ import {
 } from 'src/SqlLab/constants';
 import * as Actions from 'src/SqlLab/actions/sqlLab';
 import { logEvent } from 'src/logger/actions';
-import { LOG_ACTIONS_SQLLAB_WARN_LOCAL_STORAGE_USAGE } from 'src/logger/LogUtils';
+import {
+  LOG_ACTIONS_SQLLAB_WARN_LOCAL_STORAGE_USAGE,
+  LOG_ACTIONS_SQLLAB_MONITOR_LOCAL_STORAGE_USAGE,
+} from 'src/logger/LogUtils';
 import TabbedSqlEditors from '../TabbedSqlEditors';
 import QueryAutoRefresh from '../QueryAutoRefresh';
 
@@ -121,15 +124,28 @@ class App extends React.PureComponent {
   }
 
   componentDidUpdate() {
+    const { localStorageUsageInKilobytes, actions, queries } = this.props;
+    const queryCount = queries?.lenghth || 0;
     if (
-      this.props.localStorageUsageInKilobytes >=
+      localStorageUsageInKilobytes >=
       LOCALSTORAGE_WARNING_THRESHOLD * LOCALSTORAGE_MAX_USAGE_KB
     ) {
       this.showLocalStorageUsageWarning(
-        this.props.localStorageUsageInKilobytes,
-        this.props.queries?.lenghth || 0,
+        localStorageUsageInKilobytes,
+        queryCount,
       );
     }
+    if (localStorageUsageInKilobytes > 0 && !this.hasLoggedLocalStorageUsage) {
+      const eventData = {
+        current_usage: localStorageUsageInKilobytes,
+        query_count: queryCount,
+      };
+      actions.logEvent(
+        LOG_ACTIONS_SQLLAB_MONITOR_LOCAL_STORAGE_USAGE,
+        eventData,
+      );
+      this.hasLoggedLocalStorageUsage = true;
+    }
   }
 
   componentWillUnmount() {

superset-frontend/src/logger/LogUtils.ts

@@ -61,6 +61,8 @@ export const LOG_ACTIONS_FURTHER_DRILL_BY = 'further_drill_by';
 export const LOG_ACTIONS_DRILL_BY_EDIT_CHART = 'drill_by_edit_chart';
 export const LOG_ACTIONS_DRILL_BY_BREADCRUMB_CLICKED =
   'drill_by_breadcrumb_clicked';
+export const LOG_ACTIONS_SQLLAB_MONITOR_LOCAL_STORAGE_USAGE =
+  'sqllab_monitor_local_storage_usage';
 
 // Log event types --------------------------------------------------------------
 export const LOG_EVENT_TYPE_TIMING = new Set([