Google Git
Sign in
skia/buildbot/4284c012b0d700f4c650c00d1ae1a9fd20e5a63c/./golden/app/partials/triage-details-view.html
blob: 2c2fb67e16a1872ba5143d5cfe723c7741311d5b [file]
<div class="container-fluid ng-cloak" ng-cloak>
<h2>{{testName}}</h2>
<div class="row stateHeader" ng-show="state === 'loading'">
Loading...Please wait.
</div>
<div class="row stateHeader" ng-show="state === 'saving'">
Saving...Please wait.
</div>
<div class="row stateHeader" ng-show="state == 'retry'">
Server Busy Calculating Filediffs. We will reload in {{reloadInterval}}s.
</div>
<!-- Header with the pending changes and reset/save button -->
<div class="row"
ng-class="{ 'busyLoading': state !== 'ready' }"
style="border: 1px solid #E1E1E1; padding: 0.5em; margin-left: 0; margin-right:0; margin-bottom: 1em;">
<sk-pending-triage change-count="pendingCount"
reset-click="resetTriageState"
save-click="saveTriageState"
dirty="triageStateDirty"
logged-in="isLoggedIn">
</sk-pending-triage>
</div>
<!-- main content -->
<div class="row" ng-class="{ 'busyLoading': state !== 'ready' }">
<div class="row">
<!-- Left column -->
<div class="col-md-2">
<div>
<span class="triageHeadLine">
<span ng-show="showPositives">Positives ({{posStats.unique}})</span>
<span ng-hide="showPositives">Negatives({{negStats.unique}})</span>
<span ng-show="leftDigests">
<sk-bulk-triage triage-state="triageState" test-name="testName" setter="setTriageState" digests="leftDigests"></sk-bulk-triage>
</span>
</span><br>
<a href="" ng-click="switchLeftColumn()">
<span ng-hide="showPositives">Positives ({{posStats.unique}})</span>
<span ng-show="showPositives">Negatives({{negStats.unique}})</span>
</a>
</div>
<div class=" imagesColumn">
<div ng-hide="leftDigests">
No images available.
</div>
<div ng-show="leftDigests">
<div ng-repeat="oneDigest in leftDigests" style="padding-bottom: 1em;padding-top: 1em;">
<sk-img-container
img-url="oneDigest.imgUrl"
digest="oneDigest.digest"
test-name="testName"
setter="setTriageState"
triage-state="triageState"
initial-triage-state="initialTriageState">
<img ng-click="selectLeft($index)"
ng-src="{{oneDigest.imgUrl}}"
class="columnImg"
ng-class="{selectedImg: $index === leftIndex}">
<div ng-if="showPositives && currentUntriaged">
{{oneDigest.diff.numDiffPixels}}px &#183;
{{oneDigest.diff.pixelDiffPercent | number: 2}}% &#183;
{{oneDigest.diff.maxRGBADiffs | json }}
</div>
<div>
{{oneDigest.count}} &#183; {{ (oneDigest.count / posStats.total) * 100.0 | number: 2 }} %
</div>
</sk-img-container>
</div>
</div>
</div>
</div>
<!-- Center column -->
<div class="col-md-8">
<!-- Controls what show in center column -->
<div class="row" style="border: 1px solid #E1E1E1; padding: 0.5em; margin-left: 0; margin-right:0; margin-bottom: 1em;">
<div class="pull-left">
<input type="checkbox"
ng-model="showSrcImages"> Show Source Images
<span ng-show="showPositives && currentLeft && currentUntriaged">
<input type="checkbox" ng-model="showOverlay"> Diff Overlay
</span>
</div>
</div>
<!-- Buttons to classify a digest -->
<div ng-show="showPositives && currentUntriaged" class="row">
<div class="col-md-6">
&nbsp;
</div>
<div class="col-md-6">
<div class="row posNegButtonContainer" >
<button ng-disabled="triageState[testName][currentUntriaged.digest] === c.POSITIVE"
ng-click="setTriageState(testName, currentUntriaged.digest, c.POSITIVE)"
class="btn btn-success pull-left">Positive</button>
<button ng-disabled="triageState[testName][currentUntriaged.digest] === c.NEGATIVE"
ng-click="setTriageState(testName, currentUntriaged.digest, c.NEGATIVE)"
class="btn btn-danger pull-right">Negative</button>
</div>
</div>
</div>
<!-- source images -->
<div class="row srcImageContainer" ng-if="showSrcImages">
<!-- positive source image -->
<div class="col-xs-6">
<div ng-if="!currentLeft">
No image available.
</div>
<div ng-if="currentLeft">
<img src=""
ng-src="{{currentLeft.imgUrl}}"
class="columnImg">
</div>
</div>
<!-- untriaged source image -->
<div class="col-xs-6">
<div ng-if="!currentUntriaged">
No untriaged images available.
</div>
<div ng-if="currentUntriaged">
<img ng-src="{{currentUntriaged.imgUrl}}"
class="columnImg">
</div>
</div>
</div>
<!-- diff image -->
<div class="row">
<div class="col-xs-6">
<div ng-if="showPositives && currentLeft && currentUntriaged">
<div class="row identicalContainer" ng-show="currentLeft.isIdentical()">
Images are identical !
</div>
<div class="imageBorder" ng-hide="currentLeft.isIdentical()">
<div class="imgNoBorder" ng-style="getOverlayStyle().backGround">
<img ng-src="{{currentLeft.diff.diffImgUrl}}"
class="diffImg imgNoBorder"
ng-style="getOverlayStyle().foreGround">
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row" ng-if="showPositives && currentLeft && currentUntriaged">
Diff:
{{currentLeft.diff.numDiffPixels}}px &#183;
{{currentLeft.diff.pixelDiffPercent | number: 2}}% &#183;
{{currentLeft.diff.maxRGBADiffs | json }}
</div>
<br>
<br>
<div class="row">
<div class="col-xs-12" ng-if="currentLeft && currentUntriaged">
<sk-params params="currentLeft.paramCounts"
params-two="currentUntriaged.paramCounts"
filter="filterByParam">
</sk-params>
</div>
<div class="col-xs-12" ng-if="currentLeft && !currentUntriaged">
<sk-params params="currentLeft.paramCounts" filter="filterByParam">
</sk-params>
</div>
<div class="col-xs-12" ng-if="currentUntriaged && !currentLeft">
<sk-params params="currentUntriaged.paramCounts"
filter="filterByParam">
</sk-params>
</div>
</div>
<div class="row" ng-show="currentUntriaged && commitsList">
<h4>Blamelist (score, commit, author):</h4>
<div class="row" ng-repeat="c in commitsList.commits">
<div class="col-xs-2">
{{ c.count }}
</div>
<div class="col-xs-2">
<a href="https://skia.googlesource.com/skia/+/{{c.hash}}" target="_blank">
{{ c.hash | limitTo:7 }}
</a>
</div>
<div class="col-xs-4">
{{ (c.commit_time*1000) | date:'EEE MM/dd/yy hh:mm a'}}
</div>
<div class="col-xs-4">
{{ c.author }}
</div>
</div>
<div class="row" ng-show="commitsList.hasMore">
<div class="col-xs-12">
&nbsp; &nbsp; <a href="" ng-click="expandCommitsList()">Following Commits ...</a>
</div>
</div>
<!-- {{ commitsList | json }}
-->
</div>
<br>
</div>
</div>
<br>
<br>
<br>
<div>
<sk-query all-params="allParams" query="query" click-update="loadTriageData()">
</sk-query>
</div>
<br>
</div>
<!-- Right column -->
<div class="col-md-2">
<div>
<span class="triageHeadLine">
<span>Untriaged ({{untStats.unique}})</span>
<span ng-show="untriaged">
<sk-bulk-triage triage-state="triageState" test-name="testName" setter="setTriageState" digests="untriaged"></sk-bulk-triage>
</span>
</span>
</div>
<div class="imagesColumn">
<div ng-hide="currentUntriaged">
No untriaged images available.
</div>
<div ng-show="currentUntriaged">
<div ng-repeat="oneUntriaged in untriaged">
<div>
<sk-img-container
img-url="oneUntriaged.imgUrl"
digest="oneUntriaged.digest"
test-name="testName"
setter="setTriageState"
triage-state="triageState"
initial-triage-state="initialTriageState">
<img ng-click="selectUntriaged($index)"
ng-src="{{oneUntriaged.imgUrl}}"
class="columnImg"
ng-class="{selectedImg: $index === untIndex}">
<div>
{{oneUntriaged.count}} &#183; {{ (oneUntriaged.count / untStats.total) * 100.0 | number: 2 }} %
</div>
</sk-img-container>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>