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

implemented repository details, working on tags

Browse Source
This commit is contained in:
CodeServer 2022-04-11 12:05:36 +01:00
parent 3fc9aafb5b
commit e566be9c67
7 changed files with 122 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/navbar/NavBar.tsx
View File

@ -9,6 +9,7 @@ import { loginInfo } from "../../context/AuthProvider";
import Tag from "../../interfaces/Tag";
import Repository from "../../interfaces/Repositoriy";
import Layer from "../../interfaces/Layer";
import { getHostNameFromURL } from "../../utils";
const NavBar: React.FC = () => {
const { auth } = useAuth();
@ -22,8 +23,7 @@ const NavBar: React.FC = () => {
const handleClick = () => {
const url = process.env.REGISTRY_URL ? process.env.REGISTRY_URL : "";
const urlSplit = url.split('/');
navigator.clipboard.writeText(urlSplit[urlSplit.length - 1]);
navigator.clipboard.writeText(getHostNameFromURL(url));
setSnackbarOpen(true);
};

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

@ -1,19 +1,79 @@
import React from "react";
import { useLocation } from "react-router-dom";
import { ListItemButton, Box, Typography, Grid, ListItemText } from "@mui/material";
import { ListItemButton, Button, Box, Card, CardContent, Typography, CardActions, Grid, ListItemText, Snackbar, Alert } from "@mui/material";
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import useRepositories from "../../hooks/useRepositories";
import Tag from "../../interfaces/Tag";
import Repository from "../../interfaces/Repositoriy";
import { getHostNameFromURL, printSize, printTimePassed } from "../../utils";
import NotFound from "../NotFound";
const RepositoryInfo: React.FC = () => {
const location = useLocation();
const path = location.pathname;
const { repositories } = useRepositories();
const [snackbarOpen, setSnackbarOpen] = 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 handleClick = () => {
const hostName = getHostNameFromURL(process.env.REGISTRY_URL ? process.env.REGISTRY_URL : "");
navigator.clipboard.writeText(generatePushCommand(hostName));
setSnackbarOpen(true);
};
const handleClose = () => {
setSnackbarOpen(false);
};
return (repository ? (
<h1>{repository?.tags.map((tag) => (tag.label)).join(" ")}</h1>
<div className="repositoryInfo">
<Card className="repositoryDetail" variant="outlined">
<CardContent>
{/* <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
Word of the Day
</Typography> */}
<Typography className="lines" variant="h5" component="div">
{repository.name}
</Typography>
<Typography className="lines" sx={{ mb: 1.5 }} color="text.secondary">
<AccessTimeIcon className="clock-icon" />
{"Last updated: " + repository.tags.filter((tag: Tag) => (tag.label === "latest")).map((tag: Tag) => (tag.created ? printTimePassed(tag.created) : "")).join(" ")}
</Typography>
<Typography className="lines" variant="h6">
Docker commands
</Typography>
<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>
</CardContent>
{/* <CardActions>
<Button size="small">Learn More</Button>
</CardActions> */}
<Snackbar open={snackbarOpen} autoHideDuration={6000} onClose={handleClose}>
<Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
Copied!
</Alert>
</Snackbar>
</Card>
<Card className="tagsDetail" variant="outlined">
<CardContent>
<Typography className="lines" variant="h6">
Tags
</Typography>
<Typography className="lines" variant="body2">
{"This repository contains " + repository.tags.length + " tag" + (repository.tags.length > 1 ? "s" : "") + "."}
</Typography>
</CardContent>
<CardActions>
<Button size="small">Details</Button>
</CardActions>
</Card>
</div>
) : (
<NotFound />
));

1
src/style/modules/_modules-dir.sass
View File

@ -1,3 +1,4 @@
@import "sectionHome"
@import "repositoryInfo"
@import "login"
@import "URL"

19
src/style/modules/_repositoryInfo.sass Normal file
View File

@ -0,0 +1,19 @@
.repositoryInfo
.repositoryDetail
margin: 5%
padding: 15px
.lines
margin-bottom: 10px
.clock-icon
vertical-align: middle
margin-right: 10px
.commandDisplay
line-height: 300%
border-radius: 5px
padding: 0 15px
margin-top: 5px
.tagsDetail
margin: 5%
padding: 15px
.lines
margin-bottom: 10px

30
src/style/style.css
View File

@ -24,6 +24,36 @@ a {
margin: auto;
}
.repositoryInfo .repositoryDetail {
margin: 5%;
padding: 15px;
}
.repositoryInfo .repositoryDetail .lines {
margin-bottom: 10px;
}
.repositoryInfo .repositoryDetail .clock-icon {
vertical-align: middle;
margin-right: 10px;
}
.repositoryInfo .repositoryDetail .commandDisplay {
line-height: 300%;
border-radius: 5px;
padding: 0 15px;
margin-top: 5px;
}
.repositoryInfo .tagsDetail {
margin: 5%;
padding: 15px;
}
.repositoryInfo .tagsDetail .lines {
margin-bottom: 10px;
}
.login .grid-container {
-webkit-box-align: center;
-ms-flex-align: center;

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

@ -1,6 +1,6 @@
{
"version": 3,
"mappings": "AG8CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AAElB,AAAA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;CAAG;;AElD5B,AAAA,OAAO,CAAC;EACJ,MAAM,EAAE,CAAC;CAKU;;AANvB,AAEI,OAFG,CAEH,SAAS,CAAC;EACN,KAAK,EAAE,KAAK;CAAG;;AAHvB,AAII,OAJG,CAIH,WAAW,CAAC;EACR,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,GAAG;CAAG;;AGNrB,AACI,YADQ,CACR,eAAe,CAAC;EACZ,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;CAAG;;ACHvB,AACI,MADE,CACF,eAAe,CAAC;EACZ,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,cAAc;CAeS;;AApB1C,AAMQ,MANF,CACF,eAAe,GAKT,CAAC,CAAC;EACA,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,MAAM;CAAG;;AAR7B,AASQ,MATF,CACF,eAAe,CAQX,YAAY,CAAC;EACT,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,IAAI;EACZ,SAAS,EAAE,IAAI;CAAG;;AAb9B,AAcQ,MAdF,CACF,eAAe,CAaX,UAAU,CAAC;EACP,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;CACpB;;AAjBF,AAkBQ,MAlBF,CACF,eAAe,CAiBX,eAAe,CAAC;EACZ,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,OAAO;CAAG;;ACpBxC,AAAA,QAAQ,CAAC;EACL,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;CAEU;;AAL7B,AAII,QAJI,CAIJ,eAAe,CAAC;EACZ,UAAU,EAAE,IAAI;CAAG",
"mappings": "AG8CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AAElB,AAAA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;CAAG;;AElD5B,AAAA,OAAO,CAAC;EACJ,MAAM,EAAE,CAAC;CAKU;;AANvB,AAEI,OAFG,CAEH,SAAS,CAAC;EACN,KAAK,EAAE,KAAK;CAAG;;AAHvB,AAII,OAJG,CAIH,WAAW,CAAC;EACR,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,GAAG;CAAG;;AGNrB,AACI,YADQ,CACR,eAAe,CAAC;EACZ,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;CAAG;;ACHvB,AACI,eADW,CACX,iBAAiB,CAAC;EACd,MAAM,EAAE,EAAE;EACV,OAAO,EAAE,IAAI;CAUW;;AAbhC,AAIQ,eAJO,CACX,iBAAiB,CAGb,MAAM,CAAC;EACH,aAAa,EAAE,IAAI;CAAG;;AALlC,AAMQ,eANO,CACX,iBAAiB,CAKb,WAAW,CAAC;EACR,cAAc,EAAE,MAAM;EACtB,YAAY,EAAE,IAAI;CAAG;;AARjC,AASQ,eATO,CACX,iBAAiB,CAQb,eAAe,CAAC;EACZ,WAAW,EAAE,IAAI;EACjB,aAAa,EAAE,GAAG;EAClB,OAAO,EAAE,MAAM;EACf,UAAU,EAAE,GAAG;CAAG;;AAb9B,AAcI,eAdW,CAcX,WAAW,CAAC;EACR,MAAM,EAAE,EAAE;EACV,OAAO,EAAE,IAAI;CAEe;;AAlBpC,AAiBQ,eAjBO,CAcX,WAAW,CAGP,MAAM,CAAC;EACH,aAAa,EAAE,IAAI;CAAG;;AClBlC,AACI,MADE,CACF,eAAe,CAAC;EACZ,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,cAAc;CAeS;;AApB1C,AAMQ,MANF,CACF,eAAe,GAKT,CAAC,CAAC;EACA,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,MAAM;CAAG;;AAR7B,AASQ,MATF,CACF,eAAe,CAQX,YAAY,CAAC;EACT,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,IAAI;EACZ,SAAS,EAAE,IAAI;CAAG;;AAb9B,AAcQ,MAdF,CACF,eAAe,CAaX,UAAU,CAAC;EACP,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;CACpB;;AAjBF,AAkBQ,MAlBF,CACF,eAAe,CAiBX,eAAe,CAAC;EACZ,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,OAAO;CAAG;;ACpBxC,AAAA,QAAQ,CAAC;EACL,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;CAEU;;AAL7B,AAII,QAJI,CAIJ,eAAe,CAAC;EACZ,UAAU,EAAE,IAAI;CAAG",
"sources": [
"style.sass",
"_variables.sass",
@ -11,6 +11,7 @@
"layouts/_footer.sass",
"modules/_modules-dir.sass",
"modules/_sectionHome.sass",
"modules/_repositoryInfo.sass",
"modules/_login.sass",
"modules/_URL.sass"
],

7
src/utils.tsx
View File

@ -15,6 +15,11 @@ const checkValidURL = async (url: string) => {
return true;
}
const getHostNameFromURL = (url: string): string => {
const urlSplit = url.split('/');
return urlSplit[urlSplit.length - 1];
}
const printTwoDecimalPlaces = (num: number): string => {
return (Math.round(num * 100) / 100).toFixed(2);
}
@ -49,4 +54,4 @@ const printSize = (sizeInByte: number): string => {
}
};
export { checkValidURL, printTwoDecimalPlaces, printTimePassed, printSize };
export { checkValidURL, printTwoDecimalPlaces, printTimePassed, printSize, getHostNameFromURL };