mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Analytics: Collect information about queries reordering (#45392)
This commit is contained in:
parent
d5b98772ed
commit
8bb3de3037
@ -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>
|
||||
</>
|
||||
|
@ -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 (
|
||||
|
Loading…
Reference in New Issue
Block a user