Merge branch 'master' of github.com:tkaszuba/kafka-ui into issues/2764

.github/ISSUE_TEMPLATE/bug.yml

@@ -0,0 +1,92 @@
+name: "\U0001F41E  Bug report"
+description: File a bug report
+labels: ["status/triage", "type/bug"]
+assignees: []
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Hi, thanks for raising the issue(-s), all contributions really matter!
+        Please, note that we'll close the issue without further explanation if you don't follow
+        this template and don't provide the information requested within this template.
+
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Issue submitter TODO list
+      description: By you checking these checkboxes we can be sure you've done the essential things.
+      options:
+        - label: I've looked up my issue in [FAQ](https://docs.kafka-ui.provectus.io/faq/common-problems)
+          required: true
+        - label: I've searched for an already existing issues [here](https://github.com/provectus/kafka-ui/issues)
+          required: true
+        - label: I've tried running `master`-labeled docker image and the issue still persists there
+          required: true
+        - label: I'm running a supported version of the application which is listed [here](https://github.com/provectus/kafka-ui/blob/master/SECURITY.md)
+          required: true
+
+  - type: textarea
+    attributes:
+      label: Describe the bug (actual behavior)
+      description: A clear and concise description of what the bug is. Use a list, if there is more than one problem
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Expected behavior
+      description: A clear and concise description of what you expected to happen
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: Your installation details
+      description: |
+        How do you run the app? Please provide as much info as possible:
+        1. App version (commit hash in the top left corner of the UI)
+        2. Helm chart version, if you use one
+        3. Your application config. Please remove the sensitive info like passwords or API keys.
+        4. Any IAAC configs
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Steps to reproduce
+      description: |
+        Please write down the order of the actions required to reproduce the issue.
+        For the advanced setups/complicated issue, we might need you to provide
+        a minimal [reproducible example](https://stackoverflow.com/help/minimal-reproducible-example).
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Screenshots
+      description: |
+        If applicable, add screenshots to help explain your problem
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: Logs
+      description: |
+        If applicable, *upload* screenshots to help explain your problem
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: Additional context
+      description: |
+        Add any other context about the problem here. E.G.:
+        1. Are there any alternative scenarios (different data/methods/configuration/setup) you have tried?
+          Were they successful or the same issue occurred? Please provide steps as well.
+        2. Related issues (if there are any).
+        3. Logs (if available)
+        4. Is there any serious impact or behaviour on the end-user because of this issue, that can be overlooked?
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,64 +0,0 @@
----
-name: "\U0001F41E  Bug report"
-about: Create a bug report
-title: ''
-labels: status/triage, type/bug
-assignees: ''
-
----
-
-<!--
-
-We will close the issue without further explanation if you don't follow this template and don't provide the information requested within this template.
-
-Don't forget to check for existing issues/discussions regarding your proposal. We might already have it.
-https://github.com/provectus/kafka-ui/issues
-https://github.com/provectus/kafka-ui/discussions
-
--->
-
-<!--
-Please follow the naming conventions for bugs:
-<Feature/Area/Scope> :  <Compact, but specific problem summary> 
-Avoid generic titles, like “Topics: incorrect layout of message sorting drop-down list”. Better use something like: “Topics: Message sorting drop-down list overlaps the "Submit" button”.
-
--->
-
-**Describe the bug** (Actual behavior)
-<!--(A clear and concise description of what the bug is.Use a list, if there is more than one problem)-->
-
-**Expected behavior**
-<!--(A clear and concise description of what you expected to happen.)-->
-
-**Set up**
-<!--
-WE MIGHT CLOSE THE ISSUE without further explanation IF YOU DON'T PROVIDE THIS INFORMATION.
-
-How do you run the app? Please provide as much info as possible:
-1. App version (docker image version or check commit hash in the top left corner in UI)
-2. Helm chart version, if you use one
-3. Any IAAC configs
--->
-
-
-**Steps to Reproduce**
-<!-- We'd like you to provide an example setup (via docker-compose, helm, etc.) 
-to reproduce the problem, especially with a complex setups. -->
-
-1. 
-
-**Screenshots**
-<!--
-(If applicable, add screenshots to help explain your problem)
--->
-
-
-**Additional context**
-<!--
-Add any other context about the problem here. E.g.: 
-1. Are there any alternative scenarios (different data/methods/configuration/setup) you have tried? 
-   Were they successfull or same issue occured? Please provide steps as well.
-2. Related issues (if there are any).
-3. Logs (if available)
-4. Is there any serious impact or behaviour on the end-user because of this issue, that can be overlooked?
--->

.github/ISSUE_TEMPLATE/feature.yml

@@ -0,0 +1,66 @@
+name: "\U0001F680 Feature request"
+description: Propose a new feature
+labels: ["status/triage", "type/feature"]
+assignees: []
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Hi, thanks for raising the issue(-s), all contributions really matter!
+        Please, note that we'll close the issue without further explanation if you don't follow
+        this template and don't provide the information requested within this template.
+
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Issue submitter TODO list
+      description: By you checking these checkboxes we can be sure you've done the essential things.
+      options:
+        - label: I've searched for an already existing issues [here](https://github.com/provectus/kafka-ui/issues)
+          required: true
+        - label: I'm running a supported version of the application which is listed [here](https://github.com/provectus/kafka-ui/blob/master/SECURITY.md) and the feature is not present there
+          required: true
+
+  - type: textarea
+    attributes:
+      label: Is your proposal related to a problem?
+      description: |
+        Provide a clear and concise description of what the problem is.
+        For example, "I'm always frustrated when..."
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: Describe the feature you're interested in
+      description: |
+        Provide a clear and concise description of what you want to happen.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Describe alternatives you've considered
+      description: |
+        Let us know about other solutions you've tried or researched.
+    validations:
+      required: false
+
+  - type: input
+    attributes:
+      label: Version you're running
+      description: |
+        Please provide the app version you're currently running:
+        1. App version (commit hash in the top left corner of the UI)
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Additional context
+      description: |
+        Is there anything else you can add about the proposal?
+        You might want to link to related issues here, if you haven't already.
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,46 +0,0 @@
----
-name: "\U0001F680 Feature request"
-about: Propose a new feature
-title: ''
-labels: status/triage, type/feature
-assignees: ''
-
----
-
-<!--
-
-Don't forget to check for existing issues/discussions regarding your proposal. We might already have it.
-https://github.com/provectus/kafka-ui/issues
-https://github.com/provectus/kafka-ui/discussions
-
--->
-
-### Which version of the app are you running?
-<!-- Please provide docker image version or check commit hash in the top left corner in UI) -->
-
-### Is your proposal related to a problem?
-
-<!--
-  Provide a clear and concise description of what the problem is.
-  For example, "I'm always frustrated when..."
--->
-
-### Describe the solution you'd like
-
-<!--
-  Provide a clear and concise description of what you want to happen.
--->
-
-### Describe alternatives you've considered
-
-<!--
-  Let us know about other solutions you've tried or researched.
--->
-
-### Additional context
-
-<!--
-  Is there anything else you can add about the proposal?
-  You might want to link to related issues here, if you haven't already.
--->
-

.github/ISSUE_TEMPLATE/helm.yml

