Skip to content

Commit

Permalink
Merge pull request #1029 from redpanda-data/feature/pagination-storage
Browse files Browse the repository at this point in the history 
Feature/pagination storage
  • Loading branch information
@jvorcak
jvorcak authored Jan 29, 2024
2 parents d2553b0 + 1810466 commit 28e2edf
Show file tree
Hide file tree
Showing 22 changed files with 609 additions and 194 deletions.
507 changes: 391 additions & 116 deletions frontend/package-lock.json
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
5 changes: 2 additions & 3 deletions frontend/src/components/misc/ConfigList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/pages/acls/Acl.List.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ class AclList extends PageComponent {

<DataTable<AclPrincipalGroup>
data={groups}
showPagination
pagination={true}
columns={[
{
size: Infinity,
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/pages/admin/Admin.Roles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}/>}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/pages/admin/Admin.Users.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export class AdminUsers extends Component<{}> {
const table = (
<DataTable<UserDetails>
data={users}
enableSorting
sorting={true}
expandRowByClick
columns={[
{
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/pages/connect/Cluster.Details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ class KafkaClusterDetails extends PageComponent<{ clusterName: string }> {

<DataTable<ClusterAdditionalInfo['plugins'][0]>
data={additionalInfo?.plugins ?? []}
showPagination
pagination={true}
columns={[
{
header: 'Class',
Expand Down
6 changes: 4 additions & 2 deletions frontend/src/components/pages/connect/Connector.Details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/pages/connect/Overview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ class TabClusters extends Component {
return (
<DataTable<ClusterConnectors>
data={clusters}
enableSorting={false}
sorting={false}
columns={[
{
header: 'Cluster',
Expand Down Expand Up @@ -132,7 +132,7 @@ class TabConnectors extends Component {
return (
<DataTable<ConnectorType>
data={allConnectors}
enableSorting={false}
sorting={false}
columns={[
{
header: 'Connector',
Expand Down
6 changes: 4 additions & 2 deletions frontend/src/components/pages/consumers/Modals.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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={[
{
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/pages/overview/Overview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/pages/reassign-partitions/Step1.Partitions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/pages/reassign-partitions/Step2.Brokers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export class StepSelectBrokers extends Component<{ selectedBrokerIds: number[],

<DataTable<Broker>
data={this.brokers}
showPagination
pagination={true}
columns={[
{
id: 'check',
Expand Down
7 changes: 5 additions & 2 deletions frontend/src/components/pages/reassign-partitions/components/ActiveReassignments.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/pages/topics/Tab.Consumers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'},
Expand Down
21 changes: 19 additions & 2 deletions frontend/src/components/pages/topics/Tab.Messages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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>
Expand Down
6 changes: 4 additions & 2 deletions frontend/src/components/pages/topics/Tab.Partitions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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={[
{
Expand Down
Loading

0 comments on commit 28e2edf

Please sign in to comment.