<!-- The <triage-page-sk> custom element declaration.

  Allows triaging clusters.

  Attributes:
    None.

  Events:
    None.

  Methods:
    None.

-->
<link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="/res/imp/bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="/res/imp/bower_components/iron-selector/iron-selector.html">

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

<link rel="import" href="/res/imp/triage-status.html" />
<link rel="import" href="/res/imp/commit-detail.html" />

<dom-module id="triage-page-sk">
  <style include="iron-flex iron-flex-alignment iron-positioning">
    details-sk {
      margin-top: 0.5em;
    }

    day-range-sk {
      display: block;
    }

    .fixed {
      font-family: 'Roboto Mono', monospace;
    }

    .cluster {
      text-align: center;
    }

    triage-status-sk {
      text-align: left;
    }

    tr:nth-child(even) {
      background-color: #eee;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
    }

    #table.hidden {
      display: none;
    }

    .dot {
      text-decoration: none;
      color: black;
    }

    .iron-selected {
      background: #eee;
    }

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

    summary-sk h2 {
      display: inline;
    }

    details-sk {
      display: block;
      margin: 1em 0.4em;
    }

    details-sk table {
      margin: 1em;
    }

    th {
      padding: 0 1em;
    }
  </style>
  <template>
    <details-sk>
      <summary-sk>
        <h2>Status</h2>
      </summary-sk>
      <div id=status>
        <p>The current work on detecing regressions:</p>
        <table>
          <tr>
            <th>Alert</th>
            <td><a href="/a/?[[_currentState.alert.id]]"><query-summary-sk selection="[[_currentState.alert.query]]"></query-summary-sk></a></td>
          </tr>
          <tr>
            <th>Commit</th>
            <td><commit-detail-sk cid="[[_currentState.commit]]"></commit-detail-sk></td>
          </tr>
        </table>
      </div>
    </details-sk>
    <details-sk open>
      <summary-sk>
        <h2 id="filter">Filter</h2>
      </summary-sk>
      <iron-selector
        attr-for-selected="value"
        selected="{{state.subset}}"
        fallback-selection="untriaged"
        on-selected-item-changed="_updateRange"
        >
        <div value=all title="Show results for all commits in the time range.">All</div>
        <div value=flagged title="Show only the commits with regressions in the given time range regardless of triage status.">Regressions</div>
        <div value=untriaged title="Show all the untriaged regressions regardless of the time range.">Untriaged</div>
      </iron-selector>
    </details-sk>
    <details-sk>
      <summary-sk>
        <h2 id="range">Range</h2>
      </summary-sk>
      <day-range-sk id=range on-day-range-change="_rangeChange"></day-range-sk>
    </details-sk>
    <paper-spinner id=spinner></paper-spinner>
    <table on-open-keys=_openKeys on-triaged=_triaged id=table>
      <tr>
        <th>Commit</th>
        <template is="dom-repeat" items="[[_reg.header]]">
          <th colspan=2><a href="/a/?[[item.id]]"><query-summary-sk selection="[[item.query]]"></query-summary-sk></a></th>
        </template>
      </tr>
      <template is="dom-if" if="[[_not(_stepUpOnly)]]">
        <tr>
          <th></th>
          <template is="dom-repeat" items="[[_reg.header]]">
            <th>Low</th>
            <th>High</th>
          </template>
        </tr>
      </template>
      <template is="dom-repeat" items="[[_reg.table]]" index-as="tableIndex">
        <tr>
          <td class=fixed>
            <commit-detail-sk cid="[[item.cid]]"></commit-detail-sk>
          </td>
          <template is="dom-repeat" items="[[item.columns]]">
            <template is="dom-if" if="[[_not(_stepUpOnly)]]">
              <td class=cluster>
                <template is="dom-if" if="[[item.low]]">
                  <triage-status-sk alert="[[_alertAt(index)]]" cluster_type=low full_summary="[[_full_summary(item.frame, item.low)]]" triage="[[item.low_status]]"></triage-status-sk>
                </template>
                <template is="dom-if" if="[[_not(item.low)]]">
                  <a class=dot title="No clusters found." href="/g/c/[[_hashFrom(tableIndex)]]?query=[[_encQueryFrom(index)]]">[[_display(tableIndex,state.end)]]</a>
                </template>
              </td>
            </template>
            <template is="dom-if" if="[[_stepUpOnly]]">
              <td></td><!-- Dummy column for colspan. -->
            </template>
            <td class=cluster>
              <template is="dom-if" if="[[item.high]]">
                <triage-status-sk alert="[[_alertAt(index)]]" cluster_type=high full_summary="[[_full_summary(item.frame, item.high)]]" triage="[[item.high_status]]"></triage-status-sk>
              </template>
              <template is="dom-if" if="[[_not(item.high)]]">
                <a class=dot title="No clusters found." href="/g/c/[[_hashFrom(tableIndex)]]?query=[[_encQueryFrom(index)]]">[[_display(tableIndex,state.end)]]</a>
              </template>
            </td>
          </template>
        </tr>
      </template>
    </table>
  </template>
