ui: add loading skeletons to databases and tables pages

The databases and tables pages can take a long time to load data on clusters with large sizes. The current user experience did not clearly signal which pieces of information were in progress or missing. This change updates each cell to show a skeleton as it waits for data from the backend. If there's no data returned we will show the text "No Data" instead of "(unavailable)". The `checkInfoAvailable` helper function is converted into a functional React component for ease of testing and code uniformity. We add styling to ensure that warning icons within cells are aligned properly and colored the orange color we use elsewhere. Also removes the narrow styling of the "% of Live Data" column. Resolves: cockroachdb#124153 Epic: CRDB-37558 Release note (ui change): The databases and tables pages in the DB Console will show a loading state while loading information for databases and tables including size and range counts.
dhartunian · Jul 25, 2024 · 4b00756 · 4b00756
1 parent 3314a3e
commit 4b00756
Show file tree

Hide file tree

Showing 10 changed files with 377 additions and 160 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.module.scss b/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.module.scss
@@ -30,6 +30,15 @@
   &__no-result {
     @include text--body-strong;
   }
+
+  &__cell-error {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    svg {
+      fill: $colors--warning;
+    }
+  }
 }
 
 .sorted-table {

diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx
@@ -59,7 +59,7 @@ import {
   TableSchemaDetailsRow,
   TableSpanStatsRow,
 } from "../api";
-import { checkInfoAvailable } from "../databases";
+import { LoadingCell } from "../databases";
 import { InlineAlert } from "@cockroachlabs/ui-components";
 
 const cx = classNames.bind(styles);
@@ -563,12 +563,16 @@ export class DatabaseDetailsPage extends React.Component<
               Ranges
             </Tooltip>
           ),
-          cell: table =>
-            checkInfoAvailable(
-              table.requestError,
-              table.details.spanStats?.error,
-              table.details.spanStats?.range_count,
-            ),
+          cell: table => (
+            <LoadingCell
+              requestError={table.requestError}
+              queryError={table.details.spanStats?.error}
+              loading={table.loading}
+              errorClassName={cx("database-table__cell-error")}
+            >
+              {table.details.spanStats?.range_count}
+            </LoadingCell>
+          ),
           sort: table => table.details.spanStats?.range_count,
           className: cx("database-table__col-range-count"),
           name: "rangeCount",
@@ -582,12 +586,16 @@ export class DatabaseDetailsPage extends React.Component<
               Columns
             </Tooltip>
           ),
-          cell: table =>
-            checkInfoAvailable(
-              table.requestError,
-              table.details.schemaDetails?.error,
-              table.details.schemaDetails?.columns?.length,
-            ),
+          cell: table => (
+            <LoadingCell
+              requestError={table.requestError}
+              queryError={table.details.schemaDetails?.error}
+              loading={table.loading}
+              errorClassName={cx("database-table__cell-error")}
+            >
+              {table.details.schemaDetails?.columns?.length}
+            </LoadingCell>
+          ),
           sort: table => table.details.schemaDetails?.columns?.length,
           className: cx("database-table__col-column-count"),
           name: "columnCount",
@@ -620,15 +628,19 @@ export class DatabaseDetailsPage extends React.Component<
               Regions
             </Tooltip>
           ),
-          cell: table =>
-            checkInfoAvailable(
-              table.requestError,
-              null,
-              table.details.nodesByRegionString &&
-                table.details.nodesByRegionString.length > 0
+          cell: table => (
+            <LoadingCell
+              requestError={table.requestError}
+              queryError={null}
+              loading={table.loading}
+              errorClassName={cx("database-table__cell-error")}
+            >
+              {table.details.nodesByRegionString &&
+              table.details.nodesByRegionString.length > 0
                 ? table.details.nodesByRegionString
-                : null,
-            ),
+                : null}
+            </LoadingCell>
+          ),
           sort: table => table.details.nodesByRegionString,
           className: cx("database-table__col--regions"),
           name: "regions",
@@ -653,16 +665,19 @@ export class DatabaseDetailsPage extends React.Component<
               % of Live Data
             </Tooltip>
           ),
-          cell: table =>
-            checkInfoAvailable(
-              table.requestError,
-              table.details.spanStats?.error,
-              table.details.spanStats ? (
+          cell: table => (
+            <LoadingCell
+              requestError={table.requestError}
+              queryError={table.details.spanStats?.error}
+              loading={table.loading}
+              errorClassName={cx("database-table__cell-error")}
+            >
+              {table.details.spanStats ? (
                 <MVCCInfoCell details={table.details} />
-              ) : null,
-            ),
+              ) : null}
+            </LoadingCell>
+          ),
           sort: table => table.details.spanStats?.live_percentage,
-          className: cx("database-table__col-column-count"),
           name: "livePercentage",
         },
         {
@@ -674,16 +689,20 @@ export class DatabaseDetailsPage extends React.Component<
               Table Stats Last Updated <Timezone />
             </Tooltip>
           ),
