alt/zot-wo-auth
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated the push date format to weeks, days, hours and added tooltip with the timestam

Browse Source 
Signed-off-by: Amelia-Maria Breda <ambreda@cisco.com>
This commit is contained in:
Amelia-Maria Breda 2022-10-17 11:20:57 +01:00 committed by Raul Kele
parent 847c9d1e6d
commit 576ef56ff7
4 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/RepoCard.jsx
View File

@ -180,7 +180,7 @@ function RepoCard(props) {
};
const getLast = () => {
const lastDate = lastUpdated ? DateTime.fromISO(lastUpdated) : DateTime.now().minus({ days: 1 });
return `${lastDate.toRelative({ unit: 'days' })}`;
return `${lastDate.toRelative({ unit: ['weeks', 'days', 'hours', 'minutes'] })}`;
};
return (
@ -227,7 +227,7 @@ function RepoCard(props) {
{getVersion()}
</Typography>
</Tooltip>
<Tooltip title={getLast()} placement="top">
<Tooltip title={lastUpdated?.slice(0, 16) || ' '} placement="top">
<Typography className={classes.versionLast} variant="body2" noWrap>
{getLast()}
</Typography>

12
src/components/RepoDetailsMetadata.jsx
View File

@ -1,4 +1,4 @@
import { Card, CardContent, Grid, Typography } from '@mui/material';
import { Card, CardContent, Grid, Typography, Tooltip } from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import { DateTime } from 'luxon';
import React from 'react';
@ -38,7 +38,7 @@ function RepoDetailsMetadata(props) {
const { repoURL, totalDownloads, lastUpdated, size } = props;
// @ts-ignore
const lastDate = (lastUpdated ? DateTime.fromISO(lastUpdated) : DateTime.now().minus({ days: 1 })).toRelative({
unit: 'days'
unit: ['weeks', 'days', 'hours', 'minutes']
});
return (
<Grid container spacing={1}>
@ -73,9 +73,11 @@ function RepoDetailsMetadata(props) {
<Typography variant="body2" align="left" className={classes.metadataHeader}>
Last publish
</Typography>
<Typography variant="body1" align="left" className={classes.metadataBody}>
{lastDate || `Timestamp N/A`}
</Typography>
<Tooltip title={lastUpdated?.slice(0, 16) || ' '} placement="top">
<Typography variant="body1" align="left" className={classes.metadataBody}>
{lastDate || `Timestamp N/A`}
</Typography>
</Tooltip>
</CardContent>
</Card>
</Grid>

12
src/components/TagDetailsMetadata.jsx
View File

@ -1,4 +1,4 @@
import { Card, CardContent, Grid, Typography } from '@mui/material';
import { Card, CardContent, Grid, Typography, Tooltip } from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import { DateTime } from 'luxon';
import React from 'react';
@ -37,7 +37,7 @@ function TagDetailsMetadata(props) {
const classes = useStyles();
const { platform, lastUpdated, size } = props;
const lastDate = (lastUpdated ? DateTime.fromISO(lastUpdated) : DateTime.now().minus({ days: 1 })).toRelative({
unit: 'days'
unit: ['weeks', 'days', 'hours', 'minutes']
});
return (
<Grid container spacing={1} data-testid="tagDetailsMetadata-container">
@ -72,9 +72,11 @@ function TagDetailsMetadata(props) {
<Typography variant="body2" align="left" className={classes.metadataHeader}>
Last Published
</Typography>
<Typography variant="body1" align="left" className={classes.metadataBody}>
{lastDate || `----`}
</Typography>
<Tooltip title={lastUpdated?.slice(0, 16) || ' '} placement="top">
<Typography variant="body1" align="left" className={classes.metadataBody}>
{lastDate || `----`}
</Typography>
</Tooltip>
</CardContent>
</Card>
</Grid>

12
src/components/Tags.jsx
View File

@ -13,7 +13,7 @@ import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Typography from '@mui/material/Typography';
import transform from 'utilities/transform';
import { Card, CardContent, Divider, Stack } from '@mui/material';
import { Card, CardContent, Divider, Stack, Tooltip } from '@mui/material';
import { makeStyles } from '@mui/styles';
const useStyles = makeStyles(() => ({
@ -64,7 +64,7 @@ function TagCard(props) {
const classes = useStyles();
// @ts-ignore
const lastDate = (lastUpdated ? DateTime.fromISO(lastUpdated) : DateTime.now().minus({ days: 1 })).toRelative({
unit: 'days'
unit: ['weeks', 'days', 'hours', 'minutes']
});
const navigate = useNavigate();
@ -91,9 +91,11 @@ function TagCard(props) {
<Typography variant="caption" sx={{ fontWeight: '400', fontSize: '0.8125rem' }}>
Last pushed
</Typography>
<Typography variant="caption" sx={{ fontWeight: '600', fontSize: '0.8125rem' }}>
{lastDate || 'Date not available'} by {vendors || 'Vendor not available'}
</Typography>
<Tooltip title={lastUpdated?.slice(0, 16) || ' '} placement="top">
<Typography variant="caption" sx={{ fontWeight: '600', fontSize: '0.8125rem' }}>
{lastDate || 'Date not available'} by {vendors || 'Vendor not available'}
</Typography>
</Tooltip>
</Stack>
<Typography