Skip to content

Commit

Permalink
ui: add loading skeletons to databases and tables pages
Browse files Browse the repository at this point in the history 
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: #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.
  • Loading branch information
@dhartunian
dhartunian committed Jul 26, 2024
1 parent af44733 commit 23ae9c6
Show file tree
Hide file tree
Showing 10 changed files with 377 additions and 160 deletions.
9 changes: 9 additions & 0 deletions pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
137 changes: 84 additions & 53 deletions pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ import {
TableSchemaDetailsRow,
TableSpanStatsRow,
} from "../api";
import { checkInfoAvailable } from "../databases";
import { LoadingCell } from "../databases";
import { InlineAlert } from "@cockroachlabs/ui-components";
import { ViewMode } from "./types";

Expand Down Expand Up @@ -561,12 +561,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",
Expand All @@ -580,12 +584,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",
Expand Down Expand Up @@ -618,15 +626,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",
Expand All @@ -651,16 +663,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",
},
{
Expand All @@ -672,16 +687,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",
Expand Down Expand Up @@ -720,12 +739,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",
Expand All @@ -736,12 +759,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",
Expand All @@ -752,12 +779,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",
Expand Down
36 changes: 23 additions & 13 deletions pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/tableCells.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,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";
import { ViewMode } from "./types";

const cx = classNames.bind(styles);
Expand All @@ -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>
}
</>
);
};
Expand Down Expand Up @@ -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,
Expand Down
9 changes: 9 additions & 0 deletions pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Loading

0 comments on commit 23ae9c6

Please sign in to comment.