Merge branch 'master' into bulk-connectors-ops

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,11 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Official documentation
+    url: https://docs.kafka-ui.provectus.io/
+    about: Before reaching out for support, please refer to our documentation. Read "FAQ" and "Common problems", also try using search there.
+  - name: Community Discord
+    url: https://discord.gg/4DWzD7pGE5
+    about: Chat with other users, get some support or ask questions.
+  - name: GitHub Discussions
+    url: https://github.com/provectus/kafka-ui/discussions
+    about: An alternative place to ask questions or to get some support.

.github/ISSUE_TEMPLATE/question.md

@@ -1,16 +0,0 @@
----
-name: "❓ Question"
-about: Ask a question
-title: ''
-
----
-
-<!--
-
-To ask a question, please either:
-1. Open up a discussion (https://github.com/provectus/kafka-ui/discussions)
-2. Join us on discord (https://discord.gg/4DWzD7pGE5) and ask there.
-
-Don't forget to check/search for existing issues/discussions.
-
--->

SECURITY.md

@@ -6,8 +6,9 @@ Following versions of the project are currently being supported with security up
 
 | Version | Supported          |
 | ------- | ------------------ |
-| 0.5.x   | :white_check_mark: |
-| 0.4.x   | :x: |
+| 0.6.x   | :white_check_mark: |
+| 0.5.x   | :x:                |
+| 0.4.x   | :x:                |
 | 0.3.x   | :x:                |
 | 0.2.x   | :x:                |
 | 0.1.x   | :x:                |

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/BasePage.java

@@ -37,9 +37,13 @@ public abstract class BasePage extends WebUtils {
   protected String pageTitleFromHeader = "//h1[text()='%s']";
   protected String pagePathFromHeader = "//a[text()='%s']/../h1";
 
+  protected boolean isSpinnerVisible(int... timeoutInSeconds) {
+    return isVisible(loadingSpinner, timeoutInSeconds);
+  }
+
   protected void waitUntilSpinnerDisappear(int... timeoutInSeconds) {
     log.debug("\nwaitUntilSpinnerDisappear");
-    if (isVisible(loadingSpinner, timeoutInSeconds)) {
+    if (isSpinnerVisible(timeoutInSeconds)) {
       loadingSpinner.shouldBe(Condition.disappear, Duration.ofSeconds(60));
     }
   }

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/ksqldb/KsqlDbList.java

@@ -1,5 +1,6 @@
 package com.provectus.kafka.ui.pages.ksqldb;
 
+import static com.codeborne.selenide.Condition.visible;
 import static com.codeborne.selenide.Selenide.$;
 import static com.codeborne.selenide.Selenide.$x;
 import static com.provectus.kafka.ui.pages.panels.enums.MenuItem.KSQL_DB;
@@ -10,12 +11,12 @@ import com.codeborne.selenide.SelenideElement;
 import com.provectus.kafka.ui.pages.BasePage;
 import com.provectus.kafka.ui.pages.ksqldb.enums.KsqlMenuTabs;
 import io.qameta.allure.Step;
+import java.time.Duration;
 import java.util.ArrayList;
 import java.util.List;
 import org.openqa.selenium.By;
 
 public class KsqlDbList extends BasePage {
-
   protected SelenideElement executeKsqlBtn = $x("//button[text()='Execute KSQL Request']");
   protected SelenideElement tablesTab = $x("//nav[@role='navigation']/a[text()='Tables']");
   protected SelenideElement streamsTab = $x("//nav[@role='navigation']/a[text()='Streams']");
@@ -76,9 +77,24 @@ public class KsqlDbList extends BasePage {
       this.element = element;
     }
 
+    private SelenideElement getNameElm() {
+      return element.$x("./td[1]");
+    }
+
     @Step
     public String getTableName() {
-      return element.$x("./td[1]").getText().trim();
+      return getNameElm().getText().trim();
+    }
+
+    @Step
+    public boolean isVisible() {
+      boolean isVisible = false;
+      try {
+        getNameElm().shouldBe(visible, Duration.ofMillis(500));
+        isVisible = true;
+      } catch (Throwable ignored) {
+      }
+      return isVisible;
     }
 
     @Step
@@ -110,9 +126,24 @@ public class KsqlDbList extends BasePage {
       this.element = element;
     }
 
+    private SelenideElement getNameElm() {
+      return element.$x("./td[1]");
+    }
+
     @Step
     public String getStreamName() {
-      return element.$x("./td[1]").getText().trim();
+      return getNameElm().getText().trim();
+    }
+
+    @Step
+    public boolean isVisible() {
+      boolean isVisible = false;
+      try {
+        getNameElm().shouldBe(visible, Duration.ofMillis(500));
+        isVisible = true;
+      } catch (Throwable ignored) {
+      }
+      return isVisible;
     }
 
     @Step

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/ksqldb/KsqlQueryForm.java

@@ -40,9 +40,14 @@ public class KsqlQueryForm extends BasePage {
   }
 
   @Step
-  public KsqlQueryForm clickExecuteBtn() {
+  public String getEnteredQuery() {
+    return queryAreaValue.getText().trim();
+  }
+
+  @Step
+  public KsqlQueryForm clickExecuteBtn(String query) {
     clickByActions(executeBtn);
-    if (queryAreaValue.getText().contains("EMIT CHANGES;")) {
+    if (query.contains("EMIT CHANGES")) {
       loadingSpinner.shouldBe(Condition.visible);
     } else {
       waitUntilSpinnerDisappear();
@@ -66,19 +71,19 @@ public class KsqlQueryForm extends BasePage {
 
   @Step
   public KsqlQueryForm clickAddStreamProperty() {
-    clickByJavaScript(addStreamPropertyBtn);
+    clickByActions(addStreamPropertyBtn);
     return this;
   }
 
   @Step
   public KsqlQueryForm setQuery(String query) {
     queryAreaValue.shouldBe(Condition.visible).click();
-    queryArea.setValue(query);
+    sendKeysByActions(queryArea, query);
     return this;
   }
 
   @Step
-  public KsqlQueryForm.KsqlResponseGridItem getTableByName(String name) {
+  public KsqlQueryForm.KsqlResponseGridItem getItemByName(String name) {
     return initItems().stream()
         .filter(e -> e.getName().equalsIgnoreCase(name))
         .findFirst().orElseThrow();
@@ -114,16 +119,20 @@ public class KsqlQueryForm extends BasePage {
       return element.$x("./td[1]").getText().trim();
     }
 
+    private SelenideElement getNameElm() {
+      return element.$x("./td[2]");
+    }
+
     @Step
     public String getName() {
-      return element.$x("./td[2]").scrollTo().getText().trim();
+      return getNameElm().scrollTo().getText().trim();
     }
 
     @Step
     public boolean isVisible() {
       boolean isVisible = false;
       try {
-        element.$x("./td[2]").shouldBe(visible, Duration.ofMillis(500));
+        getNameElm().shouldBe(visible, Duration.ofMillis(500));
         isVisible = true;
       } catch (Throwable ignored) {
       }

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/utilities/WebUtils.java

@@ -95,7 +95,7 @@ public class WebUtils {
     return isSelected;
   }
 
-  public static boolean selectElement(SelenideElement element, boolean select) {
+  public static void selectElement(SelenideElement element, boolean select) {
     if (select) {
       if (!element.isSelected()) {
         clickByJavaScript(element);
@@ -105,6 +105,5 @@ public class WebUtils {
         clickByJavaScript(element);
       }
     }
-    return true;
   }
 }

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

@@ -20,59 +20,52 @@ public class SmokeBacklog extends BaseManualTest {
   public void testCaseA() {
   }
 
-  @Automation(state = TO_BE_AUTOMATED)
-  @Suite(id = KSQL_DB_SUITE_ID)
-  @QaseId(276)
-  @Test
-  public void testCaseB() {
-  }
-
   @Automation(state = TO_BE_AUTOMATED)
   @Suite(id = KSQL_DB_SUITE_ID)
   @QaseId(277)
   @Test
-  public void testCaseC() {
+  public void testCaseB() {
   }
 
   @Automation(state = TO_BE_AUTOMATED)
   @Suite(id = KSQL_DB_SUITE_ID)
   @QaseId(278)
   @Test
-  public void testCaseD() {
+  public void testCaseC() {
   }
 
   @Automation(state = TO_BE_AUTOMATED)
   @Suite(id = KSQL_DB_SUITE_ID)
   @QaseId(284)
   @Test
-  public void testCaseE() {
+  public void testCaseD() {
   }
 
   @Automation(state = TO_BE_AUTOMATED)
   @Suite(id = BROKERS_SUITE_ID)
   @QaseId(331)
   @Test
-  public void testCaseF() {
+  public void testCaseE() {
   }
 
   @Automation(state = TO_BE_AUTOMATED)
   @Suite(id = BROKERS_SUITE_ID)
   @QaseId(332)
   @Test
-  public void testCaseG() {
+  public void testCaseF() {
   }
 
   @Automation(state = TO_BE_AUTOMATED)
   @Suite(id = TOPICS_PROFILE_SUITE_ID)
   @QaseId(335)
   @Test
-  public void testCaseH() {
+  public void testCaseG() {
   }
 
   @Automation(state = TO_BE_AUTOMATED)
   @Suite(id = TOPICS_PROFILE_SUITE_ID)
   @QaseId(336)
   @Test
-  public void testCaseI() {
+  public void testCaseH() {
   }
 }

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

@@ -1,14 +1,17 @@
 package com.provectus.kafka.ui.smokesuite.ksqldb;
 
 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;
 
 import com.provectus.kafka.ui.BaseTest;
 import com.provectus.kafka.ui.pages.ksqldb.models.Stream;
 import com.provectus.kafka.ui.pages.ksqldb.models.Table;
+import io.qameta.allure.Step;
 import io.qase.api.annotation.QaseId;
 import java.util.ArrayList;
 import java.util.List;
+import org.testng.Assert;
 import org.testng.annotations.AfterClass;
 import org.testng.annotations.BeforeClass;
 import org.testng.annotations.Test;
@@ -16,60 +19,71 @@ import org.testng.asserts.SoftAssert;
 
 public class KsqlDbTest extends BaseTest {
 
-  private static final Stream STREAM_FOR_CHECK_TABLES = new Stream()
-      .setName("STREAM_FOR_CHECK_TABLES_" + randomAlphabetic(4).toUpperCase())
-      .setTopicName("TOPIC_FOR_STREAM_" + randomAlphabetic(4).toUpperCase());
+  private static final Stream DEFAULT_STREAM = new Stream()
+      .setName("DEFAULT_STREAM_" + randomAlphabetic(4).toUpperCase())
+      .setTopicName("DEFAULT_TOPIC_" + randomAlphabetic(4).toUpperCase());
   private static final Table FIRST_TABLE = new Table()
-      .setName("FIRST_TABLE" + randomAlphabetic(4).toUpperCase())
-      .setStreamName(STREAM_FOR_CHECK_TABLES.getName());
+      .setName("FIRST_TABLE_" + randomAlphabetic(4).toUpperCase())
+      .setStreamName(DEFAULT_STREAM.getName());
   private static final Table SECOND_TABLE = new Table()
-      .setName("SECOND_TABLE" + randomAlphabetic(4).toUpperCase())
-      .setStreamName(STREAM_FOR_CHECK_TABLES.getName());
+      .setName("SECOND_TABLE_" + randomAlphabetic(4).toUpperCase())
+      .setStreamName(DEFAULT_STREAM.getName());
   private static final List<String> TOPIC_NAMES_LIST = new ArrayList<>();
 
   @BeforeClass(alwaysRun = true)
   public void beforeClass() {
     apiService
-        .createStream(STREAM_FOR_CHECK_TABLES)
+        .createStream(DEFAULT_STREAM)
         .createTables(FIRST_TABLE, SECOND_TABLE);
-    TOPIC_NAMES_LIST.addAll(List.of(STREAM_FOR_CHECK_TABLES.getTopicName(),
+    TOPIC_NAMES_LIST.addAll(List.of(DEFAULT_STREAM.getTopicName(),
         FIRST_TABLE.getName(), SECOND_TABLE.getName()));
   }
 
-  @QaseId(41)
+  @QaseId(86)
   @Test(priority = 1)
-  public void checkShowTablesRequestExecution() {
-    navigateToKsqlDb();
-    ksqlDbList
-        .clickExecuteKsqlRequestBtn();
-    ksqlQueryForm
-        .waitUntilScreenReady()
-        .setQuery(SHOW_TABLES.getQuery())
-        .clickExecuteBtn();
+  public void clearResultsForExecutedRequest() {
+    navigateToKsqlDbAndExecuteRequest(SHOW_TABLES.getQuery());
     SoftAssert softly = new SoftAssert();
     softly.assertTrue(ksqlQueryForm.areResultsVisible(), "areResultsVisible()");
-    softly.assertTrue(ksqlQueryForm.getTableByName(FIRST_TABLE.getName()).isVisible(), "getTableName()");
-    softly.assertTrue(ksqlQueryForm.getTableByName(SECOND_TABLE.getName()).isVisible(), "getTableName()");
+    softly.assertAll();
+    ksqlQueryForm
+        .clickClearResultsBtn();
+    softly.assertFalse(ksqlQueryForm.areResultsVisible(), "areResultsVisible()");
     softly.assertAll();
   }
 
-  @QaseId(86)
+  @QaseId(276)
   @Test(priority = 2)
-  public void clearResultsForExecutedRequest() {
-    navigateToKsqlDb();
-    ksqlDbList
-        .clickExecuteKsqlRequestBtn();
+  public void clearEnteredQueryCheck() {
+    navigateToKsqlDbAndExecuteRequest(SHOW_TABLES.getQuery());
+    Assert.assertFalse(ksqlQueryForm.getEnteredQuery().isEmpty(), "getEnteredQuery()");
     ksqlQueryForm
-        .waitUntilScreenReady()
-        .setQuery(SHOW_TABLES.getQuery())
-        .clickExecuteBtn();
+        .clickClearBtn();
+    Assert.assertTrue(ksqlQueryForm.getEnteredQuery().isEmpty(), "getEnteredQuery()");
+  }
+
+  @QaseId(41)
+  @Test(priority = 3)
+  public void checkShowTablesRequestExecution() {
+    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(SECOND_TABLE.getName()).isVisible(), "getItemByName()");
     softly.assertAll();
+  }
+
+  @Step
+  private void navigateToKsqlDbAndExecuteRequest(String query) {
+    naviSideBar
+        .openSideMenu(KSQL_DB);
+    ksqlDbList
+        .waitUntilScreenReady()
+        .clickExecuteKsqlRequestBtn();
     ksqlQueryForm
-        .clickClearResultsBtn();
-    softly.assertFalse(ksqlQueryForm.areResultsVisible(), "areResultsVisible()");
-    softly.assertAll();
+        .waitUntilScreenReady()
+        .setQuery(query)
+        .clickExecuteBtn(query);
   }
 
   @AfterClass(alwaysRun = true)

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

@@ -8,7 +8,6 @@ import static org.apache.commons.lang3.RandomStringUtils.randomAlphabetic;
 
 import com.provectus.kafka.ui.BaseTest;
 import com.provectus.kafka.ui.models.Topic;
-import com.provectus.kafka.ui.pages.topics.TopicDetails;
 import io.qameta.allure.Issue;
 import io.qameta.allure.Step;
 import io.qase.api.annotation.QaseId;
@@ -140,24 +139,22 @@ public class MessagesTest extends BaseTest {
     softly.assertAll();
   }
 
-  @Ignore
-  @Issue("https://github.com/provectus/kafka-ui/issues/2394")
   @QaseId(15)
   @Test(priority = 6)
   public void checkMessageFilteringByOffset() {
     navigateToTopicsAndOpenDetails(TOPIC_FOR_CHECK_FILTERS.getName());
-    topicDetails
-        .openDetailsTab(MESSAGES);
-    TopicDetails.MessageGridItem secondMessage = topicDetails.getMessageByOffset(1);
+    int nextOffset = topicDetails
+        .openDetailsTab(MESSAGES)
+        .getAllMessages().stream()
+        .findFirst().orElseThrow().getOffset() + 1;
     topicDetails
         .selectSeekTypeDdlMessagesTab("Offset")
-        .setSeekTypeValueFldMessagesTab(String.valueOf(secondMessage.getOffset()))
+        .setSeekTypeValueFldMessagesTab(String.valueOf(nextOffset))
         .clickSubmitFiltersBtnMessagesTab();
     SoftAssert softly = new SoftAssert();
     topicDetails.getAllMessages().forEach(message ->
-        softly.assertTrue(message.getOffset() == secondMessage.getOffset()
-                || message.getOffset() > secondMessage.getOffset(),
-            String.format("Expected offset is: %s, but found: %s", secondMessage.getOffset(), message.getOffset())));
+        softly.assertTrue(message.getOffset() >= nextOffset,
+            String.format("Expected offset not less: %s, but found: %s", nextOffset, message.getOffset())));
     softly.assertAll();
   }
 
@@ -168,13 +165,11 @@ public class MessagesTest extends BaseTest {
   @Test(priority = 7)
   public void checkMessageFilteringByTimestamp() {
     navigateToTopicsAndOpenDetails(TOPIC_FOR_CHECK_FILTERS.getName());
-    topicDetails
-        .openDetailsTab(MESSAGES);
-    LocalDateTime firstTimestamp = topicDetails.getMessageByOffset(0).getTimestamp();
-    List<TopicDetails.MessageGridItem> nextMessages = topicDetails.getAllMessages().stream()
+    LocalDateTime firstTimestamp = topicDetails
+        .openDetailsTab(MESSAGES)
+        .getMessageByOffset(0).getTimestamp();
+    LocalDateTime nextTimestamp = topicDetails.getAllMessages().stream()
         .filter(message -> message.getTimestamp().getMinute() != firstTimestamp.getMinute())
-        .toList();
-    LocalDateTime nextTimestamp = nextMessages.stream()
         .findFirst().orElseThrow().getTimestamp();
     topicDetails
         .selectSeekTypeDdlMessagesTab("Timestamp")
@@ -183,8 +178,7 @@ public class MessagesTest extends BaseTest {
         .clickSubmitFiltersBtnMessagesTab();
     SoftAssert softly = new SoftAssert();
     topicDetails.getAllMessages().forEach(message ->
-        softly.assertTrue(message.getTimestamp().isEqual(nextTimestamp)
-                || message.getTimestamp().isAfter(nextTimestamp),
+        softly.assertFalse(message.getTimestamp().isBefore(nextTimestamp),
             String.format("Expected that %s is not before %s.", message.getTimestamp(), nextTimestamp)));
     softly.assertAll();
   }

kafka-ui-e2e-checks/src/test/resources/regression.xml

@@ -1,6 +1,6 @@
 <!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
 <suite name="RegressionSuite">
-    <test name="RegressionTest" enabled="true" parallel="classes" thread-count="3">
+    <test name="RegressionTest" enabled="true" parallel="classes" thread-count="2">
         <packages>
             <package name="com.provectus.kafka.ui.smokesuite.*"/>
             <package name="com.provectus.kafka.ui.sanitysuite.*"/>

kafka-ui-e2e-checks/src/test/resources/sanity.xml

@@ -1,6 +1,6 @@
 <!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
 <suite name="SanitySuite">
-    <test name="SanityTest" enabled="true" parallel="classes" thread-count="3">
+    <test name="SanityTest" enabled="true" parallel="classes" thread-count="2">
         <packages>
             <package name="com.provectus.kafka.ui.sanitysuite.*"/>
         </packages>

kafka-ui-e2e-checks/src/test/resources/smoke.xml

@@ -1,6 +1,6 @@
 <!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
 <suite name="SmokeSuite">
-    <test name="SmokeTest" enabled="true" parallel="classes" thread-count="3">
+    <test name="SmokeTest" enabled="true" parallel="classes" thread-count="2">
         <packages>
             <package name="com.provectus.kafka.ui.smokesuite.*"/>
         </packages>

kafka-ui-react-app/src/components/ConsumerGroups/Details/TopicContents/TopicContents.tsx

@@ -1,6 +1,6 @@
 import { Table } from 'components/common/table/Table/Table.styled';
 import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
-import { ConsumerGroupTopicPartition } from 'generated-sources';
+import { ConsumerGroupTopicPartition, SortOrder } from 'generated-sources';
 import React from 'react';
 
 import { ContentBox, TopicContentWrapper } from './TopicContent.styled';
@@ -9,7 +9,125 @@ interface Props {
   consumers: ConsumerGroupTopicPartition[];
 }
 
+type OrderByKey = keyof ConsumerGroupTopicPartition;
+interface Headers {
+  title: string;
+  orderBy: OrderByKey | undefined;
+}
+
+const TABLE_HEADERS_MAP: Headers[] = [
+  { title: 'Partition', orderBy: 'partition' },
+  { title: 'Consumer ID', orderBy: 'consumerId' },
+  { title: 'Host', orderBy: 'host' },
+  { title: 'Messages Behind', orderBy: 'messagesBehind' },
+  { title: 'Current Offset', orderBy: 'currentOffset' },
+  { title: 'End offset', orderBy: 'endOffset' },
+];
+
+const ipV4ToNum = (ip?: string) => {
+  if (typeof ip === 'string' && ip.length !== 0) {
+    const withoutSlash = ip.indexOf('/') !== -1 ? ip.slice(1) : ip;
+    return Number(
+      withoutSlash
+        .split('.')
+        .map((octet) => `000${octet}`.slice(-3))
+        .join('')
+    );
+  }
+  return 0;
+};
+
+type ComparatorFunction<T> = (
+  valueA: T,
+  valueB: T,
+  order: SortOrder,
+  property?: keyof T
+) => number;
+
+const numberComparator: ComparatorFunction<ConsumerGroupTopicPartition> = (
+  valueA,
+  valueB,
+  order,
+  property
+) => {
+  if (property !== undefined) {
+    return order === SortOrder.ASC
+      ? Number(valueA[property]) - Number(valueB[property])
+      : Number(valueB[property]) - Number(valueA[property]);
+  }
+  return 0;
+};
+
+const ipComparator: ComparatorFunction<ConsumerGroupTopicPartition> = (
+  valueA,
+  valueB,
+  order
+) =>
+  order === SortOrder.ASC
+    ? ipV4ToNum(valueA.host) - ipV4ToNum(valueB.host)
+    : ipV4ToNum(valueB.host) - ipV4ToNum(valueA.host);
+
+const consumerIdComparator: ComparatorFunction<ConsumerGroupTopicPartition> = (
+  valueA,
+  valueB,
+  order
+) => {
+  if (valueA.consumerId && valueB.consumerId) {
+    if (order === SortOrder.ASC) {
+      if (valueA.consumerId?.toLowerCase() > valueB.consumerId?.toLowerCase()) {
+        return 1;
+      }
+    }
+
+    if (order === SortOrder.DESC) {
+      if (valueB.consumerId?.toLowerCase() > valueA.consumerId?.toLowerCase()) {
+        return -1;
+      }
+    }
+  }
+
+  return 0;
+};
+
 const TopicContents: React.FC<Props> = ({ consumers }) => {
+  const [orderBy, setOrderBy] = React.useState<OrderByKey>('partition');
+  const [sortOrder, setSortOrder] = React.useState<SortOrder>(SortOrder.DESC);
+
+  const handleOrder = React.useCallback((columnName: string | null) => {
+    if (typeof columnName === 'string') {
+      setOrderBy(columnName as OrderByKey);
+      setSortOrder((prevOrder) =>
+        prevOrder === SortOrder.DESC ? SortOrder.ASC : SortOrder.DESC
+      );
+    }
+  }, []);
+
+  const sortedConsumers = React.useMemo(() => {
+    if (orderBy && sortOrder) {
+      const isNumberProperty =
+        orderBy === 'partition' ||
+        orderBy === 'currentOffset' ||
+        orderBy === 'endOffset' ||
+        orderBy === 'messagesBehind';
+
+      let comparator: ComparatorFunction<ConsumerGroupTopicPartition>;
+      if (isNumberProperty) {
+        comparator = numberComparator;
+      }
+
+      if (orderBy === 'host') {
+        comparator = ipComparator;
+      }
+
+      if (orderBy === 'consumerId') {
+        comparator = consumerIdComparator;
+      }
+
+      return consumers.sort((a, b) => comparator(a, b, sortOrder, orderBy));
+    }
+    return consumers;
+  }, [orderBy, sortOrder, consumers]);
+
   return (
     <TopicContentWrapper>
       <td colSpan={3}>
@@ -17,16 +135,20 @@ const TopicContents: React.FC<Props> = ({ consumers }) => {
           <Table isFullwidth>
             <thead>
               <tr>
-                <TableHeaderCell title="Partition" />
-                <TableHeaderCell title="Consumer ID" />
-                <TableHeaderCell title="Host" />
-                <TableHeaderCell title="Messages behind" />
-                <TableHeaderCell title="Current offset" />
-                <TableHeaderCell title="End offset" />
+                {TABLE_HEADERS_MAP.map((header) => (
+                  <TableHeaderCell
+                    key={header.orderBy}
+                    title={header.title}
+                    orderBy={orderBy}
+                    sortOrder={sortOrder}
+                    orderValue={header.orderBy}
+                    handleOrderBy={handleOrder}
+                  />
+                ))}
               </tr>
             </thead>
             <tbody>
-              {consumers.map((consumer) => (
+              {sortedConsumers.map((consumer) => (
                 <tr key={consumer.partition}>
                   <td>{consumer.partition}</td>
                   <td>{consumer.consumerId}</td>

kafka-ui-react-app/src/components/KsqlDb/TableView.tsx

@@ -31,7 +31,7 @@ const TableView: React.FC<TableViewProps> = ({ fetching, rows }) => {
       data={rows || []}
       columns={columns}
       emptyMessage={fetching ? 'Loading...' : 'No rows found'}
-      enableSorting={false}
+      enableSorting
     />
   );
 };

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

@@ -27,7 +27,7 @@ export interface AddEditFilterContainerProps {
   inputDisplayNameDefaultValue?: string;
   inputCodeDefaultValue?: string;
   isAdd?: boolean;
-  submitCallback?: (values: AddMessageFilters) => void;
+  submitCallback?: (values: AddMessageFilters) => Promise<void>;
 }
 
 const AddEditFilterContainer: React.FC<AddEditFilterContainerProps> = ({

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

@@ -6,6 +6,7 @@ import SavedFilters from 'components/Topics/Topic/Messages/Filters/SavedFilters'
 import SavedIcon from 'components/common/Icons/SavedIcon';
 import QuestionIcon from 'components/common/Icons/QuestionIcon';
 import useBoolean from 'lib/hooks/useBoolean';
+import { showAlert } from 'lib/errorHandling';
 
 import AddEditFilterContainer from './AddEditFilterContainer';
 import InfoModal from './InfoModal';
@@ -43,6 +44,19 @@ const AddFilter: React.FC<FilterModalProps> = ({
 
   const onSubmit = React.useCallback(
     async (values: AddMessageFilters) => {
+      const isFilterExists = filters.some(
+        (filter) => filter.name === values.name
+      );
+
+      if (isFilterExists) {
+        showAlert('error', {
+          id: '',
+          title: 'Validation Error',
+          message: 'Filter with the same name already exists',
+        });
+        return;
+      }
+
       const data = { ...values };
       if (data.saveFilter) {
         addFilter(data);

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components';
 import useDataSaver from 'lib/hooks/useDataSaver';
 import { TopicMessage } from 'generated-sources';
 import MessageToggleIcon from 'components/common/Icons/MessageToggleIcon';
@@ -7,22 +6,12 @@ import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
 import { Dropdown, DropdownItem } from 'components/common/Dropdown';
 import { formatTimestamp } from 'lib/dateTimeHelpers';
 import { JSONPath } from 'jsonpath-plus';
+import Ellipsis from 'components/common/Ellipsis/Ellipsis';
+import WarningRedIcon from 'components/common/Icons/WarningRedIcon';
 
 import MessageContent from './MessageContent/MessageContent';
 import * as S from './MessageContent/MessageContent.styled';
 
-const StyledDataCell = styled.td`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  max-width: 350px;
-  min-width: 350px;
-`;
-
-const ClickableRow = styled.tr`
-  cursor: pointer;
-`;
-
 export interface PreviewFilter {
   field: string;
   path: string;
@@ -43,6 +32,8 @@ const Message: React.FC<Props> = ({
     partition,
     content,
     headers,
+    valueSerde,
+    keySerde,
   },
   keyFilters,
   contentFilters,
@@ -100,7 +91,7 @@ const Message: React.FC<Props> = ({
 
   return (
     <>
-      <ClickableRow
+      <S.ClickableRow
         onMouseEnter={() => setVEllipsisOpen(true)}
         onMouseLeave={() => setVEllipsisOpen(false)}
         onClick={toggleIsOpen}
@@ -115,16 +106,20 @@ const Message: React.FC<Props> = ({
         <td>
           <div>{formatTimestamp(timestamp)}</div>
         </td>
-        <StyledDataCell title={key}>
-          {renderFilteredJson(key, keyFilters)}
-        </StyledDataCell>
-        <StyledDataCell title={content}>
+        <S.DataCell title={key}>
+          <Ellipsis text={renderFilteredJson(key, keyFilters)}>
+            {keySerde === 'Fallback' && <WarningRedIcon />}
+          </Ellipsis>
+        </S.DataCell>
+        <S.DataCell title={content}>
           <S.Metadata>
             <S.MetadataValue>
-              {renderFilteredJson(content, contentFilters)}
+              <Ellipsis text={renderFilteredJson(content, contentFilters)}>
+                {valueSerde === 'Fallback' && <WarningRedIcon />}
+              </Ellipsis>
             </S.MetadataValue>
           </S.Metadata>
-        </StyledDataCell>
+        </S.DataCell>
         <td style={{ width: '5%' }}>
           {vEllipsisOpen && (
             <Dropdown>
@@ -135,7 +130,7 @@ const Message: React.FC<Props> = ({
             </Dropdown>
           )}
         </td>
-      </ClickableRow>
+      </S.ClickableRow>
       {isOpen && (
         <MessageContent
           messageKey={key}

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

@@ -35,7 +35,16 @@ export const ContentBox = styled.div`
     flex-grow: 1;
   }
 `;
-
+export const DataCell = styled.td`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 350px;
+  min-width: 350px;
+`;
+export const ClickableRow = styled.tr`
+  cursor: pointer;
+`;
 export const MetadataWrapper = styled.div`
   background-color: ${({ theme }) => theme.topicMetaData.backgroundColor};
   padding: 24px;

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

@@ -11,6 +11,7 @@ import upperFirst from 'lodash/upperFirst';
 
 jsf.option('fillProperties', false);
 jsf.option('alwaysFakeOptionals', true);
+jsf.option('failOnInvalidFormat', false);
 
 const generateValueFromSchema = (preffered?: SerdeDescription) => {
   if (!preffered?.schema) {

kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx

@@ -49,7 +49,7 @@ const CustomParamField: React.FC<Props> = ({
       label: option,
       disabled:
         (config &&
-          config[option].source !== ConfigSource.DYNAMIC_TOPIC_CONFIG) ||
+          config[option]?.source !== ConfigSource.DYNAMIC_TOPIC_CONFIG) ||
         existingFields.includes(option),
     }));
 

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

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const Text = styled.div`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 340px;
+`;
+
+export const Wrapper = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+`;

kafka-ui-react-app/src/components/common/Ellipsis/Ellipsis.tsx

@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from 'react';
+
+import * as S from './Ellipsis.styled';
+
+type EllipsisProps = {
+  text: React.ReactNode;
+};
+
+const Ellipsis: React.FC<PropsWithChildren<EllipsisProps>> = ({
+  text,
+  children,
+}) => {
+  return (
+    <S.Wrapper>
+      <S.Text>{text}</S.Text>
+      {children}
+    </S.Wrapper>
+  );
+};
+export default Ellipsis;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useTheme } from 'styled-components';
+
+const WarningRedIcon: React.FC = () => {
+  const theme = useTheme();
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        width="20"
+        height="20"
+        rx="10"
+        fill={theme.icons.warningRedIcon.rectFill}
+      />
+      <path
+        d="M9 4.74219H11V12.7422H9V4.74219Z"
+        fill={theme.icons.warningRedIcon.pathFill}
+      />
+      <path
+        d="M9 14.7422C9 14.1899 9.44772 13.7422 10 13.7422C10.5523 13.7422 11 14.1899 11 14.7422C11 15.2945 10.5523 15.7422 10 15.7422C9.44772 15.7422 9 15.2945 9 14.7422Z"
+        fill={theme.icons.warningRedIcon.pathFill}
+      />
+    </svg>
+  );
+};
+
+export default WarningRedIcon;

kafka-ui-react-app/src/components/common/NewTable/Table.tsx

@@ -14,7 +14,7 @@ import type {
   PaginationState,
   ColumnDef,
 } from '@tanstack/react-table';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams, useLocation } from 'react-router-dom';
 import { PER_PAGE } from 'lib/constants';
 import { Button } from 'components/common/Button/Button';
 import Input from 'components/common/Input/Input';
@@ -129,6 +129,7 @@ const Table: React.FC<TableProps<any>> = ({
   onRowClick,
 }) => {
   const [searchParams, setSearchParams] = useSearchParams();
+  const location = useLocation();
   const [rowSelection, setRowSelection] = React.useState({});
   const onSortingChange = React.useCallback(
     (updater: UpdaterFn<SortingState>) => {
@@ -136,7 +137,7 @@ const Table: React.FC<TableProps<any>> = ({
       setSearchParams(searchParams);
       return newState;
     },
-    [searchParams]
+    [searchParams, location]
   );
   const onPaginationChange = React.useCallback(
     (updater: UpdaterFn<PaginationState>) => {
@@ -145,7 +146,7 @@ const Table: React.FC<TableProps<any>> = ({
       setRowSelection({});
       return newState;
     },
-    [searchParams]
+    [searchParams, location]
   );
 
   const table = useReactTable({

kafka-ui-react-app/src/theme/theme.ts

@@ -173,6 +173,10 @@ const baseTheme = {
     closeIcon: Colors.neutral[30],
     deleteIcon: Colors.red[20],
     warningIcon: Colors.yellow[20],
+    warningRedIcon: {
+      rectFill: Colors.red[10],
+      pathFill: Colors.red[50],
+    },
     messageToggleIcon: {
       normal: Colors.brand[30],
       hover: Colors.brand[40],