Swarming UI: Bold requested dimensions in bot dimensions

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 45 matching lines @@
       }
 
       .right {
         margin-top: 8px;
       }
 
       .break-all {
         word-break: break-all;
       }
 
+      .bolded {
+        font-weight: bold;
+      }
+
       .expand {
         min-width: 3em;
         vertical-align: middle;
         padding: .5em;
       }
 
       .code {
         font-family: monospace;
       }
 
@@ skipping 259 matching lines @@
                     <a
                         title="The list of bots that matches the list of dimensions"
                         href$="[[_botListLink(_request.properties.dimensions)]]">Bots</a>
                      <a
                         title="The list of tasks that matches the list of dimensions"
                         href$="[[_taskListLink(_request.properties.dimensions)]]">Tasks</a>
                   </td>
                 </tr>
                 <template is="dom-repeat" items="{{_request.properties.dimensions}}" as="dimension">
                   <tr>
-                    <td><b>[[dimension.key]]:</b> [[_alias(dimension)]]</td>
+                    <td><b>[[dimension.key]]:</b> [[_aliasRequest(dimension)]]</td>
                   </tr>
                 </template>
                 <tr>
                   <td>Isolated Inputs</td>
                   <td>
                     <a href$="[[_isolateLink(_request.properties.inputs_ref)]]">
                       [[_request.properties.inputs_ref.isolated]]
                     </a>
                   </td>
                 </tr>
@@ skipping 120 matching lines @@
                   <td>Bot assigned to task</td>
                   <td><a href$="[[_botLink(_result.bot_id)]]">[[_result.bot_id]]</td>
                 </tr>
                 <tr>
                   <td rowspan$="[[_rowspan(_result.bot_dimensions)]]">
                     <a>Bot Dimensions</a>
                   </td>
                 </tr>
                 <template is="dom-repeat" items="[[_result.bot_dimensions]]" as="dimension">
                   <tr>
-                    <td><b>[[dimension.key]]:</b> [[_alias(dimension)]]</td>
+                    <td bgcolor$="[[_highlightIfRequested(_request.properties.dimensions, dimension.key)]]">
+                      <b>[[dimension.key]]:</b> | <!-- Leave this divider in for readability -->

[Ryan Tseng, 2017/06/05 21:46:50]

Put divider and comment on new line for 80 char

[cwpayton, 2017/06/05 22:35:43]

Done.

+                      <template is="dom-repeat" items="[[_aliasResult(_request.properties.dimensions, dimension)]]" as="value">

[Ryan Tseng, 2017/06/05 21:46:53]

<template
    is="..."
    items="...."
    as="....">

for 80 chars.

[cwpayton, 2017/06/05 22:35:43]

Done.

+                        <span class$="[[value.class]]">[[value.name]]</span> | <!-- Leave this divider in for readability -->

[Ryan Tseng, 2017/06/05 21:46:52]

Divider and comment on new line.

[cwpayton, 2017/06/05 22:35:43]

Done.

+                      </template>
+                    </td>
                   </tr>
                 </template>
 
                 <tr>
                   <td>Exit code</td>
                   <td>[[_result.exit_code]]</td>
                 </tr>
                 <tr>
                   <td>Try number</td>
                   <td>[[_result.try_number]]</td>
@@ skipping 232 matching lines @@
           type: Object,
         },
         _stdout: {
           type: String,
         }
       },
 
       observers: [
         "_similarLoad(_request,_result,_auth_headers)"],
 
-      _alias: function(dim) {
-        var values = dim.value;
+      _aliasRequest: function(request) {
+        // Refactor of the old "_alias" function for distinction from the

[Ryan Tseng, 2017/06/05 21:46:51]

You don't have to put in code comments for code changes, since the reader is
only going to have the view of the code in a slice of time, so "old _alias"
doesn't make much sense.  For these types of comments, you usually leave them in
the code review tool.

[cwpayton, 2017/06/05 22:35:43]

Done.

+        // _aliasResult function
+        var values = request.value;
         if (!Array.isArray(values)) {
           values = [values];
         }
-        if (swarming.alias.has(dim.key)) {
-          values.forEach(function(v, i){
-            values[i] = swarming.alias.apply(v, dim.key);
+        if (swarming.alias.has(request.key)) {
+          values.forEach(function(v, i) {
+            values[i] = swarming.alias.apply(v, request.key);
           });
         }
         return values.join(" | ");
       },
 
+      _aliasResult: function(request, result) {
+        // request is the entire _request.properties.dimensions array, but we are
+        // only passed in one key at a time from _result.bot_dimensions as the
+        // result variable. Therefore we need to loop through the key-value pairs 
+        // of request to determine whether the current bot dimension was requested.

[Ryan Tseng, 2017/06/05 21:46:50]

nit: 80 chars.

[cwpayton, 2017/06/05 22:35:43]

Done.

+        var map = [];

[Ryan Tseng, 2017/06/05 21:46:50]

nit: this isn't a map, it's an array of objects.  Maybe just call it
"dimensions"

[cwpayton, 2017/06/05 22:35:43]

Done.

+        var target = null;
+        request.forEach(function(dim, i) {
+          if (dim.key == result.key) target = i;
+        });
+        var values = result.value;
+        if (!Array.isArray(values)) {
+          values = [values];
+        }
+        values.forEach(function(v, i) {
+          // Adjust the proper alias, if necessary
+          values[i] = swarming.alias.has(result.key) ? 

[Ryan Tseng, 2017/06/05 21:46:51]

nit: this is two lines, so just use an if/else statement here instead of a
ternary statement.

[cwpayton, 2017/06/05 22:35:43]

Done.

+            swarming.alias.apply(v, result.key) : v;
+          
+          // Set class attribute to bolded if the value was included in the
+          // requested dimensions
+          bold = target != null && request[target].value == v ? "bolded" : "";

[Ryan Tseng, 2017/06/05 21:46:51]

This is a bit hard to parse, if statements are preferred.

var bold = ""
if (target != null && request[target].value == v) bold = "bolded"

[cwpayton, 2017/06/05 22:35:43]

Done.

+          map.push({"name": values[i], "class": bold});
+        });
+
+        // Return an array of objects that map each value to its corresponding
+        // class name based on whether it should be bolded.
+        return map;
+      },
+
       _bytes: function(sizeInBytes) {
         return sk.human.bytes(sizeInBytes);
       },
 
       _canCancelTask: function(result, permissions) {
         return result && result.state === "PENDING" && permissions.cancel_task;
       },
 
       _cancelTask: function() {
         var url = "/api/swarming/v1/task/" + this.task_id +"/cancel";
@@ skipping 106 matching lines @@
         if (!template) {
           return undefined;
         }
         return template.replace("%s", id);
       },
 
       _hasActualCIPDPackages: function(result) {
         return result && result.cipd_pins && result.cipd_pins.packages;
       },
 
+      _highlightIfRequested: function(request, key) {
+        var yellow = false;
+        request.forEach(function (dim){

[Ryan Tseng, 2017/06/05 21:46:51]

nit: space before {

[cwpayton, 2017/06/05 22:35:43]

Done.

+          if (dim.key == key) yellow = true;
+        });
+        return yellow ? "Yellow" : "White";
+      },
+
       _internalClass: function(failure) {
         if (failure) {
           return "exception";
         }
         return "";
       },
 
       _isolateLink: function(ref) {
         if (!ref || !ref.isolatedserver) {
           return undefined;
@@ skipping 183 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>