Use ngRoute, add JSHint/Gruntfile, add Morris directive

jpoizat · Jun 17, 2014 · 8c93243 · 8c93243
1 parent 5d81ced
commit 8c93243
Show file tree

Hide file tree

Showing 18 changed files with 260 additions and 174 deletions.
diff --git a/.jshintrc b/.jshintrc
@@ -0,0 +1,24 @@
+{
+  "node": true,
+  "browser": true,
+  "esnext": true,
+  "bitwise": true,
+  "camelcase": true,
+  "curly": true,
+  "eqeqeq": true,
+  "immed": true,
+  "indent": 2,
+  "latedef": true,
+  "newcap": true,
+  "noarg": true,
+  "quotmark": "single",
+  "regexp": true,
+  "undef": true,
+  "unused": true,
+  "strict": true,
+  "trailing": true,
+  "smarttabs": true,
+  "globals": {
+    "angular": false
+  }
+}
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -0,0 +1,30 @@
+'use strict';
+
+module.exports = function (grunt) {
+  require('load-grunt-tasks')(grunt);
+  require('time-grunt')(grunt);
+
+  grunt.initConfig({
+    settings: {
+      entryPoint: 'app.js',
+      lib: 'lib',
+      public: 'public'
+    },
+    jshint: {
+      options: {
+        jshintrc: '.jshintrc',
+        reporter: require('jshint-stylish')
+      },
+      all: [
+        'Gruntfile.js',
+        '<%= settings.entryPoint %>',
+        '<%= settings.lib %>/{,*/}*.js',
+        '<%= settings.app %>/js/{,*/}*.js',
+      ]
+    }
+  });
+
+  grunt.registerTask('default', [
+    'newer:jshint'
+  ]);
+};
diff --git a/app.js b/app.js
@@ -40,7 +40,7 @@ var stats = {};
  */
 app.set('port', process.env.PORT || 3000);
 app.engine('.html', require('ejs').__express);
-app.set('views', path.join(__dirname, 'views'));
+app.set('views', path.join(__dirname, 'public'));
 app.set('view engine', 'html');
 app.use(express.logger('dev'));
 app.use(express.json());
@@ -257,24 +257,6 @@ io.sockets.on('connection', function (socket) {
 
 });
 
-/**
- * Routing
- */
-app.get('/', function(req,res) {
-   res.render('index.html');
-});
-app.get('/index', function (req, res) {
-    res.render('index.html');
-});
-app.get('/checks', function(req,res) {
-  res.render('checks.html');
-});
-app.get('/clients', function(req,res) {
-  res.render('clients.html');
-});
-app.get('/stashes', function(req,res) {
-  res.render('stashes.html');
-});
 
 /**
  * Start server

diff --git a/package.json b/package.json
@@ -10,8 +10,14 @@
     "async": "0.2.*",
     "ejs": "0.8.*",
     "express": "3.4.*",
+    "grunt": "~0.4.1",
+    "grunt-contrib-jshint": "~0.7.1",
+    "grunt-newer": "~0.6.1",
+    "jshint-stylish": "~0.1.3",
+    "load-grunt-tasks": "~0.4.0",
     "socket.io": "0.9.*",
     "moment": "2.5.*",
+    "time-grunt": "~0.2.1",
     "underscore": "1.6.*",
     "yargs": "1.2.*"
   },

diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en" ng-app="uchiwa">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <title>uchiwa</title>
+
+  <!-- Customized Bootstrap -->
+  <link href="css/bootstrap-uchiwa/bootstrap-uchiwa.css" rel="stylesheet">
+
+  <!-- 3rd Party CSS -->
+  <link href="bower_components/fontawesome/css/font-awesome.min.css" rel="stylesheet">
+  <link href="bower_components/toastr/toastr.css" rel="stylesheet">
+  <link href="//fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type="text/css">
+  <link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="stylesheet" type="text/css">
+  <link href="bower_components/morris.js/morris.css" rel="stylesheet">
+
+  <!-- Uchiwa CSS -->
+  <link href="css/uchiwa-default/uchiwa-default.css" rel="stylesheet">
+</head>
+
+<body ng-cloak>
+
+<div ng-controller="init">
+  <div ng-include="'partials/nav.html'"></div>
+  <div ng-view></div>
+  <div ng-include="'partials/client/show.html'"></div>
+</div>
+
+<!-- 3rd Party JS -->
+<script src="bower_components/jquery/dist/jquery.min.js"></script>
+<script src="bower_components/angular/angular.min.js"></script>
+<script src="bower_components/angular-route/angular-route.min.js"></script>
+<script src="/socket.io/socket.io.js"></script>
+<script src="bower_components/async/lib/async.js"></script>
+<script src="bower_components/underscore/underscore.js"></script>
+<script src="bower_components/toastr/toastr.min.js"></script>
+<script src="bower_components/raphael/raphael-min.js"></script>
+<script src="bower_components/morris.js/morris.min.js"></script>
+<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+<script src="bower_components/angular-socket-io/socket.min.js"></script>
+
+<!-- Uchiwa JS -->
+<script src="js/uchiwa.js"></script>
+<script src="js/app.js"></script>
+<script src="js/services.js"></script>
+<script src="js/directives.js"></script>
+<script src="js/controllers.js"></script>
+</body>
+</html>
diff --git a/public/js/app.js b/public/js/app.js
@@ -1,6 +1,19 @@
 angular.module('uchiwa', [
   'uchiwa.controllers',
   'uchiwa.services',
+  'uchiwa.directives',
+  // Angular dependencies
+  'ngRoute',
   // 3rd party dependencies
   'btford.socket-io'
 ]);
+
+angular.module('uchiwa').config(['$routeProvider',
+  function ($routeProvider) {
+    $routeProvider
+      .when('/', {templateUrl: 'partials/dashboard/index.html', controller: 'dashboard'})
+      .when('/clients', {templateUrl: 'partials/client/index.html', controller: 'clients'})
+      .when('/checks', {templateUrl: 'partials/check/index.html', controller: 'checks'})
+      .when('/stashes', {templateUrl: 'partials/stash/index.html', controller: 'stashes'})
+      .otherwise('/');
+  }]);
diff --git a/public/js/controllers.js b/public/js/controllers.js
@@ -5,7 +5,9 @@ var controllerModule = angular.module('uchiwa.controllers', []);
  */
 controllerModule.controller('init', ['$scope', 'socket',
   function($scope, socket) {
-    socket.emit('get_sensu', {});
+    $scope.$on('$routeChangeSuccess', function () {
+      socket.emit('get_sensu', {});
+    });
   }
 ]);
 
