Skip to content

Commit

Permalink
Merge pull request #91032 from maryliag/backport22.2-90862
Browse files Browse the repository at this point in the history 
release-22.2: ui: handle errors on db endpoints
  • Loading branch information
@maryliag
maryliag authored Nov 1, 2022
2 parents 4f49359 + 86dcb5c commit 9f6d5b4
Show file tree
Hide file tree
Showing 19 changed files with 507 additions and 195 deletions.
183 changes: 155 additions & 28 deletions pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ import {
import { Moment } from "moment";
import { Caution } from "@cockroachlabs/icons";
import { Anchor } from "../anchor";
import LoadingError from "../sqlActivity/errorComponent";
import { Loading } from "../loading";

const cx = classNames.bind(styles);
const sortableTableCx = classNames.bind(sortableTableStyles);
Expand All @@ -55,6 +57,7 @@ const sortableTableCx = classNames.bind(sortableTableStyles);
// interface DatabaseDetailsPageData {
// loading: boolean;
// loaded: boolean;
// lastError: Error;
// name: string;
// sortSettingTables: SortSetting;
// sortSettingGrants: SortSetting;
Expand All @@ -64,6 +67,7 @@ const sortableTableCx = classNames.bind(sortableTableStyles);
// details: { // DatabaseDetailsPageDataTableDetails
// loading: boolean;
// loaded: boolean;
// lastError: Error;
// columnCount: number;
// indexCount: number;
// userCount: number;
Expand All @@ -73,6 +77,7 @@ const sortableTableCx = classNames.bind(sortableTableStyles);
// stats: { // DatabaseDetailsPageDataTableStats
// loading: boolean;
// loaded: boolean;
// lastError: Error;
// replicationSizeInBytes: number;
// rangeCount: number;
// nodesByRegionString: string;
Expand All @@ -82,6 +87,7 @@ const sortableTableCx = classNames.bind(sortableTableStyles);
export interface DatabaseDetailsPageData {
loading: boolean;
loaded: boolean;
lastError: Error;
name: string;
tables: DatabaseDetailsPageDataTable[];
sortSettingTables: SortSetting;
Expand All @@ -99,6 +105,7 @@ export interface DatabaseDetailsPageDataTable {
export interface DatabaseDetailsPageDataTableDetails {
loading: boolean;
loaded: boolean;
lastError: Error;
columnCount: number;
indexCount: number;
userCount: number;
Expand All @@ -114,6 +121,7 @@ export interface DatabaseDetailsPageDataTableDetails {
export interface DatabaseDetailsPageDataTableStats {
loading: boolean;
loaded: boolean;
lastError: Error;
replicationSizeInBytes: number;
rangeCount: number;
nodesByRegionString?: string;
Expand All @@ -139,6 +147,8 @@ export enum ViewMode {

interface DatabaseDetailsPageState {
pagination: ISortedTablePagination;
lastStatsError: Error;
lastDetailsError: Error;
}

class DatabaseSortedTable extends SortedTable<DatabaseDetailsPageDataTable> {}
Expand All @@ -154,6 +164,8 @@ export class DatabaseDetailsPage extends React.Component<
current: 1,
pageSize: 20,
},
lastDetailsError: null,
lastStatsError: null,
};

const { history } = this.props;
Expand Down Expand Up @@ -204,16 +216,49 @@ export class DatabaseDetailsPage extends React.Component<
}

private refresh(): void {
if (!this.props.loaded && !this.props.loading) {
if (
!this.props.loaded &&
!this.props.loading &&
this.props.lastError === undefined
) {
return this.props.refreshDatabaseDetails(this.props.name);
}

let lastDetailsError: Error;
let lastStatsError: Error;
this.props.tables.forEach(table => {
if (!table.details.loaded && !table.details.loading) {
if (table.details.lastError !== undefined) {
lastDetailsError = table.details.lastError;
}
if (
lastDetailsError &&
this.state.lastDetailsError?.name != lastDetailsError?.name
) {
this.setState({ lastDetailsError: lastDetailsError });
}

if (
!table.details.loaded &&
!table.details.loading &&
table.details.lastError === undefined
) {
return this.props.refreshTableDetails(this.props.name, table.name);
}

if (!table.stats.loaded && !table.stats.loading) {
if (table.stats.lastError !== undefined) {
lastStatsError = table.stats.lastError;
}
if (
lastStatsError &&
this.state.lastStatsError?.name != lastStatsError?.name
) {
this.setState({ lastStatsError: lastStatsError });
}
if (
!table.stats.loaded &&
!table.stats.loading &&
table.stats.lastError === undefined
) {
return this.props.refreshTableStats(this.props.name, table.name);
}
});
Expand Down Expand Up @@ -282,6 +327,16 @@ export class DatabaseDetailsPage extends React.Component<
);
};

checkInfoAvailable = (
error: Error,
cell: React.ReactNode,
): React.ReactNode => {
if (error) {
return "(unavailable)";
}
return cell;
};

private columnsForTablesViewMode(): ColumnDescriptor<DatabaseDetailsPageDataTable>[] {
return [
{
Expand Down Expand Up @@ -312,7 +367,11 @@ export class DatabaseDetailsPage extends React.Component<
Replication Size
</Tooltip>
),
cell: table => format.Bytes(table.stats.replicationSizeInBytes),
cell: table =>
this.checkInfoAvailable(
table.stats.lastError,
format.Bytes(table.stats.replicationSizeInBytes),
),
sort: table => table.stats.replicationSizeInBytes,
className: cx("database-table__col-size"),
name: "replicationSize",
Expand All @@ -326,7 +385,11 @@ export class DatabaseDetailsPage extends React.Component<
Ranges
</Tooltip>
),
cell: table => table.stats.rangeCount,
cell: table =>
this.checkInfoAvailable(
table.stats.lastError,
table.stats.rangeCount,
),
sort: table => table.stats.rangeCount,
className: cx("database-table__col-range-count"),
name: "rangeCount",
Expand All @@ -340,7 +403,11 @@ export class DatabaseDetailsPage extends React.Component<
Columns
</Tooltip>
),
cell: table => table.details.columnCount,
cell: table =>
this.checkInfoAvailable(
table.stats.lastError,
table.details.columnCount,
),
sort: table => table.details.columnCount,
className: cx("database-table__col-column-count"),
name: "columnCount",
Expand All @@ -355,8 +422,9 @@ export class DatabaseDetailsPage extends React.Component<
</Tooltip>
),
cell: table => {
let cell;
if (table.details.hasIndexRecommendations) {
return (
cell = (
<div className={cx("icon__container")}>
<Tooltip
placement="bottom"
Expand All @@ -367,8 +435,10 @@ export class DatabaseDetailsPage extends React.Component<
{table.details.indexCount}
</div>
);
} else {
cell = table.details.indexCount;
}
return table.details.indexCount;
return this.checkInfoAvailable(table.stats.lastError, cell);
},
sort: table => table.details.indexCount,
className: cx("database-table__col-index-count"),
Expand All @@ -383,7 +453,11 @@ export class DatabaseDetailsPage extends React.Component<
Regions
</Tooltip>
),
cell: table => table.stats.nodesByRegionString || "None",
cell: table =>
this.checkInfoAvailable(
table.stats.lastError,
table.stats.nodesByRegionString || "None",
),
sort: table => table.stats.nodesByRegionString,
className: cx("database-table__col--regions"),
name: "regions",
Expand All @@ -408,7 +482,11 @@ export class DatabaseDetailsPage extends React.Component<
% of Live Data
</Tooltip>
),
cell: table => this.formatMVCCInfo(table.details),
cell: table =>
this.checkInfoAvailable(
table.stats.lastError,
this.formatMVCCInfo(table.details),
),
sort: table => table.details.livePercentage,
className: cx("database-table__col-column-count"),
name: "livePercentage",
Expand Down Expand Up @@ -460,7 +538,11 @@ export class DatabaseDetailsPage extends React.Component<
Users
</Tooltip>
),
cell: table => table.details.userCount,
cell: table =>
this.checkInfoAvailable(
table.details.lastError,
table.details.userCount,
),
sort: table => table.details.userCount,
className: cx("database-table__col-user-count"),
name: "userCount",
Expand All @@ -471,7 +553,11 @@ export class DatabaseDetailsPage extends React.Component<
Roles
</Tooltip>
),
cell: table => table.details.roles.join(", "),
cell: table =>
this.checkInfoAvailable(
table.details.lastError,
table.details.roles.join(", "),
),
sort: table => table.details.roles.join(", "),
className: cx("database-table__col-roles"),
name: "roles",
Expand All @@ -482,7 +568,11 @@ export class DatabaseDetailsPage extends React.Component<
Grants
</Tooltip>
),
cell: table => table.details.grants.join(", "),
cell: table =>
this.checkInfoAvailable(
table.details.lastError,
table.details.grants.join(", "),
),
sort: table => table.details.grants.join(", "),
className: cx("database-table__col-grants"),
name: "grants",
Expand Down Expand Up @@ -555,24 +645,61 @@ export class DatabaseDetailsPage extends React.Component<
/>
</h4>
</div>

<DatabaseSortedTable
className={cx("database-table")}
data={this.props.tables}
columns={this.columns()}
sortSetting={sortSetting}
onChangeSortSetting={this.changeSortSetting}
pagination={this.state.pagination}
<Loading
loading={this.props.loading}
renderNoResult={
<div
className={cx("database-table__no-result", "icon__container")}
>
<DatabaseIcon className={cx("icon--s")} />
This database has no tables.
</div>
page={"databases"}
error={this.props.lastError}
render={() => (
<DatabaseSortedTable
className={cx("database-table")}
data={this.props.tables}
columns={this.columns()}
sortSetting={sortSetting}
onChangeSortSetting={this.changeSortSetting}
pagination={this.state.pagination}
loading={this.props.loading}
renderNoResult={
<div
className={cx(
"database-table__no-result",
"icon__container",
)}
>
<DatabaseIcon className={cx("icon--s")} />
This database has no tables.
</div>
}
/>
)}
renderError={() =>
LoadingError({
statsType: "databases",
timeout: this.props.lastError?.name
?.toLowerCase()
.includes("timeout"),
})
}
/>
{!this.props.loading && (
<Loading
loading={this.props.loading}
page={"database_details"}
error={this.state.lastDetailsError || this.state.lastStatsError}
render={() => <></>}
renderError={() =>
LoadingError({
statsType: "part of the information",
timeout:
this.state.lastDetailsError?.name
?.toLowerCase()
.includes("timeout") ||
this.state.lastStatsError?.name
?.toLowerCase()
.includes("timeout"),
})
}
/>
)}
</section>

<Pagination
Expand Down
Loading

0 comments on commit 9f6d5b4

Please sign in to comment.