feat(events-v2): Add rough version of Error and CSP tables

src/sentry/api/bases/organization_events.py

@@ -1,12 +1,30 @@
 from __future__ import absolute_import
 
+from copy import deepcopy
 from rest_framework.exceptions import PermissionDenied
 
 from sentry import features
 from sentry.api.bases import OrganizationEndpoint, OrganizationEventsError
 from sentry.api.event_search import get_snuba_query_args, InvalidSearchQuery
 from sentry.models.project import Project
 
+# We support 4 "special fields" on the v2 events API which perform some
+# additional calculations over aggregated event data
+SPECIAL_FIELDS = {
+    'issue_title': {
+        'aggregations': [['anyHeavy', 'title', 'issue_title']],
+    },
+    'last_seen': {
+        'aggregations': [['max', 'timestamp', 'last_seen']],
+    },
+    'event_count': {
+        'aggregations': [['uniq', 'id', 'event_count']],
+    },
+    'user_count': {
+        'aggregations': [['uniq', 'user', 'user_count']],
+    },
+}
+
 
 class OrganizationEventsEndpointBase(OrganizationEndpoint):
 
@@ -49,6 +67,9 @@ def get_snuba_query_args_v2(self, request, organization, params):
             raise OrganizationEventsError(exc.message)
 
         fields = request.GET.getlist('field')[:]
+        aggregations = []
+        groupby = request.GET.getlist('groupby')
+
         if fields:
             # If project.name is requested, get the project.id from Snuba so we
             # can use this to look up the name in Sentry
@@ -57,13 +78,19 @@ def get_snuba_query_args_v2(self, request, organization, params):
                 if 'project.id' not in fields:
                     fields.append('project.id')
 
+            for field in fields[:]:
+                if field in SPECIAL_FIELDS:
+                    special_field = deepcopy(SPECIAL_FIELDS[field])
+                    fields.remove(field)
+                    fields.extend(special_field.get('fields', []))
+                    aggregations.extend(special_field.get('aggregations', []))
+                    groupby.extend(special_field.get('groupby', []))
+
             snuba_args['selected_columns'] = fields
 
-        aggregations = request.GET.getlist('aggregation')
         if aggregations:
-            snuba_args['aggregations'] = [aggregation.split(',') for aggregation in aggregations]
+            snuba_args['aggregations'] = aggregations
 
-        groupby = request.GET.getlist('groupby')
         if groupby:
             snuba_args['groupby'] = groupby
 

src/sentry/static/sentry/app/sentryTypes.jsx

@@ -115,10 +115,9 @@ export const EventView = PropTypes.shape({
   id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   data: PropTypes.shape({
-    fields: PropTypes.arrayOf(PropTypes.string).isRequired,
-    groupby: PropTypes.arrayOf(PropTypes.string).isRequired,
-    aggregations: PropTypes.arrayOf(PropTypes.array).isRequired,
-    sort: PropTypes.string.isRequired,
+    fields: PropTypes.arrayOf(PropTypes.string),
+    groupby: PropTypes.arrayOf(PropTypes.string),
+    sort: PropTypes.string,
   }).isRequired,
   tags: PropTypes.arrayOf(PropTypes.string).isRequired,
 });

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

