feedback-to-code/mozzarella huggingface dataset:
Repository: provectus/kafka-ui
Issue: Sort topics by size
Labels: type/enhancement
good first issue
scope/backend
scope/frontend
status/accepted

### Is your proposal related to a problem?

Sometimes I need to find biggest topic in cluster. It will be great if I can sort list topics by `Size`/`Number of messages` in UI by click on table header like this is working for `Total partitions` or `Out of sync replicas`





Issue comments:
Hello there Tri0L! 👋

Thank you and congratulations 🎉 for opening your very first issue in this project! 💖

In case you want to claim this issue, please comment down below! We will try to get back to you as soon as we can. 👀
Hi, thanks for the suggestion! We'll take this into consideration :)
Related: #1383
@Tri0L thank you for suggestion. Unfortunately Number of message sorting is not likely to be done, since to calculate number of messages we need to do several heavy API calls. Currently we do it after sorting applied. 
As for size - it is doable, since this data is cached (updated every 30 sec by default).
@ValentinPrischepa please take it to account ^

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-api/src/main/java/com/provectus/kafka/ui/service/TopicsService.java b/kafka-ui-api/src/main/java/com/provectus/kafka/ui/service/TopicsService.java
index d115f99c318..5a14e8c9aff 100644
--- a/kafka-ui-api/src/main/java/com/provectus/kafka/ui/service/TopicsService.java
+++ b/kafka-ui-api/src/main/java/com/provectus/kafka/ui/service/TopicsService.java
@@ -455,6 +455,8 @@ private Comparator<InternalTopic> getComparatorForTopic(
           return Comparator.comparing(t -> t.getReplicas() - t.getInSyncReplicas());
         case REPLICATION_FACTOR:
           return Comparator.comparing(InternalTopic::getReplicationFactor);
+        case SIZE:
+          return Comparator.comparing(InternalTopic::getSegmentSize);
         case NAME:
         default:
           return defaultComparator;
diff --git a/kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml b/kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml
index 6fd9c4efa64..ae5e4c85c1d 100644
--- a/kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml
+++ b/kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml
@@ -1738,6 +1738,7 @@ components:
         - OUT_OF_SYNC_REPLICAS
         - TOTAL_PARTITIONS
         - REPLICATION_FACTOR
+        - SIZE
 
     SortOrder:
       type: string


Test patch:
Repository: provectus/kafka-ui
Issue: Too short dropdown field
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

Topic params:
![image](https://user-images.githubusercontent.com/1494347/152135574-7978e55e-5c85-4ae7-a74b-637616e73203.png)
Related to #1520. Please check the rest of dropdowns for this issue.


Issue comments:

Pull request review comments:
I'm not sure about hiding it 
I think we either just have to add our styles or add `-webkit-appearance: auto;` (it will show only when user scrolls and it has scroll)


I have to add - that i don't think select has to scroll horizontally but i think i will be great indicator that we done something wrong
<img width="813" alt="Screenshot 2022-02-04 at 12 28 02" src="https://user-images.githubusercontent.com/83412197/152505105-122b02ba-a012-44ca-a8cb-c84d6fc470c0.png">

Maybe I just lower the height?

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/common/Select/Select.styled.ts b/kafka-ui-react-app/src/components/common/Select/Select.styled.ts
index dd5f730d72b..e730f0528f5 100644
--- a/kafka-ui-react-app/src/components/common/Select/Select.styled.ts
+++ b/kafka-ui-react-app/src/components/common/Select/Select.styled.ts
@@ -59,17 +59,18 @@ export const OptionList = styled.ul`
   position: absolute;
   top: 100%;
   left: 0;
-  max-height: 114px;
+  max-height: 228px;
   margin-top: 4px;
   background-color: ${(props) => props.theme.select.backgroundColor.normal};
   border: 1px ${(props) => props.theme.select.borderColor.normal} solid;
   border-radius: 4px;
   font-size: 14px;
   line-height: 18px;
-  width: 100%;
   color: ${(props) => props.theme.select.color.normal};
   overflow-y: scroll;
   z-index: 10;
+  max-width: 300px;
+  min-width: 100%;
 
   &::-webkit-scrollbar {
     -webkit-appearance: none;
@@ -81,6 +82,10 @@ export const OptionList = styled.ul`
     background-color: ${(props) =>
       props.theme.select.optionList.scrollbar.backgroundColor};
   }
+
+  &::-webkit-scrollbar:horizontal {
+    height: 7px;
+  }
 `;
 
 export const Option = styled.li<OptionProps>`


Test patch:
Repository: provectus/kafka-ui
Issue: [Feature]Use an unprivileged user in the dockerfile
Labels: type/enhancement
scope/backend
status/accepted

### 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..."
-->

Use an unprivileged user in the dockerfile

### Describe the solution you'd like

<!--
  Provide a clear and concise description of what you want to happen.
-->

Change the [Dockerfile](https://github.com/provectus/kafka-ui/blob/master/kafka-ui-api/Dockerfile) as follows:

```Dockerfile
FROM alpine:3.15.0
RUN apk add --no-cache openjdk13-jre libc6-compat gcompat

RUN addgroup -S kafkaui && adduser -S kafkaui -G kafkaui
USER kafkaui

ARG JAR_FILE
COPY "/target/${JAR_FILE}" "/kafka-ui-api.jar"

ENV JAVA_OPTS=

EXPOSE 8080

CMD java $JAVA_OPTS -jar kafka-ui-api.jar
```

### 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.
-->



Issue comments:
Hello there sandrospadaro! 👋

Thank you and congratulations 🎉 for opening your very first issue in this project! 💖

In case you want to claim this issue, please comment down below! We will try to get back to you as soon as we can. 👀
Hey, thanks for the suggestion. I've considered this but got lost in other stuff :)

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-api/Dockerfile b/kafka-ui-api/Dockerfile
index ba8569b100d..5488a771810 100644
--- a/kafka-ui-api/Dockerfile
+++ b/kafka-ui-api/Dockerfile
@@ -1,5 +1,9 @@
 FROM alpine:3.15.0
-RUN apk add --no-cache openjdk13-jre libc6-compat gcompat
+
+RUN apk add --no-cache openjdk13-jre libc6-compat gcompat \
+&& addgroup -S kafkaui && adduser -S kafkaui -G kafkaui
+
+USER kafkaui
 
 ARG JAR_FILE
 COPY "/target/${JAR_FILE}" "/kafka-ui-api.jar"


Test patch:
Repository: provectus/kafka-ui
Issue: Expand scrollable pane in connectors->config
Labels: type/enhancement
good first issue
scope/frontend
status/accepted
status/confirmed

Scrollable space is too short while the rest of the screen is empty

![image](https://user-images.githubusercontent.com/1494347/151153123-be2e44ec-3a33-4855-ac4b-7b4cc3ad21fb.png)


Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Connect/Details/Config/Config.tsx b/kafka-ui-react-app/src/components/Connect/Details/Config/Config.tsx
index 253ca0b691a..4e200aae475 100644
--- a/kafka-ui-react-app/src/components/Connect/Details/Config/Config.tsx
+++ b/kafka-ui-react-app/src/components/Connect/Details/Config/Config.tsx
@@ -28,10 +28,7 @@ export interface ConfigProps {
 }
 
 const ConnectConfigWrapper = styled.div`
-  padding: 16px;
   margin: 16px;
-  border: 1px solid ${({ theme }) => theme.layout.stuffColor};
-  border-radius: 8px;
 `;
 
 const Config: React.FC<ConfigProps> = ({
@@ -50,7 +47,6 @@ const Config: React.FC<ConfigProps> = ({
   }
 
   if (!config) return null;
-
   return (
     <ConnectConfigWrapper>
       <Editor
diff --git a/kafka-ui-react-app/src/components/Connect/Details/Config/__test__/__snapshots__/Config.spec.tsx.snap b/kafka-ui-react-app/src/components/Connect/Details/Config/__test__/__snapshots__/Config.spec.tsx.snap
index a7f774409ba..f9ac501bedd 100644
--- a/kafka-ui-react-app/src/components/Connect/Details/Config/__test__/__snapshots__/Config.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Connect/Details/Config/__test__/__snapshots__/Config.spec.tsx.snap
@@ -2,10 +2,7 @@
 
 exports[`Config view matches snapshot 1`] = `
 .c0 {
-  padding: 16px;
   margin: 16px;
-  border: 1px solid #F1F2F3;
-  border-radius: 8px;
 }
 
 <div
diff --git a/kafka-ui-react-app/src/components/common/Editor/Editor.tsx b/kafka-ui-react-app/src/components/common/Editor/Editor.tsx
index dddc8c43c12..76a63771865 100644
--- a/kafka-ui-react-app/src/components/common/Editor/Editor.tsx
+++ b/kafka-ui-react-app/src/components/common/Editor/Editor.tsx
@@ -29,7 +29,7 @@ const Editor = React.forwardRef<ReactAce | null, EditorProps>((props, ref) => {
       fontSize={14}
       height={
         isFixedHeight
-          ? `${(props.value?.split('\n').length || 32) * 16}px`
+          ? `${(props.value?.split('\n').length || 32) * 19}px`
           : '372px'
       }
       wrapEnabled


Test patch:
Repository: provectus/kafka-ui
Issue: Invalid color of "tasks failed" badge
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

connectors-> select connector
"tasks failed" color is red even when it equals to zero

![image](https://user-images.githubusercontent.com/1494347/151153457-8ce971bf-f04e-4e81-9733-0af3f2e2a0eb.png)


Issue comments:
It should be consistent if Test running here in Connectors would be green if it > 0
<img width="348" alt="Screenshot 2022-02-01 at 23 08 56" src="https://user-images.githubusercontent.com/92585878/152051769-dd88ec72-3657-46c1-9ec9-7e6b4b1b6067.png">


Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Connect/Details/Overview/Overview.tsx b/kafka-ui-react-app/src/components/Connect/Details/Overview/Overview.tsx
index 94148f10d27..28bbfbc3041 100644
--- a/kafka-ui-react-app/src/components/Connect/Details/Overview/Overview.tsx
+++ b/kafka-ui-react-app/src/components/Connect/Details/Overview/Overview.tsx
@@ -36,7 +36,11 @@ const Overview: React.FC<OverviewProps> = ({
         <Metrics.Indicator label="Tasks Running">
           {runningTasksCount}
         </Metrics.Indicator>
-        <Metrics.Indicator label="Tasks Failed" isAlert>
+        <Metrics.Indicator
+          label="Tasks Failed"
+          isAlert
+          alertType={failedTasksCount > 0 ? 'error' : 'success'}
+        >
           {failedTasksCount}
         </Metrics.Indicator>
       </Metrics.Section>


Test patch:
Repository: provectus/kafka-ui
Issue: Do not run frontend tests upon git hooks
Labels: type/enhancement
scope/frontend
status/accepted
type/chore
scope/infrastructure


Issue comments:

Pull request review comments:
I think it's not necessary to create a var if u use it only once.
It's better to either remove it or use it in `cd kafka-ui-react-app && npm run pre-commit`
`if git diff --cached --name-only | grep --quiet "kafka-ui-react-app"`
Something like that?

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/.husky/pre-commit b/kafka-ui-react-app/.husky/pre-commit
index 0664e92c6fa..b10cf37b9c2 100755
--- a/kafka-ui-react-app/.husky/pre-commit
+++ b/kafka-ui-react-app/.husky/pre-commit
@@ -1,4 +1,11 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-cd kafka-ui-react-app && npm run pre-commit
+
+if git diff --cached --name-only | grep --quiet "kafka-ui-react-app"
+then
+  cd kafka-ui-react-app && npm run pre-commit
+else 
+  echo "Skipping frontend tests"
+  exit 0
+fi


Test patch:
Repository: provectus/kafka-ui
Issue: Hyphens in dashboards names should not be treated as carriage return
Labels: type/bug
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
<!--(A clear and concise description of what the bug is.)-->

In the menu to the left side the dashboards names containing an hyphen are split in two lines.
```
UI for Apache UI    Version: v0.3.3 (38c4cf7)

  Dashboard
    silos-
    kafka

      Brokers
```
We should see here `silos-kafka` in a single row
```
UI for Apache UI    Version: v0.3.3 (38c4cf7)

  Dashboard
    silos-kafka

      Brokers
```

**Set up**
<!--
(How do you run the app? 
Which version of the app are you running? Provide either docker image version or check commit hash at the top left corner. We won't be able to help you without this information.)
-->

**Steps to Reproduce**
Steps to reproduce the behavior:

1. Set in the helm values `KAFKA_CLUSTERS_0_NAME` as shown in the following code snippet:
```
kafka-ui:
  envs:
    config:
      KAFKA_CLUSTERS_0_NAME: silos-kafka
```
2. Look at the UI

**Expected behavior**
<!--
(A clear and concise description of what you expected to happen)
-->

The name should not be split in two lines

**Additional context**
<!--
(Add any other context about the problem here)
-->

Version: v0.3.3 (38c4cf7)

Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts b/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts
index 1989d5040a4..082cca51233 100644
--- a/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts
+++ b/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts
@@ -28,8 +28,12 @@ export const Wrapper = styled.li.attrs({ role: 'menuitem' })(
   `
 );
 
-export const Title = styled.span`
+export const Title = styled.div`
   grid-area: title;
+  white-space: nowrap;
+  max-width: 110px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 export const StatusIconWrapper = styled.svg.attrs({
diff --git a/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.tsx b/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.tsx
index b01e357a87a..98cded2ae65 100644
--- a/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.tsx
+++ b/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.tsx
@@ -17,7 +17,7 @@ const ClusterTab: React.FC<ClusterTabProps> = ({
   toggleClusterMenu,
 }) => (
   <S.Wrapper onClick={toggleClusterMenu}>
-    <S.Title>{title}</S.Title>
+    <S.Title title={title}>{title}</S.Title>
 
     <S.StatusIconWrapper>
       <S.StatusIcon status={status} aria-label="status">


Test patch:
Repository: provectus/kafka-ui
Issue: Rename offsets columns
Labels: type/enhancement
good first issue
scope/frontend
status/accepted

To make offsets indication more clear we have to:
Topic details page:
1) Rename min/max offset to first/next (earliest/latest?) offset
2) Add a column "message count"

CC @iliax @GneyHabub 

Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx
index 458d2dff6a3..f947eaf01df 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx
@@ -38,6 +38,12 @@ const Overview: React.FC<Props> = ({
 }) => {
   const { isReadOnly } = React.useContext(ClusterContext);
 
+  const messageCount = React.useMemo(() => {
+    return (partitions || []).reduce((memo, partition) => {
+      return memo + partition.offsetMax - partition.offsetMin;
+    }, 0);
+  }, [partitions]);
+
   return (
     <>
       <Metrics.Wrapper>
@@ -84,6 +90,9 @@ const Overview: React.FC<Props> = ({
           <Metrics.Indicator label="Clean Up Policy">
             <Tag color="gray">{cleanUpPolicy || 'Unknown'}</Tag>
           </Metrics.Indicator>
+          <Metrics.Indicator label="Message Count">
+            {messageCount}
+          </Metrics.Indicator>
         </Metrics.Section>
       </Metrics.Wrapper>
       <div>
@@ -92,8 +101,9 @@ const Overview: React.FC<Props> = ({
             <tr>
               <TableHeaderCell title="Partition ID" />
               <TableHeaderCell title="Broker Leader" />
-              <TableHeaderCell title="Min Offset" />
-              <TableHeaderCell title="Max Offset" />
+              <TableHeaderCell title="First Offset" />
+              <TableHeaderCell title="Next Offset" />
+              <TableHeaderCell title="Message Count" />
               <TableHeaderCell title=" " />
             </tr>
           </thead>
@@ -104,6 +114,7 @@ const Overview: React.FC<Props> = ({
                 <td>{leader}</td>
                 <td>{offsetMin}</td>
                 <td>{offsetMax}</td>
+                <td>{offsetMax - offsetMin}</td>
                 <td style={{ width: '5%' }}>
                   {!internal && !isReadOnly && cleanUpPolicy === 'DELETE' ? (
                     <Dropdown label={<VerticalElipsisIcon />} right>


Test patch:
Repository: provectus/kafka-ui
Issue: "Connection to a secure broker" link is broken
Labels: type/documentation
good first issue

**Describe the bug**
1. Visit https://github.com/provectus/kafka-ui#guides
2. Click "Connection to a secure broker" link

Expected:
Guide, no octocat

Actual:
Octocat

Issue comments:
Hello there lucasprograms! 👋

Thank you and congratulations 🎉 for opening your very first issue in this project! 💖

In case you want to claim this issue, please comment down below! We will try to get back to you as soon as we can. 👀
Hey, thanks for bringing attention at this.

This link should actually lead to [this](https://github.com/provectus/kafka-ui/blob/master/documentation/compose/kafka-ssl.yml) compose file. We haven't done a separate page for it yet but there's a broken link already :)

Pull request review comments:

Patch that resolved the issue:
diff --git a/README.md b/README.md
index 33795ed2bc5..05da6db6751 100644
--- a/README.md
+++ b/README.md
@@ -70,12 +70,7 @@ We have plenty of [docker-compose files](documentation/compose/DOCKER_COMPOSE.md
 - [SSO configuration](documentation/guides/SSO.md)
 - [AWS IAM configuration](documentation/guides/AWS_IAM.md)
 - [Docker-compose files](documentation/compose/DOCKER_COMPOSE.md)
-- [Connection to a secure broker]()
-
-## Connecting to a Secure Broker
-
-The app supports TLS (SSL) and SASL connections for [encryption and authentication](http://kafka.apache.org/090/documentation.html#security). <br/>
-An example is located [here](documentation/compose/kafka-ssl.yml).
+- [Connection to a secure broker](documentation/compose/SECURE_BROKER.md)
 
 ### Configuration File
 Example of how to configure clusters in the [application-local.yml](https://github.com/provectus/kafka-ui/blob/master/kafka-ui-api/src/main/resources/application-local.yml) configuration file:
diff --git a/documentation/guides/SECURE_BROKER.md b/documentation/guides/SECURE_BROKER.md
new file mode 100644
index 00000000000..ab15bb63ab3
--- /dev/null
+++ b/documentation/guides/SECURE_BROKER.md
@@ -0,0 +1,7 @@
+## Connecting to a Secure Broker
+
+The app supports TLS (SSL) and SASL connections for [encryption and authentication](http://kafka.apache.org/090/documentation.html#security). <br/>
+
+### Running From Docker-compose file
+
+See [this](/documentation/compose/kafka-ssl.yml) docker-compose file reference for ssl-enabled kafka


Test patch:
Repository: provectus/kafka-ui
Issue: Remove rimraf from dependencies and add in dev dependencies 
Labels: scope/frontend
status/accepted
type/chore

### 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
Package is unnecessarily in the dependencies package remove it and add it in the dev dependencies so the bundle size in production will not be affected

<!--
  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.
-->



Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/package-lock.json b/kafka-ui-react-app/package-lock.json
index 87b78c8d1fb..2b4612881cb 100644
--- a/kafka-ui-react-app/package-lock.json
+++ b/kafka-ui-react-app/package-lock.json
@@ -18398,6 +18398,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
       "requires": {
         "glob": "^7.1.3"
       }
diff --git a/kafka-ui-react-app/package.json b/kafka-ui-react-app/package.json
index c4e237f1870..71dca68a700 100644
--- a/kafka-ui-react-app/package.json
+++ b/kafka-ui-react-app/package.json
@@ -35,7 +35,6 @@
     "react-router-dom": "^5.2.0",
     "redux": "^4.1.1",
     "redux-thunk": "^2.3.0",
-    "rimraf": "^3.0.2",
     "sass": "^1.43.4",
     "styled-components": "^5.3.1",
     "typesafe-actions": "^5.1.0",
@@ -127,6 +126,7 @@
     "react-scripts": "5.0.0",
     "react-test-renderer": "^17.0.2",
     "redux-mock-store": "^1.5.4",
+    "rimraf": "^3.0.2",
     "ts-jest": "^26.5.4",
     "ts-node": "^10.2.0",
     "typescript": "^4.3.5"


Test patch:
Repository: provectus/kafka-ui
Issue: UI: "Clear all" button not working
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

**Steps to Reproduce**
Steps to reproduce the behavior:

Go to Topics -> select topic -> Messages -> choose some filter (offset/timestamp) -> click on clear all button

**Actual behavior**

nothing happen

**Expected behavior**

all filters are cleared 

**Screenshots**

<img width="1045" alt="Screenshot 2022-04-06 at 20 07 12" src="https://user-images.githubusercontent.com/702205/162029857-564215b8-2add-426c-9eef-dae3b8475d1f.png">



Issue comments:
@Haarolean maybe we should just remove this button, since it looks overkill for current page structure

Pull request review comments:
should we update url as well?
done
should we reset the seekDirection as well ?
done
What's going on here? Please follow the existing code style of the project

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx
index 379a48f68e6..d840fc80c3d 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx
@@ -51,6 +51,7 @@ export interface FiltersProps {
   updateMeta(meta: TopicMessageConsuming): void;
   setIsFetching(status: boolean): void;
 }
+
 export interface MessageFilters {
   name: string;
   code: string;
@@ -165,6 +166,21 @@ const Filters: React.FC<FiltersProps> = ({
     };
   }, [attempt, query, queryType, seekDirection, activeFilter]);
 
+  const handleClearAllFilters = () => {
+    setCurrentSeekType(SeekType.OFFSET);
+    setQuery('');
+    changeSeekDirection(SeekDirection.FORWARD);
+    getSelectedPartitionsFromSeekToParam(searchParams, partitions);
+    setSelectedPartitions(
+      partitions.map((partition: Partition) => {
+        return {
+          value: partition.partition,
+          label: String(partition.partition),
+        };
+      })
+    );
+  };
+
   const handleFiltersSubmit = React.useCallback(() => {
     setAttempt(attempt + 1);
 
@@ -389,7 +405,7 @@ const Filters: React.FC<FiltersProps> = ({
             onChange={setSelectedPartitions}
             labelledBy="Select partitions"
           />
-          <S.ClearAll>Clear all</S.ClearAll>
+          <S.ClearAll onClick={handleClearAllFilters}>Clear all</S.ClearAll>
           {isFetching ? (
             <Button
               type="button"


Test patch: