add color icon

res/css/style.css

@@ -21,3 +21,10 @@ body {
 .realtime-log {
     height: 50em;
 }
+
+.status-icon {
+    border-radius: 1.5em;
+    display: inline-block;
+    width: 1.5em;
+    font-size: 0.2em;
+}

res/index.html

@@ -67,7 +67,7 @@
         <tbody>
           <tr v-for="p in programs">
             <td v-text="p.program.name"></td>
-            <td v-text="p.status"></td>
+            <td v-html="p.status | colorStatus"></td>
             <td>
               <button v-on:click="cmdStart(p.program.name)" class="btn btn-default btn-xs" :disabled="p.status=='running'">
                 <span class="glyphicon glyphicon-play"></span> Start

res/js/index.js

@@ -170,6 +170,21 @@ Vue.filter('formatBytes', function(value) {
     else return (bytes / 1073741824).toFixed(1) + " GB";
 })
 
+Vue.filter('colorStatus', function(value) {
+    var makeColorText = function(text, color) {
+        return "<span class='status-icon' style='background-color:" + color + "'>" + "&nbsp;" + "</span> " + text;
+    }
+    switch (value) {
+        case "running":
+            return makeColorText("running", "green");
+        case "fatal":
+            return makeColorText("fatal", "red");
+        default:
+            return makeColorText(value, "gray");
+    }
+    return value;
+})
+
 Vue.directive('disable', function(value) {
     this.el.disabled = !!value
 })