Adds type and schema id information to the UI for avro message keys and values.

Closes: #77

Author: mbollmann-v

api/src/main/java/io/kafbat/ui/serdes/builtin/sr/SchemaRegistrySerde.java

@@ -282,13 +282,16 @@ public Deserializer deserializer(String topic, Target type) {
       var schemaId = extractSchemaIdFromMsg(data);
       SchemaType format = getMessageFormatBySchemaId(schemaId);
       MessageFormatter formatter = schemaRegistryFormatters.get(format);
+      Map<String, Object> additionalProperties = new HashMap<>(Map.of(
+          "schemaId", schemaId,
+          "type", format.name()
+      ));
+      getSchemaById(schemaId).map(ParsedSchema::name)
+          .ifPresent(name -> additionalProperties.put("name", name));
       return new DeserializeResult(
           formatter.format(topic, data),
           DeserializeResult.Type.JSON,
-          Map.of(
-              "schemaId", schemaId,
-              "type", format.name()
-          )
+          additionalProperties
       );
     };
   }

api/src/test/java/io/kafbat/ui/serdes/builtin/sr/SchemaRegistrySerdeTest.java

@@ -127,7 +127,8 @@ void deserializeReturnsJsonAvroMsgJsonRepresentation() throws RestClientExceptio
     assertThat(result.getType()).isEqualTo(DeserializeResult.Type.JSON);
     assertThat(result.getAdditionalProperties())
         .contains(Map.entry("type", "AVRO"))
-        .contains(Map.entry("schemaId", schemaId));
+        .contains(Map.entry("schemaId", schemaId))
+        .contains(Map.entry("name", "TestAvroRecord1"));
   }
 
   @Nested

frontend/src/components/Topics/Topic/Messages/Message.tsx

