diff --git a/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.module.scss b/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.module.scss index e7a493b2e..c99460558 100644 --- a/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.module.scss +++ b/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.module.scss @@ -134,7 +134,7 @@ border-radius: 4px; margin: 4px 0 16px; - .relativeTime { + .infoTooltip { 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 736bbe211..72faaa4c1 100644 --- a/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.tsx +++ b/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.tsx @@ -43,7 +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(); + const lastUpdatedMoment = lastUpdated ? moment(lastUpdated).utc() : undefined; useEffect(() => { if (dataDistribution && !dataDistribution.uncached) { @@ -131,23 +131,46 @@ export const MoleculaTable: FC = ({ {table.name} -
- {dataDistribution && dataDistribution.uncached ? ( - 'Disk usage will be calculated at the next cache refresh.' - ) : ( - - Disk usage last updated{' '} - - {lastUpdatedMoment.fromNow()} - - . - - )} -
+ {lastUpdatedMoment ? ( +
+ {dataDistribution && dataDistribution.uncached ? ( + + Disk usage will be calculated at the next{` `} + + Disk and memory information shown here are read from a + cache, the behavior of which can be controlled with the{` `} + + --usage-duty-cycle + {' '} + command line flag. + + } + placement="top" + arrow + > + cache refresh + + . + + ) : ( + + Disk usage last updated{' '} + + + {lastUpdatedMoment.fromNow()} + + + . + + )} +
+ ) : null}
diff --git a/lattice/src/App/MoleculaTables/MoleculaTables.module.scss b/lattice/src/App/MoleculaTables/MoleculaTables.module.scss index 328ea2ddf..9ce669717 100644 --- a/lattice/src/App/MoleculaTables/MoleculaTables.module.scss +++ b/lattice/src/App/MoleculaTables/MoleculaTables.module.scss @@ -77,7 +77,7 @@ border-radius: 4px; margin: 4px 0 16px; - .relativeTime { + .infoTooltip { 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 a14cbc621..cae1590fb 100644 --- a/lattice/src/App/MoleculaTables/MoleculaTables.tsx +++ b/lattice/src/App/MoleculaTables/MoleculaTables.tsx @@ -27,7 +27,7 @@ export const MoleculaTables: FC = ({ }) => { const history = useHistory(); const [sortedTables, setSortedTables] = useState([]); - const lastUpdatedMoment = moment(lastUpdated).utc(); + const lastUpdatedMoment = lastUpdated ? moment(lastUpdated).utc() : undefined; useEffect(() => { if (tables && dataDistribution) { @@ -56,17 +56,38 @@ export const MoleculaTables: FC = ({ Tables -
- Disk usage last updated{' '} - - {lastUpdatedMoment.fromNow()} - - . Disk usage for new tables will be calculated at the next cache refresh. -
+ {lastUpdatedMoment ? ( +
+ Disk usage last updated{' '} + + + {lastUpdatedMoment.fromNow()} + + + . Disk usage for new tables will be calculated at the next{` `} + + Disk and memory information shown here are read from a cache, + the behavior of which can be controlled with the{` `} + + --usage-duty-cycle + {' '} + command line flag. + + } + placement="top" + arrow + > + cache refresh + + . +
+ ) : null}