diff --git a/package.json b/package.json index 2c658b7..3863a28 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "core-js": "^3.9.1", "js-beautify": "^1.13.0", "riot": "^5.3.1", - "riot-mui": "joxit/riot-5-mui#03c37c7", + "riot-mui": "joxit/riot-5-mui#ba273d7", "rollup": "^2.34.2", "rollup-plugin-app-utils": "^1.0.6", "rollup-plugin-commonjs": "^10.1.0", diff --git a/src/components/dialogs/confirm-delete-image.riot b/src/components/dialogs/confirm-delete-image.riot new file mode 100644 index 0000000..b3d902b --- /dev/null +++ b/src/components/dialogs/confirm-delete-image.riot @@ -0,0 +1,108 @@ + + + +
These images will be deleted
+
+
    +
  • { image.name }:{ image.tag }
  • +
+
+
+ + Delete + + + Cancel + +
+
+ + +
\ No newline at end of file diff --git a/src/components/tag-list/remove-image.riot b/src/components/tag-list/remove-image.riot index 899386c..49c1bea 100644 --- a/src/components/tag-list/remove-image.riot +++ b/src/components/tag-list/remove-image.riot @@ -52,46 +52,5 @@ along with this program. If not, see . this.props.handleCheckboxChange(checked, this.props.image); } } - - export function deleteImage(image, opts) { - const { - registryUrl, - ignoreError, - onNotify, - onAuthentication - } = opts; - if (!image.digest) { - onNotify(`Information for ${name}:${tag} are not yet loaded.`); - return; - } - const name = image.name; - const tag = image.tag; - const oReq = new Http({ - onAuthentication: onAuthentication - }); - oReq.addEventListener('loadend', function () { - if (this.status == 200 || this.status == 202) { - router.taglist(name); - onNotify(`Deleting ${name}:${tag} image. Run \`registry garbage-collect config.yml\` on your registry`); - } else if (this.status == 404) { - ignoreError || onNotify({ - message: 'Digest not found for this image in your registry.', - isError: true - }); - } else { - onNotify(this.responseText); - } - }); - oReq.open('DELETE', `${registryUrl}/v2/${name}/manifests/${image.digest}`); - oReq.setRequestHeader('Accept', - 'application/vnd.docker.distribution.manifest.v2+json, application/vnd.oci.image.manifest.v1+json'); - oReq.addEventListener('error', function () { - onNotify({ - message: 'An error occurred when deleting image. Check if your server accept DELETE methods Access-Control-Allow-Methods: [\'DELETE\'].', - isError: true - }); - }); - oReq.send(); - } \ No newline at end of file diff --git a/src/components/tag-list/tag-table.riot b/src/components/tag-list/tag-table.riot index d69fc8d..ef7bd6e 100644 --- a/src/components/tag-list/tag-table.riot +++ b/src/components/tag-list/tag-table.riot @@ -15,6 +15,9 @@ You should have received a copy of the GNU Affero General Public License along with this program. If not, see . --> + @@ -87,12 +90,11 @@ along with this program. If not, see . import ImageContentDigest from './image-content-digest.riot'; import CopyToClipboard from './copy-to-clipboard.riot'; import TagHistoryButton from './tag-history-button.riot'; - import RemoveImage, { - deleteImage - } from './remove-image.riot'; + import RemoveImage from './remove-image.riot'; import { matchSearch } from '../search-bar.riot'; + import ConfirmDeleteImage from '../dialogs/confirm-delete-image.riot'; export default { components: { ImageDate, @@ -102,6 +104,7 @@ along with this program. If not, see . CopyToClipboard, RemoveImage, TagHistoryButton, + ConfirmDeleteImage, }, onBeforeMount(props) { this.state = { @@ -117,10 +120,14 @@ along with this program. If not, see . state.page = props.page }, bulkDelete() { - this.state.toDelete.forEach(image => deleteImage(image, { - ...this.props, - ignoreError: true - })) + this.update({ + confirmDeleteImage: true + }) + }, + onConfirmDeleteImageClick() { + this.update({ + confirmDeleteImage: false + }) }, onRemoveImageHeaderChange(checked, event) { if (event.altKey === true) {