<h1>Test Flakiness Overview</h1> <!-- {{report.title}} -->
<div class="pull-right duration-report-datepicker">
  <span xl-widget-date ng-model="startDate" options="{label:'Choose a date', format : 'dd/MM/yyyy'}"></span>
  <span xl-widget-date ng-model="endDate" options="{label:'Choose a date', format : 'dd/MM/yyyy'}"></span>
</div>
<breadcrumb></breadcrumb>

<section class="container-fluid">
  <div class="row intro-row">
    <div class="col-sm-12">The flakiness report identifies the tests with the most inconsistent results over time.
      Point to a test result to see detailed information about the test.</div>
  </div>
  <div class="row">
    <div class="col-sm-9">
      <table class="flakiness-overview" ng-show="report.tests.length">
        <colgroup>
          <col style="width: 60px;">
          <col style="width: 200px;">
          <!--<col style="width: auto;" ng-repeat="t in report.tests">-->
        </colgroup>
        <thead>
          <tr>
            <th>Flakiness</th>
            <th>Test Name</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <th colspan="2"><div class="flakiness-overview-more"><a href="" ng-click="loadMoreRecords()">&nbsp;&nbsp;Load more tests</a></div></th>
            <th ng-repeat="t in report.dates">{{t | date : 'dd MMM'}}<br/>{{t | date : 'HH:mm'}}</th>
          </tr>
        </tfoot>
        <tbody>
          <tr ng-repeat="test in report.tests">
            <td>{{test.flakiness}}%</td>
            <td>{{test.label}}</td>
            <td class="flakiness-overview-result"
                ng-repeat="result in test.results track by $index"
                ng-mouseenter="$parent.$parent.selected_test_result = result; $parent.$parent.selected_test_run = test; $parent.$parent.selected_test_date = report.dates[$index]"
                ng-mouseleave="$parent.$parent.selected_test_result = null; $parent.$parent.selected_test_run = null; $parent.$parent.selected_test_date = null"
                ng-class="{passed: result.result === true, failed: result.result === false, 'first-child': $first, 'last-child': $last}">
            </td>
          </tr>
        </tbody>
      </table>

      <table class="flakiness-overview" ng-hide="report.tests.length">
        <tr>
         <td>No flakiness information available. Execute a test specification or import existing test results.</td>
        </tr>
      </table>
    </div>
    <div class="col-sm-3 panel flakiness-overview-panel" affix
         ng-class="{failed: selected_test_result.result === false, passed: selected_test_result.result === true, affix: affixed}">
      <div class="panel-body">
        <div ng-show="!selected_test_result" style="text-align: center; margin-top: 15%;">
        Point to a result to see detailed information.
        </div>
        <div ng-show="selected_test_result">
          <b>Test Name:</b> {{selected_test_run.label}}<br/>
          <b>Suite:</b> {{selected_test_run.suiteName}}<br/>
          <b>Date:</b> {{selected_test_date | date : 'dd MMM yyyy HH:mm'}}<br/>
          <b>Status:</b> {{selected_test_result.result ? 'passed' : 'failed'}}<br/>
          <b>Duration:</b> {{selected_test_result.duration | duration }}<br/>
          <b ng-show="selected_test_result.firstError">Error Information:</b> {{selected_test_result.firstError}}
        </div>
      </div>
    </div>
  </div>
</section>