diff --git a/kafka-ui-react-app/src/components/App.scss b/kafka-ui-react-app/src/components/App.scss index a6babfa0ae..e66343f9dd 100644 --- a/kafka-ui-react-app/src/components/App.scss +++ b/kafka-ui-react-app/src/components/App.scss @@ -32,3 +32,7 @@ $navbar-width: 250px; .react-datepicker-wrapper { display: flex !important; } + +.react-datepicker-popper { + z-index: 30 !important; +} diff --git a/kafka-ui-react-app/src/components/Topics/Details/Messages/Messages.tsx b/kafka-ui-react-app/src/components/Topics/Details/Messages/Messages.tsx index 99ea852b25..8631ce1138 100644 --- a/kafka-ui-react-app/src/components/Topics/Details/Messages/Messages.tsx +++ b/kafka-ui-react-app/src/components/Topics/Details/Messages/Messages.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef } from 'react'; +import React, { useCallback, useEffect, useRef } from 'react'; import { ClusterName, SeekType, @@ -113,7 +113,7 @@ const Messages: React.FC = ({ React.useEffect(() => { fetchTopicMessages(clusterName, topicName, queryParams); - }, [fetchTopicMessages, clusterName, topicName, queryParams]); + }, []); React.useEffect(() => { setFilterProps(getUniqueDataForEachPartition); @@ -172,7 +172,12 @@ const Messages: React.FC = ({ }); }; + const handleFiltersSubmit = useCallback(() => { + fetchTopicMessages(clusterName, topicName, queryParams); + }, [clusterName, topicName, queryParams]); + const getTimestampDate = (timestamp: string) => { + if (!Date.parse(timestamp)) return; return format(Date.parse(timestamp), 'yyyy-MM-dd HH:mm:ss'); }; @@ -222,6 +227,7 @@ const Messages: React.FC = ({ seekType: SeekTypes.OFFSET, seekTo, }); + fetchTopicMessages(clusterName, topicName, queryParams); }; const filterOptions = (options: Option[], filter: any) => { @@ -352,6 +358,15 @@ const Messages: React.FC = ({ /> +
+
+ +
+
{getTopicMessagesTable()} );