perf/res/imp/triage-status.html

<!-- 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:
    start-triage - Contains the new triage status. The detail contains the
      alert, cluster_type, full_summary, and triage.

  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="stylesheet" href="/res/common/css/md.css">
<dom-module id="triage-status-sk">
  <style>
  </style>
  <template>
    <button title="[[triage.message]]" on-click="_start_triage">
      <tricon-sk value="[[triage.status]]"></tricon-sk>
    </button>
  </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: "",
          };
        },
      },
    },

    _start_triage: function() {
      var detail = {
        full_summary: this.full_summary,
        triage: this.triage,
        alert: this.alert,
        cluster_type: this.cluster_type,
        element: this,
      }
      this.dispatchEvent(new CustomEvent('start-triage', {detail: detail, bubbles: true}));
    },

  });
</script>