config_service: Added revision and timestamp to config-set-cards and config-set pages

appengine/config_service/ui/src/config-ui/config-set-card.html

 <!--
   Copyright 2017 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.
 -->
 
 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../bower_components/paper-card/paper-card.html">
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../bower_components/iron-icons/maps-icons.html">
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../../bower_components/paper-tooltip/paper-tooltip.html">
+<link rel="import" href="../../common/common-behaviors.html">
 
 <dom-module id="config-set-card">
   <template>
     <style>
       a { 
         text-decoration: none;
         color: inherit;
       }
       
       paper-card {
@@ skipping 22 matching lines @@
 
       .paper-red { color: var(--paper-red-600); }
 
       .paper-grey { color: var(--paper-grey-600); }
       
     </style>
 
     <a href="#/[[name]]">
       <paper-card elevation="2">
         <div class="card-content">
-          <div class="config-title">[[name]]
+          <div class="config-title">
+            [[name]]
             <div class="validation">
+              <iron-icon id="launch"
+                         icon="icons:launch"
+                         class="paper-grey"
+                         on-tap="_openConfig">

[Sergey Berezin, 2017/07/31 20:21:18]

This correctly opens a new window, but also opens the original page on the
config set (probably because it's click on the entire card). I'd expect the
original page to stay unchanged.

Perhaps, we should change the clickable surface inside the card to exclude the
external link.

[cwpayton, 2017/07/31 23:40:53]

Done.

+              </iron-icon>
+              <paper-tooltip for="launch" offset="0">
+                [[link]]
+              </paper-tooltip>
               <template is="dom-if" if="[[lastImportAttempt]]" restamp="true">
                 <template is="dom-if" if="[[lastImportAttempt.success]]" restamp="true">
                   <iron-icon id="successful-import" 
                              icon="icons:check-circle" 
                              class="paper-green">
                   </iron-icon>
                   <paper-tooltip for="successful-import" offset="0">
                     Last import succeeded.
                   </paper-tooltip>
                 </template>
@@ skipping 10 matching lines @@
               <template is="dom-if" if="[[_not(lastImportAttempt)]]" restamp="true">
                 <iron-icon id="no-import" 
                            icon="icons:help" 
                            class="paper-grey">
                 </iron-icon>
                 <paper-tooltip for="no-import" offset="0">
                   Last import attempt info not available.
                 </paper-tooltip>
               </template>
             </div>
+            <p>Revision: [[revision]]</p>
+            <p>Timestamp: [[timestamp]]</p>

[Sergey Berezin, 2017/07/31 20:21:18]

I'd make this more compact:
- Print only the fist 7 digits of the revision (similar to git short hash)
- Place the date on the same line, possibly shortened e.g. to "x
min/hours/days/.. ago" with a bubble showing the actual date, similar to how
Rietveld and Monorail do it.

In fact, if the revision / date fit on the same line as the project title, I'd
try doing that too. It should be possible to let HTML format it dynamically if
the card is wide enough, and otherwise wrap it to the next line.

[cwpayton, 2017/07/31 23:40:53]

Done.

           </div>
         </div>
       </paper-card>
     </a>
 
   </template>
   <script>
     Polymer({
       is: "config-set-card",
 
-      properties: {
-        name: {
-          type: String
-        },
+      behaviors: [ConfigUIBehaviors.CommonBehavior],
 
-        lastImportAttempt: {
-          type: Object
-        },
-      },
-
-      _not: function(b) {
-        return !b;
-      },
-
+      _openConfig: function() {
+        window.open(this.link);
+      }
     });
   </script>
 </dom-module>