cochrane/DockerRegistryWebUI
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added tags detail

Browse Source
This commit is contained in:
CodeServer 2022-04-12 10:18:56 +01:00
parent 455b0b383e
commit 238913697b
4 changed files with 148 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
src/components/repositoryInfo/RepositoryInfo.tsx
View File

@ -1,13 +1,16 @@
import React from "react";
import { useLocation, Link } from "react-router-dom";
import { ListItemButton, Button, Box, Card, CardContent, Typography, CardActions, Grid, List, ListItemText, Snackbar, Alert, Tooltip } from "@mui/material";
import { ListItemButton, Button, Box, Card, CardContent, Typography, CardActions, Grid, List, ListItemText, Snackbar, Alert, Tooltip, Collapse } from "@mui/material";
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
import useRepositories from "../../hooks/useRepositories";
import Tag from "../../interfaces/Tag";
import Repository from "../../interfaces/Repositoriy";
import { getHostNameFromURL, printSize, printTimePassed, PrintOSIcon, toUpperFirst, printMonth } from "../../utils";
import RepoNotFound from "./RepoNotFound"
import Loading from "../Loading";
import { digestDisplay } from "../../interfaces/Utils";
const RepositoryInfo: React.FC = () => {
const location = useLocation();
@ -15,15 +18,26 @@ const RepositoryInfo: React.FC = () => {
const { isFetched, repositories } = useRepositories();
const [hideTags, setHideTags] = React.useState(true);
const [snackbarOpen, setSnackbarOpen] = React.useState(false);
const [showDetails, setShowDetails] = React.useState(false);
const repository = repositories.find((element) => (element.name === path.slice(12,path.length)));
const generatePushCommand = (hostName: string) => {
return "docker push " + hostName + "/" + (repository?.name ? repository?.name : "") + ":tagname";
const generatePushCommand = (hostName: string, tagName: string) => {
return "docker push " + hostName + "/" + (repository?.name ? repository?.name : "") + ":" + tagName;
}
const handleClick = () => {
const generatePullCommand = (hostName: string, tagName: string) => {
return "docker pull " + hostName + "/" + (repository?.name ? repository?.name : "") + ":" + tagName;
}
const handlePushClick = () => {
const hostName = getHostNameFromURL(process.env.REGISTRY_URL ? process.env.REGISTRY_URL : "");
navigator.clipboard.writeText(generatePushCommand(hostName));
navigator.clipboard.writeText(generatePushCommand(hostName,"tagname"));
setSnackbarOpen(true);
};
const handlePullClick = (tagName: string) => {
const hostName = getHostNameFromURL(process.env.REGISTRY_URL ? process.env.REGISTRY_URL : "");
navigator.clipboard.writeText(generatePullCommand(hostName,tagName));
setSnackbarOpen(true);
};
@ -35,6 +49,10 @@ const RepositoryInfo: React.FC = () => {
setHideTags(!hideTags);
}
const toggleCollapse = () => {
setShowDetails((prev) => !prev);
};
return (isFetched ? (
repository ? (
<div className="repositoryInfo">
@ -61,7 +79,7 @@ const RepositoryInfo: React.FC = () => {
<Typography className="lines" variant="body2">
To push a new tag to this repository,
</Typography>
<Box className="commandDisplay" onClick={handleClick} component="span" sx={{ display: 'block', bgcolor: '#445d6e', color: 'white', borderColor: '#445d6e' }}>{generatePushCommand(getHostNameFromURL(process.env.REGISTRY_URL ? process.env.REGISTRY_URL : ""))}</Box>
<Box className="commandDisplay" onClick={handlePushClick} component="span" sx={{ display: 'block', bgcolor: '#445d6e', color: 'white', borderColor: '#445d6e' }}>{generatePushCommand(getHostNameFromURL(process.env.REGISTRY_URL ? process.env.REGISTRY_URL : ""),"tagname")}</Box>
</Box>
</Grid>
</Grid>
@ -70,7 +88,7 @@ const RepositoryInfo: React.FC = () => {
<Button size="small">Learn More</Button>
</CardActions> */}
</Card>
<Card className="tagsDetail" variant="outlined">
<Card className="tagsOverview" variant="outlined">
<CardContent>
<Typography className="lines" variant="h6">
Tags
@ -107,7 +125,7 @@ const RepositoryInfo: React.FC = () => {
return result;
}
}).slice(0,((hideTags && repository.tags.length > 4) ? 3 : repository.tags.length)).map((tag) => (
<Grid container>
<Grid className="lines" container>
<Grid item sm={5}>
<ListItemText primary={tag.label} />
</Grid>
@ -159,11 +177,75 @@ const RepositoryInfo: React.FC = () => {
)}
</List>
</CardContent>
</Card>
<Card className="detailsCard" variant="outlined">
<CardActions>
<Button size="small">Details</Button>
<Button startIcon={showDetails ? <ExpandLessIcon /> : <ExpandMoreIcon />} onClick={toggleCollapse} size="small">Tag Details</Button>
</CardActions>
</Card>
<Snackbar open={snackbarOpen} autoHideDuration={6000} onClose={handleClose}>
<Collapse className="tagsDetail" in={showDetails}>
{repository.tags.map((tag) => (
<Card className="tagCard" variant="outlined">
<CardContent>
<Grid container>
<Grid item lg={6} md={12}>
<Typography className="lines" variant="h5" component="div" color="#94a1aa">
TAG
</Typography>
<Typography className="lines" variant="h5" component="div" color="#007bff">
{tag.label}
</Typography>
<Typography className="lines" sx={{ mb: 1.5 }}>
Last updated: <b>{(tag.created ? printTimePassed(tag.created) : "")}</b>
</Typography>
</Grid>
<Grid item lg={6} md={12}>
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography className="lines" variant="h6">
To pull this image,
</Typography>
<Box className="commandDisplay" onClick={() => (handlePullClick(tag.label))} component="span" sx={{ display: 'block', bgcolor: '#445d6e', color: 'white', borderColor: '#445d6e' }}>{generatePullCommand(getHostNameFromURL(process.env.REGISTRY_URL ? process.env.REGISTRY_URL : ""),tag.label)}</Box>
</Box>
</Grid>
<Grid item lg={12} md={12}>
<Grid className="lines" container>
<Grid item sm={5}>
<ListItemText primary="DIGEST" />
</Grid>
<Grid item sm={4}>
<ListItemText primary="OS/ARCH" />
</Grid>
<Grid item sm={3}>
<ListItemText style={{display:'flex', justifyContent:'flex-end'}} primary="SIZE" />
</Grid>
</Grid>
<List>
<ListItemButton
className="lines"
component={Link}
to={"/repository/" + repository.name + "/" + tag.label}
>
<Grid container>
<Grid item sm={5}>
<ListItemText style={{color: '#007bff'}} primary={digestDisplay(tag.digest)} />
</Grid>
<Grid item sm={4}>
<ListItemText primary={tag.os + "/" +tag.architecture} />
</Grid>
<Grid item sm={3}>
<ListItemText style={{display:'flex', justifyContent:'flex-end'}} primary={tag.size ? printSize(tag.size) : "---"} />
</Grid>
</Grid>
</ListItemButton>
</List>
</Grid>
</Grid>
</CardContent>
</Card>
))}
</Collapse>
<Snackbar open={snackbarOpen} autoHideDuration={1500} onClose={handleClose}>
<Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
Copied!
</Alert>

24
src/style/modules/_repositoryInfo.sass
View File

@ -14,9 +14,10 @@
border-radius: 5px
padding: 0 15px
margin-top: 5px
.tagsDetail
cursor: pointer
.tagsOverview
margin: 5%
padding: 15px
padding: 0 15px
.iconWrapper
height: 24px
width: 24px
@ -24,12 +25,29 @@
height: 24px
width: 24px
.lines
margin-bottom: 10px
margin-top: 10px
.moreBtn
margin-top: 10px
color: #1976d2
cursor: pointer
.moreBtn:focus
color: purple
.detailsCard
margin: 0 5%
padding: 0 15px
.tagCard
margin: 5%
padding: 15px
.commandDisplay
line-height: 200%
border-radius: 5px
padding: 0 15px
margin-top: 5px
cursor: pointer
.lines
margin-top: 10px
padding-left: 0
padding-right: 0
@media (max-width: 1199px)
.repositoryInfo

42
src/style/style.css
View File

@ -48,36 +48,62 @@ a {
border-radius: 5px;
padding: 0 15px;
margin-top: 5px;
cursor: pointer;
}
.repositoryInfo .tagsDetail {
.repositoryInfo .tagsOverview {
margin: 5%;
padding: 15px;
padding: 0 15px;
}
.repositoryInfo .tagsDetail .iconWrapper {
.repositoryInfo .tagsOverview .iconWrapper {
height: 24px;
width: 24px;
}
.repositoryInfo .tagsDetail .icon {
.repositoryInfo .tagsOverview .icon {
height: 24px;
width: 24px;
}
.repositoryInfo .tagsDetail .lines {
margin-bottom: 10px;
.repositoryInfo .tagsOverview .lines {
margin-top: 10px;
}
.repositoryInfo .tagsDetail .moreBtn {
.repositoryInfo .tagsOverview .moreBtn {
margin-top: 10px;
color: #1976d2;
cursor: pointer;
}
.repositoryInfo .tagsDetail .moreBtn:focus {
.repositoryInfo .tagsOverview .moreBtn:focus {
color: purple;
}
.repositoryInfo .detailsCard {
margin: 0 5%;
padding: 0 15px;
}
.repositoryInfo .tagCard {
margin: 5%;
padding: 15px;
}
.repositoryInfo .tagCard .commandDisplay {
line-height: 200%;
border-radius: 5px;
padding: 0 15px;
margin-top: 5px;
cursor: pointer;
}
.repositoryInfo .tagCard .lines {
margin-top: 10px;
padding-left: 0;
padding-right: 0;
}
@media (max-width: 1199px) {
.repositoryInfo {
max-width: 90%;

2
src/style/style.css.map
View File

@ -1,6 +1,6 @@
{
"version": 3,
"mappings": "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",
"mappings": "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",
"sources": [
"style.sass",
"_variables.sass",