Task UI: Add status icons

Indicate status of tasks with icons

Also, remove the list style and use relative padding instead
to remove extra gaps.

Change-Id: I5185a0b1d0910db11791936b4d05cff5f96a1e77

gr-task-plugin/gr-task-plugin.html

diff --git a/gr-task-plugin/gr-task-plugin.html b/gr-task-plugin/gr-task-plugin.html
index 67c1319..d03473b 100644
--- a/gr-task-plugin/gr-task-plugin.html
+++ b/gr-task-plugin/gr-task-plugin.html
@@ -17,13 +17,13 @@
 <dom-module id="gr-task-plugin">
   <template>
       <style>
-        ul { padding-left: 30px; }
-        h3 { padding-left: 5px; }
+        ul { padding-left: 0.5em; }
+        h3 { padding-left: 0.1em; }
       </style>
 
       <div id="tasks" hidden$="[[!_tasks.length]]">
         <h3>Tasks: (Needs + Blocked)</h3>
-        <ul>
+        <ul style="list-style-type:none;">
           <gr-task-plugin-tasks tasks="[[_tasks]]"></gr-task-plugin-tasks>
         </ul>
       </div>
@@ -35,7 +35,36 @@
   <template>
     <template is="dom-repeat" as="task" items="[[tasks]]">
       <template is="dom-if" if="[[task.message]]">
-        <li>[[task.message]]</li>
+        <li>
+          <style>
+            .green {
+              color: greenyellow
+            }
+            .red {
+              color: chocolate
+            }
+          </style>
+          <template is="dom-if" if="[[task.icon.id]]">
+            <gr-tooltip-content
+                has-tooltip
+                title="In Progress">
+                <iron-icon
+                  icon="gr-icons:hourglass"
+                  class="green"
+                  hidden$="[[!task.in_progress]]">
+                </iron-icon>
+            </gr-tooltip-content>
+            <gr-tooltip-content
+                has-tooltip
+                title$="[[task.icon.tooltip]]">
+                <iron-icon
+                  icon="[[task.icon.id]]"
+                  class$="[[task.icon.color]]">
+                </iron-icon>
+            </gr-tooltip-content>
+          </template>
+          [[task.message]]
+        </li>
       </template>
       <gr-task-plugin-tasks tasks="[[task.sub_tasks]]"></gr-task-plugin-tasks>
     </template>

gr-task-plugin/gr-task-plugin.js

diff --git a/gr-task-plugin/gr-task-plugin.js b/gr-task-plugin/gr-task-plugin.js
index 86441d8..47e15c8 100644
--- a/gr-task-plugin/gr-task-plugin.js
+++ b/gr-task-plugin/gr-task-plugin.js
@@ -78,10 +78,28 @@
       }
     },
 
+    _computeIcon(task) {
+      const icon = {};
+      switch (task.status) {
+        case 'FAIL':
+          icon.id = 'gr-icons:close';
+          icon.color = 'red';
+          icon.tooltip = 'Blocked';
+          break;
+        case 'READY':
+          icon.id = 'gr-icons:check';
+          icon.color = 'green';
+          icon.tooltip = 'Needs';
+          break;
+      }
+      return icon;
+    },
+
     _addTasks(tasks) { // rename to process, remove DOM bits
       if (!tasks) return [];
       tasks.forEach(task => {
         task.message = this._computeMessage(task);
+        task.icon = this._computeIcon(task);
         this._addTasks(task.sub_tasks);
       });
       return tasks;