status/res/imp/fuzzer-widget-sk.html

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

    <fuzzer-widget-sk>

  This element occasionally polls the fuzzer, displaying the number of bad fuzzes.

  To use this file import it:

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

  Usage:

    <fuzzer-widget-sk reload="60"></fuzzer-widget-sk>

  Properties:
    // input
    reload: Number, How often (in seconds) to reload the fuzzer status.
-->

<link rel="import" href="/res/common/imp/styles-sk.html">
<link rel="import" href="/res/common/imp/timer-sk.html">


<dom-module id="fuzzer-widget-sk">
  <template>
    <style include="styles-sk">
      a {
        color: var(--status-sk-main-text-color);
        text-decoration: none;
        text-transform: none;
      }
      a:hover {
        text-decoration: underline;
      }
      .table {
        width: 100%;
      }
      .td {
        padding: 5px;
      }
      .value {
        background-color: var(--status-sk-icon-color);
        border-radius: 3px;
        padding: 4px;
        margin: 5px;
      }
      .report {
        font-size: 0.85em;
      }
    </style>

    <timer-sk period="[[reload]]" on-trigger="_reload"></timer-sk>

    <template is="dom-if" if="[[_results.wasSucessful]]">
      <div class="table">
        <a href="https://fuzzer.skia.org" target="_blank" class="tr">
          <div class="td">High Priority</div>
          <div class="td number"><span class="value">[[_results.high]]</span></div>
        </a>
        <a href="https://fuzzer.skia.org" target="_blank" class="tr">
          <div class="td">Medium Priority</div>
          <div class="td number"><span class="value">[[_results.medium]]</span></div>
        </a>
        <a href$="[[_makeReportURL()]]" target="_blank" rel="noopener" class="tr report">
          Coverage Report
        </a>
      </div>
    </template>
    <template is="dom-if" if="[[!_results.wasSucessful]]">
      <div>Login to view fuzz counts</div>
    </template>

  </template>
  <script>
  Polymer({
    is:'fuzzer-widget-sk',

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

      _results: {
        type: Object,
      }
    },

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

    _makeReportURL: function() {
      // Get the analysis from yesterday
      var yesterday = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
      // add 1 because in JS months are 0 indexed.
      var month = (yesterday.getMonth() + 1);
      if (month <= 9) {
        month = "0" + month;
      }
      var day = yesterday.getDate();
      if (day <= 9) {
        day = "0" + day;
      }
      var datestr = "" + yesterday.getFullYear() + month + day;
      return "https://storage.googleapis.com/oss-fuzz-coverage/skia/reports/" + datestr +
             "/linux/src/skia/report.html";
    },

    _reload: function() {
      console.log("Loading Fuzzer data...");
      sk.get("https://fuzzer.skia.org/json/fuzz-summary", true)
        .then(JSON.parse)
        .then(function(arr){
          let high = 0;
          let medium = 0;
          for (let f of arr) {
            if (f.status === "stable") {
              high += f.highPriorityCount;
              medium += f.mediumPriorityCount;
            } else {
              high += f.highPriorityCount;
            }
          }
          this._results = {
            wasSucessful: true,
            high: high,
            medium: medium,
          };
        }.bind(this))
        .catch(function(){
          this._results = {wasSucessful: false};
        }.bind(this));
    },

  });
  </script>
</dom-module>