diff --git a/superset-frontend/src/SqlLab/components/App/App.test.jsx b/superset-frontend/src/SqlLab/components/App/App.test.jsx index c062629156..d56ea4780e 100644 --- a/superset-frontend/src/SqlLab/components/App/App.test.jsx +++ b/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', () => () => (
@@ -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(, { + useRedux: true, + store: storeExceedLocalStorage, + }); + rerender(); + 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, + }), + }), }), ); }); diff --git a/superset-frontend/src/SqlLab/components/App/index.jsx b/superset-frontend/src/SqlLab/components/App/index.jsx index bbd1bba9ae..ff47e6173b 100644 --- a/superset-frontend/src/SqlLab/components/App/index.jsx +++ b/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() { diff --git a/superset-frontend/src/logger/LogUtils.ts b/superset-frontend/src/logger/LogUtils.ts index 289846fa1c..46864a0357 100644 --- a/superset-frontend/src/logger/LogUtils.ts +++ b/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([