Add checkbox to display blocking checks only.

Change-Id: Ib7150964a35ef1ffe97396e5fac241bf64d9ef85
diff --git a/gr-checks/gr-checks-view.html b/gr-checks/gr-checks-view.html
index d13ad14..7ab60f9 100644
--- a/gr-checks/gr-checks-view.html
+++ b/gr-checks/gr-checks-view.html
@@ -104,6 +104,12 @@
         display: flex;
         width: 100%;
       }
+
+      .blocking-checks-container {
+        margin-left: 10px;
+        display: flex;
+        align-items: center;
+      }
     </style>
 
     <header>
@@ -126,6 +132,14 @@
               value="[[_currentStatus]]">
             </gr-dropdown-list>
           </div>
+          <div class="blocking-checks-container">
+            <input type="checkbox"
+              name="blocking"
+              checked$="[[_showBlockingChecksOnly]]"
+              on-click="_handleBlockingCheckboxClicked"
+              value="blocking">
+              Required for Submit
+          </div>
         </template>
         <template is="dom-if" if="[[_createCheckerCapability]]">
           <div class="configure-button-container">
diff --git a/gr-checks/gr-checks-view.js b/gr-checks/gr-checks-view.js
index 4ca7ebc..a67c9c8 100644
--- a/gr-checks/gr-checks-view.js
+++ b/gr-checks/gr-checks-view.js
@@ -60,7 +60,8 @@
       },
       _visibleChecks: {
         type: Array,
-        computed: '_computeVisibleChecks(_checks, _currentStatus)',
+        computed: '_computeVisibleChecks(_checks, _currentStatus, ' +
+          '_showBlockingChecksOnly)',
       },
       _statuses: Array,
       pollChecksInterval: Number,
@@ -84,6 +85,10 @@
         type: String,
         value: STATE_ALL,
       },
+      _showBlockingChecksOnly: {
+        type: Boolean,
+        value: false,
+      },
     },
 
     observers: [
@@ -118,11 +123,13 @@
           .sort((a, b) => b.value - a.value);
     },
 
-    _computeVisibleChecks(checks, status) {
-      if (!checks) return;
-      return checks.filter(check =>
-        status === STATE_ALL || check.state === status
-      );
+    _computeVisibleChecks(checks, status, showBlockingChecksOnly) {
+      if (!checks) return [];
+      return checks.filter(check => {
+        if (showBlockingChecksOnly && (!check.blocking ||
+            !check.blocking.length)) return false;
+        return status === STATE_ALL || check.state === status;
+      });
     },
 
     _handleRevisionUpdate(revision) {
@@ -136,6 +143,10 @@
       this._currentPatchSet = patchSet;
     },
 
+    _handleBlockingCheckboxClicked() {
+      this._showBlockingChecksOnly = !this._showBlockingChecksOnly;
+    },
+
     _handleStatusFilterChanged(e) {
       const status = e.detail.value;
       if (status === this._currentStatus) return;
diff --git a/gr-checks/gr-checks-view_test.html b/gr-checks/gr-checks-view_test.html
index c35a940..271d055 100644
--- a/gr-checks/gr-checks-view_test.html
+++ b/gr-checks/gr-checks-view_test.html
@@ -322,7 +322,8 @@
     suite('with checks', () => {
       setup(done => {
         const CHECK3 = Object.assign({}, CHECK1, {state: 'FAILED'});
-        const CHECK4 = Object.assign({}, CHECK1, {state: 'FAILED'});
+        const CHECK4 = Object.assign({}, CHECK1, {state: 'FAILED',
+          blocking: [1, 2, 3]});
         getChecksResolve([CHECK1, CHECK2, CHECK3, CHECK4]);
         flush(done);
       });
@@ -423,6 +424,26 @@
           });
         });
       });
+
+      suite('blocking checkbox', () => {
+        test('renders the checkbox', () => {
+          assert.isNotNull(element.querySelector('input[name="blocking"]'));
+        });
+
+        test('default filter is all', () => {
+          assert.equal(element.querySelector('input[name="blocking"]').checked,
+              false);
+        });
+
+        test('blocking checkbox filters checks', done => {
+          assert.equal(element._visibleChecks.length, 4);
+          element.querySelector('input[name="blocking"]').click();
+          flush(() => {
+            assert.equal(element._visibleChecks.length, 1);
+            done();
+          });
+        });
+      });
     });
   });