Task UI: Add links to see full view of all tasks

Add a link to toggle between viewing all tasks and only
those that are "needs and blocked". Also, add icons to
all the task states.

Change-Id: Id72e4c98020081f3bb986b54ada0ad950bb2f630

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 d03473b..7125ee1 100644
--- a/gr-task-plugin/gr-task-plugin.html
+++ b/gr-task-plugin/gr-task-plugin.html
@@ -19,13 +19,47 @@
       <style>
         ul { padding-left: 0.5em; }
         h3 { padding-left: 0.1em; }
+        .cursor { cursor: pointer; }
+        #tasks_header {
+          align-items: center;
+          background-color: #fafafa;
+          border-top: 1px solid #ddd;
+          display: flex;
+          padding: 6px 1rem;
+        }
       </style>
 
       <div id="tasks" hidden$="[[!_tasks.length]]">
-        <h3>Tasks: (Needs + Blocked)</h3>
-        <ul style="list-style-type:none;">
-          <gr-task-plugin-tasks tasks="[[_tasks]]"></gr-task-plugin-tasks>
-        </ul>
+        <div id="tasks_header" style="display: flex;">
+          <iron-icon
+              icon="gr-icons:expand-less"
+              hidden$="[[!_expand_all]]"
+              on-tap="_switch_expand"
+              class="cursor"> </iron-icon>
+          <iron-icon
+              icon="gr-icons:expand-more"
+              hidden$="[[_expand_all]]"
+              on-tap="_switch_expand"
+              class="cursor"> </iron-icon>
+          <div style="display: flex; align-items: center; column-gap: 1em;">
+          <h3 on-tap="_switch_expand" class="cursor"> Tasks </h3>
+          <template is="dom-if" if="[[_expand_all]]">
+            <gr-button
+                on-tap="_show_all_tap"
+                disabled="[[_is_show_all(_show_all)]]"> Show All </gr-button>
+            <gr-button
+                on-tap="_needs_and_blocked_tap"
+                disabled="[[!_is_show_all(_show_all)]]"> Needs + Blocked</gr-button>
+          </template>
+        </div>
+        </div>
+        <div hidden$="[[!_expand_all]]">
+          <ul style="list-style-type:none;">
+            <gr-task-plugin-tasks
+                tasks="[[_tasks]]"
+                show_all$="[[_show_all]]"> </gr-task-plugin-tasks>
+          </ul>
+        </div>
       </div>
   </template>
   <script src="gr-task-plugin.js"></script>
@@ -34,14 +68,15 @@
 <dom-module id="gr-task-plugin-tasks">
   <template>
     <template is="dom-repeat" as="task" items="[[tasks]]">
-      <template is="dom-if" if="[[task.message]]">
+      <template is="dom-if" if="[[_can_show(show_all, task)]]">
         <li>
           <style>
+            /* Matching colors with core code. */
             .green {
-              color: greenyellow
+              color: #9fcc6b;
             }
             .red {
-              color: chocolate
+              color: #FFA62F;
             }
           </style>
           <template is="dom-if" if="[[task.icon.id]]">
@@ -66,7 +101,9 @@
           [[task.message]]
         </li>
       </template>
-      <gr-task-plugin-tasks tasks="[[task.sub_tasks]]"></gr-task-plugin-tasks>
+      <gr-task-plugin-tasks
+          tasks="[[task.sub_tasks]]"
+          show_all$="[[show_all]]"> </gr-task-plugin-tasks>
     </template>
   </template>
   <script>
@@ -78,6 +115,15 @@
             notify: true,
             value() { return []; },
           },
+
+          show_all: {
+            type: String,
+            notify: true,
+          },
+        },
+
+        _can_show(show, task) {
+          return show === 'true' || task.showOnFilter;
         },
       });
   </script>

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 47e15c8..a58623c 100644
--- a/gr-task-plugin/gr-task-plugin.js
+++ b/gr-task-plugin/gr-task-plugin.js
@@ -39,6 +39,22 @@
         notify: true,
         value() { return []; },
       },
+
+      _show_all: {
+        type: String,
+        notify: true,
+        value: 'false',
+      },
+
+      _expand_all: {
+        type: Boolean,
+        notify: true,
+        value: true,
+      },
+    },
+
+    _is_show_all(show_all) {
+      return show_all === 'true';
     },
 
     attached() {
@@ -64,45 +80,69 @@
       });
     },
 
-    _getTaskDescription(task) {
-      let inProgress = task.in_progress ? " (IN PROGRESS)" : "";
-      return (task.hint || task.name) + inProgress;
-    },
-
-    _computeMessage(task) {
-      switch (task.status) {
-        case 'FAIL':
-        case 'READY':
-        case 'INVALID':
-          return this._getTaskDescription(task);
-      }
-    },
-
     _computeIcon(task) {
       const icon = {};
       switch (task.status) {
         case 'FAIL':
           icon.id = 'gr-icons:close';
           icon.color = 'red';
-          icon.tooltip = 'Blocked';
+          icon.tooltip = 'Failed';
           break;
         case 'READY':
+          icon.id = 'gr-icons:rebase';
+          icon.color = 'green';
+          icon.tooltip = 'Ready';
+          break;
+        case 'INVALID':
+          icon.id = 'gr-icons:abandon';
+          icon.color = 'red';
+          icon.tooltip = 'Invalid';
+          break;
+        case 'WAITING':
+          icon.id = 'gr-icons:side-by-side';
+          icon.color = 'red';
+          icon.tooltip = 'Waiting';
+          break;
+        case 'PASS':
           icon.id = 'gr-icons:check';
           icon.color = 'green';
-          icon.tooltip = 'Needs';
+          icon.tooltip = 'Passed';
           break;
       }
       return icon;
     },
 
+    _computeShowOnNeedsAndBlockedFilter(task) {
+      switch (task.status) {
+        case 'FAIL':
+        case 'READY':
+        case 'INVALID':
+          return true;
+      }
+      return false;
+    },
+
     _addTasks(tasks) { // rename to process, remove DOM bits
       if (!tasks) return [];
       tasks.forEach(task => {
-        task.message = this._computeMessage(task);
+        task.message = task.hint || task.name;
         task.icon = this._computeIcon(task);
+        task.showOnFilter = this._computeShowOnNeedsAndBlockedFilter(task);
         this._addTasks(task.sub_tasks);
       });
       return tasks;
     },
+
+    _show_all_tap() {
+      this._show_all = 'true';
+    },
+
+    _needs_and_blocked_tap() {
+      this._show_all = 'false';
+    },
+
+    _switch_expand() {
+      this._expand_all = !this._expand_all;
+    },
   });
 })();