frontend: reorganize how we handle plugins

rhodecode/public/js/src/rhodecode/connection_controller.js

@@ -1,219 +1,225 b''
 "use strict";
 /** leak object to top level scope **/
 var ccLog = undefined;
 // global code-mirror logger;, to enable run
 // Logger.get('ConnectionController').setLevel(Logger.DEBUG)
 ccLog = Logger.get('ConnectionController');
 ccLog.setLevel(Logger.OFF);
 
 var ConnectionController;
 var connCtrlr;
 var registerViewChannels;
 
 (function () {
     ConnectionController = function (webappUrl, serverUrl, urls) {
         var self = this;
 
         var channels = ['broadcast'];
         this.state = {
             open: false,
             webappUrl: webappUrl,
             serverUrl: serverUrl,
             connId: null,
             socket: null,
             channels: channels,
             heartbeat: null,
             channelsInfo: {},
             urls: urls
         };
         this.channelNameParsers = [];
 
         this.addChannelNameParser = function (fn) {
             if (this.channelNameParsers.indexOf(fn) === -1) {
                 this.channelNameParsers.push(fn);
             }
         };
 
         this.listen = function () {
             if (window.WebSocket) {
                 ccLog.debug('attempting to create socket');
                 var socket_url = self.state.serverUrl + "/ws?conn_id=" + self.state.connId;
                 var socket_conf = {
                     url: socket_url,
                     handleAs: 'json',
                     headers: {
                         "Accept": "application/json",
                         "Content-Type": "application/json"
                     }
                 };
                 self.state.socket = new WebSocket(socket_conf.url);
 
                 self.state.socket.onopen = function (event) {
                     ccLog.debug('open event', event);
                     if (self.state.heartbeat === null) {
                         self.state.heartbeat = setInterval(function () {
                             if (self.state.socket.readyState === WebSocket.OPEN) {
                                 self.state.socket.send('heartbeat');
                             }
                         }, 10000)
                     }
                 };
                 self.state.socket.onmessage = function (event) {
                     var data = $.parseJSON(event.data);
                     for (var i = 0; i < data.length; i++) {
                         if (data[i].message.topic) {
                             ccLog.debug('publishing',
                                 data[i].message.topic, data[i]);
                             $.Topic(data[i].message.topic).publish(data[i])
                         }
                         else {
                             ccLog.warn('unhandled message', data);
                         }
                     }
                 };
                 self.state.socket.onclose = function (event) {
                     ccLog.debug('closed event', event);
                     setTimeout(function () {
                         self.connect(true);
                     }, 5000);
                 };
 
                 self.state.socket.onerror = function (event) {
                     ccLog.debug('error event', event);
                 };
             }
             else {
                 ccLog.debug('attempting to create long polling connection');
                 var poolUrl = self.state.serverUrl + "/listen?conn_id=" + self.state.connId;
                 self.state.socket = $.ajax({
                     url: poolUrl
                 }).done(function (data) {
                     ccLog.debug('data', data);
                     var data = $.parseJSON(data);
                     for (var i = 0; i < data.length; i++) {
                         if (data[i].message.topic) {
                             ccLog.info('publishing',
                                 data[i].message.topic, data[i]);
                             $.Topic(data[i].message.topic).publish(data[i])
                         }
                         else {
                             ccLog.warn('unhandled message', data);
                         }
                     }
                     self.listen();
                 }).fail(function () {
                     ccLog.debug('longpoll error');
                     setTimeout(function () {
                         self.connect(true);
                     }, 5000);
                 });
             }
 
         };
 
         this.connect = function (create_new_socket) {
             var connReq = {'channels': self.state.channels};
             ccLog.debug('try obtaining connection info', connReq);
             $.ajax({
                 url: self.state.urls.connect,
                 type: "POST",
                 contentType: "application/json",
                 data: JSON.stringify(connReq),
                 dataType: "json"
             }).done(function (data) {
                 ccLog.debug('Got connection:', data.conn_id);
                 self.state.channels = data.channels;
                 self.state.channelsInfo = data.channels_info;
                 self.state.connId = data.conn_id;
                 if (create_new_socket) {
                     self.listen();
                 }
                 self.update();
             }).fail(function () {
                 setTimeout(function () {
                     self.connect(create_new_socket);
                 }, 5000);
             });
             self.update();
         };
 
         this.subscribeToChannels = function (channels) {
             var new_channels = [];
             for (var i = 0; i < channels.length; i++) {
                 var channel = channels[i];
                 if (self.state.channels.indexOf(channel)) {
                     self.state.channels.push(channel);
                     new_channels.push(channel)
                 }
             }
             /**
              * only execute the request if socket is present because subscribe
              * can actually add channels before initial app connection
              **/
             if (new_channels && self.state.socket !== null) {
                 var connReq = {
                     'channels': self.state.channels,
                     'conn_id': self.state.connId
                 };
                 $.ajax({
                     url: self.state.urls.subscribe,
                     type: "POST",
                     contentType: "application/json",
                     data: JSON.stringify(connReq),
                     dataType: "json"
                 }).done(function (data) {
                     self.state.channels = data.channels;
                     self.state.channelsInfo = data.channels_info;
                     self.update();
                 });
             }
             self.update();
         };
 
         this.update = function () {
             for (var key in this.state.channelsInfo) {
                 if (this.state.channelsInfo.hasOwnProperty(key)) {
                     // update channels with latest info
                     $.Topic('/connection_controller/channel_update').publish(
                         {channel: key, state: this.state.channelsInfo[key]});
                 }
             }
             /**
              * checks current channel list in state and if channel is not present
              * converts them into executable "commands" and pushes them on topics
              */
             for (var i = 0; i < this.state.channels.length; i++) {
                 var channel = this.state.channels[i];
                 for (var j = 0; j < this.channelNameParsers.length; j++) {
                     this.channelNameParsers[j](channel);
                 }
             }
         };
 
         this.run = function () {
             this.connect(true);
         };
 
         $.Topic('/connection_controller/subscribe').subscribe(
             self.subscribeToChannels);
     };
 
     $.Topic('/plugins/__REGISTER__').subscribe(function (data) {
-        // enable chat controller
         if (window.CHANNELSTREAM_SETTINGS && window.CHANNELSTREAM_SETTINGS.enabled) {
+            connCtrlr = new ConnectionController(
+                CHANNELSTREAM_SETTINGS.webapp_location,
+                CHANNELSTREAM_SETTINGS.ws_location,
+                CHANNELSTREAM_URLS
+            );
+            registerViewChannels();
+
             $(document).ready(function () {
                 connCtrlr.run();
             });
         }
     });
 
 registerViewChannels = function (){
     // subscribe to PR repo channel for PR's'
     if (templateContext.pull_request_data.pull_request_id) {
         var channelName = '/repo$' + templateContext.repo_name + '$/pr/' +
             String(templateContext.pull_request_data.pull_request_id);
         connCtrlr.state.channels.push(channelName);
     }
 }
 
 })();

