Swarming UI: Bold requested dimensions in bot dimensions

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

Index: appengine/swarming/ui/res/imp/taskpage/task-page.html
diff --git a/appengine/swarming/ui/res/imp/taskpage/task-page.html b/appengine/swarming/ui/res/imp/taskpage/task-page.html
index bed9c40613bd7e69c9f8e4090ed1388a14391c43..c04c3be791c76fe2640fd2a83a76ada58943008c 100644
--- a/appengine/swarming/ui/res/imp/taskpage/task-page.html
+++ b/appengine/swarming/ui/res/imp/taskpage/task-page.html
@@ -63,6 +63,10 @@
         word-break: break-all;
       }
 
+      .bolded {
+        font-weight: bold;
+      }
+
       .expand {
         min-width: 3em;
         vertical-align: middle;
@@ -342,7 +346,7 @@
                 </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>
@@ -483,7 +487,12 @@
                 </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>
 
@@ -736,19 +745,51 @@
       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);
       },
@@ -875,6 +916,14 @@
         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";