fix UI blow up when index disk usage not available

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"

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'
                       }

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
       }
     />
   ) : (

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...