Add cost to task page

appengine/swarming/ui/res/imp/taskpage/task-page.html

 <!--
   Copyright 2016 The LUCI Authors. All rights reserved.
   Use of this source code is governed under the Apache License, Version 2.0
   that can be found in the LICENSE file.
 
   This in an HTML Import-able file that contains the definition
   of the following elements:
 
     <task-page>
 
@@ skipping 473 matching lines @@
                 </tr>
                 <tr>
                   <td>Failure</td>
                   <td class$="[[_failureClass(_result.failure)]]">[[_result.failure]]</td>
                 </tr>
                 <tr>
                   <td>Internal Failure</td>
                   <td class$="[[_internalClass(_result.internal_failure)]]">[[_result.internal_failure]]</td>
                 </tr>
                 <tr>
+                  <td>Cost (USD)</td>
+                  <td>$[[_cost(_result)]]</td>
+                </tr>
+                <tr>
                   <td>Isolated Outputs</td>
                   <td>
                     <a href$="[[_isolateLink(_result.outputs_ref)]]">
                       [[_result.outputs_ref.isolated]]
                     </a>
                   </td>
                 </tr>
                 <tr>
                   <td>Bot version</td>
                   <td>[[_result.bot_version]]</td>
@@ skipping 290 matching lines @@
       },
 
       _command: function(request) {
         if (!request || !request.properties) {
           return "";
         }
         var args = request.properties.command || [];
         return args.join(" ");
       },
 
+      _cost: function(result) {
+        if (!result || !result.costs_usd || !result.costs_usd.length) {
+          return 0;
+        }
+        return result.costs_usd[0].toFixed(4);
+      },
+
       _disambiguate: function(taskId, result) {
         if (!taskId.endsWith("0") || !result) {
           return false;
         }
         return result.try_number > 1;
       },
 
       _empty: function(array) {
         return !array || array.length == 0;
       },
@@ skipping 239 matching lines @@
           this._getJsonAsync("_other_running", "/api/swarming/v1/tasks/count", "_busyRunningCount", this._auth_headers, taskCountParams);
           // change running to pending
           taskCountParams.state = ["PENDING"];
           this._getJsonAsync("_other_pending", "/api/swarming/v1/tasks/count", "_busyPendingCount", this._auth_headers, taskCountParams);
         }
       }
     });
   })();
   </script>
 </dom-module>