@@ -18,9 +18,7 @@ export const ALL_VIEWS = deepFreeze([
     name: 'All Events',
     data: {
       fields: ['event', 'event.type', 'project', 'user', 'time'],
-      groupby: [],
-      aggregations: [],
-      sort: '',
+      sort: '-timestamp',
     },
     tags: [
       'event.type',
@@ -35,21 +33,19 @@ export const ALL_VIEWS = deepFreeze([
     id: 'errors',
     name: 'Errors',
     data: {
-      fields: [],
-      groupby: ['issue.id'],
-      aggregations: [['uniq', 'id', 'event_count'], ['uniq', 'user', 'user_count']],
-      sort: '',
+      fields: ['issue_title', 'event_count', 'user_count', 'project', 'last_seen'],
+      groupby: ['issue.id', 'project.id'],
+      sort: '-last_seen',
     },
     tags: ['error.type', 'project.name'],
   },
   {
     id: 'csp',
     name: 'CSP',
     data: {
-      fields: [],
-      groupby: ['issue.id'],
-      aggregations: [['uniq', 'id', 'event_count'], ['uniq', 'user', 'user_count']],
-      sort: '',
+      fields: ['issue_title', 'event_count', 'user_count', 'project', 'last_seen'],
+      groupby: ['issue.id', 'project.id'],
+      sort: '-last_seen',
     },
     tags: [
       'project.name',
@@ -123,6 +119,24 @@ export const SPECIAL_FIELDS = {
       </Container>
     ),
   },
+  event_count: {
+    title: 'events',
+    fields: ['event_count'],
+    renderFunc: data => <Container>{data.event_count}</Container>,
+  },
+  user_count: {
+    title: 'users',
+    fields: ['user_count'],
+    renderFunc: data => <Container>{data.user_count}</Container>,
+  },
+  last_seen: {
+    fields: ['last_seen'],
+    renderFunc: data => (
+      <Container>
+        <DynamicWrapper value={<StyledDateTime date={data.last_seen} />} fixed="time" />
+      </Container>
+    ),
+  },
 };
 
 const Container = styled('div')`

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

@@ -33,13 +33,13 @@ class Events extends AsyncComponent {
   };
 
   getEndpoints() {
-    const {organization, view} = this.props;
+    const {location, organization, view} = this.props;
     return [
       [
         'data',
         `/organizations/${organization.slug}/events/`,
         {
-          query: getQuery(view),
+          query: getQuery(view, location),
         },
       ],
     ];

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

@@ -61,7 +61,11 @@ export default class Table extends React.Component {
       <Panel>
         <TableHeader className={getGridStyle(fields.length)}>
           {fields.map(field => (
-            <HeaderItem key={field}>{field}</HeaderItem>
+            <HeaderItem key={field}>
+              {SPECIAL_FIELDS.hasOwnProperty(field)
+                ? SPECIAL_FIELDS[field].title || field
+                : field}
+            </HeaderItem>
           ))}
         </TableHeader>
         <PanelBody>{this.renderBody()}</PanelBody>

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

@@ -1,3 +1,5 @@
+import {pick} from 'lodash';
+
 import {ALL_VIEWS, SPECIAL_FIELDS} from './data';
 
 /**
@@ -17,18 +19,37 @@ export function getCurrentView(requestedView) {
  * @param {Object} view
  * @returns {Object}
  */
-export function getQuery(view) {
-  const data = {...view.data};
-  const fields = data.fields.reduce((list, field) => {
+export function getQuery(view, location) {
+  const fields = [];
+  const groupby = view.data.groupby ? [...view.data.groupby] : [];
+
+  view.data.fields.forEach(field => {
     if (SPECIAL_FIELDS.hasOwnProperty(field)) {
-      list.push(...SPECIAL_FIELDS[field].fields);
+      const specialField = SPECIAL_FIELDS[field];
+
+      if (specialField.hasOwnProperty('fields')) {
+        fields.push(...specialField.fields);
+      }
+      if (specialField.hasOwnProperty('groupby')) {
+        groupby.push(...specialField.groupby);
+      }
     } else {
-      list.push(field);
+      fields.push(field);
     }
-    return list;
-  }, []);
+  });
+
+  const data = pick(location.query, [
+    'start',
+    'end',
+    'utc',
+    'statsPeriod',
+    'cursor',
+    'query',
+  ]);
 
   data.field = [...new Set(fields)];
+  data.groupby = groupby;
+  data.sort = view.data.sort;
 
   return data;
 }

tests/acceptance/test_organization_events_v2.py

@@ -56,3 +56,33 @@ def test_all_events(self, mock_now):
             self.browser.get(self.path)
             self.browser.wait_until_not('.loading-indicator')
             self.browser.snapshot('events-v2 - all events')
+
+    @patch('django.utils.timezone.now')
+    def test_errors(self, mock_now):
+        mock_now.return_value = datetime.utcnow().replace(tzinfo=pytz.utc)
+        min_ago = (timezone.now() - timedelta(minutes=1)).isoformat()[:19]
+        self.store_event(
+            data={
+                'event_id': 'a' * 32,
+                'message': 'oh no',
+                'timestamp': min_ago,
+                'fingerprint': ['group-1']
+            },
+            project_id=self.project.id,
+            assert_no_errors=False,
+        )
+        self.store_event(
+            data={
+                'event_id': 'b' * 32,
+                'message': 'oh no',
+                'timestamp': min_ago,
+                'fingerprint': ['group-1']
+            },
+            project_id=self.project.id,
+            assert_no_errors=False,
+        )
+
+        with self.feature(FEATURE_NAME):
+            self.browser.get(self.path + '?view=errors')
+            self.browser.wait_until_not('.loading-indicator')
+            self.browser.snapshot('events-v2 - errors')

tests/js/spec/views/organizationEventsV2/utils.spec.jsx

@@ -20,13 +20,12 @@ describe('getQuery()', function() {
       id: 'test',
       name: 'test view',
       data: {
-        query: '',
         fields: ['event', 'user', 'issue.id'],
       },
       tags: [],
     };
 
-    expect(getQuery(view).field).toEqual([
+    expect(getQuery(view, {}).field).toEqual([
       'title',
       'id',
       'project.name',

tests/snuba/api/endpoints/test_organization_events_v2.py

@@ -57,7 +57,7 @@ def test_multi_project_feature_gate_rejection(self):
         )
 
         query = {
-            'fields': ['id', 'project.id'],
+            'field': ['id', 'project.id'],
             'project': [project.id, project2.id],
         }
         with self.feature({'organizations:events-v2': True, 'organizations:global-views': False}):
@@ -201,7 +201,7 @@ def test_groupby(self):
         assert response.data[1]['project.id'] == project.id
         assert response.data[1]['environment'] == 'staging'
 
-    def test_event_and_user_counts(self):
+    def test_special_fields(self):
         self.login_as(user=self.user)
         project = self.create_project()
         self.store_event(
@@ -245,8 +245,8 @@ def test_event_and_user_counts(self):
                 self.url,
                 format='json',
                 data={
-                    'groupby': ['issue.id'],
-                    'aggregation': ['uniq,id,event_count', 'uniq,sentry:user,user_count'],
+                    'field': ['issue_title', 'event_count', 'user_count'],
+                    'groupby': ['issue.id', 'project.id'],
                     'orderby': 'issue.id'
                 },
             )