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

added os icons

Browse Source
This commit is contained in:
CodeServer 2022-04-12 03:54:09 +01:00
parent e566be9c67
commit b4495c59c0
12 changed files with 209 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
package-lock.json generated
View File

@ -15,6 +15,7 @@
"axios": "^0.26.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-router-dom": "^6.2.1"
},
"devDependencies": {
@ -10224,6 +10225,14 @@
"react": "17.0.2"
}
},
"node_modules/react-icons": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
"integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -20040,6 +20049,12 @@
"scheduler": "^0.20.2"
}
},
"react-icons": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
"integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
"requires": {}
},
"react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

1
package.json
View File

@ -15,6 +15,7 @@
"axios": "^0.26.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-router-dom": "^6.2.1"
},
"scripts": {

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

9
src/components/Loading.tsx Normal file
View File

@ -0,0 +1,9 @@
import React from "react";
const Loading: React.FC = () => {
return(
<h1>Loading!</h1>
);
};
export default Loading;

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

@ -13,7 +13,7 @@ import { getHostNameFromURL } from "../../utils";
const NavBar: React.FC = () => {
const { auth } = useAuth();
const { setRepositories } = useRepositories();
const { setIsFetched, setRepositories } = useRepositories();
const [anchorElUser, setAnchorElUser] = React.useState<(EventTarget & HTMLButtonElement) | null>(null);
const [snackbarOpen, setSnackbarOpen] = React.useState(false);
@ -110,6 +110,11 @@ const NavBar: React.FC = () => {
tags.push(tag);
});
repository.tags = tags;
}).catch((err) => {
const index = newRepositories.indexOf(repository);
if (index > -1) {
newRepositories.splice(index, 1);
}
});
promises.push(promise);
});
@ -140,6 +145,7 @@ const NavBar: React.FC = () => {
await getTags(newRepositories, auth)
setRepositories(newRepositories);
setIsFetched(true);
// setRepositories(newRepositories);
};

13
src/components/repositoryInfo/RepoNotFound.tsx Normal file
View File

@ -0,0 +1,13 @@
import React from "react";
interface Props {
repositoryName: string;
}
const NotFound: React.FC<Props> = (props: Props) => {
return(
<h1>Repository "{props.repositoryName}" Not Found!</h1>
);
};
export default NotFound;

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

