mirror of https://github.com/apache/superset.git
[perf logging] Add timing event when browser tab is hidden (#9733)
* [perf logging] Add timing event when browser tab is hidden * fix review comment
This commit is contained in:
parent
d65d29c810
commit
0b963bdbb6
|
@ -29,7 +29,11 @@ import {
|
||||||
dashboardInfoPropShape,
|
dashboardInfoPropShape,
|
||||||
dashboardStatePropShape,
|
dashboardStatePropShape,
|
||||||
} from '../util/propShapes';
|
} from '../util/propShapes';
|
||||||
import { LOG_ACTIONS_MOUNT_DASHBOARD } from '../../logger/LogUtils';
|
import {
|
||||||
|
LOG_ACTIONS_HIDE_BROWSER_TAB,
|
||||||
|
LOG_ACTIONS_MOUNT_DASHBOARD,
|
||||||
|
Logger,
|
||||||
|
} from '../../logger/LogUtils';
|
||||||
import OmniContainer from '../../components/OmniContainer';
|
import OmniContainer from '../../components/OmniContainer';
|
||||||
import { areObjectsEqual } from '../../reduxUtils';
|
import { areObjectsEqual } from '../../reduxUtils';
|
||||||
|
|
||||||
|
@ -81,6 +85,8 @@ class Dashboard extends React.PureComponent {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.appliedFilters = props.activeFilters || {};
|
this.appliedFilters = props.activeFilters || {};
|
||||||
|
|
||||||
|
this.onVisibilityChange = this.onVisibilityChange.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
@ -90,6 +96,15 @@ class Dashboard extends React.PureComponent {
|
||||||
eventData.target_id = directLinkComponentId;
|
eventData.target_id = directLinkComponentId;
|
||||||
}
|
}
|
||||||
this.props.actions.logEvent(LOG_ACTIONS_MOUNT_DASHBOARD, eventData);
|
this.props.actions.logEvent(LOG_ACTIONS_MOUNT_DASHBOARD, eventData);
|
||||||
|
|
||||||
|
// Handle browser tab visibility change
|
||||||
|
if (document.visibilityState === 'hidden') {
|
||||||
|
this.visibilityEventData = {
|
||||||
|
start_offset: Logger.getTimestamp(),
|
||||||
|
ts: new Date().getTime(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
window.addEventListener('visibilitychange', this.onVisibilityChange);
|
||||||
}
|
}
|
||||||
|
|
||||||
UNSAFE_componentWillReceiveProps(nextProps) {
|
UNSAFE_componentWillReceiveProps(nextProps) {
|
||||||
|
@ -158,6 +173,27 @@ class Dashboard extends React.PureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
window.removeEventListener('visibilitychange', this.onVisibilityChange);
|
||||||
|
}
|
||||||
|
|
||||||
|
onVisibilityChange() {
|
||||||
|
if (document.visibilityState === 'hidden') {
|
||||||
|
// from visible to hidden
|
||||||
|
this.visibilityEventData = {
|
||||||
|
start_offset: Logger.getTimestamp(),
|
||||||
|
ts: new Date().getTime(),
|
||||||
|
};
|
||||||
|
} else if (document.visibilityState === 'visible') {
|
||||||
|
// from hidden to visible
|
||||||
|
const logStart = this.visibilityEventData.start_offset;
|
||||||
|
this.props.actions.logEvent(LOG_ACTIONS_HIDE_BROWSER_TAB, {
|
||||||
|
...this.visibilityEventData,
|
||||||
|
duration: Logger.getTimestamp() - logStart,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// return charts in array
|
// return charts in array
|
||||||
getAllCharts() {
|
getAllCharts() {
|
||||||
return Object.values(this.props.charts);
|
return Object.values(this.props.charts);
|
||||||
|
|
|
@ -19,6 +19,7 @@
|
||||||
// Log event names ------------------------------------------------------------
|
// Log event names ------------------------------------------------------------
|
||||||
export const LOG_ACTIONS_LOAD_CHART = 'load_chart';
|
export const LOG_ACTIONS_LOAD_CHART = 'load_chart';
|
||||||
export const LOG_ACTIONS_RENDER_CHART = 'render_chart';
|
export const LOG_ACTIONS_RENDER_CHART = 'render_chart';
|
||||||
|
export const LOG_ACTIONS_HIDE_BROWSER_TAB = 'hide_browser_tab';
|
||||||
|
|
||||||
export const LOG_ACTIONS_MOUNT_DASHBOARD = 'mount_dashboard';
|
export const LOG_ACTIONS_MOUNT_DASHBOARD = 'mount_dashboard';
|
||||||
export const LOG_ACTIONS_MOUNT_EXPLORER = 'mount_explorer';
|
export const LOG_ACTIONS_MOUNT_EXPLORER = 'mount_explorer';
|
||||||
|
@ -41,6 +42,7 @@ export const LOG_ACTIONS_OMNIBAR_TRIGGERED = 'omnibar_triggered';
|
||||||
export const LOG_EVENT_TYPE_TIMING = new Set([
|
export const LOG_EVENT_TYPE_TIMING = new Set([
|
||||||
LOG_ACTIONS_LOAD_CHART,
|
LOG_ACTIONS_LOAD_CHART,
|
||||||
LOG_ACTIONS_RENDER_CHART,
|
LOG_ACTIONS_RENDER_CHART,
|
||||||
|
LOG_ACTIONS_HIDE_BROWSER_TAB,
|
||||||
]);
|
]);
|
||||||
export const LOG_EVENT_TYPE_USER = new Set([
|
export const LOG_EVENT_TYPE_USER = new Set([
|
||||||
LOG_ACTIONS_MOUNT_DASHBOARD,
|
LOG_ACTIONS_MOUNT_DASHBOARD,
|
||||||
|
|
Loading…
Reference in New Issue