From a6f19105957b8caeb0c3ca50c97d86d1e3e25bde Mon Sep 17 00:00:00 2001
From: Fred Wenzel <fwenzel@mozilla.com>
Date: Wed, 1 Dec 2010 15:48:53 -0800
Subject: [PATCH] Show tweet statistics in the Customer Care sidebar. Bugs
 612952, 612966, 612960, 612964.

---
 apps/customercare/cron.py                     |  58 +++++++++++-
 .../templates/customercare/landing.html       |  59 +++++++++++-
 apps/customercare/views.py                    |  35 +++++++
 media/css/sidebar.css                         |  86 +++++++++++++++++-
 media/img/customercare/bubble.png             | Bin 0 -> 3135 bytes
 media/js/customercare.js                      |  20 ++++
 settings.py                                   |  15 ++-
 7 files changed, 260 insertions(+), 13 deletions(-)
 create mode 100644 media/img/customercare/bubble.png

diff --git a/apps/customercare/cron.py b/apps/customercare/cron.py
index 5ee8a0e71..e1261614a 100644
--- a/apps/customercare/cron.py
+++ b/apps/customercare/cron.py
@@ -5,14 +5,17 @@ import logging
 import re
 import rfc822
 import urllib
+import urllib2
 
 from django.conf import settings
+from django.core.cache import cache
 from django.db.utils import IntegrityError
 from django.utils.encoding import smart_str
 
 import cronjobs
+import tweepy
 
-from .models import Tweet
+from customercare.models import Tweet
 
 
 SEARCH_URL = 'http://search.twitter.com/search.json'
@@ -118,3 +121,56 @@ def _filter_tweet(item):
         return None
 
     return item
+
+
+@cronjobs.register
+def get_customercare_stats():
+    """
+    Fetch Customer Care stats from Mozilla Metrics.
+
+    Example Activity Stats data:
+        {"resultset": [["Yesterday",1234,123,0.0154],
+                       ["Last Week",12345,1234,0.0240], ...]
+         "metadata": [...]}
+
+    Example Top Contributor data:
+        {"resultset": [[1,"Overall","John Doe","johndoe",840],
+                       [2,"Overall","Jane Doe","janedoe",435], ...],
+         "metadata": [...]}
+    """
+
+    stats_sources = {
+        settings.CC_TWEET_ACTIVITY_URL: settings.CC_TWEET_ACTIVITY_CACHE_KEY,
+        settings.CC_TOP_CONTRIB_URL: settings.CC_TOP_CONTRIB_CACHE_KEY,
+    }
+    for url, cache_key in stats_sources.items():
+        log.debug('Updating %s from %s' % (cache_key, url))
+        try:
+            json_data = json.load(urllib2.urlopen(url))
+            json_data['resultset'] = ''
+            if not json_data['resultset']:
+                raise KeyError('Result set was empty.')
+        except Exception, e:
+            log.error('Error updating %s: %s' % (cache_key, e))
+            continue
+
+        # Grab top contributors' avatar URLs from the public twitter API.
+        if cache_key == settings.CC_TOP_CONTRIB_CACHE_KEY:
+            twitter = tweepy.API()
+            avatars = {}
+            for contrib in json_data['resultset']:
+                username = contrib[3]
+
+                if avatars.get(username):
+                    continue
+
+                try:
+                    user = twitter.get_user(username)
+                except tweepy.TweepError, e:
+                    log.warning('Error grabbing avatar of user %s: %s' % (
+                        username, e))
+                else:
+                    avatars[username] = user.profile_image_url
+            json_data['avatars'] = avatars
+
+        cache.set(cache_key, json_data, settings.CC_STATS_CACHE_TIMEOUT)
diff --git a/apps/customercare/templates/customercare/landing.html b/apps/customercare/templates/customercare/landing.html
index 3fda69e1b..8ea3cb7b8 100644
--- a/apps/customercare/templates/customercare/landing.html
+++ b/apps/customercare/templates/customercare/landing.html
@@ -18,7 +18,7 @@
       <li class="respond">Respond to the tweet!</li>
     </ol>
   </div>
-	
+
   <div id="tweetcontainer">
     <div class="tweets-header">
       <img id="twitter-icon" src="{{ MEDIA_URL }}img/customercare/twitter-icon.png" /><h2 class="showhide_heading" id="Where_to_ask_your_question">Choose a tweet to help</h2>
@@ -31,7 +31,7 @@
         </form>
       {% endif %}
     </div>
-    
+
     <br style="clear:both; height: 1px" />
 
     <ul id="tweets">
@@ -49,6 +49,61 @@
 {% endblock %}
 
 {% block extra_sidebar %}
