FE: Fix HTTP 400 for clusters with special symbols (#3591)

(cherry picked from commit ecc8db1)
provectus · Apr 13, 2023 · b0c367c · b0c367c
1 parent d10996e
commit b0c367c
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx
@@ -327,7 +327,9 @@ const Filters: React.FC<FiltersProps> = ({
  // eslint-disable-next-line consistent-return
  React.useEffect(() => {
  if (location.search?.length !== 0) {
- const url = `${BASE_PARAMS.basePath}/api/clusters/${clusterName}/topics/${topicName}/messages${location.search}`;
+ const url = `${BASE_PARAMS.basePath}/api/clusters/${encodeURIComponent(
+ clusterName
+ )}/topics/${topicName}/messages${location.search}`;
  const sse = new EventSource(url);
 
  source.current = sse;

diff --git a/kafka-ui-react-app/src/lib/hooks/api/ksqlDb.tsx b/kafka-ui-react-app/src/lib/hooks/api/ksqlDb.tsx
@@ -90,7 +90,9 @@ export const useKsqlkDbSSE = ({ clusterName, pipeId }: UseKsqlkDbSSEProps) => {
 
  React.useEffect(() => {
  const fetchData = async () => {
- const url = `${BASE_PARAMS.basePath}/api/clusters/${clusterName}/ksql/response`;
+ const url = `${BASE_PARAMS.basePath}/api/clusters/${encodeURIComponent(
+ clusterName
+ )}/ksql/response`;
  await fetchEventSource(
  `${url}?${new URLSearchParams({ pipeId: pipeId || '' }).toString()}`,
  {

diff --git a/kafka-ui-react-app/src/lib/hooks/api/topicMessages.tsx b/kafka-ui-react-app/src/lib/hooks/api/topicMessages.tsx
@@ -51,7 +51,9 @@ export const useTopicMessages = ({
  React.useEffect(() => {
  const fetchData = async () => {
  setIsFetching(true);
- const url = `${BASE_PARAMS.basePath}/api/clusters/${clusterName}/topics/${topicName}/messages`;
+ const url = `${BASE_PARAMS.basePath}/api/clusters/${encodeURIComponent(
+ clusterName
+ )}/topics/${topicName}/messages`;
  const requestParams = new URLSearchParams({
  limit,
  seekTo: seekTo.replaceAll('-', '::').replaceAll('.', ','),