docker-registry-frontend/app/repository/repository-list.html
Konrad Kleine 6db5b073eb List repos in v2 registry with paging (#47 and #7)
We can now navigate forward through all images inside a v2 registry. The
default page size is 10 but it can be changed to some other numbers as
well.

The unused repository selector files have been removed.

The repository list directive was moved to the repository list html
template for simplicity.

The repository list no longer says that it searches for repos but
filters repos on the current page.

The bottom delete repos button has been removed in favor of more space
for the pagination controls.

The pagination works as described here:
https://github.com/docker/distribution/blob/master/docs/spec/api.md#pagination
We take the "Link:" header parameter from the response and extract
portions of it to formulate the next request. As usual, each page is
addressible via the URL.

Note that when changing the number of repositories per page we have no
other way but to go to page 1 and show at max the number of repositories
selected.

There's no way to find out how many repos are there so we cannot provide
page links. Only forward navigation is possible.
2015-09-03 10:44:24 +02:00

87 lines
3.6 KiB
HTML

<ol class="breadcrumb">
<li><a href="home">Home</a></li>
<li><a href="repositories/">Repositories</a></li>
</ol>
<h1>Repositories</h1>
<div class="input-group repository-list-search">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
<input type="search" placeholder="Filter repositories on this page" ng-model="searchTerm" class="form-control">
<span class="input-group-addon">Repositories <span ng-bind-template="({{filteredRepositories.length}}/{{repositories.repos.length}})"></span></span>
</div>
<div ng-hide="appMode.browseOnly">
<!-- Maybe put this into its own directive? -->
<button type="button" ng-disabled="!selectedRepositories.length" ng-click="openConfirmRepoDeletionDialog()" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
<ng-pluralize count="selectedRepositories.length"
when="{'0': 'Select repositores to delete', 'one': 'Delete one repository', 'other': 'Delete {} repositories'}">
</ng-pluralize>
</button>
</div>
<span ng-repeat-start="(username, repos) in (filteredRepositories=(repositories.repos | filter:searchTerm) | groupBy: 'username')"></span>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<th colspan="2">
<!--<span class="glyphicon glyphicon-user"></span>--> {{username}}
<span class="badge pull-right">{{repos.length}}</span>
</th>
</thead>
<tbody>
<tr ng-repeat="repo in repos" ng-class="{warning: repo.selected}">
<td>
<checkbox name="selectedRepositories[]" value="{{repo.name}}" ng-model="repo.selected" ng-hide="appMode.browseOnly"></checkbox>
<!--<input type="checkbox" name="selectedRepos[]" value="{{repo.name}}" ng-model="repo.selected" ng-hide="appMode.browseOnly">-->
</td>
<td class="grow">
<a href="repository/{{repo.name}}"><!--<span class="glyphicon glyphicon-book"></span>--> {{repo.name|trim:username+'/'}}</a>
</td>
</tr>
</tbody>
</table>
</div>
<span ng-repeat-end></span>
<nav>
<ul class="pager">
<li class="previous" ng-class="{disabled: !lastNamespace || !lastRepository}">
<a href="repositories/{{reposPerPage}}">
<span aria-hidden="true">&larr;</span>
First page
</a>
</li>
<li>
<div class="btn-group" role="group">
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-book" aria-hidden="true"> </span> / page:
<span ng-show="reposPerPage">{{reposPerPage}}</span>
<span ng-show="!reposPerPage">all</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="repositories">Show all</a></li>
<li role="separator" class="divider"></li>
<li><a href="repositories/10">10</a></li>
<li><a href="repositories/20">20</a></li>
<li><a href="repositories/40">40</a></li>
<li><a href="repositories/60">60</a></li>
<li><a href="repositories/80">80</a></li>
<li><a href="repositories/100">100</a></li>
</ul>
</div>
</li>
<li class="next" ng-class="{disabled: !repositories.lastNamespace || !repositories.lastRepository}">
<!-- TODO: Make sure the button is not clickable -->
<a href="/repositories/{{reposPerPage}}/{{repositories.lastNamespace}}/{{repositories.lastRepository}}"
ng-disabled="!repositories.lastNamespace || !repositories.lastRepository">
Next <span aria-hidden="true">&rarr;</span>
</a>
</li>
</ul>
</nav>