Move elements/ to ui/

appengine/swarming/elements/polymer05/stats-app.html

-<!--
-# Copyright 2015 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.
-
--->
-
-<!--
-@group Swarming Elements
-
-`stats-app' encapsulates the statistic front end.
-
-@element stats-app
--->
-
-<link rel="import" href="bower_components/polymer/polymer.html">
-<link rel="import" href="bower_components/core-ajax/core-ajax.html">
-<link rel="import" href="bower_components/core-label/core-label.html">
-<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
-<link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
-<link rel="import" href="bower_components/paper-radio-button/paper-radio-button.html">
-<link rel="import" href="bower_components/paper-radio-group/paper-radio-group.html">
-<link rel="import" href="bower_components/paper-spinner/paper-spinner.html">
-
-<link rel="import" href="stats-dimension-filter.html">
-<link rel="import" href="stats-request-chart.html">
-<link rel="import" href="stats-work-chart.html">
-<link rel="import" href="stats-table-chart.html">
-<link rel="import" href="stats-time-chart.html">
-
-
-<polymer-element name="stats-app" attributes="dimensions">
-  <template>
-    <style>
-      #loading {
-        position: fixed;
-        top: 0px;
-        right: 0px;
-      }
-      #radioGroup > paper-radio-button {
-        padding: 0px 0px 0px 12px;
-      }
-      #filterPanel {
-        width: 480px;
-      }
-      core-label {
-        margin-left: 12px;
-        display: inline;
-      }
-    </style>
-
-    <core-ajax id="get_stats_summary"
-      headers='{"x-datasource-auth": "a"}'
-      url="/swarming/api/v1/stats/summary/{{resolution}}"
-      params='{"duration": "{{duration}}"}'
-      handleAs="json"
-      on-core-response="{{onGetStatsSummarySuccess}}"
-      loading="{{ajaxLoading}}">
-    </core-ajax>
-
-    <core-ajax id="get_stats_dimension"
-      headers='{"x-datasource-auth": "a"}'
-      url="/swarming/api/v1/stats/dimensions/{{dimension}}/{{resolution}}"
-      params='{"duration": "{{duration}}"}'
-      handleAs="json"
-      on-core-response="{{onGetStatsSummarySuccess}}"
-      loading="{{ajaxLoading}}">
-    </core-ajax>
-
-    <div layout horizontal>
-      <div layout vertical id="filterPanel">
-        <div layout horizontal center>
-          <paper-radio-group id="radioGroup" selected="{{resolution}}">
-            <paper-radio-button name="days" label="Days"></paper-radio-button>
-            <paper-radio-button name="hours" label="Hours"></paper-radio-button>
-            <paper-radio-button name="minutes" label="Minutes"></paper-radio-button>
-          </paper-radio-group>
-        </div>
-
-        <stats-dimension-filter dimensions="{{dimensions}}" value="{{dimension}}">
-        </stats-dimension-filter>
-      </div>
-      <div layout vertical flex>
-        <stats-work-chart
-          isDimension="{{dimension ? true : false}}"
-          data="{{dataTable}}"
-          resolution="{{resolution}}">
-        </stats-work-chart>
-
-        <stats-time-chart
-          isDimension="{{dimension ? true : false}}"
-          data="{{dataTable}}"
-          resolution="{{resolution}}">
-        </stats-time-chart>
-
-        <stats-request-chart
-          hidden?="{{dimension}}"
-          data="{{dataTable}}"
-          resolution="{{resolution}}">
-        </stats-request-chart>
-      </div>
-    </div>
-    <stats-table-chart data="{{dataTable}}"></stats-table-chart>
-
-    <paper-spinner id="loading"></paper-spinner>
-  </template>
-
-  <script>
-  Polymer('stats-app', {
-    observe: {
-      'dimension': 'paramsChanged',
-      'duration': 'paramsChanged',
-      'resolution': 'paramsChanged'
-    },
-
-    ready: function() {
-      var self = this;
-      window.onpopstate = function(event) {
-        self.restoringState = true;
-        self.dimension = event.state.dimension;
-        self.duration = event.state.duration;
-        self.resolution = event.state.resolution;
-      };
-      this.restoreState();
-    },
-
-    restoreState: function() {
-      try {
-        var stateObj = JSON.parse(
-            decodeURIComponent(window.location.search.substr(1)));
-        this.dimension = stateObj.dimension;
-        this.duration = stateObj.duration || 120;
-        this.resolution = stateObj.resolution || 'hours';
-        this.restoringState = true;
-        var stateObj = this.getState();
-        var url = '/stats?' + JSON.stringify(stateObj);
-        window.history.replaceState(stateObj, '', url);
-      } catch (e) {
-        this.restoringState = false;
-        this.resolution = 'hours';
-        this.duration = 120;
-      }
-    },
-
-    getState: function() {
-      return {
-        dimension: this.dimension,
-        duration: this.duration,
-        resolution: this.resolution,
-      };
-    },
-
-    pushState: function() {
-      var stateObj = this.getState();
-      var url = '/stats?' + JSON.stringify(stateObj);
-      window.history.pushState(stateObj, '', url);
-    },
-
-    paramsChanged: function(oldValue, newValue) {
-      if (this.dimension) {
-        this.$.get_stats_dimension.go();
-      } else {
-        this.$.get_stats_summary.go();
-      }
-      if (!this.restoringState) {
-        this.pushState();
-      } else {
-        this.restoringState = false;
-      }
-    },
-
-    onGetStatsSummarySuccess: function(event, detail, sender) {
-      this.dataTable = detail.response.table;
-    },
-
-    ajaxLoadingChanged: function(oldValue, newValue) {
-      if (newValue) {
-        this.$.loading.active = true;
-      } else {
-        this.$.loading.active = false;
-      }
-    }
-  });
-  </script>
-</polymer-element>