From 5c0e594d068afec32d66fa5fead0b8c4ad105176 Mon Sep 17 00:00:00 2001 From: Amelia-Maria Breda Date: Thu, 13 Oct 2022 15:41:19 +0100 Subject: [PATCH] Fixed the bug regarding published date for images in Tag Page Signed-off-by: Amelia-Maria Breda --- src/App.css | 32 ++++++------- src/__tests__/RepoPage/Tags.test.js | 36 +++++--------- src/api.js | 2 +- src/components/RepoDetails.jsx | 5 +- src/components/Tags.jsx | 74 ++++++++++++++--------------- 5 files changed, 68 insertions(+), 81 deletions(-) diff --git a/src/App.css b/src/App.css index 652e975b..f77b8f9f 100644 --- a/src/App.css +++ b/src/App.css @@ -20,7 +20,7 @@ .App-logo { animation: bounce 1s; animation-direction: alternate; - animation-timing-function: cubic-bezier(.5, 0.05, 1, .5); + animation-timing-function: cubic-bezier(0.5, 0.05, 1, 0.5); animation-iteration-count: infinite; } } @@ -49,25 +49,25 @@ } } -@-webkit-keyframes bounce { +@-webkit-keyframes bounce { from { transform: translate3d(0, 0, 0); } to { - transform: translate3d(0, 50px, 0); + transform: translate3d(0, 50px, 0); } -} - -@keyframes bounce { - from { - transform: translate3d(0, 0, 0); - } - to { - transform: translate3d(0, 50px, 0); - } } -.bounce { - -webkit-animation-name: bounce; - animation-name: bounce; -} \ No newline at end of file +@keyframes bounce { + from { + transform: translate3d(0, 0, 0); + } + to { + transform: translate3d(0, 50px, 0); + } +} + +.bounce { + -webkit-animation-name: bounce; + animation-name: bounce; +} diff --git a/src/__tests__/RepoPage/Tags.test.js b/src/__tests__/RepoPage/Tags.test.js index 4ae39b8f..bfbd599f 100644 --- a/src/__tests__/RepoPage/Tags.test.js +++ b/src/__tests__/RepoPage/Tags.test.js @@ -9,42 +9,30 @@ jest.mock('react-router-dom', () => ({ useNavigate: () => mockedUsedNavigate })); -const mockedTagsData = { - name: 'alpine', - images: [ - { - Digest: '59118d0816d2e8e05cb04c328224056b3ce07d7afc2ad59e2f1f08bb0ba2ff3c', - Tag: 'latest', - Layers: [ - { - Size: '2806054', - Digest: '213ec9aee27d8be045c6a92b7eac22c9a64b44558193775a1a7f626352392b49' - } - ] - } - ], - lastUpdated: '2022-08-09T17:19:53.274069586Z', - size: '2806985', - platforms: [ - { +const mockedTagsData = [ + { + Digest: 'sha256:adca4815c494becc1bf053af0c4640b2d81ab1a779e6d649e1b8b92a75f1d559', + Tag: 'latest', + LastUpdated: '2022-07-19T18:06:18.818788283Z', + Vendor: 'test1', + Size: '569130088', + Platform: { Os: 'linux', Arch: 'amd64' } - ], - vendors: [''], - newestTag: null -}; + } +]; describe('Tags component', () => { it('should open and close details dropdown for tags', () => { - render(); + render(); const openBtn = screen.getByText(/see digest/i); fireEvent.click(openBtn); expect(screen.queryByText(/see digest/i)).not.toBeInTheDocument(); expect(screen.getByText(/hide digest/i)).toBeInTheDocument(); }); it('should navigate to tag page details when tag is clicked', async () => { - render(); + render(); const tagLink = await screen.findByText('latest'); fireEvent.click(tagLink); await waitFor(() => { diff --git a/src/api.js b/src/api.js index 3cd497e7..a6f3379a 100644 --- a/src/api.js +++ b/src/api.js @@ -65,7 +65,7 @@ const endpoints = { (pageNumber - 1) * pageSize }}){Name LastUpdated Size Platforms {Os Arch} NewestImage { Tag Description Licenses Title Source IsSigned Documentation History {Layer {Size Digest} HistoryDescription {Created CreatedBy Author Comment EmptyLayer}} Vendor Labels} DownloadCount}}`, detailedRepoInfo: (name) => - `/v2/_zot/ext/search?query={ExpandedRepoInfo(repo:"${name}"){Images {Digest Tag Layers {Size Digest}} Summary {Name LastUpdated Size Platforms {Os Arch} Vendors NewestImage {RepoName Layers {Size Digest} Digest Tag Title Documentation DownloadCount Source Description History {Layer {Size Digest} HistoryDescription {Created CreatedBy Author Comment EmptyLayer}}}}}}`, + `/v2/_zot/ext/search?query={ExpandedRepoInfo(repo:"${name}"){Images {Digest Tag LastUpdated Vendor Size Platform {Os Arch} } Summary {Name LastUpdated Size Platforms {Os Arch} Vendors NewestImage {RepoName Layers {Size Digest} Digest Tag Title Documentation DownloadCount Source Description History {Layer {Size Digest} HistoryDescription {Created CreatedBy Author Comment EmptyLayer}}}}}}`, detailedImageInfo: (name, tag) => `/v2/_zot/ext/search?query={Image(image: "${name}:${tag}"){RepoName Tag Digest LastUpdated Size ConfigDigest Platform {Os Arch} Vendor History {Layer {Size Digest Score} HistoryDescription {Created CreatedBy Author Comment EmptyLayer} }}}`, vulnerabilitiesForRepo: (name) => diff --git a/src/components/RepoDetails.jsx b/src/components/RepoDetails.jsx index 0f121c86..44beda20 100644 --- a/src/components/RepoDetails.jsx +++ b/src/components/RepoDetails.jsx @@ -118,6 +118,7 @@ const randomImage = () => { function RepoDetails() { const [repoDetailData, setRepoDetailData] = useState({}); + const [tags, setTags] = useState([]); // @ts-ignore const [isLoading, setIsLoading] = useState(true); const [selectedTab, setSelectedTab] = useState('Overview'); @@ -147,6 +148,7 @@ function RepoDetails() { overview: repoInfo.Summary?.NewestImage.Documentation }; setRepoDetailData(imageData); + setTags(imageData.images); } setIsLoading(false); }) @@ -154,6 +156,7 @@ function RepoDetails() { console.error(e); setRepoDetailData({}); setIsLoading(false); + setTags([]); }); return () => { abortController.abort(); @@ -313,7 +316,7 @@ function RepoDetails() { {renderOverview()} - + {/* {renderDependencies()} diff --git a/src/components/Tags.jsx b/src/components/Tags.jsx index 5bf6f5b9..67586579 100644 --- a/src/components/Tags.jsx +++ b/src/components/Tags.jsx @@ -15,7 +15,6 @@ import Typography from '@mui/material/Typography'; import transform from 'utilities/transform'; import { Card, CardContent, Divider, Stack } from '@mui/material'; import { makeStyles } from '@mui/styles'; -import { useEffect } from 'react'; const useStyles = makeStyles(() => ({ tagCard: { @@ -55,24 +54,17 @@ const useStyles = makeStyles(() => ({ })); function TagCard(props) { - const { row, lastUpdated, vendors, size, platform } = props; + const { tag, lastUpdated, vendors, digest, size, platform } = props; //const tags = data && data.tags; const [open, setOpen] = React.useState(false); - const [digests, setDigests] = React.useState([]); const classes = useStyles(); - const tagRow = row; // @ts-ignore const lastDate = (lastUpdated ? DateTime.fromISO(lastUpdated) : DateTime.now().minus({ days: 1 })).toRelative({ unit: 'days' }); const navigate = useNavigate(); - useEffect(() => { - const tagDigest = [{ digest: tagRow.Digest, osArch: platform[0], size: size }]; - setDigests(tagDigest); - }, []); - const goToTags = (tag) => { navigate(`tag/${tag}`); }; @@ -87,9 +79,9 @@ function TagCard(props) { variant="body1" align="left" sx={{ color: '#1479FF', fontSize: '1rem', textDecorationLine: 'underline', cursor: 'pointer' }} - onClick={() => goToTags(tagRow.Tag)} + onClick={() => goToTags(tag)} > - {tagRow?.Tag} + {tag} @@ -97,7 +89,7 @@ function TagCard(props) { Last pushed - {lastDate || 'Date not available'} by {vendors[0] || 'Vendor not available'} + {lastDate || 'Date not available'} by {vendors || 'Vendor not available'} @@ -130,27 +122,24 @@ function TagCard(props) { - {digests.map((layer) => ( - { - navigator.clipboard.writeText(layer.digest); - }} - > - - {layer.digest?.substr(0, 12)} - - - - {' '} - {layer.osArch?.Os}/{layer.osArch?.Arch}{' '} - - - - {transform.formatBytes(layer.size)} - - - ))} + { + navigator.clipboard.writeText(digest); + }} + > + + {digest?.substr(0, 12)} + + + + {platform.Os}/{platform.Arch} + + + + {transform.formatBytes(size)} + + @@ -172,12 +161,20 @@ function TagCard(props) { // }).isRequired, // }; -const renderTags = (tags, lastUpdated, vendors, size, platform) => { +const renderTags = (tags) => { const cmp = tags && tags.map((tag) => { return ( - + ); }); return cmp; @@ -185,9 +182,8 @@ const renderTags = (tags, lastUpdated, vendors, size, platform) => { export default function Tags(props) { const classes = useStyles(); - const { data } = props; - const { images, lastUpdated, vendors, size, platforms } = data; - + const { tags } = props; + console.log(JSON.stringify(tags)); return ( @@ -209,7 +205,7 @@ export default function Tags(props) { width: '100%' }} /> - {renderTags(images, lastUpdated, vendors, size, platforms)} + {renderTags(tags)} );