Delete tags with API v2 (fixes #106)

app/image/image-controller.js

@@ -14,8 +14,7 @@ angular.module('image-controller', ['registry-services', 'app-mode-services'])
 
     $scope.appMode = AppMode.query();
     $scope.totalImageSize = 0;
-    $scope.imageDetails = Manifest.query({repoUser: $scope.repositoryUser, repoName: $scope.repositoryName, tagName: $scope.tagName});
-
+    $scope.imageDetails = Manifest.query({repository: $scope.repository, tagName: $scope.tagName});
 
 
 
@@ -30,11 +29,7 @@ angular.module('image-controller', ['registry-services', 'app-mode-services'])
       $scope.totalImageSize = 0;
       var size;
       angular.forEach($scope.imageDetails.fsLayers, function (id, key) {
-
-        Blob.query({repoUser: $scope.repositoryUser, repoName: $scope.repositoryName, digest: id.blobSum}).$promise.then( function(data, headers){
-          size = data;
-          console.log(data)
-          console.log(size)
+        Blob.query({repository: $scope.repository, digest: id.blobSum}).$promise.then(function(data){
           if(!isNaN(data.contentLength-0)){
             $scope.totalImageSize += data.contentLength;
           }

app/services/registry-services.js

@@ -121,10 +121,6 @@ angular.module('registry-services', ['ngResource'])
           return res;
         },
       },
-      'delete': {
-        url: '/v1/repositories/:repoUser/:repoName/tags/:tagName',
-        method: 'DELETE',
-      },
       'exists': {
         url: '/v1/repositories/:repoUser/:repoName/tags/:tagName',
         method: 'GET',
@@ -143,7 +139,7 @@ angular.module('registry-services', ['ngResource'])
   }])
   .factory('Manifest', ['$resource', function($resource){
 
-    return $resource('/v2/:repoUser/:repoName/manifests/:tagName', {}, {
+    return $resource('/v2/:repository/manifests/:tagName', {}, {
       // Response example:
       // {
       //   "schemaVersion": 1,
@@ -169,6 +165,9 @@ angular.module('registry-services', ['ngResource'])
       // }
       'query': {
         method:'GET',
+        headers: {
+            accept: 'application/vnd.docker.distribution.manifest.v2+json',
+        },
         isArray: false,
         transformResponse: function(data, headers){
           var res = {};
@@ -207,13 +206,17 @@ angular.module('registry-services', ['ngResource'])
           res.architecture = resp.architecture;
           return res;
         },
-      }
+      },
+      'delete': {
+          url: '/v2/:repository/manifests/:digest',
+          method: 'DELETE',
+      },
     });
   }])
   // This is not totally working right now (problem with big layers)
   /*
   .factory('Blob', ['$resource', function($resource){
-    return $resource('/v2/:repoUser/:repoName/blobs/:digest', {}, {
+    return $resource('/v2/:repository/blobs/:digest', {}, {
 
       'query': {
         method:'HEAD',

app/tag/delete-tags-controller.js

@@ -8,46 +8,31 @@
  * Controller of the docker-registry-frontend
  */
 angular.module('delete-tags-controller', ['registry-services'])
-  .controller('DeleteTagsController', ['$scope', '$route', '$modalInstance', '$window', 'Tag', 'items', 'information',
-  function($scope, $route, $modalInstance, $window, Tag, items, information)
+  .controller('DeleteTagsController', ['$scope', '$route', '$modalInstance', '$window', 'Manifest', 'items', 'information',
+  function($scope, $route, $modalInstance, $window, Manifest, items, information)
   {
     $scope.items = items;
     $scope.information = information;
 
     // Callback that triggers deletion of tags and reloading of page
     $scope.ok = function () {
-      angular.forEach($scope.items, function(value, key) {
-        var tagStr = value;
+      angular.forEach($scope.items, function(value) {
+        var repository = value.split(":")[0];
         var tagName = value.split(":")[1];
-        var repoUser = value.split("/")[0];
-        var repoName = value.split("/")[1].split(":")[0];
 
-        var tag = {
-          repoUser: repoUser,
-          repoName: repoName,
+        Manifest.query({
+          repository: repository,
           tagName: tagName
-        };
-
-        if (!Tag.exists(tag)) {
-         toastr.warning('Tag does no longer exist: ' + tagStr);
-         return;
-        }
-
-        Tag.delete(tag,
-          // success
-          function(value, responseHeaders) {
-            toastr.success('Deleted tag: ' + tagStr);
-          },
-          // error
-          function(httpResponse) {
-            toastr.error('Failed to delete tag: ' + tagStr + ' Response: ' + httpResponse.statusText);
-          }
-        );
+        }).$promise.then(function (data) {
+          Manifest.delete({
+            repository: repository,
+            digest: data.digest
+          }).$promise.then(function () {
+            $window.location.href = '/repository/' + repository;
+          });
+        });
       });
       $modalInstance.close();
-
-      // Go to the repositories page
-      $window.location.href = 'repositories';
     };
 
     $scope.cancel = function () {

app/tag/tag-controller.js

@@ -63,18 +63,12 @@ angular.module('tag-controller', ['registry-services'])
         if(!isNaN(idx)){
           tmpIdx = parseInt(idx) + idxShift;
           if ( result[tmpIdx].hasOwnProperty('name') ) {
-              result[tmpIdx].details = Manifest.query({repoUser: $scope.repositoryUser, repoName: $scope.repositoryName, tagName: result[tmpIdx].name});
+              result[tmpIdx].details = Manifest.query({repository: $scope.repository, tagName: result[tmpIdx].name});
           }
         }
       }
     });
-
 
-
-    // Copy collection for rendering in a smart-table
-    $scope.displayedTags = [].concat($scope.tags);
-
-
     // selected tags
     $scope.selection = [];
 
@@ -83,6 +77,19 @@ angular.module('tag-controller', ['registry-services'])
       return filterFilter($scope.displayedTags, { selected: true });
     };
 
+    // Watch tags for changes
+    // To watch for changes on a property inside the object "tags"
+    // we first have to make sure the promise is ready.
+    $scope.tags.$promise.then(function(data) {
+      // Copy collection for rendering in a smart-table
+      $scope.displayedTags = [].concat(data);
+      $scope.$watch('displayedTags|filter:{selected:true}', function(nv) {
+        $scope.selection = nv.map(function (tag) {
+          return $scope.repository + ':' + tag.name;
+        });
+      }, true);
+    });
+
     $scope.openConfirmTagDeletionDialog = function(size) {
       var modalInstance = $modal.open({
           animation: true,

app/tag/tag-detail.html

@@ -3,27 +3,21 @@
     <li><a href="repositories/">Repositories</a></li>
     <li ng-show="repositoryUser"><a href="repositories/{{repositoryUser}}">{{repositoryUser}}</a></li>
     <li><a href="repository/{{repository}}">{{repositoryName}}</a></li>
-    <li><a href="tag/{{repository}}/{{tagName}}/{{imageId}}">{{tagName}}</a></li>
+    <li><a href="tag/{{repository}}/{{tagName}}">{{tagName}}</a></li>
 </ol>
 
 <h1>
   Details for tag
   <a href="repositories/{{repositoryUser}}">{{repositoryUser}}</a> /
-  <a href="repository/{{repositoryUser}}/{{repositoryName}}">{{repositoryName}}</a> :
-  <a href="tag/{{repositoryUser}}/{{repositoryName}}/{{tagName}}/{{imageId}}">{{tagName}}</a>
+  <a href="repository/{{repository}}">{{repositoryName}}</a> :
+  <a href="tag/{{repository}}/{{tagName}}">{{tagName}}</a>
 
   <div ng-hide="appMode.browseOnly" class="pull-right">
-    <button type="button" ng-click="selection=['{{repositoryUser}}/{{repositoryName}}:{{tagName}}']; openConfirmTagDeletionDialog()" class="btn btn-danger">
+    <button type="button" ng-click="selection=['{{repository}}:{{tagName}}']; openConfirmTagDeletionDialog()" class="btn btn-danger">
       <span class="glyphicon glyphicon-trash"></span> Delete Tag
     </button>
   </div>
 
-  <!--<div ng-hide="appMode.browseOnly" class="pull-right">
-    <a class="btn btn-danger" href="tag/{{repositoryUser}}/{{repositoryName}}/{{tagName}}/{{imageId}}/delete" alt="Delete tag">
-      <span class="glyphicon glyphicon-trash"></span> Delete Tag
-    </a>
-  </div>-->
-
 </h1>
 
 <div class="well"><code>

app/tag/tag-list-directive.html

@@ -10,7 +10,8 @@
   <table  class="table table-hover">
     <thead>
       <tr>
-        <th  ng-class="{strike: deleted}"><span class="glyphicon glyphicon-tag"></span> Tag</th>
+        <th ng-hide="appMode.browseOnly"></th>
+        <th ng-class="{strike: deleted}"><span class="glyphicon glyphicon-tag"></span> Tag</th>
         <th ><span class="glyphicon glyphicon-qrcode"></span> Image ID</th>
         <th ><span class="glyphicon glyphicon-calendar"></span> Created</th>
         <th ><span class="glyphicon glyphicon-user"></span> Author</th>
@@ -19,13 +20,19 @@
         <!-- <th><span class="glyphicon glyphicon-compressed"></span> Size (MB)</th> -->
       </tr>
       <tr>
-  			<th><input class="input-sm form-control" placeholder="Filter tags on this page" type="search" ng-model="search.name"/></th>
-		  </tr>
+        <th ng-hide="appMode.browseOnly"></th>
+        <th>
+          <input class="input-sm form-control" placeholder="Filter tags on this page" type="search" ng-model="search.name"/>
+        </th>
+      </tr>
     </thead>
     <tbody>
-      <tr ng-repeat="tag in displayedTags | filter:search " ng-show="tag.details">
-        <td>
-          <a ng-bind-html="tag.name" href="tag/{{repositoryUser}}/{{repositoryName}}/{{tag.name}}">{{tag.name}}</a>
+      <tr ng-repeat="tag in displayedTags | filter:search " ng-show="tag.details" ng-class="{warning: tag.selected}">
+        <td ng-hide="appMode.browseOnly">
+          <checkbox name="selection[]" value="{{repository}}:{{tag.name}}" ng-model="tag.selected"></checkbox>
+        </td>
+        <td class="grow">
+          <a ng-bind-html="tag.name" href="tag/{{repository}}/{{tag.name}}">{{tag.name}}</a>
         </td>
         <td><span ng-bind-html="tag.details.id | limitTo: 12"></span></td>
         <td am-time-ago="tag.details.created"></td>

develop/docker-compose.yml

@@ -1,7 +1,10 @@
 frontend:
   build: .
   links:
-    - registry:path-to-your-registry-v2
+    - registry:registry
+  environment:
+   - DOCKER_REGISTRY_HOST=registry
+   - DOCKER_REGISTRY_PORT=5000
   ports:
       # Serves the page via grunt
     - "9000:9000"
@@ -11,6 +14,8 @@ frontend:
     - ../:/source:rw
     - ./start-develop.sh:/root/start-develop.sh:ro
 registry:
-  image: registry:2.1.1
+  image: registry
   ports:
     - "5000:5000"
+  environment:
+    - REGISTRY_STORAGE_DELETE_ENABLED=true

start-apache.sh

@@ -37,8 +37,6 @@ echo "{\"host\": \"$ENV_REGISTRY_PROXY_FQDN\", \"port\": $ENV_REGISTRY_PROXY_POR
 
 # information about browse mode.
 [[ x$ENV_MODE_BROWSE_ONLY =~ ^x(true|false)$ ]] || ENV_MODE_BROWSE_ONLY=false
-# Overwrite browse-only option for now since only browse-only is working right now
-ENV_MODE_BROWSE_ONLY=true
 [[ -z "$ENV_DEFAULT_REPOSITORIES_PER_PAGE" ]] && ENV_DEFAULT_REPOSITORIES_PER_PAGE=20
 [[ -z "$ENV_DEFAULT_TAGS_PER_PAGE" ]] && ENV_DEFAULT_TAGS_PER_PAGE=10
 echo "{\"browseOnly\":$ENV_MODE_BROWSE_ONLY, \"defaultRepositoriesPerPage\":$ENV_DEFAULT_REPOSITORIES_PER_PAGE , \"defaultTagsPerPage\":$ENV_DEFAULT_TAGS_PER_PAGE }"  > /var/www/html/app-mode.json