status/res/imp/perf-status-sk.html

<!--
  This in an HTML Import-able file that contains the definition
  of the following elements:

    <perf-status-sk>

  To use this file import it:

    <link href="/res/imp/perf-status-sk.html" rel="import" />

  Usage:

    <perf-status-sk></perf-status-sk>

  Properties:
    reload: How often (in seconds) to reload the perf status.
-->

<link rel="import" href="/res/imp/bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/res/imp/bower_components/paper-button/paper-button.html">

<link rel="import" href="/res/common/imp/timer-sk.html">

<dom-module id="perf-status-sk">
  <template>
    <style>
      a {
        color: var(--status-sk-text-color);
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      .label {
        padding: 5px;
        text-transform: none;
      }
      .value {
        background-color: var(--status-sk-icon-color);
        border-radius: 3px;
        padding: 5px;
      }
      iron-icon {
        color: var(--status-sk-icon-color);
      }
    </style>

    <iron-ajax
      id="status"
      auto url="https://perf.skia.org/_/alerts/"
      handle-as="json"
      timeout="30000"
      last-response="{{_perfAlerts}}">
    </iron-ajax>

    <timer-sk period="[[reload]]" on-trigger="_reload">

    <a href="https://perf.skia.org/t/" target="_blank">
      <paper-button>
        <iron-icon icon="icons:trending-up"></iron-icon>
        <span class="label">perf alerts</span>
        <span class="value">{{_perfAlerts.alerts}}</span>
      </paper-button>
    </a>

  </template>
  <script>
  Polymer({
    is:"perf-status-sk",

    properties: {
      // input
      reload: {
        type: Number,
        value: 60,
      },

      // private
      _perfAlerts: {
        type: Object,
      }
    },

    _reload: function() {
      this.$.status.generateRequest();
    },

  });
  </script>
</dom-module>