[delete image] externalize remove part in its own tag.

gulpfile.js

@@ -49,7 +49,7 @@ gulp.task('riot-tag', ['html'], function() {
 });
 
 gulp.task('riot-static-tag', ['html'], function() {
-  return gulp.src(['src/tags/catalog.tag', 'src/tags/app.tag', 'src/tags/taglist.tag'])
+  return gulp.src(['src/tags/catalog.tag', 'src/tags/app.tag', 'src/tags/taglist.tag', 'src/tags/remove-image.tag'])
     .pipe(concat('tags-static.js'))
     .pipe(riot())
     .pipe(minifier({}, uglify))

src/index.html

@@ -68,6 +68,7 @@
   <!-- build:js scripts/tags.js -->
   <script src="tags/catalog.tag" type="riot/tag"></script>
   <script src="tags/taglist.tag" type="riot/tag"></script>
+  <script src="tags/remove-image.tag" type="riot/tag"></script>
   <script src="tags/add.tag" type="riot/tag"></script>
   <script src="tags/change.tag" type="riot/tag"></script>
   <script src="tags/remove.tag" type="riot/tag"></script>

src/scripts/script.js

@@ -60,6 +60,7 @@ registryUI.removeServer = function(url) {
   registryServer.splice(index, 1);
   localStorage.setItem('registryServer', JSON.stringify(registryServer));
 }
+registryUI.isImageRemoveActivated = true;
 registryUI.catalog = {};
 registryUI.taglist = {};
 

src/scripts/static.js

@@ -17,7 +17,8 @@
 var registryUI = {}
 registryUI.url = function() {
   return '${URL}';
-}
+};
+registryUI.isImageRemoveActivated = true;
 registryUI.catalog = {};
 registryUI.taglist = {};
 

src/tags/remove-image.tag

@@ -0,0 +1,63 @@
+<!--
+ Copyright (C) 2016  Jones Magloire @Joxit
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+<remove-image>
+  <a href="#" onclick="registryUI.removeImage.remove('{ opts.name }', '{ opts.tag }')">
+    <i class="material-icons mdl-list__item-icon">delete</i>
+  </a>
+  <script type="text/javascript">
+    registryUI.removeImage = registryUI.removeImage || {}
+    registryUI.removeImage.update = this.update;
+    
+    registryUI.removeImage.remove = function (name, tag) {
+      var oReq = new Http();
+      oReq.addEventListener('load', function () {
+        registryUI.taglist.refresh();
+        if (this.status == 200) {
+          if (!this.getAllResponseHeaders().includes('Docker-Content-Digest')) {
+            registryUI.taglist.createSnackbar('You need tu add Access-Control-Expose-Headers: [\'Docker-Content-Digest\'] in your server configuration.');
+            return;
+          }
+          var digest = this.getResponseHeader('Docker-Content-Digest');
+          var oReq = new Http();
+          oReq.addEventListener('load', function () {
+            if (this.status == 200 || this.status == 202) {
+              registryUI.taglist.refresh();
+              registryUI.taglist.createSnackbar('Deleting ' + name + ':' + tag + ' image. Run `registry garbage-collect config.yml` on your registry');
+            } else if (this.status == 404) {
+              registryUI.taglist.createSnackbar('Digest not found');
+            } else {
+              registryUI.taglist.createSnackbar(this.responseText);
+            }
+          });
+          oReq.open('DELETE', registryUI.url() + '/v2/' + name + '/manifests/' + digest);
+          oReq.setRequestHeader('Accept', 'application/vnd.docker.distribution.manifest.v2+json');
+          oReq.addEventListener('error', function () {
+            registryUI.taglist.createSnackbar('An error occurred when deleting image. Check if your server accept DELETE methods Access-Control-Allow-Methods: [\'DELETE\'].');
+          });
+          oReq.send();
+        } else if (this.status == 404) {
+          registryUI.taglist.createSnackbar('Manifest for' + name + ':' + tag + 'not found');
+        } else {
+          registryUI.taglist.createSnackbar(this.responseText);
+        }
+      });
+      oReq.open('HEAD', registryUI.url() + '/v2/' + name + '/manifests/' + tag);
+      oReq.setRequestHeader('Accept', 'application/vnd.docker.distribution.manifest.v2+json');
+      oReq.send();
+    };
+  </script>
+</remove-image>

src/tags/taglist.tag

@@ -30,16 +30,15 @@
           <tr>
             <th class="mdl-data-table__cell--non-numeric">Repository</th>
             <th class="{ registryUI.taglist.asc ? 'mdl-data-table__header--sorted-ascending' : 'mdl-data-table__header--sorted-descending' }" onclick="registryUI.taglist.reverse();">Tag</th>
+            <th show="{ registryUI.isImageRemoveActivated }" ></th>
           </tr>
         </thead>
         <tbody>
           <tr each="{ item in registryUI.taglist.tags }">
             <td class="mdl-data-table__cell--non-numeric">{ registryUI.taglist.name }</td>
             <td>{ item }</td>
-            <td>
+            <td show="{ registryUI.isImageRemoveActivated }" >
-              <a href="#" onclick="registryUI.taglist.remove('{ registryUI.taglist.name }', '{ item }')">
+              <remove-image name={ registryUI.taglist.name } tag={ item } />
-                <i class="material-icons mdl-list__item-icon">delete</i>
-              </a>
             </td>
           </tr>
         </tbody>
@@ -117,42 +116,6 @@
     };
     registryUI.taglist.refresh = function () {
       rg.router.go(rg.router.current.name, rg.router.current.params);
-    }
-    registryUI.taglist.remove = function (name, tag) {
-      var oReq = new Http();
-      oReq.addEventListener('load', function () {
-        registryUI.taglist.refresh();
-        if (this.status == 200) {
-          if (!this.getAllResponseHeaders().includes('Docker-Content-Digest')) {
-            registryUI.taglist.createSnackbar('You need tu add Access-Control-Expose-Headers: [\'Docker-Content-Digest\'] in your server configuration.');
-            return;
-          }
-          var digest = this.getResponseHeader('Docker-Content-Digest');
-          var oReq = new Http();
-          oReq.addEventListener('load', function () {
-            if (this.status == 200 || this.status == 202) {
-              registryUI.taglist.createSnackbar('Deleting ' + name + ':' + tag + ' image. Run `registry garbage-collect config.yml` on your registry');
-            } else if (this.status == 404) {
-              registryUI.taglist.createSnackbar('Digest not found');
-            } else {
-              registryUI.taglist.createSnackbar(this.responseText);
-            }
-          });
-          oReq.open('DELETE', registryUI.url() + '/v2/' + name + '/manifests/' + digest);
-          oReq.setRequestHeader('Accept', 'application/vnd.docker.distribution.manifest.v2+json');
-          oReq.addEventListener('error', function () {
-            registryUI.taglist.createSnackbar('An error occurred when deleting image. Check if your server accept DELETE methods Access-Control-Allow-Methods: [\'DELETE\'].');
-          });
-          oReq.send();
-        } else if (this.status == 404) {
-          registryUI.taglist.createSnackbar('Manifest for' + name + ':' + tag + 'not found');
-        } else {
-          registryUI.taglist.createSnackbar(this.responseText);
-        }
-      });
-      oReq.open('HEAD', registryUI.url() + '/v2/' + name + '/manifests/' + tag);
-      oReq.setRequestHeader('Accept', 'application/vnd.docker.distribution.manifest.v2+json');
-      oReq.send();
     };
   </script>
   <!-- End of tag -->