Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui: fix db page Node/Regions column rendering #105765

Merged
merged 1 commit into from
Jun 29, 2023
Merged

ui: fix db page Node/Regions column rendering #105765

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
322 changes: 154 additions & 168 deletions pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,7 @@ import { Link, RouteComponentProps } from "react-router-dom";
import { Tooltip } from "antd";
import "antd/lib/tooltip/style";
import classNames from "classnames/bind";
import { Breadcrumbs } from "src/breadcrumbs";
import { Dropdown, DropdownOption } from "src/dropdown";
import { CaretRight } from "src/icon/caretRight";
import { DatabaseIcon } from "src/icon/databaseIcon";
import { StackIcon } from "src/icon/stackIcon";
import { PageConfig, PageConfigItem } from "src/pageConfig";
Expand All @@ -27,25 +25,13 @@ import {
SortSetting,
} from "src/sortedtable";
import * as format from "src/util/format";
import {
DATE_FORMAT,
EncodeDatabaseTableUri,
EncodeDatabaseUri,
EncodeUriName,
} from "src/util/format";
import {
getMatchParamByName,
mvccGarbage,
schemaNameAttr,
syncHistory,
unique,
} from "../util";
import { DATE_FORMAT, EncodeDatabaseTableUri } from "src/util/format";
import { mvccGarbage, syncHistory, unique } from "../util";

import styles from "./databaseDetailsPage.module.scss";
import sortableTableStyles from "src/sortedtable/sortedtable.module.scss";
import { baseHeadingClasses } from "src/transactionsPage/transactionsPageClasses";
import { Moment } from "moment-timezone";
import { Caution } from "@cockroachlabs/icons";
import { Anchor } from "../anchor";
import LoadingError from "../sqlActivity/errorComponent";
import { Loading } from "../loading";
Expand Down Expand Up @@ -198,12 +184,10 @@ function filterBySearchQuery(
return matchString.includes(search);
}

const res = search
return search
.toLowerCase()
.split(" ")
.every(val => matchString.includes(val));

return res;
}

export class DatabaseDetailsPage extends React.Component<
Expand Down Expand Up @@ -540,159 +524,161 @@ export class DatabaseDetailsPage extends React.Component<
};

