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

Jump to bottom

release-21.2: ui: move loading and error pages to below page settings #75527

Merged
merged 1 commit into from
Jan 26, 2022
Merged

release-21.2: ui: move loading and error pages to below page settings #75527

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
113 changes: 59 additions & 54 deletions pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,7 +285,6 @@ export class StatementsPage extends React.Component<

componentDidUpdate = (): void => {
this.updateQueryParams();
this.refreshStatements();
if (!this.props.isTenant && !this.props.hasViewActivityRedactedRole) {
this.props.refreshStatementDiagnosticsRequests();
}
Expand Down Expand Up @@ -461,15 +460,12 @@ export class StatementsPage extends React.Component<
);
};

renderStatements = (): React.ReactElement => {
renderStatements = (regions: string[]): React.ReactElement => {
const { pagination, filters, activeFilters } = this.state;
const {
statements,
apps,
databases,
onDiagnosticsReportDownload,
onStatementClick,
resetSQLStats,
columns: userSelectedColumnsToShow,
onColumnsChange,
nodeRegions,
Expand All @@ -484,14 +480,6 @@ export class StatementsPage extends React.Component<
const isEmptySearchResults = statements?.length > 0 && search?.length > 0;
// If the cluster is a tenant cluster we don't show info
// about nodes/regions.
const nodes = isTenant
? []
: Object.keys(nodeRegions)
.map(n => Number(n))
.sort();
const regions = isTenant
? []
: unique(nodes.map(node => nodeRegions[node.toString()])).sort();
populateRegionNodeForStatements(statements, nodeRegions, isTenant);

// Creates a list of all possible columns,
Expand Down Expand Up @@ -540,46 +528,6 @@ export class StatementsPage extends React.Component<

return (
<div>
<PageConfig>
<PageConfigItem>
<Search
onSubmit={this.onSubmitSearchField as any}
onClear={this.onClearSearchField}
defaultValue={search}
/>
</PageConfigItem>
<PageConfigItem>
<Filter
onSubmitFilters={this.onSubmitFilters}
appNames={apps}
dbNames={databases}
regions={regions}
nodes={nodes.map(n => "n" + n)}
activeFilters={activeFilters}
filters={filters}
showDB={true}
showSqlType={true}
showScan={true}
showRegions={regions.length > 1}
showNodes={nodes.length > 1}
/>
</PageConfigItem>
<PageConfigItem>
<DateRange
start={this.props.dateRange[0]}
end={this.props.dateRange[1]}
onSubmit={this.changeDateRange}
/>
</PageConfigItem>
<PageConfigItem>
<button className={cx("reset-btn")} onClick={this.resetTime}>
reset time
</button>
</PageConfigItem>
<PageConfigItem className={commonStyles("separator")}>
<ClearStats resetSQLStats={resetSQLStats} tooltipType="statement" />
</PageConfigItem>
</PageConfig>
<section className={sortableTableCx("cl-table-container")}>
<div>
<ColumnsSelector
Expand Down Expand Up @@ -624,13 +572,70 @@ export class StatementsPage extends React.Component<
refreshStatementDiagnosticsRequests,
onActivateStatementDiagnostics,
onDiagnosticsModalOpen,
apps,
databases,
search,
isTenant,
nodeRegions,
resetSQLStats,
} = this.props;

const nodes = isTenant
? []
: Object.keys(nodeRegions)
.map(n => Number(n))
.sort();
const regions = isTenant
? []
: unique(nodes.map(node => nodeRegions[node.toString()])).sort();
const { filters, activeFilters } = this.state;

return (
<div className={cx("root", "table-area")}>
<PageConfig>
<PageConfigItem>
<Search
onSubmit={this.onSubmitSearchField as any}
onClear={this.onClearSearchField}
defaultValue={search}
/>
</PageConfigItem>
<PageConfigItem>
<Filter
onSubmitFilters={this.onSubmitFilters}
appNames={apps}
dbNames={databases}
regions={regions}
nodes={nodes.map(n => "n" + n)}
activeFilters={activeFilters}
filters={filters}
showDB={true}
showSqlType={true}
showScan={true}
showRegions={regions.length > 1}
showNodes={nodes.length > 1}
/>
</PageConfigItem>
<PageConfigItem>
<DateRange
start={this.props.dateRange[0]}
end={this.props.dateRange[1]}
onSubmit={this.changeDateRange}
/>
</PageConfigItem>
<PageConfigItem>
<button className={cx("reset-btn")} onClick={this.resetTime}>
reset time
</button>
</PageConfigItem>
<PageConfigItem className={commonStyles("separator")}>
<ClearStats resetSQLStats={resetSQLStats} tooltipType="statement" />
</PageConfigItem>
</PageConfig>
<Loading
loading={isNil(this.props.statements)}
error={this.props.statementsError}
render={this.renderStatements}
render={() => this.renderStatements(regions)}
renderError={() =>
SQLActivityError({
statsType: "statements",
Expand Down
173 changes: 87 additions & 86 deletions pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,6 @@ export class TransactionsPage extends React.Component<

componentDidUpdate(): void {
this.updateQueryParams();
this.refreshData();
}

onChangeSortSetting = (ss: SortSetting): void => {
Expand Down Expand Up @@ -329,54 +328,99 @@ export class TransactionsPage extends React.Component<
};

render(): React.ReactElement {
const {
data,
resetSQLStats,
nodeRegions,
isTenant,
onColumnsChange,
columns: userSelectedColumnsToShow,
sortSetting,
search,
} = this.props;
const internal_app_name_prefix = data?.internal_app_name_prefix || "";
const statements = data?.statements || [];
const { filters } = this.state;

// If the cluster is a tenant cluster we don't show info
// about nodes/regions.
const nodes = isTenant
? []
: Object.keys(nodeRegions)
.map(n => Number(n))
.sort();
const regions = isTenant
? []
: unique(nodes.map(node => nodeRegions[node.toString()])).sort();
// We apply the search filters and app name filters prior to aggregating across Node IDs
// in order to match what's done on the Statements Page.
//
// TODO(davidh): Once the redux layer for TransactionsPage is added to this repo,
// extract this work into the selector
const {
transactions: filteredTransactions,
activeFilters,
} = filterTransactions(
searchTransactionsData(search, data?.transactions || [], statements),
filters,
internal_app_name_prefix,
statements,
nodeRegions,
isTenant,
);

const appNames = getTrxAppFilterOptions(
data?.transactions || [],
internal_app_name_prefix,
);

return (
<div className={cx("table-area")}>
<PageConfig>
<PageConfigItem>
<Search
onSubmit={this.onSubmitSearchField as any}
onClear={this.onClearSearchField}
defaultValue={search}
placeholder={"Search Transactions"}
/>
</PageConfigItem>
<PageConfigItem>
<Filter
onSubmitFilters={this.onSubmitFilters}
appNames={appNames}
regions={regions}
nodes={nodes.map(n => "n" + n)}
activeFilters={activeFilters}
filters={filters}
showRegions={regions.length > 1}
showNodes={nodes.length > 1}
/>
</PageConfigItem>
<PageConfigItem>
<DateRange
start={this.props.dateRange[0]}
end={this.props.dateRange[1]}
onSubmit={this.changeDateRange}
/>
</PageConfigItem>
<PageConfigItem>
<button className={cx("reset-btn")} onClick={this.resetTime}>
reset time
</button>
</PageConfigItem>
<PageConfigItem className={commonStyles("separator")}>
<ClearStats
resetSQLStats={resetSQLStats}
tooltipType="transaction"
/>
</PageConfigItem>
</PageConfig>
<Loading
loading={!this.props?.data}
error={this.props?.error}
render={() => {
const {
data,
resetSQLStats,
nodeRegions,
isTenant,
onColumnsChange,
columns: userSelectedColumnsToShow,
sortSetting,
search,
} = this.props;
const { pagination, filters } = this.state;
const { statements, internal_app_name_prefix } = data;
const appNames = getTrxAppFilterOptions(
data.transactions,
internal_app_name_prefix,
);
// If the cluster is a tenant cluster we don't show info
// about nodes/regions.
const nodes = isTenant
? []
: Object.keys(nodeRegions)
.map(n => Number(n))
.sort();
const regions = isTenant
? []
: unique(nodes.map(node => nodeRegions[node.toString()])).sort();
// We apply the search filters and app name filters prior to aggregating across Node IDs
// in order to match what's done on the Statements Page.
//
// TODO(davidh): Once the redux layer for TransactionsPage is added to this repo,
// extract this work into the selector
const {
transactions: filteredTransactions,
activeFilters,
} = filterTransactions(
searchTransactionsData(search, data.transactions, statements),
filters,
internal_app_name_prefix,
statements,
nodeRegions,
isTenant,
);
const { pagination } = this.state;
const transactionsToDisplay: TransactionInfo[] = aggregateAcrossNodeIDs(
filteredTransactions,
statements,
Expand Down Expand Up @@ -435,49 +479,6 @@ export class TransactionsPage extends React.Component<

return (
<>
<PageConfig>
<PageConfigItem>
<Search
onSubmit={this.onSubmitSearchField as any}
onClear={this.onClearSearchField}
defaultValue={search}
placeholder={"Search Transactions"}
/>
</PageConfigItem>
<PageConfigItem>
<Filter
onSubmitFilters={this.onSubmitFilters}
appNames={appNames}
regions={regions}
nodes={nodes.map(n => "n" + n)}
activeFilters={activeFilters}
filters={filters}
showRegions={regions.length > 1}
showNodes={nodes.length > 1}
/>
</PageConfigItem>
<PageConfigItem>
<DateRange
start={this.props.dateRange[0]}
end={this.props.dateRange[1]}
onSubmit={this.changeDateRange}
/>
</PageConfigItem>
<PageConfigItem>
<button
className={cx("reset-btn")}
onClick={this.resetTime}
>
reset time
</button>
</PageConfigItem>
<PageConfigItem className={commonStyles("separator")}>
<ClearStats
resetSQLStats={resetSQLStats}
tooltipType="transaction"
/>
</PageConfigItem>
</PageConfig>
<section className={statisticsClasses.tableContainerClass}>
<ColumnsSelector
options={tableColumns}
Expand Down