Merge branch 'issues/checkShowStreamsRequestExecution2' into issues/stopQueryFunctionalCheck3

# Conflicts:
#	kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/manualsuite/backlog/SmokeBacklog.java
#	kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/smokesuite/ksqldb/KsqlDbTest.java

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],