[UI] Metrics polling

frontend/src/components/Brokers/Brokers.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import { ClusterId } from 'types';
+import useInterval from 'lib/hooks/useInterval';
 
 interface Props {
   clusterId: string;
@@ -15,8 +16,15 @@ const Topics: React.FC<Props> = ({
   fetchBrokers,
   fetchBrokerMetrics,
 }) => {
-  React.useEffect(() => { fetchBrokers(clusterId); }, [fetchBrokers, clusterId]);
-  React.useEffect(() => { fetchBrokerMetrics(clusterId); }, [fetchBrokerMetrics, clusterId]);
+  React.useEffect(
+    () => {
+      fetchBrokers(clusterId);
+      fetchBrokerMetrics(clusterId);
+    },
+    [fetchBrokers, fetchBrokerMetrics, clusterId],
+  );
+
+  useInterval(() => { fetchBrokerMetrics(clusterId); }, 5000);
 
   if (isFetched) {
     return (

frontend/src/lib/hooks/useInterval.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+
+type Callback = () => any;
+
+const useInterval = (callback: Callback, delay: number) => {
+  const savedCallback = React.useRef<Callback>();
+
+  React.useEffect(
+    () => {
+      savedCallback.current = callback;
+    },
+    [callback],
+  );
+
+  React.useEffect(
+    () => {
+      const tick = () => {
+        savedCallback.current && savedCallback.current()
+      };
+
+      if (delay !== null) {
+        const id = setInterval(tick, delay);
+        return () => clearInterval(id);
+      }
+    },
+    [delay],
+  );
+}
+
+export default useInterval;