diff --git a/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.module.scss b/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.module.scss index 77832b521..e7a493b2e 100644 --- a/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.module.scss +++ b/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.module.scss @@ -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); + } } diff --git a/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.tsx b/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.tsx index e0311a6a3..af69ce2ed 100644 --- a/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.tsx +++ b/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.tsx @@ -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 = ({ const [maxFieldSize, setMaxFieldSize] = useState(0); const [sort, setSort] = useState('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 = ({ {table.name}
- {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.' + ) : ( + + Disk usage last updated{' '} + + {lastUpdatedMoment.fromNow()} + + . + + )}
diff --git a/lattice/src/App/MoleculaTables/MoleculaTables.module.scss b/lattice/src/App/MoleculaTables/MoleculaTables.module.scss index 18c77011e..328ea2ddf 100644 --- a/lattice/src/App/MoleculaTables/MoleculaTables.module.scss +++ b/lattice/src/App/MoleculaTables/MoleculaTables.module.scss @@ -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); + } } diff --git a/lattice/src/App/MoleculaTables/MoleculaTables.tsx b/lattice/src/App/MoleculaTables/MoleculaTables.tsx index ffca45226..3f677e335 100644 --- a/lattice/src/App/MoleculaTables/MoleculaTables.tsx +++ b/lattice/src/App/MoleculaTables/MoleculaTables.tsx @@ -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 = ({ }) => { const history = useHistory(); const [sortedTables, setSortedTables] = useState([]); + const lastUpdatedMoment = moment(lastUpdated).utc(); useEffect(() => { if (tables && dataDistribution) { @@ -55,8 +57,15 @@ export const MoleculaTables: FC = ({ Tables
- Disk usage last updated {moment(lastUpdated).fromNow()}. Disk usage - for new tables will be calculated at the next refresh. + Disk usage last updated{' '} + + {lastUpdatedMoment.fromNow()} + + . Disk usage for new tables will be calculated at the next refresh.