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

  Displays a button that shows the triage status of a cluster.  When the
  button is pushed a dialog opens that allows the user to see the cluster
  details and to change the triage status.

  Attributes:
    alert - The alerts.Config this cluster is associated with.

    cluster_type - The type of cluster, either "low" or "high".

    full_summary - A serialized:

       {
         summary: cluster2.ClusterSummary,
         frame: dataframe.FrameResponse,
       }

    triage - The triage status of the cluster. Something of the form:

       {
         status: "untriaged",
         message: "This is a regression.",
       }

  Events:
    triaged - Contains the new triage status. The detail contains the cid and triage
      status, for example:

      {
        cid: {
          source: "master",
          offset: 25004,
        },
        triage: {
          status: "negative",
          message: "This is a regression in ...",
        },
        alert: {
          id: 2,
          query: "source_type=skp&sub_result=min_ms"
        },
      }

  Methods:
    None.
-->
<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/imp/bower_components/paper-dialog/paper-dialog.html">

<link rel="import" href="/res/common/imp/tricon-sk.html">
<link rel="import" href="/res/imp/cluster2.html">
<link rel="stylesheet" href="/res/common/css/md.css">
<dom-module id="triage-status-sk">
  <style>
    cluster-summary2-sk {
      display: block;
      margin: 2em;
    }

    paper-dialog {
      overflow: auto;
    }
  </style>
  <template>
    <button title="[[triage.message]]" on-click="_show">
      <tricon-sk value="[[triage.status]]"></tricon-sk>
    </button>
    <paper-dialog id=dialog>
      <cluster-summary2-sk on-triaged=_onTriaged id=summary full_summary="[[full_summary]]" triage="[[triage]]"></cluster-summary2-sk>
      <div class=buttons>
        <button on-click=_close>Close</button>
      </div>
    </paper-dialog>
  </template>
</dom-module>

<script>
  Polymer({
    is: "triage-status-sk",

    properties: {
      cluster_type: {
        type: String,
        value: "",
      },
      full_summary: {
        type: Object,
        value: function() { return {}; },
      },
      alert: {
        type: Object,
        value: function() { return {}; },
      },
      triage: {
        type: Object,
        value: function() {
          return {
            status: "",
            message: "",
          };
        },
      },
    },

    _onTriaged: function(e) {
      e.stopPropagation();
      this.triage = e.detail.triage;
      this.notifyPath("triage.status");
      this.notifyPath("triage.message");
      e.detail.alert= this.alert;
      e.detail.cluster_type = this.cluster_type;
      this.dispatchEvent(new CustomEvent('triaged', {detail: e.detail, bubbles: true}));
      this.$.dialog.close();
    },

    _show: function() {
      this.$.dialog.open();
    },

    _close: function() {
      this.$.dialog.close();
    },

  });
</script>