Closes #44, Closes #8. Fist release of annotations feature is ready

src/app/directives/all.js

@@ -11,5 +11,6 @@ define([
   './configModal',
   './spectrumPicker',
   './grafanaGraph',
-  './bootstrap-tagsinput'
+  './bootstrap-tagsinput',
+  './bodyClass'
 ], function () {});

src/app/directives/bodyClass.js

@@ -0,0 +1,40 @@
+define([
+  'angular',
+  'app',
+  'underscore'
+],
+function (angular, app, _) {
+  'use strict';
+
+  angular
+    .module('kibana.directives')
+    .directive('bodyClass', function() {
+      return {
+        link: function($scope, elem) {
+
+          var lastPulldownVal;
+          var lastHideControlsVal;
+
+          $scope.$watch('dashboard.current.pulldowns', function() {
+            var panel = _.find($scope.dashboard.current.pulldowns, function(pulldown) { return pulldown.enable; });
+            var panelEnabled = panel ? panel.enable : false;
+            if (lastPulldownVal !== panelEnabled) {
+              elem.toggleClass('submenu-controls-visible', panelEnabled);
+              lastPulldownVal = panelEnabled;
+            }
+          }, true);
+
+          $scope.$watch('dashboard.current.hideControls', function() {
+            var hideControls = $scope.dashboard.current.hideControls;
+
+            if (lastHideControlsVal !== hideControls) {
+              elem.toggleClass('hide-controls', hideControls);
+              lastHideControlsVal = hideControls;
+            }
+
+          });
+        }
+      };
+    });
+
+});

src/app/directives/grafanaGraph.js

