Analytics: Collect information about queries reordering (#45392)

This commit is contained in:
Dominik Prokop 2022-02-16 05:16:25 -08:00 committed by GitHub
parent d5b98772ed
commit 8bb3de3037
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 49 additions and 5 deletions

View File

@ -4,6 +4,7 @@ import { GrafanaTheme } from '@grafana/data';
import { css, cx } from '@emotion/css';
import { useUpdateEffect } from 'react-use';
import { Draggable } from 'react-beautiful-dnd';
import { reportInteraction } from '@grafana/runtime';
interface QueryOperationRowProps {
index: number;
@ -47,6 +48,24 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
setIsContentVisible(!isContentVisible);
}, [isContentVisible, setIsContentVisible]);
const reportDragMousePosition = useCallback((e) => {
// When drag detected react-beautiful-dnd will preventDefault the event
// Ref: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/how-we-use-dom-events.md#a-mouse-drag-has-started-and-the-user-is-now-dragging
if (e.defaultPrevented) {
const rect = e.currentTarget.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
// report relative mouse position within the header element
reportInteraction('query_row_reorder_drag_position', {
x: x / rect.width,
y: y / rect.height,
width: rect.width,
height: rect.height,
});
}
}, []);
useUpdateEffect(() => {
if (isContentVisible) {
if (onOpen) {
@ -106,7 +125,9 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
return (
<>
<div ref={provided.innerRef} className={styles.wrapper} {...provided.draggableProps}>
<div {...dragHandleProps}>{rowHeader}</div>
<div {...dragHandleProps} onMouseMove={reportDragMousePosition}>
{rowHeader}
</div>
{isContentVisible && <div className={styles.content}>{children}</div>}
</div>
</>

View File

@ -11,8 +11,8 @@ import {
PanelData,
} from '@grafana/data';
import { QueryEditorRow } from './QueryEditorRow';
import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
import { getDataSourceSrv } from '@grafana/runtime';
import { DragDropContext, DragStart, Droppable, DropResult } from 'react-beautiful-dnd';
import { getDataSourceSrv, reportInteraction } from '@grafana/runtime';
interface Props {
// The query configuration
@ -81,8 +81,18 @@ export class QueryEditorRows extends PureComponent<Props> {
);
}
onDragStart = (result: DragStart) => {
const { queries, dsSettings } = this.props;
reportInteraction('query_row_reorder_started', {
startIndex: result.source.index,
numberOfQueries: queries.length,
datasourceType: dsSettings.type,
});
};
onDragEnd = (result: DropResult) => {
const { queries, onQueriesChange } = this.props;
const { queries, onQueriesChange, dsSettings } = this.props;
if (!result || !result.destination) {
return;
@ -91,6 +101,12 @@ export class QueryEditorRows extends PureComponent<Props> {
const startIndex = result.source.index;
const endIndex = result.destination.index;
if (startIndex === endIndex) {
reportInteraction('query_row_reorder_canceled', {
startIndex,
endIndex,
numberOfQueries: queries.length,
datasourceType: dsSettings.type,
});
return;
}
@ -98,13 +114,20 @@ export class QueryEditorRows extends PureComponent<Props> {
const [removed] = update.splice(startIndex, 1);
update.splice(endIndex, 0, removed);
onQueriesChange(update);
reportInteraction('query_row_reorder_ended', {
startIndex,
endIndex,
numberOfQueries: queries.length,
datasourceType: dsSettings.type,
});
};
render() {
const { dsSettings, data, queries, app, history, eventBus } = this.props;
return (
<DragDropContext onDragEnd={this.onDragEnd}>
<DragDropContext onDragStart={this.onDragStart} onDragEnd={this.onDragEnd}>
<Droppable droppableId="transformations-list" direction="vertical">
{(provided) => {
return (