-          cell: table =>
-            checkInfoAvailable(
-              table.requestError,
-              table.details.statsLastUpdated?.error,
+          cell: table => (
+            <LoadingCell
+              requestError={table.requestError}
+              queryError={table.details.statsLastUpdated?.error}
+              loading={table.loading}
+              errorClassName={cx("database-table__cell-error")}
+            >
               <Timestamp
                 time={table.details.statsLastUpdated?.stats_last_created_at}
                 format={DATE_FORMAT}
                 fallback={"No table statistics found"}
-              />,
-            ),
+              />
+            </LoadingCell>
+          ),
           sort: table => table.details.statsLastUpdated,
           className: cx("database-table__col--table-stats"),
           name: "tableStatsUpdated",
@@ -722,12 +741,16 @@ export class DatabaseDetailsPage extends React.Component<
             Users
           </Tooltip>
         ),
-        cell: table =>
-          checkInfoAvailable(
-            table.requestError,
-            table.details.grants?.error,
-            table.details.grants?.roles.length,
-          ),
+        cell: table => (
+          <LoadingCell
+            requestError={table.requestError}
+            queryError={table.details.grants?.error}
+            loading={table.loading}
+            errorClassName={cx("database-table__cell-error")}
+          >
+            {table.details.grants?.roles.length}
+          </LoadingCell>
+        ),
         sort: table => table.details.grants?.roles.length,
         className: cx("database-table__col-user-count"),
         name: "userCount",
@@ -738,12 +761,16 @@ export class DatabaseDetailsPage extends React.Component<
             Roles
           </Tooltip>
         ),
-        cell: table =>
-          checkInfoAvailable(
-            table.requestError,
-            table.details.grants?.error,
-            table.details.grants?.roles.join(", "),
-          ),
+        cell: table => (
+          <LoadingCell
+            requestError={table.requestError}
+            queryError={table.details.grants?.error}
+            loading={table.loading}
+            errorClassName={cx("database-table__cell-error")}
+          >
+            {table.details.grants?.roles.join(", ")}
+          </LoadingCell>
+        ),
         sort: table => table.details.grants?.roles.join(", "),
         className: cx("database-table__col-roles"),
         name: "roles",
@@ -754,12 +781,16 @@ export class DatabaseDetailsPage extends React.Component<
             Grants
           </Tooltip>
         ),
-        cell: table =>
-          checkInfoAvailable(
-            table.requestError,
-            table.details.grants?.error,
-            table.details.grants?.privileges.join(", "),
-          ),
+        cell: table => (
+          <LoadingCell
+            requestError={table.requestError}
+            queryError={table.details.grants?.error}
+            loading={table.loading}
+            errorClassName={cx("database-table__cell-error")}
+          >
+            {table.details.grants?.privileges.join(", ")}
+          </LoadingCell>
+        ),
         sort: table => table.details.grants?.privileges?.join(", "),
         className: cx("database-table__col-grants"),
         name: "grants",

diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/tableCells.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/tableCells.tsx
@@ -33,7 +33,7 @@ import * as format from "../util/format";
 import { Breadcrumbs } from "../breadcrumbs";
 import { CaretRight } from "../icon/caretRight";
 import { CockroachCloudContext } from "../contexts";
-import { checkInfoAvailable, getNetworkErrorMessage } from "../databases";
+import { LoadingCell, getNetworkErrorMessage } from "../databases";
 
 const cx = classNames.bind(styles);
 
@@ -44,13 +44,18 @@ export const DiskSizeCell = ({
 }): JSX.Element => {
   return (
     <>
-      {checkInfoAvailable(
-        table.requestError,
-        table.details?.spanStats?.error,
-        table.details?.spanStats?.approximate_disk_bytes
-          ? format.Bytes(table.details?.spanStats?.approximate_disk_bytes)
-          : null,
-      )}
+      {
+        <LoadingCell
+          requestError={table.requestError}
+          queryError={table.details?.spanStats?.error}
+          loading={table.loading}
+          errorClassName={cx("database-table__cell-error")}
+        >
+          {table.details?.spanStats?.approximate_disk_bytes
+            ? format.Bytes(table.details?.spanStats?.approximate_disk_bytes)
+            : null}
+        </LoadingCell>
+      }
     </>
   );
 };
@@ -110,11 +115,16 @@ export const IndexesCell = ({
 }): JSX.Element => {
   const elem = (
     <>
-      {checkInfoAvailable(
-        table.requestError,
-        table.details?.schemaDetails?.error,
-        table.details?.schemaDetails?.indexes?.length,
-      )}
+      {
+        <LoadingCell
+          requestError={table.requestError}
+          queryError={table.details?.schemaDetails?.error}
+          loading={table.loading}
+          errorClassName={cx("database-table__cell-error")}
+        >
+          {table.details?.schemaDetails?.indexes?.length}
+        </LoadingCell>
+      }
     </>
   );
   // If index recommendations are not enabled or we don't have any index recommendations,

diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.module.scss b/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.module.scss
@@ -40,6 +40,15 @@
     @include text--body;
     overflow-wrap: anywhere;
   }
+
+  &__error-cell{
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    svg {
+      fill: $colors--warning;
+    }
+  }
 }
 
 .icon {