Repository: provectus/kafka-ui
Issue: Cannot view/browse messages
Labels: type/bug
scope/frontend

**Describe the bug**
I set up an SSL enabled cluster and I can see most of the info except browsing/viewing messages.
I tested it with kafdrop and i can see the messages but no matter what offsets or settings i enter, kafka-ui shows "no messages found" for the same topic


**Set up**
Docker provectuslabs/kafka-ui:master version : v0.2.1-SNAPSHOT(928dbd7)



**Screenshots**
![2021-09-24_17-17-02](https://user-images.githubusercontent.com/57646596/134751252-80bdab62-f7a8-4446-beb0-cf10b3fa95f8.png)


**Additional context**
(Add any other context about the problem here)

Issue comments:
@metalshanked. Thanks for creating this issue. Could you please provide more information? 
What is your config for UI for Apache Kafka? 
What is the serializing format for these messages?
If yes, could you provide schemas?
> @metalshanked. Thanks for creating this issue. Could you please provide more information?
> What is your config for UI for Apache Kafka?
> What is the serializing format for these messages?
> If yes, could you provide schemas?

Sure, here is the info.
Kafka version:2.3-IV1
kafka setup is SSL only with below kafka-ui configs
-e KAFKA_CLUSTERS_0_NAME=dev
-e KAFKA_CLUSTERS_0_BOOTSTRAPSERVERS={MY KAFKA SERVER:PORT}
-e KAFKA_CLUSTERS_0_PROPERTIES_SECURITY_PROTOCOL=SSL
-e KAFKA_CLUSTERS_0_PROPERTIES_SSL_ENDPOINT_IDENTIFICATION_ALGORITHM=
-e KAFKA_CLUSTERS_0_PROPERTIES_SSL_TRUSTSTORE_LOCATION={MY JKS DIRECTORY}
-e KAFKA_CLUSTERS_0_PROPERTIES_SSL_TRUSTSTORE_PASSWORD={PASSWORD}
-e KAFKA_CLUSTERS_0_PROPERTIES_SSL_KEYSTORE_LOCATION={MY JKS DIRECTORY}
-e KAFKA_CLUSTERS_0_PROPERTIES_SSL_KEYSTORE_PASSWORD={PASSWORD}
-e KAFKA_CLUSTERS_0_PROPERTIES_SSL_KEY_PASSWORD={PASSWORD}

The kafka messages are plaintext with with event per message. like log events.
I seem to able to view everything else apart from the browsing the messages.
I dont have schema registry setup

Is there any special config required to view/browse messages apart from the above?
it seems that when deployed, the request path is not correct:

consumer groups (work)

```
https://sub.domain.com/my/special/path/api/clusters/kafka-shared/topics/my-topic/consumer-groups
```

messages - original request made by kafka ui (doesn't work):

```
https://sub.domain.com/api/clusters/kafka-shared/topics/my-topic/messages?attempt=0&limit=100&seekDirection=FORWARD&seekType=OFFSET&seekTo=0::6
```

messages - manually rewritten in new browser tab (works):

```
https://sub.domain.com/my/special/path/api/clusters/kafka-shared/topics/my-topic/messages?attempt=0&limit=100&seekDirection=FORWARD&seekType=OFFSET&seekTo=0::6
```

The `/my/special/path` part is missing. 

I just can't find where is the problem, whether in React or Java code.
@zuzana  Thanks for digging into this.

Pull request review comments:

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 bdb38d8cd83..962b06132ba 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
@@ -17,6 +17,7 @@ import MultiSelect from 'react-multi-select-component';
 import { Option } from 'react-multi-select-component/dist/lib/interfaces';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 import { TopicName, ClusterName } from 'redux/interfaces';
+import { BASE_PARAMS } from 'lib/constants';
 
 import {
   filterOptions,
@@ -172,7 +173,7 @@ const Filters: React.FC<FiltersProps> = ({
   // eslint-disable-next-line consistent-return
   React.useEffect(() => {
     if (location.search.length !== 0) {
-      const url = `/api/clusters/${clusterName}/topics/${topicName}/messages${location.search}`;
+      const url = `${BASE_PARAMS.basePath}/api/clusters/${clusterName}/topics/${topicName}/messages${location.search}`;
       const sse = new EventSource(url);
 
       source.current = sse;


Test patch: