From de8de37b3a4b266f542229c4a9bbac8f33a48713 Mon Sep 17 00:00:00 2001
From: Phillip Kruger <phillip.kruger@gmail.com>
Date: Thu, 20 Jul 2023 23:05:25 +1000
Subject: [PATCH] Dev UI: Migrate Kafka Client UI

Signed-off-by: Phillip Kruger <phillip.kruger@gmail.com>
---
 .../deployment/devui/KafkaDevUIProcessor.java |  55 ++++
 .../dev-ui/qwc-kafka-access-control-list.js   |  68 +++++
 .../resources/dev-ui/qwc-kafka-add-message.js | 249 +++++++++++++++++
 .../resources/dev-ui/qwc-kafka-add-topic.js   | 124 +++++++++
 .../dev-ui/qwc-kafka-consumer-groups.js       | 194 +++++++++++++
 .../resources/dev-ui/qwc-kafka-messages.js    | 257 ++++++++++++++++++
 .../main/resources/dev-ui/qwc-kafka-nodes.js  |  85 ++++++
 .../dev-ui/qwc-kafka-schema-registry.js       |  23 ++
 .../main/resources/dev-ui/qwc-kafka-topics.js | 255 +++++++++++++++++
 .../runtime/devui/KafkaJsonRPCService.java    |  87 ++++++
 .../resources/dev-ui/controller/jsonrpc.js    |   4 +
 11 files changed, 1401 insertions(+)
 create mode 100644 extensions/kafka-client/deployment/src/main/java/io/quarkus/kafka/client/deployment/devui/KafkaDevUIProcessor.java
 create mode 100644 extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-access-control-list.js
 create mode 100644 extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-add-message.js
 create mode 100644 extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-add-topic.js
 create mode 100644 extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-consumer-groups.js
 create mode 100644 extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-messages.js
 create mode 100644 extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-nodes.js
 create mode 100644 extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-schema-registry.js
 create mode 100644 extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-topics.js
 create mode 100644 extensions/kafka-client/runtime/src/main/java/io/quarkus/kafka/client/runtime/devui/KafkaJsonRPCService.java

