cloudbar: Automatic active service detection

automatically detect which cloudbar menu is active by matching the current
window location with the registered service url.

docs/quick-install-admin-guide.rst

@@ -931,24 +931,12 @@ Pithos web UI with the astakos web UI (through the top cloudbar):
 .. code-block:: console
 
     CLOUDBAR_LOCATION = 'https://node1.example.com/static/im/cloudbar/'
-    PITHOS_UI_CLOUDBAR_ACTIVE_SERVICE = '3'
     CLOUDBAR_SERVICES_URL = 'https://node1.example.com/ui/get_services'
     CLOUDBAR_MENU_URL = 'https://node1.example.com/ui/get_menu'
 
 The ``CLOUDBAR_LOCATION`` tells the client where to find the astakos common
 cloudbar.
 
-The ``PITHOS_UI_CLOUDBAR_ACTIVE_SERVICE`` points to an already registered
-Astakos service. You can see all :ref:`registered services <services-reg>` by
-running on the Astakos node (node1):
-
-.. code-block:: console
-
-   # snf-manage service-list
-
-The value of ``PITHOS_UI_CLOUDBAR_ACTIVE_SERVICE`` should be the pithos
-service's ``id`` as shown by the above command, in our case ``3``.
-
 The ``CLOUDBAR_SERVICES_URL`` and ``CLOUDBAR_MENU_URL`` options are used by the
 Pithos web client to get from astakos all the information needed to fill its
 own cloudbar. So we put our astakos deployment urls there.
@@ -1738,7 +1726,6 @@ Edit ``/etc/synnefo/20-snf-cyclades-app-cloudbar.conf``:
 .. code-block:: console
 
    CLOUDBAR_LOCATION = 'https://node1.example.com/static/im/cloudbar/'
-   CLOUDBAR_ACTIVE_SERVICE = '2'
    CLOUDBAR_SERVICES_URL = 'https://node1.example.com/ui/get_services'
    CLOUDBAR_MENU_URL = 'https://account.node1.example.com/ui/get_menu'
 
@@ -1750,17 +1737,6 @@ above should have the same values we put in the corresponding variables in
 ``/etc/synnefo/20-snf-pithos-webclient-cloudbar.conf`` on the previous
 :ref:`Pithos configuration <conf-pithos>` section.
 
-The ``CLOUDBAR_ACTIVE_SERVICE`` points to an already registered Astakos
-service. You can see all :ref:`registered services <services-reg>` by running
-on the Astakos node (node1):
-
-.. code-block:: console
-
-   # snf-manage service-list
-
-The value of ``CLOUDBAR_ACTIVE_SERVICE`` should be the cyclades service's
-``id`` as shown by the above command, in our case ``2``.
-
 Edit ``/etc/synnefo/20-snf-cyclades-app-plankton.conf``:
 
 .. code-block:: console

docs/scale/i-cyclades.rst

@@ -62,7 +62,6 @@ In `/etc/synnefo/cyclades.conf` add:
 
     GANETI_USE_HOTPLUG = True
     CLOUDBAR_LOCATION = 'https://accounts.example.com/static/im/cloudbar/'
-    CLOUDBAR_ACTIVE_SERVICE = '2'
     CLOUDBAR_SERVICES_URL = 'https://accounts.example.com/ui/get_services'
     CLOUDBAR_MENU_URL = 'https://accounts.example.com/ui/get_menu'
     BACKEND_DB_CONNECTION = 'postgresql://synnefo:example_passw0rd@db.example.com:5432/snf_pithos'

docs/scale/i-pithos.rst

@@ -83,8 +83,6 @@ In `/etc/synnefo/webclient.conf` add:
     CLOUDBAR_SERVICES_URL = 'https://accounts.example.com/ui/get_services'
     CLOUDBAR_MENU_URL = 'https://accounts.example.com/ui/get_menu'
 
-    PITHOS_UI_CLOUDBAR_ACTIVE_SERVICE = 'XXXXXXXX'
-
     PITHOS_UI_LOGIN_URL = "https://accounts.example.com/ui/login?next="
 
     PITHOS_UI_FEEDBACK_URL = "/feedback"

