fuzzer/res/imp/fuzzer-summary-sk.html

<!--
  The common.js file must be included before this file.

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

    <fuzzer-summary-sk>
    <fuzzer-tile>

  This element will request once from /json/fuzz-summary for the fuzz contents to display, which will be an array of FileDetails.
  See fuzzer-collapse-file-sk.html for more information.

  To use this file import it:

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

  Usage:

    <fuzzer-summary-sk></fuzzer-summary-sk>

  Properties:
    None.

  Methods:
    None.

  Events:
    None.
-->
<link rel="import" href="/res/imp/bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">

<dom-module id="fuzzer-summary-sk">
  <template>
    <style include="iron-flex iron-flex-alignment">
      .summaryBox {
        max-width: inherit;
      }
    </style>
    <iron-ajax auto url="/json/fuzz-summary" handle-as="json" last-response="{{fuzzers}}"></iron-ajax>
    <h2>Stable Fuzzers</h2>
    <div class="summaryBox" class="horizontal layout wrap around-justified">
      <template is="dom-repeat" items="[[stable_fuzzers]]" as="fuzzer">
        <fuzzer-tile fuzzer=[[fuzzer]]></fuzzer-tile>
      </template>
    </div>
    <h2>Experimental Fuzzers</h2>
    <div class="summaryBox" class="horizontal layout wrap around-justified">
      <template is="dom-repeat" items="[[experimental_fuzzers]]" as="fuzzer">
        <fuzzer-tile fuzzer=[[fuzzer]]></fuzzer-tile>
      </template>
    </div>
  </template>
  <script>
  Polymer({
    is: 'fuzzer-summary-sk',

    properties: {
      fuzzers: {
        type: Array,
        value: function() {
          return [];
        }
      },

      experimental_fuzzers: {
        type: Array,
        computed: "experimental(fuzzers)",
      },
      stable_fuzzers: {
        type: Array,
        computed: "stable(fuzzers)",
      },
    },

    experimental: function(fuzzers) {
      fuzzers = fuzzers || [];
      return fuzzers.filter(function(f){
        return f.status === "experimental";
      });
    },

    stable: function(fuzzers) {
      fuzzers = fuzzers || [];
      return fuzzers.filter(function(f){
        return f.status === "stable";
      });
    },

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


<dom-module id="fuzzer-tile">
  <template>
    <style>
      :host {
        margin: 5px;
      }
      /* This aligns the 4 counts in a nice grid structure, with the fuzz type as a header. */
      .countBox {
        border: 1px solid black;
        padding: 5px;
        border-radius: 8px;
        display: table-cell;
      }
      .countBox.alert {
        border: 3px solid red;
      }
      a.alert {
        font-weight: bold;
        color: red;
      }
      .center {
        text-align: center;
      }

      .header {
        text-align: center;
        padding: 1px;
        font-size: 1.3em;
      }
      .subheader {
        text-align: center;
        padding: 1px;
        font-size: 1.0em;
      }
    </style>
    <span class$="countBox [[_alertClass(fuzzer.highPriorityCount)]]">
      <div class="header">
        <a href$="[[_allFuzzesLink(fuzzer)]]">[[fuzzer.categoryDisplay]]</a>
      </div>
      <div class="subheader">Groomer: [[fuzzer.groomer]]</div>
      <table>
        <tr>
          <td class="center" colspan=2>
            <a class$="[[_alertClass(fuzzer.highPriorityCount)]]" href$="[[_hiFuzzesLink(fuzzer)]]">High Priority Fuzzes</a>:
            [[fuzzer.highPriorityCount]]
          </td>
        </tr>
        <tr>
          <td>
            <a href$="[[_medFuzzesLink(fuzzer)]]">Medium Priority</a>:
            [[fuzzer.mediumPriorityCount]]
          </td>
          <td>
            <a href$="[[_lowFuzzesLink(fuzzer)]]">Low Priority</a>:
            [[fuzzer.lowPriorityCount]]
          </td>
        </tr>
      </table>
    </span>
  </template>
  <script>
(function(){
    var HIGH_PRIORITY_FLAGS = [
      "ASAN_global-buffer-overflow",
      "ASAN_heap-buffer-overflow",
      "ASAN_stack-buffer-overflow",
      "ASAN_heap-use-after-free",
    ]

    var MEDIUM_PRIORITY_FLAGS = [
      "ClangCrashed",
      "ASANCrashed",
      "Other",
    ]

    Polymer({
      is: 'fuzzer-tile',
      properties: {
        fuzzer: {
          type: Object,
        },
      },
      _alertClass: function(highPriorityCount) {
        if (highPriorityCount) {
          return "alert";
        }
        return "";
      },
      _allFuzzesLink: function(fuzzer){
        return `/category/${fuzzer.category}?`;
      },
      _hiFuzzesLink: function(fuzzer){
        let link = this._allFuzzesLink(fuzzer);
        for (let f of HIGH_PRIORITY_FLAGS) {
          link += `include=${f}&`
        }
        return link;
      },
      _medFuzzesLink: function(fuzzer){
        let link = this._allFuzzesLink(fuzzer);
        for (let f of MEDIUM_PRIORITY_FLAGS) {
          link += `include=${f}&`
        }
        return link;
      },
      _lowFuzzesLink: function(fuzzer){
        let link = this._allFuzzesLink(fuzzer);
        for (let f of HIGH_PRIORITY_FLAGS) {
          link += `exclude=${f}&`
        }
        for (let f of MEDIUM_PRIORITY_FLAGS) {
          link += `exclude=${f}&`
        }
        return link;
      },
    });
})()
  </script>
</dom-module>