Add reports table to home.html

Improve report creation

speedcenter/codespeed/admin.py

@@ -39,5 +39,6 @@ class ResultAdmin(admin.ModelAdmin):
 
 class ReportAdmin(admin.ModelAdmin):
     list_display = ('revision', 'summary', 'colorcode')
+    ordering = ['-revision']
 
 admin.site.register(Report, ReportAdmin)

speedcenter/codespeed/models.py

@@ -99,9 +99,9 @@ class Report(models.Model):
     revision    = models.ForeignKey(Revision)
     environment = models.ForeignKey(Environment)
     executable  = models.ForeignKey(Executable)
-    summary     = models.CharField(max_length=30, default="OK")
+    summary     = models.CharField(max_length=30, default="none")
     colorcode   = models.CharField(max_length=10, default="none")
-
+    tablecache  = models.CharField(max_length=10, default="none")
     def __unicode__(self):
         return "Report for " + str(self.revision.commitid)
 
@@ -120,7 +120,7 @@ def save(self, *args, **kwargs):
         trend_threshold  = 4.0
         if hasattr(settings, 'change_threshold') and settings.change_threshold != None:
             change_threshold = settings.change_threshold
-        if hasattr(settings, 'trend_threshold') and settings.trend_threshold != None:
+        if hasattr(settings, 'trend_threshold') and settings.trend_threshold:
             trend_threshold = settings.trend_threshold
 
         # Fetch big changes for each unit type and each benchmark
@@ -165,27 +165,40 @@ def save(self, *args, **kwargs):
                     max_trend       = val
                     max_trend_ben   = row['benchmark']
                     max_trend_color = color
-
+        # Reinitialize
+        self.summary = "none"
+        self.colorcode = "none"
+
         if abs(max_trend) > trend_threshold:
-            self.summary   = "%s trend %.1f%%" % (
-                max_trend_ben, round(max_trend, 1))
+            #Substitute plus/minus with up/down
+            direction = max_trend >= 0 and "+" or ""
+            self.summary = "%s trend %s%.1f%%" % (
+                max_trend_ben, direction, round(max_trend, 1))
             self.colorcode = max_trend_color
         if abs(average_trend) > trend_threshold:
             if average_trend_color == "red" or self.colorcode != "red":
-                self.summary   = "Average %s trend %.1f%%" % (
-                    average_trend_units.lower(), round(average_trend, 1))
+                #Substitute plus/minus with up/down
+                direction = average_trend >= 0 and "+" or ""
+                self.summary = "Average %s trend %s%.1f%%" % (
+                    average_trend_units.lower(), direction, round(average_trend, 1))
                 self.colorcode = average_trend_color
         if abs(max_change) > change_threshold:
             if max_change_color == "red" or self.colorcode != "red":
-                self.summary   = "%s %.1f%%" % (
-                    max_change_ben, round(max_change, 1))
+                #Substitute plus/minus with up/down
+                direction = max_change >= 0 and "+" or ""
+                self.summary = "%s %s%.1f%%" % (
+                    max_change_ben, direction, round(max_change, 1))
                 self.colorcode = max_change_color
         if abs(average_change) > change_threshold:
             if average_change_color == "red" or self.colorcode != "red":
-                self.summary   = "Average %s %.1f%%" % (
-                    average_change_units.lower(), round(average_change, 1))
+                #Substitute plus/minus with up/down
+                direction = average_change >= 0 and "+" or ""
+                self.summary = "Average %s %s%.1f%%" % (
+                    average_change_units.lower(),
+                    direction,
+                    round(abs(average_change), 1))
                 self.colorcode = average_change_color
-        if "trend" in self.summary:
+        if "trend" in self.summary and self.colorcode == "red":
             # trend break is only a warning
             self.colorcode = "yellow"
 
@@ -205,7 +218,7 @@ def is_big_change(self, val, color, current_val, current_color):
     def getcolorcode(self, val, lessisbetter, threshold):
         if lessisbetter:
             val = -val
