Checks plugin table fixes

*Don’t show “Re-run” until hooked up with backend API.
*Show a required column
*Checks table: Show only values for started/duration when
available/reasonable.
*Checks table: Disable “View log” if no ‘url’ is present
*Add scroll for checks table when viewing in small screen or mobile.

Change-Id: Ifa6985bf58133acae28d24cf126be288a2349191
diff --git a/gr-checks/gr-checks-item.html b/gr-checks/gr-checks-item.html
index 9037772..18d85bb 100644
--- a/gr-checks/gr-checks-item.html
+++ b/gr-checks/gr-checks-item.html
@@ -1,45 +1,46 @@
 <dom-module id="gr-checks-item">
   <template>
-      <style>
-        :host {
-          border-top: 1px solid #ddd;
-        }
+    <style>
+      :host {
+        border-top: 1px solid #ddd;
+      }
 
-        td:first-child {
-          padding-left: 1rem;
-        }
+      td:first-child {
+        padding-left: 1rem;
+      }
 
-        td {
-          padding: 1px 32px 1px 0;
-          white-space: nowrap;
-        }
+      td {
+        padding: 1px 32px 1px 0;
+        white-space: nowrap;
+      }
 
-        a.log {
-          margin-right: 16px;
-          display: inline-block;
-        }
-      </style>
+      a.log {
+        margin-right: 16px;
+        display: inline-block;
+      }
+    </style>
 
-      <td>[[check.checker_name]]</td>
-      <td><!-- required for merge--></td>
-      <td>
-        <gr-checks-status show-text status="[[check.state]]"></gr-checks-status>
-      </td>
-      <td><!--Check System--></td>
-      <td>[[_startTime]]</td>
-      <td>[[_duration]]</td>
-      <td>
+    <td>[[check.checker_name]]</td>
+    <td>[[_requiredForMerge]]</td>
+    <td>
+      <gr-checks-status show-text status="[[check.state]]"></gr-checks-status>
+    </td>
+    <td><!--Check System--></td>
+    <td>[[_startTime]]</td>
+    <td>[[_duration]]</td>
+    <td>
         <a href$="[[check.url]]" target="_blank" class="log">
-          <gr-button link no-uppercase>
+          <gr-button link no-uppercase disabled="[[!check.url]]">
             View log
           </gr-button>
         </a>
-        <gr-button
-          link
-          no-uppercase
-          on-tap="handleClick">
-          Re-run
-        </gr-button>
+<!--      disabling re-run button until the API for rerun is ready-->
+<!--        <gr-button-->
+<!--          link-->
+<!--          no-uppercase-->
+<!--          on-tap="handleClick">-->
+<!--          Re-run-->
+<!--        </gr-button>-->
       </td>
   </template>
   <script src="gr-checks-item.js"></script>
diff --git a/gr-checks/gr-checks-item.js b/gr-checks/gr-checks-item.js
index 8a1a54c..199fc92 100644
--- a/gr-checks/gr-checks-item.js
+++ b/gr-checks/gr-checks-item.js
@@ -38,6 +38,10 @@
         type: String,
         computed: '_computeDuration(check)',
       },
+      _requiredForMerge: {
+        type: String,
+        computed: '_computeRequiredForMerge(check)'
+      }
     },
 
     /**
@@ -45,6 +49,7 @@
      * @return {string}
      */
     _computeStartTime(check) {
+      if (!check.started) return "-";
       return moment(check.started).format('LTS');
     },
 
@@ -53,12 +58,22 @@
      * @return {string}
      */
     _computeDuration(check) {
+      if (!check.started || !check.finished) {
+        return "-";
+      }
       const startTime = moment(check.started);
       const finishTime = check.finished ? moment(check.finished) : moment();
       return generateDurationString(
           moment.duration(finishTime.diff(startTime)));
     },
 
+    /**
+     * @param {!Defs.Check} check
+     * @return {string}
+     */
+    _computeRequiredForMerge(check) {
+      return (check.blocking && check.blocking.length === 0) ? "Optional" : "Required";
+    },
     handleClick(event) {
       event.preventDefault();
       this.retryCheck(this.check.checker_uuid);
diff --git a/gr-checks/gr-checks-view.html b/gr-checks/gr-checks-view.html
index b4efaa4..49e09c7 100644
--- a/gr-checks/gr-checks-view.html
+++ b/gr-checks/gr-checks-view.html
@@ -4,6 +4,7 @@
       :host {
         display: block;
         width: 100%;
+        overflow: auto;
       }
 
       table {
@@ -19,6 +20,7 @@
       }
 
       .topHeader {
+        padding-right: 32px;
         padding-bottom: 4px;
         text-align: left;
         white-space: nowrap;
@@ -89,7 +91,7 @@
         <thead>
           <tr class="headerRow">
             <th class="topHeader">Name</th>
-            <th class="topHeader"><!-- required for merge --></th>
+            <th class="topHeader">For submit</th>
             <th class="topHeader">Status</th>
             <th class="topHeader"><!--Checking system--></th>
             <th class="topHeader">Started</th>