+  <div id="side-stats">
+    <h3>Our army has responded to:</h3>
+    {% if not activity_stats %}
+      <p class="unavailable">Recent stats not available.</p>
+    {% else %}
+      <div class="bubble">
+        <div class="perc">
+          <span class="data">{{ activity_stats[0][1]['perc'] }}</span>%
+          <span class="label">of tweets</span>
+        </div>
+        <div class="numbers">
+          <div class="replies">
+            <span class="data">{{ activity_stats[0][1]['replies'] }}</span>
+            <span class="label">replies</span>
+          </div>
+          /
+          <div class="tweets">
+            <span class="data">{{ activity_stats[0][1]['requests'] }}</span>
+            <span class="label">tweets</span>
+          </div>
+        </div>
+
+        <select>
+          {% for act in activity_stats %}
+            <option value="{{ loop.index0 }}"
+                    data-perc ="{{ act[1]['perc'] }}"
+                    data-replies="{{ act[1]['replies'] }}"
+                    data-requests="{{ act[1]['requests'] }}">
+              {{ act[0] }}
+            </option>
+          {% endfor %}
+        </select>
+      </div>
+      <div class="speech"></div>
+    {% endif %}
+
+    <div class="contribs">
+      {% if contributor_stats %}
+        {% for act in activity_stats %}
+          {% set period = act[0] %}
+          <div class="contributors period{{ loop.index0 }}"
+               data-period="{{ period }}">
+            {% for contrib in contributor_stats.get(period, []) %}
+              <a href="http://twitter.com/{{ contrib['username'] }}" target="_blank">
+                <img src="{{ contrib['avatar'] }}" alt="{{ contrib['username'] }}"
+                     title="{{ contrib['name']}}: {{ contrib['count'] }} replies"
+                     class="avatar" />
+              </a>
+            {% endfor %}
+          </div>
+        {% endfor %}
+      {% endif %}
+    </div>
+  </div>
+
   <div id="side-getinvolved">
     <h3>Take it to the next level!</h3>
     <p>Want to go beyond 140 characters? Join the support community and help many more
diff --git a/apps/customercare/views.py b/apps/customercare/views.py
index c936ed30f..9a5a9f8d1 100644
--- a/apps/customercare/views.py
+++ b/apps/customercare/views.py
@@ -5,9 +5,11 @@ import logging
 import time
 
 from django.conf import settings
+from django.core.cache import cache
 from django.http import HttpResponse, HttpResponseBadRequest
 from django.views.decorators.http import require_POST, require_GET
 
+from babel.numbers import format_number
 from bleach import Bleach
 import jingo
 import tweepy
@@ -79,7 +81,40 @@ def landing(request):
 
     canned_responses = CannedCategory.objects.all()
 
+    # Stats. See customercare.cron.get_customercare_stats.
+    activity = cache.get(settings.CC_TWEET_ACTIVITY_CACHE_KEY)
+    if activity:
+        activity_stats = []
+        for act in activity['resultset']:
+            activity_stats.append((act[0], {
+                'requests': format_number(act[1], locale='en_US'),
+                'replies': format_number(act[2], locale='en_US'),
+                'perc': int(round(act[3] * 100)),
+            }))
+    else:
+        activity_stats = None
+
+    contributors = cache.get(settings.CC_TOP_CONTRIB_CACHE_KEY)
+    if contributors:
+        contributor_stats = {}
+        for contrib in contributors['resultset']:
+            # Create one list per time period
+            period = contrib[1]
+            if not contributor_stats.get(period):
+                contributor_stats[period] = []
+
+            contributor_stats[period].append({
+                'name': contrib[2],
+                'username': contrib[3],
+                'count': contrib[4],
+                'avatar': contributors['avatars'].get(contrib[3]),
+            })
+    else:
+        contributor_stats = None
+
     return jingo.render(request, 'customercare/landing.html', {
+        'activity_stats': activity_stats,
+        'contributor_stats': contributor_stats,
         'canned_responses': canned_responses,
         'tweets': _get_tweets(),
         'authed': twitter.authed,
diff --git a/media/css/sidebar.css b/media/css/sidebar.css
index 073986d69..cf3282418 100644
--- a/media/css/sidebar.css
+++ b/media/css/sidebar.css
@@ -67,13 +67,89 @@
     text-decoration: underline;
 }
 
-#side-getinvolved {
-    background: transparent url('../img/side-getinvolved-bg.png') no-repeat top left;
-    margin-top: 140px;
-    padding-top: 20px;
-    color: #999186;
+#side-stats {
+    margin-top: 40px;
+}
+#side-stats .unavailable {
+    font-size: 1.2em;
+    font-style: italic;
+    margin-top: 10px;
+}
+#side-stats .bubble {
+    background-color: #E6F0F9;
+    -webkit-border-radius: 50px;
+    -moz-border-radius: 50px;
+    border-radius: 50px;
+    margin-top: 10px;
+    text-align: center;
+}
+#side-stats .speech {
+    background: transparent url(../img/customercare/bubble.png) no-repeat 50px bottom;
+    height: 20px;
+    width: 100%;
+}
+#side-stats .label {
+    color: #00639B;
+    font-family: Arial,Helvetica,sans-serif;
+    font-size: .75em;
+    font-style: normal;
+    font-weight: bold;
+    font-variant: small-caps;
+}
+#side-stats .perc {
+    font-size: 2.5em;
+    font-style: italic;
+    padding-top: 10px;
+    text-align: center;
+}
+#side-stats .numbers {
+    font-size: 1.8em;
+}
+#side-stats .numbers .replies,
+#side-stats .numbers .tweets {
+    text-align: center;
+    width: 45%;
+}
+#side-stats .numbers .replies {
+    float: left;
+}
+#side-stats .numbers .tweets {
+    float: right;
+}
+#side-stats .numbers .data {
+    display: block;
+    margin-bottom: -.3em;
+}
+#side-stats select {
+    font-family: Arial,Helvetica,sans-serif;
+    margin: 10px 0 20px;
+    text-align: center;
+    width: 80%;
+}
+#side-stats .contribs {
+    clear: both;
+    margin: 10px 20px 0;
+    width: 160px;
+}
+#side-stats .avatar {
+    margin: 2px;
+    width: 32px;
+}
+#side-stats .contribs .contributors {
+    display: none;
+}
+#side-stats .contribs .contributors:first-child {
+    display: block;
 }
 
