Skip to content

Commit

Permalink
Merge pull request #91013 from maryliag/backport22.1-90862
Browse files Browse the repository at this point in the history 
release-22.1: ui: handle errors on db endpoints
  • Loading branch information
@maryliag
maryliag authored Oct 31, 2022
2 parents bc09df1 + d29f8e0 commit a1128ec
Show file tree
Hide file tree
Showing 20 changed files with 514 additions and 192 deletions.
5 changes: 5 additions & 0 deletions pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ const history = H.createHashHistory();
const withLoadingIndicator: DatabaseDetailsPageProps = {
loading: true,
loaded: false,
lastError: undefined,
name: randomName(),
tables: [],
viewMode: ViewMode.Tables,
Expand Down Expand Up @@ -60,6 +61,7 @@ const withLoadingIndicator: DatabaseDetailsPageProps = {
const withoutData: DatabaseDetailsPageProps = {
loading: false,
loaded: true,
lastError: null,
name: randomName(),
tables: [],
viewMode: ViewMode.Tables,
Expand Down Expand Up @@ -89,6 +91,7 @@ const withoutData: DatabaseDetailsPageProps = {
const withData: DatabaseDetailsPageProps = {
loading: false,
loaded: true,
lastError: null,
name: randomName(),
tables: _.map(Array(42), _item => {
const roles = _.uniq(
Expand All @@ -103,6 +106,7 @@ const withData: DatabaseDetailsPageProps = {
details: {
loading: false,
loaded: true,
lastError: null,
columnCount: _.random(5, 42),
indexCount: _.random(1, 6),
userCount: roles.length,
Expand All @@ -114,6 +118,7 @@ const withData: DatabaseDetailsPageProps = {
stats: {
loading: false,
loaded: true,
lastError: null,
replicationSizeInBytes: _.random(1000.0) * 1024 ** _.random(1, 2),
rangeCount: _.random(50, 500),
nodesByRegionString:
Expand Down
183 changes: 153 additions & 30 deletions pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import React from "react";
import { Link, RouteComponentProps } from "react-router-dom";
import { Tooltip } from "antd";
import classNames from "classnames/bind";
import _ from "lodash";

import { Breadcrumbs } from "src/breadcrumbs";
import { Dropdown, DropdownOption } from "src/dropdown";
Expand All @@ -38,6 +37,8 @@ import {
} from "src/transactionsPage/transactionsPageClasses";
import { Moment } from "moment";
import { DATE_FORMAT } from "src/util/format";
import LoadingError from "../sqlActivity/errorComponent";
import { Loading } from "../loading";

const cx = classNames.bind(styles);
const sortableTableCx = classNames.bind(sortableTableStyles);
Expand All @@ -54,6 +55,7 @@ const sortableTableCx = classNames.bind(sortableTableStyles);
// interface DatabaseDetailsPageData {
// loading: boolean;
// loaded: boolean;
// lastError: Error;
// name: string;
// sortSettingTables: SortSetting;
// sortSettingGrants: SortSetting;
Expand All @@ -63,6 +65,7 @@ const sortableTableCx = classNames.bind(sortableTableStyles);
// details: { // DatabaseDetailsPageDataTableDetails
// loading: boolean;
// loaded: boolean;
// lastError: Error;
// columnCount: number;
// indexCount: number;
// userCount: number;
Expand All @@ -72,6 +75,7 @@ const sortableTableCx = classNames.bind(sortableTableStyles);
// stats: { // DatabaseDetailsPageDataTableStats
// loading: boolean;
// loaded: boolean;
// lastError: Error;
// replicationSizeInBytes: number;
// rangeCount: number;
// nodesByRegionString: string;
Expand All @@ -81,6 +85,7 @@ const sortableTableCx = classNames.bind(sortableTableStyles);
export interface DatabaseDetailsPageData {
loading: boolean;
loaded: boolean;
lastError: Error;
name: string;
tables: DatabaseDetailsPageDataTable[];
sortSettingTables: SortSetting;
Expand All @@ -98,6 +103,7 @@ export interface DatabaseDetailsPageDataTable {
export interface DatabaseDetailsPageDataTableDetails {
loading: boolean;
loaded: boolean;
lastError: Error;
columnCount: number;
indexCount: number;
userCount: number;
Expand All @@ -109,6 +115,7 @@ export interface DatabaseDetailsPageDataTableDetails {
export interface DatabaseDetailsPageDataTableStats {
loading: boolean;
loaded: boolean;
lastError: Error;
replicationSizeInBytes: number;
rangeCount: number;
nodesByRegionString?: string;
Expand All @@ -134,6 +141,8 @@ export enum ViewMode {

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

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

const { history } = this.props;
Expand Down Expand Up @@ -199,16 +210,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);
}

_.forEach(this.props.tables, table => {
if (!table.details.loaded && !table.details.loading) {
let lastDetailsError: Error;
let lastStatsError: Error;
this.props.tables.forEach(table => {
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 @@ -259,6 +303,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
>[] {
Expand Down Expand Up @@ -291,7 +345,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 @@ -305,7 +363,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 @@ -319,7 +381,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 @@ -333,7 +399,11 @@ export class DatabaseDetailsPage extends React.Component<
Indexes
</Tooltip>
),
cell: table => table.details.indexCount,
cell: table =>
this.checkInfoAvailable(
table.stats.lastError,
table.details.indexCount,
),
sort: table => table.details.indexCount,
className: cx("database-table__col-index-count"),
name: "indexCount",
Expand All @@ -347,7 +417,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 Down Expand Up @@ -403,7 +477,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 @@ -414,8 +492,12 @@ export class DatabaseDetailsPage extends React.Component<
Roles
</Tooltip>
),
cell: table => _.join(table.details.roles, ", "),
sort: table => _.join(table.details.roles, ", "),
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 @@ -425,8 +507,12 @@ export class DatabaseDetailsPage extends React.Component<
Grants
</Tooltip>
),
cell: table => _.join(table.details.grants, ", "),
sort: table => _.join(table.details.grants, ", "),
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 @@ -498,24 +584,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 a1128ec

Please sign in to comment.