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

[mbollmann-v]

• [x] Breaking change? (if so, please describe the impact and migration path for existing application instances) No breaking change

What changes did you make? (Give an overview)

• Goal Display the type and avro schema id when avro is used for either the key or the value of a message.
• Implementation The name of the avro schema is added to the existing property map that already transfers the schema id over the rest api in the latest kafbat release (https://github.com/kafbat/kafka-ui/blob/main/contract/src/main/resources/swagger/kafbat-ui-api.yaml#L3156). I tried to extend the UI rather non-invasive so that for non-avro messages everything stays as before and that the change is self-contained in a separate component called AvroMetadata.

For a message that uses a string key and an avro value (Avro type named "Response") the resulting UI looks like this:

Is there anything you'd like reviewers to focus on? Let me know if you need any changes in order to be able to merge it.

How Has This Been Tested? (put an "x" (case-sensitive!) next to an item)

• [ ] No need to
• [ ] Manually (please, describe, if necessary)
• [x] Unit checks
• [ ] Integration checks
• [ ] Covered by existing automation

Checklist (put an "x" (case-sensitive!) next to all the items, otherwise the build will fail)

• [x] I have performed a self-review of my own code
• [x] I have commented my code, particularly in hard-to-understand areas
• [x] I have made corresponding changes to the documentation (e.g. ENVIRONMENT VARIABLES)
• [x] My changes generate no new warnings (e.g. Sonar is happy)
• [x] I have added tests that prove my fix is effective or that my feature works
• [x] New and existing unit tests pass locally with my changes
• [x] Any dependent changes have been merged

Check out Contributing and Code of Conduct

A picture of a cute animal (not mandatory but encouraged)

[mbollmann-v]

@Haarolean Let me know if I can support in any way to bring this change into main

[Chuckame]

@mbollmann-v Could you make the "schema id: XX" clickable to go to the schema registry tab directly ?

[mbollmann-v]

@mbollmann-v Could you make the "schema id: XX" clickable to go to the schema registry tab directly ?

Sure, I could do it in another PR once this is merged. So far I wanted to keep this one small and simple to increase the chance to get it merged at all.

[anuevalo]

Hi @Haarolean 👋🏻 We are carrying out a PoC of Kafbat UI and we need this feature because it's a vital function for us. Can you find out when a version with this feature will be released? Thank u so much. Greetings