SEN-846, SEN-803, SEN-808: trace view + minimap

Author: dashed

src/sentry/static/sentry/app/components/events/interfaces/spans/drag_manager.tsx

@@ -0,0 +1,214 @@
+import React from 'react';
+
+import {rectOfContent, clamp} from './utils';
+
+// we establish the minimum window size so that the window size of 0% is not possible
+const MINIMUM_WINDOW_SIZE = 0.5 / 100; // 0.5% window size
+
+enum ViewHandleType {
+  Left,
+  Right,
+}
+
+export type DragManagerChildrenProps = {
+  isDragging: boolean;
+
+  // left-side handle
+
+  onLeftHandleDragStart: (event: React.MouseEvent<SVGRectElement, MouseEvent>) => void;
+  leftHandlePosition: number; // between 0 to 1
+  viewWindowStart: number; // between 0 to 1
+
+  // right-side handle
+
+  onRightHandleDragStart: (event: React.MouseEvent<SVGRectElement, MouseEvent>) => void;
+  rightHandlePosition: number; // between 0 to 1
+  viewWindowEnd: number; // between 0 to 1
+};
+
+type DragManagerProps = {
+  children: (props: DragManagerChildrenProps) => JSX.Element;
+  interactiveLayerRef: React.RefObject<HTMLDivElement>;
+};
+
+type DragManagerState = {
+  isDragging: boolean;
+  currentDraggingHandle: ViewHandleType | undefined;
+  leftHandlePosition: number;
+  rightHandlePosition: number;
+
+  viewWindowStart: number;
+  viewWindowEnd: number;
+};
+
+class DragManager extends React.Component<DragManagerProps, DragManagerState> {
+  state: DragManagerState = {
+    isDragging: false,
+    currentDraggingHandle: void 0,
+    leftHandlePosition: 0, // positioned on the left-most side at 0%
+    rightHandlePosition: 1, // positioned on the right-most side at 100%
+
+    viewWindowStart: 0,
+    viewWindowEnd: 1,
+  };
+
+  previousUserSelect: string | null = null;
+
+  hasInteractiveLayer = (): boolean => {
+    return !!this.props.interactiveLayerRef.current;
+  };
+
+  onDragStart = (viewHandle: ViewHandleType) => (
+    event: React.MouseEvent<SVGRectElement, MouseEvent>
+  ) => {
+    if (
+      this.state.isDragging ||
+      event.type !== 'mousedown' ||
+      !this.hasInteractiveLayer()
+    ) {
+      return;
+    }
+
+    // prevent the user from selecting things outside the minimap when dragging
+    // the mouse cursor outside the minimap
+
+    this.previousUserSelect = document.body.style.userSelect;
+    document.body.style.userSelect = 'none';
+
+    // attach event listeners so that the mouse cursor can drag outside of the
+    // minimap
+    window.addEventListener('mousemove', this.onDragMove);
+    window.addEventListener('mouseup', this.onDragEnd);
+
+    // indicate drag has begun
+
+    this.setState({
+      isDragging: true,
+      currentDraggingHandle: viewHandle,
+    });
+  };
+
+  onLeftHandleDragStart = (event: React.MouseEvent<SVGRectElement, MouseEvent>) => {
+    this.onDragStart(ViewHandleType.Left)(event);
+  };
+
+  onRightHandleDragStart = (event: React.MouseEvent<SVGRectElement, MouseEvent>) => {
+    this.onDragStart(ViewHandleType.Right)(event);
+  };
+
+  onDragMove = (event: MouseEvent) => {
+    if (
+      !this.state.isDragging ||
+      event.type !== 'mousemove' ||
+      !this.hasInteractiveLayer()
+    ) {
+      return;
+    }
+
+    const rect = rectOfContent(this.props.interactiveLayerRef.current!);
+
+    // mouse x-coordinate relative to the interactive layer's left side
+    const rawMouseX = (event.pageX - rect.x) / rect.width;
+
+    switch (this.state.currentDraggingHandle) {
+      case ViewHandleType.Left: {
+        const min = 0;
+        const max = this.state.rightHandlePosition - MINIMUM_WINDOW_SIZE;
+
+        this.setState({
+          // clamp mouseLeft to be within [0, rightHandlePosition - MINIMUM_WINDOW_SIZE]
+          leftHandlePosition: clamp(rawMouseX, min, max),
+        });
+        break;
+      }
+      case ViewHandleType.Right: {
+        const min = this.state.leftHandlePosition + MINIMUM_WINDOW_SIZE;
+        const max = 1;
+
+        this.setState({
+          // clamp mouseLeft to be within [leftHandlePosition + MINIMUM_WINDOW_SIZE, 1]
+          rightHandlePosition: clamp(rawMouseX, min, max),
+        });
+        break;
+      }
+      default: {
+        // this should never occur
+      }
+    }
+  };
+
+  onDragEnd = (event: MouseEvent) => {
+    if (
+      !this.state.isDragging ||
+      event.type !== 'mouseup' ||
+      !this.hasInteractiveLayer()
+    ) {
+      return;
+    }
+
+    // remove listeners that were attached in onDragStart
+
+    window.removeEventListener('mousemove', this.onDragMove);
+    window.removeEventListener('mouseup', this.onDragEnd);
+
+    // restore body styles
+
+    document.body.style.userSelect = this.previousUserSelect;
+    this.previousUserSelect = null;
+
+    // indicate drag has ended
+
+    switch (this.state.currentDraggingHandle) {
+      case ViewHandleType.Left: {
+        this.setState(state => {
+          return {
+            isDragging: false,
+            currentDraggingHandle: void 0,
+
+            // commit leftHandlePosition to be viewWindowStart
+            viewWindowStart: state.leftHandlePosition,
+          };
+        });
+        break;
+      }
+      case ViewHandleType.Right: {
+        this.setState(state => {
+          return {
+            isDragging: false,
+            currentDraggingHandle: void 0,
+
+            // commit rightHandlePosition to be viewWindowEnd
+            viewWindowEnd: state.rightHandlePosition,
+          };
+        });
+        break;
+      }
+      default: {
+        // unreachable
+      }
+    }
+
+    this.setState({
+      isDragging: false,
+      currentDraggingHandle: void 0,
+    });
+  };
+
+  render() {
+    const childrenProps = {
+      isDragging: this.state.isDragging,
+
+      onLeftHandleDragStart: this.onLeftHandleDragStart,
+      leftHandlePosition: this.state.leftHandlePosition,
+      viewWindowStart: this.state.viewWindowStart,
+
+      onRightHandleDragStart: this.onRightHandleDragStart,
+      rightHandlePosition: this.state.rightHandlePosition,
+      viewWindowEnd: this.state.viewWindowEnd,
+    };
+
+    return this.props.children(childrenProps);
+  }
+}
+
+export default DragManager;