rhodecode/templates/base/plugins_base.html

@@ -1,14 +1,11 b''
 <%
 from pyramid.renderers import render as pyramid_render
 from pyramid.threadlocal import get_current_registry, get_current_request
 pyramid_registry = get_current_registry()
 %>
 % for plugin, config in getattr(pyramid_registry, 'rhodecode_plugins', {}).items():
 % if config['template_hooks'].get('plugin_init_template'):
 ${pyramid_render(config['template_hooks'].get('plugin_init_template'),
 {'config':config}, request=get_current_request(), package='rc_ae')|n}
 % endif
 % endfor
-<script>
-    $.Topic('/plugins/__REGISTER__').prepareOrPublish({});
-</script>

rhodecode/templates/base/root.html

@@ -1,177 +1,179 b''
 ## -*- coding: utf-8 -*-
 <!DOCTYPE html>
 
 <%
 c.template_context['repo_name'] = getattr(c, 'repo_name', '')
 
 if hasattr(c, 'rhodecode_db_repo'):
     c.template_context['repo_type'] = c.rhodecode_db_repo.repo_type
     c.template_context['repo_landing_commit'] = c.rhodecode_db_repo.landing_rev[1]
 
 if getattr(c, 'rhodecode_user', None) and c.rhodecode_user.user_id:
     c.template_context['rhodecode_user']['username'] = c.rhodecode_user.username
     c.template_context['rhodecode_user']['email'] = c.rhodecode_user.email
     c.template_context['rhodecode_user']['notification_status'] = c.rhodecode_user.get_instance().user_data.get('notification_status', True)
 
 c.template_context['visual']['default_renderer'] = h.get_visual_attr(c, 'default_renderer')
 %>
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <title>${self.title()}</title>
         <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
         <%def name="robots()">
             <meta name="robots" content="index, nofollow"/>
         </%def>
         ${self.robots()}
         <link rel="icon" href="${h.asset('images/favicon.ico', ver=c.rhodecode_version_hash)}" sizes="16x16 32x32" type="image/png" />
 
         ## CSS definitions
         <%def name="css()">
             <link rel="stylesheet" type="text/css" href="${h.asset('css/style.css', ver=c.rhodecode_version_hash)}" media="screen"/>
             <!--[if lt IE 9]>
                 <link rel="stylesheet" type="text/css" href="${h.asset('css/ie.css', ver=c.rhodecode_version_hash)}" media="screen"/>
             <![endif]-->
             ## EXTRA FOR CSS
             ${self.css_extra()}
         </%def>
         ## CSS EXTRA - optionally inject some extra CSS stuff needed for specific websites
         <%def name="css_extra()">
         </%def>
 
         ${self.css()}
 
         ## JAVASCRIPT
         <%def name="js()">
             <script>
                 // setup Polymer options
                 window.Polymer = {lazyRegister: true, dom: 'shadow'};
 
                 // Load webcomponentsjs polyfill if browser does not support native Web Components
                 (function() {
                     'use strict';
                     var onload = function() {
                         // For native Imports, manually fire WebComponentsReady so user code
                         // can use the same code path for native and polyfill'd imports.
                         if (!window.HTMLImports) {
                             document.dispatchEvent(
                                     new CustomEvent('WebComponentsReady', {bubbles: true})
                             );
                         }
                     };
                     var webComponentsSupported = (
                             'registerElement' in document
                             && 'import' in document.createElement('link')
                             && 'content' in document.createElement('template')
                     );
                     if (!webComponentsSupported) {
                         var e = document.createElement('script');
                         e.async = true;
                         e.src = '${h.asset('js/vendors/webcomponentsjs/webcomponents-lite.min.js', ver=c.rhodecode_version_hash)}';
                         document.head.appendChild(e);
                     } else {
                         onload();
                     }
                 })();
             </script>
 
             <script src="${h.asset('js/rhodecode/i18n/%s.js' % c.language, ver=c.rhodecode_version_hash)}"></script>
             <script type="text/javascript">
             // register templateContext to pass template variables to JS
             var templateContext = ${h.json.dumps(c.template_context)|n};
 
             var REPO_NAME = "${getattr(c, 'repo_name', '')}";
             %if hasattr(c, 'rhodecode_db_repo'):
             var REPO_LANDING_REV = '${c.rhodecode_db_repo.landing_rev[1]}';
             var REPO_TYPE = '${c.rhodecode_db_repo.repo_type}';
             %else:
             var REPO_LANDING_REV = '';
             var REPO_TYPE = '';
             %endif
             var APPLICATION_URL = "${h.url('home').rstrip('/')}";
             var ASSET_URL = "${h.asset('')}";
             var DEFAULT_RENDERER = "${h.get_visual_attr(c, 'default_renderer')}";
             var CSRF_TOKEN = "${getattr(c, 'csrf_token', '')}";
             % if getattr(c, 'rhodecode_user', None):
             var USER = {name:'${c.rhodecode_user.username}'};
             % else:
             var USER = {name:null};
             % endif
 
             var APPENLIGHT = {
               enabled: ${'true' if getattr(c, 'appenlight_enabled', False) else 'false'},
               key: '${getattr(c, "appenlight_api_public_key", "")}',
               % if getattr(c, 'appenlight_server_url', None):
                   serverUrl: '${getattr(c, "appenlight_server_url", "")}',
               % endif
               requestInfo: {
               % if getattr(c, 'rhodecode_user', None):
                   ip: '${c.rhodecode_user.ip_addr}',
                   username: '${c.rhodecode_user.username}'
               % endif
               }
             };
             </script>
