improve run status icon consistency

CMakeLists.txt

@@ -58,7 +58,7 @@ add_custom_command(OUTPUT laminar.capnp.c++ laminar.capnp.h
 
 # Zip and compile statically served resources
 generate_compressed_bins(${CMAKE_SOURCE_DIR}/src/resources index.html js/app.js
-    favicon.ico favicon-152.png icon.png progress.gif)
+    favicon.ico favicon-152.png icon.png tick.gif cross.gif spin.gif)
 
 # Download 3rd-party frontend JS libs...
 file(DOWNLOAD https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js

src/resources.cpp

@@ -36,8 +36,10 @@ Resources::Resources()
     INIT_RESOURCE("/", index_html, CONTENT_TYPE_HTML);
     INIT_RESOURCE("/favicon.ico", favicon_ico, CONTENT_TYPE_ICO);
     INIT_RESOURCE("/favicon-152.png", favicon_152_png, CONTENT_TYPE_PNG);
-    INIT_RESOURCE("/progress.gif", progress_gif, CONTENT_TYPE_GIF);
     INIT_RESOURCE("/icon.png", icon_png, CONTENT_TYPE_PNG);
+    INIT_RESOURCE("/tick.gif", tick_gif, CONTENT_TYPE_GIF);
+    INIT_RESOURCE("/cross.gif", cross_gif, CONTENT_TYPE_GIF);
+    INIT_RESOURCE("/spin.gif", spin_gif, CONTENT_TYPE_GIF);
     INIT_RESOURCE("/js/app.js", js_app_js, CONTENT_TYPE_JS);
     INIT_RESOURCE("/js/Chart.HorizontalBar.js", js_Chart_HorizontalBar_js, CONTENT_TYPE_JS);
     INIT_RESOURCE("/js/ansi_up.js", js_ansi_up_js, CONTENT_TYPE_JS);

src/resources/index.html

@@ -48,7 +48,7 @@
       <td><router-link :to="'/jobs/'+job.name">{{job.name}}</router-link> <i>queued</i></td>
      </tr>
      <tr v-for="job in jobsRunning">
-      <td><img class="spin small" src="/progress.gif"> <router-link :to="'/jobs/'+job.name">{{job.name}}</router-link> <router-link :to="'/jobs/'+job.name+'/'+job.number">#{{job.number}}</router-link>
+      <td><span v-html="runIcon(job.result)"></span> <router-link :to="'/jobs/'+job.name">{{job.name}}</router-link> <router-link :to="'/jobs/'+job.name+'/'+job.number">#{{job.number}}</router-link>
        <small class="pull-right">{{formatDuration(job.started, job.completed)}}</small>
        <div class="progress">
          <div class="progress-bar progress-bar-striped" :class="'progress-bar-'+(job.overtime?'warning':'info')" :class="job.etc?'':'active'" :style="'width:'+(!job.etc?'100':job.progress)+'%'"></div>
@@ -149,7 +149,7 @@
       <td colspan="4"><i>{{nQueued}} run(s) queued</i></td>
      </tr>
      <tr v-for="job in jobsRunning" track-by="$index">
-      <td><img class="spin small" src="/progress.gif"> <router-link :to="'/jobs/'+$route.params.name+'/'+job.number">#{{job.number}}</router-link></td>
+      <td><span v-html="runIcon(job.result)"></span> <router-link :to="'/jobs/'+$route.params.name+'/'+job.number">#{{job.number}}</router-link></td>
       <td class="text-center">{{formatDate(job.started)}}</td>
       <td class="text-center">{{formatDuration(job.started, job.completed)}}</td>
       <td class="text-center hidden-xs">{{job.reason}}</td>

src/resources/js/app.js

@@ -54,7 +54,7 @@ const WebsocketHandler = function() {
 const Utils = {
   methods: {
     runIcon(result) {
-      return result === "success" ? '<span style="color:forestgreen;font-family:\'Zapf Dingbats\';">✔</span>' : result === "failed" || result === "aborted" ? '<span style="color:crimson;">✘</span>' : '<img class="spin small" src="/progress.gif">';
+      return result === "success" ? '<img src="/tick.gif">' : result === "failed" || result === "aborted" ? '<img src="/cross.gif">' : '<img src="/spin.gif">';
     },
     formatDate: function(unix) {
       // TODO: reimplement when toLocaleDateString() accepts formatting options on most browsers