snf-astakos-app/astakos/im/static/im/cloudbar/README.rst

@@ -9,12 +9,7 @@ common frontend themes/templates.
 The project consists of a javascript file which once imported in a
 html page handles the automatic creation and styling of a bar that
 is placed on top of the page (first body element absolutely
-positioned on top). Since the addition of the bar may break the
-current layout of the site once imported the script tries to load an
-additional css located in the same url as the script itself named by
-the ``CLOUDBAR_ACTIVE_SERVICE`` configuration and prefixed by *service_* so 
-that css changes can be applied without touching the page native styles.
-
+positioned on top). 
 The bar contains links to the refered services application urls, and
 depending on if the user is authenticated links to account pages
 (login, change profile, logout etc.).
@@ -34,11 +29,6 @@ Each page that wants to display the navigation bar should:
     - Include one of the latest jquery builds.
     - Set the ``CLOUDBAR_COOKIE_NAME`` variable containing info about the username
       and the authentication status of the current visitor of the page.
-    - Set the ``CLOUDBAR_ACTIVE_SERVICE`` to the id of the service the current
-      page refers to so that script cat set the appropriate active styles to
-      the services menu for services ids see ``SERVICES_LINK`` object in 
-      cloudbar.js. Use special **accounts** value to set account menu as the
-      active link.
     - Set the ``CLOUDBAR_LOCATION`` to the url where bar files are served from.
     - Include the servicesbar.js script.
 
@@ -51,7 +41,6 @@ Example
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script>
         var CLOUDBAR_COOKIE_NAME = '_pithos2_a';
