clean up

Author: dashed

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

@@ -5,13 +5,15 @@ import {t} from 'app/locale';
 import SearchBar from 'app/components/searchBar';
 import SentryTypes from 'app/sentryTypes';
 import {Panel} from 'app/components/panels';
+import EventView from 'app/views/eventsV2/eventView';
 
 import {SentryTransactionEvent} from './types';
 import TraceView from './traceView';
 
 type PropType = {
   orgId: string;
   event: SentryTransactionEvent;
+  eventView: EventView;
 };
 
 type State = {
@@ -35,9 +37,7 @@ class SpansInterface extends React.Component<PropType, State> {
   };
 
   render() {
-    const {event, orgId} = this.props;
-
-    console.log('event', event);
+    const {event, orgId, eventView} = this.props;
 
     return (
       <div>
@@ -49,7 +49,12 @@ class SpansInterface extends React.Component<PropType, State> {
         />
         <br />
         <Panel>
-          <TraceView event={event} searchQuery={this.state.searchQuery} orgId={orgId} />
+          <TraceView
+            event={event}
+            searchQuery={this.state.searchQuery}
+            orgId={orgId}
+            eventView={eventView}
+          />
         </Panel>
       </div>
     );

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

@@ -9,6 +9,7 @@ import space from 'app/styles/space';
 import Count from 'app/components/count';
 import Tooltip from 'app/components/tooltip';
 import InlineSvg from 'app/components/inlineSvg';
+import EventView from 'app/views/eventsV2/eventView';
 
 import {
   toPercent,
@@ -178,6 +179,7 @@ type SpanBarProps = {
   isRoot?: boolean;
   toggleSpanTree: () => void;
   isCurrentSpanFilteredOut: boolean;
+  eventView: EventView;
 };
 
 type SpanBarState = {
@@ -219,9 +221,11 @@ class SpanBar extends React.Component<SpanBarProps, SpanBarState> {
       return null;
     }
 
-    const {span, orgId, isRoot} = this.props;
+    const {span, orgId, isRoot, eventView} = this.props;
 
-    return <SpanDetail span={span} orgId={orgId} isRoot={!!isRoot} />;
+    return (
+      <SpanDetail span={span} orgId={orgId} isRoot={!!isRoot} eventView={eventView} />
+    );
   };
 
   getBounds = (): {

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

@@ -10,11 +10,12 @@ import Pill from 'app/components/pill';
 import space from 'app/styles/space';
 import withApi from 'app/utils/withApi';
 import {Client} from 'app/api';
+import Button from 'app/components/button';
 import {
   generateEventSlug,
   generateEventDetailsRoute,
 } from 'app/views/eventsV2/eventDetails/utils';
-import Button from 'app/components/button';
+import EventView from 'app/views/eventsV2/eventView';
 
 import {SpanType} from './types';
 
@@ -29,6 +30,7 @@ type Props = {
   orgId: string;
   span: Readonly<SpanType>;
   isRoot: boolean;
+  eventView: EventView;
 };
 
 type State = {
@@ -65,8 +67,6 @@ class SpanDetail extends React.Component<Props, State> {
             'project.name': result['project.name'],
           }),
         });
-
-        console.log('response', span.span_id, response);
       })
       .catch(_error => {
         // don't do anything
@@ -78,15 +78,10 @@ class SpanDetail extends React.Component<Props, State> {
 
     const url = `/organizations/${orgId}/eventsv2/`;
 
-    // TODO: ideally trace.parent_span_id
-    const parent_span_id_key = 'contexts.value';
-
     const query = {
       field: ['transaction', 'id'],
       sort: ['-id'],
-      query: `event.type:transaction trace:${
-        span.trace_id
-      } ${parent_span_id_key}:${spanID}`,
+      query: `event.type:transaction trace:${span.trace_id} trace.parent_span:${spanID}`,
     };
 
     return api.requestPromise(url, {
@@ -100,14 +95,21 @@ class SpanDetail extends React.Component<Props, State> {
       return null;
     }
 
-    const parentTransaction = generateEventDetailsRoute({
+    const {eventView} = this.props;
+
+    const parentTransactionLink = generateEventDetailsRoute({
       eventSlug: this.state.eventSlug,
       orgSlug: this.props.orgId,
     });
 
+    const to = {
+      pathname: parentTransactionLink,
+      query: eventView.generateQueryStringObject(),
+    };
+
     return (
       <div>
-        <Button size="xsmall" href={parentTransaction}>
+        <Button size="xsmall" to={to}>
           {t('Open span')}
         </Button>
       </div>

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

@@ -1,11 +1,14 @@
 import React from 'react';
 
+import EventView from 'app/views/eventsV2/eventView';
+
 import {SpanBoundsType, SpanGeneratedBoundsType} from './utils';
 import {SpanType, ParsedTraceType} from './types';
 import SpanBar from './spanBar';
 
 type PropType = {
   orgId: string;
+  eventView: EventView;
   span: Readonly<SpanType>;
   trace: Readonly<ParsedTraceType>;
   generateBounds: (bounds: SpanBoundsType) => SpanGeneratedBoundsType;
@@ -59,11 +62,13 @@ class SpanGroup extends React.Component<PropType, State> {
       spanNumber,
       isCurrentSpanFilteredOut,
       orgId,
+      eventView,
     } = this.props;
 
     return (
       <React.Fragment>
         <SpanBar
+          eventView={eventView}
           orgId={orgId}
           spanBarColour={spanBarColour}
           span={span}

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

@@ -3,6 +3,7 @@ import styled from 'react-emotion';
 import get from 'lodash/get';
 
 import {t} from 'app/locale';
+import EventView from 'app/views/eventsV2/eventView';
 
 import {SpanType, SpanChildrenLookupType, ParsedTraceType} from './types';
 import {
@@ -27,6 +28,7 @@ type RenderedSpanTree = {
 
 type PropType = {
   orgId: string;
+  eventView: EventView;
   trace: ParsedTraceType;
   dragProps: DragManagerChildrenProps;
   filterSpans: FilterSpans | undefined;
@@ -121,7 +123,7 @@ class SpanTree extends React.Component<PropType> {
     childSpans: Readonly<SpanChildrenLookupType>;
     generateBounds: (bounds: SpanBoundsType) => SpanGeneratedBoundsType;
   }): RenderedSpanTree => {
-    const {orgId} = this.props;
+    const {orgId, eventView} = this.props;
 
     const spanBarColour: string = pickSpanBarColour(span.op);
     const spanChildren: Array<SpanType> = get(childSpans, span.span_id, []);
@@ -197,6 +199,7 @@ class SpanTree extends React.Component<PropType> {
         <React.Fragment>
           {infoMessage}
           <SpanGroup
+            eventView={eventView}
             orgId={orgId}
             spanNumber={spanNumber}
             isLast={isLast}

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

@@ -7,6 +7,7 @@ import isNumber from 'lodash/isNumber';
 import {t} from 'app/locale';
 import EmptyStateWarning from 'app/components/emptyStateWarning';
 import {createFuzzySearch} from 'app/utils/createFuzzySearch';
+import EventView from 'app/views/eventsV2/eventView';
 
 import DragManager, {DragManagerChildrenProps} from './dragManager';
 import SpanTree from './spanTree';
@@ -46,6 +47,7 @@ type Props = {
   orgId: string;
   event: Readonly<SentryTransactionEvent>;
   searchQuery: string | undefined;
+  eventView: EventView;
 };
 
 type State = {
@@ -205,7 +207,7 @@ class TraceView extends React.PureComponent<Props, State> {
     }
 
     const parsedTrace = this.state.parsedTrace;
-    const {orgId} = this.props;
+    const {orgId, eventView} = this.props;
 
     return (
       <DragManager interactiveLayerRef={this.minimapInteractiveRef}>
@@ -218,6 +220,7 @@ class TraceView extends React.PureComponent<Props, State> {
             >
               {this.renderHeader(dragProps, parsedTrace)}
               <SpanTree
+                eventView={eventView}
                 trace={parsedTrace}
                 dragProps={dragProps}
                 filterSpans={this.state.filterSpans}