diff --git a/src/api.js b/src/api.js
index 15b7f794..8d367389 100644
--- a/src/api.js
+++ b/src/api.js
@@ -81,12 +81,13 @@ const endpoints = {
authConfig: `/v2/_zot/ext/mgmt`,
openidAuth: `/zot/auth/login`,
logout: `/zot/auth/logout`,
+ deleteImage: (name, tag) => `/v2/${name}/manifests/${tag}`,
repoList: ({ pageNumber = 1, pageSize = 15 } = {}) =>
`/v2/_zot/ext/search?query={RepoListWithNewestImage(requestedPage: {limit:${pageSize} offset:${
(pageNumber - 1) * pageSize
}}){Results {Name LastUpdated Size Platforms {Os Arch} NewestImage { Tag Vulnerabilities {MaxSeverity Count} Description Licenses Title Source IsSigned SignatureInfo { Tool IsTrusted Author } Documentation Vendor Labels} IsStarred IsBookmarked StarCount DownloadCount}}}`,
detailedRepoInfo: (name) =>
- `/v2/_zot/ext/search?query={ExpandedRepoInfo(repo:"${name}"){Images {Manifests {Digest Platform {Os Arch} Size} Vulnerabilities {MaxSeverity Count} Tag LastUpdated Vendor } Summary {Name LastUpdated Size Platforms {Os Arch} Vendors IsStarred IsBookmarked NewestImage {RepoName IsSigned SignatureInfo { Tool IsTrusted Author } Vulnerabilities {MaxSeverity Count} Manifests {Digest} Tag Vendor Title Documentation DownloadCount Source Description Licenses}}}}`,
+ `/v2/_zot/ext/search?query={ExpandedRepoInfo(repo:"${name}"){Images {Manifests {Digest Platform {Os Arch} Size} Vulnerabilities {MaxSeverity Count} Tag LastUpdated Vendor IsDeletable } Summary {Name LastUpdated Size Platforms {Os Arch} Vendors IsStarred IsBookmarked NewestImage {RepoName IsSigned SignatureInfo { Tool IsTrusted Author } Vulnerabilities {MaxSeverity Count} Manifests {Digest} Tag Vendor Title Documentation DownloadCount Source Description Licenses}}}}`,
detailedImageInfo: (name, tag) =>
`/v2/_zot/ext/search?query={Image(image: "${name}:${tag}"){RepoName IsSigned SignatureInfo { Tool IsTrusted Author } Vulnerabilities {MaxSeverity Count} Referrers {MediaType ArtifactType Size Digest Annotations{Key Value}} Tag Manifests {History {Layer {Size Digest} HistoryDescription {CreatedBy EmptyLayer}} Digest ConfigDigest LastUpdated Size Platform {Os Arch}} Vendor Licenses }}`,
vulnerabilitiesForRepo: (name, { pageNumber = 1, pageSize = 15 }, searchTerm = '') => {
diff --git a/src/components/Repo/RepoDetails.jsx b/src/components/Repo/RepoDetails.jsx
index b3df2e9b..0365c250 100644
--- a/src/components/Repo/RepoDetails.jsx
+++ b/src/components/Repo/RepoDetails.jsx
@@ -197,6 +197,11 @@ function RepoDetails() {
};
}, [name]);
+ const handleDeleteTag = (removed) => {
+ let newTags = tags.filter((tag) => tag.tag !== removed);
+ setTags(newTags);
+ };
+
const handlePlatformChipClick = (event) => {
const { textContent } = event.target;
event.stopPropagation();
@@ -223,7 +228,7 @@ function RepoDetails() {
const handleBookmarkClick = () => {
api.put(`${host()}${endpoints.bookmarkToggle(name)}`, abortController.signal).then((response) => {
- if (response.status === 200) {
+ if (response && response.status === 200) {
setRepoDetailData((prevState) => ({
...prevState,
isBookmarked: !prevState.isBookmarked
@@ -341,7 +346,7 @@ function RepoDetails() {
-
+
diff --git a/src/components/Repo/Tabs/Tags.jsx b/src/components/Repo/Tabs/Tags.jsx
index 808d55f5..a6b6bb30 100644
--- a/src/components/Repo/Tabs/Tags.jsx
+++ b/src/components/Repo/Tabs/Tags.jsx
@@ -43,7 +43,7 @@ const useStyles = makeStyles(() => ({
export default function Tags(props) {
const classes = useStyles();
- const { tags } = props;
+ const { tags, repoName, handleDeleteTag } = props;
const [tagsFilter, setTagsFilter] = useState('');
const [sortFilter, setSortFilter] = useState(tagsSortByCriteria.updateTimeDesc.value);
@@ -63,6 +63,9 @@ export default function Tags(props) {
lastUpdated={tag.lastUpdated}
vendor={tag.vendor}
manifests={tag.manifests}
+ repo={repoName}
+ handleDeleteTag={handleDeleteTag}
+ isDeletable={tag.isDeletable}
/>
);
})
diff --git a/src/components/Shared/ConfirmDialog.jsx b/src/components/Shared/ConfirmDialog.jsx
new file mode 100644
index 00000000..7abf2c3e
--- /dev/null
+++ b/src/components/Shared/ConfirmDialog.jsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+// components
+import { Button, Dialog, DialogTitle, DialogActions } from '@mui/material';
+
+export default function ConfirmDialog(props) {
+ const { onClose, open, title, onConfirm } = props;
+
+ return (
+
+ );
+}
diff --git a/src/components/Shared/DeleteTag.jsx b/src/components/Shared/DeleteTag.jsx
new file mode 100644
index 00000000..32a4ec02
--- /dev/null
+++ b/src/components/Shared/DeleteTag.jsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { IconButton } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+// utility
+import { api, endpoints } from '../../api';
+
+// components
+import ConfirmDialog from 'components/Shared/ConfirmDialog';
+import { host } from '../../host';
+
+export default function DeleteTag(props) {
+ const { repo, tag, handleDeleteTag } = props;
+ const [open, setOpen] = React.useState(false);
+
+ const handleClickOpen = () => {
+ setOpen(true);
+ };
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ const deleteTag = (repo, tag) => {
+ api
+ .delete(`${host()}${endpoints.deleteImage(repo, tag)}`)
+ .then((response) => {
+ if (response && response.status == 202) {
+ handleDeleteTag(tag);
+ }
+ })
+ .catch((err) => {
+ console.error(err);
+ });
+ };
+
+ const onConfirm = () => {
+ deleteTag(repo, tag);
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/Shared/TagCard.jsx b/src/components/Shared/TagCard.jsx
index f2eb7624..cdc6a4d9 100644
--- a/src/components/Shared/TagCard.jsx
+++ b/src/components/Shared/TagCard.jsx
@@ -6,6 +6,7 @@ import { Markdown } from 'utilities/MarkdowntojsxWrapper';
import transform from 'utilities/transform';
import { DateTime } from 'luxon';
import { KeyboardArrowDown, KeyboardArrowRight } from '@mui/icons-material';
+import DeleteTag from 'components/Shared/DeleteTag';
const useStyles = makeStyles((theme) => ({
card: {
@@ -78,9 +79,9 @@ const useStyles = makeStyles((theme) => ({
}));
export default function TagCard(props) {
- const { repoName, tag, lastUpdated, vendor, manifests } = props;
-
+ const { repoName, tag, lastUpdated, vendor, manifests, repo, handleDeleteTag, isDeletable } = props;
const [open, setOpen] = useState(false);
+
const classes = useStyles();
const lastDate = lastUpdated
@@ -99,9 +100,12 @@ export default function TagCard(props) {
return (
-
- Tag
-
+
+
+ Tag
+
+ {isDeletable && }
+
goToTags()}>
{repoName && `${repoName}:`}
{tag}
diff --git a/src/utilities/objectModels.js b/src/utilities/objectModels.js
index 34bb880c..dc97568f 100644
--- a/src/utilities/objectModels.js
+++ b/src/utilities/objectModels.js
@@ -69,6 +69,7 @@ const mapToImage = (responseImage) => {
authors: responseImage.Authors,
vulnerabiltySeverity: responseImage.Vulnerabilities?.MaxSeverity,
vulnerabilityCount: responseImage.Vulnerabilities?.Count,
+ isDeletable: responseImage.IsDeletable,
// frontend only prop to increase interop with Repo objects and code reusability
name: `${responseImage.RepoName}:${responseImage.Tag}`
};