<commit_before><!--
  This in an HTML Import-able file that contains the definition
  of the following elements:

    <alert-widget-sk>

  This element occasionally polls the alert server, displaying the number of alerts and exposing
  that number through the .

  To use this file import it:

    <link href="/res/imp/alert-widget-sk.html" rel="import" />

  Usage:

    <alert-widget-sk></alert-widget-sk>

  Properties:
    reload: Number, How often (in seconds) to reload the alert status.
    repo: String, the name of the repo "infra", "skia", etc. Used to filter alerts.

    active_alerts: Number, The number of active alerts.
-->

<link rel="import" href="/res/imp/bower_components/iron-dropdown/iron-dropdown.html">
<link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/res/imp/bower_components/paper-icon-button/paper-icon-button.html">

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

<dom-module id="alert-widget-sk">
  <template>
    <style>
      #alert {
        position: relative;
        padding: 0px 2px;
      }

      paper-icon-button {
        color: #FFFFFF;
        width: 46px;
        height: 46px;
        padding: 0px;
      }

      /* Icons can't have text on them, so we super-impose the text on top of it using CSS.*/
      #numAlerts {
        color: var(--status-sk-text-color);
        position: absolute;
        left: 21px;
        top: 2px;
        text-align: center;
        margin: 0px;
        cursor:pointer;
      }

      @keyframes pulse {
        0%   {transform: scale(1.0);}
        50%  {transform: scale(0.8);}
        100%  {transform: scale(1.0);}
      }

      .alerting > paper-icon-button {
        background-color: var(--status-sk-icon-color);
        border-radius: 23px;
        /* Animation has been disabled temporarily as it appears to cause a rendering bug in Chrome
        TODO(kjlubick) Find replicating case and file bug. */
        /*animation: pulse 0.6s infinite linear;*/
      }

      #alertlist {
        padding :10px;
      }

      .dropdown-content {
        color: #000000;
        background-color: #F5F5F5;
        border-radius: 10px;
        border: 2px solid #000000;
      }

      .dropdown-content div {
        min-width: 300px;
        min-height: 70px;
        margin-top: 30px;
      }

      .no-underline {
        text-decoration: none;
      }

    </style>

    <span id="alert" class$="[[_alertingClass(active_alerts)]]">
      <paper-icon-button
          id="notifications"
          icon="social:notifications-none"
          on-tap="toggle">
      </paper-icon-button>
      <span id="numAlerts" on-tap="toggle">[[active_alerts]]</span>

      <iron-dropdown id="alertlist" vertical-align="top" horizontal-align="right">
        <div class="dropdown-content">
          <a class="no-underline" target="_blank" href$="{{_alertsURL(repo)}}">
            <template is="dom-repeat" items="[[_allAlerts]]" as="alert">
                <alert-sk alert="{{alert}}" compact hidden$="{{_snoozed(alert)}}"></alert-sk>
            </template>
          </a>
          <div hidden$="{{_has(active_alerts)}}">
            No alerts are active.
          </div>
        </div>
      </iron-dropdown>
    </span>

  </template>
  <script>
  Polymer({
    is:"alert-widget-sk",

    properties: {
      // input
      reload: {
        type: Number,
        value: 60,
      },
      repo: {
        type: String,
      },

      // output
      active_alerts: {
        type: Number,
        computed: "_getUnsnoozedAlerts(_allAlerts)",
        notify: true,
      },

      // private
      _allAlerts: {
        type: Array,
      }
    },

    ready: function() {
      this._reload();
    },

    _alertingClass: function(alerts) {
      if (alerts || alerts > 0) {
        return "alerting";
      }
      return "";
    },

    _getUnsnoozedAlerts: function(alerts) {
      if (!alerts) {
        return 0;
      }
      var active_alerts = 0;
      for (var i = 0; i < alerts.length; i++) {
        if (!this._snoozed(alerts[i])) {
          active_alerts++;
        }
      }
      return active_alerts;
    },

    _has: function(active_alerts) {
      return active_alerts > 0;
    },

    _alertsURL: function(repo) {
      if (repo === "infra") {
        return "https://alerts.skia.org/infra";
      }
      return "https://alerts.skia.org";
    },

    _reload: function() {
      var url = "https://alerts.skia.org/json/alerts/";
      if (this.repo === "infra") {
        url += "?category=infra";
      }
        else {
        url += "?excludeCategory=infra";
      }
      sk.get(url).then(JSON.parse).then(function(alerts) {
        this.set("_allAlerts", alerts);
        this.async(this._reload, this.reload*1000);
      }.bind(this)).catch(function(err) {
        sk.errorMessage(err);
        this.async(this._reload, this.reload*1000);
      }.bind(this));
    },

    _statusIcon:function(status) {
      if (!status || !status.status || status.status == "stopped") {
        return "icons:error";
      }
      if (status.status == "in progress") {
        return "icons:autorenew";
      }
      return "icons:check-circle";<commit_msg>Status: First of two CLs. Disabled the call to alerts.skia.org to avoid error messages.<commit_after><!--
  This in an HTML Import-able file that contains the definition
  of the following elements:

    <alert-widget-sk>

  This element occasionally polls the alert server, displaying the number of alerts and exposing
  that number through the .

  To use this file import it:

    <link href="/res/imp/alert-widget-sk.html" rel="import" />

  Usage:

    <alert-widget-sk></alert-widget-sk>

  Properties:
    reload: Number, How often (in seconds) to reload the alert status.
    repo: String, the name of the repo "infra", "skia", etc. Used to filter alerts.

    active_alerts: Number, The number of active alerts.
-->

<link rel="import" href="/res/imp/bower_components/iron-dropdown/iron-dropdown.html">
<link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/res/imp/bower_components/paper-icon-button/paper-icon-button.html">

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

<dom-module id="alert-widget-sk">
  <template>
    <style>
      #alert {
        position: relative;
        padding: 0px 2px;
      }

      paper-icon-button {
        color: #FFFFFF;
        width: 46px;
        height: 46px;
        padding: 0px;
      }

      /* Icons can't have text on them, so we super-impose the text on top of it using CSS.*/
      #numAlerts {
        color: var(--status-sk-text-color);
        position: absolute;
        left: 21px;
        top: 2px;
        text-align: center;
        margin: 0px;
        cursor:pointer;
      }

      @keyframes pulse {
        0%   {transform: scale(1.0);}
        50%  {transform: scale(0.8);}
        100%  {transform: scale(1.0);}
      }

      .alerting > paper-icon-button {
        background-color: var(--status-sk-icon-color);
        border-radius: 23px;
        /* Animation has been disabled temporarily as it appears to cause a rendering bug in Chrome
        TODO(kjlubick) Find replicating case and file bug. */
        /*animation: pulse 0.6s infinite linear;*/
      }

      #alertlist {
        padding :10px;
      }

      .dropdown-content {
        color: #000000;
        background-color: #F5F5F5;
        border-radius: 10px;
        border: 2px solid #000000;
      }

      .dropdown-content div {
        min-width: 300px;
        min-height: 70px;
        margin-top: 30px;
      }

      .no-underline {
        text-decoration: none;
      }

    </style>

    <span id="alert" class$="[[_alertingClass(active_alerts)]]">
      <paper-icon-button
          id="notifications"
          icon="social:notifications-none"
          on-tap="toggle">
      </paper-icon-button>
      <span id="numAlerts" on-tap="toggle">[[active_alerts]]</span>

      <iron-dropdown id="alertlist" vertical-align="top" horizontal-align="right">
        <div class="dropdown-content">
          <a class="no-underline" target="_blank" href$="{{_alertsURL(repo)}}">
            <template is="dom-repeat" items="[[_allAlerts]]" as="alert">
                <alert-sk alert="{{alert}}" compact hidden$="{{_snoozed(alert)}}"></alert-sk>
            </template>
          </a>
          <div hidden$="{{_has(active_alerts)}}">
            No alerts are active.
          </div>
        </div>
      </iron-dropdown>
    </span>

  </template>
  <script>
  Polymer({
    is:"alert-widget-sk",

    properties: {
      // input
      reload: {
        type: Number,
        value: 60,
      },
      repo: {
        type: String,
      },

      // output
      active_alerts: {
        type: Number,
        computed: "_getUnsnoozedAlerts(_allAlerts)",
        notify: true,
      },

      // private
      _allAlerts: {
        type: Array,
      }
    },

    ready: function() {
      this._reload();
    },

    _alertingClass: function(alerts) {
      if (alerts || alerts > 0) {
        return "alerting";
      }
      return "";
    },

    _getUnsnoozedAlerts: function(alerts) {
      if (!alerts) {
        return 0;
      }
      var active_alerts = 0;
      for (var i = 0; i < alerts.length; i++) {
        if (!this._snoozed(alerts[i])) {
          active_alerts++;
        }
      }
      return active_alerts;
    },

    _has: function(active_alerts) {
      return active_alerts > 0;
    },

    _alertsURL: function(repo) {
      if (repo === "infra") {
        return "https://alerts.skia.org/infra";
      }
      return "https://alerts.skia.org";
    },

    _reload: function() {
      var url = "https://alerts.skia.org/json/alerts/";
      if (this.repo === "infra") {
        url += "?category=infra";
      }
        else {
        url += "?excludeCategory=infra";
      }
      /*
      TODO(jcgregorio) Re-enable with calls to Prometheus.
      sk.get(url).then(JSON.parse).then(function(alerts) {
        this.set("_allAlerts", alerts);
        this.async(this._reload, this.reload*1000);
      }.bind(this)).catch(function(err) {
        sk.errorMessage(err);
        this.async(this._reload, this.reload*1000);
      }.bind(this));
      */
    },

    _statusIcon:function(status) {
      if (!status || !status.status || status.status == "stopped") {
        return "icons:error";
      }
      if (status.status == "in progress") {
        return "icons:autorenew";
      }
      return "icons:check-circle";
{'fraction_non_alphanumeric': 0.1466990381921748, 'fraction_numerical': 0.01288635726958633, 'mean_word_length': 2.07052752293578, 'pattern_counts': {'":': 0, '<': 73, '<?xml version=': 0, '>': 77, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1669769', 'n_tokens_mistral': 3579, 'n_tokens_neox': 3352, 'n_words': 750}