</dom-module>

<script>
  (function () {
    var now = Math.floor(Date.now()/1000);

    Polymer({
      is: "triage-page-sk",

      properties: {
        state: {
          type: Object,
          value: function() {
            return {
              begin: now - 4*24*60*60,
              end: now,
              subset: "untriaged",
            };
          },
        },
        _reg: {
          type: Object,
          value: function() { return {}; },
        },
        _triageInProgress: {
          type: Boolean,
          value: false,
        },
        _stepUpOnly: {
          type: Boolean,
          value: sk.perf.step_up_only,
        },
        _currentState: {
          type: Object,
          value: function() { return {}; },
        }
      },

      ready: function() {
        sk.stateReflector(this, this._updateRange.bind(this));
        this._poll();
      },

      _poll: function() {
        sk.get('/_/reg/current').then(JSON.parse).then(function (json) {
          this.set('_currentState', json);
          window.setTimeout(this._poll.bind(this), 1000);
        }.bind(this)).catch(function() {
          window.setTimeout(this._poll.bind(this), 1000);
        }.bind(this));
      },

      _openKeys: function(e) {
        var state = {
          keys: e.detail.keys,
        };
        sk.post('/_/keys/', JSON.stringify(state)).then(JSON.parse).then(function (json) {
          var query = {
            keys:       json.id,
            begin:      e.detail.begin,
            end:        e.detail.end,
            xbaroffset: e.detail.xbar.offset
          };
          window.open('/e/?' + sk.query.fromObject(query), '_blank');
        }.bind(this));
      },

      _rangeChange: function(e) {
        this.set('state.begin', e.detail.begin);
        this.set('state.end', e.detail.end);
        this._updateRange();
      },

      _updateRange: function() {
        this.set('_reg',  {});
        this.$.range.begin = this.state.begin;
        this.$.range.end = this.state.end;
        var body = {
          begin: this.state.begin,
          end: this.state.end,
          subset: this.state.subset,
        };
        this.$.spinner.active = true;
        this.$.table.classList.toggle("hidden", true);
        sk.post("/_/reg/", JSON.stringify(body), "application/json").then(JSON.parse).then(function(json) {
          this.$.spinner.active = false;
          this.$.table.classList.toggle("hidden", false);
          this.set('_reg', json);
        }.bind(this)).catch(function(msg) {
          if (msg) {
            sk.errorMessage(msg, 10000);
          }
          this.$.spinner.active = false;
        }.bind(this));
      },

      _triaged: function(e) {
        this.$.spinner.active = true;
        if (this._triageInProgress === true) {
          sk.errorMessage("A triage request is in progress.");
          return
        }
        this._triageInProgress = true;
        sk.post("/_/triage/", JSON.stringify(e.detail), "application/json").then(JSON.parse).then(function(json) {
          this.$.spinner.active = false;
          this._triageInProgress = false;
          if (json.bug) {
            // Open the bug reporting page in a new window.
            window.open(json.bug, '_blank');
          }
        }.bind(this)).catch(function(msg) {
          if (msg) {
            sk.errorMessage(msg, 10000);
          }
          this.$.spinner.active = false;
          this._triageInProgress = false;
        }.bind(this));
      },

      _encQueryFrom: function(index) {
        return encodeURIComponent(this._reg.header[index].query);
      },

      _hashFrom: function(index) {
        return this._reg.table[index].cid.hash;
      },

      _full_summary: function(frame, summary) {
        return {
          frame: frame,
          summary: summary,
        }
      },

      _alertAt: function(index) {
        return this._reg.header[index];
      },

      _not: function(x) {
        return !x;
      },

      _display: function(index) {
        if (this.state.end == now && index < sk.perf.radius && this.state.subset == "all") {
          return "";
        } else {
          return "∅";
        }
      },

    });
  })();
</script>