@@ -167,7 +169,27 @@ controllerModule.controller('clients', ['$scope', 'socket', 'clientsService',
  */
 controllerModule.controller('dashboard', ['$scope', 'socket',
   function($scope, socket) {
+    $scope.statChartConfig = {
+      data: [],
+      xkey: 'y',
+      ykeys: ['e', 's'],
+      labels: ['Events', 'Stashes'],
+      lineColors: ['#2CA7E5', '#F9CD65'],
+      hideHover: 'auto',
+      pointSize: 0,
+      fillOpacity: 1,
+      gridTextColor: '#fff',
+      gridTextFamily: "'Lato', sans-serif",
+      gridTextWeight: 700,
+      grid: false,
+      lineWidth: 4,
+      axes: true,
+      behaveLikeLine: true
+    };
     socket.emit('get_stats', {});
+    $scope.$on('socket:stats', function(event, data) {
+      $scope.statChartConfig.data = angular.fromJson(data.content);
+    });
     $scope.$on('socket:sensu', function(event, data) {
       var sensu = JSON.parse(data.content);
       $scope.clients = sensu.clients;

diff --git a/public/js/directives.js b/public/js/directives.js
@@ -0,0 +1,19 @@
+var directiveModule = angular.module('uchiwa.directives', []);
+
+directiveModule.directive('morrisLine', function () {
+  return {
+    restrict: 'EA',
+    replace: true,
+    template: '<div class="graph"></div>',
+    scope: {
+      morrisLine: '='
+    },
+    link: function (scope, element) {
+      scope.morrisLine.element = element;
+      var chart = new Morris.Line(scope.morrisLine);
+      scope.$watch('morrisLine.data', function (newValue) {
+        chart.setData(newValue);
+      });
+    }
+  };
+});
diff --git a/public/js/services.js b/public/js/services.js
@@ -13,7 +13,7 @@ serviceModule.factory('socket', function (socketFactory) {
 /**
  * Clients
  */
-serviceModule.service('clientsService', function(){
+serviceModule.service('clientsService', ['socket', function(socket){
   this.stash = function(e, dcName, client, check){
     var event = e || window.event;
     event.stopPropagation();
@@ -59,12 +59,12 @@ serviceModule.service('clientsService', function(){
     socket.emit('delete_client', JSON.stringify({dc: dcName, payload: payload}));
     return true;
   };
-});
+}]);
 
 /**
  * Events
  */
-serviceModule.service('eventsService', function(){
+serviceModule.service('eventsService', ['socket', function(socket){
   this.stash = function(e, dcName, currentEvent){
     var event = e || window.event;
     event.stopPropagation();
@@ -84,15 +84,15 @@ serviceModule.service('eventsService', function(){
     currentEvent.isSilenced = !currentEvent.isSilenced;
     return currentEvent;
   };
-});
+}]);
 
 /**
  * Stashes
  */
-serviceModule.service('stashesService', function(){
+serviceModule.service('stashesService', ['socket', function(socket){
   this.stash = function(dcName, stash, index){
     var payload = {path: stash.path, content:{}};
     socket.emit('delete_stash', JSON.stringify({dc: dcName, payload: payload}));
     return stash;
   };
-});
+}]);
diff --git a/public/js/uchiwa.js b/public/js/uchiwa.js
@@ -1,5 +1,5 @@
 $(document).ready(function(){
-  socket = io.connect();
+  var globalSocket = io.connect();
 
   /**
    * Notifications
@@ -10,7 +10,7 @@ $(document).ready(function(){
   var notification = function(type, message){
     toastr[type](message);
   };
-  socket.on('messenger', function(data) {
+  globalSocket.on('messenger', function(data) {
     if(_.isUndefined(data.content)) return;
     var message = JSON.parse(data.content);
     notification(message.type, message.content);
@@ -25,31 +25,4 @@ $(document).ready(function(){
     $('.navbar-twitch').toggleClass('open');
   });
 
-  /**
-  * Graphics
-  */
-  dashboardGraph = Morris.Line({
-      element: 'dashboard-graph',
-      data: [],
-      xkey: 'y',
-      ykeys: ['e', 's'],
-      labels: ['Events', 'Stashes'],
-      lineColors: ['#2CA7E5', '#F9CD65'],
-      hideHover: 'auto',
-      pointSize: 0,
-      fillOpacity: 1,
-      gridTextColor: '#fff',
-      gridTextFamily: "'Lato', sans-serif",
-      gridTextWeight: 700,
-      grid: false,
-      lineWidth: 4,
-      axes: true,
-      behaveLikeLine: true
-  });
-
-  socket.on('stats', function(data) {
-    if(_.isUndefined(data.content) || $('#dashboard-graph').length == 0) return;
-    var stats = JSON.parse(data.content);
-    dashboardGraph.setData(stats);
-  });
 });
diff --git a/views/checks.html → public/partials/check/index.html b/views/checks.html → public/partials/check/index.html
@@ -1,4 +1,3 @@
-<% include partials/header.html %>
 <div class="container-fluid" ng-controller="checks">
   <div class="row-fluid">
     <div class="col-lg-12">
@@ -10,6 +9,7 @@ <h1>Checks</h1>
       <ul class="nav nav-pills nav-stacked mg-t-md">
         <li>
           <span class="text-muted">Filter</span>
+
           <div class="input-group">
             <input class="search input-sm" ng-model="query">
           </div>
@@ -20,10 +20,12 @@ <h1>Checks</h1>
           <span class="text-muted">datacenters</span>
         </li>
         <li>
-          <a href="#" ng-click="showAll(dc)" class='accordion-toggle'><i class="fa fa-circle blue mg-r-sm"></i> All</a>
+          <a href="#" ng-click="showAll(dc)" class='accordion-toggle'><i
+              class="fa fa-circle blue mg-r-sm"></i> All</a>
         </li>
         <li ng-repeat="datacenter in dc">
-          <a href="#" ng-click="showOnly($index, dc)" class='accordion-toggle'><i class="fa fa-circle mg-r-sm blue"></i> {{datacenter.name}} ({{datacenter.checks}})</a>
+          <a href="#" ng-click="showOnly($index, dc)" class='accordion-toggle'><i
+              class="fa fa-circle mg-r-sm blue"></i> {{datacenter.name}} ({{datacenter.checks}})</a>
         </li>
       </ul>
     </div>
@@ -32,7 +34,8 @@ <h1>Checks</h1>
       <div class="list">
         <div ng-repeat="rows in aggregation">
           <div class="section-header" ng-click="toggleOn($index)" class='accordion-toggle'>
-            <i class="fa" ng-class="toggle[$index].hidden ? 'fa-angle-up' : 'fa-angle-down'"></i> {{dc[$index].name}}
+            <i class="fa" ng-class="toggle[$index].hidden ? 'fa-angle-up' : 'fa-angle-down'"></i>
+            {{dc[$index].name}}
           </div>
           <div class='accordian-body' ng-class="toggle[$index].hidden ? 'collapse' : 'in'">
             <div ng-repeat="row in rows">
@@ -41,14 +44,16 @@ <h1>Checks</h1>
                   <div class='well default'>
                     <span class='lead'>{{check.name}}
                       <span class='pull-right small tag' ng-if="check.hasSubscribers"><i class='fa fa-tag'></i> 
-                        <span style="display:inline-block;" ng-repeat="subscriber in check.subscribers"> {{subscriber}}</span>
+                        <span style="display:inline-block;"
+                              ng-repeat="subscriber in check.subscribers"> {{subscriber}}</span>
                       </span>
                     </span>
-                    <span class='subtitle'><i class='fa fa-terminal'></i> <strong>{{check.command}}</strong></span>
+                                        <span class='subtitle'><i
+                                            class='fa fa-terminal'></i> <strong>{{check.command}}</strong></span>
                     <span class='small timestamp'><i class='fa fa-clock-o'></i> {{check.interval}} seconds</span>
                     <span class='small' ng-if="check.standalone">Standalone</span>
                   </div>
-                </div> 
+                </div>
               </div>
             </div>
           </div>
@@ -57,4 +62,3 @@ <h1>Checks</h1>
     </div>
   </div>
 </div><!-- /.container -->
-<% include partials/footer.html %>