appengine/findit/ui/elements/flake_report/flake_report.html

<link rel="import" href="/bower_components/iron-pages/iron-pages.html">
<link rel="import" href="/bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="/bower_components/paper-tooltip/paper-tooltip.html">
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/ui/elements/flake_report/top_components.html">

<dom-module id="flake-report">
  <template>
    <style>
      table {
        border-collapse: collapse;
        border: 1px solid gray;
      }

      table th {
        padding: 5px;
        white-space: nowrap;
      }

      .main-header, #plain-tabs {
        color: #FFF;
        background-color: #4285F4;
      }

      table td {
        max-width: 0;
        padding: 2px;
        padding-right: 10px;
        height: 30px;
        vertical-align: top;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
      }

      tr:nth-child(odd) {
        background-color: #E8F0FE;
      }

      tr:nth-child(even) {
        background-color: #FFF;
      }

      #tabs-container {
        background-color: #1F78B4;
        width: 90vw;
        height: 60px;
      }

      #plain-tabs {
        font-size: 16px;
        width: calc(90vw - 3px);
      }

      .rank_by {
        background-color: #1F78B4;
        color: #ffff8d;
        font-size: 18px;
      }

      paper-tab:not(:first-child) {
        border-left: 2px solid white;
      }

      #total-report-table {
        border-top: 2px solid #1F78B4;
      }

    </style>
    <table width="98%">
      <tr>
        <th class="main-header" width="16%">Top 10 Components</th>
        <th class="main-header rank_by" id="rank_test" width="14%">
          <paper-button noink id="0" on-tap="selectRankBy">Flaky Tests
            <iron-icon id="0" icon="arrow-downward"></iron-icon></paper-button>
          <paper-tooltip position="top" offset="0" fit-to-visible-bounds="true">Count of distinct tests have appeared flaky.</paper-tooltip>
        </th>
        <th class="main-header" id="rank_bug" width="14%">
          <paper-button noink id="1" on-tap="selectRankBy">Flake Bugs
            <iron-icon id="1" icon="arrow-downward"></iron-icon></paper-button>
          <paper-tooltip position="top" offset="0" fit-to-visible-bounds="true">Count of bugs for flaky tests that occurred.</paper-tooltip>
        </th>
        <th class="main-header" id="rank_new_bug" width="14%">
          <paper-button noink id="2" on-tap="selectRankBy">New Bugs
            <iron-icon id="2" icon="arrow-downward"></iron-icon></paper-button>
          <paper-tooltip position="top" offset="0" fit-to-visible-bounds="true">Count of newly created bugs for flaky tests that occurred.</paper-tooltip>
        </th>
        <th class="main-header" id="rank_false_rejection" width="14%">
          <paper-button noink id="3" on-tap="selectRankBy">False Rejects
            <iron-icon id="3" icon="arrow-downward"></iron-icon></paper-button>
          <paper-tooltip position="top" offset="0" fit-to-visible-bounds="true">Count of falsely rejected CLs because of flaky tests.</paper-tooltip>
        </th>
        <th class="main-header" width="14%">Total Impacted CLs</th>
        <th class="main-header" width="14%">Total Flake Occurrences</th>
      </tr>
    </table>
    <iron-pages selected="{{selected}}">
      <template is="dom-repeat" items="[[top_components]]">
        <div>
          <top-components rank_by="{{item.rank_by}}" top_components="{{item.components}}"></top-components>
        </div>
      </template>
    </iron-pages>
    <table width="98%" id="total-report-table">
      <tr>
        <th width="16%"><a target="_blank" href="/p/chromium/flake-portal/report/component?total=1">Total</a></th>
        <td width="14%"><b>[[total_report.test_count]]</b></td>
        <td width="14%"><b>[[total_report.bug_count]]</b></td>
        <td width="14%"><b>[[total_report.new_bug_count]]</b></td>
        <td width="14%"><b>[[total_report.impacted_cl_counts.cq_false_rejection]]</b></td>
        <td width="14%"><b>[[total_report.impacted_cl_counts.total]]</b></td>
        <td width="14%"><b>[[total_report.occurrence_counts.total]]</b></td>
      </tr>
    </table>
  </template>
  <script>
    (function () {
      "use strict";

      Polymer({
        is: "flake-report",
        properties: {
          total_report: {
            type: Object
          },

          // A list of component report objects.
          top_components: {
            type: Array
          },

          selected: {
            type: Number,
            value: 0
          }
        },

        // Event handlers.
        selectRankBy: function (e) {
          this.selected = e.target.id;

          // Resets all headers.
          this.$.rank_test.classList.remove("rank_by");
          this.$.rank_bug.classList.remove("rank_by");
          this.$.rank_new_bug.classList.remove("rank_by");
          this.$.rank_false_rejection.classList.remove("rank_by");

          // Highlights the selected header.
          e.target.closest('th').classList.add("rank_by");
        },

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