-        colorcode = "yellow"
+        colorcode = "none"
         if val < -threshold:
             colorcode = "red"
         elif val > threshold:

speedcenter/codespeed/urls.py

@@ -8,6 +8,7 @@
 )
 
 urlpatterns += patterns('codespeed.views',
+    (r'^reports/$', 'reports'),
     (r'^changes/$', 'changes'),
     (r'^changes/table/$', 'getchangestable'),
     (r'^changes/logs/$', 'displaylogs'),

speedcenter/codespeed/views.py

@@ -572,6 +572,14 @@ def changes(request):
         ).order_by('-date')[:revlimit]
     return render_to_response('codespeed/changes.html', locals())
 
+
+def reports(request):
+    if request.method != 'GET': return HttpResponseNotAllowed('GET')
+
+    return render_to_response('codespeed/reports.html', {
+        'reports': Report.objects.all().order_by('-revision')[:15],
+    })
+
 def displaylogs(request):
     rev = Revision.objects.get(id=request.GET['revisionid'])
     logs = []

speedcenter/media/css/main.css

@@ -85,39 +85,47 @@ div#workarea {
     border-radius: 10px;
 }
 
-div#presentation_wrapper {
-    width: 880px;
-    margin-left: auto; margin-right: auto;
+div#presentation {
     text-align: center;
 }
-div#presentation_wrapper h2 { margin-top: 0.5em; }
-div#presentation_wrapper p a:hover { text-decoration: underline; }
+div#presentation h2, div#presentation h4 { margin-top: 0.2em; margin-bottom: 0.2em; }
+
 div#presentation div {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+}
+div#presentation div.menubox {
     background-image: url(/media/images/vgradient.png);
     background-repeat: repeat-x;
     background-color: #FFFFFF;
     color: white;
-    position: relative;
-    float: left;
-    height: 260px;
-    width: 230px;
+    width: 220px;
     cursor: pointer;
     text-align: center;
+    font-size: small;
     margin: 0.8em;
     padding: 0.8em;
     border: 5px solid #F1F1F1;
     -moz-border-radius: 20px;
     -webkit-border-radius: 20px;
     border-radius: 20px;
 }
-div#presentation p { text-align: left; font-size: small; }
+div#presentation div.menubox:hover { border: 5px solid #FFCE9C; }
 
-div#presentation div:hover {
-    border: 5px solid #FFCE9C;
-}
+div#presentation p { height: 5em; padding-left: 120px; }
 
-div#presentation img { border: 0; position: relative; bottom: 0px; }
+div#presentation div#changes p {
+    background: url(/media/images/changes.png) no-repeat;
+}
+div#presentation div#timeline p {
+    background: url(/media/images/timeline.png) no-repeat;
+}
+div#presentation div#comparison p {
+    background: url(/media/images/comparison.png) no-repeat;
+}
 
+/* Navigation elements */
 div#sidebar {
     width: 13.7em;
     float: left;
@@ -245,11 +253,14 @@ div#contentwrap div div { display: block; }
         top: 0; right: 0;
         padding-top: 2px;
     }
-    div#title img { padding: 0; }
+    div#title img {
+        padding: 0;
+    }
+    div#nav { height: 2em; }
 }
 
 /* tables */