+            <%include file="/base/plugins_base.html"/>
             <!--[if lt IE 9]>
             <script language="javascript" type="text/javascript" src="${h.asset('js/excanvas.min.js')}"></script>
             <![endif]-->
             <script language="javascript" type="text/javascript" src="${h.asset('js/rhodecode/routes.js', ver=c.rhodecode_version_hash)}"></script>
             <script language="javascript" type="text/javascript" src="${h.asset('js/scripts.js', ver=c.rhodecode_version_hash)}"></script>
             <script>
                 var e = document.createElement('script');
                 e.src = '${h.asset('js/rhodecode-components.js', ver=c.rhodecode_version_hash)}';
                 document.head.appendChild(e);
             </script>
             <link rel="import" href="${h.asset('js/rhodecode-components.html', ver=c.rhodecode_version_hash)}">
             ## avoide escaping the %N
             <script>CodeMirror.modeURL = "${h.asset('') + 'js/mode/%N/%N.js?ver='+c.rhodecode_version_hash}";</script>
 
 
             ## JAVASCRIPT EXTRA - optionally inject some extra JS for specificed templates
             ${self.js_extra()}
 
             <script type="text/javascript">
             $(document).ready(function(){
               show_more_event();
               timeagoActivate();
             })
             </script>
 
         </%def>
 
         ## JAVASCRIPT EXTRA - optionally inject some extra JS for specificed templates
         <%def name="js_extra()"></%def>
         ${self.js()}
 
         <%def name="head_extra()"></%def>
         ${self.head_extra()}
