Improve Activity event handling in the UI (#254)

Improve Activity event handling in the UI

- fixes #252 found that the Activity page showed activity inconsistent
  with /api/metrics
- Change data structure for event metrics to array.
- Add Event stream connections status indicator

ui/src/components/ConnectionStatus.tsx

@@ -0,0 +1,36 @@
+import { useAPI } from "../contexts/APIProvider";
+import { useEffect, useState, useMemo } from "react";
+
+type ConnectionStatus = "disconnected" | "connecting" | "connected";
+
+const ConnectionStatus = () => {
+  const { getConnectionStatus } = useAPI();
+  const [eventStreamStatus, setEventStreamStatus] = useState<ConnectionStatus>("disconnected");
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setEventStreamStatus(getConnectionStatus());
+    }, 1000);
+    return () => clearInterval(interval);
+  });
+
+  const eventStatusColor = useMemo(() => {
+    switch (eventStreamStatus) {
+      case "connected":
+        return "bg-green-500";
+      case "connecting":
+        return "bg-yellow-500";
+      case "disconnected":
+      default:
+        return "bg-red-500";
+    }
+  }, [eventStreamStatus]);
+
+  return (
+    <div className="flex items-center" title={`event stream: ${eventStreamStatus}`}>
+      <span className={`inline-block w-3 h-3 rounded-full ${eventStatusColor} mr-2`}></span>
+    </div>
+  );
+};
+
+export default ConnectionStatus;