@@ -0,0 +1,92 @@
+name: "⎈ K8s/Helm problem report"
+description: "Report a problem with k8s/helm charts/etc"
+labels: ["status/triage", "scope/k8s"]
+assignees: []
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Hi, thanks for raising the issue(-s), all contributions really matter!
+        Please, note that we'll close the issue without further explanation if you don't follow
+        this template and don't provide the information requested within this template.
+
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Issue submitter TODO list
+      description: By you checking these checkboxes we can be sure you've done the essential things.
+      options:
+        - label: I've looked up my issue in [FAQ](https://docs.kafka-ui.provectus.io/faq/common-problems)
+          required: true
+        - label: I've searched for an already existing issues [here](https://github.com/provectus/kafka-ui/issues)
+          required: true
+        - label: I've tried running `master`-labeled docker image and the issue still persists there
+          required: true
+        - label: I'm running a supported version of the application which is listed [here](https://github.com/provectus/kafka-ui/blob/master/SECURITY.md)
+          required: true
+
+  - type: textarea
+    attributes:
+      label: Describe the bug (actual behavior)
+      description: A clear and concise description of what the bug is. Use a list, if there is more than one problem
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Expected behavior
+      description: A clear and concise description of what you expected to happen
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: Your installation details
+      description: |
+        How do you run the app? Please provide as much info as possible:
+        1. App version (commit hash in the top left corner of the UI)
+        2. Helm chart version
+        3. Your application config. Please remove the sensitive info like passwords or API keys.
+        4. Any IAAC configs
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Steps to reproduce
+      description: |
+        Please write down the order of the actions required to reproduce the issue.
+        For the advanced setups/complicated issue, we might need you to provide
+        a minimal [reproducible example](https://stackoverflow.com/help/minimal-reproducible-example).
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Screenshots
+      description: |
+        If applicable, add screenshots to help explain your problem
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: Logs
+      description: |
+        If applicable, *upload* screenshots to help explain your problem
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: Additional context
+      description: |
+        Add any other context about the problem here. E.G.:
+        1. Are there any alternative scenarios (different data/methods/configuration/setup) you have tried?
+          Were they successful or the same issue occurred? Please provide steps as well.
+        2. Related issues (if there are any).
+        3. Logs (if available)
+        4. Is there any serious impact or behaviour on the end-user because of this issue, that can be overlooked?
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/k8s.md

@@ -1,52 +0,0 @@
----
-name: "⎈ K8s/Helm problem report"
-about: Report a problem with k8s/helm charts/etc
-title: ''
-labels: scope/k8s, status/triage
-assignees: azatsafin
-
----
-
-<!--
-
-Don't forget to check for existing issues/discussions regarding your proposal. We might already have it.
-https://github.com/provectus/kafka-ui/issues
-https://github.com/provectus/kafka-ui/discussions
-
--->
-
-**Describe the bug**
-<!--(A clear and concise description of what the bug is.)-->
-
-
-**Set up**
-<!--
-How do you run the app? Please provide as much info as possible:
-1. App version (docker image version or check commit hash in the top left corner in UI)
-2. Helm chart version, if you use one
-3. Any IAAC configs
-
-We might close the issue without further explanation if you don't provide such information.
--->
-
-
-**Steps to Reproduce**
-Steps to reproduce the behavior:
-
-1. 
-
-**Expected behavior**
-<!--
-(A clear and concise description of what you expected to happen)
--->
-
-**Screenshots**
-<!--
-(If applicable, add screenshots to help explain your problem)
--->
-
-
-**Additional context**
-<!--
-(Add any other context about the problem here)
--->

.github/dependabot.yml

@@ -8,8 +8,6 @@ updates:
     timezone: Europe/Moscow
   reviewers:
     - "Haarolean"
-  assignees:
-    - "Haarolean"
   labels:
     - "scope/backend"
     - "type/dependencies"
@@ -99,8 +97,6 @@ updates:
     timezone: Europe/Moscow
   reviewers:
     - "Haarolean"
-  assignees:
-    - "Haarolean"
   labels:
     - "scope/infrastructure"
     - "type/dependencies"

kafka-ui-api/pom.xml

@@ -21,6 +21,12 @@
     </properties>
 
     <dependencies>
+        <dependency>
+            <!--TODO: remove, when spring-boot fixed dependency to 6.0.8+ (6.0.7 has CVE) -->
+            <groupId>org.springframework</groupId>
+            <artifactId>spring-core</artifactId>
+            <version>6.0.8</version>
+        </dependency>
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-webflux</artifactId>
@@ -109,6 +115,12 @@
             <groupId>io.projectreactor.addons</groupId>
             <artifactId>reactor-extra</artifactId>
         </dependency>
+<!-- https://github.com/provectus/kafka-ui/pull/3693 -->
+        <dependency>
+            <groupId>org.json</groupId>
+            <artifactId>json</artifactId>
+            <version>${org.json.version}</version>
+        </dependency>
 
         <dependency>
             <groupId>org.springframework.boot</groupId>

kafka-ui-api/src/main/java/com/provectus/kafka/ui/model/InternalBroker.java

@@ -1,6 +1,7 @@
 package com.provectus.kafka.ui.model;
 
 import java.math.BigDecimal;
+import javax.annotation.Nullable;
 import lombok.Data;
 import org.apache.kafka.common.Node;
 
@@ -10,15 +11,27 @@ public class InternalBroker {
   private final Integer id;
   private final String host;
   private final Integer port;
-  private final BigDecimal bytesInPerSec;
+  private final @Nullable BigDecimal bytesInPerSec;
-  private final BigDecimal bytesOutPerSec;
+  private final @Nullable BigDecimal bytesOutPerSec;
+  private final @Nullable Integer partitionsLeader;
+  private final @Nullable Integer partitions;
+  private final @Nullable Integer inSyncPartitions;
+  private final @Nullable BigDecimal leadersSkew;
+  private final @Nullable BigDecimal partitionsSkew;
 
-  public InternalBroker(Node node, Statistics statistics) {
+  public InternalBroker(Node node,
+                        PartitionDistributionStats partitionDistribution,
+                        Statistics statistics) {
     this.id = node.id();
     this.host = node.host();
     this.port = node.port();
     this.bytesInPerSec = statistics.getMetrics().getBrokerBytesInPerSec().get(node.id());
     this.bytesOutPerSec = statistics.getMetrics().getBrokerBytesOutPerSec().get(node.id());
+    this.partitionsLeader = partitionDistribution.getPartitionLeaders().get(node);
+    this.partitions = partitionDistribution.getPartitionsCount().get(node);
+    this.inSyncPartitions = partitionDistribution.getInSyncPartitions().get(node);
+    this.leadersSkew = partitionDistribution.leadersSkew(node);
+    this.partitionsSkew = partitionDistribution.partitionsSkew(node);
   }
 
 }

kafka-ui-api/src/main/java/com/provectus/kafka/ui/model/PartitionDistributionStats.java

@@ -0,0 +1,93 @@
+package com.provectus.kafka.ui.model;
+
+import java.math.BigDecimal;
+import java.math.MathContext;
+import java.util.HashMap;
+import java.util.Map;
+import javax.annotation.Nullable;
+import lombok.AccessLevel;
+import lombok.Getter;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.apache.kafka.clients.admin.TopicDescription;
+import org.apache.kafka.common.Node;
+import org.apache.kafka.common.TopicPartitionInfo;
+
+@RequiredArgsConstructor(access = AccessLevel.PRIVATE)
+@Getter
+@Slf4j
+public class PartitionDistributionStats {
+
+  // avg skew will show unuseful results on low number of partitions
+  private static final int MIN_PARTITIONS_FOR_SKEW_CALCULATION = 50;
+
+  private static final MathContext ROUNDING_MATH_CTX = new MathContext(3);
+
+  private final Map<Node, Integer> partitionLeaders;
+  private final Map<Node, Integer> partitionsCount;
+  private final Map<Node, Integer> inSyncPartitions;
+  private final double avgLeadersCntPerBroker;
+  private final double avgPartitionsPerBroker;
+  private final boolean skewCanBeCalculated;
+
+  public static PartitionDistributionStats create(Statistics stats) {
+    return create(stats, MIN_PARTITIONS_FOR_SKEW_CALCULATION);
+  }
+
+  static PartitionDistributionStats create(Statistics stats, int minPartitionsForSkewCalculation) {
+    var partitionLeaders = new HashMap<Node, Integer>();
+    var partitionsReplicated = new HashMap<Node, Integer>();
+    var isr = new HashMap<Node, Integer>();
+    int partitionsCnt = 0;
+    for (TopicDescription td : stats.getTopicDescriptions().values()) {
+      for (TopicPartitionInfo tp : td.partitions()) {
+        partitionsCnt++;
+        tp.replicas().forEach(r -> incr(partitionsReplicated, r));
+        tp.isr().forEach(r -> incr(isr, r));
+        if (tp.leader() != null) {
+          incr(partitionLeaders, tp.leader());
+        }
+      }
+    }
+    int nodesWithPartitions = partitionsReplicated.size();
+    int partitionReplications = partitionsReplicated.values().stream().mapToInt(i -> i).sum();
+    var avgPartitionsPerBroker = nodesWithPartitions == 0 ? 0 : ((double) partitionReplications) / nodesWithPartitions;
+
+    int nodesWithLeaders = partitionLeaders.size();
+    int leadersCnt = partitionLeaders.values().stream().mapToInt(i -> i).sum();
+    var avgLeadersCntPerBroker = nodesWithLeaders == 0 ? 0 : ((double) leadersCnt) / nodesWithLeaders;
+
+    return new PartitionDistributionStats(
+        partitionLeaders,
+        partitionsReplicated,
+        isr,
+        avgLeadersCntPerBroker,
+        avgPartitionsPerBroker,
+        partitionsCnt >= minPartitionsForSkewCalculation
+    );
+  }
+
+  private static void incr(Map<Node, Integer> map, Node n) {
+    map.compute(n, (k, c) -> c == null ? 1 : ++c);
+  }
+
+  @Nullable
+  public BigDecimal partitionsSkew(Node node) {
+    return calculateAvgSkew(partitionsCount.get(node), avgPartitionsPerBroker);
+  }
+
+  @Nullable
+  public BigDecimal leadersSkew(Node node) {
+    return calculateAvgSkew(partitionLeaders.get(node), avgLeadersCntPerBroker);
+  }
+
+  // Returns difference (in percents) from average value, null if it can't be calculated
+  @Nullable
+  private BigDecimal calculateAvgSkew(@Nullable Integer value, double avgValue) {
+    if (avgValue == 0 || !skewCanBeCalculated) {
+      return null;
+    }
+    value = value == null ? 0 : value;
+    return new BigDecimal((value - avgValue) / avgValue * 100.0).round(ROUNDING_MATH_CTX);
+  }
+}

kafka-ui-api/src/main/java/com/provectus/kafka/ui/serdes/ConsumerRecordDeserializer.java

@@ -123,11 +123,11 @@ public class ConsumerRecordDeserializer {
   }
 
   private static Long getKeySize(ConsumerRecord<Bytes, Bytes> consumerRecord) {
-    return consumerRecord.key() != null ? (long) consumerRecord.key().get().length : null;
+    return consumerRecord.key() != null ? (long) consumerRecord.serializedKeySize() : null;
   }
 
   private static Long getValueSize(ConsumerRecord<Bytes, Bytes> consumerRecord) {
-    return consumerRecord.value() != null ? (long) consumerRecord.value().get().length : null;
+    return consumerRecord.value() != null ? (long) consumerRecord.serializedValueSize() : null;
   }
 
   private static int headerSize(Header header) {

kafka-ui-api/src/main/java/com/provectus/kafka/ui/serdes/SerdesInitializer.java

@@ -122,8 +122,6 @@ public class SerdesInitializer {
         registeredSerdes,
         Optional.ofNullable(clusterProperties.getDefaultKeySerde())
             .map(name -> Preconditions.checkNotNull(registeredSerdes.get(name), "Default key serde not found"))
-            .or(() -> Optional.ofNullable(registeredSerdes.get(SchemaRegistrySerde.name())))
-            .or(() -> Optional.ofNullable(registeredSerdes.get(ProtobufFileSerde.name())))
             .orElse(null),
         Optional.ofNullable(clusterProperties.getDefaultValueSerde())
             .map(name -> Preconditions.checkNotNull(registeredSerdes.get(name), "Default value serde not found"))

kafka-ui-api/src/main/java/com/provectus/kafka/ui/service/BrokerService.java

@@ -10,6 +10,7 @@ import com.provectus.kafka.ui.model.BrokersLogdirsDTO;
 import com.provectus.kafka.ui.model.InternalBroker;
 import com.provectus.kafka.ui.model.InternalBrokerConfig;
 import com.provectus.kafka.ui.model.KafkaCluster;
+import com.provectus.kafka.ui.model.PartitionDistributionStats;
 import com.provectus.kafka.ui.service.metrics.RawMetric;
 import java.util.Collections;
 import java.util.HashMap;
@@ -64,11 +65,13 @@ public class BrokerService {
   }
 
   public Flux<InternalBroker> getBrokers(KafkaCluster cluster) {
+    var stats = statisticsCache.get(cluster);
+    var partitionsDistribution = PartitionDistributionStats.create(stats);
     return adminClientService
         .get(cluster)
         .flatMap(ReactiveAdminClient::describeCluster)
         .map(description -> description.getNodes().stream()
-            .map(node -> new InternalBroker(node, statisticsCache.get(cluster)))
+            .map(node -> new InternalBroker(node, partitionsDistribution, stats))
             .collect(Collectors.toList()))
         .flatMapMany(Flux::fromIterable);
   }

kafka-ui-api/src/main/java/com/provectus/kafka/ui/service/KafkaConnectService.java

@@ -109,6 +109,7 @@ public class KafkaConnectService {
   private Stream<String> getStringsForSearch(FullConnectorInfoDTO fullConnectorInfo) {
     return Stream.of(
         fullConnectorInfo.getName(),
+        fullConnectorInfo.getConnect(),
         fullConnectorInfo.getStatus().getState().getValue(),
         fullConnectorInfo.getType().getValue());
   }

kafka-ui-api/src/main/java/com/provectus/kafka/ui/service/analyze/TopicAnalysisStats.java

@@ -43,8 +43,7 @@ class TopicAnalysisStats {
     Long max;
     final UpdateDoublesSketch sizeSketch = DoublesSketch.builder().build();
 
-    void apply(byte[] bytes) {
+    void apply(int len) {
-      int len = bytes.length;
       sum += len;
       min = minNullable(min, len);
       max = maxNullable(max, len);
@@ -98,7 +97,7 @@ class TopicAnalysisStats {
 
     if (rec.key() != null) {
       byte[] keyBytes = rec.key().get();
-      keysSize.apply(keyBytes);
+      keysSize.apply(rec.serializedKeySize());
       uniqKeys.update(keyBytes);
     } else {
       nullKeys++;
@@ -106,7 +105,7 @@ class TopicAnalysisStats {
 
     if (rec.value() != null) {
       byte[] valueBytes = rec.value().get();
-      valuesSize.apply(valueBytes);
+      valuesSize.apply(rec.serializedValueSize());
       uniqValues.update(valueBytes);
     } else {
       nullValues++;

kafka-ui-api/src/test/java/com/provectus/kafka/ui/model/PartitionDistributionStatsTest.java

@@ -0,0 +1,83 @@
+package com.provectus.kafka.ui.model;
+
+import static org.assertj.core.api.Assertions.assertThat;
+
+import com.provectus.kafka.ui.service.ReactiveAdminClient;
+import java.math.BigDecimal;
+import java.util.List;
+import java.util.Map;
+import java.util.Set;
+import org.apache.kafka.clients.admin.TopicDescription;
+import org.apache.kafka.common.Node;
+import org.apache.kafka.common.TopicPartitionInfo;
+import org.assertj.core.data.Percentage;
+import org.junit.jupiter.api.Test;
+
+class PartitionDistributionStatsTest {
+
+  @Test
+  void skewCalculatedBasedOnPartitionsCounts() {
+    Node n1 = new Node(1, "n1", 9092);
+    Node n2 = new Node(2, "n2", 9092);
+    Node n3 = new Node(3, "n3", 9092);
+    Node n4 = new Node(4, "n4", 9092);
+
+    var stats = PartitionDistributionStats.create(
+        Statistics.builder()
+            .clusterDescription(
+                new ReactiveAdminClient.ClusterDescription(null, "test", Set.of(n1, n2, n3), null))
+            .topicDescriptions(
+                Map.of(
+                    "t1", new TopicDescription(
+                        "t1", false,
+                        List.of(
+                            new TopicPartitionInfo(0, n1, List.of(n1, n2), List.of(n1, n2)),
+                            new TopicPartitionInfo(1, n2, List.of(n2, n3), List.of(n2, n3))
+                        )
+                    ),
+                    "t2", new TopicDescription(
+                        "t2", false,
+                        List.of(
+                            new TopicPartitionInfo(0, n1, List.of(n1, n2), List.of(n1, n2)),
+                            new TopicPartitionInfo(1, null, List.of(n2, n1), List.of(n1))
+                        )
+                    )
+                )
+            )
+            .build(), 4
+    );
+
+    assertThat(stats.getPartitionLeaders())
+        .containsExactlyInAnyOrderEntriesOf(Map.of(n1, 2, n2, 1));
+    assertThat(stats.getPartitionsCount())
+        .containsExactlyInAnyOrderEntriesOf(Map.of(n1, 3, n2, 4, n3, 1));
+    assertThat(stats.getInSyncPartitions())
+        .containsExactlyInAnyOrderEntriesOf(Map.of(n1, 3, n2, 3, n3, 1));
+
+    // Node(partitions): n1(3), n2(4), n3(1), n4(0)
+    // average partitions cnt = (3+4+1) / 3 = 2.666 (counting only nodes with partitions!)
+    assertThat(stats.getAvgPartitionsPerBroker())
+        .isCloseTo(2.666, Percentage.withPercentage(1));
+
+    assertThat(stats.partitionsSkew(n1))
+        .isCloseTo(BigDecimal.valueOf(12.5), Percentage.withPercentage(1));
+    assertThat(stats.partitionsSkew(n2))
+        .isCloseTo(BigDecimal.valueOf(50), Percentage.withPercentage(1));
+    assertThat(stats.partitionsSkew(n3))
+        .isCloseTo(BigDecimal.valueOf(-62.5), Percentage.withPercentage(1));
+    assertThat(stats.partitionsSkew(n4))
+        .isCloseTo(BigDecimal.valueOf(-100), Percentage.withPercentage(1));
+
+    //  Node(leaders): n1(2), n2(1), n3(0), n4(0)
+    //  average leaders cnt = (2+1) / 2 = 1.5 (counting only nodes with leaders!)
+    assertThat(stats.leadersSkew(n1))
+        .isCloseTo(BigDecimal.valueOf(33.33), Percentage.withPercentage(1));
+    assertThat(stats.leadersSkew(n2))
+        .isCloseTo(BigDecimal.valueOf(-33.33), Percentage.withPercentage(1));
+    assertThat(stats.leadersSkew(n3))
+        .isCloseTo(BigDecimal.valueOf(-100), Percentage.withPercentage(1));
+    assertThat(stats.leadersSkew(n4))
+        .isCloseTo(BigDecimal.valueOf(-100), Percentage.withPercentage(1));
+  }
+
+}

kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml

@@ -2375,6 +2375,16 @@ components:
           type: number
         bytesOutPerSec:
           type: number
+        partitionsLeader:
+          type: integer
+        partitions:
+          type: integer
+        inSyncPartitions:
+          type: integer
+        partitionsSkew:
+          type: number
+        leadersSkew:
+          type: number
       required:
         - id
 

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/services/ApiService.java

@@ -36,29 +36,31 @@ import org.springframework.web.reactive.function.client.WebClientResponseExcepti
 @Slf4j
 public class ApiService extends BaseSource {
 
+  private final ApiClient apiClient = new ApiClient().setBasePath(BASE_API_URL);
+
   @SneakyThrows
   private TopicsApi topicApi() {
-    return new TopicsApi(new ApiClient().setBasePath(BASE_API_URL));
+    return new TopicsApi(apiClient);
   }
 
   @SneakyThrows
   private SchemasApi schemaApi() {
-    return new SchemasApi(new ApiClient().setBasePath(BASE_API_URL));
+    return new SchemasApi(apiClient);
   }
 
   @SneakyThrows
   private KafkaConnectApi connectorApi() {
-    return new KafkaConnectApi(new ApiClient().setBasePath(BASE_API_URL));
+    return new KafkaConnectApi(apiClient);
   }
 
   @SneakyThrows
   private MessagesApi messageApi() {
-    return new MessagesApi(new ApiClient().setBasePath(BASE_API_URL));
+    return new MessagesApi(apiClient);
   }
 
   @SneakyThrows
   private KsqlApi ksqlApi() {
-    return new KsqlApi(new ApiClient().setBasePath(BASE_API_URL));
+    return new KsqlApi(apiClient);
   }
 
   @SneakyThrows

kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/manualsuite/backlog/SmokeBacklog.java

@@ -2,6 +2,7 @@ package com.provectus.kafka.ui.manualsuite.backlog;
 
 import static com.provectus.kafka.ui.qasesuite.BaseQaseTest.BROKERS_SUITE_ID;
 import static com.provectus.kafka.ui.qasesuite.BaseQaseTest.KSQL_DB_SUITE_ID;
+import static com.provectus.kafka.ui.qasesuite.BaseQaseTest.SCHEMAS_SUITE_ID;
 import static com.provectus.kafka.ui.qasesuite.BaseQaseTest.TOPICS_PROFILE_SUITE_ID;
 import static com.provectus.kafka.ui.utilities.qase.enums.State.TO_BE_AUTOMATED;
 
@@ -35,37 +36,65 @@ public class SmokeBacklog extends BaseManualTest {
   }
 
   @Automation(state = TO_BE_AUTOMATED)
-  @Suite(id = KSQL_DB_SUITE_ID)
+  @Suite(id = BROKERS_SUITE_ID)
-  @QaseId(284)
+  @QaseId(331)
   @Test
   public void testCaseD() {
   }
 
-  @Automation(state = TO_BE_AUTOMATED)
-  @Suite(id = BROKERS_SUITE_ID)
-  @QaseId(331)
-  @Test
-  public void testCaseE() {
-  }
-
   @Automation(state = TO_BE_AUTOMATED)
   @Suite(id = BROKERS_SUITE_ID)
   @QaseId(332)
   @Test
-  public void testCaseF() {
+  public void testCaseE() {
   }
 
   @Automation(state = TO_BE_AUTOMATED)
   @Suite(id = TOPICS_PROFILE_SUITE_ID)
   @QaseId(335)
   @Test
-  public void testCaseG() {
+  public void testCaseF() {
   }
 
   @Automation(state = TO_BE_AUTOMATED)
   @Suite(id = TOPICS_PROFILE_SUITE_ID)
   @QaseId(336)
   @Test
+  public void testCaseG() {
+  }
+
+  @Automation(state = TO_BE_AUTOMATED)
+  @Suite(id = TOPICS_PROFILE_SUITE_ID)
+  @QaseId(343)
+  @Test
   public void testCaseH() {
   }
+
+  @Automation(state = TO_BE_AUTOMATED)
+  @Suite(id = KSQL_DB_SUITE_ID)
+  @QaseId(344)
+  @Test
+  public void testCaseI() {
+  }
+
+  @Automation(state = TO_BE_AUTOMATED)
+  @Suite(id = SCHEMAS_SUITE_ID)
+  @QaseId(345)
+  @Test
+  public void testCaseJ() {
+  }
+
+  @Automation(state = TO_BE_AUTOMATED)
+  @Suite(id = SCHEMAS_SUITE_ID)
+  @QaseId(346)
+  @Test
+  public void testCaseK() {
+  }
+
+  @Automation(state = TO_BE_AUTOMATED)
+  @Suite(id = TOPICS_PROFILE_SUITE_ID)
+  @QaseId(347)
+  @Test
+  public void testCaseL() {
+  }
 }

kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/manualsuite/suite/TopicsTest.java

@@ -92,4 +92,28 @@ public class TopicsTest extends BaseManualTest {
   @Test
   public void testCaseN() {
   }
+
+  @Automation(state = NOT_AUTOMATED)
+  @QaseId(337)
+  @Test
+  public void testCaseO() {
+  }
+
+  @Automation(state = NOT_AUTOMATED)
+  @QaseId(339)
+  @Test
+  public void testCaseP() {
+  }
+
+  @Automation(state = NOT_AUTOMATED)
+  @QaseId(341)
+  @Test
+  public void testCaseQ() {
+  }
+
+  @Automation(state = NOT_AUTOMATED)
+  @QaseId(342)
+  @Test
+  public void testCaseR() {
+  }
 }

kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/manualsuite/suite/WizardTest.java

@@ -14,4 +14,16 @@ public class WizardTest extends BaseManualTest {
   @Test
   public void testCaseA() {
   }
+
+  @Automation(state = NOT_AUTOMATED)
+  @QaseId(338)
+  @Test
+  public void testCaseB() {
+  }
+
+  @Automation(state = NOT_AUTOMATED)
+  @QaseId(340)
+  @Test
+  public void testCaseC() {
+  }
 }

kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/smokesuite/ksqldb/KsqlDbTest.java

@@ -1,5 +1,6 @@
 package com.provectus.kafka.ui.smokesuite.ksqldb;
 
+import static com.provectus.kafka.ui.pages.ksqldb.enums.KsqlMenuTabs.STREAMS;
 import static com.provectus.kafka.ui.pages.ksqldb.enums.KsqlQueryConfig.SHOW_TABLES;
 import static com.provectus.kafka.ui.pages.panels.enums.MenuItem.KSQL_DB;
 import static org.apache.commons.lang3.RandomStringUtils.randomAlphabetic;
@@ -39,17 +40,21 @@ public class KsqlDbTest extends BaseTest {
         FIRST_TABLE.getName(), SECOND_TABLE.getName()));
   }
 
-  @QaseId(86)
+  @QaseId(284)
   @Test(priority = 1)
-  public void clearResultsForExecutedRequest() {
+  public void streamsAndTablesVisibilityCheck() {
-    navigateToKsqlDbAndExecuteRequest(SHOW_TABLES.getQuery());
+    naviSideBar
+        .openSideMenu(KSQL_DB);
+    ksqlDbList
+        .waitUntilScreenReady();
     SoftAssert softly = new SoftAssert();
-    softly.assertTrue(ksqlQueryForm.areResultsVisible(), "areResultsVisible()");
+    softly.assertTrue(ksqlDbList.getTableByName(FIRST_TABLE.getName()).isVisible(), "getTableByName()");
-    softly.assertAll();
+    softly.assertTrue(ksqlDbList.getTableByName(SECOND_TABLE.getName()).isVisible(), "getTableByName()");
-    ksqlQueryForm
-        .clickClearResultsBtn();
-    softly.assertFalse(ksqlQueryForm.areResultsVisible(), "areResultsVisible()");
     softly.assertAll();
+    ksqlDbList
+        .openDetailsTab(STREAMS)
+        .waitUntilScreenReady();
+    Assert.assertTrue(ksqlDbList.getStreamByName(DEFAULT_STREAM.getName()).isVisible(), "getStreamByName()");
   }
 
   @QaseId(276)
@@ -68,11 +73,31 @@ public class KsqlDbTest extends BaseTest {
     navigateToKsqlDbAndExecuteRequest(SHOW_TABLES.getQuery());
     SoftAssert softly = new SoftAssert();
     softly.assertTrue(ksqlQueryForm.areResultsVisible(), "areResultsVisible()");
-    softly.assertTrue(ksqlQueryForm.getItemByName(FIRST_TABLE.getName()).isVisible(), "getItemByName()");
+    softly.assertTrue(ksqlQueryForm.getItemByName(FIRST_TABLE.getName()).isVisible(),
-    softly.assertTrue(ksqlQueryForm.getItemByName(SECOND_TABLE.getName()).isVisible(), "getItemByName()");
+        String.format("getItemByName(%s)", FIRST_TABLE.getName()));
+    softly.assertTrue(ksqlQueryForm.getItemByName(SECOND_TABLE.getName()).isVisible(),
+        String.format("getItemByName(%s)", SECOND_TABLE.getName()));
     softly.assertAll();
   }
 
+  @QaseId(86)
+  @Test(priority = 4)
+  public void clearResultsForExecutedRequest() {
+    navigateToKsqlDbAndExecuteRequest(SHOW_TABLES.getQuery());
+    SoftAssert softly = new SoftAssert();
+    softly.assertTrue(ksqlQueryForm.areResultsVisible(), "areResultsVisible()");
+    softly.assertAll();
+    ksqlQueryForm
+        .clickClearResultsBtn();
+    softly.assertFalse(ksqlQueryForm.areResultsVisible(), "areResultsVisible()");
+    softly.assertAll();
+  }
+
+  @AfterClass(alwaysRun = true)
+  public void afterClass() {
+    TOPIC_NAMES_LIST.forEach(topicName -> apiService.deleteTopic(topicName));
+  }
+
   @Step
   private void navigateToKsqlDbAndExecuteRequest(String query) {
     naviSideBar
@@ -85,9 +110,4 @@ public class KsqlDbTest extends BaseTest {
         .setQuery(query)
         .clickExecuteBtn(query);
   }
-
-  @AfterClass(alwaysRun = true)
-  public void afterClass() {
-    TOPIC_NAMES_LIST.forEach(topicName -> apiService.deleteTopic(topicName));
-  }
 }

kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/smokesuite/topics/TopicsTest.java

@@ -486,11 +486,7 @@ public class TopicsTest extends BaseTest {
     topicDetails
         .waitUntilScreenReady();
     TOPIC_LIST.add(topicToCopy);
-    SoftAssert softly = new SoftAssert();
+    Assert.assertTrue(topicDetails.isTopicHeaderVisible(topicToCopy.getName()), "isTopicHeaderVisible()");
-    softly.assertTrue(topicDetails.isAlertWithMessageVisible(SUCCESS, "Topic successfully created."),
-        "isAlertWithMessageVisible()");
-    softly.assertTrue(topicDetails.isTopicHeaderVisible(topicToCopy.getName()), "isTopicHeaderVisible()");
-    softly.assertAll();
   }
 
   @AfterClass(alwaysRun = true)

kafka-ui-react-app/src/components/Connect/List/ActionsCell.tsx

@@ -1,26 +1,41 @@
 import React from 'react';
-import { FullConnectorInfo } from 'generated-sources';
+import {
+  Action,
+  ConnectorAction,
+  ConnectorState,
+  FullConnectorInfo,
+  ResourceType,
+} from 'generated-sources';
 import { CellContext } from '@tanstack/react-table';
 import { ClusterNameRoute } from 'lib/paths';
 import useAppParams from 'lib/hooks/useAppParams';
 import { Dropdown, DropdownItem } from 'components/common/Dropdown';
-import { useDeleteConnector } from 'lib/hooks/api/kafkaConnect';
+import {
+  useDeleteConnector,
+  useUpdateConnectorState,
+} from 'lib/hooks/api/kafkaConnect';
 import { useConfirm } from 'lib/hooks/useConfirm';
+import { useIsMutating } from '@tanstack/react-query';
+import { ActionDropdownItem } from 'components/common/ActionComponent';
 
 const ActionsCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
   row,
 }) => {
-  const { connect, name } = row.original;
+  const { connect, name, status } = row.original;
-
   const { clusterName } = useAppParams<ClusterNameRoute>();
-
+  const mutationsNumber = useIsMutating();
+  const isMutating = mutationsNumber > 0;
   const confirm = useConfirm();
   const deleteMutation = useDeleteConnector({
     clusterName,
     connectName: connect,
     connectorName: name,
   });
-
+  const stateMutation = useUpdateConnectorState({
+    clusterName,
+    connectName: connect,
+    connectorName: name,
+  });
   const handleDelete = () => {
     confirm(
       <>
@@ -31,8 +46,66 @@ const ActionsCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
       }
     );
   };
+  // const stateMutation = useUpdateConnectorState(routerProps);
+  const resumeConnectorHandler = () =>
+    stateMutation.mutateAsync(ConnectorAction.RESUME);
+  const restartConnectorHandler = () =>
+    stateMutation.mutateAsync(ConnectorAction.RESTART);
+
+  const restartAllTasksHandler = () =>
+    stateMutation.mutateAsync(ConnectorAction.RESTART_ALL_TASKS);
+
+  const restartFailedTasksHandler = () =>
+    stateMutation.mutateAsync(ConnectorAction.RESTART_FAILED_TASKS);
+
   return (
     <Dropdown>
+      {status.state === ConnectorState.PAUSED && (
+        <ActionDropdownItem
+          onClick={resumeConnectorHandler}
+          disabled={isMutating}
+          permission={{
+            resource: ResourceType.CONNECT,
+            action: Action.EDIT,
+            value: name,
+          }}
+        >
+          Resume
+        </ActionDropdownItem>
+      )}
+      <ActionDropdownItem
+        onClick={restartConnectorHandler}
+        disabled={isMutating}
+        permission={{
+          resource: ResourceType.CONNECT,
+          action: Action.EDIT,
+          value: name,
+        }}
+      >
+        Restart Connector
+      </ActionDropdownItem>
+      <ActionDropdownItem
+        onClick={restartAllTasksHandler}
+        disabled={isMutating}
+        permission={{
+          resource: ResourceType.CONNECT,
+          action: Action.EDIT,
+          value: name,
+        }}
+      >
+        Restart All Tasks
+      </ActionDropdownItem>
+      <ActionDropdownItem
+        onClick={restartFailedTasksHandler}
+        disabled={isMutating}
+        permission={{
+          resource: ResourceType.CONNECT,
+          action: Action.EDIT,
+          value: name,
+        }}
+      >
+        Restart Failed Tasks
+      </ActionDropdownItem>
       <DropdownItem onClick={handleDelete} danger>
         Remove Connector
       </DropdownItem>

kafka-ui-react-app/src/components/Connect/List/__tests__/List.spec.tsx

@@ -9,7 +9,11 @@ import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { render, WithRoute } from 'lib/testHelpers';
 import { clusterConnectConnectorPath, clusterConnectorsPath } from 'lib/paths';
-import { useConnectors, useDeleteConnector } from 'lib/hooks/api/kafkaConnect';
+import {
+  useConnectors,
+  useDeleteConnector,
+  useUpdateConnectorState,
+} from 'lib/hooks/api/kafkaConnect';
 
 const mockedUsedNavigate = jest.fn();
 const mockDelete = jest.fn();
@@ -22,6 +26,7 @@ jest.mock('react-router-dom', () => ({
 jest.mock('lib/hooks/api/kafkaConnect', () => ({
   useConnectors: jest.fn(),
   useDeleteConnector: jest.fn(),
+  useUpdateConnectorState: jest.fn(),
 }));
 
 const clusterName = 'local';
@@ -42,6 +47,10 @@ describe('Connectors List', () => {
       (useConnectors as jest.Mock).mockImplementation(() => ({
         data: connectors,
       }));
+      const restartConnector = jest.fn();
+      (useUpdateConnectorState as jest.Mock).mockImplementation(() => ({
+        mutateAsync: restartConnector,
+      }));
     });
 
     it('renders', async () => {

kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx

@@ -142,6 +142,8 @@ const Message: React.FC<Props> = ({
           timestampType={timestampType}
           keySize={keySize}
           contentSize={valueSize}
+          keySerde={keySerde}
+          valueSerde={valueSerde}
         />
       )}
     </>

kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx

@@ -3,7 +3,6 @@ import EditorViewer from 'components/common/EditorViewer/EditorViewer';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 import { SchemaType, TopicMessageTimestampTypeEnum } from 'generated-sources';
 import { formatTimestamp } from 'lib/dateTimeHelpers';
-import { useSearchParams } from 'react-router-dom';
 
 import * as S from './MessageContent.styled';
 
@@ -17,6 +16,8 @@ export interface MessageContentProps {
   timestampType?: TopicMessageTimestampTypeEnum;
   keySize?: number;
   contentSize?: number;
+  keySerde?: string;
+  valueSerde?: string;
 }
 
 const MessageContent: React.FC<MessageContentProps> = ({
@@ -27,12 +28,10 @@ const MessageContent: React.FC<MessageContentProps> = ({
   timestampType,
   keySize,
   contentSize,
+  keySerde,
+  valueSerde,
 }) => {
   const [activeTab, setActiveTab] = React.useState<Tab>('content');
-  const [searchParams] = useSearchParams();
-  const keyFormat = searchParams.get('keySerde') || '';
-  const valueFormat = searchParams.get('valueSerde') || '';
-
   const activeTabContent = () => {
     switch (activeTab) {
       case 'content':
@@ -110,7 +109,7 @@ const MessageContent: React.FC<MessageContentProps> = ({
             <S.Metadata>
               <S.MetadataLabel>Key Serde</S.MetadataLabel>
               <span>
-                <S.MetadataValue>{keyFormat}</S.MetadataValue>
+                <S.MetadataValue>{keySerde}</S.MetadataValue>
                 <S.MetadataMeta>
                   Size: <BytesFormatted value={keySize} />
                 </S.MetadataMeta>
@@ -120,7 +119,7 @@ const MessageContent: React.FC<MessageContentProps> = ({
             <S.Metadata>
               <S.MetadataLabel>Value Serde</S.MetadataLabel>
               <span>
-                <S.MetadataValue>{valueFormat}</S.MetadataValue>
+                <S.MetadataValue>{valueSerde}</S.MetadataValue>
                 <S.MetadataMeta>
                   Size: <BytesFormatted value={contentSize} />
                 </S.MetadataMeta>

kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/__tests__/MessageContent.spec.tsx

@@ -20,6 +20,8 @@ const setupWrapper = (props?: Partial<MessageContentProps>) => {
           headers={{ header: 'test' }}
           timestamp={new Date(0)}
           timestampType={TopicMessageTimestampTypeEnum.CREATE_TIME}
+          keySerde="SchemaRegistry"
+          valueSerde="Avro"
           {...props}
         />
       </tbody>
@@ -27,42 +29,20 @@ const setupWrapper = (props?: Partial<MessageContentProps>) => {
   );
 };
 
-const proto =
-  'syntax = "proto3";\npackage com.provectus;\n\nmessage TestProtoRecord {\n  string f1 = 1;\n  int32 f2 = 2;\n}\n';
-
 global.TextEncoder = TextEncoder;
 
-const searchParamsContentAVRO = new URLSearchParams({
-  keySerde: 'SchemaRegistry',
-  valueSerde: 'AVRO',
-  limit: '100',
-});
-
-const searchParamsContentJSON = new URLSearchParams({
-  keySerde: 'SchemaRegistry',
-  valueSerde: 'JSON',
-  limit: '100',
-});
-
-const searchParamsContentPROTOBUF = new URLSearchParams({
-  keySerde: 'SchemaRegistry',
-  valueSerde: 'PROTOBUF',
-  limit: '100',
-});
 describe('MessageContent screen', () => {
   beforeEach(() => {
-    render(setupWrapper(), {
+    render(setupWrapper());
-      initialEntries: [`/messages?${searchParamsContentAVRO}`],
-    });
   });
 
-  describe('renders', () => {
+  describe('Checking keySerde and valueSerde', () => {
-    it('key format in document', () => {
+    it('keySerde in document', () => {
       expect(screen.getByText('SchemaRegistry')).toBeInTheDocument();
     });
 
-    it('content format in document', () => {
+    it('valueSerde in document', () => {
-      expect(screen.getByText('AVRO')).toBeInTheDocument();
+      expect(screen.getByText('Avro')).toBeInTheDocument();
     });
   });
 
@@ -98,42 +78,3 @@ describe('MessageContent screen', () => {
     });
   });
 });
-
-describe('checking content type depend on message type', () => {
-  it('renders component with message having JSON type', () => {
-    render(
-      setupWrapper({
-        messageContent: '{"data": "test"}',
-      }),
-      { initialEntries: [`/messages?${searchParamsContentJSON}`] }
-    );
-    expect(screen.getByText('JSON')).toBeInTheDocument();
-  });
-  it('renders component with message having AVRO type', () => {
-    render(
-      setupWrapper({
-        messageContent: '{"data": "test"}',
-      }),
-      { initialEntries: [`/messages?${searchParamsContentAVRO}`] }
-    );
-    expect(screen.getByText('AVRO')).toBeInTheDocument();
-  });
-  it('renders component with message having PROTOBUF type', () => {
-    render(
-      setupWrapper({
-        messageContent: proto,
-      }),
-      { initialEntries: [`/messages?${searchParamsContentPROTOBUF}`] }
-    );
-    expect(screen.getByText('PROTOBUF')).toBeInTheDocument();
-  });
-  it('renders component with message having no type which is equal to having PROTOBUF type', () => {
-    render(
-      setupWrapper({
-        messageContent: '',
-      }),
-      { initialEntries: [`/messages?${searchParamsContentPROTOBUF}`] }
-    );
-    expect(screen.getByText('PROTOBUF')).toBeInTheDocument();
-  });
-});

kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.styled.tsx

@@ -8,15 +8,29 @@ export const Wrapper = styled.div`
 export const Columns = styled.div`
   margin: -0.75rem;
   margin-bottom: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  padding: 0.75rem;
+  gap: 8px;
 
   @media screen and (min-width: 769px) {
     display: flex;
   }
 `;
-
+export const Flex = styled.div`
-export const Column = styled.div`
+  display: flex;
-  flex-basis: 0;
+  flex-direction: row;
-  flex-grow: 1;
+  gap: 8px;
-  flex-shrink: 1;
+  @media screen and (max-width: 1200px) {
-  padding: 0.75rem;
+    flex-direction: column;
+  }
+`;
+export const FlexItem = styled.div`
+  width: 18rem;
+  @media screen and (max-width: 1450px) {
+    width: 50%;
+  }
+  @media screen and (max-width: 1200px) {
+    width: 100%;
+  }
 `;

kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx

@@ -4,6 +4,7 @@ import { RouteParamsClusterTopic } from 'lib/paths';
 import { Button } from 'components/common/Button/Button';
 import Editor from 'components/common/Editor/Editor';
 import Select, { SelectOption } from 'components/common/Select/Select';
+import Switch from 'components/common/Switch/Switch';
 import useAppParams from 'lib/hooks/useAppParams';
 import { showAlert } from 'lib/errorHandling';
 import { useSendMessage, useTopicDetails } from 'lib/hooks/api/topics';
@@ -26,9 +27,12 @@ interface FormType {
   partition: number;
   keySerde: string;
   valueSerde: string;
+  keepContents: boolean;
 }
 
-const SendMessage: React.FC<{ onSubmit: () => void }> = ({ onSubmit }) => {
+const SendMessage: React.FC<{ closeSidebar: () => void }> = ({
+  closeSidebar,
+}) => {
   const { clusterName, topicName } = useAppParams<RouteParamsClusterTopic>();
   const { data: topic } = useTopicDetails({ clusterName, topicName });
   const { data: serdes = {} } = useSerdes({
@@ -47,11 +51,13 @@ const SendMessage: React.FC<{ onSubmit: () => void }> = ({ onSubmit }) => {
     handleSubmit,
     formState: { isSubmitting },
     control,
+    setValue,
   } = useForm<FormType>({
     mode: 'onChange',
     defaultValues: {
       ...defaultValues,
       partition: Number(partitionOptions[0].value),
+      keepContents: false,
     },
   });
 
@@ -62,6 +68,7 @@ const SendMessage: React.FC<{ onSubmit: () => void }> = ({ onSubmit }) => {
     content,
     headers,
     partition,
+    keepContents,
   }: FormType) => {
     let errors: string[] = [];
 
@@ -110,7 +117,11 @@ const SendMessage: React.FC<{ onSubmit: () => void }> = ({ onSubmit }) => {
         keySerde,
         valueSerde,
       });
-      onSubmit();
+      if (!keepContents) {
+        setValue('key', '');
+        setValue('content', '');
+        closeSidebar();
+      }
     } catch (e) {
       // do nothing
     }
@@ -120,7 +131,7 @@ const SendMessage: React.FC<{ onSubmit: () => void }> = ({ onSubmit }) => {
     <S.Wrapper>
       <form onSubmit={handleSubmit(submit)}>
         <S.Columns>
-          <S.Column>
+          <S.FlexItem>
             <InputLabel>Partition</InputLabel>
             <Controller
               control={control}
@@ -137,47 +148,58 @@ const SendMessage: React.FC<{ onSubmit: () => void }> = ({ onSubmit }) => {
                 />
               )}
             />
-          </S.Column>
+          </S.FlexItem>
-          <S.Column>
+          <S.Flex>
-            <InputLabel>Key Serde</InputLabel>
+            <S.FlexItem>
+              <InputLabel>Key Serde</InputLabel>
+              <Controller
+                control={control}
+                name="keySerde"
+                render={({ field: { name, onChange, value } }) => (
+                  <Select
+                    id="selectKeySerdeOptions"
+                    aria-labelledby="selectKeySerdeOptions"
+                    name={name}
+                    onChange={onChange}
+                    minWidth="100%"
+                    options={getSerdeOptions(serdes.key || [])}
+                    value={value}
+                  />
+                )}
+              />
+            </S.FlexItem>
+            <S.FlexItem>
+              <InputLabel>Value Serde</InputLabel>
+              <Controller
+                control={control}
+                name="valueSerde"
+                render={({ field: { name, onChange, value } }) => (
+                  <Select
+                    id="selectValueSerdeOptions"
+                    aria-labelledby="selectValueSerdeOptions"
+                    name={name}
+                    onChange={onChange}
+                    minWidth="100%"
+                    options={getSerdeOptions(serdes.value || [])}
+                    value={value}
+                  />
+                )}
+              />
+            </S.FlexItem>
+          </S.Flex>
+          <div>
             <Controller
               control={control}
-              name="keySerde"
+              name="keepContents"
               render={({ field: { name, onChange, value } }) => (
-                <Select
+                <Switch name={name} onChange={onChange} checked={value} />
-                  id="selectKeySerdeOptions"
-                  aria-labelledby="selectKeySerdeOptions"
-                  name={name}
-                  onChange={onChange}
-                  minWidth="100%"
-                  options={getSerdeOptions(serdes.key || [])}
-                  value={value}
-                />
               )}
             />
-          </S.Column>
+            <InputLabel>Keep contents</InputLabel>
-          <S.Column>
+          </div>
-            <InputLabel>Value Serde</InputLabel>
-            <Controller
-              control={control}
-              name="valueSerde"
-              render={({ field: { name, onChange, value } }) => (
-                <Select
-                  id="selectValueSerdeOptions"
-                  aria-labelledby="selectValueSerdeOptions"
-                  name={name}
-                  onChange={onChange}
-                  minWidth="100%"
-                  options={getSerdeOptions(serdes.value || [])}
-                  value={value}
-                />
-              )}
-            />
-          </S.Column>
         </S.Columns>
-
         <S.Columns>
-          <S.Column>
+          <div>
             <InputLabel>Key</InputLabel>
             <Controller
               control={control}
@@ -191,8 +213,8 @@ const SendMessage: React.FC<{ onSubmit: () => void }> = ({ onSubmit }) => {
                 />
               )}
             />
-          </S.Column>
+          </div>
-          <S.Column>
+          <div>
             <InputLabel>Value</InputLabel>
             <Controller
               control={control}
@@ -206,10 +228,10 @@ const SendMessage: React.FC<{ onSubmit: () => void }> = ({ onSubmit }) => {
                 />
               )}
             />
-          </S.Column>
+          </div>
         </S.Columns>
         <S.Columns>
-          <S.Column>
+          <div>
             <InputLabel>Headers</InputLabel>
             <Controller
               control={control}
@@ -224,7 +246,7 @@ const SendMessage: React.FC<{ onSubmit: () => void }> = ({ onSubmit }) => {
                 />
               )}
             />
-          </S.Column>
+          </div>
         </S.Columns>
         <Button
           buttonSize="M"

kafka-ui-react-app/src/components/Topics/Topic/SendMessage/__test__/SendMessage.spec.tsx

@@ -49,7 +49,7 @@ const renderComponent = async () => {
   const path = clusterTopicPath(clusterName, topicName);
   await render(
     <WithRoute path={clusterTopicPath()}>
-      <SendMessage onSubmit={mockOnSubmit} />
+      <SendMessage closeSidebar={mockOnSubmit} />
     </WithRoute>,
     { initialEntries: [path] }
   );

kafka-ui-react-app/src/components/Topics/Topic/Topic.tsx

@@ -59,7 +59,7 @@ const Topic: React.FC = () => {
 
   const deleteTopicHandler = async () => {
     await deleteTopic.mutateAsync(topicName);
-    navigate('../..');
+    navigate(clusterTopicsPath(clusterName));
   };
 
   React.useEffect(() => {
@@ -236,7 +236,7 @@ const Topic: React.FC = () => {
         title="Produce Message"
       >
         <Suspense fallback={<PageLoader />}>
-          <SendMessage onSubmit={closeSidebar} />
+          <SendMessage closeSidebar={closeSidebar} />
         </Suspense>
       </SlidingSidebar>
     </>

kafka-ui-react-app/src/components/Topics/Topic/__test__/Topic.spec.tsx

@@ -10,6 +10,7 @@ import {
   clusterTopicMessagesPath,
   clusterTopicPath,
   clusterTopicSettingsPath,
+  clusterTopicsPath,
   clusterTopicStatisticsPath,
   getNonExactPath,
 } from 'lib/paths';
@@ -179,7 +180,9 @@ describe('Details', () => {
         name: 'Confirm',
       });
       await userEvent.click(submitDeleteButton);
-      expect(mockNavigate).toHaveBeenCalledWith('../..');
+      expect(mockNavigate).toHaveBeenCalledWith(
+        clusterTopicsPath(mockClusterName)
+      );
     });
 
     it('shows a confirmation popup on deleting topic messages', async () => {

kafka-ui-react-app/src/components/Version/Version.tsx

@@ -1,52 +1,38 @@
 import React from 'react';
 import WarningIcon from 'components/common/Icons/WarningIcon';
 import { gitCommitPath } from 'lib/paths';
-import { useActuatorInfo } from 'lib/hooks/api/actuatorInfo';
-import { BUILD_VERSION_PATTERN } from 'lib/constants';
 import { useLatestVersion } from 'lib/hooks/api/latestVersion';
 import { formatTimestamp } from 'lib/dateTimeHelpers';
 
 import * as S from './Version.styled';
-import compareVersions from './compareVersions';
 
 const Version: React.FC = () => {
-  const { data: actuatorInfo = {} } = useActuatorInfo();
   const { data: latestVersionInfo = {} } = useLatestVersion();
-
+  const { buildTime, commitId, isLatestRelease } = latestVersionInfo.build;
-  const tag = actuatorInfo?.build?.version;
+  const { versionTag } = latestVersionInfo?.latestRelease || '';
-  const commit = actuatorInfo?.git?.commit.id;
-  const { tag_name: latestTag } = latestVersionInfo;
-
-  const outdated = compareVersions(tag, latestTag);
-
-  const currentVersion = tag?.match(BUILD_VERSION_PATTERN)
-    ? tag
-    : formatTimestamp(actuatorInfo?.build?.time);
-
-  if (!tag) return null;
 
   return (
     <S.Wrapper>
-      {!!outdated && (
+      {!isLatestRelease && (
         <S.OutdatedWarning
-          title={`Your app version is outdated. Current latest version is ${latestTag}`}
+          title={`Your app version is outdated. Current latest version is ${versionTag}`}
         >
           <WarningIcon />
         </S.OutdatedWarning>
       )}
 
-      {commit && (
+      {commitId && (
         <div>
           <S.CurrentCommitLink
             title="Current commit"
             target="__blank"
-            href={gitCommitPath(commit)}
+            href={gitCommitPath(commitId)}
           >
-            {commit}
+            {commitId}
           </S.CurrentCommitLink>
         </div>
       )}
-      <S.CurrentVersion>{currentVersion}</S.CurrentVersion>
+      <S.CurrentVersion>{formatTimestamp(buildTime)}</S.CurrentVersion>
     </S.Wrapper>
   );
 };

kafka-ui-react-app/src/components/Version/__tests__/Version.spec.tsx

@@ -2,87 +2,40 @@ import React from 'react';
 import { screen } from '@testing-library/dom';
 import Version from 'components/Version/Version';
 import { render } from 'lib/testHelpers';
-import { formatTimestamp } from 'lib/dateTimeHelpers';
-import { useActuatorInfo } from 'lib/hooks/api/actuatorInfo';
 import { useLatestVersion } from 'lib/hooks/api/latestVersion';
-import { actuatorInfoPayload } from 'lib/fixtures/actuatorInfo';
+import {
-import { latestVersionPayload } from 'lib/fixtures/latestVersion';
+  deprecatedVersionPayload,
+  latestVersionPayload,
+} from 'lib/fixtures/latestVersion';
 
-jest.mock('lib/hooks/api/actuatorInfo', () => ({
-  useActuatorInfo: jest.fn(),
-}));
 jest.mock('lib/hooks/api/latestVersion', () => ({
   useLatestVersion: jest.fn(),
 }));
-
 describe('Version Component', () => {
-  const versionTag = 'v0.5.0';
+  const commitId = '96a577a';
-  const snapshotTag = 'test-SNAPSHOT';
-  const commitTag = 'befd3b328e2c9c7df57b0c5746561b2f7fee8813';
 
-  const actuatorVersionPayload = actuatorInfoPayload(versionTag);
+  describe('render latest version', () => {
-  const formattedTimestamp = formatTimestamp(actuatorVersionPayload.build.time);
+    beforeEach(() => {
+      (useLatestVersion as jest.Mock).mockImplementation(() => ({
+        data: latestVersionPayload,
+      }));
+    });
+    it('renders latest release version as current version', async () => {
+      render(<Version />);
+      expect(screen.getByText(commitId)).toBeInTheDocument();
+    });
 
-  beforeEach(() => {
+    it('should not show warning icon if it is last release', async () => {
-    (useActuatorInfo as jest.Mock).mockImplementation(() => ({
+      render(<Version />);
-      data: actuatorVersionPayload,
+      expect(screen.queryByRole('img')).not.toBeInTheDocument();
-    }));
+    });
+  });
+
+  it('show warning icon if it is not last release', async () => {
     (useLatestVersion as jest.Mock).mockImplementation(() => ({
-      data: latestVersionPayload,
+      data: deprecatedVersionPayload,
     }));
-  });
+    render(<Version />);
-
+    expect(screen.getByRole('img')).toBeInTheDocument();
-  describe('tag does not exist', () => {
-    it('does not render component', async () => {
-      (useActuatorInfo as jest.Mock).mockImplementation(() => ({
-        data: null,
-      }));
-      const { container } = render(<Version />);
-      expect(container.firstChild).toBeEmptyDOMElement();
-    });
-  });
-
-  describe('renders current version', () => {
-    it('renders release build version as current version', async () => {
-      render(<Version />);
-      expect(screen.getByText(versionTag)).toBeInTheDocument();
-    });
-    it('renders formatted timestamp as current version when version is commit', async () => {
-      (useActuatorInfo as jest.Mock).mockImplementation(() => ({
-        data: actuatorInfoPayload(commitTag),
-      }));
-      render(<Version />);
-      expect(screen.getByText(formattedTimestamp)).toBeInTheDocument();
-    });
-    it('renders formatted timestamp as current version when version contains -SNAPSHOT', async () => {
-      (useActuatorInfo as jest.Mock).mockImplementation(() => ({
-        data: actuatorInfoPayload(snapshotTag),
-      }));
-      render(<Version />);
-      expect(screen.getByText(formattedTimestamp)).toBeInTheDocument();
-    });
-  });
-
-  describe('outdated build version', () => {
-    it('renders warning message', async () => {
-      (useActuatorInfo as jest.Mock).mockImplementation(() => ({
-        data: actuatorInfoPayload('v0.3.0'),
-      }));
-      render(<Version />);
-      expect(
-        screen.getByTitle(
-          `Your app version is outdated. Current latest version is ${latestVersionPayload.tag_name}`
-        )
-      ).toBeInTheDocument();
-    });
-  });
-
-  describe('current commit id with link', () => {
-    it('renders', async () => {
-      render(<Version />);
-      expect(
-        screen.getByText(actuatorVersionPayload.git.commit.id)
-      ).toBeInTheDocument();
-    });
   });
 });

kafka-ui-react-app/src/components/common/Dropdown/Dropdown.styled.ts

@@ -70,7 +70,7 @@ export const DropdownButton = styled.button`
 `;
 
 export const DangerItem = styled.div`
-  color: ${({ theme: { dropdown } }) => dropdown.item.color.normal};
+  color: ${({ theme: { dropdown } }) => dropdown.item.color.danger};
 `;
 
 export const DropdownItemHint = styled.div`

kafka-ui-react-app/src/components/common/Icons/WarningIcon.tsx

@@ -13,6 +13,7 @@ const WarningIcon: React.FC = () => {
   return (
     <WarningIconContainer>
       <svg
+        role="img"
         width="14"
         height="13"
         viewBox="0 0 14 13"

kafka-ui-react-app/src/components/common/SlidingSidebar/SlidingSidebar.styled.ts

@@ -6,7 +6,7 @@ export const Wrapper = styled.div<{ $open?: boolean }>(
   position: fixed;
   top: ${theme.layout.navBarHeight};
   bottom: 0;
-  width: 60vw;
+  width: 37vw;
   right: calc(${$open ? '0px' : theme.layout.rightSidebarWidth} * -1);
   box-shadow: -1px 0px 10px 0px rgba(0, 0, 0, 0.2);
   transition: right 0.3s linear;

kafka-ui-react-app/src/lib/fixtures/actuatorInfo.ts

@@ -1,12 +0,0 @@
-export const actuatorInfoPayload = (
-  version = 'befd3b328e2c9c7df57b0c5746561b2f7fee8813'
-) => ({
-  git: { commit: { id: 'befd3b3' } },
-  build: {
-    artifact: 'kafka-ui-api',
-    name: 'kafka-ui-api',
-    time: '2022-09-15T09:52:21.753Z',
-    version,
-    group: 'com.provectus',
-  },
-});

kafka-ui-react-app/src/lib/fixtures/latestVersion.ts

@@ -1,3 +1,16 @@
-export const latestVersionPayload = {
+export const deprecatedVersionPayload = {
-  tag_name: 'v0.4.0',
+  build: {
+    buildTime: '2023-04-14T09:47:35.463Z',
+    commitId: '96a577a',
+    isLatestRelease: false,
+    version: '96a577a98c6069376c5d22ed49cffd3739f1bbdc',
+  },
+};
+export const latestVersionPayload = {
+  build: {
+    buildTime: '2023-04-14T09:47:35.463Z',
+    commitId: '96a577a',
+    isLatestRelease: true,
+    version: '96a577a98c6069376c5d22ed49cffd3739f1bbdc',
+  },
 };

kafka-ui-react-app/src/lib/hooks/api/__tests__/actuatorInfo.spec.ts

@@ -1,17 +0,0 @@
-import fetchMock from 'fetch-mock';
-import * as hooks from 'lib/hooks/api/actuatorInfo';
-import { expectQueryWorks, renderQueryHook } from 'lib/testHelpers';
-import { actuatorInfoPayload } from 'lib/fixtures/actuatorInfo';
-
-const actuatorInfoPath = '/actuator/info';
-
-describe('Actuator info hooks', () => {
-  beforeEach(() => fetchMock.restore());
-  describe('useActuatorInfo', () => {
-    it('returns the correct data', async () => {
-      const mock = fetchMock.getOnce(actuatorInfoPath, actuatorInfoPayload());
-      const { result } = renderQueryHook(() => hooks.useActuatorInfo());
-      await expectQueryWorks(mock, result);
-    });
-  });
-});

kafka-ui-react-app/src/lib/hooks/api/__tests__/latestVersion.spec.ts

@@ -1,18 +1,16 @@
 import fetchMock from 'fetch-mock';
 import { expectQueryWorks, renderQueryHook } from 'lib/testHelpers';
-import * as hooks from 'lib/hooks/api/latestVersion';
-import { GIT_REPO_LATEST_RELEASE_LINK } from 'lib/constants';
 import { latestVersionPayload } from 'lib/fixtures/latestVersion';
+import { useLatestVersion } from 'lib/hooks/api/latestVersion';
+
+const latestVersionPath = '/api/info';
 
 describe('Latest version hooks', () => {
   beforeEach(() => fetchMock.restore());
   describe('useLatestVersion', () => {
     it('returns the correct data', async () => {
-      const mock = fetchMock.getOnce(
+      const mock = fetchMock.getOnce(latestVersionPath, latestVersionPayload);
-        GIT_REPO_LATEST_RELEASE_LINK,
+      const { result } = renderQueryHook(() => useLatestVersion());
-        latestVersionPayload
-      );
-      const { result } = renderQueryHook(() => hooks.useLatestVersion());
       await expectQueryWorks(mock, result);
     });
   });

kafka-ui-react-app/src/lib/hooks/api/actuatorInfo.ts

@@ -1,19 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { BASE_PARAMS, QUERY_REFETCH_OFF_OPTIONS } from 'lib/constants';
-
-const fetchActuatorInfo = async () => {
-  const data = await fetch(
-    `${BASE_PARAMS.basePath}/actuator/info`,
-    BASE_PARAMS
-  ).then((res) => res.json());
-
-  return data;
-};
-
-export function useActuatorInfo() {
-  return useQuery(
-    ['actuatorInfo'],
-    fetchActuatorInfo,
-    QUERY_REFETCH_OFF_OPTIONS
-  );
-}

kafka-ui-react-app/src/lib/hooks/api/kafkaConnect.ts

@@ -76,7 +76,8 @@ export function useUpdateConnectorState(props: UseConnectorProps) {
   return useMutation(
     (action: ConnectorAction) => api.updateConnectorState({ ...props, action }),
     {
-      onSuccess: () => client.invalidateQueries(connectorKey(props)),
+      onSuccess: () =>
+        client.invalidateQueries(['clusters', props.clusterName, 'connectors']),
     }
   );
 }

kafka-ui-react-app/src/lib/hooks/api/latestVersion.ts

@@ -1,21 +1,19 @@
 import { useQuery } from '@tanstack/react-query';
-import {
+import { BASE_PARAMS, QUERY_REFETCH_OFF_OPTIONS } from 'lib/constants';
-  QUERY_REFETCH_OFF_OPTIONS,
-  GIT_REPO_LATEST_RELEASE_LINK,
-} from 'lib/constants';
 
-const fetchLatestVersion = async () => {
+const fetchLatestVersionInfo = async () => {
-  const data = await fetch(GIT_REPO_LATEST_RELEASE_LINK).then((res) =>
+  const data = await fetch(
-    res.json()
+    `${BASE_PARAMS.basePath}/api/info`,
-  );
+    BASE_PARAMS
+  ).then((res) => res.json());
 
   return data;
 };
 
 export function useLatestVersion() {
   return useQuery(
-    ['latestVersion'],
+    ['versionInfo'],
-    fetchLatestVersion,
+    fetchLatestVersionInfo,
     QUERY_REFETCH_OFF_OPTIONS
   );
 }

kafka-ui-react-app/src/lib/hooks/api/topics.ts

@@ -122,9 +122,6 @@ export function useCreateTopicMutation(clusterName: ClusterName) {
       }),
     {
       onSuccess: () => {
-        showSuccessAlert({
-          message: `Topic successfully created.`,
-        });
         client.invalidateQueries(topicKeys.all(clusterName));
       },
     }

pom.xml

@@ -40,6 +40,7 @@
         <kafka-ui-serde-api.version>1.0.0</kafka-ui-serde-api.version>
         <odd-oddrn-generator.version>0.1.15</odd-oddrn-generator.version>
         <odd-oddrn-client.version>0.1.23</odd-oddrn-client.version>
+        <org.json.version>20230227</org.json.version>
 
         <!-- Test dependency versions -->
         <junit.version>5.9.1</junit.version>