Merge branch 'master' of github.com:titilambert/adagios-frontend

Conflicts:
	app/index.html
	app/navbar/navbar.js
	app/sidebar/sidebar.js
	app/topbar/topbar.css
	app/topbar/topbar.html

.gitignore

@@ -1,4 +1,8 @@
+# Logs
 logs/*
+*.log
+*.orig
+
 !.gitkeep
 node_modules/
 bower_components/
@@ -8,3 +12,4 @@ tmp
 *.swp
 app/assets/css
 .sass-cache/
+out/

Gruntfile.js

@@ -1,8 +1,12 @@
 'use strict';
 
-module.exports = function(grunt) {
-    grunt.initConfig({
+module.exports = function (grunt) {
 
+    grunt.loadNpmTasks('grunt-contrib-sass');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-jslint');
+
+    grunt.initConfig({
 
         pkg: grunt.file.readJSON('package.json'),
 
@@ -12,7 +16,6 @@ module.exports = function(grunt) {
             css: ['<%= project.assets %>/sass/app.scss']
         },
 
-
         sass: {
             dev: {
                 options: {
@@ -20,7 +23,7 @@ module.exports = function(grunt) {
                     compass: false
                 },
                 files: {
-                    '<%= project.assets %>/css/app.css':'<%= project.css %>'
+                    '<%= project.assets %>/css/app.css' : '<%= project.css %>'
                 }
             }
         },
@@ -33,12 +36,42 @@ module.exports = function(grunt) {
                 ],
                 tasks: ['sass:dev']
             }
+        },
+
+        jslint: { // configure the task
+
+            client: {
+                src: [
+                    'karma.conf.js',
+                    'Gruntfile.js',
+                    'app/app.js',
+                    'app/**/*.js'
+                ],
+                exclude: [
+                    'app/bower_components/**/*.js',
+                    'app/assets/**/*'
+                ],
+                directives: {
+                    node: true,
+                    unparam: true, // TEMPORARY: Ignore unused params
+                    nomen: true,
+                    predef: [ // Global variables
+                        'angular', 'inject', 'JustGage',
+                        'describe', 'beforeEach', 'it', 'expect'
+                    ]
+                },
+                options: {
+                    edition: 'latest', // specify an edition of jslint or use 'dir/mycustom-jslint.js' for own path
+                    junit: 'out/client-junit.xml', // write the output to a JUnit XML
+                    log: 'out/client-lint.log',
+                    jslintXml: 'out/client-jslint.xml',
+                    errorsOnly: true, // only display errors
+                    failOnError: false, // defaults to true
+                    checkstyle: 'out/client-checkstyle.xml' // write a checkstyle-XML
+                }
+            }
         }
     });
 
-    grunt.loadNpmTasks('grunt-contrib-sass');
-    grunt.loadNpmTasks('grunt-contrib-watch');
-    grunt.registerTask('default', [
-        'watch'
-    ]);
+    grunt.registerTask('default', [ 'watch', 'jslint' ]);
 };

app/app.js

@@ -1,13 +1,13 @@
 'use strict';
 
-// Declare app level module which depends on views, and components
 angular.module('adagios', [
-  'ngRoute',
-  'adagios.sidebar',
-  'adagios.navbar',
-  'adagios.tactical'
-]).
+    'ngRoute',
+    'adagios.sidebar',
+    'adagios.topbar',
+    'adagios.tactical',
+    'adagios.table'
+])
 
-config(['$routeProvider', function($routeProvider) {
-  $routeProvider.otherwise({redirectTo: '/'});
-}]);
+    .config(['$routeProvider', function ($routeProvider) {
+        $routeProvider.otherwise({redirectTo: '/'});
+    }]);

app/components/live/get_services.js

@@ -0,0 +1,13 @@
+'use strict';
+
+angular.module('adagios.live')
+
+    .factory('GetServices', ['$http', function ($http, columns) {
+
+        return function (columns) {
+            return $http.get('/rest/status/json/services/?fields=' + columns)
+                .error(function (data, status, headers, config) {
+                    console.error('GetServices : GET Request failed');
+                });
+        };
+    }]);

app/components/live/live.js

@@ -0,0 +1,3 @@
+'use strict';
+
+angular.module('adagios.live', []);

app/components/live/notifications.js

@@ -1,10 +1,9 @@
 'use strict';
 
+angular.module('adagios.live')
 
-angular.module('adagios.live', [])
-.factory('GetProblems', ['$http', function($http) {
-    // $http.get("/getproblems")
-    var problem_number = 44;
-    // factory function body that constructs shinyNewServiceInstance
-    return problem_number;
-}]);
+    .factory('GetProblems', ['$http', function ($http) {
+        var problem_number = 44;
+
+        return problem_number;
+    }]);

app/components/ng-justgage/ng-justgage.js

@@ -1,45 +1,54 @@
+'use strict';
+
 angular.module("ngJustGage", [])