private columnsForTablesViewMode(): ColumnDescriptor<DatabaseDetailsPageDataTable>[] {
return [
{
title: (
<Tooltip placement="bottom" title="The name of the table.">
Tables
</Tooltip>
),
cell: table => <TableNameCell table={table} dbDetails={this.props} />,
sort: table => table.name,
className: cx("database-table__col-name"),
name: "name",
},
{
title: (
<Tooltip
placement="bottom"
title="The approximate compressed total disk size across all replicas of the table."
>
Replication Size
</Tooltip>
),
cell: table =>
this.checkInfoAvailable(
table.lastError,
format.Bytes(table.details.replicationSizeInBytes),
return (
[
{
title: (
<Tooltip placement="bottom" title="The name of the table.">
Tables
</Tooltip>
),
sort: table => table.details.replicationSizeInBytes,
className: cx("database-table__col-size"),
name: "replicationSize",
},
{
title: (
<Tooltip
placement="bottom"
title="The total number of ranges in the table."
>
Ranges
</Tooltip>
),
cell: table =>
this.checkInfoAvailable(table.lastError, table.details.rangeCount),
sort: table => table.details.rangeCount,
className: cx("database-table__col-range-count"),
name: "rangeCount",
},
{
title: (
<Tooltip
placement="bottom"
title="The number of columns in the table."
>
Columns
</Tooltip>
),
cell: table =>
this.checkInfoAvailable(table.lastError, table.details.columnCount),
sort: table => table.details.columnCount,
className: cx("database-table__col-column-count"),
name: "columnCount",
},
{
title: (
<Tooltip
placement="bottom"
title="The number of indexes in the table."
>
Indexes
</Tooltip>
),
cell: table => {
return table.details.hasIndexRecommendations &&
this.props.showIndexRecommendations
? this.checkInfoAvailable(
table.lastError,
<IndexRecWithIconCell table={table} />,
)
: this.checkInfoAvailable(
table.lastError,
table.details.indexCount,
);
cell: table => <TableNameCell table={table} dbDetails={this.props} />,
sort: table => table.name,
className: cx("database-table__col-name"),
name: "name",
},
sort: table => table.details.indexCount,
className: cx("database-table__col-index-count"),
name: "indexCount",
},
{
title: (
<Tooltip
placement="bottom"
title="Regions/Nodes on which the table data is stored."
>
Regions
</Tooltip>
),
cell: table =>
this.checkInfoAvailable(
table.lastError,
table.details.nodesByRegionString || "None",
{
title: (
<Tooltip
placement="bottom"
title="The approximate compressed total disk size across all replicas of the table."
>
Replication Size
</Tooltip>
),
sort: table => table.details.nodesByRegionString,
className: cx("database-table__col--regions"),
name: "regions",
showByDefault: this.props.showNodeRegionsColumn,
hideIfTenant: true,
},
{
title: (
<Tooltip
placement="bottom"
title={
<div className={cx("tooltip__table--title")}>
{"% of total uncompressed logical data that has not been modified (updated or deleted). " +
"A low percentage can cause statements to scan more data ("}
<Anchor href={mvccGarbage} target="_blank">
MVCC values
</Anchor>
{") than required, which can reduce performance."}
</div>
}
>
% of Live Data
</Tooltip>
),
cell: table =>
this.checkInfoAvailable(
table.lastError,
<MVCCInfoCell details={table.details} />,
cell: table =>
this.checkInfoAvailable(
table.lastError,
format.Bytes(table.details.replicationSizeInBytes),
),
sort: table => table.details.replicationSizeInBytes,
className: cx("database-table__col-size"),
name: "replicationSize",
},
{
title: (
<Tooltip
placement="bottom"
title="The total number of ranges in the table."
>
Ranges
</Tooltip>
),
sort: table => table.details.livePercentage,
className: cx("database-table__col-column-count"),
name: "livePercentage",
},
{
title: (
<Tooltip
placement="bottom"
title="The last time table statistics were created or updated."
>
Table Stats Last Updated <Timezone />
</Tooltip>
),
cell: table => (
<Timestamp
time={table.details.statsLastUpdated}
format={DATE_FORMAT}
fallback={"No table statistics found"}
/>
),
sort: table => table.details.statsLastUpdated,
className: cx("database-table__col--table-stats"),
name: "tableStatsUpdated",
},
];
cell: table =>
this.checkInfoAvailable(table.lastError, table.details.rangeCount),
sort: table => table.details.rangeCount,
className: cx("database-table__col-range-count"),
name: "rangeCount",
},
{
title: (
<Tooltip
placement="bottom"
title="The number of columns in the table."
>
Columns
</Tooltip>
),
cell: table =>
this.checkInfoAvailable(table.lastError, table.details.columnCount),
sort: table => table.details.columnCount,
className: cx("database-table__col-column-count"),
name: "columnCount",
},
{
title: (
<Tooltip
placement="bottom"
title="The number of indexes in the table."
>
Indexes
</Tooltip>
),
cell: table => {
return table.details.hasIndexRecommendations &&
this.props.showIndexRecommendations
? this.checkInfoAvailable(
table.lastError,
<IndexRecWithIconCell table={table} />,
)
: this.checkInfoAvailable(
table.lastError,
table.details.indexCount,
);
},
sort: table => table.details.indexCount,
className: cx("database-table__col-index-count"),
name: "indexCount",
},
{
title: (
<Tooltip
placement="bottom"
title="Regions/Nodes on which the table data is stored."
>
Regions
</Tooltip>
),
cell: table =>
this.checkInfoAvailable(
table.lastError,
table.details.nodesByRegionString || "None",
),
sort: table => table.details.nodesByRegionString,
className: cx("database-table__col--regions"),
name: "regions",
showByDefault: this.props.showNodeRegionsColumn,
hideIfTenant: true,
},
{
title: (
<Tooltip
placement="bottom"
title={
<div className={cx("tooltip__table--title")}>
{"% of total uncompressed logical data that has not been modified (updated or deleted). " +
"A low percentage can cause statements to scan more data ("}
<Anchor href={mvccGarbage} target="_blank">
MVCC values
</Anchor>
{") than required, which can reduce performance."}
</div>
}
>
% of Live Data
</Tooltip>
),
cell: table =>
this.checkInfoAvailable(
table.lastError,
<MVCCInfoCell details={table.details} />,
),
sort: table => table.details.livePercentage,
className: cx("database-table__col-column-count"),
name: "livePercentage",
},
{
title: (
<Tooltip
placement="bottom"
title="The last time table statistics were created or updated."
>
Table Stats Last Updated <Timezone />
</Tooltip>
),
cell: table => (
<Timestamp
time={table.details.statsLastUpdated}
format={DATE_FORMAT}
fallback={"No table statistics found"}
/>
),
sort: table => table.details.statsLastUpdated,
className: cx("database-table__col--table-stats"),
name: "tableStatsUpdated",
},
] as ColumnDescriptor<DatabaseDetailsPageDataTable>[]
).filter(c => c.showByDefault !== false);
}

private columnsForGrantsViewMode(): ColumnDescriptor<DatabaseDetailsPageDataTable>[] {
Expand Down
9 changes: 5 additions & 4 deletions pkg/ui/workspaces/cluster-ui/src/databasesPage/databasesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,16 +276,17 @@ export class DatabasesPage extends React.Component<
}

componentDidUpdate(
prevProp: Readonly<DatabasesPageProps>,
prevProps: Readonly<DatabasesPageProps>,
prevState: Readonly<DatabasesPageState>,
): void {
if (this.shouldRefreshDatabaseInformation(prevState, prevProp)) {
if (this.shouldRefreshDatabaseInformation(prevState, prevProps)) {
this.updateQueryParams();
this.refresh();
}
if (
prevProp.indexRecommendationsEnabled !==
this.props.indexRecommendationsEnabled
prevProps.indexRecommendationsEnabled !==
this.props.indexRecommendationsEnabled ||
prevProps.showNodeRegionsColumn !== this.props.showNodeRegionsColumn
) {
this.setState({ columns: this.columns() });
}
Expand Down