add last updated info for disk usage to ui

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;
+}

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<MoleculaTableProps> = ({
   table,
-  dataDistribution
+  dataDistribution,
+  lastUpdated
 }) => {
   const [page, setPage] = useState<number>(1);
   const [resultsPerPage, setResultsPerPage] = useState<number>(10);
@@ -126,6 +129,11 @@ export const MoleculaTable: FC<MoleculaTableProps> = ({
       <Typography variant="h5" color="textSecondary">
         {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()}.`}
+      </div>
       <div className={css.layout}>
         <div>
           <label className={css.label}>keys</label>

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;
+}

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<MoleculaTablesProps> = ({
   tables,
   dataDistribution,
+  lastUpdated,
   maxSize
 }) => {
   const history = useHistory();
@@ -51,6 +54,10 @@ export const MoleculaTables: FC<MoleculaTablesProps> = ({
         <Typography variant="h5" color="textSecondary">
           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.
+        </div>
         <div className={css.actions}>
           <SortBy
             options={[

lattice/src/App/MoleculaTables/MoleculaTablesContainer.tsx

@@ -14,6 +14,7 @@ export const MoleculaTablesContainer = () => {
   const [selectedTable, setSelectedTable] = useState<any>();
   const [dataDistribution, setDataDistribution] = useState<any>();
   const [maxSize, setMaxSize] = useState<number>(0);
+  const [lastUpdated, setLastUpdated] = useState<string>('');
 
   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}
     />
   ) : (
     <MoleculaTables
       tables={tables}
       dataDistribution={dataDistribution}
+      lastUpdated={lastUpdated}
       maxSize={maxSize}
     />
   );