-  .directive('justGage', ['$timeout', function ($timeout) {
-    return {
-      restrict: 'EA',
-      scope: {
-        id: '@',
-        class: '@',
-        min: '=',
-        max: '=',
-        title: '@',
-        value: '=',
-        options: '='
-      },
-      template: '<div id="{{id}}-justgage" class="{{class}}"></div>',
-      link: function (scope,element,attrs) {
-        $timeout(function () {
-          var options = {
-            id: scope.id + '-justgage',
-            min: scope.min,
-            max: scope.max,
-            title: scope.title,
-            value: scope.value
-          }
-          if ( scope.options ) {
-              for (var key in scope.options) {
-                  options[key]=scope.options[key];
-              }
-          }
-          var graph = new JustGage(options);
+    .directive('justGage', ['$timeout', function ($timeout) {
+        return {
+            restrict: 'EA',
+            scope: {
+                id: '@',
+                class: '@',
+                min: '=',
+                max: '=',
+                title: '@',
+                value: '=',
+                options: '='
+            },
+            template: '<div id="{{id}}-justgage" class="{{class}}"></div>',
+            link: function (scope, element, attrs) {
+                $timeout(function () {
+                    var options, key, graph;
 
-          scope.$watch('max', function (updatedMax) {
-            if (updatedMax !== undefined) {
-              graph.refresh(scope.value, updatedMax);
-            }
-          }, true);
+                    options = {
+                        id: scope.id + '-justgage',
+                        min: scope.min,
+                        max: scope.max,
+                        title: scope.title,
+                        value: scope.value
+                    };
 
-          scope.$watch('value', function (updatedValue) {
-            if (updatedValue !== undefined) {
-              graph.refresh(updatedValue);
+                    if (scope.options) {
+                        for (key in scope.options) {
+                            if (scope.options.hasOwnProperty(key)) {
+                                options[key] = scope.options[key];
+                            }
+                        }
+                    }
+
+                    graph = new JustGage(options);
+
+                    scope.$watch('max', function (updatedMax) {
+                        if (updatedMax !== undefined) {
+                            graph.refresh(scope.value, updatedMax);
+                        }
+                    }, true);
+
+                    scope.$watch('value', function (updatedValue) {
+                        if (updatedValue !== undefined) {
+                            graph.refresh(updatedValue);
+                        }
+                    }, true);
+
+                });
             }
-          }, true);
-        });
-      }
-    };
-  }]);
+        };
+    }]);

app/index.html

@@ -19,13 +19,15 @@
     <!-- Application -->
     <script src="app.js"></script>
     <!-- COMPONENTS -->
+    <script src="components/live/live.js"></script>
     <script src="components/live/notifications.js"></script>
+    <script src="components/live/get_services.js"></script>
     <script src="components/ng-justgage/ng-justgage.js"></script>
     <!-- MODULES -->
     <!-- Sidebar -->
     <script src="sidebar/sidebar.js"></script>
-    <!-- Navbar -->
-    <script src="navbar/navbar.js"></script>
+    <!-- Topbar -->
+    <script src="topbar/topbar.js"></script>
     <!-- Tactical -->
     <script src="tactical/tactical.js"></script>
     <!-- Status Overview -->
@@ -34,6 +36,13 @@
     <script src="tactical/current_health/current_health.js"></script>
     <!-- TopAlertProducers -->
     <script src="tactical/top_alert_producers/top_alert_producers.js"></script>
+    <script src="table/table.js"></script>
+    <script src="table/entry/entry.js"></script>
+    <script src="table/entry/column_duration/duration_column.js"></script>
+    <script src="table/entry/column_host/host_column.js"></script>
+    <script src="table/entry/column_last_check/last_check_column.js"></script>
+    <script src="table/entry/column_service_check/service_check_column.js"></script>
+
     <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>    
   </head>
   <body class="layout color-scheme--dark">
@@ -47,9 +56,7 @@
 
       <div class="layout__main">
         <div class="layout__row navbar-wrapper">
-          <navbar></navbar>
-        </div>
-
+          <topbar></topbar>
         <main ng-view id="page" class="main layout__row" role="main"></main>
         <footer class="footer layout__row" role="contentinfo">...</footer>
       </div>

app/navbar/navbar.js

@@ -1,18 +0,0 @@
-'use strict';
-
-angular.module('adagios.navbar', ['adagios.live'])
-
-.controller('NavBarCtrl', ['$scope', '$http', 'GetProblems',
-    function($scope, $http, GetProblems) {
-        $scope.notifications = GetProblems;
-        
-    }])
-
-.directive('navbar', function() {
-  return {
-    restrict: 'E',
-    templateUrl: "navbar/navbar.html"
-  };
-});
-
-

app/sidebar/sidebar.js

@@ -2,14 +2,14 @@
 
 angular.module('adagios.sidebar', [])
 
-.controller('SideBarCtrl', ['$scope', '$http',
-                            function($scope, $http) {
+    .controller('SideBarCtrl', ['$scope', '$http', function ($scope, $http) {
+        return;
                                 
                             }])
 
-.directive('sidebar', function() {
-  return {
-    restrict: 'E',
-    templateUrl: "sidebar/sidebar.html"
-  };
-});
+    .directive('sidebar', function () {
+        return {
+            restrict: 'E',
+            templateUrl: "sidebar/sidebar.html"
+        };
+    });

app/sidebar/sidebar_test.js

@@ -0,0 +1,41 @@
+'use strict';
+
+describe('Sidebar module', function () {
+    var $compile,
+        $rootScope,
+        $controller,
+        $httpBackend;
+
+    beforeEach(module('adagios.sidebar'));
+
+    beforeEach(inject(function (_$compile_, _$rootScope_, _$controller_, _$httpBackend_) {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $controller = _$controller_;
+        $httpBackend = _$httpBackend_;
+
+        $httpBackend.expectGET('sidebar/sidebar.html').respond('<li></li>');
+    }));
+
+    describe('SideBarCtrl', function () {
+
+        it('should be defined', function () {
+            var scope = $rootScope.$new(),
+                ctrl = $controller('SideBarCtrl', { $scope : scope });
+
+            expect(ctrl).toBeDefined();
+        });
+
+    });
+
+    describe('Sidebar directive', function () {
+
+        it('should send a GET request', function () {
+            var element = $compile('<sidebar></sidebar>')($rootScope);
+            $httpBackend.flush();
+
+            expect(element.html()).toBe('<li></li>');
+        });
+
+    });
+});

app/table/entry/column_duration/duration_column.css

@@ -0,0 +1,146 @@
+.nav-side-menu {
+  overflow: auto;
+  font-family: verdana;
+  font-size: 12px;
+  font-weight: 200;
+  background-color: #2e353d;
+  position: fixed;
+  top: 0px;
+  width: 300px;
+  height: 100%;
+  color: #e1ffff;
+}
+.nav-side-menu .brand {
+  background-color: #23282e;
+  line-height: 50px;
+  display: block;
+  text-align: center;
+  font-size: 14px;
+}
+.nav-side-menu .toggle-btn {
+  display: none;
+}
+.nav-side-menu ul,
+.nav-side-menu li {
+  list-style: none;
+  padding: 0px;
+  margin: 0px;
+  line-height: 35px;
+  cursor: pointer;
+  /*    
+    .collapsed{
+       .arrow:before{
+                 font-family: FontAwesome;
+                 content: "\f053";
+                 display: inline-block;
+                 padding-left:10px;
+                 padding-right: 10px;
+                 vertical-align: middle;
+                 float:right;
+            }
+     }
+*/
+}
+.nav-side-menu ul :not(collapsed) .arrow:before,
+.nav-side-menu li :not(collapsed) .arrow:before {
+  font-family: FontAwesome;
+  content: "\f078";
+  display: inline-block;
+  padding-left: 10px;
+  padding-right: 10px;
+  vertical-align: middle;
+  float: right;
+}
+.nav-side-menu ul .active,
+.nav-side-menu li .active {
+  border-left: 3px solid #d19b3d;
+  background-color: #4f5b69;
+}
+.nav-side-menu ul .sub-menu li.active,
+.nav-side-menu li .sub-menu li.active {
+  color: #d19b3d;
+}
+.nav-side-menu ul .sub-menu li.active a,
+.nav-side-menu li .sub-menu li.active a {
+  color: #d19b3d;
+}
+.nav-side-menu ul .sub-menu li,
+.nav-side-menu li .sub-menu li {
+  background-color: #181c20;
+  border: none;
+  line-height: 28px;
+  border-bottom: 1px solid #23282e;
+  margin-left: 0px;
+}
+.nav-side-menu ul .sub-menu li:hover,
+.nav-side-menu li .sub-menu li:hover {
+  background-color: #020203;
+}
+.nav-side-menu ul .sub-menu li:before,
+.nav-side-menu li .sub-menu li:before {
+  font-family: FontAwesome;
+  content: "\f105";
+  display: inline-block;
+  padding-left: 10px;
+  padding-right: 10px;
+  vertical-align: middle;
+}
+.nav-side-menu li {
+  padding-left: 0px;
+  border-left: 3px solid #2e353d;
+  border-bottom: 1px solid #23282e;
+}
+.nav-side-menu li a {
+  text-decoration: none;
+  color: #e1ffff;
+}
+.nav-side-menu li a i {
+  padding-left: 10px;
+  width: 20px;
+  padding-right: 20px;
+}
+.nav-side-menu li:hover {
+  border-left: 3px solid #d19b3d;
+  background-color: #4f5b69;
+  -webkit-transition: all 1s ease;
+  -moz-transition: all 1s ease;
+  -o-transition: all 1s ease;
+  -ms-transition: all 1s ease;
+  transition: all 1s ease;
+}
+@media (max-width: 767px) {
+  .nav-side-menu {
+    position: relative;
+    width: 100%;
+    margin-bottom: 10px;
+  }
+  .nav-side-menu .toggle-btn {
+    display: block;
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 10 !important;
+    padding: 3px;
+    background-color: #ffffff;
+    color: #000;
+    width: 40px;
+    text-align: center;
+  }
+  .brand {
+    text-align: left !important;
+    font-size: 22px;
+    padding-left: 20px;
+    line-height: 50px !important;
+  }
+}
+@media (min-width: 767px) {
+  .nav-side-menu .menu-list .menu-content {
+    display: block;
+  }
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+

app/table/entry/column_duration/duration_column.html

@@ -0,0 +1,59 @@
+<div nv-app="adagios.sidebar" class="nav-side-menu" ng-controller="SideBarCtrl">
+    <div class="brand">ADAGIOS</div>
+    <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
+  
+        <div class="menu-list">
+  
+            <ul id="menu-content" class="menu-content out">
+                
+                <li data-toggle="collapse" data-target="#shortcut" class="collapsed menu-title">
+                  <a href="#"> Shortcut <span class="arrow"></span></a>
+                </li>
+                <ul class="sub-menu collapse" id="shortcut">
+                    <li><a href="#/tactical">Dashboard</a></li>
+                    <li><a href="#/hosts">Hosts</a></li>
+                    <li><a href="#">Services</a></li>
+                    <li><a href="#">Networks parents</a></li>
+                </ul>
+
+
+                <li data-toggle="collapse" data-target="#reports" class="collapsed menu-title">
+                  <a href="#"> Reports <span class="arrow"></span></a>
+                </li>
+                <ul class="sub-menu collapse" id="reports">
+                    <li><a href="#">State History</a></li>
+                    <li><a href="#">Log</a></li>
+                    <li><a href="#">Comments</a></li>
+                    <li><a href="#">Downtimes</a></li>
+                </ul>
+
+
+                <li data-toggle="collapse" data-target="#groups" class="collapsed menu-title">
+                  <a href="#"> Groups <span class="arrow"></span></a>
+                </li>
+                <ul class="sub-menu collapse" id="groups">
+                    <li><a href="#">Hostgroups</a></li>
+                    <li><a href="#">Servicegroups</a></li>
+                    <li><a href="#">Contactgroups</a></li>
+                </ul>
+
+
+                <li data-toggle="collapse" data-target="#other" class="collapsed menu-title">
+                  <a href="#"> Other <span class="arrow"></span></a>
+                </li>
+                <ul class="sub-menu collapse" id="other">
+                    <li><a href="#">Grafana</a></li>
+                    <li><a href="#">Nagvis</a></li>
+                </ul>
+
+
+
+                <li>
+                  <a href="#">
+                  <i class="fa fa-user fa-lg"></i> Profile
+                  </a>
+                </li>
+
+            </ul>
+     </div>
+</div>

app/table/entry/column_duration/duration_column.js

@@ -0,0 +1,14 @@
+'use strict';
+
+angular.module('adagios.table.entry.column_duration', [])
+
+    .controller('SideBarCtrl', ['$scope', '$http', function ($scope, $http) {
+        return;
+    }])
+
+    .directive('sidebar', function () {
+        return {
+            restrict: 'E',
+            templateUrl: "sidebar/sidebar.html"
+        };
+    });

app/table/entry/column_duration/duration_column_test.js

@@ -0,0 +1,41 @@
+'use strict';
+
+describe('Sidebar module', function () {
+    var $compile,
+        $rootScope,
+        $controller,
+        $httpBackend;
+
+    beforeEach(module('adagios.sidebar'));
+
+    beforeEach(inject(function (_$compile_, _$rootScope_, _$controller_, _$httpBackend_) {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $controller = _$controller_;
+        $httpBackend = _$httpBackend_;
+
+        $httpBackend.expectGET('sidebar/sidebar.html').respond('<li></li>');
+    }));
+
+    describe('SideBarCtrl', function () {
+
+        it('should be defined', function () {
+            var scope = $rootScope.$new(),
+                ctrl = $controller('SideBarCtrl', { $scope : scope });
+
+            expect(ctrl).toBeDefined();
+        });
+
+    });
+
+    describe('Sidebar directive', function () {
+
+        it('should send a GET request', function () {
+            var element = $compile('<sidebar></sidebar>')($rootScope);
+            $httpBackend.flush();
+
+            expect(element.html()).toBe('<li></li>');
+        });
+
+    });
+});

app/table/entry/column_host/host_column.css

@@ -0,0 +1,146 @@
+.nav-side-menu {
+  overflow: auto;
+  font-family: verdana;
+  font-size: 12px;
+  font-weight: 200;
+  background-color: #2e353d;
+  position: fixed;
+  top: 0px;
+  width: 300px;
+  height: 100%;
+  color: #e1ffff;
+}
+.nav-side-menu .brand {
+  background-color: #23282e;
+  line-height: 50px;
+  display: block;
+  text-align: center;
+  font-size: 14px;
+}
+.nav-side-menu .toggle-btn {
+  display: none;
+}
+.nav-side-menu ul,
+.nav-side-menu li {
+  list-style: none;
+  padding: 0px;
+  margin: 0px;
+  line-height: 35px;
+  cursor: pointer;
+  /*    
+    .collapsed{
+       .arrow:before{
+                 font-family: FontAwesome;
+                 content: "\f053";
+                 display: inline-block;
+                 padding-left:10px;
+                 padding-right: 10px;
+                 vertical-align: middle;
+                 float:right;
+            }
+     }
+*/
+}
+.nav-side-menu ul :not(collapsed) .arrow:before,
+.nav-side-menu li :not(collapsed) .arrow:before {
+  font-family: FontAwesome;
+  content: "\f078";
+  display: inline-block;
+  padding-left: 10px;
+  padding-right: 10px;
+  vertical-align: middle;
+  float: right;
+}
+.nav-side-menu ul .active,
+.nav-side-menu li .active {
+  border-left: 3px solid #d19b3d;
+  background-color: #4f5b69;
+}
+.nav-side-menu ul .sub-menu li.active,
+.nav-side-menu li .sub-menu li.active {
+  color: #d19b3d;
+}
+.nav-side-menu ul .sub-menu li.active a,
+.nav-side-menu li .sub-menu li.active a {
+  color: #d19b3d;
+}
+.nav-side-menu ul .sub-menu li,
+.nav-side-menu li .sub-menu li {
+  background-color: #181c20;
+  border: none;
+  line-height: 28px;
+  border-bottom: 1px solid #23282e;
+  margin-left: 0px;
+}
+.nav-side-menu ul .sub-menu li:hover,
+.nav-side-menu li .sub-menu li:hover {
+  background-color: #020203;
+}
+.nav-side-menu ul .sub-menu li:before,
+.nav-side-menu li .sub-menu li:before {
+  font-family: FontAwesome;
+  content: "\f105";
+  display: inline-block;
+  padding-left: 10px;
+  padding-right: 10px;
+  vertical-align: middle;
+}
+.nav-side-menu li {
+  padding-left: 0px;
+  border-left: 3px solid #2e353d;
+  border-bottom: 1px solid #23282e;
+}
+.nav-side-menu li a {
+  text-decoration: none;
+  color: #e1ffff;
+}
+.nav-side-menu li a i {
+  padding-left: 10px;
+  width: 20px;
+  padding-right: 20px;
+}
+.nav-side-menu li:hover {
+  border-left: 3px solid #d19b3d;
+  background-color: #4f5b69;
+  -webkit-transition: all 1s ease;
+  -moz-transition: all 1s ease;
+  -o-transition: all 1s ease;
+  -ms-transition: all 1s ease;
+  transition: all 1s ease;
+}
+@media (max-width: 767px) {
+  .nav-side-menu {
+    position: relative;
+    width: 100%;
+    margin-bottom: 10px;
+  }
+  .nav-side-menu .toggle-btn {
+    display: block;
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 10 !important;
+    padding: 3px;
+    background-color: #ffffff;
+    color: #000;
+    width: 40px;
+    text-align: center;
+  }
+  .brand {
+    text-align: left !important;
+    font-size: 22px;
+    padding-left: 20px;
+    line-height: 50px !important;
+  }
+}
+@media (min-width: 767px) {
+  .nav-side-menu .menu-list .menu-content {
+    display: block;
+  }
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+

app/table/entry/column_host/host_column.html

@@ -0,0 +1,59 @@
+<div nv-app="adagios.sidebar" class="nav-side-menu" ng-controller="SideBarCtrl">
+    <div class="brand">ADAGIOS</div>
+    <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
+  
+        <div class="menu-list">
+  
+            <ul id="menu-content" class="menu-content out">
+                
+                <li data-toggle="collapse" data-target="#shortcut" class="collapsed menu-title">
+                  <a href="#"> Shortcut <span class="arrow"></span></a>
+                </li>
+                <ul class="sub-menu collapse" id="shortcut">
+                    <li><a href="#/tactical">Dashboard</a></li>
+                    <li><a href="#/hosts">Hosts</a></li>
+                    <li><a href="#">Services</a></li>
+                    <li><a href="#">Networks parents</a></li>
+                </ul>
+
+
+                <li data-toggle="collapse" data-target="#reports" class="collapsed menu-title">
+                  <a href="#"> Reports <span class="arrow"></span></a>
+                </li>
+                <ul class="sub-menu collapse" id="reports">
+                    <li><a href="#">State History</a></li>
+                    <li><a href="#">Log</a></li>
+                    <li><a href="#">Comments</a></li>
+                    <li><a href="#">Downtimes</a></li>
+                </ul>
+
+
+                <li data-toggle="collapse" data-target="#groups" class="collapsed menu-title">
+                  <a href="#"> Groups <span class="arrow"></span></a>
+                </li>
+                <ul class="sub-menu collapse" id="groups">
+                    <li><a href="#">Hostgroups</a></li>
+                    <li><a href="#">Servicegroups</a></li>
+                    <li><a href="#">Contactgroups</a></li>
+                </ul>
+
+
+                <li data-toggle="collapse" data-target="#other" class="collapsed menu-title">
+                  <a href="#"> Other <span class="arrow"></span></a>
+                </li>
+                <ul class="sub-menu collapse" id="other">
+                    <li><a href="#">Grafana</a></li>
+                    <li><a href="#">Nagvis</a></li>
+                </ul>
+
+
+
+                <li>
+                  <a href="#">
+                  <i class="fa fa-user fa-lg"></i> Profile
+                  </a>
+                </li>
+
+            </ul>
+     </div>
+</div>

app/table/entry/column_host/host_column.js

@@ -0,0 +1,14 @@
+'use strict';
+
+angular.module('adagios.table.entry.column_host', [])
+
+    .controller('SideBarCtrl', ['$scope', '$http', function ($scope, $http) {
+        return;
+    }])
+
+    .directive('sidebar', function () {
+        return {
+            restrict: 'E',
+            templateUrl: "sidebar/sidebar.html"
+        };
+    });

app/table/entry/column_host/host_column_test.js

@@ -0,0 +1,41 @@
+'use strict';
+
+describe('Sidebar module', function () {
+    var $compile,
+        $rootScope,
+        $controller,
+        $httpBackend;
+
+    beforeEach(module('adagios.sidebar'));
+
+    beforeEach(inject(function (_$compile_, _$rootScope_, _$controller_, _$httpBackend_) {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $controller = _$controller_;
+        $httpBackend = _$httpBackend_;
+
+        $httpBackend.expectGET('sidebar/sidebar.html').respond('<li></li>');
+    }));
+
+    describe('SideBarCtrl', function () {
+
+        it('should be defined', function () {
+            var scope = $rootScope.$new(),
+                ctrl = $controller('SideBarCtrl', { $scope : scope });
+
+            expect(ctrl).toBeDefined();
+        });
+
+    });
+
+    describe('Sidebar directive', function () {
+
+        it('should send a GET request', function () {
+            var element = $compile('<sidebar></sidebar>')($rootScope);
+            $httpBackend.flush();
+
+            expect(element.html()).toBe('<li></li>');
+        });
+
+    });
+});

app/table/entry/column_last_check/last_check_column.css

@@ -0,0 +1,146 @@
+.nav-side-menu {
+  overflow: auto;
+  font-family: verdana;
+  font-size: 12px;
+  font-weight: 200;
+  background-color: #2e353d;
+  position: fixed;
+  top: 0px;
+  width: 300px;
+  height: 100%;
+  color: #e1ffff;
+}
+.nav-side-menu .brand {
+  background-color: #23282e;
+  line-height: 50px;
+  display: block;
+  text-align: center;
+  font-size: 14px;
+}
+.nav-side-menu .toggle-btn {
+  display: none;
+}
+.nav-side-menu ul,
+.nav-side-menu li {
+  list-style: none;
+  padding: 0px;
+  margin: 0px;
+  line-height: 35px;
+  cursor: pointer;
+  /*    
+    .collapsed{
+       .arrow:before{
+                 font-family: FontAwesome;
+                 content: "\f053";
+                 display: inline-block;
+                 padding-left:10px;
+                 padding-right: 10px;
+                 vertical-align: middle;
+                 float:right;
+            }
+     }
+*/
+}
+.nav-side-menu ul :not(collapsed) .arrow:before,
+.nav-side-menu li :not(collapsed) .arrow:before {
+  font-family: FontAwesome;
+  content: "\f078";
+  display: inline-block;
+  padding-left: 10px;
+  padding-right: 10px;
+  vertical-align: middle;
+  float: right;
+}
+.nav-side-menu ul .active,
+.nav-side-menu li .active {
+  border-left: 3px solid #d19b3d;
+  background-color: #4f5b69;
+}
+.nav-side-menu ul .sub-menu li.active,
+.nav-side-menu li .sub-menu li.active {
+  color: #d19b3d;
+}
+.nav-side-menu ul .sub-menu li.active a,
+.nav-side-menu li .sub-menu li.active a {
+  color: #d19b3d;
+}
+.nav-side-menu ul .sub-menu li,
+.nav-side-menu li .sub-menu li {
+  background-color: #181c20;
+  border: none;
+  line-height: 28px;
+  border-bottom: 1px solid #23282e;
+  margin-left: 0px;
+}
+.nav-side-menu ul .sub-menu li:hover,
+.nav-side-menu li .sub-menu li:hover {
+  background-color: #020203;
+}
+.nav-side-menu ul .sub-menu li:before,
+.nav-side-menu li .sub-menu li:before {
+  font-family: FontAwesome;
+  content: "\f105";
+  display: inline-block;
+  padding-left: 10px;
+  padding-right: 10px;
+  vertical-align: middle;
+}
+.nav-side-menu li {
+  padding-left: 0px;
+  border-left: 3px solid #2e353d;
+  border-bottom: 1px solid #23282e;
+}
+.nav-side-menu li a {
+  text-decoration: none;
+  color: #e1ffff;
+}
+.nav-side-menu li a i {
+  padding-left: 10px;
+  width: 20px;
+  padding-right: 20px;
+}
+.nav-side-menu li:hover {
+  border-left: 3px solid #d19b3d;
+  background-color: #4f5b69;
+  -webkit-transition: all 1s ease;
+  -moz-transition: all 1s ease;
+  -o-transition: all 1s ease;
+  -ms-transition: all 1s ease;
+  transition: all 1s ease;
+}
+@media (max-width: 767px) {
+  .nav-side-menu {
+    position: relative;
+    width: 100%;
+    margin-bottom: 10px;
+  }
+  .nav-side-menu .toggle-btn {
+    display: block;
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 10 !important;
+    padding: 3px;
+    background-color: #ffffff;
+    color: #000;
+    width: 40px;
+    text-align: center;
+  }
+  .brand {
+    text-align: left !important;
+    font-size: 22px;
+    padding-left: 20px;
+    line-height: 50px !important;
+  }
+}
+@media (min-width: 767px) {
+  .nav-side-menu .menu-list .menu-content {
+    display: block;
+  }
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+

app/table/entry/column_last_check/last_check_column.html

@@ -0,0 +1,59 @@
+<div nv-app="adagios.sidebar" class="nav-side-menu" ng-controller="SideBarCtrl">
+    <div class="brand">ADAGIOS</div>
+    <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
+  
+        <div class="menu-list">
+  
+            <ul id="menu-content" class="menu-content out">
+                
+                <li data-toggle="collapse" data-target="#shortcut" class="collapsed menu-title">
+                  <a href="#"> Shortcut <span class="arrow"></span></a>
+                </li>
+                <ul class="sub-menu collapse" id="shortcut">
+                    <li><a href="#/tactical">Dashboard</a></li>
+                    <li><a href="#/hosts">Hosts</a></li>
+                    <li><a href="#">Services</a></li>
+                    <li><a href="#">Networks parents</a></li>
+                </ul>
+
+
+                <li data-toggle="collapse" data-target="#reports" class="collapsed menu-title">
+                  <a href="#"> Reports <span class="arrow"></span></a>
+                </li>
+                <ul class="sub-menu collapse" id="reports">
+                    <li><a href="#">State History</a></li>
+                    <li><a href="#">Log</a></li>
+                    <li><a href="#">Comments</a></li>
+                    <li><a href="#">Downtimes</a></li>
+                </ul>
+
+
+                <li data-toggle="collapse" data-target="#groups" class="collapsed menu-title">
+                  <a href="#"> Groups <span class="arrow"></span></a>
+                </li>
+                <ul class="sub-menu collapse" id="groups">
+                    <li><a href="#">Hostgroups</a></li>
+                    <li><a href="#">Servicegroups</a></li>
+                    <li><a href="#">Contactgroups</a></li>
+                </ul>
+
+
+                <li data-toggle="collapse" data-target="#other" class="collapsed menu-title">
+                  <a href="#"> Other <span class="arrow"></span></a>
+                </li>
+                <ul class="sub-menu collapse" id="other">
+                    <li><a href="#">Grafana</a></li>
+                    <li><a href="#">Nagvis</a></li>
+                </ul>
+
+
+
+                <li>
+                  <a href="#">
+                  <i class="fa fa-user fa-lg"></i> Profile
+                  </a>
+                </li>
+
+            </ul>
+     </div>
+</div>

app/table/entry/column_last_check/last_check_column.js

@@ -0,0 +1,14 @@
+'use strict';
+
+angular.module('adagios.table.entry.column_last_check', [])
+
+    .controller('SideBarCtrl', ['$scope', '$http', function ($scope, $http) {
+        return;
+    }])
+
+    .directive('sidebar', function () {
+        return {
+            restrict: 'E',
+            templateUrl: "sidebar/sidebar.html"
+        };
+    });

app/table/entry/column_last_check/last_check_column_test.js

@@ -0,0 +1,41 @@
+'use strict';
+
+describe('Sidebar module', function () {
+    var $compile,
+        $rootScope,
+        $controller,
+        $httpBackend;
+
+    beforeEach(module('adagios.sidebar'));
+
+    beforeEach(inject(function (_$compile_, _$rootScope_, _$controller_, _$httpBackend_) {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $controller = _$controller_;
+        $httpBackend = _$httpBackend_;
+
+        $httpBackend.expectGET('sidebar/sidebar.html').respond('<li></li>');
+    }));
+
+    describe('SideBarCtrl', function () {
+
+        it('should be defined', function () {
+            var scope = $rootScope.$new(),
+                ctrl = $controller('SideBarCtrl', { $scope : scope });
+
+            expect(ctrl).toBeDefined();
+        });
+
+    });
+
+    describe('Sidebar directive', function () {
+
+        it('should send a GET request', function () {
+            var element = $compile('<sidebar></sidebar>')($rootScope);
+            $httpBackend.flush();
+
+            expect(element.html()).toBe('<li></li>');
+        });
+
+    });
+});

app/table/entry/column_service_check/service_check_column.css

@@ -0,0 +1,146 @@
+.nav-side-menu {
+  overflow: auto;
+  font-family: verdana;
+  font-size: 12px;
+  font-weight: 200;
+  background-color: #2e353d;
+  position: fixed;
+  top: 0px;
+  width: 300px;
+  height: 100%;
+  color: #e1ffff;
+}
+.nav-side-menu .brand {
+  background-color: #23282e;
+  line-height: 50px;
+  display: block;
+  text-align: center;
+  font-size: 14px;
+}
+.nav-side-menu .toggle-btn {
+  display: none;
+}
+.nav-side-menu ul,
+.nav-side-menu li {
+  list-style: none;
+  padding: 0px;
+  margin: 0px;
+  line-height: 35px;
+  cursor: pointer;
+  /*    
+    .collapsed{
+       .arrow:before{
+                 font-family: FontAwesome;
+                 content: "\f053";
+                 display: inline-block;
+                 padding-left:10px;
+                 padding-right: 10px;
+                 vertical-align: middle;
+                 float:right;
+            }
+     }
+*/
+}
+.nav-side-menu ul :not(collapsed) .arrow:before,
+.nav-side-menu li :not(collapsed) .arrow:before {
+  font-family: FontAwesome;
+  content: "\f078";
+  display: inline-block;
+  padding-left: 10px;
+  padding-right: 10px;
+  vertical-align: middle;
+  float: right;
+}
+.nav-side-menu ul .active,
+.nav-side-menu li .active {
+  border-left: 3px solid #d19b3d;
+  background-color: #4f5b69;
+}
+.nav-side-menu ul .sub-menu li.active,
+.nav-side-menu li .sub-menu li.active {
+  color: #d19b3d;
+}
+.nav-side-menu ul .sub-menu li.active a,
+.nav-side-menu li .sub-menu li.active a {
+  color: #d19b3d;
+}
+.nav-side-menu ul .sub-menu li,
+.nav-side-menu li .sub-menu li {
+  background-color: #181c20;
+  border: none;
+  line-height: 28px;
+  border-bottom: 1px solid #23282e;
+  margin-left: 0px;
+}
+.nav-side-menu ul .sub-menu li:hover,
+.nav-side-menu li .sub-menu li:hover {
+  background-color: #020203;
+}
+.nav-side-menu ul .sub-menu li:before,
+.nav-side-menu li .sub-menu li:before {
+  font-family: FontAwesome;
+  content: "\f105";
+  display: inline-block;
+  padding-left: 10px;
+  padding-right: 10px;
+  vertical-align: middle;
+}
+.nav-side-menu li {
+  padding-left: 0px;
+  border-left: 3px solid #2e353d;
+  border-bottom: 1px solid #23282e;
+}
+.nav-side-menu li a {
+  text-decoration: none;
+  color: #e1ffff;
+}
+.nav-side-menu li a i {
+  padding-left: 10px;
+  width: 20px;
+  padding-right: 20px;
+}
+.nav-side-menu li:hover {
+  border-left: 3px solid #d19b3d;
+  background-color: #4f5b69;
+  -webkit-transition: all 1s ease;
+  -moz-transition: all 1s ease;
+  -o-transition: all 1s ease;
+  -ms-transition: all 1s ease;
+  transition: all 1s ease;
+}
+@media (max-width: 767px) {
+  .nav-side-menu {
+    position: relative;
+    width: 100%;
+    margin-bottom: 10px;
+  }
+  .nav-side-menu .toggle-btn {
+    display: block;
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 10 !important;
+    padding: 3px;
+    background-color: #ffffff;
+    color: #000;
+    width: 40px;
+    text-align: center;
+  }
+  .brand {
+    text-align: left !important;
+    font-size: 22px;
+    padding-left: 20px;
+    line-height: 50px !important;
+  }
+}
+@media (min-width: 767px) {
+  .nav-side-menu .menu-list .menu-content {
+    display: block;
+  }
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+

app/table/entry/column_service_check/service_check_column.html

@@ -0,0 +1,59 @@
+<div nv-app="adagios.sidebar" class="nav-side-menu" ng-controller="SideBarCtrl">
+    <div class="brand">ADAGIOS</div>
+    <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
+  
+        <div class="menu-list">
+  
+            <ul id="menu-content" class="menu-content out">
+                
+                <li data-toggle="collapse" data-target="#shortcut" class="collapsed menu-title">
+                  <a href="#"> Shortcut <span class="arrow"></span></a>
+                </li>
+                <ul class="sub-menu collapse" id="shortcut">
+                    <li><a href="#/tactical">Dashboard</a></li>
+                    <li><a href="#/hosts">Hosts</a></li>
+                    <li><a href="#">Services</a></li>
+                    <li><a href="#">Networks parents</a></li>
+                </ul>
+
+
+                <li data-toggle="collapse" data-target="#reports" class="collapsed menu-title">
+                  <a href="#"> Reports <span class="arrow"></span></a>
+                </li>
+                <ul class="sub-menu collapse" id="reports">
+                    <li><a href="#">State History</a></li>
+                    <li><a href="#">Log</a></li>
+                    <li><a href="#">Comments</a></li>
+                    <li><a href="#">Downtimes</a></li>
+                </ul>
+
+
+                <li data-toggle="collapse" data-target="#groups" class="collapsed menu-title">
+                  <a href="#"> Groups <span class="arrow"></span></a>
+                </li>
+                <ul class="sub-menu collapse" id="groups">
+                    <li><a href="#">Hostgroups</a></li>
+                    <li><a href="#">Servicegroups</a></li>
+                    <li><a href="#">Contactgroups</a></li>
+                </ul>
+
+
+                <li data-toggle="collapse" data-target="#other" class="collapsed menu-title">
+                  <a href="#"> Other <span class="arrow"></span></a>
+                </li>
+                <ul class="sub-menu collapse" id="other">
+                    <li><a href="#">Grafana</a></li>
+                    <li><a href="#">Nagvis</a></li>
+                </ul>
+
+
+
+                <li>
+                  <a href="#">
+                  <i class="fa fa-user fa-lg"></i> Profile
+                  </a>
+                </li>
+
+            </ul>
+     </div>
+</div>

app/table/entry/column_service_check/service_check_column.js

@@ -0,0 +1,14 @@
+'use strict';
+
+angular.module('adagios.table.entry.column_service_check', [])
+
+    .controller('SideBarCtrl', ['$scope', '$http', function ($scope, $http) {
+        return;
+    }])
+
+    .directive('column', function (col_type) {
+        return {
+            restrict: 'E',
+            templateUrl: "column/" + col_type + ".html"
+        };
+    });

app/table/entry/column_service_check/service_check_column_test.js

@@ -0,0 +1,41 @@
+'use strict';
+
+describe('Sidebar module', function () {
+    var $compile,
+        $rootScope,
+        $controller,
+        $httpBackend;
+
+    beforeEach(module('adagios.sidebar'));
+
+    beforeEach(inject(function (_$compile_, _$rootScope_, _$controller_, _$httpBackend_) {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $controller = _$controller_;
+        $httpBackend = _$httpBackend_;
+
+        $httpBackend.expectGET('sidebar/sidebar.html').respond('<li></li>');
+    }));
+
+    describe('SideBarCtrl', function () {
+
+        it('should be defined', function () {
+            var scope = $rootScope.$new(),
+                ctrl = $controller('SideBarCtrl', { $scope : scope });
+
+            expect(ctrl).toBeDefined();
+        });
+
+    });
+
+    describe('Sidebar directive', function () {
+
+        it('should send a GET request', function () {
+            var element = $compile('<sidebar></sidebar>')($rootScope);
+            $httpBackend.flush();
+
+            expect(element.html()).toBe('<li></li>');
+        });
+
+    });
+});

app/table/entry/entry.css

@@ -0,0 +1,146 @@
+.nav-side-menu {
+  overflow: auto;
+  font-family: verdana;
+  font-size: 12px;
+  font-weight: 200;
+  background-color: #2e353d;
+  position: fixed;
+  top: 0px;
+  width: 300px;
+  height: 100%;
+  color: #e1ffff;
+}
+.nav-side-menu .brand {
+  background-color: #23282e;
+  line-height: 50px;
+  display: block;
+  text-align: center;
+  font-size: 14px;
+}
+.nav-side-menu .toggle-btn {
+  display: none;
+}
+.nav-side-menu ul,
+.nav-side-menu li {
+  list-style: none;
+  padding: 0px;
+  margin: 0px;
+  line-height: 35px;
+  cursor: pointer;
+  /*    
+    .collapsed{
+       .arrow:before{
+                 font-family: FontAwesome;
+                 content: "\f053";
+                 display: inline-block;
+                 padding-left:10px;
+                 padding-right: 10px;
+                 vertical-align: middle;
+                 float:right;
+            }
+     }
+*/
+}
+.nav-side-menu ul :not(collapsed) .arrow:before,
+.nav-side-menu li :not(collapsed) .arrow:before {
+  font-family: FontAwesome;
+  content: "\f078";
+  display: inline-block;
+  padding-left: 10px;
+  padding-right: 10px;
+  vertical-align: middle;
+  float: right;
+}
+.nav-side-menu ul .active,
+.nav-side-menu li .active {
+  border-left: 3px solid #d19b3d;
+  background-color: #4f5b69;
+}
+.nav-side-menu ul .sub-menu li.active,
+.nav-side-menu li .sub-menu li.active {
+  color: #d19b3d;
+}
+.nav-side-menu ul .sub-menu li.active a,
+.nav-side-menu li .sub-menu li.active a {
+  color: #d19b3d;
+}
+.nav-side-menu ul .sub-menu li,
+.nav-side-menu li .sub-menu li {
+  background-color: #181c20;
+  border: none;
+  line-height: 28px;
+  border-bottom: 1px solid #23282e;
+  margin-left: 0px;
+}
+.nav-side-menu ul .sub-menu li:hover,
+.nav-side-menu li .sub-menu li:hover {
+  background-color: #020203;
+}
+.nav-side-menu ul .sub-menu li:before,
+.nav-side-menu li .sub-menu li:before {
+  font-family: FontAwesome;
+  content: "\f105";
+  display: inline-block;
+  padding-left: 10px;
+  padding-right: 10px;
+  vertical-align: middle;
+}
+.nav-side-menu li {
+  padding-left: 0px;
+  border-left: 3px solid #2e353d;
+  border-bottom: 1px solid #23282e;
+}
+.nav-side-menu li a {
+  text-decoration: none;
+  color: #e1ffff;
+}
+.nav-side-menu li a i {
+  padding-left: 10px;
+  width: 20px;
+  padding-right: 20px;
+}
+.nav-side-menu li:hover {
+  border-left: 3px solid #d19b3d;
+  background-color: #4f5b69;
+  -webkit-transition: all 1s ease;
+  -moz-transition: all 1s ease;
+  -o-transition: all 1s ease;
+  -ms-transition: all 1s ease;
+  transition: all 1s ease;
+}
+@media (max-width: 767px) {
+  .nav-side-menu {
+    position: relative;
+    width: 100%;
+    margin-bottom: 10px;
+  }
+  .nav-side-menu .toggle-btn {
+    display: block;
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 10 !important;
+    padding: 3px;
+    background-color: #ffffff;
+    color: #000;
+    width: 40px;
+    text-align: center;
+  }
+  .brand {
+    text-align: left !important;
+    font-size: 22px;
+    padding-left: 20px;
+    line-height: 50px !important;
+  }
+}
+@media (min-width: 767px) {
+  .nav-side-menu .menu-list .menu-content {
+    display: block;
+  }
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+

app/table/entry/entry.html

@@ -0,0 +1,4 @@
+    <td> {{entry.host_name}} </td>
+    <td> {{entry.description}} </td>
+    <td> {{entry.last_check}} </td>
+    <td> {{entry.last_hard_state_change}} </td>

app/table/entry/entry.js

@@ -0,0 +1,18 @@
+'use strict';
+
+angular.module('adagios.table.entry', ['adagios.table.entry.column_duration',
+                                       'adagios.table.entry.column_host',
+                                       'adagios.table.entry.column_last_check',
+                                       'adagios.table.entry.column_service_check'
+                                      ])
+
+    .controller('EntryCtrl', ['$scope', '$http', function ($scope, $http) {
+        return;
+    }])
+
+    .directive('entry', function () {
+        return {
+            restrict: 'E',
+            templateUrl: "table/entry/entry.html"
+        };
+    });

app/table/entry/entry_test.js

@@ -0,0 +1,41 @@
+'use strict';
+
+describe('Sidebar module', function () {
+    var $compile,
+        $rootScope,
+        $controller,
+        $httpBackend;
+
+    beforeEach(module('adagios.sidebar'));
+
+    beforeEach(inject(function (_$compile_, _$rootScope_, _$controller_, _$httpBackend_) {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $controller = _$controller_;
+        $httpBackend = _$httpBackend_;
+
+        $httpBackend.expectGET('sidebar/sidebar.html').respond('<li></li>');
+    }));
+
+    describe('SideBarCtrl', function () {
+
+        it('should be defined', function () {
+            var scope = $rootScope.$new(),
+                ctrl = $controller('SideBarCtrl', { $scope : scope });
+
+            expect(ctrl).toBeDefined();
+        });
+
+    });
+
+    describe('Sidebar directive', function () {
+
+        it('should send a GET request', function () {
+            var element = $compile('<sidebar></sidebar>')($rootScope);
+            $httpBackend.flush();
+
+            expect(element.html()).toBe('<li></li>');
+        });
+
+    });
+});

app/table/table.css

@@ -0,0 +1,146 @@
+.nav-side-menu {
+  overflow: auto;
+  font-family: verdana;
+  font-size: 12px;
+  font-weight: 200;
+  background-color: #2e353d;
+  position: fixed;
+  top: 0px;
+  width: 300px;
+  height: 100%;
+  color: #e1ffff;
+}
+.nav-side-menu .brand {
+  background-color: #23282e;
+  line-height: 50px;
+  display: block;
+  text-align: center;
+  font-size: 14px;
+}
+.nav-side-menu .toggle-btn {
+  display: none;
+}
+.nav-side-menu ul,
+.nav-side-menu li {
+  list-style: none;
+  padding: 0px;
+  margin: 0px;
+  line-height: 35px;
+  cursor: pointer;
+  /*    
+    .collapsed{
+       .arrow:before{
+                 font-family: FontAwesome;
+                 content: "\f053";
+                 display: inline-block;
+                 padding-left:10px;
+                 padding-right: 10px;
+                 vertical-align: middle;
+                 float:right;
+            }
+     }
+*/
+}
+.nav-side-menu ul :not(collapsed) .arrow:before,
+.nav-side-menu li :not(collapsed) .arrow:before {
+  font-family: FontAwesome;
+  content: "\f078";
+  display: inline-block;
+  padding-left: 10px;
+  padding-right: 10px;
+  vertical-align: middle;
+  float: right;
+}
+.nav-side-menu ul .active,
+.nav-side-menu li .active {
+  border-left: 3px solid #d19b3d;
+  background-color: #4f5b69;
+}
+.nav-side-menu ul .sub-menu li.active,
+.nav-side-menu li .sub-menu li.active {
+  color: #d19b3d;
+}
+.nav-side-menu ul .sub-menu li.active a,
+.nav-side-menu li .sub-menu li.active a {
+  color: #d19b3d;
+}
+.nav-side-menu ul .sub-menu li,
+.nav-side-menu li .sub-menu li {
+  background-color: #181c20;
+  border: none;
+  line-height: 28px;
+  border-bottom: 1px solid #23282e;
+  margin-left: 0px;
+}
+.nav-side-menu ul .sub-menu li:hover,
+.nav-side-menu li .sub-menu li:hover {
+  background-color: #020203;
+}
+.nav-side-menu ul .sub-menu li:before,
+.nav-side-menu li .sub-menu li:before {
+  font-family: FontAwesome;
+  content: "\f105";
+  display: inline-block;
+  padding-left: 10px;
+  padding-right: 10px;
+  vertical-align: middle;
+}
+.nav-side-menu li {
+  padding-left: 0px;
+  border-left: 3px solid #2e353d;
+  border-bottom: 1px solid #23282e;
+}
+.nav-side-menu li a {
+  text-decoration: none;
+  color: #e1ffff;
+}
+.nav-side-menu li a i {
+  padding-left: 10px;
+  width: 20px;
+  padding-right: 20px;
+}
+.nav-side-menu li:hover {
+  border-left: 3px solid #d19b3d;
+  background-color: #4f5b69;
+  -webkit-transition: all 1s ease;
+  -moz-transition: all 1s ease;
+  -o-transition: all 1s ease;
+  -ms-transition: all 1s ease;
+  transition: all 1s ease;
+}
+@media (max-width: 767px) {
+  .nav-side-menu {
+    position: relative;
+    width: 100%;
+    margin-bottom: 10px;
+  }
+  .nav-side-menu .toggle-btn {
+    display: block;
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 10 !important;
+    padding: 3px;
+    background-color: #ffffff;
+    color: #000;
+    width: 40px;
+    text-align: center;
+  }
+  .brand {
+    text-align: left !important;
+    font-size: 22px;
+    padding-left: 20px;
+    line-height: 50px !important;
+  }
+}
+@media (min-width: 767px) {
+  .nav-side-menu .menu-list .menu-content {
+    display: block;
+  }
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+

app/table/table.html

@@ -0,0 +1,16 @@
+<div ng-app="adagios.table" ng-controller="TableCtrl" id="table">
+<table class="table">
+  <thead>
+    <tr>
+      <th ng-repeat="(key, value) in entries[0]">
+        {{key}}
+      </th>
+    </tr>
+  </thead>
+  <tr ng-repeat="entry in entries">
+    <td ng-repeat="(key, value) in entry">
+      {{value}}
+    </td>
+  </tr>
+</table>
+</div>

app/table/table.js

@@ -0,0 +1,17 @@
+'use strict';
+
+angular.module('adagios.table', ['ngRoute', 'adagios.table.entry', 'adagios.live'])
+
+    .controller('TableCtrl', ['$scope', '$http', 'GetServices', function ($scope, $http, GetServices) {
+        console.log(new GetServices(['host_name', 'last_check'])
+            .success(function (data) {
+                $scope.entries = data;
+            }));
+    }])
+
+    .directive('servicesTable', function () {
+        return {
+            restrict: 'E',
+            templateUrl: "table/table.html"
+        };
+    });

app/table/table_test.js

@@ -0,0 +1,41 @@
+'use strict';
+
+describe('Sidebar module', function () {
+    var $compile,
+        $rootScope,
+        $controller,
+        $httpBackend;
+
+    beforeEach(module('adagios.sidebar'));
+
+    beforeEach(inject(function (_$compile_, _$rootScope_, _$controller_, _$httpBackend_) {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $controller = _$controller_;
+        $httpBackend = _$httpBackend_;
+
+        $httpBackend.expectGET('sidebar/sidebar.html').respond('<li></li>');
+    }));
+
+    describe('SideBarCtrl', function () {
+
+        it('should be defined', function () {
+            var scope = $rootScope.$new(),
+                ctrl = $controller('SideBarCtrl', { $scope : scope });
+
+            expect(ctrl).toBeDefined();
+        });
+
+    });
+
+    describe('Sidebar directive', function () {
+
+        it('should send a GET request', function () {
+            var element = $compile('<sidebar></sidebar>')($rootScope);
+            $httpBackend.flush();
+
+            expect(element.html()).toBe('<li></li>');
+        });
+
+    });
+});

app/tactical/current_health/current_health.js

@@ -1,18 +1,15 @@
+'use strict';
 
-angular.module('adagios.tactical.current_health', ['ngRoute',
-                                                   'ngJustGage'
-                                    ])
-.controller('TacticalCurrentHealth', ['$scope', '$http',
-        function($scope, $http) {
-            $scope.hosts =  75.2;
-            $scope.services = 94.4;
+angular.module('adagios.tactical.current_health', ['ngRoute', 'ngJustGage' ])
+
+    .controller('TacticalCurrentHealth', ['$scope', '$http', function ($scope, $http) {
+        $scope.hosts =  75.2;
+        $scope.services = 94.4;
     }])
 
-.directive('currenthealth', function() {
-  return {
-    restrict: 'E',
-    templateUrl: "tactical/current_health/current_health.html"
-  };
-});
-
-
+    .directive('currenthealth', function () {
+        return {
+            restrict: 'E',
+            templateUrl: "tactical/current_health/current_health.html"
+        };
+    });

app/tactical/current_health/current_health_test.js

@@ -0,0 +1,43 @@
+'use strict';
+
+describe('Current Health tactical submodule', function () {
+    var $compile,
+        $rootScope,
+        $controller,
+        $httpBackend;
+
+    beforeEach(module('adagios.tactical.current_health'));
+
+    beforeEach(inject(function (_$compile_, _$rootScope_, _$controller_, _$httpBackend_) {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $controller = _$controller_;
+        $httpBackend = _$httpBackend_;
+
+        $httpBackend.expectGET('tactical/current_health/current_health.html')
+            .respond('<th>Current Health</th>');
+    }));
+
+    describe('TacticalCurrentHealth', function () {
+
+        it('should be defined', function () {
+            var scope, ctrl;
+            scope = {};
+            ctrl = $controller('TacticalCurrentHealth', { $scope : scope });
+
+            expect(ctrl).toBeDefined();
+        });
+
+    });
+
+    describe('Current health directive', function () {
+
+        it('should send a GET request', function () {
+            var element = $compile("<currenthealth></currenthealth>")($rootScope);
+            $httpBackend.flush();
+
+            expect(element.text()).toBe('Current Health');
+        });
+
+    });
+});

app/tactical/status_overview/status_overview.js

@@ -1,19 +1,22 @@
+'use strict';
 
-angular.module('adagios.tactical.status_overview', ['ngRoute'
-                                    ])
-.controller('TacticalStatusOverViewCtrl', ['$scope', '$http',
-        function($scope, $http) {
-            $scope.hosts = {"count": 104,
-                            "problems": 14};
-            $scope.services = {"count": 1126,
-                               "problems": 42};
+angular.module('adagios.tactical.status_overview', ['ngRoute' ])
+
+    .controller('TacticalStatusOverViewCtrl', ['$scope', '$http', function ($scope, $http) {
+        $scope.hosts = {
+            "count": 104,
+            "problems": 14
+        };
+
+        $scope.services = {
+            "count": 1126,
+            "problems": 42
+        };
     }])
 
-.directive('statusoverview', function() {
-  return {
-    restrict: 'E',
-    templateUrl: "tactical/status_overview/status_overview.html"
-  };
-});
-
-
+    .directive('statusoverview', function () {
+        return {
+            restrict: 'E',
+            templateUrl: "tactical/status_overview/status_overview.html"
+        };
+    });

app/tactical/status_overview/status_overview_test.js

@@ -0,0 +1,45 @@
+'use strict';
+
+describe('Status Overview tactical submodule', function () {
+    var $compile,
+        $rootScope,
+        $controller,
+        $httpBackend;
+
+    beforeEach(module('adagios.tactical.status_overview'));
+
+    beforeEach(inject(function (_$compile_, _$rootScope_, _$controller_, _$httpBackend_) {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $controller = _$controller_;
+        $httpBackend = _$httpBackend_;
+
+        $httpBackend.expectGET('tactical/status_overview/status_overview.html')
+            .respond('<td>{{ problems }}</td>');
+    }));
+
+    describe('TacticalStatusOverViewCtrl', function () {
+
+        it('should be defined', function () {
+            var scope, ctrl;
+            scope = {};
+            ctrl = $controller('TacticalStatusOverViewCtrl', { $scope : scope });
+
+            expect(ctrl).toBeDefined();
+        });
+
+    });
+
+    describe('Status overview directive', function () {
+
+        it('should insert the number of warnings', function () {
+            var element = $compile('<statusoverview></statusoverview>')($rootScope);
+            $httpBackend.flush();
+            $rootScope.problems = 31;
+            $rootScope.$digest();
+
+            expect(element.text()).toBe('31');
+        });
+
+    });
+});

app/tactical/tactical.html

@@ -19,4 +19,6 @@
 
     </div>
 
+    <services-table></services-table>
+
 </div>

app/tactical/tactical.js

@@ -1,17 +1,20 @@
+'use strict';
 
 angular.module('adagios.tactical', ['ngRoute',
                                     'adagios.tactical.status_overview',
                                     'adagios.tactical.current_health',
-                                    'adagios.tactical.top_alert_producers'
+                                    'adagios.tactical.top_alert_producers',
+                                    'adagios.table'
+
                                     ])
 
-.config(['$routeProvider', function($routeProvider) {
-    $routeProvider.when('/tactical', {templateUrl: 'tactical/tactical.html', controller: 'TacticalCtrl'});
-}])
-
-
-
-.controller('TacticalCtrl', ['$scope', '$http',
-        function($scope, $http) {
+    .config(['$routeProvider', function ($routeProvider) {
+        $routeProvider.when('/tactical', {
+            templateUrl: 'tactical/tactical.html',
+            controller: 'TacticalCtrl'
+        });
     }])
 
+    .controller('TacticalCtrl', ['$scope', '$http', function ($scope, $http) {
+        return;
+    }]);

app/tactical/tactical_test.js

@@ -0,0 +1,18 @@
+'use strict';
+
+describe('Tactical module', function () {
+
+    beforeEach(module('adagios.tactical'));
+
+    describe('TacticalCtrl', function () {
+
+        it('should be defined', inject(function ($controller) {
+            var scope, ctrl;
+            scope = {};
+            ctrl = $controller('TacticalCtrl', { $scope : scope });
+
+            expect(ctrl).toBeDefined();
+        }));
+
+    });
+});

app/tactical/top_alert_producers/top_alert_producers.js

@@ -1,18 +1,26 @@
+'use strict';
 
-angular.module('adagios.tactical.top_alert_producers', ['ngRoute'
-                                    ])
-.controller('TacticalTopAlertProducers', ['$scope', '$http',
-        function($scope, $http) {
-            $scope.hosts = [{"host_name": "server-18", "problems": 10},
-                            {"host_name": "server-22", "problems": 5},
-                            {"host_name": "server-13", "problems": 3}]
+angular.module('adagios.tactical.top_alert_producers', ['ngRoute' ])
+    .controller('TacticalTopAlertProducers', ['$scope', '$http', function ($scope, $http) {
+        $scope.hosts = [
+            {
+                "host_name": "server-18",
+                "problems": 10
+            },
+            {
+                "host_name": "server-22",
+                "problems": 5
+            },
+            {
+                "host_name": "server-13",
+                "problems": 3
+            }
+        ];
     }])
 
-.directive('topalertproducers', function() {
-  return {
-    restrict: 'E',
-    templateUrl: "tactical/top_alert_producers/top_alert_producers.html"
-  };
-});
-
-
+    .directive('topalertproducers', function () {
+        return {
+            restrict: 'E',
+            templateUrl: "tactical/top_alert_producers/top_alert_producers.html"
+        };
+    });

app/tactical/top_alert_producers/top_alert_producers_test.js

@@ -0,0 +1,45 @@
+'use strict';
+
+describe('Top Alert Producer tactical submodule', function () {
+    var $compile,
+        $rootScope,
+        $controller,
+        $httpBackend;
+
+    beforeEach(module('adagios.tactical.top_alert_producers'));
+
+    beforeEach(inject(function (_$compile_, _$rootScope_, _$controller_, _$httpBackend_) {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $controller = _$controller_;
+        $httpBackend = _$httpBackend_;
+
+        $httpBackend.expectGET('tactical/top_alert_producers/top_alert_producers.html')
+            .respond('<td>{{ problems }}</td>');
+    }));
+
+    describe('TacticalTopAlertProducers', function () {
+
+        it('should be defined', function () {
+            var scope, ctrl;
+            scope = {};
+            ctrl = $controller('TacticalTopAlertProducers', { $scope : scope });
+
+            expect(ctrl).toBeDefined();
+        });
+
+    });
+
+    describe('Status overview directive', function () {
+
+        it('should insert the number of warnings', function () {
+            var element = $compile('<topalertproducers></topalertproducers>')($rootScope);
+            $httpBackend.flush();
+            $rootScope.problems = 31;
+            $rootScope.$digest();
+
+            expect(element.text()).toBe('31');
+        });
+
+    });
+});

app/topbar/topbar.css

@@ -0,0 +1,63 @@
+nav#topbar {
+    top: 0%;
+    margin-left: 300px;
+    background-color: #353d48;
+    border-radius: 0px;
+    border: none;
+    height: 82px;
+    min-height: 82px;
+    margin-bottom: 0px;
+}
+
+
+nav#topbar div.container-fluid{
+    padding-left: 0px;
+}
+
+nav#topbar .navbar-brand{ padding: 0px 30px;font-size: 1.5em;line-height: 80px; }
+nav#topbar .navbar-nav > li > a {  padding: 0px 30px; line-height: 80px; font-size: 1.5em; }
+nav#topbar .navbar-nav > li > form div {
+    line-height: 55px;
+    font-size: 1.5em;
+}
+nav#topbar .navbar-nav > li > form input {
+    height: 60px;
+}
+
+
+nav#topbar div.navbar-collapse {
+    padding-left: 0px;
+}
+
+form#search input {
+    border: none;
+    background-color: #353d48;
+    font-size: 1.5em;
+    color: #aeb5bf;
+    width: 400px;
+}
+
+
+a#toggle-sidebar .fa-chevron-left {
+    font-size: 0.5em;
+    vertical-align: super;
+}
+
+
+a#search i,
+a#settings i,
+a#notifications i,
+a#toggle-sidebar i {
+    font-size: 1.5em;
+}
+
+
+nav#topbar li {
+    border-color: #252b37;
+    border-style: solid;
+    border-width: 1px;
+}
+
+nav#topbar li a#search {
+    float: left;
+}

app/topbar/topbar.html

@@ -1,4 +1,4 @@
-<nav ng-app="adagios.navbar" id="navbar" class="navbar layout__flexrow" role="navigation" ng-controller="NavBarCtrl">
+<nav ng-app="adagios.topbar" id="nclass="navbar layout__flexrow" role="navigation" ng-controller="NavBarCtrl">
   <ul class="navbar__list navbar__list--left">
     <li class="navbar__item navbar__toggle-sidebar">
       <button class="navbar__button"

app/topbar/topbar.js

@@ -0,0 +1,14 @@
+'use strict';
+
+angular.module('adagios.topbar', ['adagios.live'])
+
+    .controller('TopBarCtrl', ['$scope', '$http', 'GetProblems', function ($scope, $http, GetProblems) {
+        $scope.notifications = GetProblems;
+    }])
+
+    .directive('topbar', function () {
+        return {
+            restrict: 'E',
+            templateUrl: "topbar/topbar.html"
+        };
+    });

app/topbar/topbar_test.js

@@ -0,0 +1,43 @@
+'use strict';
+
+describe('Topbar module', function () {
+    var $compile,
+        $rootScope,
+        $controller,
+        $httpBackend;
+
+    beforeEach(module('adagios.topbar'));
+
+    beforeEach(inject(function (_$compile_, _$rootScope_, _$controller_, _$httpBackend_) {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $controller = _$controller_;
+        $httpBackend = _$httpBackend_;
+
+        $httpBackend.expectGET('topbar/topbar.html').respond('<a>{{ notifications }}</a>');
+    }));
+
+    describe('TopBarCtrl', function () {
+
+        it('should be defined', function () {
+            var scope = $rootScope.$new(),
+                topbar = $controller('TopBarCtrl', { $scope : scope });
+
+            expect(topbar).toBeDefined();
+        });
+
+    });
+
+    describe('Topbar directive', function () {
+
+        it('should insert the number of warnings', function () {
+            var element = $compile('<topbar></topbar>')($rootScope);
+            $httpBackend.flush();
+            $rootScope.notifications = 44;
+            $rootScope.$digest();
+
+            expect(element.text()).toBe('44');
+        });
+
+    });
+});

karma.conf.js

@@ -1,33 +1,39 @@
-module.exports = function(config){
-  config.set({
+'use strict';
 
-    basePath : './',
+module.exports = function (config) {
+    config.set({
 
-    files : [
-      'app/bower_components/angular/angular.js',
-      'app/bower_components/angular-route/angular-route.js',
-      'app/bower_components/angular-mocks/angular-mocks.js',
-      'app/components/**/*.js',
-      'app/view*/**/*.js'
-    ],
+        basePath : './',
 
-    autoWatch : true,
+        files : [
+            'app/bower_components/angular/angular.js',
+            'app/bower_components/angular-route/angular-route.js',
+            'app/bower_components/angular-mocks/angular-mocks.js',
+            'app/components/live/live.js',
+            'app/components/**/*.js',
+            'app/topbar/**/*.js',
+            'app/sidebar/**/*.js',
+            'app/tactical/**/*.js',
+            'app/table/**/*.js'
+        ],
 
-    frameworks: ['jasmine'],
+        autoWatch : true,
 
-    browsers : ['Chrome'],
+        frameworks: ['jasmine'],
 
-    plugins : [
+        browsers : ['Chrome'],
+
+        plugins : [
             'karma-chrome-launcher',
             'karma-firefox-launcher',
             'karma-jasmine',
             'karma-junit-reporter'
-            ],
+        ],
 
-    junitReporter : {
-      outputFile: 'test_out/unit.xml',
-      suite: 'unit'
-    }
+        junitReporter : {
+            outputFile: 'test_out/unit.xml',
+            suite: 'unit'
+        }
 
-  });
+    });
 };

package.json

@@ -8,8 +8,10 @@
   "devDependencies": {
     "bower": "^1.3.1",
     "grunt": "^0.4.5",
+    "grunt-cli": "^0.1.13",
     "grunt-contrib-sass": "^0.8.1",
     "grunt-contrib-watch": "^0.6.1",
+    "grunt-jslint": "^1.1.12",
     "http-server": "^0.6.1",
     "karma": "~0.10",
     "karma-junit-reporter": "^0.2.2",

readme.rst

@@ -9,31 +9,50 @@ Installation
 
 ::
 
-  git clone https://github.com/titilambert/adagios-frontend.git
-  cd adagios-frontend
-  npm install
-
+    sudo apt-get install npm nodejs-legacy
+    git clone https://github.com/titilambert/adagios-frontend.git
+    cd adagios-frontend
+    npm install
 
 
 Dev
 ===
 
-Use grunt to get css files
-
+Auto-refresh css files
 
 ::
 
-   grunt
+    npm install grunt-cli
+    grunt
 
 
+Coding style
+===========
+
+This project conforms to JSLint coding style (http://github.com/douglascrockford/JSLint).
+Run the linter as follows:
+
+::
+
+    grunt jslint
+
+Tests
+=====
+
+AngularJS comes with Karma which is an automatic unit test runner.
+While running, Karma automatically executes the tests when any js file changes.
+To launch Karma :
+
+::
+
+    npm test
+
 Launch
 ======
 
 ::
 
-  npm start
+    npm start
 
 
 Now, go on http://127.0.0.1:8000
-
-