feat(events-v2) Add rough sketch of event modal

src/sentry/static/sentry/app/components/eventOrGroupHeader.jsx

@@ -9,7 +9,7 @@ import ProjectLink from 'app/components/projectLink';
 import {Metadata} from 'app/sentryTypes';
 import EventOrGroupTitle from 'app/components/eventOrGroupTitle';
 import Tooltip from 'app/components/tooltip';
-import {isNativePlatform} from 'app/utils/platform';
+import {getMessage, getLocation} from 'app/utils/events';
 
 /**
  * Displays an event or group/issue title (i.e. in Stream)
@@ -44,33 +44,6 @@ class EventOrGroupHeader extends React.Component {
     includeLink: true,
   };
 
-  getMessage() {
-    const {data} = this.props;
-    const {metadata, type, culprit} = data || {};
-
-    switch (type) {
-      case 'error':
-        return metadata.value;
-      case 'csp':
-        return metadata.message;
-      case 'expectct':
-      case 'expectstaple':
-      case 'hpkp':
-        return '';
-      default:
-        return culprit || '';
-    }
-  }
-
-  getLocation() {
-    const {data} = this.props;
-    if (data.type === 'error' && isNativePlatform(data.platform)) {
-      const {metadata} = data || {};
-      return metadata.filename || null;
-    }
-    return null;
-  }
-
   getTitle() {
     const {hideIcons, hideLevel, includeLink, data, params} = this.props;
     const {orgId, projectId} = params;
@@ -126,10 +99,10 @@ class EventOrGroupHeader extends React.Component {
   }
 
   render() {
-    const {className} = this.props;
+    const {className, data} = this.props;
     const cx = classNames('event-issue-header', className);
-    const message = this.getMessage();
-    const location = this.getLocation();
+    const location = getLocation(data);
+    const message = getMessage(data);
 
     return (
       <div className={cx}>

src/sentry/static/sentry/app/components/eventOrGroupTitle.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {Metadata} from 'app/sentryTypes';
+import {getTitle} from 'app/utils/events';
 
 class EventOrGroupTitle extends React.Component {
   static propTypes = {
@@ -17,31 +18,11 @@ class EventOrGroupTitle extends React.Component {
       metadata: Metadata.isRequired,
       culprit: PropTypes.string,
     }),
+    style: PropTypes.object,
   };
 
   render() {
-    const {data} = this.props;
-    const {metadata, type, culprit} = data;
-    let {title} = data;
-    let subtitle = null;
-
-    if (type == 'error') {
-      subtitle = culprit;
-      if (metadata.type) {
-        title = metadata.type;
-      } else {
-        title = metadata.function || '<unknown>';
-      }
-    } else if (type == 'csp') {
-      title = metadata.directive;
-      subtitle = metadata.uri;
-    } else if (type === 'expectct' || type === 'expectstaple' || type === 'hpkp') {
-      title = metadata.message;
-      subtitle = metadata.origin;
-    } else if (type == 'default') {
-      title = metadata.title;
-    }
-
+    const {title, subtitle} = getTitle(this.props.data);
     if (subtitle) {
       return (
         <span style={this.props.style}>

src/sentry/static/sentry/app/utils/events.jsx

@@ -0,0 +1,57 @@
+import {isNativePlatform} from 'app/utils/platform';
+
+/**
+ * Extract the display message from an event.
+ */
+export function getMessage(event) {
+  const {metadata, type, culprit} = event;
+
+  switch (type) {
+    case 'error':
+      return metadata.value;
+    case 'csp':
+      return metadata.message;
+    case 'expectct':
+    case 'expectstaple':
+    case 'hpkp':
+      return '';
+    default:
+      return culprit || '';
+  }
+}
+
+/**
+ * Get the location from an event.
+ */
+export function getLocation(event) {
+  if (event.type === 'error' && isNativePlatform(event.platform)) {
+    const {metadata} = event || {};
+    return metadata.filename || null;
+  }
+  return null;
+}
+
+export function getTitle(event) {
+  const {metadata, type, culprit} = event;
+  let {title} = event;
+  let subtitle = null;
+
+  if (type == 'error') {
+    subtitle = culprit;
+    if (metadata.type) {
+      title = metadata.type;
+    } else {
+      title = metadata.function || '<unknown>';
+    }
+  } else if (type == 'csp') {
+    title = metadata.directive;
+    subtitle = metadata.uri;
+  } else if (type === 'expectct' || type === 'expectstaple' || type === 'hpkp') {
+    title = metadata.message;
+    subtitle = metadata.origin;
+  } else if (type == 'default') {
+    title = metadata.title;
+  }
+
+  return {title, subtitle};
+}

src/sentry/static/sentry/app/views/organizationEventsV2/data.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'react-emotion';
+import qs from 'query-string';
 
 import {deepFreeze} from 'app/utils';
 import DynamicWrapper from 'app/components/dynamicWrapper';
@@ -69,18 +70,23 @@ export const ALL_VIEWS = deepFreeze([
 export const SPECIAL_FIELDS = {
   event: {
     fields: ['title', 'id', 'project.name'],
-    renderFunc: (data, {organization}) => (
-      <Container>
-        <Link
-          css={overflowEllipsis}
-          to={`/organizations/${organization.slug}/projects/${
-            data['project.name']
-          }/events/${data.id}/`}
-        >
-          {data.title}
-        </Link>
-      </Container>
-    ),
+    renderFunc: (data, {organization, location}) => {
+      const newQuery = qs.stringify({
+        ...location.query,
+        eventSlug: `${data['project.name']}:${data.id}`,
+      });
+      return (
+        <Container>
+          <Link
+            css={overflowEllipsis}
+            to={`/organizations/${organization.slug}/events/?${newQuery}`}
+            data-test-id="event-title"
+          >
+            {data.title}
+          </Link>
+        </Container>
+      );
+    },
   },
   project: {
     fields: ['project.name'],