From f4ba80b7886b6c5538b700b5e64ece41da1b251d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Sun, 8 Dec 2013 17:18:27 +0100
Subject: [PATCH] worked on full screen edit mode

---
 src/app/controllers/dash.js         | 10 +++++++++-
 src/app/directives/kibanaPanel.js   |  2 +-
 src/app/panels/graphite/editor.html |  2 +-
 src/app/panels/graphite/module.html | 19 ++++++++++++++++++-
 src/app/panels/graphite/module.js   | 20 +++++++++++++++++++-
 src/app/partials/dashboard.html     |  9 +++++++++
 src/index.html                      |  3 +--
 7 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/src/app/controllers/dash.js b/src/app/controllers/dash.js
index d15330346d4..2db993bbd59 100644
--- a/src/app/controllers/dash.js
+++ b/src/app/controllers/dash.js
@@ -29,7 +29,7 @@ function (angular, config, _) {
   var module = angular.module('kibana.controllers');
 
   module.controller('DashCtrl', function(
-    $scope, $route, ejsResource, fields, dashboard, alertSrv, panelMove, esVersion) {
+    $scope, $rootScope, $route, ejsResource, fields, dashboard, alertSrv, panelMove, esVersion) {
 
     $scope.requiredElasticSearchVersion = ">=0.20.5";
 
@@ -61,6 +61,14 @@ function (angular, config, _) {
       $scope.reset_row();
 
       $scope.ejs = ejsResource(config.elasticsearch);
+
+      $rootScope.$on('fullEditMode', function(evt, enabled) {
+        $scope.fullEditMode = enabled;
+      });
+    };
+
+    $scope.closeFullEdit = function() {
+      $rootScope.$emit('fullEditMode', false);
     };
 
     $scope.isPanel = function(obj) {
diff --git a/src/app/directives/kibanaPanel.js b/src/app/directives/kibanaPanel.js
index bbe5483d604..f437ba9a406 100644
--- a/src/app/directives/kibanaPanel.js
+++ b/src/app/directives/kibanaPanel.js
@@ -37,7 +37,7 @@ function (angular) {
           '</span>' +
 
           '<span class="row-button extra" ng-show="panel.editable != false">' +
-            '<span bs-modal="\'app/partials/paneleditor.html\'" class="pointer">'+
+            '<span bs-modal="\'app/partials/paneleditor.html\'" class="pointer" ng-click="openConfigureModal($event)" >'+
             '<i class="icon-cog pointer" bs-tooltip="\'Configure\'"></i></span>'+
           '</span>' +
 
diff --git a/src/app/panels/graphite/editor.html b/src/app/panels/graphite/editor.html
index 94b820bff40..dc5b0a49d5e 100644
--- a/src/app/panels/graphite/editor.html
+++ b/src/app/panels/graphite/editor.html
@@ -6,7 +6,7 @@
 
   	<div class="row-fluid">
   		<div class="span12">
-    		<input type="text" ng-model="target.target" class="input-large" style="width:95%" ng-change="render()" />
+    		<input type="text" ng-model="target.target" class="input-large" style="width:95%" ng-model-onblur ng-change="get_data()" />
     		<i ng-click="panel.targets = _.without(panel.targets, target)" class="pointer icon-remove" style="position: relative; top: -5px; left: 5px;"></i>
     	</div>
     </div>
diff --git a/src/app/panels/graphite/module.html b/src/app/panels/graphite/module.html
index 95bfe71670a..d56fe516d73 100644
--- a/src/app/panels/graphite/module.html
+++ b/src/app/panels/graphite/module.html
@@ -1,4 +1,4 @@
-<div ng-controller='graphite' ng-init="init()" style="min-height:{{panel.height || row.height}}">
+<div ng-controller='graphite' ng-init="init()" style="min-height:{{panel.height || row.height}}" ng-class='{"panel-full-edit-mode": inEditMode}'>
   <style>
     .histogram-legend {
       display:inline-block;
@@ -32,6 +32,23 @@
     .form-inline .checkbox {
         display: inline-block;
     }
+
+    .full-edit-mode {
+      //display: none;
+    }
+
+    .panel-full-edit-mode {
+      z-index: 1500;
+      display: block;
+      position: fixed;
+      left: 20px;
+      right: 20px;
+      top: 100px;
+      outline: 1px solid #101214;
+      border-top: 1px solid #3e444c;
+      padding: 0 10px 10px 10px;
+      background: #202328;
+    }
   </style>
   <div>
     <span ng-show='panel.options'>
diff --git a/src/app/panels/graphite/module.js b/src/app/panels/graphite/module.js
index c94a512c7f2..4fe946f860d 100644
--- a/src/app/panels/graphite/module.js
+++ b/src/app/panels/graphite/module.js
@@ -35,7 +35,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv) {
   var module = angular.module('kibana.panels.graphite', []);
   app.useModule(module);
 
-  module.controller('graphite', function($scope, querySrv, dashboard, filterSrv) {
+  module.controller('graphite', function($scope, $rootScope, querySrv, dashboard, filterSrv) {
     $scope.panelMeta = {
       modals : [
         {
@@ -383,6 +383,24 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv) {
       });
     };
 
+    $scope.openConfigureModal = function($event) {
+      $event.preventDefault();
+      $event.stopPropagation();
+
+      var closeEditMode = $rootScope.$on('fullEditMode', function(evt, enabled) {
+        $scope.inEditMode = enabled;
+        if (!enabled) {
+          closeEditMode();
+        }
+
+        setTimeout(function() {
+         $scope.$emit('render');
+        }, 200);
+      });
+
+      $rootScope.$emit('fullEditMode', true);
+    };
+
     // I really don't like this function, too much dom manip. Break out into directive?
     $scope.populate_modal = function(request) {
       $scope.inspector = angular.toJson(request,true);
diff --git a/src/app/partials/dashboard.html b/src/app/partials/dashboard.html
index b2ece2bfb50..b8cd431898f 100644
--- a/src/app/partials/dashboard.html
+++ b/src/app/partials/dashboard.html
@@ -13,6 +13,15 @@
 <div class="container-fluid main">
   <div class="row-fluid">
     <div class="row-fluid container" style="margin-top:10px; width:98%">
+      <!-- Full edit mode -->
+      <div class="row-fluid kibana-row" ng-show="fullEditMode" style="text-align: center; z-index: 1500; position: absolute; background-color: #272b30">
+        <h5>
+          Configure Panel
+          <i ng-click="closeFullEdit()" class="pointer icon-remove" style="position: relative; top: 0px; left: 15px;"></i>
+        </h5>
+      </div>
+
+      <div ng-show="fullEditMode" 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)">
         <div class="row-control">
diff --git a/src/index.html b/src/index.html
index f81fdc879ff..5c2fc8c658a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -20,8 +20,7 @@
 
   </head>
 
-  <body ng-cloak>
-
+  <body ng-cloak ng-class="{'full-edit-mode': fullEditMode}">
 
     <link rel="stylesheet" ng-href="css/bootstrap.{{dashboard.current.style||'dark'}}.min.css">
     <link rel="stylesheet" href="css/bootstrap-responsive.min.css">