@@ -223,7 +223,7 @@ function (angular, $, kbn, moment, _) {
               types[event.annotation.name] = {
                 level: _.keys(types).length + 1,
                 icon: {
-                  icon: "icon-chevron-up",
+                  icon: "icon-chevron-down",
                   size: event.annotation.iconSize,
                   color: event.annotation.iconColor,
                 }

src/app/panels/annotations/module.js

@@ -30,9 +30,9 @@ function (angular, app, _) {
       name: '',
       type: 'graphite metric',
       showLine: true,
-      iconColor: '#E24D42',
-      lineColor: '#E24D42',
-      iconSize: 15,
+      iconColor: '#C0C6BE',
+      lineColor: 'rgba(255, 96, 96, 0.592157)',
+      iconSize: 13,
       enable: true
     };
 

src/app/partials/dashboard.html

@@ -11,7 +11,7 @@
 </div>
 
 <div class="clearfix"></div>
-<div class="container-fluid main" ng-class="{'grafana-dashboard-hide-controls': dashboard.current.hideControls}">
+<div class="container-fluid main">
   <div>
     <div class="grafana-container container">
       <!-- Rows -->

src/app/services/annotationsSrv.js

@@ -30,7 +30,7 @@ define([
 
     this.getAnnotations = function(rangeUnparsed) {
       if (!annotationPanel.enable) {
-        return $q.when([]);
+        return $q.when(null);
       }
 
       if (promiseCached) {
@@ -40,7 +40,7 @@ define([
       var graphiteMetrics = this.getGraphiteMetrics(rangeUnparsed);
       var graphiteEvents = this.getGraphiteEvents(rangeUnparsed);
 
-      promiseCached = $q.all([graphiteMetrics, graphiteEvents])
+      promiseCached = $q.all(graphiteMetrics.concat(graphiteEvents))
         .then(function() {
           return list;
         });
@@ -51,23 +51,27 @@ define([
     this.getGraphiteEvents = function(rangeUnparsed) {
       var annotations = this.getAnnotationsByType('graphite events');
       if (annotations.length === 0) {
-        return $q.when(null);
+        return [];
       }
 
-      var tags = _.pluck(annotations, 'tags');
+      var promises = _.map(annotations, function(annotation) {
 
-      var eventsQuery = {
-        range: rangeUnparsed,
-        tags: tags.join(' '),
-      };
+        return datasourceSrv.default.events({ range: rangeUnparsed, tags: annotation.tags })
+          .then(function(results) {
+            _.each(results.data, function (event) {
+              addAnnotation({
+                annotation: annotation,
+                time: event.when * 1000,
+                description: event.what,
+                tags: event.tags,
+                data: event.data
+              });
+            });
+          })
+          .then(null, errorHandler);
+      });
 
-      return datasourceSrv.default.events(eventsQuery)
-        .then(function(results) {
-          _.each(results.data, function (event) {
-            list.push(createAnnotation(annotations[0], event.when * 1000, event.what, event.tags, event.data));
-          });
-        })
-        .then(null, errorHandler);
+      return promises;
     };
 
     this.getAnnotationsByType = function(type) {
@@ -80,7 +84,7 @@ define([
     this.getGraphiteMetrics = function(rangeUnparsed) {
       var annotations = this.getAnnotationsByType('graphite metric');
       if (annotations.length === 0) {
-        return $q.when(null);
+        return [];
       }
 
       var promises = _.map(annotations, function(annotation) {
@@ -98,7 +102,7 @@ define([
           .then(null, errorHandler);
       });
 
-      return $q.all(promises);
+      return promises;
     };
 
     function errorHandler(err) {
@@ -114,28 +118,28 @@ define([
           var datapoint = target.datapoints[y];
 
           if (datapoint[0] !== null) {
-            list.push(createAnnotation({
+            addAnnotation({
               annotation: annotation,
               time: datapoint[1] * 1000,
               description: target.target
-            }));
+            });
           }
         }
       }
     }
 
-    function createAnnotation(options) {
+    function addAnnotation(options) {
       var tooltip = "<small><b>" + options.description + "</b><br/>";
       if (options.tags) {
         tooltip += (options.tags || '') + '<br/>';
       }
       tooltip += '<i>' + moment(options.time).format('YYYY-MM-DD HH:mm:ss') + '</i><br/>';
       if (options.data) {
-        tooltip += data;
+        tooltip += options.data;
       }
       tooltip += "</small>";
 
-      return {
+      list.push({
         annotation: options.annotation,
         min: options.time,
         max: options.time,
@@ -143,7 +147,7 @@ define([
         title: null,
         description: tooltip,
         score: 1
-      };
+      });
     }
 
     // Now init

src/app/services/dashboard.js

@@ -28,7 +28,7 @@ function (angular, $, kbn, _, config, moment, Modernizr) {
       failover: false,
       panel_hints: true,
       rows: [],
-      pulldowns: [ { type: 'filtering' },  { type: 'annotations' } ],
+      pulldowns: [ { type: 'templating' },  { type: 'annotations' } ],
       nav: [ { type: 'timepicker' } ],
       services: {},
       loader: {

src/css/less/grafana.less

@@ -1,11 +1,14 @@
 @import "submenu.less";
 @import "bootstrap-tagsinput.less";
 
-.grafana-dashboard-hide-controls {
+.hide-controls {
   padding: 0;
   .grafana-row {
     display: none;
   }
+  .submenu-controls {
+    display: none;
+  }
 }
 
 // Search

src/css/less/submenu.less

@@ -11,6 +11,12 @@
   }
 }
 
+.submenu-controls-visible:not(.hide-controls) {
+  .panel-fullscreen {
+    top: 82px;
+  }
+}
+
 .submenu-panel {
   padding: 0 4px 0 8px;
   border-right: 1px solid @submenuBorder;

src/index.html

@@ -21,7 +21,7 @@
 
   </head>
 
-  <body ng-cloak>
+  <body ng-cloak body-class >
 
     <!--<link rel="stylesheet" ng-href="css/bootstrap.{{dashboard.current.style||'dark'}}.min.css">-->
     <link rel="stylesheet" ng-href="css/bootstrap.{{dashboard.current.style||'dark'}}.min.css">