added fullscreen only view

src/app/controllers/dash.js

@@ -60,12 +60,16 @@ function (angular, config, _) {
 
       $scope.ejs = ejsResource(config.elasticsearch);
 
-      $rootScope.$on('fullEditMode', function(evt, enabled) {
-        $scope.fullEditMode = enabled;
+      $rootScope.$on('panel-fullscreen-enter', function() {
+        $scope.fullscreenPanelExists = true;
+      });
+
+      $rootScope.$on('panel-fullscreen-exit', function() {
+        $scope.fullscreenPanelExists = false;
       });
 
       keyboardManager.bind('esc', function() {
-        $rootScope.$emit('fullEditMode', false);
+        $rootScope.$emit('panel-fullscreen-exit');
       });
     };
 

src/app/controllers/pulldown.js

@@ -8,7 +8,7 @@ function (angular, app, _) {
 
   var module = angular.module('kibana.controllers');
 
-  module.controller('PulldownCtrl', function($scope, $rootScope, $timeout,ejsResource) {
+  module.controller('PulldownCtrl', function($scope, $rootScope, $timeout) {
       var _d = {
         collapse: false,
         notice: false,

src/app/controllers/row.js

@@ -8,7 +8,7 @@ function (angular, app, _) {
 
   var module = angular.module('kibana.controllers');
 
-  module.controller('RowCtrl', function($scope, $rootScope, $timeout,ejsResource) {
+  module.controller('RowCtrl', function($scope, $rootScope, $timeout) {
       var _d = {
         title: "Row",
         height: "150px",

src/app/directives/kibanaPanel.js

@@ -50,7 +50,7 @@ function (angular) {
             '</span>'+
           '</span>' +
 
-          '<span class="row-button row-text panel-title pointer" ng-show="panel.title" ng-click="openConfigureModal()">' +
+          '<span class="row-button row-text panel-title pointer" ng-show="panel.title" ng-click="toggleFullscreen()">' +
             '{{panel.title}}' +
           '</span>'+
 

src/app/panels/graphite/module.html

-<div ng-controller='graphite' ng-init="init()" style="min-height:{{panel.height || row.height}}" ng-class='{"panel-full-edit": inEditMode}'>
+<div  ng-controller='graphite'
+      ng-init="init()"
+      style="min-height:{{panel.height || row.height}}"
+      ng-class='{"panel-fullscreen": showFullscreen}'
+      ng-dblclick="toggleFullscreen($event);"
+      >
+
   <style>
     .histogram-legend {
       display:inline-block;

src/app/panels/graphite/module.js

@@ -61,8 +61,8 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
           src:'app/panels/graphite/styleEditor.html'
         }
       ],
-      status  : "Work in progress",
-      description : " Graphite graphing panel"
+      status  : "Unstable",
+      description : "Graphite graphing panel <br /><br />"
     };
 
     // Set and populate defaults
@@ -240,8 +240,8 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
     };
 
     $scope.remove_panel_from_row = function(row, panel) {
-      if ($scope.inEditMode) {
-        $rootScope.$emit('fullEditMode', false);
+      if ($scope.showFullscreen) {
+        $rootScope.$emit('panel-fullscreen-exit');
       }
       else {
         $scope.$parent.remove_panel_from_row(row, panel);
@@ -253,10 +253,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       $scope.get_data();
     };
 
-    $scope.closeEditMode = function() {
-      $rootScope.$emit('fullEditMode', false);
-    };
-
     $scope.interval_label = function(interval) {
       return $scope.panel.auto_int && interval === $scope.panel.interval ? interval+" (auto)" : interval;
     };
@@ -322,7 +318,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       return graphiteSrv.query(graphiteQuery)
         .then(function(results) {
           $scope.panelMeta.loading = false;
-          var data = $scope.receiveGraphiteData(results, range, interval)
+          var data = $scope.receiveGraphiteData(results, range, interval);
           $scope.$emit('render', data);
         })
         .then(null, function(err) {
@@ -331,7 +327,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
     };
 
     $scope.receiveGraphiteData = function(results, range, interval) {
-      var results = results.data;
+      results = results.data;
       $scope.legend = [];
       var data = [];
 
@@ -384,28 +380,39 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       $scope.panel.targets.push({target: ''});
     };
 
-    $scope.openConfigureModal = function() {
-      if ($scope.inEditMode) {
-        $rootScope.$emit('fullEditMode', false);
-        return;
-      }
-
+    $scope.enterFullscreenMode = function(options) {
       var oldHeight = $scope.row.height;
-      $scope.row.height = 200;
+      var docHeight = $(window).height();
+      $scope.row.height = options.edit ? 200 : Math.floor(docHeight * 0.7);
 
-      var closeEditMode = $rootScope.$on('fullEditMode', function(evt, enabled) {
-        $scope.inEditMode = enabled;
-        if (!enabled) {
-          $scope.row.height = oldHeight;
-          closeEditMode();
-        }
+      var closeEditMode = $rootScope.$on('panel-fullscreen-exit', function() {
+        $scope.inEditMode = false;
+        $scope.showFullscreen = false;
+        $scope.row.height = oldHeight;
+
+        closeEditMode();
 
         $timeout(function() {
           $scope.$emit('render');
         });
       });
 
-      $rootScope.$emit('fullEditMode', true);
+      $scope.inEditMode = options.edit;
+      $scope.showFullscreen = true;
+      $rootScope.$emit('panel-fullscreen-enter');
+
+      $timeout(function() {
+        $scope.$emit('render');
+      });
+    };
+
+    $scope.openConfigureModal = function() {
+      if ($scope.showFullscreen) {
+        $rootScope.$emit('panel-fullscreen-exit');
+        return;
+      }
+
+      $scope.enterFullscreenMode({edit: true});
     };
 
     // I really don't like this function, too much dom manip. Break out into directive?
@@ -429,6 +436,23 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       $scope.$emit('render');
     };
 
+    $scope.toggleFullscreen = function(evt) {
+      if ($scope.showFullscreen) {
+        $rootScope.$emit('panel-fullscreen-exit');
+        return;
+      }
+
+      if (evt) {
+        var elem = $(evt.target);
+        if (!elem.hasClass('panel-extra') ||
+          elem.attr('ng-click')) {
+          return;
+        }
+      }
+
+      $scope.enterFullscreenMode({edit: false});
+    };
+
     $scope.toggleSeries = function(info) {
       if ($scope.hiddenSeries[info.alias]) {
         delete $scope.hiddenSeries[info.alias];

src/app/partials/dashboard.html

@@ -13,7 +13,7 @@
 <div class="container-fluid main" ng-class="{'grafana-dashboard-hide-controls': dashboard.current.hideControls}">
   <div class="row-fluid">
     <div class="row-fluid container" style="margin-top:10px; width:98%">
-      <div ng-show="fullEditMode" class="modal-backdrop fade in"></div>
+      <div ng-show="fullscreenPanelExists" class="modal-backdrop fade in"></div>
 
       <!-- Rows -->
       <div class="row-fluid kibana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.current.rows" ng-style="row_style(row)">
@@ -81,7 +81,7 @@
         </div>
       </div>
 
-      <div class="row-fluid" ng-show='dashboard.current.editable'>
+      <div class="row-fluid" ng-show='dashboard.current.editable && dashboard.current.panel_hints'>
         <div class="span12" style="text-align:right;">
           <span style="margin-left: 0px;" class="pointer btn btn-mini" bs-modal="'app/partials/dasheditor.html'">
             <span ng-click="editor.index = 2"><i class="icon-plus-sign"></i> ADD A ROW</span>

src/app/services/graphite/graphiteSrv.js

@@ -46,17 +46,6 @@ function (angular, _, $, config) {
       return found;
     };
 
-    /*function getGraphiteData(parameters) {
-      return $.ajax({
-        accepts: { text: 'application/json' },
-        cache: false,
-        dataType: 'json',
-        url: config.graphiteUrl + '/render/',
-        type: "POST",
-        data: parameters.join('&')
-      });
-    }
-*/
     function buildGraphitePostParams(options) {
       var clean_options = [];
       var graphite_options = ['target', 'targets', 'from', 'until', 'rawData', 'format', 'maxDataPoints'];
@@ -64,19 +53,20 @@ function (angular, _, $, config) {
       options['format'] = 'json';
 
       $.each(options, function (key, value) {
-      if ($.inArray(key, graphite_options) === -1) {
-        return;
-      }
+        if ($.inArray(key, graphite_options) === -1) {
+          return;
+        }
 
-      if (key === "targets") {
-        $.each(value, function (index, value) {
-          if (!value.hide) {
-            clean_options.push("target=" + encodeURIComponent(value.target));
-          }
-        });
-      } else if (value !== null) {
-        clean_options.push(key + "=" + encodeURIComponent(value));
-      }
+        if (key === "targets") {
+          $.each(value, function (index, value) {
+            if (!value.hide) {
+              clean_options.push("target=" + encodeURIComponent(value.target));
+            }
+          });
+        }
+        else if (value !== null) {
+          clean_options.push(key + "=" + encodeURIComponent(value));
+        }
       });
       return clean_options;
     }

src/index.html

@@ -20,7 +20,7 @@
 
   </head>
 
-  <body ng-cloak ng-class="{'full-edit-mode': fullEditMode}">
+  <body ng-cloak>
 
     <link rel="stylesheet" ng-href="css/bootstrap.{{dashboard.current.style||'dark'}}.min.css">
     <link rel="stylesheet" href="css/bootstrap-responsive.min.css">

src/vendor/bootstrap/less/grafana.less

@@ -70,11 +70,7 @@
   }
 }
 
-.full-edit-mode {
-  //display: none;
-}
-
-.panel-full-edit {
+.panel-fullscreen {
   z-index: 1500;
   display: block;
   position: fixed;