Add classifier to default breadcrumb

bin/load-mocks

@@ -138,13 +138,15 @@ def get_sample_breadcrumbs(prior_event_id=None):
                 "type": "log",
                 "timestamp": milliseconds_ago(now, 3300),
                 "message": "This is a warning log message",
-                "category": "warning"
+                "category": "warning",
+                "classifier": 'django.utils.log'
             },
             {
                 "type": "log",
                 "timestamp": milliseconds_ago(now, 2700),
                 "message": "This is an error log message",
-                "category": "error"
+                "category": "error",
+                "classifier": 'django.utils.log'
             },
             {
                 "type": "http",

src/sentry/interfaces/breadcrumbs.py

@@ -183,6 +183,8 @@ class Breadcrumbs(Interface):
                 'timestamp': to_timestamp(ts),
                 'message': crumb.get('message', None),
                 'category': crumb.get('category', 'default'),
+                'classifier': crumb.get('classifier', None),
+                'duration': crumb.get('duration', None),
                 'data': crumb.get('data', {}),
             })
         return cls(values=values)
@@ -200,6 +202,8 @@ class Breadcrumbs(Interface):
                 'timestamp': to_datetime(x['timestamp']),
                 'message': x['message'],
                 'category': x['category'],
+                'classifier': x['classifier'],
+                'duration': x['duration'],
                 'data': x['data'],
             }
         return {

src/sentry/static/sentry/app/components/events/interfaces/breadcrumbComponents/default.jsx

@@ -1,10 +1,8 @@
 import React from 'react';
+import moment from 'moment';
 import _ from 'underscore';
 
 import Classifier from './classifier';
-import KeyValueList from '../keyValueList';
-
-import ContextData from '../../../contextData';
 
 const DefaultCrumbComponent = React.createClass({
   propTypes: {
@@ -22,7 +20,7 @@ const DefaultCrumbComponent = React.createClass({
       .filter(([val, key]) => key !== 'message' && key !== 'level' && key !== 'classifier')
       .map(([val, key]) => {
         return (
-          <tr>
+          <tr key={key}>
             <td className="key">{key}</td>
             <td><pre>{val + ''}</pre></td>
           </tr>
@@ -40,7 +38,14 @@ const DefaultCrumbComponent = React.createClass({
           <thead>
             <tr>
               <td className="key">{crumb.type}</td>
-              <td>{message && <pre><code>{message}</code></pre>}</td>
+              <td>
+                {message &&
+                  <pre>
+                    <code>{message}</code>
+                    <Classifier value={crumb.classifier} hideIfEmpty={true}/>
+                  </pre>
+                }
+              </td>
             </tr>
           </thead>
           {crumb.data &&

src/sentry/static/sentry/less/group-detail.less

@@ -1611,7 +1611,7 @@ ul.crumbs {
       pre {
         display: inline-block;
         padding: 2px 8px;
-        margin: -1px 0 0;
+        margin: -1px 0q 0;
       }
     }