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

b4980385 · Torkel Ödegaard · 7b906aa2 · b4980385 · b4980385 · b4980385
Commit b4980385 authored Feb 21, 2014 by Torkel Ödegaard
12 changed files
--- a/src/app/directives/all.js
+++ b/src/app/directives/all.js
@@ -11,5 +11,6 @@ define([
  './configModal',
  './spectrumPicker',
  './grafanaGraph',
-  './bootstrap-tagsinput'
+  './bootstrap-tagsinput',
+  './bodyClass'
 ], function () {});
\ No newline at end of file
--- a/src/app/directives/bodyClass.js
+++ b/src/app/directives/bodyClass.js
+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;
+            }
+          });
+        }
+      };
+    });
+});
\ No newline at end of file
--- a/src/app/directives/grafanaGraph.js
+++ b/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,
                }

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

--- a/src/app/partials/dashboard.html
+++ b/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 -->

--- a/src/app/services/annotationsSrv.js
+++ b/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(eventsQuery)
+        return datasourceSrv.default.events({ range: rangeUnparsed, tags: annotation.tags })
          .then(function(results) {
            _.each(results.data, function (event) {
-            list.push(createAnnotation(annotations[0], event.when * 1000, event.what, event.tags, event.data));
+              addAnnotation({
+                annotation: annotation,
+                time: event.when * 1000,
+                description: event.what,
+                tags: event.tags,
+                data: 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

--- a/src/app/services/dashboard.js
+++ b/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: {

--- a/src/css/bootstrap.dark.min.css
+++ b/src/css/bootstrap.dark.min.css
--- a/src/css/bootstrap.light.min.css
+++ b/src/css/bootstrap.light.min.css
--- a/src/css/less/grafana.less
+++ b/src/css/less/grafana.less
 @import "submenu.less";
 @import "bootstrap-tagsinput.less";
-.grafana-dashboard-hide-controls {
+.hide-controls {
  padding: 0;
  .grafana-row {
    display: none;
  }
+  .submenu-controls {
+    display: none;
+  }
 }
 // Search

--- a/src/css/less/submenu.less
+++ b/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;

--- a/src/index.html
+++ b/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">