Feature#94 Added submit button to handle messages filter change. (#107)

* Added submit button to handle messages filter change.

* Using  memoized callback for messages filtering.

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;
+}

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<Props> = ({
 
   React.useEffect(() => {
     fetchTopicMessages(clusterName, topicName, queryParams);
-  }, [fetchTopicMessages, clusterName, topicName, queryParams]);
+  }, []);
 
   React.useEffect(() => {
     setFilterProps(getUniqueDataForEachPartition);
@@ -172,7 +172,12 @@ const Messages: React.FC<Props> = ({
     });
   };
 
+  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<Props> = ({
       seekType: SeekTypes.OFFSET,
       seekTo,
     });
+    fetchTopicMessages(clusterName, topicName, queryParams);
   };
 
   const filterOptions = (options: Option[], filter: any) => {
@@ -352,6 +358,15 @@ const Messages: React.FC<Props> = ({
           />
         </div>
       </div>
+      <div className="columns">
+        <div className="column is-full" style={{textAlign: "right"}}>
+          <input
+            type="submit"
+            className="button is-primary"
+            onClick={handleFiltersSubmit}
+          />
+        </div>
+      </div>
       {getTopicMessagesTable()}
     </div>
   );