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

Added Tooltip

Browse Source
This commit is contained in:
CodeServer 2022-04-12 06:38:36 +01:00
parent b4495c59c0
commit cb16584468
6 changed files with 78 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -73,7 +73,17 @@ const NavBar: React.FC = () => {
tag.architecture = res?.data?.architecture;
tag.os = res?.data?.os;
tag.created = new Date(res?.data?.created);
}).catch((err) => {
const index = repository.tags.indexOf(tag);
if (index > -1) {
repository.tags.splice(index, 1);
}
});
}).catch((err) => {
const index = repository.tags.indexOf(tag);
if (index > -1) {
repository.tags.splice(index, 1);
}
});
promises.push(promise);
});

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

@ -1,11 +1,11 @@
import React from "react";
import { useLocation, Link } from "react-router-dom";
import { ListItemButton, Button, Box, Card, CardContent, Typography, CardActions, Grid, List, ListItemText, Snackbar, Alert } from "@mui/material";
import { ListItemButton, Button, Box, Card, CardContent, Typography, CardActions, Grid, List, ListItemText, Snackbar, Alert, Tooltip } 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, PrintOSIcon } from "../../utils";
import { getHostNameFromURL, printSize, printTimePassed, PrintOSIcon, toUpperFirst } from "../../utils";
import RepoNotFound from "./RepoNotFound"
import Loading from "../Loading";
@ -44,7 +44,7 @@ const RepositoryInfo: React.FC = () => {
Word of the Day
</Typography> */}
<Grid container>
<Grid item lg={6} sm={12}>
<Grid item lg={6} md={12}>
<Typography className="lines" variant="h5" component="div">
{repository.name}
</Typography>
@ -53,7 +53,7 @@ const RepositoryInfo: React.FC = () => {
{"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}>
<Grid item lg={6} md={12}>
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography className="lines" variant="h6">
Docker commands
@ -112,13 +112,33 @@ const RepositoryInfo: React.FC = () => {
<ListItemText primary={tag.label} />
</Grid>
<Grid item sm={3}>
<ListItemText primary={<PrintOSIcon os={tag.os} />} />
<Tooltip
title={
<>
<div>{"Operating System: " + toUpperFirst(tag.os)}</div>
<br />
<div>{"Architecture: " + tag.architecture}</div>
</>
}
placement="bottom"
arrow
>
<ListItemText className="iconWrapper" primary={<PrintOSIcon className="icon" os={tag.os} />} />
</Tooltip>
</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) : "---"} />
<Tooltip
title={
tag.created ? (tag.created.toLocaleString()) : "---"
}
placement="bottom-end"
arrow
>
<ListItemText style={{display:'flex', justifyContent:'flex-end'}} primary={tag.created ? printTimePassed(tag.created) : "---"} />
</Tooltip>
</Grid>
</Grid>
))}

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

@ -17,6 +17,12 @@
.tagsDetail
margin: 5%
padding: 15px
.iconWrapper
height: 24px
width: 24px
.icon
height: 24px
width: 24px
.lines
margin-bottom: 10px
.moreBtn
@ -24,3 +30,7 @@
cursor: pointer
.moreBtn:focus
color: purple
@media (max-width: 1199px)
.repositoryInfo
max-width: 90%

16
src/style/style.css
View File

@ -55,6 +55,16 @@ a {
padding: 15px;
}
.repositoryInfo .tagsDetail .iconWrapper {
height: 24px;
width: 24px;
}
.repositoryInfo .tagsDetail .icon {
height: 24px;
width: 24px;
}
.repositoryInfo .tagsDetail .lines {
margin-bottom: 10px;
}
@ -68,6 +78,12 @@ a {
color: purple;
}
@media (max-width: 1199px) {
.repositoryInfo {
max-width: 90%;
}
}
.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,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",
"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;CA6BgB;;AA/BhC,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;CAaS;;AA/B9B,AAmBQ,eAnBO,CAgBX,WAAW,CAGP,YAAY,CAAC;EACT,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;CAAG;;AArB1B,AAsBQ,eAtBO,CAgBX,WAAW,CAMP,KAAK,CAAC;EACF,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;CAAG;;AAxB1B,AAyBQ,eAzBO,CAgBX,WAAW,CASP,MAAM,CAAC;EACH,aAAa,EAAE,IAAI;CAAG;;AA1BlC,AA2BQ,eA3BO,CAgBX,WAAW,CAWP,QAAQ,CAAC;EACL,KAAK,EAAE,OAAO;EACd,MAAM,EAAE,OAAO;CAAG;;AA7B9B,AA8BQ,eA9BO,CAgBX,WAAW,CAcP,QAAQ,AAAA,MAAM,CAAC;EACX,KAAK,EAAE,MAAM;CAAG;;AAE5B,MAAM,EAAE,SAAS,EAAE,MAAM;EACrB,AAAA,eAAe,CAAC;IACZ,SAAS,EAAE,GAAG;GAAG;;;ACnCzB,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",

19
src/utils.tsx
View File

@ -1,4 +1,5 @@
import axios from "./api/axios"
import React from "react";
import { FcLinux } from "react-icons/fc";
import { FaWindows } from "react-icons/fa";
@ -17,6 +18,14 @@ const checkValidURL = async (url: string) => {
return true;
}
const toUpperFirst= (s: string):string => {
if (s.length > 0) {
return s[0].toUpperCase() + s.substring(1);
} else {
return s;
}
};
const getHostNameFromURL = (url: string): string => {
const urlSplit = url.split('/');
return urlSplit[urlSplit.length - 1];
@ -56,14 +65,14 @@ const printSize = (sizeInByte: number): string => {
}
};
const PrintOSIcon: React.FC<{ os: string }> = ({ os }) => {
const PrintOSIcon: React.FC<{ className: string, os: string }> = ({ className, os }) => {
if (os === "linux") {
return <FcLinux />
return <FcLinux className={className} />
} else if (os === "windows") {
return <FaWindows />
return <FaWindows className={className} />
} else {
return <div>os</div>;
return <div className={className}>os</div>;
}
}
export { checkValidURL, printTwoDecimalPlaces, printTimePassed, printSize, getHostNameFromURL, PrintOSIcon };
export { checkValidURL, printTwoDecimalPlaces, printTimePassed, printSize, getHostNameFromURL, PrintOSIcon, toUpperFirst };