-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #26998 from alukin/feature/kafka-client-dev-ui-squ…
…ashed Introduce a Kafka Client DevUI component
- Loading branch information
Showing
51 changed files
with
3,465 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -28,4 +28,5 @@ public class KafkaBuildTimeConfig { | |
| */ | ||
| @ConfigItem | ||
| public KafkaDevServicesBuildTimeConfig devservices; | ||
|
|
||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 2 additions & 0 deletions
2
extensions/kafka-client/deployment/src/main/resources/dev-static/js/config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export const api = '/q/dev/io.quarkus.quarkus-kafka-client/kafka-admin'; | ||
| export const ui = 'kafka-ui'; |
9 changes: 9 additions & 0 deletions
9
extensions/kafka-client/deployment/src/main/resources/dev-static/js/kafka_ui.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import Navigator from './pages/navigator.js' | ||
|
|
||
| const navigator = new Navigator(); | ||
| $(document).ready( | ||
| () => { | ||
| navigator.navigateToDefaultPage(); | ||
| } | ||
| ); | ||
|
|
49 changes: 49 additions & 0 deletions
49
...s/kafka-client/deployment/src/main/resources/dev-static/js/pages/accessControlListPage.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import {doPost, errorPopUp} from "../web/web.js"; | ||
| import {createTableItem} from "../util/contentManagement.js"; | ||
| import {toggleSpinner} from "../util/spinner.js"; | ||
|
|
||
| export default class AccessControlListPage { | ||
| constructor(containerId) { | ||
| this.containerId = containerId; | ||
| Object.getOwnPropertyNames(AccessControlListPage.prototype).forEach((key) => { | ||
| if (key !== 'constructor') { | ||
| this[key] = this[key].bind(this); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
|
|
||
| open() { | ||
| const req = { | ||
| action: "getAclInfo" | ||
| }; | ||
| toggleSpinner(this.containerId); | ||
| doPost(req, (data) => { | ||
| setTimeout(() => { | ||
| this.updateInfo(data); | ||
| toggleSpinner(this.containerId); | ||
| }, 2000); | ||
| }, data => { | ||
| errorPopUp("Error getting Kafka ACL info: ", data); | ||
| }); | ||
| } | ||
|
|
||
| updateInfo(data) { | ||
| $('#acluster-id').html(data.clusterId); | ||
| $('#acluster-controller').html(data.broker); | ||
| $('#acluster-acl').html(data.aclOperations); | ||
|
|
||
| const acls = data.entries; | ||
| let aclTable = $('#acl-table tbody'); | ||
| aclTable.empty(); | ||
| for (let i = 0; i < acls.length; i++) { | ||
| const e = acls[i]; | ||
| let tableRow = $("<tr/>"); | ||
| tableRow.append(createTableItem(e.operation)); | ||
| tableRow.append(createTableItem(e.prinipal)); | ||
| tableRow.append(createTableItem(e.perm)); | ||
| tableRow.append(createTableItem(e.pattern)); | ||
| aclTable.append(tableRow); | ||
| } | ||
| } | ||
| } |
85 changes: 85 additions & 0 deletions
85
...afka-client/deployment/src/main/resources/dev-static/js/pages/consumerGroupDetailsPage.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import {CollapseRow, createTableHead, createTableItem, createTableItemHtml} from "../util/contentManagement.js"; | ||
|
|
||
| export default class ConsumerGroupDetailsPage { | ||
| constructor(containerId) { | ||
| this.containerId = containerId; | ||
| Object.getOwnPropertyNames(ConsumerGroupDetailsPage.prototype).forEach((key) => { | ||
| if (key !== 'constructor') { | ||
| this[key] = this[key].bind(this); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| open(params) { | ||
| const membersData = params[1]; | ||
| let consumerGroupsTable = $('#consumer-group-details-table tbody'); | ||
| consumerGroupsTable.empty(); | ||
| for (let i = 0; i < membersData.length; i++) { | ||
| const d = membersData[i]; | ||
| const groupId = "group-" + d.memberId; | ||
|
|
||
| let tableRow = $("<tr/>"); | ||
| let collapseRow; | ||
| if (d.partitions.length > 0) { | ||
| collapseRow = new CollapseRow(groupId); | ||
| tableRow.append(createTableItemHtml(collapseRow.arrow)); | ||
| } else { | ||
| tableRow.append(createTableItem("")); | ||
| } | ||
|
|
||
| const memberId = $("<b/>") | ||
| .text(d.clientId); | ||
| const id = d.memberId.substring(d.clientId.length); | ||
| const text = $("<p/>") | ||
| .append(memberId) | ||
| .append(id); | ||
| tableRow.append(createTableItemHtml(text)); | ||
| tableRow.append(createTableItem(d.host)); | ||
| tableRow.append(createTableItem("" + new Set(d.partitions.map(x => x.partition)).size)); | ||
| tableRow.append(createTableItem("" + d.partitions.map(x => x.lag).reduce((l, r) => l + r, 0))); | ||
|
|
||
| if (d.partitions.length > 0) { | ||
| const content = this.createConsumerGroupCollapseInfo(d); | ||
| tableRow.addClass("pointer") | ||
| tableRow.click(() => collapseRow.collapse()); | ||
| consumerGroupsTable.append(tableRow); | ||
| consumerGroupsTable.append(collapseRow | ||
| .getCollapseContent(tableRow.children().length, content) | ||
| .addClass("no-hover")); | ||
| } else { | ||
| consumerGroupsTable.append(tableRow); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| createConsumerGroupCollapseInfo(dataItem) { | ||
| const collapseContent = $("<table/>") | ||
| .addClass("table") | ||
| .addClass("table-sm") | ||
| .addClass("no-hover"); | ||
|
|
||
| const headers = $("<tr/>") | ||
| .addClass("no-hover") | ||
| .append(createTableHead("Topic")) | ||
| .append(createTableHead("Partition")) | ||
| .append(createTableHead("Lag")); | ||
| const head = $("<thead/>") | ||
| .append(headers); | ||
|
|
||
| const body = $("<tbody/>"); | ||
| for (let partition of dataItem.partitions) { | ||
| const row = $("<tr/>") | ||
| .addClass("no-hover"); | ||
| row.append(createTableItemHtml(partition.topic)) | ||
| row.append(createTableItemHtml(partition.partition)) | ||
| row.append(createTableItemHtml(partition.lag)) | ||
| body.append(row); | ||
| } | ||
|
|
||
| collapseContent.append(head); | ||
| collapseContent.append(body); | ||
|
|
||
| return collapseContent; | ||
| } | ||
|
|
||
| } |
47 changes: 47 additions & 0 deletions
47
...sions/kafka-client/deployment/src/main/resources/dev-static/js/pages/consumerGroupPage.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import {createTableItem} from "../util/contentManagement.js"; | ||
| import {doPost, errorPopUp} from "../web/web.js"; | ||
| import {pages} from "./navigator.js"; | ||
| import {toggleSpinner} from "../util/spinner.js"; | ||
|
|
||
| export default class ConsumerGroupPage { | ||
| constructor(navigator, containerId) { | ||
| this.containerId = containerId; | ||
| this.navigator = navigator; | ||
| Object.getOwnPropertyNames(ConsumerGroupPage.prototype).forEach((key) => { | ||
| if (key !== 'constructor') { | ||
| this[key] = this[key].bind(this); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| open() { | ||
| toggleSpinner(this.containerId); | ||
| const req = { | ||
| action: "getInfo", key: "0", value: "0" | ||
| }; | ||
| doPost(req, (data) => { | ||
| this.updateConsumerGroups(data.consumerGroups); | ||
| toggleSpinner(this.containerId); | ||
| }, data => { | ||
| errorPopUp("Error getting Kafka info: ", data); | ||
| toggleSpinner(this.containerId); | ||
| }); | ||
| } | ||
|
|
||
| updateConsumerGroups(data) { | ||
| let consumerGroupsTable = $('#consumer-groups-table tbody'); | ||
| consumerGroupsTable.empty(); | ||
| for (let i = 0; i < data.length; i++) { | ||
| const d = data[i]; | ||
| let tableRow = $("<tr/>"); | ||
| tableRow.append(createTableItem(d.state)); | ||
| tableRow.append(createTableItem(d.name)); | ||
| tableRow.append(createTableItem(d.coordinatorId)); | ||
| tableRow.append(createTableItem(d.protocol)); | ||
| tableRow.append(createTableItem(d.members.length)); | ||
| tableRow.append(createTableItem(d.lag)); | ||
| tableRow.click(() => this.navigator.navigateTo(pages.CONSUMER_GROUPS_DETAILS, [d.name, d.members])); | ||
| consumerGroupsTable.append(tableRow); | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.