diff --git a/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.module.scss b/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.module.scss index 8095b549c..77832b521 100644 --- a/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.module.scss +++ b/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.module.scss @@ -126,3 +126,11 @@ } } } + +.infoMessage { + padding: 16px; + border: 1px solid rgba(var(--primary-rgb), 0.5); + background: rgba(var(--primary-rgb), 0.1); + border-radius: 4px; + margin: 4px 0 16px; +} diff --git a/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.tsx b/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.tsx index c8071c2f4..e0311a6a3 100644 --- a/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.tsx +++ b/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.tsx @@ -7,6 +7,7 @@ import Highlighter from 'react-highlight-words'; import isEmpty from 'lodash/isEmpty'; import Link from '@material-ui/core/Link'; import map from 'lodash/map'; +import moment from 'moment'; import OrderBy from 'lodash/orderBy'; import Reduce from 'lodash/reduce'; import Table from '@material-ui/core/Table'; @@ -24,11 +25,13 @@ import css from './MoleculaTable.module.scss'; type MoleculaTableProps = { table: any; dataDistribution: any; + lastUpdated: string; }; export const MoleculaTable: FC = ({ table, - dataDistribution + dataDistribution, + lastUpdated }) => { const [page, setPage] = useState(1); const [resultsPerPage, setResultsPerPage] = useState(10); @@ -126,6 +129,11 @@ 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()}.`} +
diff --git a/lattice/src/App/MoleculaTables/MoleculaTables.module.scss b/lattice/src/App/MoleculaTables/MoleculaTables.module.scss index ec34ce4b3..18c77011e 100644 --- a/lattice/src/App/MoleculaTables/MoleculaTables.module.scss +++ b/lattice/src/App/MoleculaTables/MoleculaTables.module.scss @@ -69,3 +69,11 @@ .pilosaError { padding: 8px 16px; } + +.infoMessage { + padding: 16px; + border: 1px solid rgba(var(--primary-rgb), 0.5); + background: rgba(var(--primary-rgb), 0.1); + border-radius: 4px; + margin: 4px 0 16px; +} diff --git a/lattice/src/App/MoleculaTables/MoleculaTables.tsx b/lattice/src/App/MoleculaTables/MoleculaTables.tsx index 22a4c9841..ffca45226 100644 --- a/lattice/src/App/MoleculaTables/MoleculaTables.tsx +++ b/lattice/src/App/MoleculaTables/MoleculaTables.tsx @@ -1,6 +1,7 @@ import React, { FC, Fragment, useEffect, useState } from 'react'; import Card from '@material-ui/core/Card'; import CardContent from '@material-ui/core/CardContent'; +import moment from 'moment'; import OrderBy from 'lodash/orderBy'; import Paper from '@material-ui/core/Paper'; import Typography from '@material-ui/core/Typography'; @@ -13,12 +14,14 @@ import css from './MoleculaTables.module.scss'; type MoleculaTablesProps = { tables: any; dataDistribution: any; + lastUpdated: string; maxSize: number; }; export const MoleculaTables: FC = ({ tables, dataDistribution, + lastUpdated, maxSize }) => { const history = useHistory(); @@ -51,6 +54,10 @@ export const MoleculaTables: FC = ({ Tables +
+ Disk usage last updated {moment(lastUpdated).fromNow()}. Disk usage + for new tables will be calculated at the next refresh. +
{ const [selectedTable, setSelectedTable] = useState(); const [dataDistribution, setDataDistribution] = useState(); const [maxSize, setMaxSize] = useState(0); + const [lastUpdated, setLastUpdated] = useState(''); useEffectOnce(() => { pilosa.get @@ -54,6 +55,10 @@ export const MoleculaTablesContainer = () => { }; } }); + + if(!lastUpdated) { + setLastUpdated(res.data[node].lastUpdated); + } }); const sorted = OrderBy(data, ['total'], ['desc']); @@ -89,11 +94,13 @@ export const MoleculaTablesContainer = () => { : { uncached: true } : undefined } + lastUpdated={lastUpdated} /> ) : ( );