-        var CLOUDBAR_ACTIVE_SERVICE = 'cloud';
         var CLOUDBAR_LOCATION = "https://accounts.cloud.grnet.gr/cloudbar/";
 
         $(document).ready(function(){

snf-astakos-app/astakos/im/static/im/cloudbar/cloudbar.js

@@ -17,7 +17,6 @@ $(document).ready(function(){
     //  * Dual licensed under the MIT and GPL licenses
     var cookie=function(key,value,options){if(arguments.length>1&&(!/Object/.test(Object.prototype.toString.call(value))||value===null||value===undefined)){options=$.extend({},options);if(value===null||value===undefined){options.expires=-1}if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+days)}value=String(value);return(document.cookie=[encodeURIComponent(key),'=',options.raw?value:encodeURIComponent(value),options.expires?'; expires='+options.expires.toUTCString():'',options.path?'; path='+options.path:'',options.domain?'; domain='+options.domain:'',options.secure?'; secure':''].join(''))}options=value||{};var decode=options.raw?function(s){return s}:decodeURIComponent;var pairs=document.cookie.split('; ');for(var i=0,pair;pair=pairs[i]&&pairs[i].split('=');i++){if(decode(pair[0])===key)return decode(pair[1]||'')}return null};
 
-    var ACTIVE_MENU = window.CLOUDBAR_ACTIVE_SERVICE || 'cloud';
     var USER_DATA = window.CLOUDBAR_USER_DATA || {'user': 'Not logged in', 'logged_in': false};
     var COOKIE_NAME = window.CLOUDBAR_COOKIE_NAME || '_pithos2_a';
 
@@ -39,7 +38,6 @@ $(document).ready(function(){
 
     if (!SKIP_ADDITIONAL_CSS) {
         var css = $("<link />");
-        css.attr({rel:'stylesheet', type:'text/css', href:cssloc + 'service_' + ACTIVE_MENU + '.css'});
         $("head").append(css);
     }
 
@@ -52,6 +50,7 @@ $(document).ready(function(){
     
     // create services links and set the active class to the current service
     $.getJSON(get_services_url + "?callback=?", function(data) {
+            var active_found = false;
             $.each(data, function(i, el){
             var sli = $("<li class='service-"+el.name+"'>");
             var slink = $("<a>");
@@ -72,15 +71,20 @@ $(document).ready(function(){
             slink.attr('title', el.name);
             sli.append(slink);
             services.append(sli);
-            if (el.id == ACTIVE_MENU || el.name == ACTIVE_MENU) {
-                sli.addClass("active");
+            var urlReg = new RegExp('^'+el.url+'.*');
+            if (urlReg.test(window.location.toString())) {
+              active_found = true;   
+              sli.addClass("active");
             }
         });
+        // no active service found, activate accounts
+        if (!active_found) {
+            $('.cloudbar .user').addClass("hover active");
+        }
       });
     
     // create profile links
     var user = $('<div class="user"></div>');    
-    if (ACTIVE_MENU == "accounts") { user.addClass("hover active")}
     var username = $('<a href="#"></a>');
     var usermenu = $("<ul>");
     var get_menu_url = (window.GET_MENU_URL || window.CLOUDBAR_MENU) + '?callback=?&location=' + window.location.toString().split("?")[0];

snf-common/synnefo/lib/context_processors.py

@@ -33,8 +33,6 @@ def cloudbar(request):
     CB_LOCATION = getattr(settings, 'CLOUDBAR_LOCATION')
     CB_COOKIE_NAME = getattr(settings, 'CLOUDBAR_COOKIE_NAME',
             'okeanos_account')
-    CB_ACTIVE_SERVICE = getattr(settings, 'CLOUDBAR_ACTIVE_SERVICE',
-            'cloud')
     CB_SERVICES_URL = getattr(settings, 'CLOUDBAR_SERVICES_URL')
     CB_MENU_URL = getattr(settings, 'CLOUDBAR_MENU_URL')
     CB_HEIGHT = getattr(settings, 'CLOUDBAR_HEIGHT',
@@ -46,7 +44,6 @@ def cloudbar(request):
     <script type="text/javascript">
         var CLOUDBAR_LOCATION = "%(location)s";
         var CLOUDBAR_COOKIE_NAME = "%(cookie_name)s";
-        var CLOUDBAR_ACTIVE_SERVICE = "%(active_service)s";
         var GET_SERVICES_URL = "%(services_url)s";
         var GET_MENU_URL = "%(menu_url)s";
         var CLOUDBAR_HEIGHT = '%(height)s';
@@ -65,7 +62,6 @@ def cloudbar(request):
         }
     </style>
 """ % {'location': CB_LOCATION,
-       'active_service': CB_ACTIVE_SERVICE,
        'cookie_name': CB_COOKIE_NAME,
        'services_url': CB_SERVICES_URL,
        'menu_url': CB_MENU_URL,
@@ -78,7 +74,6 @@ def cloudbar(request):
         'CLOUDBAR_ACTIVE': CB_ACTIVE,
         'CLOUDBAR_LOCATION': CB_LOCATION,
         'CLOUDBAR_COOKIE_NAME': CB_COOKIE_NAME,
-        'CLOUDBAR_ACTIVE_SERVICE': CB_ACTIVE_SERVICE,
         'CLOUDBAR_SERVICES_URL': CB_SERVICES_URL,
         'CLOUDBAR_MENU_URL': CB_MENU_URL,
         'CLOUDBAR_CODE': CB_CODE

snf-cyclades-app/conf/20-snf-cyclades-app-cloudbar.conf

 #CLOUDBAR_ACTIVE = True
 #CLOUDBAR_LOCATION = 'https://accounts.synnefo.org/static/im/cloudbar/'
 #CLOUDBAR_COOKIE_NAME = '_pithos2_a'
-#CLOUDBAR_ACTIVE_SERVICE = 'cloud'
 #CLOUDBAR_SERVICES_URL = 'https://accounts.okeanos.grnet.gr/ui/get_services'
 #CLOUDBAR_MENU_URL = 'https://accounts.okeanos.grnet.gr/ui/get_menu'
 #

snf-cyclades-app/synnefo/app_settings/default/cloudbar.py

 CLOUDBAR_ACTIVE = True
 CLOUDBAR_LOCATION = 'https://accounts.synnefo.org/static/im/cloudbar/'
 CLOUDBAR_COOKIE_NAME = '_pithos2_a'
-CLOUDBAR_ACTIVE_SERVICE = 'cloud'
 CLOUDBAR_SERVICES_URL = 'https://accounts.synnefo.org/ui/get_services'
 CLOUDBAR_MENU_URL = 'https://accounts.synnefo.org/ui/get_menu'