-table.tablesorter, table.info, table.revision {
+table.tablesorter, table.info, table.revision, table.reports {
     width: 100%;
     font-family:arial;
     font-size: 11pt;
@@ -260,6 +271,13 @@ table.tablesorter, table.info, table.revision {
     background-color: #fafafa;
 }
 
+/*table.reports {
+    border-width: 2px;
+}*/
+table.reports caption { font-size: 110%; }
+table.reports td { padding: 0.4em; }
+table.reports td span { opacity: 0.4; }
+
 table.tablesorter { margin-right: 0.8em; margin-bottom: 0.8em; }
 
 table.tablesorter thead tr th {
@@ -309,9 +327,14 @@ table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSo
 
 table.tablesorter tbody td.text {text-align: left; width: 8.5em; }
 
-table.tablesorter tbody tr td.status-red, .status-red  { background-color: #FF5640; }
-table.tablesorter tbody tr td.status-green, .status-green { background-color: #9FD54D; }
-table.tablesorter tbody tr.highlight td {
+table.tablesorter tbody tr td.status-red { background-color: #FF5640; }
+.reports tr.status-red td.summary { color: #FF5640; font-weight: bold; }
+table.tablesorter tbody tr td.status-green { background-color: #9FD54D; }
+tr.status-green td.summary { color: #9FD54D; font-weight: bold; }
+table.tablesorter tbody tr td.status-yellow { background-color: #FFD843; }
+tr.status-yellow td.summary { color: #FFD843; font-weight: bold; }
+
+table.tablesorter tbody tr.highlight td, tr.highlight td {
     background-color: #9DADC6 !important;
     cursor: pointer;
 }

speedcenter/media/js/codespeed.js

@@ -31,7 +31,7 @@ function getLoadText(text, h, showloader) {
 
 //colors number based on a threshold
 function getColorcode(change, theigh, tlow) {
-    var colorcode = "status-yellow";
+    var colorcode = "status-none";
     if(change < tlow) { colorcode = "status-red"; }
     else if(change > theigh) { colorcode = "status-green"; }
     return colorcode;

speedcenter/templates/home.html

@@ -2,32 +2,52 @@
 {% block body %}
 {% block script %}
 <script type="text/javascript">
-  $(function() {
-    $("#changes").click(function () { window.location="/changes/"; });
-    $("#timeline").click(function () { window.location="/timeline/"; });
-    $("#comparison").click(function () { window.location="/comparison/"; });
+    function permalinkToChanges(permalink) {
+        window.location="changes/?" + permalink;
+    }
+
+    function updateTable() {
+        //Add permalink events to table rows
+        $("div#reports table tbody tr").each(function() {
+            $(this).click(function () {
+                permalink_string = $(this).find("td:eq(0) label").text();
+                permalinkToChanges(permalink_string);
+            });
+        });
+        //Add hover effect to rows
+        $("div#reports table tbody tr td").hover(function() {
+            $(this).parents('tr').addClass('highlight');
+        }, function() {
+            $(this).parents('tr').removeClass('highlight');
+        });
+    }
+
+    $(function() {
+        $("#changes").click(function () { window.location="/changes/"; });
+        $("#timeline").click(function () { window.location="/timeline/"; });
+        $("#comparison").click(function () { window.location="/comparison/"; });
+        $("#reports")
+            .html(getLoadText("Loading...", 0, true))
+            .load("reports/", function(responseText) { updateTable(); });
   });
 </script>
 {% endblock %}
 
-<div id="presentation_wrapper">
-<p><a href="about/">This site</a> monitors <a href="#">MyProject</a>'s performance</p>
 <div id="presentation" class="clearfix">
-    <div id="changes">
+    <div id="changes" class="menubox">
       <h2>Changes</h2>
       <p>Track performance changes in the latest revisions</p>
-      <img src="/media/images/changes.png" height="130" width="220" alt="Changes"/>
     </div>
-    <div id="timeline">
+    <div id="timeline" class="menubox">
       <h2>Timeline</h2>
       <p>Analyze performance over time</p>
-      <img src="/media/images/timeline.png" height="140" width="220" alt="Timeline"/>
     </div>
-    <div id="comparison">
+    <div id="comparison" class="menubox">
       <h2>Comparison</h2>
       <p>Compare different executables and revisions</p>
-      <img src="/media/images/comparison.png" height="130" width="220" alt="Changes"/>
     </div>
+    <br />
+    <div id="reports"></div>
 </div>
-</div>
+
 {% endblock %}