+#side-getinvolved {
+    background: transparent url('../img/side-getinvolved-bg.png') no-repeat top left;
+    padding-top: 20px;
+    color: #999186;
+    margin-top: 40px;
+}
+
+#side-stats h3,
 #side-getinvolved h3 {
     color: #1E4262;
     font-size: 150%;
diff --git a/media/img/customercare/bubble.png b/media/img/customercare/bubble.png
new file mode 100644
index 0000000000000000000000000000000000000000..6bb32214a0a7eb9930eca3783d1d0ed6866f701f
GIT binary patch
literal 3135
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
Z;1wPut^K-nlDhx^002ovPDHLkV1oPf-&p_v

literal 0
HcmV?d00001

diff --git a/media/js/customercare.js b/media/js/customercare.js
index e97cfcbef..3cc2913c8 100644
--- a/media/js/customercare.js
+++ b/media/js/customercare.js
@@ -340,5 +340,25 @@
                 }
             );
         }).bullseye();
+
+        /* Statistics */
+        $('#side-stats select').change(function(e) {
+            var $this = $(this),
+                option = $this.children('option[value=' + $this.val() + ']'),
+                bubble = $('#side-stats .bubble')
+                contribs = $('#side-stats .contribs');
+            // Update numbers
+            bubble.find('.perc .data').text(option.attr('data-perc'));
+            bubble.find('.replies .data').text(option.attr('data-replies'));
+            bubble.find('.tweets .data').text(option.attr('data-requests'));
+
+            // Update contributors
+            contribs.find('.contributors:visible').fadeOut('fast', function() {
+                contribs.find('.contributors.period' + $this.val()).fadeIn('fast');
+            });
+
+            $this.blur();
+            e.preventDefault();
+        }).val('0');
     });
 }(jQuery));
diff --git a/settings.py b/settings.py
index 9ef225e9a..250ffb954 100644
--- a/settings.py
+++ b/settings.py
@@ -532,16 +532,21 @@ THUMBNAIL_PROGRESS_WIDTH = 32  # width of the above image
 THUMBNAIL_PROGRESS_HEIGHT = 32  # height of the above image
 VIDEO_MAX_FILESIZE = 16777216  # 16 megabytes, in bytes
 
-# Customer Care tweet collection settings
-CC_MAX_TWEETS = 500 # Max. no. of tweets in DB
-CC_TWEETS_PERPAGE = 100 # How many tweets to collect in one go. Max: 100.
+# Customer Care settings
+CC_MAX_TWEETS = 500   # Max. no. of tweets in DB
+CC_TWEETS_PERPAGE = 100   # How many tweets to collect in one go. Max: 100.
+CC_SHOW_REPLIES = True  # Show replies to tweets?
 
-# Show replies to tweets?
-CC_SHOW_REPLIES = True
+CC_TWEET_ACTIVITY_URL = 'https://metrics.mozilla.com/stats/twitter/armyOfAwesomeKillRate.json'  # Tweet activity stats
+CC_TOP_CONTRIB_URL = 'https://metrics.mozilla.com/stats/twitter/armyOfAwesomeTopSoldiers.json'  # Top contributor stats
+CC_TWEET_ACTIVITY_CACHE_KEY = 'sumo-cc-tweet-stats'
+CC_TOP_CONTRIB_CACHE_KEY = 'sumo-cc-top-contrib-stats'
+CC_STATS_CACHE_TIMEOUT = 24 * 60 * 60  # 24 hours
 
 TWITTER_CONSUMER_KEY = ''
 TWITTER_CONSUMER_SECRET = ''
 
+
 NOTIFICATIONS_FROM_ADDRESS = 'notifications@support.mozilla.com'
 
 # URL of the chat server.