feat(ui): Add spark lines to Incidents List [SEN-702]

src/sentry/static/sentry/app/views/organizationIncidents/list/index.jsx

@@ -22,6 +22,7 @@ import getDynamicText from 'app/utils/getDynamicText';
 import space from 'app/styles/space';
 
 import Status from '../status';
+import SparkLine from './sparkLine';
 
 const DEFAULT_QUERY_STATUS = '';
 
@@ -47,11 +48,14 @@ class OrganizationIncidentsList extends AsyncComponent {
       .as('seconds');
 
     return (
-      <PanelItem key={incident.id}>
+      <IncidentPanelItem key={incident.id}>
         <TableLayout>
-          <Link to={`/organizations/${orgId}/incidents/${incident.identifier}/`}>
-            {incident.title}
-          </Link>
+          <TitleAndSparkLine>
+            <Link to={`/organizations/${orgId}/incidents/${incident.identifier}/`}>
+              {incident.title}
+            </Link>
+            <SparkLine incident={incident} />
+          </TitleAndSparkLine>
           <Status incident={incident} />
           <div>
             {started.format('LL')}
@@ -65,7 +69,7 @@ class OrganizationIncidentsList extends AsyncComponent {
             <Count value={incident.totalEvents} />
           </div>
         </TableLayout>
-      </PanelItem>
+      </IncidentPanelItem>
     );
   }
 
@@ -190,4 +194,14 @@ const LightDuration = styled(Duration)`
   margin-left: ${space(1)};
 `;
 
+const TitleAndSparkLine = styled('div')`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const IncidentPanelItem = styled(PanelItem)`
+  padding: ${space(1)} ${space(2)};
+`;
+
 export default OrganizationIncidentsListContainer;

src/sentry/static/sentry/app/views/organizationIncidents/list/sparkLine.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import styled from 'react-emotion';
+
+import Placeholder from 'app/components/placeholder';
+import SentryTypes from 'app/sentryTypes';
+import theme from 'app/utils/theme';
+
+// Height of sparkline
+const SPARKLINE_HEIGHT = 38;
+
+class SparkLine extends React.Component {
+  static propTypes = {
+    incident: SentryTypes.Incident.isRequired,
+  };
+
+  state = {
+    loading: true,
+    error: null,
+  };
+
+  componentDidMount() {
+    this.loadLibrary();
+  }
+
+  async loadLibrary() {
+    this.setState({loading: true});
+
+    try {
+      const reactSparkLines = await import(/* webpackChunkName: "ReactSparkLines" */ 'react-sparklines');
+
+      this.setState({
+        loading: false,
+        Sparklines: reactSparkLines.Sparklines,
+        SparklinesLine: reactSparkLines.SparklinesLine,
+        error: false,
+      });
+    } catch (error) {
+      this.setState({loading: false, error});
+    }
+  }
+
+  render() {
+    const {className, incident} = this.props;
+    const {Sparklines, SparklinesLine, loading} = this.state;
+
+    if (loading) {
+      return <SparkLinePlaceholder />;
+    }
+
+    const data = incident.eventStats.data.map(([, value]) =>
+      value && value.length ? value[0].count || 0 : 0
+    );
+
+    return (
+      <div className={className}>
+        <Sparklines data={data} width={100} height={32}>
+          <SparklinesLine style={{stroke: theme.gray2, fill: 'none', strokeWidth: 2}} />
+        </Sparklines>
+      </div>
+    );
+  }
+}
+
+const StyledSparkLine = styled(SparkLine)`
+  flex-shrink: 0;
+  width: 120px;
+  height: ${SPARKLINE_HEIGHT}px;
+`;
+
+const SparkLinePlaceholder = styled(Placeholder)`
+  background-color: transparent;
+  height: ${SPARKLINE_HEIGHT}px;
+`;
+
+export default StyledSparkLine;

tests/js/spec/views/organizationIncidents/list/index.spec.jsx

@@ -29,7 +29,7 @@ describe('OrganizationIncidentsList', function() {
       TestStubs.routerContext()
     );
 
-    const items = wrapper.find('PanelItem');
+    const items = wrapper.find('IncidentPanelItem');
 
     expect(items).toHaveLength(2);
     expect(items.at(0).text()).toContain('First incident');
@@ -45,7 +45,7 @@ describe('OrganizationIncidentsList', function() {
       <OrganizationIncidentsList params={{orgId: 'org-slug'}} location={{query: {}}} />,
       routerContext
     );
-    expect(wrapper.find('PanelItem')).toHaveLength(0);
+    expect(wrapper.find('IncidentPanelItem')).toHaveLength(0);
     expect(wrapper.text()).toContain("You don't have any incidents yet");
   });