diff --git a/src/components/repositoryInfo/RepositoryInfo.tsx b/src/components/repositoryInfo/RepositoryInfo.tsx index 4f9fc5b..3fcb315 100644 --- a/src/components/repositoryInfo/RepositoryInfo.tsx +++ b/src/components/repositoryInfo/RepositoryInfo.tsx @@ -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); }; @@ -34,6 +48,10 @@ const RepositoryInfo: React.FC = () => { const toggleHide = () => { setHideTags(!hideTags); } + + const toggleCollapse = () => { + setShowDetails((prev) => !prev); + }; return (isFetched ? ( repository ? ( @@ -61,7 +79,7 @@ const RepositoryInfo: React.FC = () => { To push a new tag to this repository, - {generatePushCommand(getHostNameFromURL(process.env.REGISTRY_URL ? process.env.REGISTRY_URL : ""))} + {generatePushCommand(getHostNameFromURL(process.env.REGISTRY_URL ? process.env.REGISTRY_URL : ""),"tagname")} @@ -70,7 +88,7 @@ const RepositoryInfo: React.FC = () => { */} - + Tags @@ -107,7 +125,7 @@ const RepositoryInfo: React.FC = () => { return result; } }).slice(0,((hideTags && repository.tags.length > 4) ? 3 : repository.tags.length)).map((tag) => ( - + @@ -159,11 +177,75 @@ const RepositoryInfo: React.FC = () => { )} + + - + - + + {repository.tags.map((tag) => ( + + + + + + TAG + + + {tag.label} + + + Last updated: {(tag.created ? printTimePassed(tag.created) : "")} + + + + + + To pull this image, + + (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)} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ))} + + Copied! diff --git a/src/style/modules/_repositoryInfo.sass b/src/style/modules/_repositoryInfo.sass index c3a1fbd..ff32f4e 100644 --- a/src/style/modules/_repositoryInfo.sass +++ b/src/style/modules/_repositoryInfo.sass @@ -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 diff --git a/src/style/style.css b/src/style/style.css index b1b0329..ad3b955 100644 --- a/src/style/style.css +++ b/src/style/style.css @@ -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%; diff --git a/src/style/style.css.map b/src/style/style.css.map index 6506728..b8ae35a 100644 --- a/src/style/style.css.map +++ b/src/style/style.css.map @@ -1,6 +1,6 @@ { "version": 3, - "mappings": "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", + "mappings": "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", "sources": [ "style.sass", "_variables.sass",