vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Fix handling of large numbers of image tracks (#1451)

Browse source 
Fixes #1448

Image tracks will now automatically inline when possible. When not possible, we display a maximum of 5 tracks before we change them to a single column with colored dots.
This commit is contained in:
josephschorr 2016-05-11 03:15:34 +02:00 • committed by Jimmy Zelinskie
parent 94e9448658
commit f0bf138448
4 changed files with 83 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

43
static/directives/repo-view/repo-panel-tags.html
View file

@ -38,7 +38,7 @@
</div>
<div class="cor-checkable-menu-item" item-filter="imageIDFilter(it.image_id, item)"
ng-repeat="it in imageTracks">
ng-repeat="it in imageTrackEntries">
<i class="fa fa-circle-o" ng-style="{'color': it.color}"></i> {{ it.image_id.substr(0, 12) }}
</div>
</span>
@ -90,25 +90,30 @@
</td>
<td class="hidden-xs"
ng-class="tablePredicateClass('security_scanned', options.predicate, options.reverse)"
style="width: 230px;"
style="width: 200px;"
quay-require="['SECURITY_SCANNER']">
Security Scan
</td>
<td class="hidden-xs"
<td class="hidden-sm hidden-xs"
ng-class="tablePredicateClass('size', options.predicate, options.reverse)"
style="width: 80px;">
<a ng-click="orderBy('size')">Size</a>
</td>
<td class="hidden-xs hidden-sm"
ng-class="tablePredicateClass('image_id', options.predicate, options.reverse)"
style="width: 140px;">
style="width: 120px;">
<a ng-click="orderBy('image_id')">Image</a>
</td>
<td class="hidden-xs image-track" ng-repeat="it in imageTracks" bindonce></td>
<td class="hidden-xs hidden-sm image-track" ng-repeat="it in imageTracks"
ng-if="imageTracks.length <= maxTrackCount"></td>
<td class="hidden-xs hidden-sm" ng-if="imageTracks.length > maxTrackCount"
style="width: 20px; position: relative;">
<span class="image-track-dot" style="border-color: #ccc; top: 4px;"></span>
</td>
<td class="options-col"></td>
<td class="options-col"></td>
<td class="options-col"></td>
<td class="options-col hidden-xs hidden-sm"></td>
<td class="hidden-xs hidden-sm" style="width: 4px"></td>
</thead>
<tr class="co-checkable-row"
@ -121,7 +126,7 @@
<span am-time-ago="tag.last_modified" bo-if="tag.last_modified"></span>
<span bo-if="!tag.last_modified">Unknown</span>
</td>
<td quay-require="['SECURITY_SCANNER']" class="security-scan-col">
<td quay-require="['SECURITY_SCANNER']" class="security-scan-col hidden-xs">
<span class="cor-loader-inline" ng-if="getTagVulnerabilities(tag).loading"></span>
<span class="vuln-load-error" ng-if="getTagVulnerabilities(tag).hasError"
data-title="The vulnerabilities for this tag could not be retrieved at the present time, try again later"
@ -193,15 +198,27 @@
</span>
</span>
</td>
<td class="hidden-xs" bo-text="tag.size | bytes"></td>
<td class="hidden-sm hidden-xs" bo-text="tag.size | bytes"></td>
<td class="hidden-xs hidden-sm image-id-col">
<span class="image-link" repository="repository" image-id="tag.image_id"></span>
</td>
<td class="hidden-xs image-track" ng-repeat="it in imageTracks" bindonce>
<span class="image-track-dot" bo-if="it.image_id == tag.image_id"
bo-style="{'borderColor': it.color}" ng-click="selectTrack(it)"></span>
<span class="image-track-line" bo-class="trackLineClass($parent.$index, it)"
bo-style="{'borderColor': it.color}"></span>
<td class="hidden-xs hidden-sm image-track"
ng-if="imageTracks.length > maxTrackCount" bindonce>
<span ng-repeat="it in imageTracks">
<span ng-repeat="entry in it.entries">
<span class="image-track-dot" bo-if="entry.image_id == tag.image_id"
bo-style="{'borderColor': entry.color}" ng-click="selectTrack(entry)"></span>
</span>
</span>
</td>
<td class="hidden-xs hidden-sm image-track" ng-repeat="it in imageTracks"
ng-if="imageTracks.length <= maxTrackCount" bindonce>
<span ng-repeat="entry in it.entries">
<span class="image-track-dot" bo-if="entry.image_id == tag.image_id"
bo-style="{'borderColor': entry.color}" ng-click="selectTrack(entry)"></span>
<span class="image-track-line" bo-class="trackLineClass($parent.$parent.$parent.$index, entry)"
bo-style="{'borderColor': entry.color}"></span>
</span>
</td>
<td class="options-col">
<i class="fa fa-download" data-title="Fetch Tag" bs-tooltip