From f925d62956d3ae668de7c6ac707af94daf4b971e 2016-10-05 15:14:12
From: Marcin Lulek <mlulek@rhodecode.com>
Date: 2016-10-05 15:14:12
Subject: [PATCH] angular: start transitioning to component approach

---

diff --git a/backend/src/appenlight/static/js/appenlight.js b/backend/src/appenlight/static/js/appenlight.js
index 3c31140..ae950e1 100644
--- a/backend/src/appenlight/static/js/appenlight.js
+++ b/backend/src/appenlight/static/js/appenlight.js
@@ -2675,7 +2675,9 @@ angular.module('appenlight.controllers', [
     'appenlight.base'
 ]);
 angular.module('appenlight.components', [
-    'appenlight.components.channelstream'
+    'appenlight.components.channelstream',
+    'appenlight.components.appenlightApp',
+    'appenlight.components.appenlightHeader'
 ]);
 angular.module('appenlight.directives', [
     'appenlight.directives.appVersion',
@@ -4848,6 +4850,120 @@ function kickstartAE(initialUserData) {
   );
 
 
+  $templateCache.put('templates/components/appenlight-app.html',
+    "<channelstream config=\"AeConfig\"></channelstream>\n" +
+    "<appenlight-header></appenlight-header>\n" +
+    "<div id=\"outer-content\">\n" +
+    "    <div ui-view class=\"container\"></div>\n" +
+    "</div>\n"
+  );
+
+
+  $templateCache.put('templates/components/appenlight-header.html',
+    "<!-- Fixed navbar -->\n" +
+    "<div id=\"top-navbar\" class=\"navbar navbar-default navbar-fixed-top\" role=\"navigation\">\n" +
+    "    <div class=\"pattern\">\n" +
+    "        <div class=\"container\">\n" +
+    "            <div class=\"navbar-header pull-left\">\n" +
+    "                <a data-ui-sref=\"front_dashboard\" class=\"navbar-brand\">\n" +
+    "                    <div id=\"logo-normal\" class=\"hidden-sm hidden-xs\"></div>\n" +
+    "                    <div id=\"logo-icon\" class=\"visible-sm visible-xs\"></div>\n" +
+    "                </a>\n" +
+    "            </div>\n" +
+    "\n" +
+    "            <div class=\"container-fluid\">\n" +
+    "                <div>\n" +
+    "                        <ul class=\"nav navbar-nav navbar-right\" ng-if=\"$ctrl.stateHolder.AeUser.id !== null\">\n" +
+    "                            <li id=\"user-notifications\" class=\"dropdown ng-cloak\" data-uib-dropdown>\n" +
+    "\n" +
+    "                                <a class=\"dropdown-toggle\" data-uib-dropdown-toggle>\n" +
+    "                                    <span class=\"badge\">{{$ctrl.assignedReports.length}}</span>\n" +
+    "                                    <span class=\"fa fa-envelope-o\"></span>\n" +
+    "                                </a>\n" +
+    "                                <ul class=\"dropdown-menu\">\n" +
+    "                                    <li role=\"presentation\" class=\"dropdown-header\">Assigned reports</li>\n" +
+    "                                    <li data-ng-repeat=\"report in $ctrl.assignedReports\" role=\"presentation\">\n" +
+    "                                        <a href=\"{{report.front_url}}\" role=\"menuitem\" tabindex=\"-1\">\n" +
+    "                                            <small>{{ report.error || 'Slow Report: ' + report.view_name |truncate:65}}</small>\n" +
+    "                                        </a>\n" +
+    "\n" +
+    "                                    </li>\n" +
+    "                                    <li data-ng-if=\"$ctrl.assignedReports.length == 0\"><a><small>No reports</small></a></li>\n" +
+    "                                </ul>\n" +
+    "                            </li>\n" +
+    "                            <li id=\"alert-notifications\" class=\"dropdown ng-cloak\" data-uib-dropdown auto-close=\"outsideClick\">\n" +
+    "                                <a class=\"dropdown-toggle\" data-uib-dropdown-toggle>\n" +
+    "                                    <span class=\"badge {{ activeEvents ? 'danger' : '' }}\">{{$ctrl.activeEvents}}</span>\n" +
+    "                                    <span class=\"fa fa-bell-o\"></span></a>\n" +
+    "                                <ul class=\"dropdown-menu\">\n" +
+    "                                    <li role=\"presentation\" class=\"dropdown-header\">\n" +
+    "                                        <a data-ui-sref=\"events\" class=\"btn btn-xs btn-default\">Show me more</a></li>\n" +
+    "                                    <li role=\"presentation\" class=\"dropdown-header\">Latest events</li>\n" +
+    "                                    <li data-ng-repeat=\"event in $ctrl.latestEvents\" role=\"presentation\">\n" +
+    "                                        <a data-ng-click=\"$ctrl.clickedEvent(event)\"><small class=\"resource-name\">For {{ event.resource_name }}</small><br/>\n" +
+    "                                            <small>{{ event.text |truncate:65}}</small><br/>\n" +
+    "                                            <small class=\"date\" data-uib-tooltip=\"{{event.start_date}}\">created: <iso-to-relative-time time=\"{{event.start_date}}\"/></small>\n" +
+    "                                            <small class=\"date\" data-ng-show=\"event.end_date\" data-uib-tooltip=\"{{event.end_date}}\">closed: <iso-to-relative-time time=\"{{event.end_date}}\"/></small>\n" +
+    "                                        </a>\n" +
+    "                                    </li>\n" +
+    "                                    <li data-ng-if=\"$ctrl.latestEvents.length == 0\"><a><small>No events</small></a></li>\n" +
+    "                                </ul>\n" +
+    "                            </li>\n" +
+    "\n" +
+    "                            <li id=\"dashboards\" class=\"dropdown\" data-uib-dropdown>\n" +
+    "                                <a class=\"dropdown-toggle\" data-uib-dropdown-toggle tooltip-placement=\"bottom\" data-uib-tooltip=\"Dashboards\">\n" +
+    "                                    <span class=\"fa fa-bar-chart-o \"></span></a>\n" +
+    "                                <ul class=\"dropdown-menu\">\n" +
+    "                                    <li role=\"presentation\"><a data-ui-sref=\"front_dashboard\">Main dashboard</a></li>\n" +
+    "                                    <li role=\"presentation\" ng-repeat=\"item in $ctrl.AeConfig.topNav.menu_dashboards_items\">\n" +
+    "                                        <a data-ui-sref=\"{{ item.sref }}\">{{ item.label }}</a>\n" +
+    "                                    </li>\n" +
+    "                                </ul>\n" +
+    "                            </li>\n" +
+    "\n" +
+    "                            <li class=\"dropdown\" data-uib-dropdown>\n" +
+    "                                <a class=\"dropdown-toggle\" data-uib-dropdown-toggle tooltip-placement=\"bottom\" data-uib-tooltip=\"Reports\">\n" +
+    "                                    <span class=\"fa fa-exclamation-triangle\"></span></a>\n" +
+    "                                <ul class=\"dropdown-menu\">\n" +
+    "                                    <li role=\"presentation\">\n" +
+    "                                        <a data-ui-sref=\"report.list({resource:$ctrl.stateHolder.resource})\">Error Reports</a>\n" +
+    "                                    </li>\n" +
+    "                                    <li role=\"presentation\">\n" +
+    "                                        <a data-ui-sref=\"report.list_slow({resource:$ctrl.stateHolder.resource})\">Slowness Reports</a>\n" +
+    "                                    </li>\n" +
+    "\n" +
+    "                                </ul>\n" +
+    "                            </li>\n" +
+    "\n" +
+    "                            <li>\n" +
+    "                                <a data-ui-sref=\"logs({resource:$ctrl.stateHolder.resource})\" data-uib-tooltip=\"Logs\" tooltip-placement=\"bottom\"><span class=\"fa fa-list-alt \"></span></a></li>\n" +
+    "                            <li>\n" +
+    "                                <a data-ui-sref=\"user\" data-uib-tooltip=\"Settings\" tooltip-placement=\"bottom\"><span class=\"fa fa-cog \"></span></a>\n" +
+    "                            </li>\n" +
+    "                            <li class=\"dropdown\" data-uib-dropdown data-ng-if=\"$ctrl.AeConfig.topNav.menu_admin_items.length\">\n" +
+    "                                <a class=\"dropdown-toggle\" data-uib-dropdown-toggle tooltip-placement=\"bottom\" data-uib-tooltip=\"Admin Settings\">\n" +
+    "                                    <span class=\"fa fa-wrench\"></span></a>\n" +
+    "                                <ul class=\"dropdown-menu\">\n" +
+    "                                    <li role=\"presentation\" ng-repeat=\"item in $ctrl.AeConfig.topNav.menu_admin_items\">\n" +
+    "                                        <a data-ui-sref=\"{{ item.sref }}\">{{ item.label }}</a>\n" +
+    "                                    </li>\n" +
+    "                                </ul>\n" +
+    "                            </li>\n" +
+    "                            <li><a href=\"{{ $ctrl.AeConfig.urls.otherRoutes.signOut }}\" target=\"_self\"\n" +
+    "                                   data-uib-tooltip=\"Sign out\" tooltip-placement=\"bottom\">\n" +
+    "                                <span class=\"fa fa-power-off \"></span></a></li>\n" +
+    "                        </ul>\n" +
+    "                        <ul class=\"nav navbar-nav pull-right\" ng-if=\"$ctrl.stateHolder.AeUser.id === null\">\n" +
+    "                            <li><a href=\"{{ $ctrl.AeConfig.urls.otherRoutes.register }}\" target=\"_self\" class=\"btn btn-orange\">Sign In</a></li>\n" +
+    "                        </ul>\n" +
+    "                </div><!-- /.navbar-collapse -->\n" +
+    "            </div><!-- /.container-fluid -->\n" +
+    "        </div>\n" +
+    "    </div>\n" +
+    "</div>\n"
+  );
+
+
   $templateCache.put('templates/dashboard.html',
     "<style type=\"text/css\">\n" +
     "    #metrics_chart .c3-line {\n" +
@@ -4864,21 +4980,20 @@ function kickstartAE(initialUserData) {
     "\n" +
     "<div class=\"row\">\n" +
     "    <div class=\"col-sm-12 dashboard\" id=\"content\">\n" +
-    "\n" +
-    "        <div ng-if=\"!stateHolder.AeUser.applications.length\">\n" +
+    "        <div ng-if=\"!index.stateHolder.AeUser.applications.length\">\n" +
     "\n" +
     "            <div ng-include=\"'templates/quickstart.html'\"></div>\n" +
     "\n" +
     "        </div>\n" +
     "\n" +
-    "        <div ng-if=\"stateHolder.AeUser.applications.length\">\n" +
+    "        <div ng-if=\"index.stateHolder.AeUser.applications.length\">\n" +
     "\n" +
     "            <div class=\"row\">\n" +
     "                <div class=\"col-sm-6\">\n" +
     "                    <div class=\"panel panel-default\">\n" +
     "                        <div class=\"panel-body\">\n" +
     "                            <form class=\"graph-type form-inline\">\n" +
-    "                                <select ng-model=\"index.resource\" ng-options=\"r.resource_id as r.resource_name for r in stateHolder.AeUser.applications\" ng-change=\"index.updateSearchParams()\"\n" +
+    "                                <select ng-model=\"index.resource\" ng-options=\"r.resource_id as r.resource_name for r in index.stateHolder.AeUser.applications\" ng-change=\"index.updateSearchParams()\"\n" +
     "                                        class=\"SelectField form-control input-sm slim-input\"></select>\n" +
     "\n" +
     "                                <select class=\"SelectField form-control input-sm slim-input\" ng-model=\"index.timeSpan\"\n" +
@@ -6150,7 +6265,7 @@ function kickstartAE(initialUserData) {
     "\n" +
     "<div ng-if=\"report.report !== null && !report.is_loading.report\">\n" +
     "\n" +
-    "    <div ng-if=\"stateHolder.AeUser.id\" class=\"row\">\n" +
+    "    <div ng-if=\"report.stateHolder.AeUser.id\" class=\"row\">\n" +
     "      <div class=\"col-lg-12\">\n" +
     "        <a onclick=\"window.history.back()\" class=\"btn btn-default\" ng-if=\"report.window.history.length > 2\"><span class=\"fa fa-arrow-circle-o-left\"></span>\n" +
     "            Go back</a>\n" +
@@ -6210,7 +6325,7 @@ function kickstartAE(initialUserData) {
     "                            <td class=\"table-label\">Public URL</td>\n" +
     "                            <td class=\"data\">\n" +
     "                                <form>\n" +
-    "                                    <textarea class=\"TextAreaField form-control\" id=\"public-url\" onclick=\"this.select()\">{{$state.href($state.current.name, $state.params, {absolute: true})}}</textarea>\n" +
+    "                                    <textarea class=\"TextAreaField form-control\" id=\"public-url\" onclick=\"this.select()\">{{report.$state.href(report.$state.current.name, report.$state.params, {absolute: true})}}</textarea>\n" +
     "                                </form>\n" +
     "                            </td>\n" +
     "                        </tr>\n" +
@@ -7022,6 +7137,135 @@ function kickstartAE(initialUserData) {
 // # services, and proprietary license terms, please see
 // # https://rhodecode.com/licenses/
 
+angular.module('appenlight.components.appenlightApp', [])
+    .component('appenlightApp', {
+        templateUrl: 'templates/components/appenlight-app.html',
+        controller: AppEnlightAppController
+    });
+
+AppEnlightAppController.$inject = ['$scope','$state', 'stateHolder', 'AeConfig'];
+
+function AppEnlightAppController($scope, $state, stateHolder, AeConfig){
+    
+    // to keep bw compatibility
+    $scope.$state = $state;
+    $scope.stateHolder = stateHolder;
+    $scope.flash = stateHolder.flashMessages.list;
+    $scope.closeAlert = stateHolder.flashMessages.closeAlert;
+    $scope.AeConfig = AeConfig;
+}
+
+;// # Copyright (C) 2010-2016  RhodeCode GmbH
+// #
+// # This program is free software: you can redistribute it and/or modify
+// # it under the terms of the GNU Affero General Public License, version 3
+// # (only), as published by the Free Software Foundation.
+// #
+// # This program is distributed in the hope that it will be useful,
+// # but WITHOUT ANY WARRANTY; without even the implied warranty of
+// # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// # GNU General Public License for more details.
+// #
+// # You should have received a copy of the GNU Affero General Public License
+// # along with this program.  If not, see <http://www.gnu.org/licenses/>.
+// #
+// # This program is dual-licensed. If you wish to learn more about the
+// # AppEnlight Enterprise Edition, including its added features, Support
+// # services, and proprietary license terms, please see
+// # https://rhodecode.com/licenses/
+
+angular.module('appenlight.components.appenlightHeader', [])
+    .component('appenlightFooter', {
+        templateUrl: 'templates/components/appenlight-footer.html',
+        controller: AppEnlightFooterController
+    });
+
+ChannelstreamController.$inject = ['stateHolder', 'AeConfig'];
+
+function AppEnlightFooterController(stateHolder, AeConfig){
+    var vm = this;
+    vm.AeConfig = AeConfig;
+    vm.stateHolder = stateHolder;
+}
+
+;// # Copyright (C) 2010-2016  RhodeCode GmbH
+// #
+// # This program is free software: you can redistribute it and/or modify
+// # it under the terms of the GNU Affero General Public License, version 3
+// # (only), as published by the Free Software Foundation.
+// #
+// # This program is distributed in the hope that it will be useful,
+// # but WITHOUT ANY WARRANTY; without even the implied warranty of
+// # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// # GNU General Public License for more details.
+// #
+// # You should have received a copy of the GNU Affero General Public License
+// # along with this program.  If not, see <http://www.gnu.org/licenses/>.
+// #
+// # This program is dual-licensed. If you wish to learn more about the
+// # AppEnlight Enterprise Edition, including its added features, Support
+// # services, and proprietary license terms, please see
+// # https://rhodecode.com/licenses/
+
+angular.module('appenlight.components.appenlightHeader', [])
+    .component('appenlightHeader', {
+        templateUrl: 'templates/components/appenlight-header.html',
+        controller: AppEnlightHeaderController
+    });
+
+ChannelstreamController.$inject = ['$state', 'stateHolder', 'AeConfig'];
+
+function AppEnlightHeaderController($state, stateHolder, AeConfig){
+    var vm = this;
+    vm.AeConfig = AeConfig;
+    vm.stateHolder = stateHolder;
+    vm.assignedReports = stateHolder.AeUser.assigned_reports;
+    vm.latestEvents = stateHolder.AeUser.latest_events;
+    vm.activeEvents = 0;
+    _.each(vm.latestEvents, function (event) {
+        if (event.status === 1 && event.end_date === null) {
+            vm.activeEvents += 1;
+        }
+    });
+
+    vm.clickedEvent = function(event){
+        // exception reports
+        if (_.contains([1,2], event.event_type)){
+            $state.go('report.list', {resource:event.resource_id, start_date:event.start_date});
+        }
+        // slowness reports
+        else if (_.contains([3,4], event.event_type)){
+            $state.go('report.list_slow', {resource:event.resource_id, start_date:event.start_date});
+        }
+        // uptime reports
+        else if (_.contains([7,8], event.event_type)){
+            $state.go('uptime', {resource:event.resource_id, start_date:event.start_date});
+        }
+        else{
+            
+        }
+    }
+}
+
+;// # Copyright (C) 2010-2016  RhodeCode GmbH
+// #
+// # This program is free software: you can redistribute it and/or modify
+// # it under the terms of the GNU Affero General Public License, version 3
+// # (only), as published by the Free Software Foundation.
+// #
+// # This program is distributed in the hope that it will be useful,
+// # but WITHOUT ANY WARRANTY; without even the implied warranty of
+// # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// # GNU General Public License for more details.
+// #
+// # You should have received a copy of the GNU Affero General Public License
+// # along with this program.  If not, see <http://www.gnu.org/licenses/>.
+// #
+// # This program is dual-licensed. If you wish to learn more about the
+// # AppEnlight Enterprise Edition, including its added features, Support
+// # services, and proprietary license terms, please see
+// # https://rhodecode.com/licenses/
+
 angular.module('appenlight.components.channelstream', [])
     .component('channelstream', {
         controller: ChannelstreamController,
@@ -7047,11 +7291,11 @@ function ChannelstreamController($rootScope, stateHolder, userSelfPropertyResour
                 _.each(data, function (message) {
                     
                     if(typeof message.message.topic !== 'undefined'){
-                        $rootScope.$broadcast(
+                        $rootScope.$emit(
                             'channelstream-message.'+message.message.topic, message);
                     }
                     else{
-                        $rootScope.$broadcast('channelstream-message', message);
+                        $rootScope.$emit('channelstream-message', message);
                     }
                 });
             });
@@ -7091,9 +7335,9 @@ aeconfig.factory('AeConfig', function () {
     obj.flashMessages = decodeEncodedJSON(window.AE.flash_messages);
     obj.timeOptions = decodeEncodedJSON(window.AE.timeOptions);
     obj.plugins = decodeEncodedJSON(window.AE.plugins);
+    obj.topNav = decodeEncodedJSON(window.AE.topNav);
     obj.ws_url = window.AE.ws_url;
     obj.urls = window.AE.urls;
-
     // set keys on values because we wont be able to retrieve them everywhere
     for (var key in obj.timeOptions) {
         obj.timeOptions[key]['key'] = key;
@@ -8191,9 +8435,9 @@ function EventsController(eventsNoIdResource, eventsResource) {
 angular.module('appenlight.controllers')
     .controller('IndexDashboardController', IndexDashboardController);
 
-IndexDashboardController.$inject = ['$scope', '$location','$cookies', '$interval', 'stateHolder', 'userSelfPropertyResource', 'applicationsPropertyResource', 'AeConfig'];
+IndexDashboardController.$inject = ['$rootScope', '$scope', '$location','$cookies', '$interval', 'stateHolder', 'applicationsPropertyResource', 'AeConfig'];
 
-function IndexDashboardController($scope, $location, $cookies, $interval, stateHolder, userSelfPropertyResource, applicationsPropertyResource, AeConfig) {
+function IndexDashboardController($rootScope, $scope, $location, $cookies, $interval, stateHolder, applicationsPropertyResource, AeConfig) {
     var vm = this;
     stateHolder.section = 'dashboard';
     vm.timeOptions = {};
@@ -8203,6 +8447,7 @@ function IndexDashboardController($scope, $location, $cookies, $interval, stateH
             vm.timeOptions[key] = AeConfig.timeOptions[key];
         }
     });
+    vm.stateHolder = stateHolder;
     vm.urls = AeConfig.urls;
     vm.applications = stateHolder.AeUser.applications_map;
     vm.show_dashboard = false;
@@ -8547,7 +8792,7 @@ function IndexDashboardController($scope, $location, $cookies, $interval, stateH
     };
     vm.stream = {paused: false, filtered: false, messages: [], reports: []};
 
-    $scope.$on('channelstream-message.front_dashboard.new_topic', function(event, message){
+    $rootScope.$on('channelstream-message.front_dashboard.new_topic', function(event, message){
         var ws_report = message.message.report;
         if (ws_report.http_status != 500) {
             return
@@ -8817,9 +9062,8 @@ function IndexDashboardController($scope, $location, $cookies, $interval, stateH
             function () {
                 vm.loading.reports = false;
             }
-        )
-        ;
-    }
+        );
+    };
 
     if (stateHolder.AeUser.applications.length){
         vm.show_dashboard = true;
@@ -8835,64 +9079,6 @@ function IndexDashboardController($scope, $location, $cookies, $interval, stateH
         }
     });
 
-
-}
-
-;// # Copyright (C) 2010-2016  RhodeCode GmbH
-// #
-// # This program is free software: you can redistribute it and/or modify
-// # it under the terms of the GNU Affero General Public License, version 3
-// # (only), as published by the Free Software Foundation.
-// #
-// # This program is distributed in the hope that it will be useful,
-// # but WITHOUT ANY WARRANTY; without even the implied warranty of
-// # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// # GNU General Public License for more details.
-// #
-// # You should have received a copy of the GNU Affero General Public License
-// # along with this program.  If not, see <http://www.gnu.org/licenses/>.
-// #
-// # This program is dual-licensed. If you wish to learn more about the
-// # AppEnlight Enterprise Edition, including its added features, Support
-// # services, and proprietary license terms, please see
-// # https://rhodecode.com/licenses/
-
-angular.module('appenlight.controllers')
-    .controller('HeaderCtrl', HeaderCtrl);
-
-HeaderCtrl.$inject = ['$state', 'stateHolder'];
-
-function HeaderCtrl($state, stateHolder) {
-    var vm = this;
-    vm.stateHolder = stateHolder;
-    vm.assignedReports = stateHolder.AeUser.assigned_reports;
-    vm.latestEvents = stateHolder.AeUser.latest_events;
-    vm.activeEvents = 0;
-    _.each(vm.latestEvents, function (event) {
-        if (event.status === 1 && event.end_date === null) {
-            vm.activeEvents += 1;
-        }
-    });
-
-    vm.clickedEvent = function(event){
-        
-        // (from Event model)
-        // exception reports
-        if (_.contains([1,2], event.event_type)){
-            $state.go('report.list', {resource:event.resource_id, start_date:event.start_date});
-        }
-        // slowness reports
-        else if (_.contains([3,4], event.event_type)){
-            $state.go('report.list_slow', {resource:event.resource_id, start_date:event.start_date});
-        }
-        // uptime reports
-        else if (_.contains([7,8], event.event_type)){
-            $state.go('uptime', {resource:event.resource_id, start_date:event.start_date});
-        }
-        else{
-            
-        }
-    }
 }
 
 ;// # Copyright (C) 2010-2016  RhodeCode GmbH
@@ -10304,6 +10490,8 @@ ReportsViewController.$inject = ['$window', '$location', '$state', '$uibModal',
 function ReportsViewController($window, $location, $state, $uibModal, $cookies, reportGroupPropertyResource, reportGroupResource, logsNoIdResource, stateHolder) {
     var vm = this;
     vm.window = $window;
+    vm.stateHolder = stateHolder;
+    vm.$state = $state;
     vm.reportHistoryConfig = {
         data: {
             json: [],
@@ -12879,7 +13067,8 @@ angular.module('appenlight.services.stateHolder', []).factory('stateHolder',
         resource: null,
         plugins: Plugins,
         flashMessages: flashMessages,
-        AeUser: AeUser
+        AeUser: AeUser,
+        AeConfig: AeConfig
     };
     return stateHolder;
 }]);
diff --git a/backend/src/appenlight/subscribers.py b/backend/src/appenlight/subscribers.py
index ff0c9ca..25f1cc6 100644
--- a/backend/src/appenlight/subscribers.py
+++ b/backend/src/appenlight/subscribers.py
@@ -65,7 +65,8 @@ def gen_urls(request):
         'otherRoutes': {
             'register':  request.route_url('register') ,
             'lostPassword':  request.route_url('lost_password') ,
-            'lostPasswordGenerate':  request.route_url('lost_password_generate')
+            'lostPasswordGenerate':  request.route_url('lost_password_generate'),
+            'signOut': request.route_url('ziggurat.routes.sign_out')
         },
         'social_auth': {
             'google':request.route_url('social_auth', provider='google'),
diff --git a/backend/src/appenlight/templates/app.jinja2 b/backend/src/appenlight/templates/app.jinja2
new file mode 100644
index 0000000..9d0ce66
--- /dev/null
+++ b/backend/src/appenlight/templates/app.jinja2
@@ -0,0 +1,2 @@
+{% extends "/layout_base.jinja2" %}
+{% block non_angular_content %}{% endblock %}
diff --git a/backend/src/appenlight/templates/dashboard/index.jinja2 b/backend/src/appenlight/templates/dashboard/index.jinja2
deleted file mode 100644
index 2620741..0000000
--- a/backend/src/appenlight/templates/dashboard/index.jinja2
+++ /dev/null
@@ -1,13 +0,0 @@
-{% extends "/layout.jinja2" %}
-
-{% block ng_view %}ui-view{% endblock %}
-
-{% block page_title %}
-    <h1 class="page-title">{{ _('Dashboard') }}</h1>
-{% endblock %}
-
-{% block content%}
-    <div class="text-center">
-        <span class="fa fa-cog fa-spin fa-5x m-a-4"></span>
-    </div>
-{% endblock %}
diff --git a/backend/src/appenlight/templates/error.jinja2 b/backend/src/appenlight/templates/error.jinja2
index 0a3ca90..a19bbb2 100644
--- a/backend/src/appenlight/templates/error.jinja2
+++ b/backend/src/appenlight/templates/error.jinja2
@@ -4,9 +4,7 @@
     <div class="col-sm-10 col-sm-offset-1" id="content">
 
     <span class="fa fa-ambulance" style="float: left; font-size: 666%; margin: 20px 20px"></span>
-
-
         <p class="heading-text"><strong>500:</strong> OMG!!! Internal Server Error </p>
     </div>
 {% endblock %}
-{% block section_name %}errorPage{% endblock %}
\ No newline at end of file
+{% block section_name %}errorPage{% endblock %}
diff --git a/backend/src/appenlight/templates/footer.jinja2 b/backend/src/appenlight/templates/footer.jinja2
index 8b594f7..a3b8a3a 100644
--- a/backend/src/appenlight/templates/footer.jinja2
+++ b/backend/src/appenlight/templates/footer.jinja2
@@ -1,9 +1,6 @@
 <div class="footer">
     <div class="container">
-
     {{ template_footer_html |safe }}
-
     </div>
-
     <div id="app_instance">{{ appenlight_app_instance }}</div>
 </div>
diff --git a/backend/src/appenlight/templates/header.jinja2 b/backend/src/appenlight/templates/header.jinja2
index e549580..8502152 100644
--- a/backend/src/appenlight/templates/header.jinja2
+++ b/backend/src/appenlight/templates/header.jinja2
@@ -1,115 +1,22 @@
 <!-- Fixed navbar -->
-<div id="top-navbar" class="navbar navbar-default navbar-fixed-top" role="navigation"  data-ng-controller="HeaderCtrl as header">
-{% raw %}<channelstream config="AeConfig"></channelstream>{% endraw %}
-<div class="pattern">
-    <div class="container">
+<div id="top-navbar" class="navbar navbar-default navbar-fixed-top"
+     role="navigation">
+    <div class="pattern">
+        <div class="container">
             <div class="navbar-header pull-left">
                 <a href="{{ request.route_url('/') }}" class="navbar-brand">
-                <div id="logo-normal" class="hidden-sm hidden-xs"></div>
-                <div id="logo-icon" class="visible-sm visible-xs"></div>
+                    <div id="logo-normal" class="hidden-sm hidden-xs"></div>
+                    <div id="logo-icon" class="visible-sm visible-xs"></div>
                 </a>
             </div>
-
             <div class="container-fluid">
-                <div>
-            {% if request.user -%}
-                <ul class="nav navbar-nav navbar-right">
-                    <li id="user-notifications" class="dropdown ng-cloak" data-uib-dropdown>
-
-                        <a class="dropdown-toggle" data-uib-dropdown-toggle>
-                            <span class="badge">{% raw %}{{header.assignedReports.length}}{% endraw %}</span>
-                            <span class="fa fa-envelope-o"></span>
-                        </a>
-                        <ul class="dropdown-menu">
-                            <li role="presentation" class="dropdown-header">Assigned reports</li>
-                            {% raw %}
-                            <li data-ng-repeat="report in header.assignedReports" role="presentation">
-                                <a href="{{report.front_url}}" role="menuitem" tabindex="-1">
-                                    <small>{{ report.error || 'Slow Report: ' + report.view_name |truncate:65}}</small>
-                                </a>
-
-                            </li>
-                            <li data-ng-if="header.assignedReports.length == 0"><a><small>No reports</small></a></li>
-                            {% endraw %}
-                        </ul>
-                    </li>
-                    <li id="alert-notifications" class="dropdown ng-cloak" data-uib-dropdown auto-close="outsideClick">
-                        {% raw %}
-                        <a class="dropdown-toggle" data-uib-dropdown-toggle>
-                            <span class="badge {{ activeEvents ? 'danger' : '' }}">{{header.activeEvents}}</span>
-                            <span class="fa fa-bell-o"></span></a>
-                        <ul class="dropdown-menu">
-                            <li role="presentation" class="dropdown-header">
-                                <a data-ui-sref="events" class="btn btn-xs btn-default">Show me more</a></li>
-                            <li role="presentation" class="dropdown-header">Latest events</li>
-                            <li data-ng-repeat="event in header.latestEvents" role="presentation">
-                                <a data-ng-click="header.clickedEvent(event)"><small class="resource-name">For {{ event.resource_name }}</small><br/>
-                                    <small>{{ event.text |truncate:65}}</small><br/>
-                                    <small class="date" data-uib-tooltip="{{event.start_date}}">created: <iso-to-relative-time time="{{event.start_date}}"/></small>
-                                    <small class="date" data-ng-show="event.end_date" data-uib-tooltip="{{event.end_date}}">closed: <iso-to-relative-time time="{{event.end_date}}"/></small>
-                                </a>
-                            </li>
-                            <li data-ng-if="header.latestEvents.length == 0"><a><small>No events</small></a></li>
-                            {% endraw %}
-                        </ul>
-                    </li>
-
-                    <li id="dashboards" class="dropdown" data-uib-dropdown>
-                        <a class="dropdown-toggle" data-uib-dropdown-toggle tooltip-placement="bottom" data-uib-tooltip="Dashboards">
-                            <span class="fa fa-bar-chart-o "></span></a>
-                        <ul class="dropdown-menu">
-                            <li role="presentation"><a data-ui-sref="front_dashboard">Main dashboard</a>
-                            {% for item in top_nav['menu_dashboards_items'] %}
-                                <li role="presentation">
-                                    <a data-ui-sref="{{ item.sref }}">{{ item.label }}</a>
-                                </li>
-                            {% endfor %}
-                        </ul>
-                    </li>
-
-                    <li class="dropdown" data-uib-dropdown>
-                        <a class="dropdown-toggle" data-uib-dropdown-toggle tooltip-placement="bottom" data-uib-tooltip="Reports">
-                            <span class="fa fa-exclamation-triangle"></span></a>
-                        <ul class="dropdown-menu">
-                            <li role="presentation">
-                                <a data-ui-sref="report.list({resource:stateHolder.resource})">Error Reports</a>
-                            </li>
-                            <li role="presentation">
-                                <a data-ui-sref="report.list_slow({resource:stateHolder.resource})">Slowness Reports</a>
-                            </li>
-
-                        </ul>
-                    </li>
-
-                    <li>
-                        <a data-ui-sref="logs({resource:stateHolder.resource})" data-uib-tooltip="Logs" tooltip-placement="bottom"><span class="fa fa-list-alt "></span></a></li>
-                    <li>
-                        <a data-ui-sref="user" data-uib-tooltip="Settings" tooltip-placement="bottom"><span class="fa fa-cog "></span></a>
-                    </li>
-                    {% if top_nav['menu_admin_items'] %}
-                        <li class="dropdown" data-uib-dropdown>
-                            <a class="dropdown-toggle" data-uib-dropdown-toggle tooltip-placement="bottom" data-uib-tooltip="Admin Settings">
-                                <span class="fa fa-wrench"></span></a>
-                            <ul class="dropdown-menu">
-                                {% for item in top_nav['menu_admin_items'] %}
-                                <li role="presentation">
-                                    <a data-ui-sref="{{ item.sref }}">{{ item.label }}</a>
-                                </li>
-                                {% endfor %}
-                            </ul>
-                        </li>
-                    {% endif %}
-                    <li><a href="{{ request.route_url('ziggurat.routes.sign_out') }}" target="_self"
-                           data-uib-tooltip="Sign out" tooltip-placement="bottom">
-                        <span class="fa fa-power-off "></span></a></li>
-                </ul>
-            {% else -%}
                 <ul class="nav navbar-nav pull-right">
-                    <li><a href="{{ request.route_url('register', _query={'sign_in':'1'}) }}" target="_self" class="btn btn-orange">{{ _('Sign In') }}</a></li>
+                    <li>
+                        <a href="{{ request.route_url('register', _query={'sign_in':'1'}) }}"
+                           target="_self"
+                           class="btn btn-orange">{{ _('Sign In') }}</a></li>
                 </ul>
-        {% endif %}
-                </div><!-- /.navbar-collapse -->
             </div><!-- /.container-fluid -->
+        </div>
     </div>
 </div>
-</div>
diff --git a/backend/src/appenlight/templates/layout.jinja2 b/backend/src/appenlight/templates/layout.jinja2
index 3dab8a5..b463419 100644
--- a/backend/src/appenlight/templates/layout.jinja2
+++ b/backend/src/appenlight/templates/layout.jinja2
@@ -10,15 +10,8 @@
             {% endraw %}
         </div>
     </div>
-
-    <div {% block ng_view %}{% endblock %}>
-        <div class="row">
-            <!-- container -->
-            <!-- content -->
-            {% block content %}{% endblock %}
-            <!-- content -->
-            <!-- container -->
-        </div>
+    <div class="row">
+        {% block content %}{% endblock %}
     </div>
 </div>
 
diff --git a/backend/src/appenlight/templates/layout_base.jinja2 b/backend/src/appenlight/templates/layout_base.jinja2
index c52ab97..c79ef30 100644
--- a/backend/src/appenlight/templates/layout_base.jinja2
+++ b/backend/src/appenlight/templates/layout_base.jinja2
@@ -1,6 +1,6 @@
 {% import 'widgets.jinja2' as widgets %}
 <!DOCTYPE html>
-<html  {% block ng_controller %}{% endblock %}>
+<html>
 <head>
     <title>{% block title %}Application performance, exception and error monitoring for Python,
         Django, Flask and Javascript - AppEnlight{% endblock %}</title>
@@ -19,9 +19,7 @@
     {% block styles %}
         <link href="{{ request.static_url('appenlight:webassets/appenlight/css/front.css', _query={'rev':css_hash}) }}" rel="stylesheet" type="text/css"/>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
     {% endblock %}
-    {% block additional_styles %}{% endblock %}
     <script type="text/javascript">
         var AE = {};
         AE.urls = {{ url_list|tojson|safe }};
@@ -29,6 +27,7 @@
         AE.flash_messages = {{ flash_msgs|toJSONUnsafe }};
         AE.timeOptions = {{ h.time_options|toJSONUnsafe }};
         AE.plugins = {{ js_plugins|toJSONUnsafe }};
+        AE.topNav = {{ top_nav|toJSONUnsafe }};
     </script>
     {% if request.registry.settings.get('appenlight.public_api_key') %}
         <script type="application/javascript">
@@ -99,18 +98,25 @@
     </script>
 </head>
 <body class="{% block section_name %}{% endblock %} {% raw %}top-state-{{$state.current.name.split('.')[0].replace('.', '-').replace('.', '-')}} state-{{$state.current.name.replace('.', '-').replace('.', '-')}}{% endraw %} {% if request.user %}user-logged {% else %}user-unlogged{% endif %}" id="html_body">
-<div class="extra-deco1"></div>
-<div class="extra-deco2"></div>
-
-
 <div id="holder">
-{% include "/header.jinja2" with context %}
-<div id="outer-content">
-{% block outer_content %}Content{% endblock %}
-</div>
+{% block app_block %}
+    <appenlight-app>
+    <div class="text-center">
+        <span class="fa fa-cog fa-spin fa-5x loader"></span>
+    </div>
+    </appenlight-app>
+{% endblock %}
+
+{% block non_angular_content %}
+{% if not request.user %}
+    {% include "/header.jinja2" with context %}
+    <div id="outer-content">
+        {% block outer_content %}{% endblock %}
+    </div>
+{% endif %}
+{% endblock %}
 
 {% include "/footer.jinja2" %}
 </div>
-
 </body>
 </html>
diff --git a/backend/src/appenlight/templates/user/lost_password.jinja2 b/backend/src/appenlight/templates/user/lost_password.jinja2
index a930920..8d21f36 100644
--- a/backend/src/appenlight/templates/user/lost_password.jinja2
+++ b/backend/src/appenlight/templates/user/lost_password.jinja2
@@ -1,4 +1,5 @@
 {% extends "/layout.jinja2" %}
+{% block app_block %}{% endblock %}
 {% block content %}
 
 <div class="col-sm-offset-1 col-sm-10">
diff --git a/backend/src/appenlight/templates/user/lost_password_generate.jinja2 b/backend/src/appenlight/templates/user/lost_password_generate.jinja2
index 31c1a84..d52d662 100644
--- a/backend/src/appenlight/templates/user/lost_password_generate.jinja2
+++ b/backend/src/appenlight/templates/user/lost_password_generate.jinja2
@@ -1,4 +1,5 @@
 {% extends "/layout.jinja2" %}
+{% block app_block %}{% endblock %}
 {% block content %}
 <div class="col-sm-offset-1 col-sm-10">
 
diff --git a/backend/src/appenlight/templates/user/register.jinja2 b/backend/src/appenlight/templates/user/register.jinja2
index ceef96a..eed7542 100644
--- a/backend/src/appenlight/templates/user/register.jinja2
+++ b/backend/src/appenlight/templates/user/register.jinja2
@@ -1,9 +1,7 @@
 {% extends "/layout.jinja2" %}
-{% block ng_controller %} data-ng-controller="RegisterController as
-    register" {% endblock %}
 {% block content_class %}two-col equal{% endblock %}
 {% block section_name %}register-section{% endblock %}
-
+{% block app_block %}{% endblock %}
 {% block page_title %}{% endblock %}
 
 {% block content %}
diff --git a/backend/src/appenlight/views/index.py b/backend/src/appenlight/views/index.py
index 82a7fa5..9417b60 100644
--- a/backend/src/appenlight/views/index.py
+++ b/backend/src/appenlight/views/index.py
@@ -222,13 +222,13 @@ def register(request):
 
 
 @view_config(route_name='/',
-             renderer='appenlight:templates/dashboard/index.jinja2',
+             renderer='appenlight:templates/app.jinja2',
              permission=NO_PERMISSION_REQUIRED)
 @view_config(route_name='angular_app_ui',
-             renderer='appenlight:templates/dashboard/index.jinja2',
+             renderer='appenlight:templates/app.jinja2',
              permission=NO_PERMISSION_REQUIRED)
 @view_config(route_name='angular_app_ui_ix',
-             renderer='appenlight:templates/dashboard/index.jinja2',
+             renderer='appenlight:templates/app.jinja2',
              permission=NO_PERMISSION_REQUIRED)
 def app_main_index(request):
     """
diff --git a/frontend/src/app.js b/frontend/src/app.js
index 2c532cd..3447bf0 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -40,7 +40,9 @@ angular.module('appenlight.controllers', [
     'appenlight.base'
 ]);
 angular.module('appenlight.components', [
-    'appenlight.components.channelstream'
+    'appenlight.components.channelstream',
+    'appenlight.components.appenlightApp',
+    'appenlight.components.appenlightHeader'
 ]);
 angular.module('appenlight.directives', [
     'appenlight.directives.appVersion',
diff --git a/frontend/src/components/appenlight-app.js b/frontend/src/components/appenlight-app.js
new file mode 100644
index 0000000..7069032
--- /dev/null
+++ b/frontend/src/components/appenlight-app.js
@@ -0,0 +1,36 @@
+// # Copyright (C) 2010-2016  RhodeCode GmbH
+// #
+// # This program is free software: you can redistribute it and/or modify
+// # it under the terms of the GNU Affero General Public License, version 3
+// # (only), as published by the Free Software Foundation.
+// #
+// # This program is distributed in the hope that it will be useful,
+// # but WITHOUT ANY WARRANTY; without even the implied warranty of
+// # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// # GNU General Public License for more details.
+// #
+// # You should have received a copy of the GNU Affero General Public License
+// # along with this program.  If not, see <http://www.gnu.org/licenses/>.
+// #
+// # This program is dual-licensed. If you wish to learn more about the
+// # AppEnlight Enterprise Edition, including its added features, Support
+// # services, and proprietary license terms, please see
+// # https://rhodecode.com/licenses/
+
+angular.module('appenlight.components.appenlightApp', [])
+    .component('appenlightApp', {
+        templateUrl: 'templates/components/appenlight-app.html',
+        controller: AppEnlightAppController
+    });
+
+AppEnlightAppController.$inject = ['$scope','$state', 'stateHolder', 'AeConfig'];
+
+function AppEnlightAppController($scope, $state, stateHolder, AeConfig){
+    console.log('app start');
+    // to keep bw compatibility
+    $scope.$state = $state;
+    $scope.stateHolder = stateHolder;
+    $scope.flash = stateHolder.flashMessages.list;
+    $scope.closeAlert = stateHolder.flashMessages.closeAlert;
+    $scope.AeConfig = AeConfig;
+}
diff --git a/frontend/src/components/appenlight-footer.js b/frontend/src/components/appenlight-footer.js
new file mode 100644
index 0000000..1c78a5a
--- /dev/null
+++ b/frontend/src/components/appenlight-footer.js
@@ -0,0 +1,32 @@
+// # Copyright (C) 2010-2016  RhodeCode GmbH
+// #
+// # This program is free software: you can redistribute it and/or modify
+// # it under the terms of the GNU Affero General Public License, version 3
+// # (only), as published by the Free Software Foundation.
+// #
+// # This program is distributed in the hope that it will be useful,
+// # but WITHOUT ANY WARRANTY; without even the implied warranty of
+// # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// # GNU General Public License for more details.
+// #
+// # You should have received a copy of the GNU Affero General Public License
+// # along with this program.  If not, see <http://www.gnu.org/licenses/>.
+// #
+// # This program is dual-licensed. If you wish to learn more about the
+// # AppEnlight Enterprise Edition, including its added features, Support
+// # services, and proprietary license terms, please see
+// # https://rhodecode.com/licenses/
+
+angular.module('appenlight.components.appenlightHeader', [])
+    .component('appenlightFooter', {
+        templateUrl: 'templates/components/appenlight-footer.html',
+        controller: AppEnlightFooterController
+    });
+
+ChannelstreamController.$inject = ['stateHolder', 'AeConfig'];
+
+function AppEnlightFooterController(stateHolder, AeConfig){
+    var vm = this;
+    vm.AeConfig = AeConfig;
+    vm.stateHolder = stateHolder;
+}
diff --git a/frontend/src/controllers/header.js b/frontend/src/components/appenlight-header.js
similarity index 87%
rename from frontend/src/controllers/header.js
rename to frontend/src/components/appenlight-header.js
index 3be55c6..7342b98 100644
--- a/frontend/src/controllers/header.js
+++ b/frontend/src/components/appenlight-header.js
@@ -17,13 +17,17 @@
 // # services, and proprietary license terms, please see
 // # https://rhodecode.com/licenses/
 
-angular.module('appenlight.controllers')
-    .controller('HeaderCtrl', HeaderCtrl);
+angular.module('appenlight.components.appenlightHeader', [])
+    .component('appenlightHeader', {
+        templateUrl: 'templates/components/appenlight-header.html',
+        controller: AppEnlightHeaderController
+    });
 
-HeaderCtrl.$inject = ['$state', 'stateHolder'];
+ChannelstreamController.$inject = ['$state', 'stateHolder', 'AeConfig'];
 
-function HeaderCtrl($state, stateHolder) {
+function AppEnlightHeaderController($state, stateHolder, AeConfig){
     var vm = this;
+    vm.AeConfig = AeConfig;
     vm.stateHolder = stateHolder;
     vm.assignedReports = stateHolder.AeUser.assigned_reports;
     vm.latestEvents = stateHolder.AeUser.latest_events;
@@ -35,8 +39,6 @@ function HeaderCtrl($state, stateHolder) {
     });
 
     vm.clickedEvent = function(event){
-        console.log(event);
-        // (from Event model)
         // exception reports
         if (_.contains([1,2], event.event_type)){
             $state.go('report.list', {resource:event.resource_id, start_date:event.start_date});
diff --git a/frontend/src/components/channelstream.js b/frontend/src/components/channelstream.js
index 482f1ae..ed6ce9e 100644
--- a/frontend/src/components/channelstream.js
+++ b/frontend/src/components/channelstream.js
@@ -42,11 +42,11 @@ function ChannelstreamController($rootScope, stateHolder, userSelfPropertyResour
                 _.each(data, function (message) {
                     console.log('channelstream-message', message);
                     if(typeof message.message.topic !== 'undefined'){
-                        $rootScope.$broadcast(
+                        $rootScope.$emit(
                             'channelstream-message.'+message.message.topic, message);
                     }
                     else{
-                        $rootScope.$broadcast('channelstream-message', message);
+                        $rootScope.$emit('channelstream-message', message);
                     }
                 });
             });
diff --git a/frontend/src/config.js b/frontend/src/config.js
index 7a4a1f8..52ee14d 100644
--- a/frontend/src/config.js
+++ b/frontend/src/config.js
@@ -23,9 +23,9 @@ aeconfig.factory('AeConfig', function () {
     obj.flashMessages = decodeEncodedJSON(window.AE.flash_messages);
     obj.timeOptions = decodeEncodedJSON(window.AE.timeOptions);
     obj.plugins = decodeEncodedJSON(window.AE.plugins);
+    obj.topNav = decodeEncodedJSON(window.AE.topNav);
     obj.ws_url = window.AE.ws_url;
     obj.urls = window.AE.urls;
-
     // set keys on values because we wont be able to retrieve them everywhere
     for (var key in obj.timeOptions) {
         obj.timeOptions[key]['key'] = key;
diff --git a/frontend/src/controllers/front_dashboard.js b/frontend/src/controllers/front_dashboard.js
index 529b8ec..eb2e252 100644
--- a/frontend/src/controllers/front_dashboard.js
+++ b/frontend/src/controllers/front_dashboard.js
@@ -20,9 +20,9 @@
 angular.module('appenlight.controllers')
     .controller('IndexDashboardController', IndexDashboardController);
 
-IndexDashboardController.$inject = ['$scope', '$location','$cookies', '$interval', 'stateHolder', 'userSelfPropertyResource', 'applicationsPropertyResource', 'AeConfig'];
+IndexDashboardController.$inject = ['$rootScope', '$scope', '$location','$cookies', '$interval', 'stateHolder', 'applicationsPropertyResource', 'AeConfig'];
 
-function IndexDashboardController($scope, $location, $cookies, $interval, stateHolder, userSelfPropertyResource, applicationsPropertyResource, AeConfig) {
+function IndexDashboardController($rootScope, $scope, $location, $cookies, $interval, stateHolder, applicationsPropertyResource, AeConfig) {
     var vm = this;
     stateHolder.section = 'dashboard';
     vm.timeOptions = {};
@@ -32,6 +32,7 @@ function IndexDashboardController($scope, $location, $cookies, $interval, stateH
             vm.timeOptions[key] = AeConfig.timeOptions[key];
         }
     });
+    vm.stateHolder = stateHolder;
     vm.urls = AeConfig.urls;
     vm.applications = stateHolder.AeUser.applications_map;
     vm.show_dashboard = false;
@@ -376,7 +377,7 @@ function IndexDashboardController($scope, $location, $cookies, $interval, stateH
     };
     vm.stream = {paused: false, filtered: false, messages: [], reports: []};
 
-    $scope.$on('channelstream-message.front_dashboard.new_topic', function(event, message){
+    $rootScope.$on('channelstream-message.front_dashboard.new_topic', function(event, message){
         var ws_report = message.message.report;
         if (ws_report.http_status != 500) {
             return
@@ -646,9 +647,8 @@ function IndexDashboardController($scope, $location, $cookies, $interval, stateH
             function () {
                 vm.loading.reports = false;
             }
-        )
-        ;
-    }
+        );
+    };
 
     if (stateHolder.AeUser.applications.length){
         vm.show_dashboard = true;
@@ -664,5 +664,4 @@ function IndexDashboardController($scope, $location, $cookies, $interval, stateH
         }
     });
 
-
 }
diff --git a/frontend/src/controllers/reports/view.js b/frontend/src/controllers/reports/view.js
index 6bff170..eeb1a2a 100644
--- a/frontend/src/controllers/reports/view.js
+++ b/frontend/src/controllers/reports/view.js
@@ -25,6 +25,8 @@ ReportsViewController.$inject = ['$window', '$location', '$state', '$uibModal',
 function ReportsViewController($window, $location, $state, $uibModal, $cookies, reportGroupPropertyResource, reportGroupResource, logsNoIdResource, stateHolder) {
     var vm = this;
     vm.window = $window;
+    vm.stateHolder = stateHolder;
+    vm.$state = $state;
     vm.reportHistoryConfig = {
         data: {
             json: [],
diff --git a/frontend/src/services/state_holder.js b/frontend/src/services/state_holder.js
index 737abb9..4def23e 100644
--- a/frontend/src/services/state_holder.js
+++ b/frontend/src/services/state_holder.js
@@ -154,7 +154,8 @@ angular.module('appenlight.services.stateHolder', []).factory('stateHolder',
         resource: null,
         plugins: Plugins,
         flashMessages: flashMessages,
-        AeUser: AeUser
+        AeUser: AeUser,
+        AeConfig: AeConfig
     };
     return stateHolder;
 }]);
diff --git a/frontend/src/templates/components/appenlight-app.html b/frontend/src/templates/components/appenlight-app.html
new file mode 100644
index 0000000..c8c1d23
--- /dev/null
+++ b/frontend/src/templates/components/appenlight-app.html
@@ -0,0 +1,5 @@
+<channelstream config="AeConfig"></channelstream>
+<appenlight-header></appenlight-header>
+<div id="outer-content">
+    <div ui-view class="container"></div>
+</div>
diff --git a/frontend/src/templates/components/appenlight-header.html b/frontend/src/templates/components/appenlight-header.html
new file mode 100644
index 0000000..24bddd1
--- /dev/null
+++ b/frontend/src/templates/components/appenlight-header.html
@@ -0,0 +1,101 @@
+<!-- Fixed navbar -->
+<div id="top-navbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
+    <div class="pattern">
+        <div class="container">
+            <div class="navbar-header pull-left">
+                <a data-ui-sref="front_dashboard" class="navbar-brand">
+                    <div id="logo-normal" class="hidden-sm hidden-xs"></div>
+                    <div id="logo-icon" class="visible-sm visible-xs"></div>
+                </a>
+            </div>
+
+            <div class="container-fluid">
+                <div>
+                        <ul class="nav navbar-nav navbar-right" ng-if="$ctrl.stateHolder.AeUser.id !== null">
+                            <li id="user-notifications" class="dropdown ng-cloak" data-uib-dropdown>
+
+                                <a class="dropdown-toggle" data-uib-dropdown-toggle>
+                                    <span class="badge">{{$ctrl.assignedReports.length}}</span>
+                                    <span class="fa fa-envelope-o"></span>
+                                </a>
+                                <ul class="dropdown-menu">
+                                    <li role="presentation" class="dropdown-header">Assigned reports</li>
+                                    <li data-ng-repeat="report in $ctrl.assignedReports" role="presentation">
+                                        <a href="{{report.front_url}}" role="menuitem" tabindex="-1">
+                                            <small>{{ report.error || 'Slow Report: ' + report.view_name |truncate:65}}</small>
+                                        </a>
+
+                                    </li>
+                                    <li data-ng-if="$ctrl.assignedReports.length == 0"><a><small>No reports</small></a></li>
+                                </ul>
+                            </li>
+                            <li id="alert-notifications" class="dropdown ng-cloak" data-uib-dropdown auto-close="outsideClick">
+                                <a class="dropdown-toggle" data-uib-dropdown-toggle>
+                                    <span class="badge {{ activeEvents ? 'danger' : '' }}">{{$ctrl.activeEvents}}</span>
+                                    <span class="fa fa-bell-o"></span></a>
+                                <ul class="dropdown-menu">
+                                    <li role="presentation" class="dropdown-header">
+                                        <a data-ui-sref="events" class="btn btn-xs btn-default">Show me more</a></li>
+                                    <li role="presentation" class="dropdown-header">Latest events</li>
+                                    <li data-ng-repeat="event in $ctrl.latestEvents" role="presentation">
+                                        <a data-ng-click="$ctrl.clickedEvent(event)"><small class="resource-name">For {{ event.resource_name }}</small><br/>
+                                            <small>{{ event.text |truncate:65}}</small><br/>
+                                            <small class="date" data-uib-tooltip="{{event.start_date}}">created: <iso-to-relative-time time="{{event.start_date}}"/></small>
+                                            <small class="date" data-ng-show="event.end_date" data-uib-tooltip="{{event.end_date}}">closed: <iso-to-relative-time time="{{event.end_date}}"/></small>
+                                        </a>
+                                    </li>
+                                    <li data-ng-if="$ctrl.latestEvents.length == 0"><a><small>No events</small></a></li>
+                                </ul>
+                            </li>
+
+                            <li id="dashboards" class="dropdown" data-uib-dropdown>
+                                <a class="dropdown-toggle" data-uib-dropdown-toggle tooltip-placement="bottom" data-uib-tooltip="Dashboards">
+                                    <span class="fa fa-bar-chart-o "></span></a>
+                                <ul class="dropdown-menu">
+                                    <li role="presentation"><a data-ui-sref="front_dashboard">Main dashboard</a></li>
+                                    <li role="presentation" ng-repeat="item in $ctrl.AeConfig.topNav.menu_dashboards_items">
+                                        <a data-ui-sref="{{ item.sref }}">{{ item.label }}</a>
+                                    </li>
+                                </ul>
+                            </li>
+
+                            <li class="dropdown" data-uib-dropdown>
+                                <a class="dropdown-toggle" data-uib-dropdown-toggle tooltip-placement="bottom" data-uib-tooltip="Reports">
+                                    <span class="fa fa-exclamation-triangle"></span></a>
+                                <ul class="dropdown-menu">
+                                    <li role="presentation">
+                                        <a data-ui-sref="report.list({resource:$ctrl.stateHolder.resource})">Error Reports</a>
+                                    </li>
+                                    <li role="presentation">
+                                        <a data-ui-sref="report.list_slow({resource:$ctrl.stateHolder.resource})">Slowness Reports</a>
+                                    </li>
+
+                                </ul>
+                            </li>
+
+                            <li>
+                                <a data-ui-sref="logs({resource:$ctrl.stateHolder.resource})" data-uib-tooltip="Logs" tooltip-placement="bottom"><span class="fa fa-list-alt "></span></a></li>
+                            <li>
+                                <a data-ui-sref="user" data-uib-tooltip="Settings" tooltip-placement="bottom"><span class="fa fa-cog "></span></a>
+                            </li>
+                            <li class="dropdown" data-uib-dropdown data-ng-if="$ctrl.AeConfig.topNav.menu_admin_items.length">
+                                <a class="dropdown-toggle" data-uib-dropdown-toggle tooltip-placement="bottom" data-uib-tooltip="Admin Settings">
+                                    <span class="fa fa-wrench"></span></a>
+                                <ul class="dropdown-menu">
+                                    <li role="presentation" ng-repeat="item in $ctrl.AeConfig.topNav.menu_admin_items">
+                                        <a data-ui-sref="{{ item.sref }}">{{ item.label }}</a>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li><a href="{{ $ctrl.AeConfig.urls.otherRoutes.signOut }}" target="_self"
+                                   data-uib-tooltip="Sign out" tooltip-placement="bottom">
+                                <span class="fa fa-power-off "></span></a></li>
+                        </ul>
+                        <ul class="nav navbar-nav pull-right" ng-if="$ctrl.stateHolder.AeUser.id === null">
+                            <li><a href="{{ $ctrl.AeConfig.urls.otherRoutes.register }}" target="_self" class="btn btn-orange">Sign In</a></li>
+                        </ul>
+                </div><!-- /.navbar-collapse -->
+            </div><!-- /.container-fluid -->
+        </div>
+    </div>
+</div>
diff --git a/frontend/src/templates/dashboard.html b/frontend/src/templates/dashboard.html
index 090d612..efdee99 100644
--- a/frontend/src/templates/dashboard.html
+++ b/frontend/src/templates/dashboard.html
@@ -13,21 +13,20 @@
 
 <div class="row">
     <div class="col-sm-12 dashboard" id="content">
-
-        <div ng-if="!stateHolder.AeUser.applications.length">
+        <div ng-if="!index.stateHolder.AeUser.applications.length">
 
             <div ng-include="'templates/quickstart.html'"></div>
 
         </div>
 
-        <div ng-if="stateHolder.AeUser.applications.length">
+        <div ng-if="index.stateHolder.AeUser.applications.length">
 
             <div class="row">
                 <div class="col-sm-6">
                     <div class="panel panel-default">
                         <div class="panel-body">
                             <form class="graph-type form-inline">
-                                <select ng-model="index.resource" ng-options="r.resource_id as r.resource_name for r in stateHolder.AeUser.applications" ng-change="index.updateSearchParams()"
+                                <select ng-model="index.resource" ng-options="r.resource_id as r.resource_name for r in index.stateHolder.AeUser.applications" ng-change="index.updateSearchParams()"
                                         class="SelectField form-control input-sm slim-input"></select>
 
                                 <select class="SelectField form-control input-sm slim-input" ng-model="index.timeSpan"
diff --git a/frontend/src/templates/reports/view.html b/frontend/src/templates/reports/view.html
index 09ab3d2..b56e52a 100644
--- a/frontend/src/templates/reports/view.html
+++ b/frontend/src/templates/reports/view.html
@@ -94,7 +94,7 @@
 
 <div ng-if="report.report !== null && !report.is_loading.report">
 
-    <div ng-if="stateHolder.AeUser.id" class="row">
+    <div ng-if="report.stateHolder.AeUser.id" class="row">
       <div class="col-lg-12">
         <a onclick="window.history.back()" class="btn btn-default" ng-if="report.window.history.length > 2"><span class="fa fa-arrow-circle-o-left"></span>
             Go back</a>
@@ -154,7 +154,7 @@
                             <td class="table-label">Public URL</td>
                             <td class="data">
                                 <form>
-                                    <textarea class="TextAreaField form-control" id="public-url" onclick="this.select()">{{$state.href($state.current.name, $state.params, {absolute: true})}}</textarea>
+                                    <textarea class="TextAreaField form-control" id="public-url" onclick="this.select()">{{report.$state.href(report.$state.current.name, report.$state.params, {absolute: true})}}</textarea>
                                 </form>
                             </td>
                         </tr>