Skip to content

Commit 4edcea6

Browse files
craig[bot]kyle-a-wong
craig[bot]
and
kyle-a-wong
committed
Merge #144556
144556: ui: fix table page size option bug r=kyle-a-wong a=kyle-a-wong Previously, tables that showed a page size dropdown option didn't work properly. Selecting a different page size wouldn't do anything and would stay at whatever the default configuration was. Now, selecting a different page size option should update the table accordingly. For functionaly components, the pagination logic was refactored into a `usePagination` hook to reduce repeated code Fixes: CC-32064 Epic:CC-31904 Release note (bug fix): Fixed bug in the UI where tables with page size dropdown options weren't updating when a new page size option was chosen. Now, tables update accordingly Co-authored-by: Kyle Wong <[email protected]>
2 parents 642081f + 2c7b9e5 commit 4edcea6

File tree

14 files changed

+90
-143
lines changed

14 files changed

+90
-143
lines changed

‎pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -208,9 +208,9 @@ export class IndexDetailsPage extends React.Component<
208208
});
209209
};
210210

211-
onChangePage = (current: number): void => {
211+
onChangePage = (current: number, pageSize: number): void => {
212212
const { stmtPagination } = this.state;
213-
this.setState({ stmtPagination: { ...stmtPagination, current } });
213+
this.setState({ stmtPagination: { ...stmtPagination, current, pageSize } });
214214
};
215215

216216
resetPagination = (): void => {
@@ -654,6 +654,7 @@ export class IndexDetailsPage extends React.Component<
654654
current={stmtPagination.current}
655655
total={filteredStmts.length}
656656
onChange={this.onChangePage}
657+
onShowSizeChange={this.onChangePage}
657658
/>
658659
</Loading>
659660
</SummaryCard>

‎pkg/ui/workspaces/cluster-ui/src/insights/schemaInsights/schemaInsightsView.tsx‎

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { useHistory } from "react-router-dom";
1111
import { Anchor } from "src/anchor";
1212
import sortableTableStyles from "src/sortedtable/sortedtable.module.scss";
1313
import styles from "src/statementsPage/statementsPage.module.scss";
14-
import { insights } from "src/util";
14+
import { insights, usePagination } from "src/util";
1515

1616
import { CockroachCloudContext } from "../../contexts";
1717
import {
@@ -31,7 +31,7 @@ import {
3131
} from "../../queryFilter";
3232
import { getSchemaInsightEventFiltersFromURL } from "../../queryFilter/utils";
3333
import { Search } from "../../search";
34-
import { ISortedTablePagination, SortSetting } from "../../sortedtable";
34+
import { SortSetting } from "../../sortedtable";
3535
import { getTableSortFromURL } from "../../sortedtable/getTableSortFromURL";
3636
import { TableStatistics } from "../../tableStatistics";
3737
import { queryByName, syncHistory } from "../../util";
@@ -85,10 +85,7 @@ export const SchemaInsightsView: React.FC<SchemaInsightsViewProps> = ({
8585
csIndexUnusedDuration,
8686
}: SchemaInsightsViewProps) => {
8787
const isCockroachCloud = useContext(CockroachCloudContext);
88-
const [pagination, setPagination] = useState<ISortedTablePagination>({
89-
current: 1,
90-
pageSize: 10,
91-
});
88+
const [pagination, updatePagination, resetPagination] = usePagination(1, 10);
9289
const history = useHistory();
9390
const [search, setSearch] = useState<string>(
9491
queryByName(history.location, SCHEMA_INSIGHT_SEARCH_PARAM),
@@ -155,20 +152,6 @@ export const SchemaInsightsView: React.FC<SchemaInsightsViewProps> = ({
155152
search,
156153
]);
157154

158-
const onChangePage = (current: number): void => {
159-
setPagination({
160-
current: current,
161-
pageSize: 10,
162-
});
163-
};
164-
165-
const resetPagination = () => {
166-
setPagination({
167-
current: 1,
168-
pageSize: 10,
169-
});
170-
};
171-
172155
const onChangeSortSetting = (ss: SortSetting): void => {
173156
onSortChange(ss);
174157
resetPagination();
@@ -273,7 +256,8 @@ export const SchemaInsightsView: React.FC<SchemaInsightsViewProps> = ({
273256
pageSize={pagination.pageSize}
274257
current={pagination.current}
275258
total={filteredSchemaInsights?.length}
276-
onChange={onChangePage}
259+
onChange={updatePagination}
260+
onShowSizeChange={updatePagination}
277261
/>
278262
{maxSizeApiReached && (
279263
<InlineAlert

‎pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/statementInsights/statementInsightsView.tsx‎

Lines changed: 5 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,11 @@ import {
3232
import { getWorkloadInsightEventFiltersFromURL } from "src/queryFilter/utils";
3333
import { Search } from "src/search/search";
3434
import { getTableSortFromURL } from "src/sortedtable/getTableSortFromURL";
35-
import {
36-
ISortedTablePagination,
37-
SortSetting,
38-
} from "src/sortedtable/sortedtable";
35+
import { SortSetting } from "src/sortedtable/sortedtable";
3936
import sortableTableStyles from "src/sortedtable/sortedtable.module.scss";
4037
import styles from "src/statementsPage/statementsPage.module.scss";
4138
import { TableStatistics } from "src/tableStatistics";
42-
import { insights } from "src/util";
39+
import { insights, usePagination } from "src/util";
4340
import { useScheduleFunction } from "src/util/hooks";
4441
import { queryByName, syncHistory } from "src/util/query";
4542

@@ -108,10 +105,7 @@ export const StatementInsightsView: React.FC<StatementInsightsViewProps> = ({
108105
dropDownSelect,
109106
maxSizeApiReached,
110107
}: StatementInsightsViewProps) => {
111-
const [pagination, setPagination] = useState<ISortedTablePagination>({
112-
current: 1,
113-
pageSize: 10,
114-
});
108+
const [pagination, updatePagination, resetPagination] = usePagination(1, 10);
115109
const history = useHistory();
116110
const [search, setSearch] = useState<string>(
117111
queryByName(history.location, INSIGHT_STMT_SEARCH_PARAM),
@@ -177,20 +171,6 @@ export const StatementInsightsView: React.FC<StatementInsightsViewProps> = ({
177171
search,
178172
]);
179173

180-
const onChangePage = (current: number): void => {
181-
setPagination({
182-
current: current,
183-
pageSize: 10,
184-
});
185-
};
186-
187-
const resetPagination = () => {
188-
setPagination({
189-
current: 1,
190-
pageSize: 10,
191-
});
192-
};
193-
194174
const onChangeSortSetting = (ss: SortSetting): void => {
195175
onSortChange(ss);
196176
resetPagination();
@@ -330,7 +310,8 @@ export const StatementInsightsView: React.FC<StatementInsightsViewProps> = ({
330310
pageSize={pagination.pageSize}
331311
current={pagination.current}
332312
total={filteredStatements?.length}
333-
onChange={onChangePage}
313+
onChange={updatePagination}
314+
onShowSizeChange={updatePagination}
334315
/>
335316
{maxSizeApiReached && (
336317
<InlineAlert

‎pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/transactionInsights/transactionInsightsView.tsx‎

Lines changed: 5 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,7 @@ import {
2929
import { getWorkloadInsightEventFiltersFromURL } from "src/queryFilter/utils";
3030
import { Search } from "src/search/search";
3131
import { getTableSortFromURL } from "src/sortedtable/getTableSortFromURL";
32-
import {
33-
ISortedTablePagination,
34-
SortSetting,
35-
} from "src/sortedtable/sortedtable";
32+
import { SortSetting } from "src/sortedtable/sortedtable";
3633
import sortableTableStyles from "src/sortedtable/sortedtable.module.scss";
3734
import styles from "src/statementsPage/statementsPage.module.scss";
3835
import { TableStatistics } from "src/tableStatistics";
@@ -47,6 +44,7 @@ import {
4744
TimeScaleDropdown,
4845
timeScaleRangeToObj,
4946
} from "../../../timeScaleDropdown";
47+
import { usePagination } from "../../../util";
5048
import { InsightsError } from "../../insightsErrorComponent";
5149
import { EmptyInsightsTablePlaceholder } from "../util";
5250

@@ -103,10 +101,7 @@ export const TransactionInsightsView: React.FC<TransactionInsightsViewProps> = (
103101
maxSizeApiReached,
104102
} = props;
105103

106-
const [pagination, setPagination] = useState<ISortedTablePagination>({
107-
current: 1,
108-
pageSize: 10,
109-
});
104+
const [pagination, updatePagination, resetPagination] = usePagination(1, 10);
110105
const history = useHistory();
111106
const [search, setSearch] = useState<string>(
112107
queryByName(history.location, INSIGHT_TXN_SEARCH_PARAM),
@@ -168,20 +163,6 @@ export const TransactionInsightsView: React.FC<TransactionInsightsViewProps> = (
168163
search,
169164
]);
170165

171-
const onChangePage = (current: number): void => {
172-
setPagination({
173-
current: current,
174-
pageSize: 10,
175-
});
176-
};
177-
178-
const resetPagination = () => {
179-
setPagination({
180-
current: 1,
181-
pageSize: 10,
182-
});
183-
};
184-
185166
const onChangeSortSetting = (ss: SortSetting): void => {
186167
onSortChange(ss);
187168
resetPagination();
@@ -301,7 +282,8 @@ export const TransactionInsightsView: React.FC<TransactionInsightsViewProps> = (
301282
pageSize={pagination.pageSize}
302283
current={pagination.current}
303284
total={filteredTransactions?.length}
304-
onChange={onChangePage}
285+
onChange={updatePagination}
286+
onShowSizeChange={updatePagination}
305287
/>
306288
{maxSizeApiReached && (
307289
<InlineAlert

‎pkg/ui/workspaces/cluster-ui/src/jobs/jobsPage/jobsPage.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -174,9 +174,9 @@ export class JobsPage extends React.Component<JobsPageProps, PageState> {
174174
clearTimeout(this.refreshDataInterval);
175175
}
176176

177-
onChangePage = (current: number): void => {
177+
setPagination = (current: number, pageSize: number): void => {
178178
const { pagination } = this.state;
179-
this.setState({ pagination: { ...pagination, current } });
179+
this.setState({ pagination: { ...pagination, current, pageSize } });
180180
};
181181

182182
resetPagination = (): void => {
@@ -368,9 +368,10 @@ export class JobsPage extends React.Component<JobsPageProps, PageState> {
368368
</section>
369369
<Pagination
370370
pageSize={pagination.pageSize}
371+
onShowSizeChange={this.setPagination}
371372
current={pagination.current}
372373
total={filteredJobs.length}
373-
onChange={this.onChangePage}
374+
onChange={this.setPagination}
374375
/>
375376
</div>
376377
</Loading>

‎pkg/ui/workspaces/cluster-ui/src/schedules/schedulesPage/scheduleTable.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -212,9 +212,9 @@ export class ScheduleTable extends React.Component<
212212
this.setCurrentPageToOneIfSchedulesChanged(prevProps);
213213
}
214214

215-
onChangePage = (current: number) => {
215+
onChangePage = (current: number, pageSize: number) => {
216216
const { pagination } = this.state;
217-
this.setState({ pagination: { ...pagination, current } });
217+
this.setState({ pagination: { ...pagination, current, pageSize } });
218218
};
219219

220220
renderEmptyState = () => {
@@ -273,6 +273,7 @@ export class ScheduleTable extends React.Component<
273273
current={pagination.current}
274274
total={schedules.length}
275275
onChange={this.onChangePage}
276+
onShowSizeChange={this.onChangePage}
276277
/>
277278
</React.Fragment>
278279
);

‎pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -226,9 +226,9 @@ export class SessionsPage extends React.Component<
226226
);
227227
};
228228

229-
onChangePage = (current: number): void => {
229+
onChangePage = (current: number, pageSize: number): void => {
230230
const { pagination } = this.state;
231-
this.setState({ pagination: { ...pagination, current } });
231+
this.setState({ pagination: { ...pagination, current, pageSize } });
232232
if (this.props.onPageChanged) {
233233
this.props.onPageChanged(current);
234234
}
@@ -436,6 +436,7 @@ export class SessionsPage extends React.Component<
436436
current={pagination.current}
437437
total={sessionsToDisplay.length}
438438
onChange={this.onChangePage}
439+
onShowSizeChange={this.onChangePage}
439440
/>
440441
</>
441442
);

‎pkg/ui/workspaces/cluster-ui/src/statementsPage/activeStatementsView.tsx‎

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,7 @@ import { Pagination } from "src/pagination";
2121
import { Filter } from "src/queryFilter";
2222
import { getActiveStatementFiltersFromURL } from "src/queryFilter/utils";
2323
import { Search } from "src/search/search";
24-
import {
25-
ISortedTablePagination,
26-
SortSetting,
27-
} from "src/sortedtable/sortedtable";
24+
import { SortSetting } from "src/sortedtable/sortedtable";
2825
import LoadingError from "src/sqlActivity/errorComponent";
2926
import { queryByName, syncHistory } from "src/util/query";
3027

@@ -40,6 +37,7 @@ import {
4037
getFullFiltersAsStringRecord,
4138
} from "../queryFilter";
4239
import { getTableSortFromURL } from "../sortedtable/getTableSortFromURL";
40+
import { usePagination } from "../util";
4341

4442
import styles from "./statementsPage.module.scss";
4543

@@ -89,10 +87,10 @@ export const ActiveStatementsView: React.FC<ActiveStatementsViewProps> = ({
8987
lastUpdated,
9088
onManualRefresh,
9189
}: ActiveStatementsViewProps) => {
92-
const [pagination, setPagination] = useState<ISortedTablePagination>({
93-
current: 1,
94-
pageSize: PAGE_SIZE,
95-
});
90+
const [pagination, updatePagination, resetPagination] = usePagination(
91+
1,
92+
PAGE_SIZE,
93+
);
9694
const history = useHistory();
9795
const [search, setSearch] = useState<string>(
9896
queryByName(history.location, ACTIVE_STATEMENT_SEARCH_PARAM),
@@ -190,13 +188,6 @@ export const ActiveStatementsView: React.FC<ActiveStatementsViewProps> = ({
190188
search,
191189
]);
192190

193-
const resetPagination = () => {
194-
setPagination({
195-
pageSize: PAGE_SIZE,
196-
current: 1,
197-
});
198-
};
199-
200191
const onSortClick = (ss: SortSetting): void => {
201192
onSortChange(ss);
202193
resetPagination();
@@ -246,13 +237,6 @@ export const ActiveStatementsView: React.FC<ActiveStatementsViewProps> = ({
246237
search,
247238
);
248239

249-
const onChangePage = (page: number) => {
250-
setPagination({
251-
...pagination,
252-
current: page,
253-
});
254-
};
255-
256240
return (
257241
<div className={cx("root")}>
258242
<PageConfig>
@@ -324,7 +308,8 @@ export const ActiveStatementsView: React.FC<ActiveStatementsViewProps> = ({
324308
pageSize={pagination.pageSize}
325309
current={pagination.current}
326310
total={filteredStatements?.length}
327-
onChange={onChangePage}
311+
onChange={updatePagination}
312+
onShowSizeChange={updatePagination}
328313
/>
329314
{maxSizeApiReached && (
330315
<InlineAlert

‎pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -406,11 +406,11 @@ export class StatementsPage extends React.Component<
406406
this.props.dismissAlertMessage();
407407
}
408408

409-
onChangePage = (current: number): void => {
409+
onChangePage = (current: number, pageSize: number): void => {
410410
const { pagination } = this.state;
411411
this.setState(prevState => ({
412412
...prevState,
413-
pagination: { ...pagination, current },
413+
pagination: { ...pagination, current, pageSize },
414414
}));
415415
if (this.props.onPageChanged) {
416416
this.props.onPageChanged(current);
@@ -705,6 +705,7 @@ export class StatementsPage extends React.Component<
705705
current={pagination.current}
706706
total={data.length}
707707
onChange={this.onChangePage}
708+
onShowSizeChange={this.onChangePage}
708709
/>
709710
</>
710711
);

‎pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetails.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -282,9 +282,9 @@ export class TransactionDetails extends React.Component<
282282
});
283283
};
284284

285-
onChangePage = (current: number): void => {
285+
onChangePage = (current: number, pageSize: number): void => {
286286
const { pagination } = this.state;
287-
this.setState({ pagination: { ...pagination, current } });
287+
this.setState({ pagination: { ...pagination, current, pageSize } });
288288
};
289289

290290
backToTransactionsClick = (): void => {
@@ -606,6 +606,7 @@ export class TransactionDetails extends React.Component<
606606
current={pagination.current}
607607
total={aggregatedStatements.length}
608608
onChange={this.onChangePage}
609+
onShowSizeChange={this.onChangePage}
609610
/>
610611
</React.Fragment>
611612
);

0 commit comments

Comments
 (0)