Some initial work on rendering user/http interface

src/sentry/interfaces.py

@@ -1109,6 +1109,36 @@ def _to_dict(self, value):
         else:
             return True, value
 
+    def get_context(self, event, is_public=False):
+        data = self.data
+        headers_is_dict, headers = self._to_dict(self.headers)
+
+        # educated guess as to whether the body is normal POST data
+        if headers_is_dict and headers.get('Content-Type') == 'application/x-www-form-urlencoded' and '=' in data:
+            _, data = self._to_dict(data)
+
+        context = {
+            'is_public': is_public,
+            'event': event,
+            'url': self.url,
+            'short_url': self.short_url,
+            'method': self.method,
+            'query_string': self.query_string,
+            'fragment': self.fragment,
+            'headers': self.headers,
+        }
+        if not is_public:
+            # It's kind of silly we store this twice
+            _, cookies = self._to_dict(self.cookies)
+
+            context.update({
+                'cookies': cookies,
+                'env': self.env,
+                'data': data,
+            })
+
+        return context
+
     def to_html(self, event, is_public=False, **kwargs):
         data = self.data
         headers_is_dict, headers = self._to_dict(self.headers)
@@ -1152,6 +1182,34 @@ def get_search_context(self, event):
     def get_type_name(self):
         return 'http_request'
 
+    def get_json_context(self):
+        data = self.data
+        headers_is_dict, headers = self._to_dict(self.headers)
+
+        # educated guess as to whether the body is normal POST data
+        if headers_is_dict and headers.get('Content-Type') == 'application/x-www-form-urlencoded' and '=' in data:
+            _, data = self._to_dict(data)
+
+        context = {
+            'url': self.url,
+            'shortUrl': self.short_url,
+            'method': self.method,
+            'queryString': self.query_string or None,
+            'fragment': self.fragment or None,
+            'headers': self.headers or None,
+        }
+
+        # It's kind of silly we store this twice
+        _, cookies = self._to_dict(self.cookies)
+
+        context.update({
+            'cookies': cookies or None,
+            'env': self.env or None,
+            'body': data or None,
+        })
+
+        return context
+
 
 class Template(Interface):
     """

src/sentry/static/sentry/app/directives/prettyJson.js

@@ -0,0 +1,12 @@
+define(['app', 'angular'], function(app, angular){
+  'use strict';
+
+  app.directive('prettyJson', function() {
+    return {
+      restrict: 'AC',
+      link: function(scope, element, attrs) {
+        element.text(angular.toJson(scope.$eval(attrs.prettyJson), true));
+      }
+    };
+  });
+});

src/sentry/static/sentry/app/routes.js

@@ -34,6 +34,7 @@ define([
 
     // registration via loader
     'directives/autoFocus',
+    'directives/prettyJson',
     'directives/timeSince',
     'filters/formatNumber'
 ], function(

src/sentry/static/sentry/app/templates/entry_handlers/http_request.html

@@ -1 +1,33 @@
-{{event.method}} {{event.url}}
+<h4>{{data.method}} <a href="{{data.url}}">{{data.shortUrl}}</a></h4>
+
+<table class="table">
+    <colgroup>
+        <col style="width:100px;">
+    </colgroup>
+    <tbody>
+        <tr ng-if="data.queryString">
+            <th>Query:</th>
+            <td class="code" pretty-json="data.queryString"></td>
+        </tr>
+        <tr ng-if="data.fragment">
+            <th>Fragment:</th>
+            <td class="code" pretty-json="data.fragment"></td>
+        </tr>
+        <tr ng-if="data.body">
+            <th>Body:</th>
+            <td class="code" pretty-json="data.body"></td>
+        </tr>
+        <tr ng-if="data.cookies">
+            <th>Cookies:</th>
+            <td class="code" pretty-json="data.cookies"></td>
+        </tr>
+        <tr ng-if="data.headers">
+            <th>Headers:</th>
+            <td class="code" pretty-json="data.headers"></td>
+        </tr>
+        <tr ng-if="data.env">
+            <th>Environment:</th>
+            <td class="code" pretty-json="data.env"></td>
+        </tr>
+    </tbody>
+</table>

src/sentry/static/sentry/app/templates/entry_handlers/user.html

@@ -0,0 +1,23 @@
+<table class="table">
+    <colgroup>
+        <col style="width:130px;">
+    </colgroup>
+    <tbody>
+        <tr ng-if="data.id">
+            <th>ID:</th>
+            <td class="code">{{data.id}}</td>
+        </tr>
+        <tr ng-if="data.ip_address">
+            <th>IP Address:</th>
+            <td class="code">{{data.ip_address}}</td>
+        </tr>
+        <tr ng-if="data.username">
+            <th>Username:</th>
+            <td class="code">{{data.username}}</td>
+        </tr>
+        <tr ng-if="data.email">
+            <th>Email:</th>
+            <td class="code">{{data.email}}</td>
+        </tr>
+    </tbody>
+</table>

src/sentry/static/sentry/css/sentry-simple.css

@@ -6356,6 +6356,16 @@ header .project-dropdown .icon-arrow-down {
 .group-body .graph .nav-links > li.active > a {
   color: #f63d09;
 }
+.group-body .code {
+  display: block;
+  font-size: 12px;
+  line-height: 20px;
+  word-break: break-all;
+  word-wrap: break-word;
+  white-space: pre;
+  white-space: pre-wrap;
+  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+}
 .event-browser {
   text-align: center;
 }

src/sentry/static/sentry/css/sentry-simple.min.css

@@ -6356,6 +6356,16 @@ header .project-dropdown .icon-arrow-down {
 .group-body .graph .nav-links > li.active > a {
   color: #f63d09;
 }
+.group-body .code {
+  display: block;
+  font-size: 12px;
+  line-height: 20px;
+  word-break: break-all;
+  word-wrap: break-word;
+  white-space: pre;
+  white-space: pre-wrap;
+  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+}
 .event-browser {
   text-align: center;
 }

src/sentry/static/sentry/less/sentry-simple.less

@@ -496,6 +496,17 @@ header {
       }
     }
   }
+
+  .code {
+    display: block;
+    font-size: 12px;
+    line-height: 20px;
+    word-break: break-all;
+    word-wrap: break-word;
+    white-space: pre;
+    white-space: pre-wrap;
+    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+  }
 }
 
 .event-browser {