From b3f662945a0a9519735565a862ba4f75eb820b42 Mon Sep 17 00:00:00 2001
From: Aurélien Bompard <aurelien@bompard.org>
Date: Jun 21 2017 13:41:17 +0000
Subject: Setup SSE as a global element used to reload widgets


---

diff --git a/hubs/default_config.py b/hubs/default_config.py
index 72cda31..917840b 100644
--- a/hubs/default_config.py
+++ b/hubs/default_config.py
@@ -11,7 +11,10 @@ PROMOTED_GROUPS = [
 
 HUB_OF_THE_MONTH = 'commops'
 
-SSE_URL = 'http://localhost:8080/user/'
+SSE_URL = {
+    "port": "8080",
+    "path": "/sse",
+}
 PLUS_PLUS_URL = 'http://localhost:5001/user/'
 PLUS_PLUS_TOKEN = 'thisismytoken'
 
diff --git a/hubs/static/client/app/components/feed/ItemsGetter.jsx b/hubs/static/client/app/components/feed/ItemsGetter.jsx
index 16d87de..bfc51a8 100644
--- a/hubs/static/client/app/components/feed/ItemsGetter.jsx
+++ b/hubs/static/client/app/components/feed/ItemsGetter.jsx
@@ -9,68 +9,71 @@ export default class ItemsGetter extends React.Component {
       sseError: false,
       loading: false,
     };
-    this.source = null;
-    this.setupSource = this.setupSource.bind(this);
-    this.handleEventError = this.handleEventError.bind(this);
-    this.loadExistingFromServer = this.loadExistingFromServer.bind(this);
+    this.sseSource = null;
+    this.setupSSESource = this.setupSSESource.bind(this);
+    this.handleSSEEvent = this.handleSSEEvent.bind(this);
+    this.handleSSEEventError = this.handleSSEEventError.bind(this);
+    this.loadFromServer = this.loadFromServer.bind(this);
   }
 
   componentDidMount() {
-    this.loadExistingFromServer();
+    this.setupSSESource();
+    this.loadFromServer();
   }
 
   componentWillUnmount() {
     this.serverRequest.abort();
-    if (this.source !== null) {
-      this.source.removeEventListener('error', this.handleEventError);
-      this.source.close();
+    if (this.sseSource) {
+      this.sseSource.removeEventListener(
+        this.props.sseEventName, this.this.props.handleSSEEvent);
+      this.sseSource.removeEventListener('error', this.handleSSEEventError);
     }
   }
 
-  componentDidUpdate(prevProps, prevState) {
-    if (this.props.sseActive && !this.source) {
-      // Only setup the source after the initial loading, or new elements may
-      // be overwritten by the call to this.props.handleInitialData().
-      this.setupSource();
-    }
-  }
-
-  setupSource() {
-    if (!this.props.urls.sse) {
+  setupSSESource() {
+    //if (!this.props.sseEventName || !this.props.handleSSEEvent) {
+    if (!this.props.sse.eventName || !this.props.sse.shouldReload) {
       // Auto-update is disabled.
       return;
     }
 
-    if (!window.EventSource) {
-      this.setState({
-        sseError: ("Cannot auto-update the feed, you will have to refresh "
-                  +"the page manually to see new elements.")
-      });
+    this.sseSource = document.sseSource;
+    if (!this.sseSource || this.sseSource.readyState === EventSource.CLOSED) {
+      this.handleSSEEventError();
       return;
     }
 
-    this.source = new EventSource(this.props.urls.sse);
-    this.source.addEventListener('error', this.handleEventError);
-    this.source.onmessage = (resp) => {
-      this.props.handleMessage(JSON.parse(resp.data));
-    };
+    this.sseSource.addEventListener('error', this.handleSSEEventError);
+    this.sseSource.addEventListener(
+      this.props.sse.eventName, this.handleSSEEvent);
   }
 
-  handleEventError() {
+  handleSSEEvent(e) {
+    if (this.props.sse.shouldReload(e.data)) {
+      this.loadFromServer();
+    }
+  }
+
+  handleSSEEventError() {
     this.setState({
-      sseError: "There was an error retrieving the new elements."
+      sseError: ("Cannot auto-update the feed, you will have to refresh "
+                +"the page manually to see new elements.")
     });
   }
 
-  loadExistingFromServer() {
+  loadFromServer() {
     this.setState({loading: true});
+    if (this.serverRequest &&
+        this.serverRequest.readyState !== XMLHttpRequest.DONE) {
+      this.serverRequest.abort();
+    }
     this.serverRequest = $.ajax({
-      url: this.props.urls.content,
+      url: this.props.url,
       method: 'GET',
       dataType: 'json',
       cache: false,
       success: (data, textStatus, jqXHR) => {
-        this.props.handleInitialData(data.data);
+        this.props.handleData(data.data);
       },
       error: (xhr, status, err) => {
         console.error(status, err.toString());
diff --git a/hubs/static/client/app/components/feed/__tests__/Feed.test.js b/hubs/static/client/app/components/feed/__tests__/Feed.test.js
index d1cdf24..9f2e9be 100644
--- a/hubs/static/client/app/components/feed/__tests__/Feed.test.js
+++ b/hubs/static/client/app/components/feed/__tests__/Feed.test.js
@@ -23,7 +23,7 @@ describe('Feed', () => {
 
   it('should create the children', () => {
     const component = TestUtils.renderIntoDocument(
-      <Feed items={items} messageLimit={100} />
+      <Feed items={items} />
     );
     const node = ReactDOM.findDOMNode(component);
     expect(Panel.mock.calls.length).toEqual(3);
diff --git a/hubs/static/client/app/core/Streams.jsx b/hubs/static/client/app/core/Streams.jsx
index 144fab7..a681951 100644
--- a/hubs/static/client/app/core/Streams.jsx
+++ b/hubs/static/client/app/core/Streams.jsx
@@ -16,35 +16,21 @@ export default class Streams extends React.Component {
     this.state = {
       notifItems: [],
       savedItems: [],
-      sseActive: false,
     };
-    this.handleInitialData = this.handleInitialData.bind(this);
-    this.handleInitialSavedData = this.handleInitialSavedData.bind(this);
-    this.handleMessage = this.handleMessage.bind(this);
+    this.handleStreamData = this.handleStreamData.bind(this);
+    this.handleSavedData = this.handleSavedData.bind(this);
     this.handleSave = this.handleSave.bind(this);
     this.handleUnsave = this.handleUnsave.bind(this);
   }
 
-  handleInitialData(data) {
-    // Only activate SSE after the initial loading, or new elements may
-    // be overwritten.
-    this.setState({
-      notifItems: data,
-      sseActive: true,
-    });
+  handleStreamData(data) {
+    this.setState({notifItems: data});
   }
 
-  handleInitialSavedData(data) {
+  handleSavedData(data) {
     this.setState({savedItems: data});
   }
 
-  handleMessage(msg) {
-    var items = this.state.notifItems;
-    items.unshift(msg);
-    items = items.slice(0, this.props.messageLimit);
-    this.setState({notifItems: items});
-  }
-
   handleSave(item) {
     if (!this.props.urls.saved) { return; }
     const payload = {
@@ -103,14 +89,16 @@ export default class Streams extends React.Component {
       <IntlProvider locale={navigator.language}>
         <TabSet tabListClass="mb-3">
           <FeedPanel
-            hub={this.props.hub}
+            username={this.props.username}
             tabTitle="My Stream"
             >
             <ItemsGetter
-              sseActive={this.state.sseActive}
-              urls={this.props.urls}
-              handleMessage={this.handleMessage}
-              handleInitialData={this.handleInitialData}
+              url={this.props.urls.content}
+              sse={{
+                eventName: "hubs:new-notification",
+                shouldReload: (username) => (username === this.props.username),
+              }}
+              handleData={this.handleStreamData}
               >
               <Feed
                 items={notifs}
@@ -120,7 +108,7 @@ export default class Streams extends React.Component {
             </ItemsGetter>
           </FeedPanel>
           <FeedPanel
-            hub={this.props.hub}
+            username={this.props.username}
             tabTitle="My Actions"
             >
             <Feed
@@ -128,12 +116,12 @@ export default class Streams extends React.Component {
               />
           </FeedPanel>
           <FeedPanel
-            hub={this.props.hub}
+            username={this.props.username}
             tabTitle="Saved Notifications"
             >
             <ItemsGetter
-              urls={{content: this.props.urls.saved}}
-              handleInitialData={this.handleInitialSavedData}
+              url={this.props.urls.saved}
+              handleData={this.handleSavedData}
               >
               <Feed
                 items={this.state.savedItems}
@@ -151,7 +139,7 @@ export default class Streams extends React.Component {
 class FeedPanel extends React.Component {
 
   render() {
-    const filters_url = `https://apps.fedoraproject.org/notifications/${this.props.hub}.id.fedoraproject.org/`;
+    const filters_url = `https://apps.fedoraproject.org/notifications/${this.props.username}.id.fedoraproject.org/`;
 
     return (
       <div>
diff --git a/hubs/static/client/app/widgets/feed/Widget.jsx b/hubs/static/client/app/widgets/feed/Widget.jsx
index 38a006d..ded612e 100644
--- a/hubs/static/client/app/widgets/feed/Widget.jsx
+++ b/hubs/static/client/app/widgets/feed/Widget.jsx
@@ -9,95 +9,26 @@ export default class Widget extends React.Component {
     super(props);
     this.state = {
       items: [],
-      sseActive: false,
     };
-    this.handleInitialData = this.handleInitialData.bind(this);
-    this.handleMessage = this.handleMessage.bind(this);
-    this.handleSave = this.handleSave.bind(this);
-    this.handleUnsave = this.handleUnsave.bind(this);
+    this.handleServerData = this.handleServerData.bind(this);
   }
 
-  handleInitialData(data) {
-    // Only activate SSE after the initial loading, or new elements may
-    // be overwritten.
-    this.setState({
-      items: data,
-      sseActive: true,
-    });
-  }
-
-  handleMessage(msg) {
-    if (this.state.items.length >= this.props.messageLimit) {
-      this.state.items.pop();
-    }
-    this.state.items.unshift(msg);
-    this.setState({items: this.state.items});
-  }
-
-  handleSave(item) {
-    if (!this.props.urls.save) { return; }
-    const payload = {
-      link: item.link,
-      markup: item.markup,
-      secondary_icon: item.secondary_icon,
-      dom_id: item.dom_id,
-    };
-    $.ajax({
-      type: 'POST',
-      url: this.props.urls.save,
-      data: JSON.stringify(payload),
-      contentType: 'application/json',
-      success: () => {
-        this.setState((prevState, props) => {
-          var items = prevState.items.map((currentItem) => {
-            if (currentItem.dom_id === item.dom_id) {
-              currentItem.saved = true;
-            }
-            return currentItem;
-          })
-          return {items};
-        });
-      },
-    });
-  }
-
-  handleUnsave(item) {
-    if (!this.props.urls.save) { return; }
-    var updateItemState = (item) => {
-      this.setState((prevState, props) => {
-        var items = prevState.items.map((currentItem) => {
-          if (currentItem.dom_id === item.dom_id) {
-            currentItem.saved = false;
-          }
-          return currentItem;
-        });
-        return {items};
-      });
-    };
-    if (item.idx) {
-      // Already saved
-      $.ajax({
-        type: 'DELETE',
-        url: `${this.props.urls.save}${item.idx}/`,
-        success: () => { updateItemState(item) },
-      });
-    } else {
-      updateItemState(item);
-    }
+  handleServerData(data) {
+    this.setState({items: data});
   }
 
   render() {
     return (
       <ItemsGetter
-        sseActive={this.state.sseActive}
-        urls={this.props.urls}
-        handleMessage={this.handleMessage}
-        handleInitialData={this.handleInitialData}
+        url={this.props.url}
+        sse={{
+          eventName: "hubs:widget-updated",
+          shouldReload: (idx) => (idx === this.props.widgetIdx),
+        }}
+        handleData={this.handleServerData}
         >
         <Feed
           items={this.state.items}
-          handleSave={this.handleSave}
-          handleUnsave={this.handleUnsave}
           />
       </ItemsGetter>
     );
diff --git a/hubs/static/js/utils.js b/hubs/static/js/utils.js
index 3474786..1f33870 100644
--- a/hubs/static/js/utils.js
+++ b/hubs/static/js/utils.js
@@ -32,3 +32,30 @@ function setup_widgets() {
         });
     });
 }
+
+function setup_sse(url) {
+    if (!url || !window.EventSource) {
+      // Auto-update is disabled.
+      return;
+    }
+    var sseSource = new EventSource(url);
+    sseSource.addEventListener("hubs:widget-updated", function(e) {
+        var widget = $("#widget-" + e.data);
+        if (widget.find("div.card[data-disable-autoreload]").length !== 0) { return; }
+        $.ajax({
+            url: widget.attr("data-url"),
+            dataType: 'html',
+            success: function(html) {
+                widget.css("opacity", "0.5");
+                widget.html(html);
+                widget.animate({opacity: 1}, 200);
+            },
+            error: function() {
+                console.log('error updating the widget');
+                console.trace();
+            },
+        });
+    });
+    // Make it accessible by other components on the page.
+    document.sseSource = sseSource;
+  }
diff --git a/hubs/templates/hubs.html b/hubs/templates/hubs.html
index c0f1a84..d39d1ca 100644
--- a/hubs/templates/hubs.html
+++ b/hubs/templates/hubs.html
@@ -323,6 +323,7 @@ $(function() {
   visit_counter()
 
   setup_widgets();
+  setup_sse({{ sse_url | tojson }});
   setup_edit_btns();
   {% if hub.allows(g.auth.user, "config") %}
   setup_settings();
diff --git a/hubs/templates/stream.html b/hubs/templates/stream.html
index cae069f..4292f6d 100644
--- a/hubs/templates/stream.html
+++ b/hubs/templates/stream.html
@@ -29,14 +29,13 @@
 {{ super() }}
 <script>
  $(function() {
-    setup_widgets();
+    setup_sse({{ sse_url | tojson }});
     const StreamsElement = React.createElement(Hubs.Streams, {
-        hub: {{ hub.name | tojson }},
+        username: {{ g.auth.nickname | tojson }},
         urls: {
             saved: {{ url_for("saved_notifs") | tojson }},
             content: {{ url_for("stream_existing") | tojson }},
         },
-        messageLimit: 100,
     });
     ReactDOM.render(StreamsElement, document.getElementById('streams'));
  });
diff --git a/hubs/tests/__init__.py b/hubs/tests/__init__.py
index c060b42..a57c0c1 100644
--- a/hubs/tests/__init__.py
+++ b/hubs/tests/__init__.py
@@ -202,3 +202,19 @@ def captured_templates(app):
         yield recorded
     finally:
         template_rendered.disconnect(record, app)
+
+
+@contextmanager
+def app_config(app, config):
+    """Context manager to change the application's configuration
+
+    Args:
+        app: The application.
+        config: The configuration to set temporarily.
+    """
+    original_config = app.config.__dict__
+    app.config.update(config)
+    try:
+        yield
+    finally:
+        app.config.__dict__ = original_config
diff --git a/hubs/tests/test_view_utils.py b/hubs/tests/test_view_utils.py
index 64b6aee..6a6d116 100644
--- a/hubs/tests/test_view_utils.py
+++ b/hubs/tests/test_view_utils.py
@@ -1,9 +1,11 @@
 from __future__ import unicode_literals
 
+import flask
+
 import hubs.models
 from hubs.app import app
-from hubs.tests import APPTest, FakeAuthorization, auth_set
-from hubs.utils.views import get_visible_widgets
+from hubs.tests import APPTest, FakeAuthorization, auth_set, app_config
+from hubs.utils.views import get_visible_widgets, get_sse_url
 
 
 class ViewUtilsTest(APPTest):
@@ -84,3 +86,31 @@ class ViewUtilsTest(APPTest):
             widgets = get_visible_widgets(hub)
         self.assertNotEqual(len(widgets["left"]), 0)
         self.assertNotEqual(len(widgets["right"]), 0)
+
+    def test_sse_url(self):
+        with app.test_request_context():
+            self.assertEqual(get_sse_url(), "http://localhost:8080/sse")
+
+        with app.test_request_context(base_url='http://hubs.example.com/'):
+            self.assertEqual(get_sse_url(), "http://hubs.example.com:8080/sse")
+
+        with app.test_request_context(base_url='http://example.com/hubs'):
+            self.assertEqual(flask.url_for("index"), "/hubs/")  # test validity
+            self.assertEqual(get_sse_url(), "http://example.com:8080/sse")
+
+        with app.test_request_context(base_url='http://hubs.example.com/'):
+            with app_config(app, {
+                    "SSE_URL": {"host": "hubs-sse.example.com"}
+                    }):
+                self.assertEqual(get_sse_url(), "http://hubs-sse.example.com/")
+
+        with app.test_request_context(base_url='http://hubs.example.com/'):
+            with app_config(app, {
+                    "SSE_URL": {"host": "hubs-sse.example.com",
+                                "port": 8080}
+                    }):
+                self.assertEqual(get_sse_url(), "http://hubs-sse.example.com:8080/")
+
+        with app.test_request_context(base_url='http://localhost/hubs'):
+            with app_config(app, {"SSE_URL": {"host": "example.com"}}):
+                self.assertEqual(get_sse_url(), "http://example.com/")
diff --git a/hubs/utils/views.py b/hubs/utils/views.py
index 2ceb399..4a4c63a 100644
--- a/hubs/utils/views.py
+++ b/hubs/utils/views.py
@@ -286,3 +286,24 @@ class RequestValidator(object):
         if errors:
             raise ValueError(errors)
         return values
+
+
+def get_sse_url():
+    """Build the SSE URL."""
+    # Avoid circular import with widgets.
+    from hubs.app import app
+    # TODO: have a page (hub, user stream, ...) specific SSE URL to only
+    # subscribe to relevant messages.
+    base_url = flask.url_for("index", _external=True)
+    base_url = urlparse.urlsplit(base_url)
+    conf = app.config["SSE_URL"]
+    host = conf.get("host") or base_url.hostname
+    port = conf.get("port") or base_url.port
+    netloc = host
+    if port:
+        netloc = "{}:{}".format(host, port)
+    path = urlparse.urljoin(base_url.path, conf.get("path", "/"))
+    return urlparse.urlunsplit([
+        conf.get("scheme") or base_url.scheme,
+        netloc, path, "", "",
+    ])
diff --git a/hubs/views/hub.py b/hubs/views/hub.py
index adcf65e..5496503 100644
--- a/hubs/views/hub.py
+++ b/hubs/views/hub.py
@@ -6,8 +6,8 @@ import hubs.models
 
 from hubs.app import app
 from hubs.utils.views import (
-    get_hub, get_visible_widgets, login_required, RequestValidator,
-    require_hub_access,
+    get_hub, get_sse_url, get_visible_widgets, login_required,
+    RequestValidator, require_hub_access,
     )
 
 
@@ -18,7 +18,12 @@ def hub(name):
     hub = get_hub(name, load_config=True)
     widgets = get_visible_widgets(hub)
     return flask.render_template(
-        'hubs.html', hub=hub, widgets=widgets, edit=False)
+        'hubs.html',
+        hub=hub,
+        widgets=widgets,
+        edit=False,
+        sse_url=get_sse_url(),
+        )
 
 
 @app.route('/<name>/json/')
diff --git a/hubs/views/user.py b/hubs/views/user.py
index 0306821..a5cc00d 100644
--- a/hubs/views/user.py
+++ b/hubs/views/user.py
@@ -7,7 +7,8 @@ import hubs.feed
 
 from hubs.app import app
 from hubs.utils.views import (
-    login_required, get_hub, get_visible_widgets, require_hub_access,
+    login_required, get_hub, get_sse_url, get_visible_widgets,
+    require_hub_access,
     )
 
 
@@ -22,6 +23,7 @@ def stream():
         'stream.html',
         hub=hub,
         widgets=widgets,
+        sse_url=get_sse_url(),
     )
 
 
diff --git a/hubs/widgets/feed/__init__.py b/hubs/widgets/feed/__init__.py
index 730150d..eb0db3c 100644
--- a/hubs/widgets/feed/__init__.py
+++ b/hubs/widgets/feed/__init__.py
@@ -4,6 +4,7 @@ from __future__ import unicode_literals, absolute_import
 import logging
 
 import hubs.feed
+from hubs.views.utils import get_sse_url
 from hubs.widgets import validators
 from hubs.widgets.base import Widget, WidgetView
 
@@ -36,13 +37,10 @@ class BaseView(WidgetView):
     template_name = "feed.html"
 
     def get_context(self, instance, *args, **kwargs):
-        # Avoid circular import
-        from hubs.app import app
-        sse_url = app.config['SSE_URL'] + username
         return dict(
             title=self.widget.label,
-            message_limit=instance.config["message_limit"],
-            sse_url=sse_url,
+            sse_url=get_sse_url(),
+            disable_autoreload=True,
             )
 
 
diff --git a/hubs/widgets/feed/templates/feed.html b/hubs/widgets/feed/templates/feed.html
index 87fbafa..f687dd4 100644
--- a/hubs/widgets/feed/templates/feed.html
+++ b/hubs/widgets/feed/templates/feed.html
@@ -9,11 +9,8 @@
 <script>
 (function() {
     const FeedElement = React.createElement(Feed.Widget, {
-        urls: {
-            content: {{ url_for("feed_existing", hub=widget_instance.hub.name, idx=widget_instance.idx) | tojson }},
-            sse: {{ sse_url|tojson }},
-        },
-        messageLimit: {{ message_limit }}
+        url: {{ url_for("feed_existing", hub=widget_instance.hub.name, idx=widget_instance.idx) | tojson }},
+        widgetIdx: {{ widget_instance.idx | tojson }}
     });
     ReactDOM.render(FeedElement, document.getElementById('feed-' + {{ widget_instance.idx | tojson }}));
 })();
diff --git a/hubs/widgets/halp/views.py b/hubs/widgets/halp/views.py
index eaa46ac..ada528b 100644
--- a/hubs/widgets/halp/views.py
+++ b/hubs/widgets/halp/views.py
@@ -30,6 +30,7 @@ class BaseView(WidgetView):
         return dict(
             hubs=instance.config.get("hubs", []),
             title=self.widget.label,
+            disable_autoreload=True,
             )
 
 
diff --git a/hubs/widgets/templates/panel.html b/hubs/widgets/templates/panel.html
index de62d35..fa39d4e 100644
--- a/hubs/widgets/templates/panel.html
+++ b/hubs/widgets/templates/panel.html
@@ -1,4 +1,6 @@
-<div class="card {{ panel_css_class }} widget-{{ widget.name }}">
+<div class="card {{ panel_css_class }} widget-{{ widget.name }}"
+     {% if disable_autoreload %}data-disable-autoreload="true"{% endif %}
+    >
   <div class="widget-buttons">
     <!-- the AGPLv3 wrapper puts the source url in all responses -->
     <a href="{{ url_for('widget_source', name=widget.name) }}"><span><i class="fa fa-eye" aria-hidden="true"></i></span></a>