#49 use event stream

app.py

@@ -6,6 +6,7 @@ gevent.monkey.patch_all()
 
 import flask
 import functools
+import gevent
 import gevent.wsgi
 import json
 import logging
@@ -180,16 +181,13 @@ def generate_mock_cluster_data(index: int):
 
 
 def get_mock_clusters(cluster_ids: set):
-    clusters = []
     for i in range(3):
         data = generate_mock_cluster_data(i)
         if not cluster_ids or data['id'] in cluster_ids:
-            clusters.append(data)
-    return clusters
+            yield data
 
 
 def get_kubernetes_clusters(cluster_ids: set):
-    clusters = []
     for api_server_url in (os.getenv('CLUSTERS') or DEFAULT_CLUSTERS).split(','):
         cluster_id = generate_cluster_id(api_server_url)
         if cluster_ids and cluster_id not in cluster_ids:
@@ -251,23 +249,29 @@ def get_kubernetes_clusters(cluster_ids: set):
                                 container['resources']['usage'] = container_metrics['usage']
         except:
             logging.exception('Failed to get metrics')
-        clusters.append({'id': cluster_id, 'api_server_url': api_server_url, 'nodes': nodes, 'unassigned_pods': unassigned_pods})
-    return clusters
+        yield {'id': cluster_id, 'api_server_url': api_server_url, 'nodes': nodes, 'unassigned_pods': unassigned_pods}
 
 
-@app.route('/kubernetes-clusters')
+def event(cluster_ids: set):
+    while True:
+        if MOCK:
+            clusters = get_mock_clusters(cluster_ids)
+        else:
+            clusters = get_kubernetes_clusters(cluster_ids)
+        for cluster in clusters:
+            yield 'event: kubernetes-cluster\ndata: ' + json.dumps(cluster, separators=(',', ':')) + '\n\n'
+        gevent.sleep(5)
+
+
+@app.route('/events')
 @authorize
-def get_clusters():
+def get_events():
+    '''SSE (Server Side Events), for an EventSource'''
     cluster_ids = set()
-    for _id in flask.request.args.get('id', '').split():
+    for _id in flask.request.args.get('cluster_ids', '').split():
         if _id:
             cluster_ids.add(_id)
-    if MOCK:
-        clusters = get_mock_clusters(cluster_ids)
-    else:
-        clusters = get_kubernetes_clusters(cluster_ids)
-
-    return json.dumps({'kubernetes_clusters': clusters}, separators=(',', ':'))
+    return flask.Response(event(cluster_ids), mimetype='text/event-stream')
 
 
 @app.route('/login')

app/src/app.js

@@ -17,6 +17,8 @@ export default class App {
         this.seenPods = new Set()
         this.sorterFn = ''
         this.theme = Theme.get(localStorage.getItem('theme'))
+        this.eventSource = null
+        this.clusters = []
     }
 
     parseLocationHash() {
@@ -365,26 +367,37 @@ export default class App {
         this.update(this.clusters)
     }
 
+    listen() {
+        if (this.eventSource != null) {
+            this.eventSource.close()
+            this.eventSource = null
+        }
+        const that = this
+        const clusterIds = Array.from(this.selectedClusters).join(',')
+        const eventSource = this.eventSource = new EventSource('/events?cluster_ids=' + clusterIds, {credentials: 'include'})
+        eventSource.onerror = function(event) {
+            that.listen()
+        }
+        eventSource.addEventListener('kubernetes-cluster', function(event) {
+            const cluster = JSON.parse(event.data)
+            let found = false
+            for (let i=0; i<that.clusters.length; i++) {
+                if (that.clusters[i]['id'] == cluster['id']) {
+                    that.clusters[i] = cluster
+                    found = true
+                }
+            }
+            if (!found) {
+                that.clusters.push(cluster)
+            }
+            that.update(that.clusters)
+        })
+    }
+
     run() {
         this.initialize()
         this.draw()
-
-        const that = this
-
-        function fetchData() {
-            const clusterIds = Array.from(that.selectedClusters).join(',')
-            fetch('kubernetes-clusters?id=' + clusterIds, {credentials: 'include'})
-                .then(function (response) {
-                    return response.json()
-                })
-                .then(function (json) {
-                    const clusters = json.kubernetes_clusters
-                    that.update(clusters)
-                })
-            window.setTimeout(fetchData, 5000)
-        }
-
-        fetchData()
+        this.listen()
 
         PIXI.ticker.shared.add(this.tick, this)
     }