src/sentry/static/sentry/app/components/events/interfaces/spans/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {t} from 'app/locale';
+import SentryTypes from 'app/sentryTypes';
+
+import {Panel, PanelHeader, PanelBody} from 'app/components/panels';
+
+import {SpanEntry, SentryEvent} from './types';
+import TransactionView from './transaction_view';
+
+type SpansInterfacePropTypes = {
+  event: SentryEvent;
+} & SpanEntry;
+
+class SpansInterface extends React.Component<SpansInterfacePropTypes> {
+  static propTypes = {
+    event: SentryTypes.Event.isRequired,
+    type: PropTypes.oneOf(['spans']).isRequired,
+    data: PropTypes.arrayOf(
+      PropTypes.shape({
+        trace_id: PropTypes.string.isRequired,
+        parent_span_id: PropTypes.string,
+        span_id: PropTypes.string.isRequired,
+        start_timestamp: PropTypes.number.isRequired,
+        timestamp: PropTypes.number.isRequired, // same as end_timestamp
+        same_process_as_parent: PropTypes.bool.isRequired,
+        op: PropTypes.string.isRequired,
+        data: PropTypes.object.isRequired,
+      })
+    ).isRequired,
+  };
+  render() {
+    const {event} = this.props;
+
+    return (
+      <Panel>
+        <PanelHeader disablePadding={false} hasButtons={false}>
+          {t('Trace View')}
+        </PanelHeader>
+        <PanelBody>
+          <TransactionView event={event} />
+        </PanelBody>
+      </Panel>
+    );
+  }
+}
+
+export default SpansInterface;