monitoring/res/imp/alert-sk.html

<link rel="import" href="/res/imp/polymer/polymer.html" />
<link rel="import" href="/res/imp/core-ajax/core-ajax.html" />
<link rel="import" href="/res/imp/core-icon-button/core-icon-button.html" />
<link rel="import" href="/res/imp/paper-button/paper-button.html" />
<link rel="import" href="/res/imp/paper-dialog/paper-dialog.html" />
<link rel="import" href="/res/imp/paper-dialog/paper-dialog-transition.html" />
<link rel="import" href="/res/imp/paper-input/paper-input.html" />
<link rel="import" href="/res/imp/paper-toast/paper-toast.html" />

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

<polymer-element name="alert-sk" attributes="alert">
  <template>
    <style>
    #wrapper {
      padding: 20px;
      margin: 10px;
      border-radius: 10px;
      background-color: #F5F5F5;
    }
    div.message {
      overflow-wrap: word-break;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    div.message[disabled] {
      color: #AAAAAA;
    }
    </style>
    <div id="wrapper" layout horizontal center>
      <div class="message" disabled?="{{!alert.active}}" flex>{{alert.message}}</div>
      <template if="{{alert.snoozed}}">
        <div class="message" disabled?="{{!alert.active}}">Snoozed until {{alert.snoozedUntil | parseDate}}</div>
      </template>
      <template if="{{editRights}}">
        <template if="{{!alert.snoozed}}">
          <core-ajax
              id="snooze"
              url="/alerts/{{alert.id}}/snooze"
              method="POST"
              contentType="application/json"
              on-core-response="{{response}}"
              on-core-error="{{error}}">
          </core-ajax>
          <paper-dialog id="snoozeDialog" heading="How long?" transition="paper-dialog-transition-center">
            <div>
              <paper-input id="snoozeDays"  type="number" value="0" label="Days" floatingLabel></paper-input>
              <paper-input id="snoozeHours" type="number" value="0" label="Hours" floatingLabel></paper-input>
              <paper-input id="snoozeMins"  type="number" value="0" label="Minutes" floatingLabel></paper-input>
              <paper-input id="snoozeSecs"  type="number" value="0" label="Seconds" floatingLabel></paper-input>
              <paper-button on-click="{{snoozeAlert}}" affirmative>Ok</paper-button>
            </div>
          </paper-dialog>
          <core-icon-button icon="alarm" on-click="{{snoozeDialog}}" disabled?="{{!alert.active}}"></core-icon-button>
        </template>
        <template if="{{alert.snoozed}}">
          <core-ajax
              id="unsnooze"
              url="/alerts/{{alert.id}}/unsnooze"
              method="POST"
              contentType="application/json"
              on-core-response="{{response}}"
              on-core-error="{{error}}">
          </core-ajax>
          <core-icon-button icon="alarm-off" on-click="{{unsnoozeAlert}}" disabled?="{{!alert.active}}"></core-icon-button>
        </template>
        <core-ajax
            id="dismiss"
            url="/alerts/{{alert.id}}/dismiss"
            method="POST"
            contentType="application/json"
            on-core-response="{{response}}"
            on-core-error="{{error}}">
        </core-ajax>
        <core-icon-button icon="highlight-remove" on-click="{{dismissAlert}}" disabled?="{{!alert.active}}"></core-icon-button>
      </template>
    </div>
    <paper-toast id="actionFailed" text="Action Failed"></paper-toast>
  </template>
  <script>
    Polymer({
      publish: {
        editRights: {
          value: false,
          reflect: true,
        },
      },
      ready: function() {
        var ele = this;
        sk.Login.then(function(status) {
          var email = status['Email'];
          var validEmail = "@google.com"
          if (email.indexOf(validEmail, email.length - validEmail.length) !== -1) {
            ele.editRights = true;
          }
        });
        // Linkify the messages.
        var messages = this.shadowRoot.querySelectorAll("div.message");
        for (var i = 0; i < messages.length; i++) {
          messages[i].innerHTML = messages[i].innerHTML.replace(/https?:\/\/[^ \t\n<]*/g, '<a href="$&">$&</a>');
        }
      },
      dismissAlert: function() {
        this.$.wrapper.querySelector("#dismiss").go();
      },
      snoozeAlert: function() {
        var until = new Date();
        until.setDate(until.getDate() + parseInt(this.$.wrapper.querySelector("#snoozeDays").value));
        until.setHours(until.getHours() + parseInt(this.$.wrapper.querySelector("#snoozeHours").value));
        until.setMinutes(until.getMinutes() + parseInt(this.$.wrapper.querySelector("#snoozeMins").value));
        until.setSeconds(until.getSeconds() + parseInt(this.$.wrapper.querySelector("#snoozeSecs").value));
        var req = this.$.wrapper.querySelector("#snooze");
        req.body = '{"until": ' + this.unParseDate(until) + '}'
        req.go();
      },
      snoozeDialog: function() {
        this.$.wrapper.querySelector("#snoozeDialog").toggle();
      },
      unsnoozeAlert: function() {
        this.$.wrapper.querySelector("#unsnooze").go();
      },
      response: function() {
        // Reload the page.
        window.location.href = window.location.href;
      },
      error: function(e) {
        var errorDiag = this.$.actionFailed;
        errorDiag.text = "Action failed: " + e.detail.response;
        errorDiag.show();
      },
      parseDate: function(v) {
        var d = new Date(v * 1000)
        return d.toLocaleDateString() + ", " + d.toLocaleTimeString();
      },
      unParseDate: function(d) {
        return Math.round(d.getTime() / 1000);
      },
    });
  </script>
</polymer-element>