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

2026-04-24 18:44:53 +00:00 · 2024-06-14 09:35:17 -07:00
parent 66bd0ce3d0
commit 05829cbda9
9 changed files with 217 additions and 12 deletions
--- a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
@@ -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 && (
--- a/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
@@ -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={
--- a/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx
@@ -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();
  };
--- a/superset-frontend/src/SqlLab/components/ShareSqlLabQuery/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ShareSqlLabQuery/index.tsx
@@ -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);
    }
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
@@ -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(() => {
-    dispatch(formatQuery(queryEditor));
-  }, [dispatch, queryEditor]);
+  const formatCurrentQuery = useCallback(
+    (useShortcut?: boolean) => {
+      logAction(LOG_ACTIONS_SQLLAB_FORMAT_SQL, {
+        shortcut: Boolean(useShortcut),
+      });
+      dispatch(formatQuery(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);
            }}
--- a/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.tsx
+++ b/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.tsx
@@ -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={