alt/zot-wo-auth
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated repo details component to consume new extendedrepoinfo api

Browse Source 
Signed-off-by: Raul Kele <raulkeleblk@gmail.com>
This commit is contained in:
Raul Kele 2022-08-18 19:20:39 +03:00
parent 428b819bab
commit f7e5aff614
7 changed files with 63 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/__tests__/Shared/PreviewCard.test.js
View File

@ -35,7 +35,7 @@ describe('Preview card component', () => {
const cardTitle = await screen.findByText('alpine');
expect(cardTitle).toBeInTheDocument();
userEvent.click(cardTitle);
expect(mockedUsedNavigate).toBeCalledWith(`/image/${mockImage.name}`, expect.anything());
expect(mockedUsedNavigate).toBeCalledWith(`/image/${mockImage.name}`);
});
});

2
src/__tests__/Shared/RepoCard.test.js
View File

@ -47,7 +47,7 @@ describe('Repo card component', () => {
const cardTitle = await screen.findByText('alpine');
expect(cardTitle).toBeInTheDocument();
userEvent.click(cardTitle);
expect(mockedUsedNavigate).toBeCalledWith(`/image/${mockImage.name}`, expect.anything());
expect(mockedUsedNavigate).toBeCalledWith(`/image/${mockImage.name}`);
});
});

2
src/api.js
View File

