Commit 48b45210 authored by Kostas Papadimitriou's avatar Kostas Papadimitriou
Browse files

cloudbar: Automatic active service detection

automatically detect which cloudbar menu is active by matching the current
window location with the registered service url.
parent 5b02df46
...@@ -931,24 +931,12 @@ Pithos web UI with the astakos web UI (through the top cloudbar): ...@@ -931,24 +931,12 @@ Pithos web UI with the astakos web UI (through the top cloudbar):
.. code-block:: console .. code-block:: console
CLOUDBAR_LOCATION = 'https://node1.example.com/static/im/cloudbar/' 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_SERVICES_URL = 'https://node1.example.com/ui/get_services'
CLOUDBAR_MENU_URL = 'https://node1.example.com/ui/get_menu' CLOUDBAR_MENU_URL = 'https://node1.example.com/ui/get_menu'
The ``CLOUDBAR_LOCATION`` tells the client where to find the astakos common The ``CLOUDBAR_LOCATION`` tells the client where to find the astakos common
cloudbar. 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 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 Pithos web client to get from astakos all the information needed to fill its
own cloudbar. So we put our astakos deployment urls there. own cloudbar. So we put our astakos deployment urls there.
...@@ -1738,7 +1726,6 @@ Edit ``/etc/synnefo/20-snf-cyclades-app-cloudbar.conf``: ...@@ -1738,7 +1726,6 @@ Edit ``/etc/synnefo/20-snf-cyclades-app-cloudbar.conf``:
.. code-block:: console .. code-block:: console
CLOUDBAR_LOCATION = 'https://node1.example.com/static/im/cloudbar/' CLOUDBAR_LOCATION = 'https://node1.example.com/static/im/cloudbar/'
CLOUDBAR_ACTIVE_SERVICE = '2'
CLOUDBAR_SERVICES_URL = 'https://node1.example.com/ui/get_services' CLOUDBAR_SERVICES_URL = 'https://node1.example.com/ui/get_services'
CLOUDBAR_MENU_URL = 'https://account.node1.example.com/ui/get_menu' 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 ...@@ -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 ``/etc/synnefo/20-snf-pithos-webclient-cloudbar.conf`` on the previous
:ref:`Pithos configuration <conf-pithos>` section. :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``: Edit ``/etc/synnefo/20-snf-cyclades-app-plankton.conf``:
.. code-block:: console .. code-block:: console
......
...@@ -62,7 +62,6 @@ In `/etc/synnefo/cyclades.conf` add: ...@@ -62,7 +62,6 @@ In `/etc/synnefo/cyclades.conf` add:
GANETI_USE_HOTPLUG = True GANETI_USE_HOTPLUG = True
CLOUDBAR_LOCATION = 'https://accounts.example.com/static/im/cloudbar/' CLOUDBAR_LOCATION = 'https://accounts.example.com/static/im/cloudbar/'
CLOUDBAR_ACTIVE_SERVICE = '2'
CLOUDBAR_SERVICES_URL = 'https://accounts.example.com/ui/get_services' CLOUDBAR_SERVICES_URL = 'https://accounts.example.com/ui/get_services'
CLOUDBAR_MENU_URL = 'https://accounts.example.com/ui/get_menu' CLOUDBAR_MENU_URL = 'https://accounts.example.com/ui/get_menu'
BACKEND_DB_CONNECTION = 'postgresql://synnefo:example_passw0rd@db.example.com:5432/snf_pithos' BACKEND_DB_CONNECTION = 'postgresql://synnefo:example_passw0rd@db.example.com:5432/snf_pithos'
......
...@@ -83,8 +83,6 @@ In `/etc/synnefo/webclient.conf` add: ...@@ -83,8 +83,6 @@ In `/etc/synnefo/webclient.conf` add:
CLOUDBAR_SERVICES_URL = 'https://accounts.example.com/ui/get_services' CLOUDBAR_SERVICES_URL = 'https://accounts.example.com/ui/get_services'
CLOUDBAR_MENU_URL = 'https://accounts.example.com/ui/get_menu' 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_LOGIN_URL = "https://accounts.example.com/ui/login?next="
PITHOS_UI_FEEDBACK_URL = "/feedback" PITHOS_UI_FEEDBACK_URL = "/feedback"
......
...@@ -9,12 +9,7 @@ common frontend themes/templates. ...@@ -9,12 +9,7 @@ common frontend themes/templates.
The project consists of a javascript file which once imported in a The project consists of a javascript file which once imported in a
html page handles the automatic creation and styling of a bar that html page handles the automatic creation and styling of a bar that
is placed on top of the page (first body element absolutely is placed on top of the page (first body element absolutely
positioned on top). Since the addition of the bar may break the positioned on top).
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.
The bar contains links to the refered services application urls, and The bar contains links to the refered services application urls, and
depending on if the user is authenticated links to account pages depending on if the user is authenticated links to account pages
(login, change profile, logout etc.). (login, change profile, logout etc.).
...@@ -34,11 +29,6 @@ Each page that wants to display the navigation bar should: ...@@ -34,11 +29,6 @@ Each page that wants to display the navigation bar should:
- Include one of the latest jquery builds. - Include one of the latest jquery builds.
- Set the ``CLOUDBAR_COOKIE_NAME`` variable containing info about the username - Set the ``CLOUDBAR_COOKIE_NAME`` variable containing info about the username
and the authentication status of the current visitor of the page. 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. - Set the ``CLOUDBAR_LOCATION`` to the url where bar files are served from.
- Include the servicesbar.js script. - Include the servicesbar.js script.
...@@ -51,7 +41,6 @@ Example ...@@ -51,7 +41,6 @@ Example
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script> <script>
var CLOUDBAR_COOKIE_NAME = '_pithos2_a'; var CLOUDBAR_COOKIE_NAME = '_pithos2_a';
var CLOUDBAR_ACTIVE_SERVICE = 'cloud';
var CLOUDBAR_LOCATION = "https://accounts.cloud.grnet.gr/cloudbar/"; var CLOUDBAR_LOCATION = "https://accounts.cloud.grnet.gr/cloudbar/";
$(document).ready(function(){ $(document).ready(function(){
......
...@@ -17,7 +17,6 @@ $(document).ready(function(){ ...@@ -17,7 +17,6 @@ $(document).ready(function(){
// * Dual licensed under the MIT and GPL licenses // * 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 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 USER_DATA = window.CLOUDBAR_USER_DATA || {'user': 'Not logged in', 'logged_in': false};
var COOKIE_NAME = window.CLOUDBAR_COOKIE_NAME || '_pithos2_a'; var COOKIE_NAME = window.CLOUDBAR_COOKIE_NAME || '_pithos2_a';
...@@ -39,7 +38,6 @@ $(document).ready(function(){ ...@@ -39,7 +38,6 @@ $(document).ready(function(){
if (!SKIP_ADDITIONAL_CSS) { if (!SKIP_ADDITIONAL_CSS) {
var css = $("<link />"); var css = $("<link />");
css.attr({rel:'stylesheet', type:'text/css', href:cssloc + 'service_' + ACTIVE_MENU + '.css'});
$("head").append(css); $("head").append(css);
} }
...@@ -52,6 +50,7 @@ $(document).ready(function(){ ...@@ -52,6 +50,7 @@ $(document).ready(function(){
// create services links and set the active class to the current service // create services links and set the active class to the current service
$.getJSON(get_services_url + "?callback=?", function(data) { $.getJSON(get_services_url + "?callback=?", function(data) {
var active_found = false;
$.each(data, function(i, el){ $.each(data, function(i, el){
var sli = $("<li class='service-"+el.name+"'>"); var sli = $("<li class='service-"+el.name+"'>");
var slink = $("<a>"); var slink = $("<a>");
...@@ -72,15 +71,20 @@ $(document).ready(function(){ ...@@ -72,15 +71,20 @@ $(document).ready(function(){
slink.attr('title', el.name); slink.attr('title', el.name);
sli.append(slink); sli.append(slink);
services.append(sli); services.append(sli);
if (el.id == ACTIVE_MENU || el.name == ACTIVE_MENU) { var urlReg = new RegExp('^'+el.url+'.*');
sli.addClass("active"); 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 // create profile links
var user = $('<div class="user"></div>'); var user = $('<div class="user"></div>');
if (ACTIVE_MENU == "accounts") { user.addClass("hover active")}
var username = $('<a href="#"></a>'); var username = $('<a href="#"></a>');
var usermenu = $("<ul>"); var usermenu = $("<ul>");
var get_menu_url = (window.GET_MENU_URL || window.CLOUDBAR_MENU) + '?callback=?&location=' + window.location.toString().split("?")[0]; var get_menu_url = (window.GET_MENU_URL || window.CLOUDBAR_MENU) + '?callback=?&location=' + window.location.toString().split("?")[0];
......
...@@ -33,8 +33,6 @@ def cloudbar(request): ...@@ -33,8 +33,6 @@ def cloudbar(request):
CB_LOCATION = getattr(settings, 'CLOUDBAR_LOCATION') CB_LOCATION = getattr(settings, 'CLOUDBAR_LOCATION')
CB_COOKIE_NAME = getattr(settings, 'CLOUDBAR_COOKIE_NAME', CB_COOKIE_NAME = getattr(settings, 'CLOUDBAR_COOKIE_NAME',
'okeanos_account') 'okeanos_account')
CB_ACTIVE_SERVICE = getattr(settings, 'CLOUDBAR_ACTIVE_SERVICE',
'cloud')
CB_SERVICES_URL = getattr(settings, 'CLOUDBAR_SERVICES_URL') CB_SERVICES_URL = getattr(settings, 'CLOUDBAR_SERVICES_URL')
CB_MENU_URL = getattr(settings, 'CLOUDBAR_MENU_URL') CB_MENU_URL = getattr(settings, 'CLOUDBAR_MENU_URL')
CB_HEIGHT = getattr(settings, 'CLOUDBAR_HEIGHT', CB_HEIGHT = getattr(settings, 'CLOUDBAR_HEIGHT',
...@@ -46,7 +44,6 @@ def cloudbar(request): ...@@ -46,7 +44,6 @@ def cloudbar(request):
<script type="text/javascript"> <script type="text/javascript">
var CLOUDBAR_LOCATION = "%(location)s"; var CLOUDBAR_LOCATION = "%(location)s";
var CLOUDBAR_COOKIE_NAME = "%(cookie_name)s"; var CLOUDBAR_COOKIE_NAME = "%(cookie_name)s";
var CLOUDBAR_ACTIVE_SERVICE = "%(active_service)s";
var GET_SERVICES_URL = "%(services_url)s"; var GET_SERVICES_URL = "%(services_url)s";
var GET_MENU_URL = "%(menu_url)s"; var GET_MENU_URL = "%(menu_url)s";
var CLOUDBAR_HEIGHT = '%(height)s'; var CLOUDBAR_HEIGHT = '%(height)s';
...@@ -65,7 +62,6 @@ def cloudbar(request): ...@@ -65,7 +62,6 @@ def cloudbar(request):
} }
</style> </style>
""" % {'location': CB_LOCATION, """ % {'location': CB_LOCATION,
'active_service': CB_ACTIVE_SERVICE,
'cookie_name': CB_COOKIE_NAME, 'cookie_name': CB_COOKIE_NAME,
'services_url': CB_SERVICES_URL, 'services_url': CB_SERVICES_URL,
'menu_url': CB_MENU_URL, 'menu_url': CB_MENU_URL,
...@@ -78,7 +74,6 @@ def cloudbar(request): ...@@ -78,7 +74,6 @@ def cloudbar(request):
'CLOUDBAR_ACTIVE': CB_ACTIVE, 'CLOUDBAR_ACTIVE': CB_ACTIVE,
'CLOUDBAR_LOCATION': CB_LOCATION, 'CLOUDBAR_LOCATION': CB_LOCATION,
'CLOUDBAR_COOKIE_NAME': CB_COOKIE_NAME, 'CLOUDBAR_COOKIE_NAME': CB_COOKIE_NAME,
'CLOUDBAR_ACTIVE_SERVICE': CB_ACTIVE_SERVICE,
'CLOUDBAR_SERVICES_URL': CB_SERVICES_URL, 'CLOUDBAR_SERVICES_URL': CB_SERVICES_URL,
'CLOUDBAR_MENU_URL': CB_MENU_URL, 'CLOUDBAR_MENU_URL': CB_MENU_URL,
'CLOUDBAR_CODE': CB_CODE 'CLOUDBAR_CODE': CB_CODE
......
#CLOUDBAR_ACTIVE = True #CLOUDBAR_ACTIVE = True
#CLOUDBAR_LOCATION = 'https://accounts.synnefo.org/static/im/cloudbar/' #CLOUDBAR_LOCATION = 'https://accounts.synnefo.org/static/im/cloudbar/'
#CLOUDBAR_COOKIE_NAME = '_pithos2_a' #CLOUDBAR_COOKIE_NAME = '_pithos2_a'
#CLOUDBAR_ACTIVE_SERVICE = 'cloud'
#CLOUDBAR_SERVICES_URL = 'https://accounts.okeanos.grnet.gr/ui/get_services' #CLOUDBAR_SERVICES_URL = 'https://accounts.okeanos.grnet.gr/ui/get_services'
#CLOUDBAR_MENU_URL = 'https://accounts.okeanos.grnet.gr/ui/get_menu' #CLOUDBAR_MENU_URL = 'https://accounts.okeanos.grnet.gr/ui/get_menu'
# #
CLOUDBAR_ACTIVE = True CLOUDBAR_ACTIVE = True
CLOUDBAR_LOCATION = 'https://accounts.synnefo.org/static/im/cloudbar/' CLOUDBAR_LOCATION = 'https://accounts.synnefo.org/static/im/cloudbar/'
CLOUDBAR_COOKIE_NAME = '_pithos2_a' CLOUDBAR_COOKIE_NAME = '_pithos2_a'
CLOUDBAR_ACTIVE_SERVICE = 'cloud'
CLOUDBAR_SERVICES_URL = 'https://accounts.synnefo.org/ui/get_services' CLOUDBAR_SERVICES_URL = 'https://accounts.synnefo.org/ui/get_services'
CLOUDBAR_MENU_URL = 'https://accounts.synnefo.org/ui/get_menu' CLOUDBAR_MENU_URL = 'https://accounts.synnefo.org/ui/get_menu'
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment