[#7] Harvest job pages UX are complete

.gitignore

@@ -10,3 +10,4 @@ dist
 development.ini
 *.swp
 *~
+node_modules

ckanext/harvest/controllers/view.py

@@ -358,7 +358,9 @@ def list_jobs(self, source):
         try:
             context = {'model':model, 'user':c.user}
             c.harvest_source =  get_action('harvest_source_show')(context, {'id': source})
-            c.jobs = get_action('harvest_job_list')(context, {'source_id': c.harvest_source['id']})
+            status = request.params.get('status', 'Finished')
+            c.filter_nav = status
+            c.jobs = get_action('harvest_job_list')(context, {'source_id': c.harvest_source['id'], 'status': status})
 
             return render('source/job/list.html')
 

ckanext/harvest/fanstatic_library/styles/harvest.css

@@ -0,0 +1,83 @@
+header.with-filter {
+  clear: both;
+  overflow: hidden;
+}
+header.with-filter h1 {
+  margin-top: 0;
+}
+.harvest-jobs {
+  border: 1px solid #dddddd;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+.harvest-jobs a {
+  display: block;
+  padding: 8px 15px;
+  color: #666;
+  border-bottom: 1px dotted #dddddd;
+}
+.harvest-jobs a h4 {
+  font-size: 16px;
+  line-height: 1.3;
+  color: #000;
+}
+.harvest-jobs a .errors {
+  float: right;
+  font-size: 16px;
+  line-height: 1.3;
+  margin-top: 5px;
+  -webkit-border-radius: 100px;
+  -moz-border-radius: 100px;
+  border-radius: 100px;
+}
+.harvest-jobs a p {
+  clear: both;
+  overflow: hidden;
+}
+.harvest-jobs a:hover {
+  background-color: #f6f6f6;
+  text-decoration: none;
+}
+.harvest-jobs a:hover h4 {
+  text-decoration: underline;
+}
+.harvest-jobs a:hover .harvest-diff .diff-added {
+  background-color: #79db69;
+}
+.harvest-jobs a:hover .harvest-diff .diff-updated {
+  background-color: #a277ff;
+}
+.harvest-jobs a:hover .harvest-diff .diff-deleted {
+  background-color: #dc7c7f;
+}
+.harvest-jobs a:last-child {
+  border-bottom-width: 0;
+}
+.harvest-diff span {
+  color: #000;
+  padding: 5px 10px;
+  margin-right: 5px;
+  font-size: 12px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+.harvest-diff .diff-added {
+  background-color: #9ee592;
+}
+.harvest-diff .diff-updated {
+  background-color: #c5aaff;
+}
+.harvest-diff .diff-deleted {
+  background-color: #e7a4a6;
+}
+.harvest-error-summary .count {
+  text-align: right;
+}
+.harvest-error-list h5 {
+  margin-top: 0;
+}
+.harvest-error-list .error {
+  padding-left: 20px;
+}

ckanext/harvest/fanstatic_library/styles/harvest.less

@@ -0,0 +1,92 @@
+@import 'mixins.less';
+@import 'variables.less';
+
+header.with-filter {
+  clear: both;
+  overflow: hidden;
+  h1 {
+    margin-top: 0;
+  }
+}
+
+.harvest-jobs {
+  border: 1px solid @borderColor;
+  .border-radius(3px);
+  a {
+    display: block;
+    padding: 8px 15px;
+    color: #666;
+    border-bottom: 1px dotted @borderColor;
+    h4 {
+      font-size: 16px;
+      line-height: 1.3;
+      color: #000;
+    }
+    .errors {
+      float: right;
+      font-size: 16px;
+      line-height: 1.3;
+      margin-top: 5px;
+      .border-radius(100px);
+    }
+    p {
+      clear: both;
+      overflow: hidden;
+    }
+    &:hover {
+      background-color: @hoverColor;
+      text-decoration: none;
+      h4 {
+        text-decoration: underline;
+      }
+      .harvest-diff {
+        .diff-added {
+          background-color: darken(@diffAdded, 10%);
+        }
+        .diff-updated {
+          background-color: darken(@diffUpdated, 10%);
+        }
+        .diff-deleted {
+          background-color: darken(@diffDeleted, 10%);
+        }
+      }
+    }
+    &:last-child {
+      border-bottom-width: 0;
+    }
+  }
+}
+
+.harvest-diff {
+  span {
+    color: #000;
+    padding: 5px 10px;
+    margin-right: 5px;
+    font-size: 12px;
+    .border-radius(5px);
+  }
+  .diff-added {
+    background-color: @diffAdded;
+  }
+  .diff-updated {
+    background-color: @diffUpdated;
+  }
+  .diff-deleted {
+    background-color: @diffDeleted;
+  }
+}
+
+.harvest-error-summary {
+  .count {
+    text-align: right;
+  }
+}
+
+.harvest-error-list {
+  h5 {
+    margin-top: 0;
+  }
+  .error {
+    padding-left: 20px;
+  }
+}

ckanext/harvest/fanstatic_library/styles/less

@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+
+// This file is only used to generate the harvest.css
+
+var path = require('path'),
+    nodeWatch = require('nodewatch'),
+    exec = require('child_process').exec,
+    watch = path.join(__dirname),
+    lastArg = process.argv.slice().pop();
+
+function now() {
+  return new Date().toISOString().replace('T', ' ').substr(0, 19);
+}
+
+function compile(event, filename) {
+  var start = Date.now();
+
+  exec('`npm bin`/lessc ' + __dirname + '/harvest.less > ' + __dirname + '/harvest.css', function (err, stdout, stderr) {
+    var duration = Date.now() - start;
+
+    if (err) {
+      console.log('An error occurred running the less command:');
+      console.log(err.message);
+    }
+    else if (stderr || stdout) {
+      console.log(stdout, stderr);
+    } else {
+      console.log('[%s] recompiled in %sms', now(), duration);
+    }
+  });
+}
+
+nodeWatch.add(watch).onChange(compile);
+compile();

ckanext/harvest/fanstatic_library/styles/mixins.less

@@ -0,0 +1,16 @@
+.clearfix() {
+
+}
+
+.border-radius(@radius) {
+	-webkit-border-radius: @radius;
+	-moz-border-radius: @radius;
+	border-radius: @radius;
+}
+
+.box-shadow(@shadowA, @shadowB:X, ...){
+	@props: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
+	-webkit-box-shadow: @props;
+	-moz-box-shadow: @props;
+	box-shadow: @props;
+}

ckanext/harvest/fanstatic_library/styles/variables.less

@@ -0,0 +1,6 @@
+@borderColor: #DDD;
+@hoverColor: #F6F6F6;
+
+@diffAdded: #9EE592;
+@diffUpdated: #C5AAFF;
+@diffDeleted: #E7A4A6;

ckanext/harvest/plugin.py

@@ -234,6 +234,7 @@ def update_config(self, config):
                 templates = 'templates_new'
         p.toolkit.add_template_directory(config, templates)
         p.toolkit.add_public_directory(config, 'public')
+        p.toolkit.add_resource('fanstatic_library', 'ckanext-harvest')
 
     ## IActions
 

ckanext/harvest/templates_new/base.html

@@ -0,0 +1,6 @@
+{% ckan_extends %}
+
+{% block styles %}
+  {{ super() }}
+  {% resource 'ckanext-harvest/styles/harvest.css' %}
+{% endblock %}

ckanext/harvest/templates_new/snippets/job_details.html

@@ -13,19 +13,37 @@
 
 #}
 
-<div style='margin: 1em 0;'>
-  {% set stats = job.stats %}
-  {% for action in ['added', 'updated', 'deleted', 'errored'] %}
-    {% if action in stats and stats[action] > 0 %}
-    <span>{{ stats[action] }} {{ _(action) }}</span>
-    {% else %}
-    <span>0 {{ _(action) }}</span>
-    {% endif %}
+<p>GUID: <code>{{ job.id }}</code></p>
+
+{% set stats = job.stats %}
+
+<p class="pull-right">
+  {% if 'errored' in stats and stats['errored'] > 0 %}
+    <span class="badge badge-important">{{ stats['errored'] }}</span> {{ _('errors') }}
+  {% else %}
+    <span class="badge">0</span> {{ _('errors') }}
+  {% endif %}
+</p>
+
+<p class="harvest-diff">
+  {% for action in ['added', 'updated', 'deleted'] %}
+    <span class="diff-{{ action }}">
+      {% if action in stats and stats[action] > 0 %}
+        {{ stats[action] }}
+      {% else %}
+        0
+      {% endif %}
+      {{ _(action) }}
+    </span>
   {% endfor %}
-</div>
+</p>
 
 <h3>{{ _('Details') }}</h3>
 <table class="table table-striped table-bordered table-condensed">
+  <colgroup>
+    <col width="15">
+    <col width="85">
+  </colgroup>
   <tr>
     <th>{{ _('Started') }}</th>
     <td>{{ h.render_datetime(job.gather_started, with_hours=True) }}</td>
@@ -42,23 +60,27 @@ <h3>{{ _('Details') }}</h3>
 
 <h3>{{ _('Error Summary') }}</h3>
 {% if job.error_summary|length == 0 %}
-<p>{{ _('No errors for this job') }}</p>
+  <p class="empty">{{ _('No errors for this job') }}</p>
 {% else %}
-<p>{{ _('Only the 20 most frequent errors are shown') }}</p>
-<table class="table table-striped table-bordered table-condensed error-summary">
-  <thead>
-    <tr>
-      <th>{{ _('Message') }}</th>
-      <th>{{ _('Count') }}</th>
-    </tr>
-  </thead>
-  <tbody>
-  {% for error in job.error_summary %}
-    <tr>
-      <td>{{ error[0] }}</td>
-      <td>{{ error[1] }}</td>
-    </tr>
-  {% endfor %}
-   </tbody>
-</table>
+  <p class="empty">{{ _('Only the 20 most frequent errors are shown') }}</p>
+  <table class="table table-striped table-bordered table-condensed harvest-error-summary">
+    <colgroup>
+      <col width="8">
+      <col width="92">
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="count">{{ _('Count') }}</th>
+        <th>{{ _('Message') }}</th>
+      </tr>
+    </thead>
+    <tbody>
+    {% for error in job.error_summary %}
+      <tr>
+        <td class="count">{{ error[1] }}</td>
+        <td>{{ error[0] }}</td>
+      </tr>
+    {% endfor %}
+     </tbody>
+  </table>
 {% endif %}

ckanext/harvest/templates_new/source/admin.html

@@ -2,6 +2,14 @@
 
 {% block primary_content_inner %}
   <section class="module-content">
-
+    <a href="{{ h.url_for(controller='ckanext.harvest.controllers.view:ViewController', action='show_last_job', source=source.name) }}" class="btn pull-right">
+      <i class="icon-briefcase"></i>
+      {{ _('View full job report')  }}
+    </a>
+    <h1>Last Harvest Job</h1>
+    {% snippet "snippets/job_details.html", job=source.status.last_job %}
+    <div class="form-actions">
+      <a href="#" class="btn">View full job report</a>
+    </div>
   </section>
 {% endblock %}