Update Stats element to use new directory layout

appengine/swarming/elements/res/imp/stats/stats-overview.html

 <!--
-# Copyright 2016 The LUCI Authors. All rights reserved.
-# Use of this source code is governed by the Apache v2.0 license that can be
-# found in the LICENSE file.
+  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.
+
+  For more on Google Charts and the data format, see https://developers.google.com/chart/interactive/docs/datatables_dataviews
 -->
 
-<link rel="import" href="/imp/bower_components/polymer/polymer.html">
-<link rel="import" href="/imp/bower_components/iron-ajax/iron-ajax.html">
-<link rel="import" href="/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="/res/imp/bower_components/polymer/polymer.html">
+<link rel="import" href="/res/imp/bower_components/iron-ajax/iron-ajax.html">
+<link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
 <link rel="import" href="load-charts-api.html">
 <link rel="import" href="partial-line-chart.html">
 
 <dom-module id="stats-overview">
   <style include="iron-flex iron-flex-alignment iron-positioning">
 
   </style>
 
   <template>
@@ skipping 31 matching lines @@
         title="Requests">
       </partial-line-chart>
 
     </div>
   </template>
   <script>
     Polymer({
       is: 'stats-overview',
       properties: {
         // input
+        // TODO(kjlubick): Update the stats endpoints to use
+        auth_headers: {
+          type: Object,
+        }
 
         //output
+        busy: {
+          type: Boolean,
+          value: false,
+          notify: true,
+        },
         data_table: {
           type: Object,
           computed: "_extractData(response,charts_api_loaded)",
           notify: true,
         },
 
         //private
         charts_api_loaded: {
           type: Boolean,
         },
         _headers: {
           type: Object,
           value: {
             "x-datasource-auth": "a",
           },
         },
         params: {
           type: Object,
           value: {
             duration: 20,
           },
         },
         response: {
           type: Object,
         },
       },
 
       _extractData: function (_response, ready) {
+        // Times are coming in like Date(2016,4,13,12,10,0) which is supposed
+        // to be UTC but the browser interprets as browser local time. We fix
+        // the dates to be parsed as UTC and the partial-line-chart will show
+        // times in browser local time.
+        var table = _response.table;

[stephana, 2016/09/26 20:05:46]

could you modify the backend to send the date/time in ms since the epoch instead
?  This seems fragile. 

[kjlubick, 2016/09/27 12:17:18]

I know the format seems fragile, but it's actually being produced by the Google
stats library and so modifying it this way is safe.

I don't want to modify the backend now, just because I'll have to go change a
bunch of stuff (in v2) to get the stats actually to work.  I'll add a TODO to
remind myself.

[stephana, 2016/09/27 15:33:23]

Acknowledged.

+        // Our data looks like https://developers.google.com/chart/interactive/docs/datesandtimes#dates-and-times-using-the-date-string-representation
+        // i.e.
+        // rows: [
+        // {c: [v: "Date(2016,8,23,14,35,0)", v: ...]}
+        // {c: ... }
+        // ]
+        // and we parse the first part of each datum, the Date.
+        table.rows.forEach(function(r) {
+          var time = r.c[0].v;
+          if (time.startsWith && time.startsWith("Date")) {
+            // Remove the Date() wrapper
+            time = time.substring(5, time.length-1);
+            // Split into an array of arguments
+            time = time.split(",");
+            // Parse and store.
+            r.c[0].v = new Date(Date.UTC(...time))
+          }
+        });
         return _response.table;
       },
     });
   </script>
 </dom-module>