scriptoriumadmin/featurebase
1
0
Fork 0
mirror of https://github.com/featurebasedb/featurebase.git synced 2026-10-08 11:57:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add UTC time tooltip when hovering ov er relative time

Browse source
This commit is contained in:
Stephanie Yang 2021-06-14 15:29:52 -05:00
parent f48d7998e1
commit b14811b4fe
4 changed files with 36 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.module.scss
View file

@ -133,4 +133,8 @@
background: rgba(var(--primary-rgb), 0.1);
border-radius: 4px;
margin: 4px 0 16px;
.relativeTime {
border-bottom: 1px dashed rgba(var(--primary-rgb), 0.7);
}
}

20
lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.tsx
View file

@ -16,6 +16,7 @@ import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import TextField from '@material-ui/core/TextField';
import Tooltip from '@material-ui/core/Tooltip';
import Typography from '@material-ui/core/Typography';
import { Block } from 'shared/Block';
import { Pager } from 'shared/Pager';
@ -42,6 +43,7 @@ export const MoleculaTable: FC<MoleculaTableProps> = ({
const [maxFieldSize, setMaxFieldSize] = useState<number>(0);
const [sort, setSort] = useState<string>('total');
const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc');
const lastUpdatedMoment = moment(lastUpdated).utc();
useEffect(() => {
if (dataDistribution && !dataDistribution.uncached) {
@ -130,9 +132,21 @@ export const MoleculaTable: FC<MoleculaTableProps> = ({
{table.name}
</Typography>
<div className={css.infoMessage}>
{dataDistribution && dataDistribution.uncached
? 'Disk usage will be calculated after the next cache refresh.'
: `Disk usage last updated ${moment(lastUpdated).fromNow()}.`}
{dataDistribution && dataDistribution.uncached ? (
'Disk usage will be calculated after the next cache refresh.'
) : (
<Fragment>
Disk usage last updated{' '}
<Tooltip
title={`${lastUpdatedMoment.format('M/D/YYYY hh:mm a')} UTC`}
placement="top"
arrow
>
<span className={css.relativeTime}>{lastUpdatedMoment.fromNow()}</span>
</Tooltip>
.
</Fragment>
)}
</div>
<div className={css.layout}>
<div>

4
lattice/src/App/MoleculaTables/MoleculaTables.module.scss
View file

@ -76,4 +76,8 @@
background: rgba(var(--primary-rgb), 0.1);
border-radius: 4px;
margin: 4px 0 16px;
.relativeTime {
border-bottom: 1px dashed rgba(var(--primary-rgb), 0.7);
}
}

13
lattice/src/App/MoleculaTables/MoleculaTables.tsx
View file

@ -4,6 +4,7 @@ import CardContent from '@material-ui/core/CardContent';
import moment from 'moment';
import OrderBy from 'lodash/orderBy';
import Paper from '@material-ui/core/Paper';
import Tooltip from '@material-ui/core/Tooltip';
import Typography from '@material-ui/core/Typography';
import { Block } from 'shared/Block';
import { SortBy } from 'shared/SortBy';
@ -26,6 +27,7 @@ export const MoleculaTables: FC<MoleculaTablesProps> = ({
}) => {
const history = useHistory();
const [sortedTables, setSortedTables] = useState<any>([]);
const lastUpdatedMoment = moment(lastUpdated).utc();
useEffect(() => {
if (tables && dataDistribution) {
@ -55,8 +57,15 @@ export const MoleculaTables: FC<MoleculaTablesProps> = ({
Tables
</Typography>
<div className={css.infoMessage}>
Disk usage last updated {moment(lastUpdated).fromNow()}. Disk usage
for new tables will be calculated at the next refresh.
Disk usage last updated{' '}
<Tooltip
title={`${lastUpdatedMoment.format('M/D/YYYY hh:mm a')} UTC`}
placement="top"
arrow
>
<span className={css.relativeTime}>{lastUpdatedMoment.fromNow()}</span>
</Tooltip>
. Disk usage for new tables will be calculated at the next refresh.
</div>
<div className={css.actions}>
<SortBy