Merge pull request #1029 from redpanda-data/feature/pagination-storage

Feature/pagination storage
redpanda-data · Jan 29, 2024 · 28e2edf · 28e2edf
2 parents d2553b0 + 1810466
commit 28e2edf
Show file tree

Hide file tree

Showing 22 changed files with 609 additions and 194 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -31,7 +31,7 @@
  "@heroicons/react": "^1.0.6",
  "@monaco-editor/react": "^4.6",
  "@primer/octicons-react": "^17",
- "@redpanda-data/ui": "^3.35.1",
+ "@redpanda-data/ui": "^3.36.0",
  "@textea/json-viewer": "^1.24.4",
  "array-move": "^4",
  "framer-motion": "^7",
@@ -61,7 +61,7 @@
  "devDependencies": {
  "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
  "@testing-library/jest-dom": "^5.12.0",
- "@testing-library/react": "^11.2.6",
+ "@testing-library/react": "^13.4.0",
  "@types/jest": "26.0.23",
  "@types/node": "^16",
  "@types/react": "^18.0.18",

diff --git a/frontend/src/components/misc/ConfigList.tsx b/frontend/src/components/misc/ConfigList.tsx
@@ -97,9 +97,8 @@ export function ConfigList({ configEntries, valueDisplay, renderTooltip }: { con
  return (
  <DataTable<ConfigEntry>
  data={configEntries}
- showPagination={false}
- enableSorting={false}
- defaultPageSize={10000}
+ pagination={false}
+ sorting={false}
  getRowCanExpand={row => (row.original.synonyms?.length ?? 0) > 0 }
  subComponent={({row}) => {
  if(!row.original.synonyms?.length) {

diff --git a/frontend/src/components/pages/acls/Acl.List.tsx b/frontend/src/components/pages/acls/Acl.List.tsx
@@ -118,7 +118,7 @@ class AclList extends PageComponent {
 
  <DataTable<AclPrincipalGroup>
  data={groups}
- showPagination
+ pagination={true}
  columns={[
  {
  size: Infinity,

diff --git a/frontend/src/components/pages/admin/Admin.Roles.tsx b/frontend/src/components/pages/admin/Admin.Roles.tsx
@@ -29,7 +29,7 @@ export class AdminRoles extends Component<{}> {
  const roles = api.adminInfo.roles;
 
  return <DataTable<Role>
- enableSorting
+ sorting={true}
  data={roles}
  expandRowByClick
  subComponent={({row: {original: role}}) => <RoleComponent role={role}/>}

diff --git a/frontend/src/components/pages/admin/Admin.Users.tsx b/frontend/src/components/pages/admin/Admin.Users.tsx
@@ -40,7 +40,7 @@ export class AdminUsers extends Component<{}> {
  const table = (
  <DataTable<UserDetails>
  data={users}
- enableSorting
+ sorting={true}
  expandRowByClick
  columns={[
  {

diff --git a/frontend/src/components/pages/connect/Cluster.Details.tsx b/frontend/src/components/pages/connect/Cluster.Details.tsx
@@ -117,7 +117,7 @@ class KafkaClusterDetails extends PageComponent<{ clusterName: string }> {
 
  <DataTable<ClusterAdditionalInfo['plugins'][0]>
  data={additionalInfo?.plugins ?? []}
- showPagination
+ pagination={true}
  columns={[
  {
  header: 'Class',

diff --git a/frontend/src/components/pages/connect/Connector.Details.tsx b/frontend/src/components/pages/connect/Connector.Details.tsx
@@ -300,8 +300,10 @@ const ConfigOverviewTab = observer((p: {
  </Flex>
  <DataTable<ClusterConnectorTaskInfo>
  data={connectClusterStore.getConnectorTasks(connectorName) ?? []}
- defaultPageSize={10}
- showPagination
+ pagination={{
+ pageSize: 10,
+ pageIndex: 0
+ }}
  columns={[
  {
  header: 'Task',

diff --git a/frontend/src/components/pages/connect/Overview.tsx b/frontend/src/components/pages/connect/Overview.tsx
@@ -72,7 +72,7 @@ class TabClusters extends Component {
  return (
  <DataTable<ClusterConnectors>
  data={clusters}
- enableSorting={false}
+ sorting={false}
  columns={[
  {
  header: 'Cluster',
@@ -132,7 +132,7 @@ class TabConnectors extends Component {
  return (
  <DataTable<ConnectorType>
  data={allConnectors}
- enableSorting={false}
+ sorting={false}
  columns={[
  {
  header: 'Connector',

diff --git a/frontend/src/components/pages/consumers/Modals.tsx b/frontend/src/components/pages/consumers/Modals.tsx
@@ -257,8 +257,10 @@ export class EditOffsetsModal extends Component<{
  </Flex>,
  description: <DataTable<GroupOffset>
  size="sm"
- showPagination
- defaultPageSize={1000}
+ pagination={{
+ pageSize: 1000,
+ pageIndex: 0
+ }}
  data={items}
  columns={[
  {

diff --git a/frontend/src/components/pages/overview/Overview.tsx b/frontend/src/components/pages/overview/Overview.tsx
@@ -141,7 +141,7 @@ class Overview extends PageComponent {
  <Heading as="h3" >Broker Details</Heading>
  <DataTable<BrokerWithConfigAndStorage>
  data={brokers}
- enableSorting={false}
+ sorting={false}
  columns={[
  {
  size: 80,

diff --git a/frontend/src/components/pages/reassign-partitions/Step1.Partitions.tsx b/frontend/src/components/pages/reassign-partitions/Step1.Partitions.tsx
@@ -65,8 +65,8 @@ export class StepSelectPartitions extends Component<{ partitionSelection: Partit
  <SelectionInfoBar partitionSelection={this.props.partitionSelection} margin="2em 0em 1em 0.3em"/>
 
  <DataTable<TopicWithPartitions>
- showPagination
- enableSorting
+ pagination={true}
+ sorting={true}
  data={this.topicPartitions}
  rowSelection={{
  '_internal_connectors_configs': true

diff --git a/frontend/src/components/pages/reassign-partitions/Step2.Brokers.tsx b/frontend/src/components/pages/reassign-partitions/Step2.Brokers.tsx
@@ -48,7 +48,7 @@ export class StepSelectBrokers extends Component<{ selectedBrokerIds: number[],
 
  <DataTable<Broker>
  data={this.brokers}
- showPagination
+ pagination={true}
  columns={[
  {
  id: 'check',

diff --git a/frontend/src/components/pages/reassign-partitions/components/ActiveReassignments.tsx b/frontend/src/components/pages/reassign-partitions/components/ActiveReassignments.tsx
@@ -68,8 +68,11 @@ export class ActiveReassignments extends Component<{ throttledTopics: string[],
  {/* Table */}
  <DataTable<ReassignmentState>
  data={currentReassignments}
- defaultPageSize={5}
- enableSorting={false}
+ pagination={{
+ pageIndex: 0,
+ pageSize: 5,
+ }}
+ sorting={false}
  onRow={(row) => {
  this.reassignmentDetails = row.original
  }}

diff --git a/frontend/src/components/pages/topics/Tab.Consumers.tsx b/frontend/src/components/pages/topics/Tab.Consumers.tsx
@@ -36,7 +36,7 @@ export class TopicConsumers extends Component<{ topic: Topic }> {
 
  return <DataTable<TopicConsumer>
  data={consumers}
- showPagination
+ pagination={true}
  columns={[
  {size: 1, header: 'Group', accessorKey: 'groupId'},
  {header: 'Lag', accessorKey: 'summedLag'},

diff --git a/frontend/src/components/pages/topics/Tab.Messages/index.tsx b/frontend/src/components/pages/topics/Tab.Messages/index.tsx
@@ -25,7 +25,7 @@ import {
  FilterEntry,
  PartitionOffsetOrigin,
  PreviewTagV2,
- TimestampDisplayFormat
+ TimestampDisplayFormat,
 } from '../../../../state/ui';
 import { uiState } from '../../../../state/uiState';
 import { AnimatePresence, animProps_span_messagesStatus, MotionSpan } from '../../../../utils/animationProps';
@@ -111,6 +111,8 @@ import { proto3 } from '@bufbuild/protobuf';
 import { ColumnDef } from '@tanstack/react-table';
 import { CogIcon } from '@heroicons/react/solid';
 import { PayloadEncoding } from '../../../../protogen/redpanda/api/console/v1alpha1/common_pb';
+import usePaginationParams from '../../../../hooks/usePaginationParams';
+import { onPaginationChange } from '../../../../utils/pagination';
 
 
 interface TopicMessageViewProps {
@@ -507,6 +509,7 @@ export class TopicMessageView extends Component<TopicMessageViewProps> {
  }
 
  MessageTable = observer(() => {
+ const paginationParams = usePaginationParams(uiState.topicSettings.searchParams.pageSize)
  const [showPreviewSettings, setShowPreviewSettings] = React.useState(false);
 
  const tsFormat = uiState.topicSettings.previewTimestamps;
@@ -586,7 +589,20 @@ export class TopicMessageView extends Component<TopicMessageViewProps> {
  data={this.messageSource.data}
  emptyText="No messages"
  columns={columns}
- showPagination
+ // we need (?? []) to be compatible with searchParams of clients already stored in local storage
+ // otherwise we would get undefined for some of the existing ones
+ sorting={uiState.topicSettings.searchParams.sorting ?? []}
+ onSortingChange={sorting => {
+ uiState.topicSettings.searchParams.sorting = typeof sorting === 'function' ? sorting(uiState.topicSettings.searchParams.sorting) : sorting
+ }}
+ pagination={paginationParams}
+ onPaginationChange={onPaginationChange(paginationParams, ({ pageSize, pageIndex}) => {
+ uiState.topicSettings.searchParams.pageSize = pageSize
+ editQuery(query => {
+ query['page'] = String(pageIndex)
+ query['pageSize'] = String(pageSize)
+ })
+ })}
  subComponent={({row: {original}}) => renderExpandedMessage(original)}
  />
  <Button variant="outline"
@@ -1305,6 +1321,7 @@ const MessageHeaders = observer((props: { msg: TopicMessage; }) => {
  cell: ({row: {original: {value: payload}}}) => <span className="nowrap">{payload.encoding}</span>
  },
  ]}
+
  subComponent={({row: {original: header}}) => {
  return typeof header.value?.payload !== 'object'
  ? <div className="codeBox" style={{ margin: '0', width: '100%' }}>{toSafeString(header.value.payload)}</div>

diff --git a/frontend/src/components/pages/topics/Tab.Partitions.tsx b/frontend/src/components/pages/topics/Tab.Partitions.tsx
@@ -40,8 +40,10 @@ export class TopicPartitions extends Component<{ topic: Topic }> {
  return <>
  {warning}
  <DataTable<Partition>
- defaultPageSize={100}
- showPagination
+ pagination={{
+ pageSize: 100,
+ pageIndex: 0
+ }}
  data={partitions}
  columns={[
  {