iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore(sqllab): Add logging for actions (#28876)

This commit is contained in:
JUST.in DO IT 2024-06-14 09:35:17 -07:00 committed by GitHub
parent 66bd0ce3d0
commit 05829cbda9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 217 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
superset-frontend/src/SqlLab/components/ResultSet/index.tsx
View File

@ -71,6 +71,12 @@ import {
reRunQuery,
} from 'src/SqlLab/actions/sqlLab';
import { URL_PARAMS } from 'src/constants';
import useLogAction from 'src/logger/useLogAction';
import {
LOG_ACTIONS_SQLLAB_COPY_RESULT_TO_CLIPBOARD,
LOG_ACTIONS_SQLLAB_CREATE_CHART,
LOG_ACTIONS_SQLLAB_DOWNLOAD_CSV,
} from 'src/logger/LogUtils';
import Icons from 'src/components/Icons';
import ExploreCtasResultsButton from '../ExploreCtasResultsButton';
import ExploreResultsButton from '../ExploreResultsButton';
@ -171,6 +177,7 @@ const ResultSet = ({
'dbId',
'tab',
'sql',
'sqlEditorId',
'templateParams',
'schema',
'rows',
@ -201,6 +208,7 @@ const ResultSet = ({
const history = useHistory();
const dispatch = useDispatch();
const logAction = useLogAction({ queryId, sqlEditorId: query.sqlEditorId });
const reRunQueryIfSessionTimeoutErrorOnMount = useCallback(() => {
if (
@ -258,7 +266,7 @@ const ResultSet = ({
const { results } = query;
const openInNewWindow = clickEvent.metaKey;
logAction(LOG_ACTIONS_SQLLAB_CREATE_CHART, {});
if (results?.query_id) {
const key = await postFormData(results.query_id, 'query', {
...EXPLORE_CHART_DEFAULT,
@ -321,7 +329,11 @@ const ResultSet = ({
/>
)}
{csv && (
<Button buttonSize="small" href={getExportCsvUrl(query.id)}>
<Button
buttonSize="small"
href={getExportCsvUrl(query.id)}
onClick={() => logAction(LOG_ACTIONS_SQLLAB_DOWNLOAD_CSV, {})}
>
<i className="fa fa-file-text-o" /> {t('Download to CSV')}
</Button>
)}
@ -335,6 +347,9 @@ const ResultSet = ({
</Button>
}
hideTooltip
onCopyEnd={() =>
logAction(LOG_ACTIONS_SQLLAB_COPY_RESULT_TO_CLIPBOARD, {})
}
/>
</ResultSetButtons>
{search && (

14
superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
View File

@ -26,6 +26,11 @@ import { DropdownButton } from 'src/components/DropdownButton';
import { detectOS } from 'src/utils/common';
import { QueryButtonProps } from 'src/SqlLab/types';
import useQueryEditor from 'src/SqlLab/hooks/useQueryEditor';
import {
LOG_ACTIONS_SQLLAB_RUN_QUERY,
LOG_ACTIONS_SQLLAB_STOP_QUERY,
} from 'src/logger/LogUtils';
import useLogAction from 'src/logger/useLogAction';
export interface RunQueryActionButtonProps {
queryEditorId: string;
@ -58,7 +63,13 @@ const onClick = (
allowAsync: boolean,
runQuery: (c?: boolean) => void = () => undefined,
stopQuery = () => {},
logAction: (name: string, payload: Record<string, any>) => void,
): void => {
const eventName = shouldShowStopButton
? LOG_ACTIONS_SQLLAB_STOP_QUERY
: LOG_ACTIONS_SQLLAB_RUN_QUERY;
logAction(eventName, { shortcut: false });
if (shouldShowStopButton) return stopQuery();
if (allowAsync) {
return runQuery(true);
@ -90,6 +101,7 @@ const RunQueryActionButton = ({
stopQuery,
}: RunQueryActionButtonProps) => {
const theme = useTheme();
const logAction = useLogAction({ queryEditorId });
const userOS = detectOS();
const { selectedText, sql } = useQueryEditor(queryEditorId, [
@ -122,7 +134,7 @@ const RunQueryActionButton = ({
<ButtonComponent
data-test="run-query-action"
onClick={() =>
onClick(shouldShowStopBtn, allowAsync, runQuery, stopQuery)
onClick(shouldShowStopBtn, allowAsync, runQuery, stopQuery, logAction)
}
disabled={isDisabled}
tooltip={

14
superset-frontend/src/SqlLab/components/SaveQuery/index.tsx
View File

@ -34,6 +34,11 @@ import {
import { getDatasourceAsSaveableDataset } from 'src/utils/datasourceUtils';
import useQueryEditor from 'src/SqlLab/hooks/useQueryEditor';
import { QueryEditor } from 'src/SqlLab/types';
import useLogAction from 'src/logger/useLogAction';
import {
LOG_ACTIONS_SQLLAB_CREATE_CHART,
LOG_ACTIONS_SQLLAB_SAVE_QUERY,
} from 'src/logger/LogUtils';
interface SaveQueryProps {
queryEditorId: string;
@ -92,6 +97,7 @@ const SaveQuery = ({
}),
[queryEditor, columns],
);
const logAction = useLogAction({ queryEditorId });
const defaultLabel = query.name || query.description || t('Undefined');
const [description, setDescription] = useState<string>(
query.description || '',
@ -106,7 +112,12 @@ const SaveQuery = ({
const overlayMenu = (
<Menu>
<Menu.Item onClick={() => setShowSaveDatasetModal(true)}>
<Menu.Item
onClick={() => {
logAction(LOG_ACTIONS_SQLLAB_CREATE_CHART, {});
setShowSaveDatasetModal(true);
}}
>
{t('Save dataset')}
</Menu.Item>
</Menu>
@ -130,6 +141,7 @@ const SaveQuery = ({
const close = () => setShowSave(false);
const onSaveWrapper = () => {
logAction(LOG_ACTIONS_SQLLAB_SAVE_QUERY, {});
onSave(queryPayload(), query.id);
close();
};

7
superset-frontend/src/SqlLab/components/ShareSqlLabQuery/index.tsx
View File

@ -30,6 +30,8 @@ import withToasts from 'src/components/MessageToasts/withToasts';
import CopyToClipboard from 'src/components/CopyToClipboard';
import { storeQuery } from 'src/utils/common';
import useQueryEditor from 'src/SqlLab/hooks/useQueryEditor';
import { LOG_ACTIONS_SQLLAB_COPY_LINK } from 'src/logger/LogUtils';
import useLogAction from 'src/logger/useLogAction';
interface ShareSqlLabQueryProps {
queryEditorId: string;
@ -51,7 +53,7 @@ const ShareSqlLabQuery = ({
addDangerToast,
}: ShareSqlLabQueryProps) => {
const theme = useTheme();
const logAction = useLogAction({ queryEditorId });
const { dbId, name, schema, autorun, sql, remoteId, templateParams } =
useQueryEditor(queryEditorId, [
'dbId',
@ -91,6 +93,9 @@ const ShareSqlLabQuery = ({
}
};
const getCopyUrl = (callback: Function) => {
logAction(LOG_ACTIONS_SQLLAB_COPY_LINK, {
shortcut: false,
});
if (isFeatureEnabled(FeatureFlag.ShareQueriesViaKvStore)) {
return getCopyUrlForKvStore(callback);
}

50
superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
View File

@ -100,6 +100,17 @@ import {
} from 'src/utils/localStorageHelpers';
import { EmptyStateBig } from 'src/components/EmptyState';
import getBootstrapData from 'src/utils/getBootstrapData';
import useLogAction from 'src/logger/useLogAction';
import {
LOG_ACTIONS_SQLLAB_CREATE_TABLE_AS,
LOG_ACTIONS_SQLLAB_CREATE_VIEW_AS,
LOG_ACTIONS_SQLLAB_ESTIMATE_QUERY_COST,
LOG_ACTIONS_SQLLAB_FORMAT_SQL,
LOG_ACTIONS_SQLLAB_LOAD_TAB_STATE,
LOG_ACTIONS_SQLLAB_RUN_QUERY,
LOG_ACTIONS_SQLLAB_STOP_QUERY,
Logger,
} from 'src/logger/LogUtils';
import TemplateParamsEditor from '../TemplateParamsEditor';
import SouthPane from '../SouthPane';
import SaveQuery, { QueryPayload } from '../SaveQuery';
@ -273,6 +284,7 @@ const SqlEditor: FC<Props> = ({
};
}, shallowEqual);
const logAction = useLogAction({ queryEditorId: queryEditor.id });
const isActive = currentQueryEditorId === queryEditor.id;
const [height, setHeight] = useState(0);
const [autorun, setAutorun] = useState(queryEditor.autorun);
@ -319,9 +331,15 @@ const SqlEditor: FC<Props> = ({
[ctas, database, defaultQueryLimit, dispatch, queryEditor],
);
const formatCurrentQuery = useCallback(() => {
const formatCurrentQuery = useCallback(
(useShortcut?: boolean) => {
logAction(LOG_ACTIONS_SQLLAB_FORMAT_SQL, {
shortcut: Boolean(useShortcut),
});
dispatch(formatQuery(queryEditor));
}, [dispatch, queryEditor]);
},
[dispatch, queryEditor, logAction],
);
const stopQuery = useCallback(() => {
if (latestQuery && ['running', 'pending'].indexOf(latestQuery.state) >= 0) {
@ -360,6 +378,7 @@ const SqlEditor: FC<Props> = ({
descr: KEY_MAP[KeyboardShortcut.CtrlR],
func: () => {
if (queryEditor.sql.trim() !== '') {
logAction(LOG_ACTIONS_SQLLAB_RUN_QUERY, { shortcut: true });
startQuery();
}
},
@ -370,6 +389,7 @@ const SqlEditor: FC<Props> = ({
descr: KEY_MAP[KeyboardShortcut.CtrlEnter],
func: () => {
if (queryEditor.sql.trim() !== '') {
logAction(LOG_ACTIONS_SQLLAB_RUN_QUERY, { shortcut: true });
startQuery();
}
},
@ -386,6 +406,7 @@ const SqlEditor: FC<Props> = ({
descr: KEY_MAP[KeyboardShortcut.CtrlT],
}),
func: () => {
Logger.markTimeOrigin();
dispatch(addNewQueryEditor());
},
},
@ -400,14 +421,17 @@ const SqlEditor: FC<Props> = ({
key: KeyboardShortcut.CtrlE,
descr: KEY_MAP[KeyboardShortcut.CtrlE],
}),
func: stopQuery,
func: () => {
logAction(LOG_ACTIONS_SQLLAB_STOP_QUERY, { shortcut: true });
stopQuery();
},
},
{
name: 'formatQuery',
key: KeyboardShortcut.CtrlShiftF,
descr: KEY_MAP[KeyboardShortcut.CtrlShiftF],
func: () => {
formatCurrentQuery();
formatCurrentQuery(true);
},
},
];
@ -505,6 +529,13 @@ const SqlEditor: FC<Props> = ({
!queryEditor.loaded;
const loadQueryEditor = useEffectEvent(() => {
const duration = Logger.getTimestamp();
logAction(LOG_ACTIONS_SQLLAB_LOAD_TAB_STATE, {
duration,
queryEditorId: queryEditor.id,
inLocalStorage: Boolean(queryEditor.inLocalStorage),
hasLoaded: !shouldLoadQueryEditor,
});
if (shouldLoadQueryEditor) {
dispatch(fetchQueryEditor(queryEditor, displayLimit));
}
@ -602,6 +633,7 @@ const SqlEditor: FC<Props> = ({
});
const getQueryCostEstimate = () => {
logAction(LOG_ACTIONS_SQLLAB_ESTIMATE_QUERY_COST, { shortcut: false });
if (database) {
dispatch(estimateQueryCost(queryEditor));
}
@ -668,7 +700,9 @@ const SqlEditor: FC<Props> = ({
/>
</Menu.Item>
)}
<Menu.Item onClick={formatCurrentQuery}>{t('Format SQL')}</Menu.Item>
<Menu.Item onClick={() => formatCurrentQuery()}>
{t('Format SQL')}
</Menu.Item>
{!isEmpty(scheduledQueriesConf) && (
<Menu.Item>
<ScheduleQueryButton
@ -706,6 +740,9 @@ const SqlEditor: FC<Props> = ({
{allowCTAS && (
<Menu.Item
onClick={() => {
logAction(LOG_ACTIONS_SQLLAB_CREATE_TABLE_AS, {
shortcut: false,
});
setShowCreateAsModal(true);
setCreateAs(CtasEnum.Table);
}}
@ -717,6 +754,9 @@ const SqlEditor: FC<Props> = ({
{allowCVAS && (
<Menu.Item
onClick={() => {
logAction(LOG_ACTIONS_SQLLAB_CREATE_VIEW_AS, {
shortcut: false,
});
setShowCreateAsModal(true);
setCreateAs(CtasEnum.View);
}}

12
superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.tsx
View File

@ -23,6 +23,7 @@ import { connect } from 'react-redux';
import URI from 'urijs';
import type { QueryEditor, SqlLabRootState } from 'src/SqlLab/types';
import { FeatureFlag, styled, t, isFeatureEnabled } from '@superset-ui/core';
import { Logger } from 'src/logger/LogUtils';
import { Tooltip } from 'src/components/Tooltip';
import { detectOS } from 'src/utils/common';
import * as Actions from 'src/SqlLab/actions/sqlLab';
@ -193,6 +194,7 @@ class TabbedSqlEditors extends PureComponent<TabbedSqlEditorsProps> {
}
}
if (action === 'add') {
Logger.markTimeOrigin();
this.newQueryEditor();
}
}
@ -201,6 +203,14 @@ class TabbedSqlEditors extends PureComponent<TabbedSqlEditorsProps> {
this.props.actions.removeQueryEditor(qe);
}
onTabClicked = () => {
Logger.markTimeOrigin();
const noQueryEditors = this.props.queryEditors?.length === 0;
if (noQueryEditors) {
this.newQueryEditor();
}
};
render() {
const noQueryEditors = this.props.queryEditors?.length === 0;
const editors = this.props.queryEditors?.map(qe => (
@ -261,7 +271,7 @@ class TabbedSqlEditors extends PureComponent<TabbedSqlEditorsProps> {
onChange={this.handleSelect}
fullWidth={false}
hideAdd={this.props.offline}
onTabClick={() => noQueryEditors && this.newQueryEditor()}
onTabClick={this.onTabClicked}
onEdit={this.handleEdit}
type={noQueryEditors ? 'card' : 'editable-card'}
addIcon={

16
superset-frontend/src/logger/LogUtils.ts
View File

@ -70,6 +70,21 @@ 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';
export const LOG_ACTIONS_SQLLAB_CREATE_TABLE_AS = 'sqllab_create_table_as';
export const LOG_ACTIONS_SQLLAB_CREATE_VIEW_AS = 'sqllab_create_view_as';
export const LOG_ACTIONS_SQLLAB_RUN_QUERY = 'sqllab_run_query';
export const LOG_ACTIONS_SQLLAB_STOP_QUERY = 'sqllab_stop_query';
export const LOG_ACTIONS_SQLLAB_ESTIMATE_QUERY_COST =
'sqllab_estimate_query_cost';
export const LOG_ACTIONS_SQLLAB_SAVE_QUERY = 'sqllab_save_query';
export const LOG_ACTIONS_SQLLAB_SAVE_DATASET = 'sqllab_save_dataset';
export const LOG_ACTIONS_SQLLAB_COPY_LINK = 'sqllab_copy_link';
export const LOG_ACTIONS_SQLLAB_FORMAT_SQL = 'sqllab_format_sql';
export const LOG_ACTIONS_SQLLAB_DOWNLOAD_CSV = 'sqllab_download_csv';
export const LOG_ACTIONS_SQLLAB_COPY_RESULT_TO_CLIPBOARD =
'sqllab_copy_result_to_clipboard';
export const LOG_ACTIONS_SQLLAB_CREATE_CHART = 'sqllab_create_chart';
export const LOG_ACTIONS_SQLLAB_LOAD_TAB_STATE = 'sqllab_load_tab_state';
// Log event types --------------------------------------------------------------
export const LOG_EVENT_TYPE_TIMING = new Set([
@ -77,6 +92,7 @@ export const LOG_EVENT_TYPE_TIMING = new Set([
LOG_ACTIONS_RENDER_CHART,
LOG_ACTIONS_HIDE_BROWSER_TAB,
LOG_ACTIONS_SQLLAB_FETCH_FAILED_QUERY,
LOG_ACTIONS_SQLLAB_LOAD_TAB_STATE,
]);
export const LOG_EVENT_TYPE_USER = new Set([
LOG_ACTIONS_MOUNT_DASHBOARD,

55
superset-frontend/src/logger/useLogAction.test.ts Normal file
View File

@ -0,0 +1,55 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { renderHook } from '@testing-library/react-hooks';
import { createWrapper } from 'spec/helpers/testing-library';
import useLogAction from './useLogAction';
import { LOG_ACTIONS_SQLLAB_COPY_LINK } from './LogUtils';
import { LOG_EVENT } from './actions';
const middlewares = [thunk];
const mockStore = configureStore(middlewares);
test('dispatches logEvent action with static EventData', () => {
const staticEventData = { staticEventKey: 'value1' };
const store = mockStore();
const { result } = renderHook(() => useLogAction(staticEventData), {
wrapper: createWrapper({
useRedux: true,
store,
}),
});
result.current(LOG_ACTIONS_SQLLAB_COPY_LINK, { count: 1 });
store.getActions();
expect(store.getActions()).toEqual([
{
type: LOG_EVENT,
payload: {
eventName: LOG_ACTIONS_SQLLAB_COPY_LINK,
eventData: {
payload: {
...staticEventData,
count: 1,
},
},
},
},
]);
});

40
superset-frontend/src/logger/useLogAction.ts Normal file
View File

@ -0,0 +1,40 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { logEvent } from 'src/logger/actions';
export default function useLogAction(staticEventData: Record<string, any>) {
const dispatch = useDispatch();
const logAction = useCallback<typeof logEvent>(
(type, payload) =>
dispatch(
logEvent(type, {
payload: {
...staticEventData,
...payload,
},
}),
),
[staticEventData, dispatch],
);
return logAction;
}