@ -62,7 +62,7 @@ const api = {
const endpoints = {
imageList: '/v2/_zot/ext/search?query={ImageListWithLatestTag () { Name Latest LastUpdated Description Licenses Vendor Size Labels}}',
detailedRepoInfo: (name) => `/v2/_zot/ext/search?query={ExpandedRepoInfo(repo:"${name}"){Manifests {Digest Tag Layers {Size Digest}}}}`
detailedRepoInfo: (name) => `/v2/_zot/ext/search?query={ExpandedRepoInfo(repo:"${name}"){Manifests {Digest Tag Layers {Size Digest}} Summary {Name LastUpdated Size Platforms {Os Arch} Vendors NewestTag {Tag}}}}`
}
export {api, endpoints};

5
src/components/PreviewCard.jsx
View File

@ -1,6 +1,5 @@
import { Card, CardActionArea, CardContent, CardMedia, Grid, Stack, Typography } from '@mui/material';
import { makeStyles } from '@mui/styles';
import { DateTime } from 'luxon';
import React from 'react';
import { useNavigate } from 'react-router-dom';
import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
@ -64,10 +63,10 @@ const useStyles = makeStyles(() => ({
function PreviewCard(props) {
const classes = useStyles();
const navigate = useNavigate();
const { name, lastUpdated } = props;
const { name } = props;
const goToDetails = (repo) => {
navigate(`/image/${name}`, { state: { lastDate: (lastUpdated ? DateTime.fromISO(lastUpdated) : DateTime.now().minus({ days: 1 })).toRelative({ unit: 'days' }) } });
navigate(`/image/${name}`);
};
const verifiedCheck = () => {

2
src/components/RepoCard.jsx
View File

@ -75,7 +75,7 @@ function RepoCard(props) {
const { name, vendor, description, lastUpdated, downloads, rating, version } = props;
const goToDetails = (repo) => {
navigate(`/image/${name}`, { state: { lastDate: (lastUpdated ? DateTime.fromISO(lastUpdated) : DateTime.now().minus({ days: 1 })).toRelative({ unit: 'days' }) } });
navigate(`/image/${name}`);
}
const verifiedCheck = () => {

100
src/components/RepoDetails.jsx
View File

@ -1,5 +1,5 @@
// react global
import { useLocation, useParams } from 'react-router-dom'
import { useParams } from 'react-router-dom'
import React, { useEffect, useState } from 'react';
// utility
@ -87,6 +87,14 @@ const useStyles = makeStyles((theme) => ({
order:0,
width:"100%"
},
platformText:{
backgroundColor:"#EDE7F6",
color: "#220052",
fontWeight:'400',
fontSize:'0.8125rem',
lineHeight:'1.125rem',
letterSpacing:'0.01rem'
}
}));
@ -108,9 +116,6 @@ function RepoDetails (props) {
// get url param from <Route here (i.e. image name)
const {name} = useParams();
const {state} = useLocation() || {};
// @ts-ignore
const {lastDate} = state || {};
const classes = useStyles();
const {description, overviewTitle, dependencies, dependents} = props;
@ -118,10 +123,15 @@ function RepoDetails (props) {
api.get(`${host()}${endpoints.detailedRepoInfo(name)}`)
.then(response => {
if (response.data && response.data.data) {
let imageList = response.data.data.ExpandedRepoInfo;
let repoInfo = response.data.data.ExpandedRepoInfo;
let imageData = {
name: name,
tags: imageList.Manifests
tags: repoInfo.Manifests,
lastUpdated: repoInfo.Summary?.LastUpdated,
size: repoInfo.Summary?.Size,
platforms: repoInfo.Summary?.Platforms,
vendors: repoInfo.Summary?.Vendors,
newestTag: repoInfo.Summary?.NewestTag
}
setRepoDetailData(imageData);
setIsLoading(false);
@ -131,18 +141,7 @@ function RepoDetails (props) {
console.error(e);
setRepoDetailData({});
});
}, [])
const getLatestManifest = () => {
// @ts-ignore
const manifests = repoDetailData.tags || [{}];
return manifests[0];
}
const getLatestLayer = () => {
const layers = getLatestManifest().Layers || [{}];
return layers[0];
}
}, [name])
const verifiedCheck = () => {
return (<CheckCircleOutlineOutlinedIcon sx={{color:"#388E3C!important"}}/>);
@ -150,9 +149,10 @@ function RepoDetails (props) {
const platformChips = () => {
// if platforms not received, mock data
const platforms = props.platforms || ["Windows","PowerPC64LE","IBM Z","Linux"];
// @ts-ignore
const platforms = repoDetailData.platforms || ["Windows","PowerPC64LE","IBM Z","Linux"];
return platforms.map((platform, index) => (
<Chip key={index} label={platform} sx={{backgroundColor:"#EDE7F6", color: "#311B92"}}/>
<Chip key={index} label={platform.Os} className={classes.platformText}/>
));
}
@ -172,29 +172,29 @@ function RepoDetails (props) {
);
};
const renderDependencies = () => {
return (<Card className={classes.card}>
<CardContent>
<Typography variant="h4" align="left">Dependecies ({dependencies || '---'})</Typography>
</CardContent>
</Card>);
};
// const renderDependencies = () => {
// return (<Card className={classes.card}>
// <CardContent>
// <Typography variant="h4" align="left">Dependecies ({dependencies || '---'})</Typography>
// </CardContent>
// </Card>);
// };
const renderDependents = () => {
return (<Card className={classes.card}>
<CardContent>
<Typography variant="h4" align="left">Dependents ({dependents || '---'})</Typography>
</CardContent>
</Card>);
};
// const renderDependents = () => {
// return (<Card className={classes.card}>
// <CardContent>
// <Typography variant="h4" align="left">Dependents ({dependents || '---'})</Typography>
// </CardContent>
// </Card>);
// };
const renderVulnerabilities = () => {
return (<Card className={classes.card}>
<CardContent>
<Typography variant="h4" align="left">Vulnerabilities</Typography>
</CardContent>
</Card>);
};
// const renderVulnerabilities = () => {
// return (<Card className={classes.card}>
// <CardContent>
// <Typography variant="h4" align="left">Vulnerabilities</Typography>
// </CardContent>
// </Card>);
// };
return (
@ -254,12 +254,12 @@ function RepoDetails (props) {
>
<Tab value="Overview" label="Overview" className={classes.tabContent}/>
<Tab value="Tags" label="Tags" className={classes.tabContent}/>
<Tab value="Dependencies" label={`${dependencies || 0} Dependencies`} className={classes.tabContent}/>
{/* <Tab value="Dependencies" label={`${dependencies || 0} Dependencies`} className={classes.tabContent}/>
<Tab value="Dependents" label={`${dependents || 0} Dependents`} className={classes.tabContent}/>
<Tab value="Vulnerabilities" label="Vulnerabilities" className={classes.tabContent}/>
<Tab value="6" label="Tab 6" className={classes.tabContent}/>
<Tab value="7" label="Tab 7" className={classes.tabContent}/>
<Tab value="8" label="Tab 8" className={classes.tabContent}/>
<Tab value="8" label="Tab 8" className={classes.tabContent}/> */}
</TabList>
<Grid container>
<Grid item xs={8}>
@ -269,7 +269,7 @@ function RepoDetails (props) {
<TabPanel value="Tags" className={classes.tabPanel}>
<Tags data={repoDetailData} />
</TabPanel>
<TabPanel value="Dependencies" className={classes.tabPanel}>
{/* <TabPanel value="Dependencies" className={classes.tabPanel}>
{renderDependencies()}
</TabPanel>
<TabPanel value="Dependents" className={classes.tabPanel}>
@ -277,14 +277,16 @@ function RepoDetails (props) {
</TabPanel>
<TabPanel value="Vulnerabilities" className={classes.tabPanel}>
{renderVulnerabilities()}
</TabPanel>
</TabPanel> */}
</Grid>
<Grid item xs={4} className={classes.metadata}>
<RepoDetailsMetadata
name={name}
lastUpdated={lastDate}
size={getLatestLayer()?.size}
latestTag={getLatestManifest()?.Tag}
// @ts-ignore
lastUpdated={repoDetailData.lastUpdated}
// @ts-ignore
size={repoDetailData.size}
// @ts-ignore
latestTag={repoDetailData.newestTag}
/>
</Grid>
</Grid>

55
src/components/RepoDetailsMetadata.jsx
View File

@ -1,5 +1,6 @@
import { Card, CardContent, Grid, Typography } from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import { DateTime } from 'luxon';
import React from 'react';
import transform from '../utilities/transform';
@ -34,8 +35,8 @@ const useStyles = makeStyles(() => ({
function RepoDetailsMetadata (props) {
const classes = useStyles();
const {name, repoURL, weeklyDownloads, lastUpdated, size, filesNr, latestTag, issues, prs} = props;
const {repoURL, weeklyDownloads, lastUpdated, size, filesNr} = props;
const lastDate = (lastUpdated ? DateTime.fromISO(lastUpdated) : DateTime.now().minus({ days: 1 })).toRelative({ unit: 'days' })
return (
<Grid container spacing={1}>
<Grid container item xs={12}>
@ -59,39 +60,21 @@ function RepoDetailsMetadata (props) {
<Card variant="outlined" className={classes.card}>
<CardContent>
<Typography variant="body2" align="left" className={classes.metadataHeader}>Last publish</Typography>
<Typography variant="body1" className={classes.metadataBody}>{lastUpdated || `35 days ago`}</Typography>
<Typography variant="body1" className={classes.metadataBody}>{lastDate || `35 days ago`}</Typography>
</CardContent>
</Card>
</Grid>
<Grid item xs={6}>
<Card variant="outlined" className={classes.card}>
<CardContent>
<Typography variant="body2" align="left" className={classes.metadataHeader}>Image size</Typography>
<Typography variant="body2" align="left" className={classes.metadataHeader}>Total size</Typography>
<Typography variant="body1" className={classes.metadataBody}>{transform.formatBytes(size) || `----`}</Typography>
</CardContent>
</Card>
</Grid>
</Grid>
<Grid container item xs={12} spacing={2}>
<Grid item xs={6}>
<Card variant="outlined" className={classes.card}>
<CardContent>
<Typography variant="body2" align="left" className={classes.metadataHeader}>Last publish</Typography>
<Typography variant="body1" className={classes.metadataBody}>{lastUpdated || `----`}</Typography>
</CardContent>
</Card>
</Grid>
<Grid item xs={6}>
<Card variant="outlined" className={classes.card}>
<CardContent>
<Typography variant="body2" align="left" className={classes.metadataHeader}>Image size</Typography>
<Typography variant="body1" className={classes.metadataBody}>{size || `----`}</Typography>
</CardContent>
</Card>
</Grid>
</Grid>
<Grid container item xs={12} spacing={2}>
<Grid item xs={6}>
<Grid item xs={12}>
<Card variant="outlined" className={classes.card}>
<CardContent>
<Typography variant="body2" align="left" className={classes.metadataHeader}>Files</Typography>
@ -99,32 +82,6 @@ function RepoDetailsMetadata (props) {
</CardContent>
</Card>
</Grid>
<Grid item xs={6}>
<Card variant="outlined" className={classes.card}>
<CardContent>
<Typography variant="body2" align="left" className={classes.metadataHeader}>Latest tag</Typography>
<Typography variant="body1" align="left" className={classes.metadataBody}>{latestTag || `----`}</Typography>
</CardContent>
</Card>
</Grid>
</Grid>
<Grid container item xs={12} spacing={2}>
<Grid item xs={6}>
<Card variant="outlined" className={classes.card}>
<CardContent>
<Typography variant="body2" align="left" className={classes.metadataHeader}>Issues</Typography>
<Typography variant="body1" align="left" className={classes.metadataBody}>{issues || `----`}</Typography>
</CardContent>
</Card>
</Grid>
<Grid item xs={6}>
<Card variant="outlined" className={classes.card}>
<CardContent>
<Typography variant="body2" align="left" className={classes.metadataHeader}>Pull requests</Typography>
<Typography variant="body1" align="left" className={classes.metadataBody}>{prs || `----`}</Typography>
</CardContent>
</Card>
</Grid>
</Grid>
</Grid>
)