@@ -37,6 +37,8 @@ const Message: React.FC<Props> = ({
     headers,
     valueSerde,
     keySerde,
+    keyDeserializeProperties,
+    valueDeserializeProperties,
   },
   keyFilters,
   contentFilters,
@@ -157,6 +159,8 @@ const Message: React.FC<Props> = ({
           contentSize={valueSize}
           keySerde={keySerde}
           valueSerde={valueSerde}
+          keyDeserializeProperties={keyDeserializeProperties}
+          valueDeserializeProperties={valueDeserializeProperties}
         />
       )}
     </>

frontend/src/components/Topics/Topic/Messages/MessageContent/AvroMetadata.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import * as S from './MessageContent.styled';
+
+export interface AvroMetadataProps {
+  deserializeProperties?: { [key: string]: unknown | undefined };
+}
+
+const AvroMetadata: React.FC<AvroMetadataProps> = ({
+  deserializeProperties,
+}) => {
+  if (
+    !deserializeProperties ||
+    deserializeProperties.type !== 'AVRO' ||
+    !deserializeProperties.name ||
+    !deserializeProperties.schemaId
+  ) {
+    return null;
+  }
+
+  if (
+    typeof deserializeProperties.name !== 'string' ||
+    typeof deserializeProperties.schemaId !== 'number'
+  ) {
+    return null;
+  }
+
+  return (
+    <S.Metadata>
+      <S.MetadataLabel>Value Type</S.MetadataLabel>
+      <span>
+        <S.MetadataValue>
+          {deserializeProperties.name.split('.').pop()}
+        </S.MetadataValue>
+        <S.MetadataMeta>
+          Schema Id: {deserializeProperties.schemaId}
+        </S.MetadataMeta>
+      </span>
+    </S.Metadata>
+  );
+};
+
+export default AvroMetadata;

frontend/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx

@@ -4,6 +4,7 @@ import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 import { SchemaType, TopicMessageTimestampTypeEnum } from 'generated-sources';
 import { formatTimestamp } from 'lib/dateTimeHelpers';
 
+import AvroMetadata from './AvroMetadata';
 import * as S from './MessageContent.styled';
 
 type Tab = 'key' | 'content' | 'headers';
@@ -18,6 +19,8 @@ export interface MessageContentProps {
   contentSize?: number;
   keySerde?: string;
   valueSerde?: string;
+  keyDeserializeProperties?: { [key: string]: unknown | undefined };
+  valueDeserializeProperties?: { [key: string]: unknown | undefined };
 }
 
 const MessageContent: React.FC<MessageContentProps> = ({
@@ -30,6 +33,8 @@ const MessageContent: React.FC<MessageContentProps> = ({
   contentSize,
   keySerde,
   valueSerde,
+  keyDeserializeProperties,
+  valueDeserializeProperties,
 }) => {
   const [activeTab, setActiveTab] = React.useState<Tab>('content');
   const activeTabContent = () => {
@@ -118,6 +123,8 @@ const MessageContent: React.FC<MessageContentProps> = ({
               </span>
             </S.Metadata>
 
+            <AvroMetadata deserializeProperties={keyDeserializeProperties} />
+
             <S.Metadata>
               <S.MetadataLabel>Value Serde</S.MetadataLabel>
               <span>
@@ -127,6 +134,8 @@ const MessageContent: React.FC<MessageContentProps> = ({
                 </S.MetadataMeta>
               </span>
             </S.Metadata>
+
+            <AvroMetadata deserializeProperties={valueDeserializeProperties} />
           </S.MetadataWrapper>
         </S.Section>
       </td>

frontend/src/components/Topics/Topic/Messages/MessageContent/__tests__/AvroMetadata.spec.tsx

@@ -0,0 +1,43 @@
+import { TextEncoder } from 'util';
+
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { render } from 'lib/testHelpers';
+import AvroMetadata, {
+  AvroMetadataProps,
+} from 'components/Topics/Topic/Messages/MessageContent/AvroMetadata';
+
+const setupWrapper = (props?: Partial<AvroMetadataProps>) => {
+  return (
+    <table>
+      <tbody>
+        <AvroMetadata
+          deserializeProperties={{
+            type: 'AVRO',
+            name: 'com.kafbat.MessageType',
+            schemaId: 1,
+          }}
+          {...props}
+        />
+      </tbody>
+    </table>
+  );
+};
+
+global.TextEncoder = TextEncoder;
+
+describe('AvroMetadata screen', () => {
+  beforeEach(() => {
+    render(setupWrapper());
+  });
+
+  describe('Checking type and schema id', () => {
+    it('type in document', () => {
+      expect(screen.getByText('MessageType')).toBeInTheDocument();
+    });
+
+    it('schema id in document', () => {
+      expect(screen.getByText('Schema Id: 1')).toBeInTheDocument();
+    });
+  });
+});

frontend/src/components/Topics/Topic/Messages/MessageContent/__tests__/MessageContent.spec.tsx

@@ -22,6 +22,11 @@ const setupWrapper = (props?: Partial<MessageContentProps>) => {
           timestampType={TopicMessageTimestampTypeEnum.CREATE_TIME}
           keySerde="SchemaRegistry"
           valueSerde="Avro"
+          valueDeserializeProperties={{
+            type: 'AVRO',
+            name: 'MessageType',
+            schemaId: 1,
+          }}
           {...props}
         />
       </tbody>
@@ -36,14 +41,18 @@ describe('MessageContent screen', () => {
     render(setupWrapper());
   });
 
-  describe('Checking keySerde and valueSerde', () => {
+  describe('Checking keySerde, valueSerde and valueType', () => {
     it('keySerde in document', () => {
       expect(screen.getByText('SchemaRegistry')).toBeInTheDocument();
     });
 
     it('valueSerde in document', () => {
       expect(screen.getByText('Avro')).toBeInTheDocument();
     });
+
+    it('valueType in document', () => {
+      expect(screen.getByText('Value Type')).toBeInTheDocument();
+    });
   });
 
   describe('when switched to display the key', () => {