diff --git a/extensions/kafka-client/deployment/src/main/java/io/quarkus/kafka/client/deployment/devui/KafkaDevUIProcessor.java b/extensions/kafka-client/deployment/src/main/java/io/quarkus/kafka/client/deployment/devui/KafkaDevUIProcessor.java
new file mode 100644
index 0000000000000..d035f55b5ca0e
--- /dev/null
+++ b/extensions/kafka-client/deployment/src/main/java/io/quarkus/kafka/client/deployment/devui/KafkaDevUIProcessor.java
@@ -0,0 +1,55 @@
+package io.quarkus.kafka.client.deployment.devui;
+
+import org.jboss.logging.Logger;
+
+import io.quarkus.deployment.IsDevelopment;
+import io.quarkus.deployment.annotations.BuildStep;
+import io.quarkus.devui.spi.JsonRPCProvidersBuildItem;
+import io.quarkus.devui.spi.page.CardPageBuildItem;
+import io.quarkus.devui.spi.page.Page;
+import io.quarkus.kafka.client.runtime.devui.KafkaJsonRPCService;
+
+/**
+ * Kafka Dev UI (v2)
+ */
+public class KafkaDevUIProcessor {
+
+    private static final Logger log = Logger.getLogger(KafkaDevUIProcessor.class);
+
+    @BuildStep(onlyIf = IsDevelopment.class)
+    public CardPageBuildItem pages() {
+        CardPageBuildItem cardPageBuildItem = new CardPageBuildItem();
+
+        cardPageBuildItem.addPage(Page.webComponentPageBuilder()
+                .icon("font-awesome-solid:folder-tree")
+                .componentLink("qwc-kafka-topics.js")
+                .title("Topics"));
+        //  TODO: Implement this. This is also not implemented in the old Dev UI
+        //        cardPageBuildItem.addPage(Page.webComponentPageBuilder()
+        //                .icon("font-awesome-solid:file-circle-check")
+        //                .componentLink("qwc-kafka-schema-registry.js")
+        //                .title("Schema registry"));
+
+        cardPageBuildItem.addPage(Page.webComponentPageBuilder()
+                .icon("font-awesome-solid:inbox")
+                .componentLink("qwc-kafka-consumer-groups.js")
+                .title("Consumer groups"));
+
+        cardPageBuildItem.addPage(Page.webComponentPageBuilder()
+                .icon("font-awesome-solid:key")
+                .componentLink("qwc-kafka-access-control-list.js")
+                .title("Access control list"));
+
+        cardPageBuildItem.addPage(Page.webComponentPageBuilder()
+                .icon("font-awesome-solid:circle-nodes")
+                .componentLink("qwc-kafka-nodes.js")
+                .title("Nodes"));
+
+        return cardPageBuildItem;
+    }
+
+    @BuildStep(onlyIf = IsDevelopment.class)
+    JsonRPCProvidersBuildItem createJsonRPCService() {
+        return new JsonRPCProvidersBuildItem(KafkaJsonRPCService.class);
+    }
+}
diff --git a/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-access-control-list.js b/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-access-control-list.js
new file mode 100644
index 0000000000000..3aa5e62c727a9
--- /dev/null
+++ b/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-access-control-list.js
@@ -0,0 +1,68 @@
+import { QwcHotReloadElement, html, css} from 'qwc-hot-reload-element';
+import { JsonRpc } from 'jsonrpc';
+import '@vaadin/progress-bar';
+
+/**
+ * This component shows the Kafka Access Control List
+ */
+export class QwcKafkaAccessControlList extends QwcHotReloadElement { 
+
+    jsonRpc = new JsonRpc(this);
+
+    static styles = css``;
+
+    static properties = {
+        _aclInfo: {state: true},
+    };
+
+    constructor() { 
+        super();
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.hotReload();
+    }
+
+    hotReload(){
+        this.jsonRpc.getAclInfo().then(jsonRpcResponse => { 
+            this._aclInfo = jsonRpcResponse.result;
+        });
+    }
+
+    render() {
+        if(this._aclInfo){
+            return html`<vaadin-grid .items="${this._aclInfo.entries}" 
+                                class="table" theme="no-border">
+                        <vaadin-grid-sort-column auto-width
+                            path="operation"
+                            header="Operation"
+                            resizable>
+                        </vaadin-grid-sort-column>
+
+                        <vaadin-grid-sort-column auto-width
+                            path="principal"
+                            header="Principal"
+                            resizable>
+                        </vaadin-grid-sort-column>
+
+                        <vaadin-grid-sort-column auto-width
+                            path="perm"
+                            header="Permission"
+                            resizable>
+                        </vaadin-grid-sort-column>
+
+                        <vaadin-grid-sort-column auto-width
+                            path="pattern"
+                            header="Resource Pattern"
+                            resizable>
+                        </vaadin-grid-sort-column>
+
+                    </vaadin-grid>`;
+        }else {
+            return html`<vaadin-progress-bar class="progress" indeterminate></vaadin-progress-bar>`;
+        }  
+    }
+}
+
+customElements.define('qwc-kafka-access-control-list', QwcKafkaAccessControlList);
\ No newline at end of file
diff --git a/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-add-message.js b/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-add-message.js
new file mode 100644
index 0000000000000..e48bb62634ff5
--- /dev/null
+++ b/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-add-message.js
@@ -0,0 +1,249 @@
+import { LitElement, html, css} from 'lit'; 
+import { JsonRpc } from 'jsonrpc';
+import '@vaadin/form-layout';
+import '@vaadin/text-field';
+import '@vaadin/combo-box';
+import '@vaadin/text-area';
+import '@vaadin/button';
+
+/**
+ * This component shows the Add Message screen
+ */
+export class QwcKafkaAddMessage extends LitElement { 
+    
+    static styles = css`
+
+        :root {
+            display: flex; 
+            flex-direction: column; 
+        }
+
+    `;
+
+    static properties = {
+        partitionsCount: {type: Number},
+        topicName: {type: String},
+        extensionName: {type: String}, // TODO: Add 'pane' concept in router to register internal extension pages.
+        _targetPartitions: {state: false},
+        _types: {state: false},
+        _newMessage: {state: true},
+        _newMessageHeaders: {state: true, type: Array},
+    };
+
+    constructor() { 
+        super();
+        this.partitionsCount = 0;
+        this.topicName = null;
+        this._targetPartitions = [];
+        this._types = [];
+        this._reset();
+        this.responsiveSteps = [
+            { minWidth: 0, columns: 1 },
+            { minWidth: '320px', columns: 2 },
+        ];
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.jsonRpc = new JsonRpc(this.extensionName);
+
+        this._targetPartitions.push({name: "Any", value: "any"});
+        for (var i = 0; i < this.partitionsCount; i++) {
+            this._targetPartitions.push({name: i.toString(), value: i});
+        }
+
+        this._types.push({name: "Text", value: "text"});
+        this._types.push({name: "None (Tombstone)", value: "none"});
+        this._types.push({name: "JSON", value: "json"});
+        this._types.push({name: "Binary", value: "binary"});
+    }
+
+    _reset(){
+        this._newMessage = new Object();
+        this._newMessage.partition = 'any';
+        this._newMessage.type = 'text';
+        this._newMessage.key = null;
+        this._newMessage.value = null;
+        this._newMessageHeaders = null;
+    }
+
+    _cancel(){
+        this._reset();
+        const canceled = new CustomEvent("kafka-message-added-canceled", {
+            detail: {},
+            bubbles: true,
+            cancelable: true,
+            composed: false,
+        });
+        this.dispatchEvent(canceled);
+    }
+
+    render() {
+
+        return html`<vaadin-form-layout .responsiveSteps="${this.responsiveSteps}">
+                        <vaadin-combo-box
+                            label="Target partition"
+                            item-label-path="name"
+                            item-value-path="value"
+                            value="${this._newMessage.partition ?? 'any'}" 
+                            .items="${this._targetPartitions}"
+                            @value-changed="${(e) => this._createMessagePartitionChanged(e)}">
+                        </vaadin-combo-box>
+                    
+                        <vaadin-combo-box
+                            label="Type"
+                            item-label-path="name"
+                            item-value-path="value"
+                            value="${this._newMessage.type ?? 'text'}" 
+                            .items="${this._types}"
+                            @value-changed="${(e) => this._createMessageTypeChanged(e)}">
+                        </vaadin-combo-box>
+
+                        <vaadin-text-field
+                            label="Key"
+                            placeholder="my-awesome-key"
+                            value="${this._newMessage.key ?? ''}"
+                            @value-changed="${(e) => this._createMessageKeyChanged(e)}"
+                            required
+                            clear-button-visible>
+                        </vaadin-text-field>
+                        
+                        <vaadin-text-area style="min-height: 160px;"
+                                    colspan="2"
+                                    label="Value"
+                                    value="${this._newMessage.value ?? ''}"
+                                    @value-changed="${(e) => this._createMessageValueChanged(e)}"
+                                    required>
+                        </vaadin-text-area>
+                        
+                        <div colspan="2">
+                            <span>Headers</span>
+                            <vaadin-text-field id="key"
+                                placeholder="key" value=''>
+                            </vaadin-text-field>
+                            <vaadin-text-field id="value"
+                                placeholder="value"
+                                value=''>
+                            </vaadin-text-field>
+                            <vaadin-button slot="suffix" theme="icon" aria-label="Add header" @click=${(e) => this._newMessageAddHeader(e)}>
+                                <vaadin-icon icon="font-awesome-solid:plus"></vaadin-icon>
+                            </vaadin-button>
+                        </div>
+                        
+                    </vaadin-form-layout>
+
+                    ${this._renderAddedMessageHeaders()}    
+                        
+                    ${this._renderCreateMessageButtons()}
+                    `;
+    }
+
+    _renderAddedMessageHeaders(){
+        if(this._newMessageHeaders && this._newMessageHeaders.length > 0){
+            return html`<vaadin-grid class="header-grid" .items="${this._newMessageHeaders}" 
+                                theme="no-border" all-rows-visible>
+                            <vaadin-grid-sort-column auto-width
+                                path="key"
+                                header="Key"
+                                resizable>
+                            </vaadin-grid-sort-column>
+
+                            <vaadin-grid-sort-column auto-width
+                                path="value"
+                                header="Value"
+                                resizable>
+                            </vaadin-grid-sort-column>
+                        </vaadin-grid>`;
+        }
+    }
+
+    _renderCreateMessageButtons(){
+        return html`<div style="display: flex; flex-direction: row-reverse; gap: 10px;">
+                        <vaadin-button theme="secondary" @click=${this._submitCreateMessageForm}>Create</vaadin-button>
+                        <vaadin-button theme="secondary error" @click=${this._cancel}>Cancel</vaadin-button>
+                    </div>`;
+    }
+
+    _submitCreateMessageForm(){
+        if (this._newMessage.partition === 'any') this._newMessage.partition = -1;
+
+        let headers = new Object();
+        if(this._newMessageHeaders && this._newMessageHeaders.length > 0){
+            this._newMessageHeaders.forEach(function (h) {
+                headers[h.key] = h.value;
+            });
+        }
+
+        this.jsonRpc.createMessage({topicName:this.topicName, 
+                        partition: Number(this._newMessage.partition), 
+                        key:this._newMessage.key,
+                        value:this._newMessage.value,
+                        headers: headers
+                    }).then(jsonRpcResponse => {
+                        this._reset();
+                        const success = new CustomEvent("kafka-message-added-success", {
+                            detail: {result: jsonRpcResponse.result},
+                            bubbles: true,
+                            cancelable: true,
+                            composed: false,
+                        });
+
+                        this.dispatchEvent(success);
+                        
+                    });
+
+        
+    }
+
+    _createMessagePartitionChanged(e){
+        this._newMessage.partition = e.detail.value;
+    }
+
+    _createMessageTypeChanged(e){
+        this._newMessage.type = e.detail.value.trim();
+    }
+
+    _createMessageKeyChanged(e){
+        this._newMessage.key = e.detail.value.trim();
+    }
+
+    _createMessageValueChanged(e){
+        this._newMessage.value = e.detail.value.trim();
+    }
+
+    _newMessageAddHeader(e){
+        let target = e.target;
+        let parent = null;
+        if(target.nodeName.toLowerCase() === "vaadin-icon"){
+            parent = target.parentElement.parentElement;
+        }else{
+            parent = target.parentElement;
+        }
+
+        let h = new Object();
+
+        var children = parent.children;
+        for (var i = 0; i < children.length; i++) {
+            var child = children[i];
+            if(child.nodeName.toLowerCase() === "vaadin-text-field"){
+                h[child.id] = child.value;
+                child.value = '';
+            }
+        }
+        this._addToHeaders(h);
+    }
+
+    _addToHeaders(h){
+        if(!this._newMessageHeaders){
+            this._newMessageHeaders = [h];
+        } else {
+            this._newMessageHeaders = [
+                ...this._newMessageHeaders,
+                h
+            ];
+        }
+    }
+
+}
+
+customElements.define('qwc-kafka-add-message', QwcKafkaAddMessage);
\ No newline at end of file
diff --git a/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-add-topic.js b/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-add-topic.js
new file mode 100644
index 0000000000000..ad8ca2104ee67
--- /dev/null
+++ b/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-add-topic.js
@@ -0,0 +1,124 @@
+import { LitElement, html, css} from 'lit';
+import { JsonRpc } from 'jsonrpc';
+
+import '@vaadin/text-field';
+import '@vaadin/integer-field';
+import '@vaadin/button';
+
+/**
+ * This component shows the add Topics Screen
+ */
+export class QwcKafkaAddTopic extends LitElement { 
+    jsonRpc = new JsonRpc(this);
+    
+    static styles = css`
+        :host {
+            display: flex; 
+            flex-direction: column;
+        }
+    `;
+
+    static properties = {
+        extensionName: {type: String}, // TODO: Add 'pane' concept in router to register internal extension pages.
+        _newTopic: {state: true},
+    };
+
+    constructor() { 
+        super();
+        this._reset();
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this._reset();
+        this.jsonRpc = new JsonRpc(this.extensionName);
+    }
+
+    render(){
+        return html`<vaadin-text-field
+                        label="Topic Name"
+                        placeholder="my-awesome-topic"
+                        value="${this._newTopic.name ?? ''}"
+                        @value-changed="${(e) => this._nameChanged(e)}"
+                        required
+                        clear-button-visible>
+                    </vaadin-text-field>
+                    <vaadin-integer-field 
+                        label="Partitions"
+                        value="${this._newTopic.partitions ?? '1'}" 
+                        step-buttons-visible 
+                        @value-changed="${(e) => this._partitionsChanged(e)}"
+                        min="0" 
+                        max="99">
+                    </vaadin-integer-field>
+                    <vaadin-integer-field 
+                        label="Replications"
+                        value="${this._newTopic.replications ?? '1'}" 
+                        step-buttons-visible 
+                        @value-changed="${(e) => this._replicationsChanged(e)}"    
+                        min="0" 
+                        max="99">
+                    </vaadin-integer-field>
+                    ${this._renderButtons()}`;
+    }
+    
+    _renderButtons(){
+        return html`<div style="display: flex; flex-direction: row-reverse; gap: 10px;">
+                        <vaadin-button theme="secondary" @click=${this._submit}>Create</vaadin-button>
+                        <vaadin-button theme="secondary error" @click=${this._cancel}>Cancel</vaadin-button>
+                    </div>`;
+    }
+    
+    _reset(){
+        this._newTopic = new Object();
+        this._newTopic.name = '';
+        this._newTopic.partitions = 1;
+        this._newTopic.replications = 1;        
+    }
+
+    _cancel(){
+        this._reset();
+        const canceled = new CustomEvent("kafka-topic-added-canceled", {
+            detail: {},
+            bubbles: true,
+            cancelable: true,
+            composed: false,
+        });
+        this.dispatchEvent(canceled);
+    }
+
+    _submit(){
+        if(this._newTopic.name.trim() !== ''){
+            
+            this.jsonRpc.createTopic({
+                topicName: this._newTopic.name,
+                partitions: parseInt(this._newTopic.partitions),
+                replications: parseInt(this._newTopic.replications)
+            }).then(jsonRpcResponse => { 
+                this._reset();
+                const success = new CustomEvent("kafka-topic-added-success", {
+                    detail: {result: jsonRpcResponse.result},
+                    bubbles: true,
+                    cancelable: true,
+                    composed: false,
+                });
+
+                this.dispatchEvent(success);
+            });
+        }
+    }
+    
+    _nameChanged(e){
+        this._newTopic.name = e.detail.value.trim();
+    }
+    
+    _partitionsChanged(e){
+        this._newTopic.partitions = e.detail.value;
+    }
+    
+    _replicationsChanged(e){
+        this._newTopic.replications = e.detail.value;
+    }
+}
+
+customElements.define('qwc-kafka-add-topic', QwcKafkaAddTopic);
\ No newline at end of file
diff --git a/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-consumer-groups.js b/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-consumer-groups.js
new file mode 100644
index 0000000000000..d7f719f86d780
--- /dev/null
+++ b/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-consumer-groups.js
@@ -0,0 +1,194 @@
+import { QwcHotReloadElement, html, css} from 'qwc-hot-reload-element';
+import { JsonRpc } from 'jsonrpc';
+import '@vaadin/progress-bar';
+import '@vaadin/grid';
+import '@vaadin/grid/vaadin-grid-sort-column.js';
+import { columnBodyRenderer, gridRowDetailsRenderer } from '@vaadin/grid/lit.js';
+
+/**
+ * This component shows the Kafka Consumer Groups
+ */
+export class QwcKafkaConsumerGroups extends QwcHotReloadElement { 
+    jsonRpc = new JsonRpc(this);
+
+    static styles = css`
+        .kafka {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .table {
+            height: 100%;
+        }
+        .top-bar {
+            display: flex;
+            align-items: baseline;
+            gap: 20px;
+        }
+    `;
+
+    static properties = {
+        _consumerGroups: {state: true},
+        _selectedConsumerGroups: {state: true, type: Array},
+        _memberDetailOpenedItem: {state: true, type: Array},
+    };
+
+    constructor() { 
+        super();
+        this._consumerGroups = null;
+        this._selectedConsumerGroups = [];
+        this._memberDetailOpenedItem = [];
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.hotReload();
+    }
+
+    hotReload(){
+        this.jsonRpc.getInfo().then(jsonRpcResponse => { 
+            this._consumerGroups = jsonRpcResponse.result.consumerGroups;
+        });
+    }
+
+    render() {
+        if(this._consumerGroups){
+            return html`<div class="kafka">
+                    ${this._renderConsumerGroups()}
+                    ${this._renderSelectedConsumerGroup()}
+
+            </div>`;
+        }else {
+            return html`<vaadin-progress-bar class="progress" indeterminate></vaadin-progress-bar>`;
+        } 
+    }
+
+    _renderConsumerGroups(){
+        if(this._selectedConsumerGroups.length === 0){
+            return html`
+                <vaadin-grid .items="${this._consumerGroups}" 
+                            .selectedItems="${this._selectedConsumerGroups}"
+                            class="table" theme="no-border"
+                            @active-item-changed="${(e) => {
+                                const item = e.detail.value;
+                                this._selectedConsumerGroups = item ? [item] : [];
+                            }}">
+                    <vaadin-grid-sort-column auto-width
+                        path="state"
+                        header="State"
+                        resizable>
+                    </vaadin-grid-sort-column>
+
+                    <vaadin-grid-sort-column auto-width
+                        path="name"
+                        header="Name"
+                        resizable>
+                    </vaadin-grid-sort-column>
+
+                    <vaadin-grid-sort-column auto-width
+                        path="coordinatorId"
+                        header="Coordinator"
+                        resizable>
+                    </vaadin-grid-sort-column>
+
+                    <vaadin-grid-sort-column auto-width
+                        path="protocol"
+                        header="Protocol"
+                        resizable>
+                    </vaadin-grid-sort-column>
+
+                    <vaadin-grid-sort-column auto-width
+                        path="members"
+                        header="Members"
+                        ${columnBodyRenderer(this._membersRenderer, [])}
+                        resizable>
+                    </vaadin-grid-sort-column>
+
+                    <vaadin-grid-sort-column auto-width
+                        path="lag"
+                        header="Lag(Sum)"
+                        resizable>
+                    </vaadin-grid-sort-column>
+
+                </vaadin-grid>`;
+        }
+    }
+    
+    _renderSelectedConsumerGroup(){
+        if(this._selectedConsumerGroups.length > 0){
+            let name = this._selectedConsumerGroups[0].name;
+            let members = this._selectedConsumerGroups[0].members;
+            return html`<div class="top-bar">
+                            <vaadin-button @click="${() => {this._selectedConsumerGroups = []}}">
+                                <vaadin-icon icon="font-awesome-solid:caret-left" slot="prefix"></vaadin-icon>
+                                Back
+                            </vaadin-button>
+                            <h4>${name}</h4>
+                        </div>
+                        <vaadin-grid .items="${members}" 
+                                    class="table" theme="no-border"
+                                    .detailsOpenedItems="${this._memberDetailOpenedItem}"
+                                    @active-item-changed="${(event) => {
+                                        const prop = event.detail.value;
+                                        this._memberDetailOpenedItem = prop ? [prop] : [];
+                                    }}"
+                                    ${gridRowDetailsRenderer(this._memberDetailRenderer, [])}>
+                            <vaadin-grid-sort-column auto-width
+                                path="memberId"
+                                header="Member ID"
+                                resizable>
+                            </vaadin-grid-sort-column>
+
+                            <vaadin-grid-sort-column auto-width
+                                path="host"
+                                header="Host"
+                                resizable>
+                            </vaadin-grid-sort-column>
+
+                            <vaadin-grid-sort-column auto-width
+                                path="partitions"
+                                header="Partitions"
+                                ${columnBodyRenderer(this._memberPartitionsRenderer, [])}
+                                resizable>
+                            </vaadin-grid-sort-column>
+
+
+                        </vaadin-grid>`;
+        }
+    }
+
+    
+    
+
+    _membersRenderer(consumerGroup) {
+        return html`${consumerGroup.members.length}`;
+    }
+
+    _memberPartitionsRenderer(member){
+        return html`${member.partitions.length}`;
+    }
+    
+    _memberDetailRenderer(member) {
+        if(member.partitions && member.partitions.length > 0){
+            return html`<vaadin-grid .items="${member.partitions}" theme="no-row-borders" all-rows-visible>
+                <vaadin-grid-column path="topic"></vaadin-grid-column>
+                <vaadin-grid-column path="partition"></vaadin-grid-column>
+                <vaadin-grid-column path="lag"></vaadin-grid-column>
+              </vaadin-grid>`;
+        }
+    }
+
+    _topicHeaderRenderer(){
+        return html`<b>Topic</b>`;
+    }
+    _partitionHeaderRenderer(){
+        return html`<b>Partition</b>`;
+    }
+    _topicHeade_lagHeaderRendererrRenderer(){
+        return html`<b>Lag</b>`;
+    }
+}
+
+customElements.define('qwc-kafka-consumer-groups', QwcKafkaConsumerGroups);
\ No newline at end of file
diff --git a/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-messages.js b/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-messages.js
new file mode 100644
index 0000000000000..aa1989b1bb79b
--- /dev/null
+++ b/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-messages.js
@@ -0,0 +1,257 @@
+import { QwcHotReloadElement, html, css} from 'qwc-hot-reload-element';
+import { JsonRpc } from 'jsonrpc';
+import '@vaadin/progress-bar';
+import '@vaadin/grid';
+import '@vaadin/grid/vaadin-grid-sort-column.js';
+import { columnBodyRenderer, gridRowDetailsRenderer } from '@vaadin/grid/lit.js';
+import '@vaadin/dialog';
+import { dialogRenderer } from '@vaadin/dialog/lit.js';
+import '@vaadin/button';
+import 'qui-code-block';
+import '@vaadin/split-layout';
+import './qwc-kafka-add-message.js';
+
+/**
+ * This component shows the Kafka Messages for a certain topic
+ */
+export class QwcKafkaMessages extends QwcHotReloadElement { 
+    
+    static styles = css`
+        .kafka {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        .top-bar {
+            display: flex;
+            align-items: baseline;
+            gap: 20px;
+        }
+        .detail-block {
+            width: 50%;
+            padding: 10px;
+            display: flex;
+            flex-direction: column;
+        }
+        .header-grid, .code-block {
+            padding: 10px;
+        }
+        .bottom {
+            display: flex;
+            flex-direction: row-reverse;
+        }
+    
+        .create-button {
+            margin-right: 30px;
+            margin-bottom: 10px;
+            font-size: xx-large;
+            cursor: pointer;
+        } 
+    `;
+
+    static properties = {
+        partitionsCount: {type: Number},
+        topicName: {type: String},
+        extensionName: {type: String}, // TODO: Add 'pane' concept in router to register internal extension pages.
+        _messages: {state: false, type: Array},
+        _createMessageDialogOpened: {state: true},
+        _messagesDetailOpenedItem: {state: false, type: Array}
+    };
+
+    constructor() { 
+        super();
+        this._messages = null;
+        this._createMessageDialogOpened = false;
+        this._messagesDetailOpenedItem = [];
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.jsonRpc = new JsonRpc(this.extensionName);
+        this.hotReload();
+    }
+
+    hotReload(){
+        this.jsonRpc.topicMessages({topicName: this.topicName}).then(jsonRpcResponse => {
+            this._messages = jsonRpcResponse.result.messages;
+        });
+    }
+
+    render() {
+        if(this._messages){
+            return html`<div class="kafka">
+                    ${this._renderCreateMessageDialog()}
+                    ${this._renderTopBar()}                
+                    ${this._renderMessages()}
+                    ${this._renderAddMessagesPlusButton()}
+                </div>`;
+        } else {
+            return html`<vaadin-progress-bar class="progress" indeterminate></vaadin-progress-bar>`;
+        }
+    }
+
+    _renderTopBar(){
+            return html`
+                    <div class="top-bar">
+                        <vaadin-button @click="${this._backAction}">
+                            <vaadin-icon icon="font-awesome-solid:caret-left" slot="prefix"></vaadin-icon>
+                            Back
+                        </vaadin-button>
+                        <h4>${this.topicName}</h4>
+                    </div>`;
+    }
+
+    _backAction(){
+        const back = new CustomEvent("kafka-messages-back", {
+            detail: {},
+            bubbles: true,
+            cancelable: true,
+            composed: false,
+        });
+        this.dispatchEvent(back);
+    }
+    
+    _renderMessages(){
+        
+        return html`<vaadin-grid .items="${this._messages}" 
+                        class="table" theme="no-border"
+                        .detailsOpenedItems="${this._messagesDetailOpenedItem}"
+                        @active-item-changed="${(event) => {
+                            const prop = event.detail.value;
+                            this._messagesDetailOpenedItem = prop ? [prop] : [];
+                        }}"
+                        ${gridRowDetailsRenderer(this._messagesDetailRenderer, [])}>
+                    <vaadin-grid-sort-column auto-width
+                        path="offset"
+                        header="Offset"
+                        resizable>
+                    </vaadin-grid-sort-column>
+
+                    <vaadin-grid-sort-column auto-width
+                        path="partition"
+                        header="Partitions"
+                        resizable>
+                    </vaadin-grid-sort-column>
+
+                    <vaadin-grid-sort-column auto-width
+                        path="timestamp"
+                        header="Timestamp"
+                        ${columnBodyRenderer(this._timestampRenderer, [])}
+                        resizable>
+                    </vaadin-grid-sort-column>
+
+                    <vaadin-grid-sort-column auto-width
+                        path="key"
+                        header="Key"
+                        resizable>
+                    </vaadin-grid-sort-column>
+
+                    <vaadin-grid-sort-column auto-width
+                        path="value"
+                        header="Value"
+                        resizable>
+                    </vaadin-grid-sort-column>
+
+                </vaadin-grid>`;
+    }
+
+    _messagesDetailRenderer(message) {
+        let headers = [];
+        for (const [key, value] of Object.entries(message.headers)) {
+            headers.push({key:key, value: value});
+        }
+
+        return html`<vaadin-split-layout>
+                        <master-content class="detail-block">
+                            <span>Message value:</span>
+                            <div class="code-block">    
+                                <qui-code-block
+                                    mode='json'
+                                    content='${message.value}'>
+                                </qui-code-block>
+                            </div>
+                        </master-content>
+                        <detail-content class="detail-block">
+                            <span>Message headers:</span>
+                            <vaadin-grid class="header-grid" .items="${headers}" 
+                                    theme="no-border" all-rows-visible>
+                                <vaadin-grid-sort-column auto-width
+                                    path="key"
+                                    header="Key"
+                                    resizable>
+                                </vaadin-grid-sort-column>
+
+                                <vaadin-grid-sort-column auto-width
+                                    path="value"
+                                    header="Value"
+                                    resizable>
+                                </vaadin-grid-sort-column>
+                            </vaadin-grid>
+                        </detail-content>
+                    </vaadin-split-layout>`;
+    }
+
+    _timestampRenderer(message){
+        return html`${this._timestampToFormattedString(message.timestamp)}`;
+    }
+
+    _timestampToFormattedString(UNIX_timestamp) {
+        const a = new Date(UNIX_timestamp);
+        const year = a.getFullYear();
+        const month = this._addTrailingZero(a.getMonth());
+        const date = this._addTrailingZero(a.getDate());
+        const hour = this._addTrailingZero(a.getHours());
+        const min = this._addTrailingZero(a.getMinutes());
+        const sec = this._addTrailingZero(a.getSeconds());
+        return date + '/' + month + '/' + year + ' ' + hour + ':' + min + ':' + sec;
+    }
+
+    _addTrailingZero(data) {
+        if (data < 10) {
+            return "0" + data;
+        }
+        return data;
+    }
+
+    _renderAddMessagesPlusButton(){    
+        if(this._messages){
+            return html`<div class="bottom">
+                <vaadin-icon class="create-button" icon="font-awesome-solid:circle-plus" @click="${() => {this._createMessageDialogOpened = true}}" title="Create message"></vaadin-icon>
+            </div>`;
+        }
+    }
+
+    _renderCreateMessageDialog(){
+        if(this._createMessageDialogOpened){
+            return html`<vaadin-dialog class="createDialog"
+                        header-title="Add new message to ${this.topicName}"
+                        resizable
+                        .opened="${this._createMessageDialogOpened}"
+                        @opened-changed="${(e) => (this._createMessageDialogOpened = e.detail.value)}"
+                        ${dialogRenderer(() => this._renderCreateMessageDialogForm(), "Add new message to ${this.topicName}")}
+                    ></vaadin-dialog>`;
+        }
+    }
+
+    _renderCreateMessageDialogForm(){
+        return html`<qwc-kafka-add-message 
+                        partitionsCount="${this.partitionsCount}" 
+                        topicName="${this.topicName}"
+                        extensionName="${this.extensionName}"
+                        @kafka-message-added-success=${this._messageAdded}
+                        @kafka-message-added-canceled=${this._messageAddedCanceled}>
+                    </qwc-kafka-add-message>`;
+    }
+
+    _messageAddedCanceled(){
+        this._createMessageDialogOpened = false;
+    }
+
+    _messageAdded(e){
+        this._messages = e.detail.result.messages;
+        this._createMessageDialogOpened = false;
+    }
+}
+
+customElements.define('qwc-kafka-messages', QwcKafkaMessages);
\ No newline at end of file
diff --git a/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-nodes.js b/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-nodes.js
new file mode 100644
index 0000000000000..16b7f64b7a85d
--- /dev/null
+++ b/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-nodes.js
@@ -0,0 +1,85 @@
+import { QwcHotReloadElement, html, css} from 'qwc-hot-reload-element';
+import { JsonRpc } from 'jsonrpc';
+import '@vaadin/progress-bar';
+import '@vaadin/grid';
+import { columnBodyRenderer, columnHeaderRenderer } from '@vaadin/grid/lit.js';
+
+/**
+ * This component shows the Kafka Nodes
+ */
+export class QwcKafkaNodes extends QwcHotReloadElement { 
+    jsonRpc = new JsonRpc(this);
+    
+    static styles = css`
+        .noGridHeader::part(header-cell){
+            display: none;
+        }
+        .header, .nodes {
+            padding-right: 30px;
+            padding-left: 30px;
+        }
+    `;
+
+    static properties = {
+        _info: {state: true}
+    };
+
+    constructor() { 
+        super();
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.hotReload();
+    }
+
+    hotReload(){
+        this.jsonRpc.getInfo().then(jsonRpcResponse => {
+            this._info = jsonRpcResponse.result;
+        });
+    }
+
+    render() { 
+        if(this._info){
+            let header = [];
+            header.push({key:"Kafka cluster id", value: this._info.clusterInfo.id});
+            header.push({key:"Controller node (broker)", value: this._info.broker});
+            header.push({key:"ACL operations", value: this._info.clusterInfo.aclOperations});
+
+            return html`<div class="header">
+                            <vaadin-grid .items="${header}" class="noGridHeader" theme="no-row-borders" all-rows-visible>
+                                <vaadin-grid-column path="key" width="7em" ${columnBodyRenderer(this._keyRenderer, [])}></vaadin-grid-column>
+                                <vaadin-grid-column path="value"></vaadin-grid-column>
+                            </vaadin-grid>
+                        </div>
+                        <div class="nodes">
+                            <h3>Cluster Nodes</h3>
+                            <vaadin-grid .items="${this._info.clusterInfo.nodes}" theme="compact" all-rows-visible>
+                                <vaadin-grid-column path="id" ${columnHeaderRenderer(this._idHeaderRenderer, [])}></vaadin-grid-column>    
+                                <vaadin-grid-column path="host" ${columnHeaderRenderer(this._hostHeaderRenderer, [])}></vaadin-grid-column>
+                                <vaadin-grid-column path="port" ${columnHeaderRenderer(this._portHeaderRenderer, [])}></vaadin-grid-column>
+                            </vaadin-grid>
+                        </div>
+                        `;
+        } else {
+            return html`<vaadin-progress-bar class="progress" indeterminate></vaadin-progress-bar>`;
+        }
+        
+    }
+
+    _keyRenderer(info){
+        return html`<b>${info.key}</b>`;
+    }
+
+    _idHeaderRenderer(){
+        return html`<b>ID</b>`;
+    }
+    _hostHeaderRenderer(){
+        return html`<b>Host</b>`;
+    }
+    _portHeaderRenderer(){
+        return html`<b>Port</b>`;
+    }
+}
+
+customElements.define('qwc-kafka-nodes', QwcKafkaNodes);
\ No newline at end of file
diff --git a/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-schema-registry.js b/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-schema-registry.js
new file mode 100644
index 0000000000000..1fc62d09cab13
--- /dev/null
+++ b/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-schema-registry.js
@@ -0,0 +1,23 @@
+import { LitElement, html, css} from 'lit'; 
+
+/**
+ * This component shows the Kafka Scheme Registry
+ */
+export class QwcKafkaSchemeRegistry extends LitElement { 
+
+    static styles = css``;
+
+    static properties = {
+        
+    };
+
+    constructor() { 
+        super();
+    }
+
+    render() { 
+        return html`<span> TODO: Scheme Registry</span>`;
+    }
+}
+
+customElements.define('qwc-kafka-schema-registry', QwcKafkaSchemeRegistry);
\ No newline at end of file
diff --git a/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-topics.js b/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-topics.js
new file mode 100644
index 0000000000000..bd2cdc9d52b00
--- /dev/null
+++ b/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-topics.js
@@ -0,0 +1,255 @@
+import { QwcHotReloadElement, html, css} from 'qwc-hot-reload-element';
+import { JsonRpc } from 'jsonrpc';
+import '@vaadin/progress-bar';
+import '@vaadin/grid';
+import '@vaadin/grid/vaadin-grid-sort-column.js';
+import { columnBodyRenderer } from '@vaadin/grid/lit.js';
+import '@vaadin/dialog';
+import { dialogRenderer } from '@vaadin/dialog/lit.js';
+import '@vaadin/text-field';
+import '@vaadin/integer-field';
+import '@vaadin/button';
+import './qwc-kafka-messages.js';
+import './qwc-kafka-add-topic.js';
+
+
+/**
+ * This component shows the Kafka Topics
+ */
+export class QwcKafkaTopics extends QwcHotReloadElement { 
+    jsonRpc = new JsonRpc(this);
+    
+    static styles = css`
+        .kafka {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+    
+        .bottom {
+            display: flex;
+            flex-direction: row-reverse;
+        }
+    
+        .create-button {
+            margin-right: 30px;
+            margin-bottom: 10px;
+            font-size: xx-large;
+            cursor: pointer;
+        }   
+
+        .delete-button {
+            font-size: small;
+            color: var(--lumo-error-text-color);
+            cursor: pointer;
+        }
+
+        .clickableCell {
+            display: block;
+            width: 100%;
+            cursor: pointer;
+        }
+    `;
+
+    static properties = {
+        _topics: {status: true, type: Array},
+        _selectedTopic: {state: true},
+        _createTopicDialogOpened: {state: true},
+        
+        _deleteTopicDialogOpened: {state: true},
+        _deleteTopicName: {state: false}
+    };
+
+    constructor() { 
+        super();
+        this._topics = null;
+        this._selectedTopic = null;
+        
+        this._createTopicDialogOpened = false;
+        this._deleteTopicName = '';
+        this._deleteTopicDialogOpened = false;
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.hotReload();
+    }
+
+    hotReload(){
+        this.jsonRpc.getTopics().then(jsonRpcResponse => { 
+            this._topics = jsonRpcResponse.result;
+        });
+    }
+
+    render() {
+        if(this._topics && this._selectedTopic === null){
+            return this._renderTopicList();
+        } else if(this._topics && this._selectedTopic!=null){
+            return html`<qwc-kafka-messages 
+                extensionName="${this.jsonRpc.getExtensionName()}"
+                topicName="${this._selectedTopic.name}" 
+                partitionsCount=${this._selectedTopic.partitionsCount}
+                @kafka-messages-back=${this._showTopicList}></qwc-kafka-messages>`
+        } else {
+            return html`<vaadin-progress-bar class="progress" indeterminate></vaadin-progress-bar>`;
+        }
+    }
+
+    _showTopicList(){
+        this._selectedTopic = null;
+    }
+
+    _renderTopicList(){
+        return html`<div class="kafka">
+                ${this._renderCreateTopicDialog()}
+                ${this._renderConfirmDeleteDialog()}
+                ${this._renderTopicGrid()}
+                
+                <div class="bottom">
+                    <vaadin-icon class="create-button" icon="font-awesome-solid:circle-plus" @click="${() => {this._createTopicDialogOpened = true}}" title="Create topic"></vaadin-icon>
+                </div>    
+            </div>`;
+    }
+
+    _renderTopicGrid(){
+        return html`<vaadin-grid .items="${this._topics}" 
+                                    class="table" theme="no-border">
+                        <vaadin-grid-sort-column auto-width
+                            path="name"
+                            header="Topic Name"
+                            ${columnBodyRenderer(this._nameRenderer, [])}
+                            resizable>
+                        </vaadin-grid-sort-column>
+
+                        <vaadin-grid-sort-column auto-width
+                            path="topicId"
+                            header="ID"
+                            ${columnBodyRenderer(this._idRenderer, [])}
+                            resizable>
+                        </vaadin-grid-sort-column>
+
+                        <vaadin-grid-sort-column auto-width
+                            path="partitionsCount"
+                            header="Partitions count"
+                            ${columnBodyRenderer(this._partitionsCountRenderer, [])}
+                            resizable>
+                        </vaadin-grid-sort-column>
+
+                        <vaadin-grid-sort-column auto-width
+                            path="nmsg"
+                            header="Number of msg"
+                            ${columnBodyRenderer(this._nmsgRenderer, [])}
+                            resizable>
+                        </vaadin-grid-sort-column>
+
+                        <vaadin-grid-column
+                            text-align="end"
+                            ${columnBodyRenderer(this._deleteActionRenderer, [])}>
+                        ></vaadin-grid-column>
+
+                    </vaadin-grid>`;
+    }
+
+    _renderCreateTopicDialog(){
+        if(this._createTopicDialogOpened){
+            return html`<vaadin-dialog class="createDialog"
+                    header-title="Create topic"
+                    resizable
+                    .opened="${this._createTopicDialogOpened}"
+                    @opened-changed="${(e) => (this._createTopicDialogOpened = e.detail.value)}"
+                    ${dialogRenderer(() => this._renderCreateTopicDialogForm(), "Create topic")}
+                ></vaadin-dialog>`;
+        }
+    }
+
+    _renderConfirmDeleteDialog(){
+
+        return html`<vaadin-dialog class="deleteDialog"
+                    header-title="Confirm delete"
+                    .opened="${this._deleteTopicDialogOpened}"
+                    @opened-changed="${(e) => (this._deleteTopicDialogOpened = e.detail.value)}"
+                    ${dialogRenderer(() => this._renderDeleteTopicDialogForm(), "Confirm delete")}
+                ></vaadin-dialog>`;
+    }
+
+    _renderDeleteTopicDialogForm(){
+        return html`
+            Are you sure you want to delete topic <b>${this._deleteTopicName}</b><br/>?
+            ${this._renderDeleteTopicButtons()}
+        `;
+    }
+
+    _openConfirmDeleteDialog(e){
+        this._deleteTopicName = e.target.dataset.topicName;
+        this._deleteTopicDialogOpened = true;
+    }
+
+    _nameRenderer(topic){
+        return this._clickableCell(topic, topic.name);
+    }
+
+    _idRenderer(topic){
+        return this._clickableCell(topic, topic.topicId);
+    }
+
+    _partitionsCountRenderer(topic){
+        return this._clickableCell(topic, topic.partitionsCount);
+    }
+
+    _nmsgRenderer(topic){
+        return this._clickableCell(topic, topic.nmsg);
+    }
+
+    _clickableCell(topic, val){
+        return html`<span class="clickableCell" @click=${() => this._selectTopic(topic)}>${val}</span>`;
+    }
+
+    _selectTopic(topic){
+        this._selectedTopic = topic;
+    }
+
+    _deleteActionRenderer(topic){
+        return html`<vaadin-icon data-topic-name="${topic.name}" class="delete-button" icon="font-awesome-solid:trash-can" @click="${this._openConfirmDeleteDialog}" title="Delete topic"></vaadin-icon>`;
+    }
+
+    _renderCreateTopicDialogForm(){
+        return html`<qwc-kafka-add-topic 
+                        @kafka-topic-added-success=${this._topicAdded}
+                        @kafka-topic-added-canceled=${this._topicAddedCanceled}
+                        extensionName="${this.jsonRpc.getExtensionName()}">
+                    </qwc-kafka-add-topic>`;
+    }
+    
+    _topicAdded(e){
+        this._createTopicDialogOpened = false;
+        this._topics = e.detail.result;
+    }
+
+    _topicAddedCanceled(e){
+        this._createTopicDialogOpened = false;
+    }
+
+    _renderDeleteTopicButtons(){
+        return html`<div style="display: flex; flex-direction: row-reverse; gap: 10px;">
+                        <vaadin-button theme="secondary error" @click=${this._submitDeleteTopicForm}>Delete</vaadin-button>
+                        <vaadin-button theme="secondary" @click=${this._resetDeleteTopicForm}>Cancel</vaadin-button>
+                    </div>`;
+    }
+
+    _resetDeleteTopicForm(){
+        this._deleteTopicName = '';
+        this._deleteTopicDialogOpened = false;
+    }
+    
+    _submitDeleteTopicForm(){
+        this.jsonRpc.deleteTopic({
+            topicName: this._deleteTopicName
+        }).then(jsonRpcResponse => { 
+            this._topics = jsonRpcResponse.result;
+        });
+        this._resetDeleteTopicForm();
+    }
+}
+
+customElements.define('qwc-kafka-topics', QwcKafkaTopics);
\ No newline at end of file
diff --git a/extensions/kafka-client/runtime/src/main/java/io/quarkus/kafka/client/runtime/devui/KafkaJsonRPCService.java b/extensions/kafka-client/runtime/src/main/java/io/quarkus/kafka/client/runtime/devui/KafkaJsonRPCService.java
new file mode 100644
index 0000000000000..c1d7a28fc801f
--- /dev/null
+++ b/extensions/kafka-client/runtime/src/main/java/io/quarkus/kafka/client/runtime/devui/KafkaJsonRPCService.java
@@ -0,0 +1,87 @@
+package io.quarkus.kafka.client.runtime.devui;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Map;
+import java.util.concurrent.ExecutionException;
+
+import jakarta.inject.Inject;
+
+import io.quarkus.kafka.client.runtime.KafkaAdminClient;
+import io.quarkus.kafka.client.runtime.ui.KafkaUiUtils;
+import io.quarkus.kafka.client.runtime.ui.model.Order;
+import io.quarkus.kafka.client.runtime.ui.model.request.KafkaCreateTopicRequest;
+import io.quarkus.kafka.client.runtime.ui.model.request.KafkaMessageCreateRequest;
+import io.quarkus.kafka.client.runtime.ui.model.request.KafkaMessagesRequest;
+import io.quarkus.kafka.client.runtime.ui.model.request.KafkaOffsetRequest;
+import io.quarkus.kafka.client.runtime.ui.model.response.KafkaAclInfo;
+import io.quarkus.kafka.client.runtime.ui.model.response.KafkaInfo;
+import io.quarkus.kafka.client.runtime.ui.model.response.KafkaMessagePage;
+import io.quarkus.kafka.client.runtime.ui.model.response.KafkaTopic;
+
+public class KafkaJsonRPCService {
+
+    @Inject
+    KafkaUiUtils kafkaUiUtils;
+
+    @Inject
+    KafkaAdminClient kafkaAdminClient;
+
+    public List<KafkaTopic> getTopics() throws InterruptedException, ExecutionException {
+        return kafkaUiUtils.getTopics();
+    }
+
+    public List<KafkaTopic> createTopic(String topicName, int partitions, int replications)
+            throws InterruptedException, ExecutionException {
+
+        KafkaCreateTopicRequest createTopicRequest = new KafkaCreateTopicRequest(topicName, partitions, (short) replications);
+        boolean created = kafkaAdminClient.createTopic(createTopicRequest);
+        if (created) {
+            return kafkaUiUtils.getTopics();
+        }
+        throw new RuntimeException("Topic [" + topicName + "] not created");
+    }
+
+    public List<KafkaTopic> deleteTopic(String topicName) throws InterruptedException, ExecutionException {
+        boolean deleted = kafkaAdminClient.deleteTopic(topicName);
+        if (deleted) {
+            return kafkaUiUtils.getTopics();
+        }
+        throw new RuntimeException("Topic [" + topicName + "] not deleted");
+    }
+
+    public KafkaMessagePage topicMessages(String topicName) throws ExecutionException, InterruptedException {
+        List<Integer> partitions = getPartitions(topicName);
+        KafkaOffsetRequest offsetRequest = new KafkaOffsetRequest(topicName, partitions, Order.NEW_FIRST);
+        Map<Integer, Long> offset = kafkaUiUtils.getOffset(offsetRequest);
+        KafkaMessagesRequest request = new KafkaMessagesRequest(topicName, Order.NEW_FIRST, 20, offset);
+        return kafkaUiUtils.getMessages(request);
+    }
+
+    public KafkaMessagePage createMessage(String topicName, Integer partition, String key, String value,
+            Map<String, String> headers)
+            throws ExecutionException, InterruptedException {
+
+        if (partition < 0)
+            partition = null;
+
+        KafkaMessageCreateRequest request = new KafkaMessageCreateRequest(topicName, partition, value, key, headers);
+
+        kafkaUiUtils.createMessage(request);
+
+        return topicMessages(topicName);
+    }
+
+    public List<Integer> getPartitions(String topicName) throws ExecutionException, InterruptedException {
+        return new ArrayList<>(kafkaUiUtils.partitions(topicName));
+    }
+
+    public KafkaInfo getInfo() throws ExecutionException, InterruptedException {
+        return kafkaUiUtils.getKafkaInfo();
+    }
+
+    public KafkaAclInfo getAclInfo() throws InterruptedException, ExecutionException {
+        return kafkaUiUtils.getAclInfo();
+    }
+
+}
diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/controller/jsonrpc.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/controller/jsonrpc.js
index 8b6dccac69953..f17647f35c340 100644
--- a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/controller/jsonrpc.js
+++ b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/controller/jsonrpc.js
@@ -206,6 +206,10 @@ export class JsonRpc {
         }
     }
 
+    getExtensionName(){
+        return this._extensionName;
+    }
+
     static sendJsonRPCMessage(jsonrpcpayload, log=true) {
         if (JsonRpc.webSocket.readyState !== WebSocket.OPEN) {
             JsonRpc.initQueue.push(jsonrpcpayload);