@ -1,17 +1,19 @@
import React from "react";
import { useLocation } from "react-router-dom";
import { ListItemButton, Button, Box, Card, CardContent, Typography, CardActions, Grid, ListItemText, Snackbar, Alert } from "@mui/material";
import { useLocation, Link } from "react-router-dom";
import { ListItemButton, Button, Box, Card, CardContent, Typography, CardActions, Grid, List, 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";
import { getHostNameFromURL, printSize, printTimePassed, PrintOSIcon } from "../../utils";
import RepoNotFound from "./RepoNotFound"
import Loading from "../Loading";
const RepositoryInfo: React.FC = () => {
const location = useLocation();
const path = location.pathname;
const { repositories } = useRepositories();
const { isFetched, repositories } = useRepositories();
const [hideTags, setHideTags] = React.useState(true);
const [snackbarOpen, setSnackbarOpen] = React.useState(false);
const repository = repositories.find((element) => (element.name === path.slice(12,path.length)));
@ -28,54 +30,128 @@ const RepositoryInfo: React.FC = () => {
const handleClose = () => {
setSnackbarOpen(false);
};
const toggleHide = () => {
setHideTags(!hideTags);
}
return (repository ? (
<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> */}
return (isFetched ? (
repository ? (
<div className="repositoryInfo">
<Card className="repositoryDetail" variant="outlined">
<CardContent>
{/* <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
Word of the Day
</Typography> */}
<Grid container>
<Grid item lg={6} sm={12}>
<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>
</Grid>
<Grid item lg={6} sm={12}>
<Box sx={{ display: "flex", flexDirection: "column" }}>
<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>
</Box>
</Grid>
</Grid>
</CardContent>
{/* <CardActions>
<Button size="small">Learn More</Button>
</CardActions> */}
</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>
<List>
<Grid container>
<Grid item sm={5}>
<ListItemText primary="TAG" />
</Grid>
<Grid item sm={3}>
<ListItemText primary="OS" />
</Grid>
<Grid item sm={2}>
<ListItemText style={{display:'flex', justifyContent:'flex-end'}} primary="SIZE" />
</Grid>
<Grid item sm={2}>
<ListItemText style={{display:'flex', justifyContent:'flex-end'}} primary="CREATED" />
</Grid>
</Grid>
{repository.tags.sort((a,b) => {
let result = (b.created ? b.created.getTime() : 0) - (a.created ? a.created.getTime() : 0);
if (result === 0) {
if (b.label === "latest") {
return 1;
} else if (a.label === "latest") {
return -1;
} else {
return 0;
}
} else {
return result;
}
}).slice(0,((hideTags && repository.tags.length > 4) ? 3 : repository.tags.length)).map((tag) => (
<Grid container>
<Grid item sm={5}>
<ListItemText primary={tag.label} />
</Grid>
<Grid item sm={3}>
<ListItemText primary={<PrintOSIcon os={tag.os} />} />
</Grid>
<Grid item sm={2}>
<ListItemText style={{display:'flex', justifyContent:'flex-end'}} primary={tag.size ? printSize(tag.size) : "---"} />
</Grid>
<Grid item sm={2}>
<ListItemText style={{display:'flex', justifyContent:'flex-end'}} primary={tag.created ? printTimePassed(tag.created) : "---"} />
</Grid>
</Grid>
))}
{repository.tags.length > 4 ? (
<Grid container>
<Grid item sm={5}>
<ListItemText
className="moreBtn"
onClick={toggleHide}
primary={hideTags ? "more" : "less"}
/>
</Grid>
</Grid>
) : (
<></>
)}
</List>
</CardContent>
<CardActions>
<Button size="small">Details</Button>
</CardActions>
</Card>
<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>
</div>
) : (
<RepoNotFound repositoryName={path.slice(12,path.length)} />
)
) : (
<NotFound />
<Loading />
));
}

7
src/context/RepositoriesProvider.tsx
View File

@ -3,19 +3,24 @@ import Repository from "../interfaces/Repositoriy";
interface MyRepositoriesState {
isFetched: boolean;
setIsFetched: React.Dispatch<React.SetStateAction<boolean>>
repositories: Repository[];
setRepositories: React.Dispatch<React.SetStateAction<Repository[]>>
}
const RepositoriesContext = createContext<MyRepositoriesState>({
isFetched: false,
setIsFetched: () => {},
repositories: [],
setRepositories: () => {}
});
export const RepositoriesProvider = ({ children }: { children: React.ReactNode }) => {
const [isFetched, setIsFetched] = useState<boolean>(false);
const [repositories, setRepositories] = useState<Repository[]>([]);
return <RepositoriesContext.Provider value={{repositories, setRepositories}}>{children}</RepositoriesContext.Provider>;
return <RepositoriesContext.Provider value={{isFetched, setIsFetched, repositories, setRepositories}}>{children}</RepositoriesContext.Provider>;
};
export default RepositoriesContext;

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

@ -1,4 +1,6 @@
.repositoryInfo
max-width: 70%
margin: auto
.repositoryDetail
margin: 5%
padding: 15px
@ -16,4 +18,9 @@
margin: 5%
padding: 15px
.lines
margin-bottom: 10px
margin-bottom: 10px
.moreBtn
color: #1976d2
cursor: pointer
.moreBtn:focus
color: purple

14
src/style/style.css
View File

@ -24,6 +24,11 @@ a {
margin: auto;
}
.repositoryInfo {
max-width: 70%;
margin: auto;
}
.repositoryInfo .repositoryDetail {
margin: 5%;
padding: 15px;
@ -54,6 +59,15 @@ a {
margin-bottom: 10px;
}
.repositoryInfo .tagsDetail .moreBtn {
color: #1976d2;
cursor: pointer;
}
.repositoryInfo .tagsDetail .moreBtn:focus {
color: purple;
}
.login .grid-container {
-webkit-box-align: center;
-ms-flex-align: center;

2
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,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",
"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,AAAA,eAAe,CAAC;EACZ,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;CAuBgB;;AAzBhC,AAGI,eAHW,CAGX,iBAAiB,CAAC;EACd,MAAM,EAAE,EAAE;EACV,OAAO,EAAE,IAAI;CAUW;;AAfhC,AAMQ,eANO,CAGX,iBAAiB,CAGb,MAAM,CAAC;EACH,aAAa,EAAE,IAAI;CAAG;;AAPlC,AAQQ,eARO,CAGX,iBAAiB,CAKb,WAAW,CAAC;EACR,cAAc,EAAE,MAAM;EACtB,YAAY,EAAE,IAAI;CAAG;;AAVjC,AAWQ,eAXO,CAGX,iBAAiB,CAQb,eAAe,CAAC;EACZ,WAAW,EAAE,IAAI;EACjB,aAAa,EAAE,GAAG;EAClB,OAAO,EAAE,MAAM;EACf,UAAU,EAAE,GAAG;CAAG;;AAf9B,AAgBI,eAhBW,CAgBX,WAAW,CAAC;EACR,MAAM,EAAE,EAAE;EACV,OAAO,EAAE,IAAI;CAOS;;AAzB9B,AAmBQ,eAnBO,CAgBX,WAAW,CAGP,MAAM,CAAC;EACH,aAAa,EAAE,IAAI;CAAG;;AApBlC,AAqBQ,eArBO,CAgBX,WAAW,CAKP,QAAQ,CAAC;EACL,KAAK,EAAE,OAAO;EACd,MAAM,EAAE,OAAO;CAAG;;AAvB9B,AAwBQ,eAxBO,CAgBX,WAAW,CAQP,QAAQ,AAAA,MAAM,CAAC;EACX,KAAK,EAAE,MAAM;CAAG;;ACzB5B,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",

14
src/utils.tsx
View File

@ -1,4 +1,6 @@
import axios from "./api/axios"
import { FcLinux } from "react-icons/fc";
import { FaWindows } from "react-icons/fa";
const checkValidURL = async (url: string) => {
try {
@ -54,4 +56,14 @@ const printSize = (sizeInByte: number): string => {
}
};
export { checkValidURL, printTwoDecimalPlaces, printTimePassed, printSize, getHostNameFromURL };
const PrintOSIcon: React.FC<{ os: string }> = ({ os }) => {
if (os === "linux") {
return <FcLinux />
} else if (os === "windows") {
return <FaWindows />
} else {
return <div>os</div>;
}
}
export { checkValidURL, printTwoDecimalPlaces, printTimePassed, printSize, getHostNameFromURL, PrintOSIcon };