Merge pull request #1052 from redpanda-data/fix/exception-when-config…

…uring-message-table

Fixes an exception when choosing non-existing column in Table definition

frontend/src/components/pages/topics/Tab.Messages/index.tsx

@@ -541,6 +541,16 @@ export class TopicMessageView extends Component<TopicMessageViewProps> {
                 accessorKey: 'value',
                 cell: ({row: {original}}) => <MessagePreview msg={original} previewFields={() => this.activePreviewTags} isCompactTopic={this.props.topic.cleanupPolicy.includes('compact')}/>
             },
+            keySize: {
+                header: 'Key Size',
+                accessorKey: 'key.size',
+                cell: ({row: {original: {key: {size}}}}) => <span>{prettyBytes(size)}</span>
+            },
+            valueSize: {
+                header: 'Value Size',
+                accessorKey: 'value.size',
+                cell: ({row: {original: {value: {size}}}}) => <span>{prettyBytes(size)}</span>
+            }
         }
 
 
@@ -557,7 +567,9 @@ export class TopicMessageView extends Component<TopicMessageViewProps> {
             })
         }
 
-        newColumns[newColumns.length - 1].size = Infinity
+        if(newColumns.length > 0) {
+            newColumns[newColumns.length - 1].size = Infinity
+        }
 
         const columns: ColumnDef<TopicMessage>[] = [...newColumns, {
             header: () => <button onClick={() => {
@@ -1436,7 +1448,8 @@ const ColumnOptions: FC<{ tags: ColumnList[] }> = ({ tags }) => {
         { title: 'Key', dataIndex: 'key' },
         // { title: 'Headers', dataIndex: 'headers' },
         { title: 'Value', dataIndex: 'value' },
-        { title: 'Size', dataIndex: 'size' }, // size of the whole message is not available (bc it was a bad guess), might be added back later
+        { title: 'Key Size', dataIndex: 'keySize' }, // size of the whole message is not available (bc it was a bad guess), might be added back later
+        { title: 'Value Size', dataIndex: 'valueSize' }, // size of the whole message is not available (bc it was a bad guess), might be added back later
     ];
 
     const value = tags.map(column => ({