monitoring/res/imp/alerts-sk.html

<link rel="import" href="/res/imp/polymer/polymer.html" />
<link rel="import" href="/res/imp/alert-sk.html" />
<link rel="import" href="/res/imp/core-ajax/core-ajax.html" />
<link rel="import" href="/res/imp/core-header-panel/core-header-panel.html" />
<link rel="import" href="/res/imp/core-icon-button/core-icon-button.html" />
<link rel="import" href="/res/imp/core-input/core-input.html" />

<script type="text/javascript" src="/res/js/common.js"></script>

<polymer-element name="alerts-sk" attributes="alerts">
  <template>
    <style>
    #loadstatus {
      font-size: 0.8em;
      padding: 15px;
    }
    </style>
    <div horizontal layout center id="loadstatus">
      <div>
        Reload (s):
        <core-input type="number" value="{{reload}}" preventInvalidInput style="width: 50px;"></core-input>
      </div>
      <div flex></div>
      <div>Last loaded at {{lastLoaded}}</div>
    </div>
    <template repeat="{{a in alerts}}">
      <template if="{{a.active}}">
        <alert-sk alert="{{a}}"></alert-sk>
      </template>
    </template>
    <div horizontal layout center>
      <div flex></div>
      <div>Inactive alerts: </div>
      <div>
        <template if="{{showinactive}}">
          <core-icon-button icon="visibility-off" on-click="{{toggleInactive}}"></core-icon-button>
        </template>
        <template if="{{!showinactive}}">
          <core-icon-button icon="visibility" on-click="{{toggleInactive}}"></core-icon-button>
        </template>
      </div>
    </div>
    <template repeat="{{a in alerts}}">
      <template if="{{!a.active && showinactive}}">
        <alert-sk alert="{{a}}"></alert-sk>
      </template>
    </template>
  </template>
  <script>
    Polymer({
      publish: {
        showinactive: {
          value: false,
          reflect: true,
        },
        reload: {
          value: 60,
          reflect: true,
        },
        timeout: {
          value: null,
          reflect: false,
        },
        lastLoaded: {
          value: "(not yet loaded)",
          reflect: false,
        },
      },
      created: function() {
        this.alerts = [];
        this.reloadAlerts();
      },
      reloadChanged: function() {
        this.resetTimeout();
      },
      resetTimeout: function() {
        if (this.timeout) {
          window.clearTimeout(this.timeout);
        }
        if (this.reload > 0) {
          var that = this;
          this.timeout = window.setTimeout(function() { that.reloadAlerts(); }, this.reload * 1000);
        }
      },
      reloadAlerts: function() {
        console.log("Loading alerts.");
        var that = this;
        sk.get("/json/alerts").then(JSON.parse).then(function(json) {
          that.alerts = json.alerts;
          that.lastLoaded = new Date().toLocaleTimeString();
          that.resetTimeout();
          var any_alerting = false;
          for (var i = 0; i < that.alerts.length; i++) {
            any_alerting = any_alerting || (that.alerts[i].active && !that.alerts[i].snoozed);
          }
          var tb = $$$('core-toolbar');
          if (any_alerting != tb.classList.contains('alerting')) {
            tb.classList.toggle('alerting');
          }
          console.log("Done loading alerts.");
        });
      },
      toggleInactive: function() {
        this.showinactive = !this.showinactive;
      },
    });
  </script>
</polymer-element>