-        <%include file="/base/plugins_base.html"/>
-
+        <script>
+            $.Topic('/plugins/__REGISTER__').prepareOrPublish({});
+        </script>
         ## extra stuff
         %if c.pre_code:
             ${c.pre_code|n}
         %endif
     </head>
     <body id="body">
         <noscript>
             <div class="noscript-error">
                 ${_('Please enable JavaScript to use RhodeCode Enterprise')}
             </div>
         </noscript>
      ## IE hacks
       <!--[if IE 7]>
       <script>$(document.body).addClass('ie7')</script>
       <![endif]-->
       <!--[if IE 8]>
       <script>$(document.body).addClass('ie8')</script>
       <![endif]-->
       <!--[if IE 9]>
       <script>$(document.body).addClass('ie9')</script>
       <![endif]-->
 
       ${next.body()}
       %if c.post_code:
         ${c.post_code|n}
       %endif
     <rhodecode-toast id="notifications"></rhodecode-toast>
     </body>
 </html>

rhodecode/templates/channelstream/plugin_init.html

@@ -1,24 +1,16 b''
 <script>
     var CHANNELSTREAM_URLS = ${config['url_gen'](request)|n};
     %if request.registry.rhodecode_plugins['channelstream']['enabled'] and c.rhodecode_user.username != h.DEFAULT_USER:
     var CHANNELSTREAM_SETTINGS = {
         'enabled': true,
         'ws_location': '${request.registry.settings.get('channelstream.ws_url')}',
             'webapp_location': '${h.url('/', qualified=True)[:-1]}'
     };
     %else:
     var CHANNELSTREAM_SETTINGS = {
         'enabled':false,
         'ws_location': '',
         'webapp_location': ''};
     %endif
 
-if (CHANNELSTREAM_SETTINGS.enabled) {
-    connCtrlr = new ConnectionController(
-            CHANNELSTREAM_SETTINGS.webapp_location,
-            CHANNELSTREAM_SETTINGS.ws_location,
-            CHANNELSTREAM_URLS
-    );
-    registerViewChannels();
-}
 </script>