diff --git a/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.module.scss b/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.module.scss index 8095b549c..c99460558 100644 --- a/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.module.scss +++ b/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.module.scss @@ -126,3 +126,15 @@ } } } + +.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; + + .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 0946b3d0e..72faaa4c1 100644 --- a/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.tsx +++ b/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.tsx @@ -4,8 +4,10 @@ import Breadcrumbs from '@material-ui/core/Breadcrumbs'; import classNames from 'classnames'; import Fuse from 'fuse.js'; 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'; @@ -14,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'; @@ -23,11 +26,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); @@ -38,9 +43,10 @@ export const MoleculaTable: FC = ({ const [maxFieldSize, setMaxFieldSize] = useState(0); const [sort, setSort] = useState('total'); const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc'); + const lastUpdatedMoment = lastUpdated ? moment(lastUpdated).utc() : undefined; useEffect(() => { - if (dataDistribution) { + if (dataDistribution && !dataDistribution.uncached) { const aggregatedFieldsData = Reduce( dataDistribution.fields, (result, value) => { @@ -77,7 +83,7 @@ export const MoleculaTable: FC = ({ threshold: 0 }); const result = fuse.search(searchText); - + let resultsArray: any[] = []; result.forEach((r: any) => { resultsArray.push({ ...r?.item, ...fieldsData[r?.item.name] }); @@ -125,6 +131,46 @@ export const MoleculaTable: FC = ({ {table.name} + {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}
@@ -251,7 +297,15 @@ export const MoleculaTable: FC = ({ = ({ tables, dataDistribution, + lastUpdated, maxSize }) => { const history = useHistory(); const [sortedTables, setSortedTables] = useState([]); + const lastUpdatedMoment = lastUpdated ? moment(lastUpdated).utc() : undefined; useEffect(() => { if (tables && dataDistribution) { @@ -51,6 +56,38 @@ export const MoleculaTables: FC = ({ Tables + {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}
= ({
{ const [selectedTable, setSelectedTable] = useState(); const [dataDistribution, setDataDistribution] = useState(); const [maxSize, setMaxSize] = useState(0); + const [lastUpdated, setLastUpdated] = useState(''); useEffectOnce(() => { pilosa.get @@ -25,7 +26,7 @@ export const MoleculaTablesContainer = () => { .then((res) => setTables(res.data.indexes)) .catch((err) => console.log(err)) ); - + pilosa.get.usage().then((res) => { const nodes = Object.keys(res.data); let data = {}; @@ -54,6 +55,10 @@ export const MoleculaTablesContainer = () => { }; } }); + + if(!lastUpdated) { + setLastUpdated(res.data[node].lastUpdated); + } }); const sorted = OrderBy(data, ['total'], ['desc']); @@ -83,13 +88,19 @@ export const MoleculaTablesContainer = () => { ) : ( ); diff --git a/lattice/src/App/MoleculaTables/UsageBreakdown/UsageBreakdown.tsx b/lattice/src/App/MoleculaTables/UsageBreakdown/UsageBreakdown.tsx index 562069458..78cc13c3d 100644 --- a/lattice/src/App/MoleculaTables/UsageBreakdown/UsageBreakdown.tsx +++ b/lattice/src/App/MoleculaTables/UsageBreakdown/UsageBreakdown.tsx @@ -18,7 +18,15 @@ export const UsageBreakdown: FC = ({ showLabel = true, usageValueSize = 'medium' }) => { - const { total, fieldKeysTotal, indexKeys, fragments, metadata, keys } = data; + const { + total, + fieldKeysTotal, + indexKeys, + fragments, + metadata, + keys, + uncached + } = data; const fieldKeysPercentage = fieldKeysTotal && total ? (fieldKeysTotal / total) * 100 : 0; const indexKeysPercentage = indexKeys ? (indexKeys / total) * 100 : 0; @@ -160,6 +168,10 @@ export const UsageBreakdown: FC = ({ ) : null}
+ ) : uncached ? ( + + Waiting... + ) : ( Calculating...