Styling of event listings

overseer/__init__.py

@@ -0,0 +1,10 @@
+"""
+Overseer
+~~~~~~~~
+"""
+
+try:
+    VERSION = __import__('pkg_resources') \
+        .get_distribution('overseer').version
+except Exception, e:
+    VERSION = 'unknown'

overseer/context_processors.py

@@ -1,5 +1,6 @@
 from django.core.urlresolvers import reverse
 
+import overseer
 from overseer import conf
 
 def default(request):
@@ -8,4 +9,5 @@ def default(request):
         'OVERSEER_TITLE': conf.TITLE,
         'OVERSEER_NAME': conf.NAME,
         'OVERSEER_MEDIA_PREFIX': (conf.MEDIA_PREFIX or reverse('overseer:media')).rstrip('/'),
+        'OVERSEER_VERSION': overseer.VERSION,
     }

overseer/media/css/base.css

@@ -132,8 +132,10 @@ footer {
 #container { background-color: #eee; }
 #main { padding: 0 10px; }
 #main .wrapper {
+    position: relative;
+    overflow: hidden;
     margin: 0 auto 20px;
-    padding: 20px;
+    padding: 20px 20px 0;
     background-color: #fff;
 
     -webkit-border-radius: 6px;
@@ -145,9 +147,12 @@ footer {
     box-shadow: 0 1px 2px rgba(0,0,0,.2);    
 }
 
+table, p, h1, h2, h3, h4, h5, h6, ul, ol {
+    margin-bottom: 20px;
+}
+
 table {
     width: 100%;
-    margin-bottom: 10px;
 }
 table thead th {
     text-align: left;
@@ -157,11 +162,19 @@ table thead th {
 table td, table th {
     padding: 6px 6px;
 }
+table tbody tr:nth-child(even) {
+    background: #f3f3f3;
+}
+table thead tr {
+    background: #eee;
+}
 table th.status {
     text-align: center;
+    padding: 0;
 }
 table td.status {
     width: 32px;
+    padding: 0;
     text-align: center;
     background-position: center center;
     background-repeat: no-repeat;
@@ -180,15 +193,66 @@ table td.service h2 {
     font-size: 24px;
     line-height: 32px;
     font-weight: normal;
+    margin-bottom: 0;
 }
 table td.service h2 a {
     text-decoration: none;
 }
 table td.service p {
     color: #999;
+    margin-bottom: 0;
+}
+table td.last-event {
+    width: 130px;
+    line-height: 32px;
 }
 
 h3 {
     font-size: 18px;
     font-weight: normal;
+}
+
+.latest-event {
+    margin-bottom: 20px;
+    font-size: 1.2em;
+}
+.event-list {
+    border-top: 1px solid #ddd;
+    padding-top: 20px;
+}
+.event-list ul {
+    list-style: none;
+    margin-left: 0;
+}
+.event p {
+    background-repeat: no-repeat;
+    background-position: top left;
+    padding-left: 22px;
+    margin-bottom: 0;
+}
+.event.status-0 p {
+    background-image: url('../images/green_light_16x16.png');
+}
+.event.status-1 p {
+    background-image: url('../images/yellow_light_16x16.png');
+}
+.event.status-2 p {
+    background-image: url('../images/red_light_16x16.png');
+}
+
+.event p {
+    font-weight: bold;
+}
+.event time,
+.event .affects {
+    font-size: 0.9em;
+    padding: 2px 6px; 
+    display: inline-block;
+}
+.event time {
+    margin-left: 22px;
+    color: #999;
+}
+.event .affects {
+    background: #ff9;
 }

overseer/models.py

@@ -105,6 +105,23 @@ def __unicode__(self):
     def get_absolute_url(self):
         return ('overseer:event', [self.pk], {})
 
+    def get_service_names(self):
+        return self.services.values_list('name', flat=True)
+
+    def get_duration(self):
+        return self.date_updated - self.date_created
+
+    def get_message(self):
+        if self.message:
+            return self.message
+        elif self.status == 0:
+            return 'Service is operating as expected.'
+        elif self.status == 1:
+            return 'Experiencing some issues. Services mostly operational.'
+        elif self.status == 2:
+            return 'Service is unavailable.'
+        return ''
+
     @classmethod
     def handle_update_save(cls, instance, created, **kwargs):
         event = instance.event

overseer/templates/overseer/base.html

@@ -30,13 +30,15 @@ <h1><a href="{% url overseer:index %}">{{ OVERSEER_NAME }}</a></h1>
 
     <div id="main" class="main">
         <div class="wrapper">
-            {% block content %}{% endblock %}
+            <div class="clearfix">
+                {% block content %}{% endblock %}
+            </div>
         </div>
     </div>
 
     <footer>
         <div class="wrapper">
-            Overseer | Powered by sexy Django magic | Conjured up by the <a href="http://code.disqus.com">DISQUS</a> team and other noble <a href="https://github.com/disqus/overseer/contributors">sorcerers</a>.
+            Powered by <a href="https://github.com/disqus/overseer">Overseer {{ OVERSEER_VERSION }}</a> | <a href="{% url admin:index %}">Admin</a> | Conjured up by the <a href="http://code.disqus.com">DISQUS</a> team and other noble <a href="https://github.com/disqus/overseer/contributors">sorcerers</a>.
         </div>
     </footer>
   </div> <!-- end of #container -->  

overseer/templates/overseer/index.html

@@ -1,45 +1,54 @@
 {% extends "overseer/base.html" %}
 
-{% block content %}
+{% load overseer_helpers %}
 
-<div class="latest-update">
-    <strong>This is the latest status update for any service on the network</strong>
-    <time>3 hours ago</time>
-</div>
+{% block content %}
+    {% if latest_event %}
+        <div class="latest-event event status-{{ latest_event.status }}">
+            <p>{{ latest_event.description }}</p>
+            <time>{{ latest_event.date_updated|timesince }} (lasted {{ latest_event.get_duration|duration }})</time>
+            <span class="affects">affects {{ latest_event.get_service_names|join:", "}}</span>
+        </div>
+    {% endif %}
 
-<div class="service-list">
-    <table>
-        <thead>
-            <tr>
-                <th class="status">Status</th>
-                <th>Service</th>
-                <th>Last Event</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for service in service_list %}
+    <div class="service-list">
+        <table>
+            <thead>
                 <tr>
-                    <td class="status status-{{ service.status }}">{{ service.get_status_display }}</td>
-                    <td class="service">
-                        <h2><a href="{% url overseer:service service.slug %}">{{ service.name }}</a></h2>
-                        {% if service.description %}
-                            <p>{{ service.description }}</p>
-                        {% endif %}
-                    </td>
-                    <td><a href="{% url overseer:last_event service.slug %}">{{ service.date_updated|timesince }}</a></td>
+                    <th class="status">Status</th>
+                    <th class="service">Service</th>
+                    <th class="last-event">Last Event</th>
                 </tr>
-            {% endfor %}
-        </tbody>
-    </table>
-</div>
+            </thead>
+            <tbody>
+                {% for service in service_list %}
+                    <tr>
+                        <td class="status status-{{ service.status }}">{{ service.get_status_display }}</td>
+                        <td class="service">
+                            <h2><a href="{% url overseer:service service.slug %}">{{ service.name }}</a></h2>
+                            {% if service.description %}
+                                <p>{{ service.description }}</p>
+                            {% endif %}
+                        </td>
+                        <td class="last-event"><a href="{% url overseer:last_event service.slug %}">{{ service.date_updated|timesince }}</a></td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
 
-<div class="update-list">
-    <ul>
-        <li>
-            <strong>This is an update.</strong>
-            <time>3 hours ago</time>
-            <span>affects API, Embed</span>
-        </li>
-    </ul>
-</div>
+    {% if event_list %}
+        <div class="event-list">
+            <h3>Recent Events</h3>
+            <ul>
+                {% for event in event_list %}
+                    <li class="event status-{{ event.status }}">
+                        <p>{{ event.description }}</p>
+                        <time>{{ event.date_updated|timesince }}</time>
+                        <span class="affects">affects {{ event.get_service_names|join:", "}}</span>
+                    </li>
+                {% endfor %}
+            </ul>
+        </div>
+    {% endif %}
 {% endblock %}

overseer/templates/overseer/service.html

@@ -1,27 +1,30 @@
 {% extends "overseer/base.html" %}
 
 {% block content %}
-
-<table>
-    <tbody>
-        <tr>
-            <td class="status status-{{ service.status }}">{{ service.get_status_display }}</td>
-            <td class="service">
-                <h2><a href="{% url overseer:service service.slug %}">{{ service.name }}</a></h2>
-                {% if service.description %}
-                    <p>{{ service.description }}</p>
-                {% endif %}
-            </td>
-        </tr>
-    </tbody>
-</table>
+    <table>
+        <tbody>
+            <tr>
+                <td class="status status-{{ service.status }}">{{ service.get_status_display }}</td>
+                <td class="service">
+                    <h2><a href="{% url overseer:service service.slug %}">{{ service.name }}</a></h2>
+                    {% if service.description %}
+                        <p>{{ service.description }}</p>
+                    {% endif %}
+                </td>
+            </tr>
+        </tbody>
+    </table>
 
     {% if event_list %}
         <div class="event-list">
             <h3>Recent Events</h3>
             <ul>
                 {% for event in event_list %}
-                    <li class="status status-{{ event.peak_status }}">{{ event.date_created }}</li>
+                    <li class="event status-{{ event.status }}">
+                        <p>{{ event.description }}</p>
+                        <time>{{ event.date_updated|timesince }}</time>
+                        <span class="affects">affects {{ event.get_service_names|join:", "}}</span>
+                    </li>
                 {% endfor %}
             </ul>
         </div>

overseer/templatetags/overseer_helpers.py

@@ -0,0 +1,57 @@
+import datetime
+
+from django import template
+from django.template.defaultfilters import stringfilter
+
+register = template.Library()
+
+@register.filter
+def timesince(value):
+    from django.template.defaultfilters import timesince
+    if not value:
+        return 'Never'
+    if value < datetime.datetime.now() - datetime.timedelta(days=5):
+        return value.date()
+    value = (' '.join(timesince(value).split(' ')[0:2])).strip(',')
+    if value == '0 minutes':
+        return 'Just now'
+    if value == '1 day':
+        return 'Yesterday'
+    return value + ' ago'
+
+@register.filter(name='truncatechars')
+@stringfilter
+def truncatechars(value, arg):
+    """
+    Truncates a string after a certain number of chars.
+
+    Argument: Number of chars to truncate after.
+    """
+    try:
+        length = int(arg)
+    except ValueError: # Invalid literal for int().
+        return value # Fail silently.
+    if len(value) > length:
+        return value[:length] + '...'
+    return value
+truncatechars.is_safe = True
+
+@register.filter
+def duration(value):
+    if isinstance(value, datetime.timedelta):
+        value = value.days * 24 * 3600 + value.seconds
+    hours, minutes, seconds = 0, 0, 0
+    if value > 3600:
+        hours = value / 3600
+        value = value % 3600
+    if value > 60:
+        minutes = value / 60
+        value = value % 60
+    seconds = value
+    if hours:
+        return '%s hours' % (hours,)
+    if minutes:
+        return '%s minutes' % (minutes,)
+    if seconds:
+        return '%s seconds' % (seconds,)
+    return 'n/a'