From e4159a1927a04a4e082d600166f61e5a5417cb07 Mon Sep 17 00:00:00 2001
From: Stephanie Yang <stephanie@pilosa.com>
Date: Mon, 14 Jun 2021 10:53:26 -0500
Subject: [PATCH 1/5] fix UI blow up when index disk usage not available

---
 .../MoleculaTable/MoleculaTable.tsx               | 15 ++++++++++++---
 lattice/src/App/MoleculaTables/MoleculaTables.tsx |  8 ++++++--
 .../MoleculaTables/MoleculaTablesContainer.tsx    |  8 ++++++--
 .../UsageBreakdown/UsageBreakdown.tsx             | 14 +++++++++++++-
 4 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.tsx b/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.tsx
index 0946b3d0e..c8071c2f4 100644
--- a/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.tsx
+++ b/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.tsx
@@ -4,6 +4,7 @@ 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 OrderBy from 'lodash/orderBy';
@@ -40,7 +41,7 @@ export const MoleculaTable: FC<MoleculaTableProps> = ({
   const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc');
 
   useEffect(() => {
-    if (dataDistribution) {
+    if (dataDistribution && !dataDistribution.uncached) {
       const aggregatedFieldsData = Reduce(
         dataDistribution.fields,
         (result, value) => {
@@ -77,7 +78,7 @@ export const MoleculaTable: FC<MoleculaTableProps> = ({
         threshold: 0
       });
       const result = fuse.search(searchText);
-      
+
       let resultsArray: any[] = [];
       result.forEach((r: any) => {
         resultsArray.push({ ...r?.item, ...fieldsData[r?.item.name] });
@@ -251,7 +252,15 @@ export const MoleculaTable: FC<MoleculaTableProps> = ({
                     </TableCell>
                     <TableCell className={css.tableCell}>
                       <UsageBreakdown
-                        data={field}
+                        data={
+                          isEmpty(field)
+                            ? field
+                            : dataDistribution
+                            ? dataDistribution.uncached
+                              ? dataDistribution
+                              : field
+                            : field
+                        }
                         width={`${(field.total / maxFieldSize) * 150}px`}
                         showLabel={false}
                         usageValueSize="small"
diff --git a/lattice/src/App/MoleculaTables/MoleculaTables.tsx b/lattice/src/App/MoleculaTables/MoleculaTables.tsx
index a3a4a119a..22a4c9841 100644
--- a/lattice/src/App/MoleculaTables/MoleculaTables.tsx
+++ b/lattice/src/App/MoleculaTables/MoleculaTables.tsx
@@ -77,10 +77,14 @@ export const MoleculaTables: FC<MoleculaTablesProps> = ({
                   <div className={css.section}>
                     <UsageBreakdown
                       data={
-                        dataDistribution ? dataDistribution[name] : undefined
+                        dataDistribution
+                          ? dataDistribution[name]
+                            ? dataDistribution[name]
+                            : { uncached: true }
+                          : undefined
                       }
                       width={
-                        dataDistribution
+                        dataDistribution && dataDistribution[name]
                           ? `${(dataDistribution[name].total / maxSize) * 100}%`
                           : '0px'
                       }
diff --git a/lattice/src/App/MoleculaTables/MoleculaTablesContainer.tsx b/lattice/src/App/MoleculaTables/MoleculaTablesContainer.tsx
index 7556acd16..bf8224f54 100644
--- a/lattice/src/App/MoleculaTables/MoleculaTablesContainer.tsx
+++ b/lattice/src/App/MoleculaTables/MoleculaTablesContainer.tsx
@@ -25,7 +25,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 = {};
@@ -83,7 +83,11 @@ export const MoleculaTablesContainer = () => {
     <MoleculaTable
       table={selectedTable}
       dataDistribution={
-        dataDistribution ? dataDistribution[selectedTable.name] : undefined
+        dataDistribution
+          ? dataDistribution[selectedTable.name]
+            ? dataDistribution[selectedTable.name]
+            : { uncached: true }
+          : undefined
       }
     />
   ) : (
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<UsageBreakdownProps> = ({
   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<UsageBreakdownProps> = ({
               ) : null}
             </div>
           </Fragment>
+        ) : uncached ? (
+          <Typography variant="caption" component="div">
+            Waiting...
+          </Typography>
         ) : (
           <Typography variant="caption" component="div">
             Calculating...

From f48d7998e1a3f9b456cd36e09c1d116665112f0e Mon Sep 17 00:00:00 2001
From: Stephanie Yang <stephanie@pilosa.com>
Date: Mon, 14 Jun 2021 13:59:14 -0500
Subject: [PATCH 2/5] add last updated info for disk usage to ui

---
 .../MoleculaTable/MoleculaTable.module.scss            |  8 ++++++++
 .../App/MoleculaTables/MoleculaTable/MoleculaTable.tsx | 10 +++++++++-
 .../src/App/MoleculaTables/MoleculaTables.module.scss  |  8 ++++++++
 lattice/src/App/MoleculaTables/MoleculaTables.tsx      |  7 +++++++
 .../src/App/MoleculaTables/MoleculaTablesContainer.tsx |  7 +++++++
 5 files changed, 39 insertions(+), 1 deletion(-)

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<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>
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<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={[
diff --git a/lattice/src/App/MoleculaTables/MoleculaTablesContainer.tsx b/lattice/src/App/MoleculaTables/MoleculaTablesContainer.tsx
index bf8224f54..0e88eddfd 100644
--- a/lattice/src/App/MoleculaTables/MoleculaTablesContainer.tsx
+++ b/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}
     />
   );

From b14811b4fe7e84e4faf4168a3b3128e1a958190f Mon Sep 17 00:00:00 2001
From: Stephanie Yang <stephanie@pilosa.com>
Date: Mon, 14 Jun 2021 15:29:52 -0500
Subject: [PATCH 3/5] add UTC time tooltip when hovering ov er relative time

---
 .../MoleculaTable/MoleculaTable.module.scss   |  4 ++++
 .../MoleculaTable/MoleculaTable.tsx           | 20 ++++++++++++++++---
 .../MoleculaTables/MoleculaTables.module.scss |  4 ++++
 .../src/App/MoleculaTables/MoleculaTables.tsx | 13 ++++++++++--
 4 files changed, 36 insertions(+), 5 deletions(-)

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<MoleculaTableProps> = ({
   const [maxFieldSize, setMaxFieldSize] = useState<number>(0);
   const [sort, setSort] = useState<string>('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<MoleculaTableProps> = ({
         {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()}.`}
+        {dataDistribution && dataDistribution.uncached ? (
+          'Disk usage will be calculated after the next cache refresh.'
+        ) : (
+          <Fragment>
+            Disk usage last updated{' '}
+            <Tooltip
+              title={`${lastUpdatedMoment.format('M/D/YYYY hh:mm a')} UTC`}
+              placement="top"
+              arrow
+            >
+              <span className={css.relativeTime}>{lastUpdatedMoment.fromNow()}</span>
+            </Tooltip>
+            .
+          </Fragment>
+        )}
       </div>
       <div className={css.layout}>
         <div>
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<MoleculaTablesProps> = ({
 }) => {
   const history = useHistory();
   const [sortedTables, setSortedTables] = useState<any>([]);
+  const lastUpdatedMoment = moment(lastUpdated).utc();
 
   useEffect(() => {
     if (tables && dataDistribution) {
@@ -55,8 +57,15 @@ export const MoleculaTables: FC<MoleculaTablesProps> = ({
           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.
+          Disk usage last updated{' '}
+          <Tooltip
+            title={`${lastUpdatedMoment.format('M/D/YYYY hh:mm a')} UTC`}
+            placement="top"
+            arrow
+          >
+            <span className={css.relativeTime}>{lastUpdatedMoment.fromNow()}</span>
+          </Tooltip>
+          . Disk usage for new tables will be calculated at the next refresh.
         </div>
         <div className={css.actions}>
           <SortBy

From 9c21f6f10909f494830b13aee2813604d088fbf0 Mon Sep 17 00:00:00 2001
From: Stephanie Yang <stephanie@pilosa.com>
Date: Mon, 14 Jun 2021 15:49:20 -0500
Subject: [PATCH 4/5] consistency

---
 lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.tsx | 2 +-
 lattice/src/App/MoleculaTables/MoleculaTables.tsx              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.tsx b/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.tsx
index af69ce2ed..736bbe211 100644
--- a/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.tsx
+++ b/lattice/src/App/MoleculaTables/MoleculaTable/MoleculaTable.tsx
@@ -133,7 +133,7 @@ export const MoleculaTable: FC<MoleculaTableProps> = ({
       </Typography>
       <div className={css.infoMessage}>
         {dataDistribution && dataDistribution.uncached ? (
-          'Disk usage will be calculated after the next cache refresh.'
+          'Disk usage will be calculated at the next cache refresh.'
         ) : (
           <Fragment>
             Disk usage last updated{' '}
diff --git a/lattice/src/App/MoleculaTables/MoleculaTables.tsx b/lattice/src/App/MoleculaTables/MoleculaTables.tsx
index 3f677e335..a14cbc621 100644
--- a/lattice/src/App/MoleculaTables/MoleculaTables.tsx
+++ b/lattice/src/App/MoleculaTables/MoleculaTables.tsx
@@ -65,7 +65,7 @@ export const MoleculaTables: FC<MoleculaTablesProps> = ({
           >
             <span className={css.relativeTime}>{lastUpdatedMoment.fromNow()}</span>
           </Tooltip>
-          . Disk usage for new tables will be calculated at the next refresh.
+          . Disk usage for new tables will be calculated at the next cache refresh.
         </div>
         <div className={css.actions}>
           <SortBy

From 7c89eb8033bad246844bf315eaaeeca4ca4afaa2 Mon Sep 17 00:00:00 2001
From: Stephanie Yang <stephanie@pilosa.com>
Date: Mon, 14 Jun 2021 16:02:15 -0500
Subject: [PATCH 5/5] add cache refresh copy

---
 .../MoleculaTable/MoleculaTable.module.scss   |  2 +-
 .../MoleculaTable/MoleculaTable.tsx           | 59 +++++++++++++------
 .../MoleculaTables/MoleculaTables.module.scss |  2 +-
 .../src/App/MoleculaTables/MoleculaTables.tsx | 45 ++++++++++----
 4 files changed, 76 insertions(+), 32 deletions(-)

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<MoleculaTableProps> = ({
   const [maxFieldSize, setMaxFieldSize] = useState<number>(0);
   const [sort, setSort] = useState<string>('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<MoleculaTableProps> = ({
       <Typography variant="h5" color="textSecondary">
         {table.name}
       </Typography>
-      <div className={css.infoMessage}>
-        {dataDistribution && dataDistribution.uncached ? (
-          'Disk usage will be calculated at the next cache refresh.'
-        ) : (
-          <Fragment>
-            Disk usage last updated{' '}
-            <Tooltip
-              title={`${lastUpdatedMoment.format('M/D/YYYY hh:mm a')} UTC`}
-              placement="top"
-              arrow
-            >
-              <span className={css.relativeTime}>{lastUpdatedMoment.fromNow()}</span>
-            </Tooltip>
-            .
-          </Fragment>
-        )}
-      </div>
+      {lastUpdatedMoment ? (
+        <div className={css.infoMessage}>
+          {dataDistribution && dataDistribution.uncached ? (
+            <Fragment>
+              Disk usage will be calculated at the next{` `}
+              <Tooltip
+                title={
+                  <Fragment>
+                    Disk and memory information shown here are read from a
+                    cache, the behavior of which can be controlled with the{` `}
+                    <code style={{ whiteSpace: 'nowrap' }}>
+                      --usage-duty-cycle
+                    </code>{' '}
+                    command line flag.
+                  </Fragment>
+                }
+                placement="top"
+                arrow
+              >
+                <span className={css.infoTooltip}>cache refresh</span>
+              </Tooltip>
+              .
+            </Fragment>
+          ) : (
+            <Fragment>
+              Disk usage last updated{' '}
+              <Tooltip
+                title={`${lastUpdatedMoment.format('M/D/YYYY hh:mm a')} UTC`}
+                placement="top"
+                arrow
+              >
+                <span className={css.infoTooltip}>
+                  {lastUpdatedMoment.fromNow()}
+                </span>
+              </Tooltip>
+              .
+            </Fragment>
+          )}
+        </div>
+      ) : null}
       <div className={css.layout}>
         <div>
           <label className={css.label}>keys</label>
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<MoleculaTablesProps> = ({
 }) => {
   const history = useHistory();
   const [sortedTables, setSortedTables] = useState<any>([]);
-  const lastUpdatedMoment = moment(lastUpdated).utc();
+  const lastUpdatedMoment = lastUpdated ? moment(lastUpdated).utc() : undefined;
 
   useEffect(() => {
     if (tables && dataDistribution) {
@@ -56,17 +56,38 @@ export const MoleculaTables: FC<MoleculaTablesProps> = ({
         <Typography variant="h5" color="textSecondary">
           Tables
         </Typography>
-        <div className={css.infoMessage}>
-          Disk usage last updated{' '}
-          <Tooltip
-            title={`${lastUpdatedMoment.format('M/D/YYYY hh:mm a')} UTC`}
-            placement="top"
-            arrow
-          >
-            <span className={css.relativeTime}>{lastUpdatedMoment.fromNow()}</span>
-          </Tooltip>
-          . Disk usage for new tables will be calculated at the next cache refresh.
-        </div>
+        {lastUpdatedMoment ? (
+          <div className={css.infoMessage}>
+            Disk usage last updated{' '}
+            <Tooltip
+              title={`${lastUpdatedMoment.format('M/D/YYYY hh:mm a')} UTC`}
+              placement="top"
+              arrow
+            >
+              <span className={css.infoTooltip}>
+                {lastUpdatedMoment.fromNow()}
+              </span>
+            </Tooltip>
+            . Disk usage for new tables will be calculated at the next{` `}
+            <Tooltip
+              title={
+                <Fragment>
+                  Disk and memory information shown here are read from a cache,
+                  the behavior of which can be controlled with the{` `}
+                  <code style={{ whiteSpace: 'nowrap' }}>
+                    --usage-duty-cycle
+                  </code>{' '}
+                  command line flag.
+                </Fragment>
+              }
+              placement="top"
+              arrow
+            >
+              <span className={css.infoTooltip}>cache refresh</span>
+            </Tooltip>
+            .
+          </div>
+        ) : null}
         <div className={css.actions}>
           <SortBy
             options={[