Panel: fixes to panel menu when in edito/fullscreen mode, Fixes #1069

src/app/components/panelmeta.js

@@ -12,12 +12,12 @@ function () {
     this.extendedMenu = [];
 
     if (options.fullscreen) {
-      this.addMenuItem('view', 'icon-eye-open', 'toggleFullscreen(false)');
+      this.addMenuItem('view', 'icon-eye-open', 'toggleFullscreen(false); dismiss();');
     }
 
-    this.addMenuItem('edit', 'icon-cog', 'editPanel()');
+    this.addMenuItem('edit', 'icon-cog', 'editPanel(); dismiss();');
     this.addMenuItem('duplicate', 'icon-copy', 'duplicatePanel()');
-    this.addMenuItem('share', 'icon-share', 'sharePanel()');
+    this.addMenuItem('share', 'icon-share', 'sharePanel(); dismiss();');
 
     this.addEditorTab('General', 'app/partials/panelgeneral.html');
 
@@ -25,7 +25,7 @@ function () {
       this.addEditorTab('Metrics', 'app/partials/metrics.html');
     }
 
-    this.addExtendedMenuItem('Panel JSON', '', 'editPanelJson()');
+    this.addExtendedMenuItem('Panel JSON', '', 'editPanelJson(); dismiss();');
   }
 
   PanelMeta.prototype.addMenuItem = function(text, icon, click) {

src/app/directives/panelMenu.js

@@ -13,11 +13,6 @@ function (angular, $, _) {
           '<span class="panel-title drag-handle pointer">' +
             '<span class="panel-title-text drag-handle">{{panel.title | interpolateTemplateVars}}</span>' +
             '<span class="panel-links-icon"></span>' +
-            '<span class="panel-actions">' +
-               '<a href="asd" class="panel-menu-link"><i class="icon-th-list"></i></a>' +
-               '<a href="asd" class="panel-menu-link">View</a>' +
-               '<a href="asd" class="panel-menu-link">Edit</a>' +
-            '</span>';
           '</span>';
 
       function createMenuTemplate($scope) {
@@ -77,7 +72,7 @@ function (angular, $, _) {
             $link.toggleClass('has-panel-links', showIcon);
           });
 
-          function dismiss(time) {
+          function dismiss(time, force) {
             clearTimeout(timeout);
             timeout = null;
 
@@ -87,10 +82,12 @@ function (angular, $, _) {
             }
 
             // if hovering or draging pospone close
+            if (force !== true) {
               if ($menu.is(':hover') || $scope.dashboard.$$panelDragging) {
-              dismiss(2500);
+                dismiss(2200);
                 return;
               }
+            }
 
             if (menuScope) {
               $menu.unbind();
@@ -102,7 +99,12 @@ function (angular, $, _) {
             }
           }
 
-          var showMenu = function() {
+          var showMenu = function(e) {
+            // if menu item is clicked and menu was just removed from dom ignore this event
+            if (!$.contains(document, e.target)) {
+              return;
+            }
+
             if ($menu) {
               dismiss();
               return;
@@ -124,11 +126,14 @@ function (angular, $, _) {
             $menu = $(menuTemplate);
             $menu.css('left', menuLeftPos);
             $menu.mouseleave(function() {
-              //dismiss(1000);
+              dismiss(1000);
             });
 
             menuScope = $scope.$new();
             menuScope.extendedMenu = getExtendedMenu($scope);
+            menuScope.dismiss = function() {
+              dismiss(null, true);
+            };
 
             $('.panel-menu').remove();
             elem.append($menu);
@@ -139,7 +144,7 @@ function (angular, $, _) {
             $(".panel-container").removeClass('panel-highlight');
             $panelContainer.toggleClass('panel-highlight');
 
-            //dismiss(2500);
+            dismiss(2200);
           };
 
           if ($scope.panelMeta.titlePos && $scope.panel.title) {

src/app/services/influxdb/influxSeries.js

@@ -69,7 +69,6 @@ function (_) {
   p.getAnnotations = function () {
     var list = [];
     var self = this;
-    console.log(this.seriesList);
 
     _.each(this.seriesList, function (series) {
       var titleCol = null;

src/css/less/grafana.less

@@ -110,28 +110,6 @@
   font-size: 12px;
 }
 
-.panel-fullscreen {
-  z-index: 100;
-  display: block;
-  position: fixed;
-  left: 0px;
-  right: 0px;
-  top: 51px;
-  height: 100%;
-  padding: 0 10px;
-  background: @grafanaPanelBackground;
-  overflow-y: scroll;
-  height: 100%;
-
-  .panel-content {
-    padding-bottom: 130px;
-  }
-
-  .dropdown-menu {
-    margin-bottom: 70px;
-  }
-}
-
 .dashboard-fullscreen {
   .main-view-container {
     overflow: hidden;

src/css/less/panel.less

@@ -79,6 +79,32 @@
   bottom: 0;
 }
 
+.panel-fullscreen {
+  z-index: 100;
+  display: block;
+  position: fixed;
+  left: 0px;
+  right: 0px;
+  top: 51px;
+  height: 100%;
+  padding: 0 10px;
+  background: @grafanaPanelBackground;
+  overflow-y: scroll;
+  height: 100%;
+
+  .panel-content {
+    padding-bottom: 130px;
+  }
+
+  .dropdown-menu {
+    margin-bottom: 70px;
+  }
+
+  .panel-menu {
+    top: 0px;
+  }
+}
+
 .panel-menu {
   z-index: 1000;
   position: absolute;
@@ -132,20 +158,4 @@
   }
 }
 
-.panel-actions {
-  display: none;
-  position: absolute;
-  right: 0;
-  top: -2px;
-  width: 112px;
-  a {
-    opacity: 0.35;
-    border: 1px solid black;
-    padding: 5px 10px;
-    font-size: 75%;
-    background: @grafanaTargetFuncBackground;
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
+

src/test/specs/influxSeries-specs.js

@@ -146,7 +146,7 @@ define([
           {
             columns: ['time', 'text', 'sequence_number', 'title', 'tags'],
             name: 'events1',
-            points: [[1402596000, 'some text', 1, 'Hello', 'B'], [1402596001, 'asd', 2, 'Hello2', 'B']]
+            points: [[1402596000000, 'some text', 1, 'Hello', 'B'], [1402596001000, 'asd', 2, 'Hello2', 'B']]
           }
         ],
         annotation: {
@@ -176,7 +176,7 @@ define([
           {
             columns: ['time', 'text', 'sequence_number'],
             name: 'events1',
-            points: [[1402596000, 'some text', 1]]
+            points: [[1402596000000, 'some text', 1]]
           }
         ],
         annotation: { query: 'select' }