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

fix: Change display of uses/used by, cleanup repocard usage

Browse Source 
Signed-off-by: Raul Kele <raulkeleblk@gmail.com>
This commit is contained in:
Raul Kele 2022-10-13 16:33:34 +03:00
parent 4305f6de07
commit a1602b97c1
11 changed files with 39 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,14 +35,9 @@ describe('Repo card component', () => {
name={mockImage.name}
version={mockImage.latestVersion}
description={mockImage.description}
tags={mockImage.tags}
vendor={mockImage.vendor}
size={mockImage.size}
licenses={mockImage.licenses}
key={1}
data={mockImage}
lastUpdated={mockImage.lastUpdated}
shown={true}
/>
);
const cardTitle = await screen.findByText('alpine');

2
src/__tests__/TagPage/DependsOn.test.js
View File

@ -51,7 +51,7 @@ describe('Dependencies tab', () => {
// @ts-ignore
jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: mockDependenciesList });
render(<RouterDependsWrapper />);
expect(await screen.findAllByRole('link')).toHaveLength(4);
expect(await screen.findAllByText(/published/i)).toHaveLength(4);
});
it('renders no dependencies if there are not any', async () => {

2
src/__tests__/TagPage/IsDependentOn.test.js
View File

@ -51,7 +51,7 @@ describe('Dependents tab', () => {
// @ts-ignore
jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: mockDependentsList });
render(<RouterDependsWrapper />);
expect(await screen.findAllByRole('link')).toHaveLength(4);
expect(await screen.findAllByText(/published/i)).toHaveLength(4);
});
it('renders no dependents if there are not any', async () => {

6
src/api.js
View File

@ -74,8 +74,10 @@ const endpoints = {
`/v2/_zot/ext/search?query={Image(image: "${name}"){History {Layer {Size Digest Score} HistoryDescription {Created CreatedBy Author Comment EmptyLayer} }}}`,
imageListWithCVEFixed: (cveId, repoName) =>
`/v2/_zot/ext/search?query={ImageListWithCVEFixed(id:"${cveId}", image:"${repoName}") {Tag}}`,
dependsOnForImage: (name) => `/v2/_zot/ext/search?query={BaseImageList(image: "${name}"){RepoName}}`,
isDependentOnForImage: (name) => `/v2/_zot/ext/search?query={DerivedImageList(image: "${name}"){RepoName}}`,
dependsOnForImage: (name) =>
`/v2/_zot/ext/search?query={BaseImageList(image: "${name}"){RepoName Tag Description Vendor LastUpdated Platform {Os Arch} IsSigned}}`,
isDependentOnForImage: (name) =>
`/v2/_zot/ext/search?query={DerivedImageList(image: "${name}"){RepoName Tag Description Vendor LastUpdated Platform {Os Arch} IsSigned}}`,
globalSearch: ({ searchQuery = '""', pageNumber = 1, pageSize = 15, filter = {} }) => {
const searchParam = searchQuery !== '' ? `query:"${searchQuery}"` : `query:""`;
const paginationParam = `requestedPage: {limit:${pageSize} offset:${(pageNumber - 1) * pageSize}}`;

43
src/components/DependsOn.jsx
View File

@ -4,12 +4,11 @@ import React, { useEffect, useState, useMemo } from 'react';
import { api, endpoints } from '../api';
// components
import { Divider, Typography, Card, CardContent } from '@mui/material';
import { Divider, Typography } from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import { Link } from 'react-router-dom';
import { host } from '../host';
import Monitor from '../assets/Monitor.png';
import Loading from './Loading';
import RepoCard from './RepoCard';
const useStyles = makeStyles(() => ({
card: {
@ -95,22 +94,22 @@ function DependsOn(props) {
const renderDependencies = () => {
return images?.length ? (
<Card className={classes.card} raised>
<CardContent>
<Typography className={classes.content}>
{images.map((dependence, index) => {
return (
<Link key={index} className={classes.link} to={`/image/${encodeURIComponent(dependence.RepoName)}`}>
{dependence.RepoName}
</Link>
);
})}
</Typography>
</CardContent>
</Card>
images.map((dependence, index) => {
return (
<RepoCard
name={dependence.RepoName}
version={dependence.Tag}
description={dependence.Description}
vendor={dependence.Vendor}
platforms={[dependence.Platform]}
isSigned={dependence.IsSigned}
key={index}
lastUpdated={dependence.LastUpdated}
/>
);
})
) : (
<div>
<img src={Monitor} alt="Monitor" className={classes.monitor}></img>
<Typography className={classes.none}> Nothing found </Typography>
</div>
);
@ -118,16 +117,6 @@ function DependsOn(props) {
return (
<div data-testid="depends-on-container">
<Typography
variant="h4"
gutterBottom
component="div"
align="left"
className={classes.title}
style={{ color: 'rgba(0, 0, 0, 0.87)', fontSize: '1.5rem', fontWeight: '600', paddingTop: '0.5rem' }}
>
Depends On
</Typography>
<Divider
variant="fullWidth"
sx={{ margin: '5% 0% 5% 0%', background: 'rgba(0, 0, 0, 0.38)', height: '0.00625rem', width: '100%' }}

5
src/components/Explore.jsx
View File

@ -109,15 +109,10 @@ function Explore() {
version={item.latestVersion}
description={item.description}
isSigned={item.isSigned}
tags={item.tags}
vendor={item.vendor}
platforms={item.platforms}
size={item.size}
licenses={item.licenses}
key={index}
data={item}
lastUpdated={item.lastUpdated}
shown={true}
/>
);
})

2
src/components/HistoryLayers.jsx
View File

@ -8,7 +8,6 @@ import { api, endpoints } from '../api';
import { Card, CardContent, Divider, Grid, Stack, Typography } from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import { host } from '../host';
import Monitor from '../assets/Monitor.png';
import { isEmpty } from 'lodash';
import Loading from './Loading';
@ -210,7 +209,6 @@ function HistoryLayers(props) {
</Card>
) : (
<div>
<img src={Monitor} alt="Monitor" className={classes.monitor}></img>
<Typography className={classes.none}> No Layers </Typography>
</div>
)}

6
src/components/Home.jsx
View File

@ -120,7 +120,6 @@ function Home() {
// key={index}
// data={item}
// lastUpdated={item.lastUpdated}
// shown={true}
// />
// );
// })
@ -137,15 +136,10 @@ function Home() {
version={item.latestVersion}
description={item.description}
isSigned={item.isSigned}
tags={item.tags}
vendor={item.vendor}
platforms={item.platforms}
size={item.size}
licenses={item.licenses}
key={index}
data={item}
lastUpdated={item.lastUpdated}
shown={true}
/>
);
})

43
src/components/IsDependentOn.jsx
View File

@ -4,12 +4,11 @@ import React, { useEffect, useMemo, useState } from 'react';
import { api, endpoints } from '../api';
// components
import { Divider, Typography, Card, CardContent } from '@mui/material';
import { Divider, Typography } from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import { Link } from 'react-router-dom';
import { host } from '../host';
import Monitor from '../assets/Monitor.png';
import Loading from './Loading';
import RepoCard from './RepoCard';
const useStyles = makeStyles(() => ({
card: {
@ -95,22 +94,22 @@ function IsDependentOn(props) {
const renderDependents = () => {
return images?.length ? (
<Card className={classes.card} raised>
<CardContent>
<Typography className={classes.content}>
{images.map((dependence, index) => {
return (
<Link key={index} to={`/image/${encodeURIComponent(dependence.RepoName)}`} className={classes.link}>
{dependence.RepoName}
</Link>
);
})}
</Typography>
</CardContent>
</Card>
images.map((dependence, index) => {
return (
<RepoCard
name={dependence.RepoName}
version={dependence.Tag}
description={dependence.Description}
vendor={dependence.Vendor}
isSigned={dependence.IsSigned}
platforms={[dependence.Platform]}
key={index}
lastUpdated={dependence.LastUpdated}
/>
);
})
) : (
<div>
<img src={Monitor} alt="Monitor" className={classes.monitor}></img>
<Typography className={classes.none}> Nothing found </Typography>
</div>
);
@ -118,16 +117,6 @@ function IsDependentOn(props) {
return (
<div>
<Typography
variant="h4"
gutterBottom
component="div"
align="left"
className={classes.title}
style={{ color: 'rgba(0, 0, 0, 0.87)', fontSize: '1.5rem', fontWeight: '600', paddingTop: '0.5rem' }}
>
Is Dependent On
</Typography>
<Divider
variant="fullWidth"
sx={{ margin: '5% 0% 5% 0%', background: 'rgba(0, 0, 0, 0.38)', height: '0.00625rem', width: '100%' }}

2
src/components/RepoDetailsMetadata.jsx
View File

@ -61,7 +61,7 @@ function RepoDetailsMetadata(props) {
Total downloads
</Typography>
<Typography variant="body1" align="left" className={classes.metadataBody}>
{totalDownloads || `not available`}
{!isNaN(totalDownloads) ? totalDownloads : `not available`}
</Typography>
</CardContent>
</Card>

2
src/components/VulnerabilitiesDetails.jsx
View File

@ -10,7 +10,6 @@ import makeStyles from '@mui/styles/makeStyles';
import { host } from '../host';
import PestControlOutlinedIcon from '@mui/icons-material/PestControlOutlined';
import PestControlIcon from '@mui/icons-material/PestControl';
import Monitor from '../assets/Monitor.png';
import { isEmpty } from 'lodash';
import { Link } from 'react-router-dom';
import Loading from './Loading';
@ -291,7 +290,6 @@ function VulnerabilitiesDetails(props) {
} else {
return (
<div>
<img src={Monitor} alt="Monitor" className={classes.monitor}></img>
<Typography className={classes.none}> No Vulnerabilities </Typography>{' '}
</div>
);