<!-- The <alert-config-sk> custom element declaration.

  Control that allows editing an alerts.Config.

  Attributes:
    config - A serialized alerts.Config.

    paramset - The paramset to build a query from.

  Events:
    None.

  Methods:
    None.
-->
<link rel="import" href="/res/imp/bower_components/iron-selector/iron-selector.html">
<link rel="import" href="/res/imp/bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="/res/imp/bower_components/paper-input/paper-input.html">
<link rel="import" href="/res/imp/bower_components/paper-spinner/paper-spinner.html">

<link rel="import" href="/res/common/imp/query2-chooser.html" />
<link rel="stylesheet" href="/res/common/css/md.css">

<link rel="import" href="algo-select.html" />

<dom-module id="alert-config-sk">
  <style is="custom-style">
    h3, h4 {
      margin: 1em 0 0.2em 0;
    }

    algo-select-sk {
      display: block;
    }

    paper-input,
    paper-checkbox,
    iron-selector,
    button,
    algo-select-sk {
      margin-left: 3em;
    }

    paper-spinner {
      display: inline-block;
    }

    h4 {
      margin-left: 2em;
    }

    .iron-selected {
      background: #eee;
    }

    iron-selector div {
      width: 10em;
      margin: 0.3em 1em;
      padding: 0.2em;
    }

    paper-checkbox {
      --paper-checkbox-checked-color: #1f78b4;
      --paper-checkbox-checked-ink-color: #1f78b4;
    }
  </style>
  <template>
    <h3>Which traces should be monitored</h3>
    <query2-chooser-sk id=querychooser paramset="{{paramset}}" current_query="{{config.query}}"></query2-chooser-sk>
    <h3>What triggers an alert</h3>
    <h4>Algorithm</h4>
    <algo-select-sk algo="{{config.algo}}"></algo-select-sk>
    <h4>K</h4>
    <paper-input type=number min=0 value="{{config.k}}" label="The number of clusters. Only used in kmeans. 0 = use a server chosen value."></paper-input>
    <h4>Radius</h4>
    <paper-input type=number min=0 value="{{config.radius}}" label="Number of commits on either side to consider. 0 = use a server chosen value."></paper-input>
    <h4>Step Direction</h4>
    <paper-checkbox checked="{{config.step_up_only}}">Only step ups should trigger an alert.</paper-checkbox>
    <h4>Threshhold</h4>
    <paper-input type=number min=1 max=500  value="{{config.interesting}}" label="Interesting Threshhold for clusters to be interesting."></paper-input>
    <h3>Where are alerts sent</h3>
    <paper-input value="{{config.alert}}"                                  label="Alert Destination: Email address."></paper-input>
    <button on-tap=_testAlert>Test</button>
    <paper-spinner id=alertSpinner></paper-spinner>
    <h3>Where are bugs filed</h3>
    <paper-input value="{{config.bug_uri_template}}"                       label="Bug URI Template: {cluster_url}, {commit_url}, and {message}."></paper-input>
    <button on-tap=_testBugTemplate>Test</button>
    <paper-spinner id=bugSpinner></paper-spinner>
    <h3>Who owns this alert</h3>
    <paper-input id=owner value="{{config.owner}}"                         label="Email address of owner."></paper-input>
    <h3>Status</h3>
    <iron-selector attr-for-selected="value" selected="{{config.state}}" fallback-selection=ACTIVE>
      <div value=ACTIVE title="Clusters that match this will generate alerts.">Active</div>
      <div value=DELETED title="Currently inactive.">Deleted</div>
    </iron-selector>
  </template>
</dom-module>

<script>
  Polymer({
    is: "alert-config-sk",

    properties: {
      // config is a serialized alerts.Config.
      config: {
        type: Object,
        value: function() { return {}; },
        reflectToAttribute: false,
        notify: true,
        observer: '_configChange',
      },
      paramset: {
        type: Object,
        value: function() { return {}; },
        reflectToAttribute: false,
      },
    },

    ready: function() {
      this.$.querychooser.query.setKeyOrder(sk.perf.key_order);
    },

    _testBugTemplate: function() {
      this.$.bugSpinner.active = true;
      var body = {
        bug_uri_template: this.config.bug_uri_template,
      };
      sk.post("/_/alert/bug/try", JSON.stringify(body), "application/json").then(JSON.parse).then(function(json) {
        if (json.url) {
          // Open the bug reporting page in a new window.
          window.open(json.url, '_blank');
        }
        this.$.bugSpinner.active = false;
      }.bind(this)).catch(function(msg) {
        this.$.bugSpinner.active = false;
        sk.errorMessage(msg);
      }.bind(this));
    },

    _testAlert: function() {
      this.$.alertSpinner.active = true;
      var body = {
        alert: this.config.alert,
      };
      sk.post("/_/alert/notify/try", JSON.stringify(body), "application/json").then(function() {
        this.$.alertSpinner.active = false;
      }.bind(this)).catch(function(msg) {
        sk.errorMessage(msg);
        this.$.alertSpinner.active = false;
      }.bind(this));
    },

    _configChange: function() {
      if (this.config.interesting == 0) {
        this.set('config.interesting', sk.perf.interesting);
      }
      if (this.config.radius == 0) {
        this.set('config.radius', sk.perf.radius);
      }
    },

  });
</script>