Skip to content

Commit

Permalink
Merge pull request #127748 from dhartunian/backport24.1-127075
Browse files Browse the repository at this point in the history 
release-24.1: ui: add loading skeletons to databases and tables pages
  • Loading branch information
@dhartunian
dhartunian authored Jul 29, 2024
2 parents a0d07ba + 23ae9c6 commit 8cd741f
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 8cd741f

Please sign in to comment.