public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Closes ##278, improvements in row height matching, refactorings of base kibana panel features into PanelBaseCtrl

Browse Source
This commit is contained in:
Torkel Ödegaard
2014-04-05 19:22:24 +02:00
parent 5cd73cea4b
commit 6f114b17d6
10 changed files with 166 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/controllers/panelBaseCtrl.js
+130
View File
@@ -0,0 +1,130 @@
define([
'angular',
'underscore',
'jquery'
],
function (angular, _, $) {
'use strict';
function PanelBaseCtrl($scope, $rootScope, $timeout) {
var menu = [
{
text: 'Edit',
configModal: "app/partials/paneleditor.html",
condition: !$scope.panelMeta.fullscreenEdit
},
{
text: 'Edit',
click: "toggleFullscreenEdit()",
condition: $scope.panelMeta.fullscreenEdit
},
{
text: "Fullscreen",
click: 'toggleFullscreen()',
condition: $scope.panelMeta.fullscreenView
},
{
text: 'Duplicate',
click: 'duplicatePanel(panel)',
condition: true
},
{
text: 'Span',
submenu: [
{ text: '1', click: 'updateColumnSpan(1)' },
{ text: '2', click: 'updateColumnSpan(2)' },
{ text: '3', click: 'updateColumnSpan(3)' },
{ text: '4', click: 'updateColumnSpan(4)' },
{ text: '5', click: 'updateColumnSpan(5)' },
{ text: '6', click: 'updateColumnSpan(6)' },
{ text: '7', click: 'updateColumnSpan(7)' },
{ text: '8', click: 'updateColumnSpan(8)' },
{ text: '9', click: 'updateColumnSpan(9)' },
{ text: '10', click: 'updateColumnSpan(10)' },
{ text: '11', click: 'updateColumnSpan(11)' },
{ text: '12', click: 'updateColumnSpan(12)' },
],
condition: true
},
{
text: 'Remove',
click: 'remove_panel_from_row(row, panel)',
condition: true
}
];
$scope.inspector = {};
$scope.panelMeta.menu = _.where(menu, { condition: true });
$scope.updateColumnSpan = function(span) {
$scope.panel.span = span;
$timeout(function() {
$scope.$emit('render');
});
};
$scope.enterFullscreenMode = function(options) {
var docHeight = $(window).height();
var editHeight = Math.floor(docHeight * 0.3);
var fullscreenHeight = Math.floor(docHeight * 0.7);
var oldTimeRange = $scope.range;
$scope.height = options.edit ? editHeight : fullscreenHeight;
$scope.editMode = options.edit;
if (!$scope.fullscreen) {
var closeEditMode = $rootScope.$on('panel-fullscreen-exit', function() {
$scope.editMode = false;
$scope.fullscreen = false;
delete $scope.height;
closeEditMode();
$timeout(function() {
if (oldTimeRange !== $scope.range) {
$scope.dashboard.refresh();
}
else {
$scope.$emit('render');
}
});
});
}
$(window).scrollTop(0);
$scope.fullscreen = true;
$rootScope.$emit('panel-fullscreen-enter');
$timeout(function() {
$scope.$emit('render');
});
};
$scope.toggleFullscreenEdit = function() {
if ($scope.editMode) {
$rootScope.$emit('panel-fullscreen-exit');
return;
}
$scope.enterFullscreenMode({edit: true});
};
$scope.toggleFullscreen = function() {
if ($scope.fullscreen && !$scope.editMode) {
$rootScope.$emit('panel-fullscreen-exit');
return;
}
$scope.enterFullscreenMode({ edit: false });
};
}
return PanelBaseCtrl;
});
src/app/directives/grafanaGraph.js
+7 -2
View File
@@ -46,10 +46,14 @@ function (angular, $, kbn, moment, _) {
function setElementHeight() {
try {
var height = scope.height || scope.panel.height || scope.row.height;
height = height.replace('px', '') - 32; // subtract panel title bar
if (_.isString(height)) {
height = parseInt(height.replace('px', ''), 10);
}
height = height - 32; // subtract panel title bar
if (scope.panel.legend.show) {
height = height - 35; // subtract one line legend
height = height - 21; // subtract one line legend
}
elem.css('height', height + 'px');
@@ -64,6 +68,7 @@ function (angular, $, kbn, moment, _) {
if (!data) {
return true;
}
if ($rootScope.fullscreen && !scope.fullscreen) {
return true;
}
src/app/directives/kibanaPanel.js
+9 -123
View File
@@ -1,14 +1,15 @@
define([
'angular',
'jquery',
'underscore'
'underscore',
'../controllers/PanelBaseCtrl'
],
function (angular, $, _) {
function (angular, $, _, PanelBaseCtrl) {
'use strict';
angular
.module('kibana.directives')
.directive('kibanaPanel', function($compile, $timeout, $rootScope) {
.directive('kibanaPanel', function($compile, $timeout, $rootScope, $injector) {
var container = '<div class="panel-container"></div>';
var content = '<div class="panel-content"></div>';
@@ -23,7 +24,7 @@ function (angular, $, _) {
'</div>' +
'</div>\n' +
'<div class="row-fluid panel-extra">' +
'<div class="row-fluid panel-extra" ng-hide="panel.hide_title">' +
'<div class="panel-extra-container">' +
'<span class="panel-loading" ng-show="panelMeta.loading == true">' +
@@ -79,6 +80,10 @@ function (angular, $, _) {
elem.remove();
});
newScope.initBaseController = function(self, scope) {
$injector.invoke(PanelBaseCtrl, self, { $scope: scope });
};
$scope.$watch(attr.type, function (name) {
elem.addClass("ng-cloak");
// load the panels module file, then render it in the dom.
@@ -107,125 +112,6 @@ function (angular, $, _) {
});
/*
/* Panel base functionality
/* */
newScope.initPanel = function(scope) {
scope.updateColumnSpan = function(span) {
scope.panel.span = span;
$timeout(function() {
scope.$emit('render');
});
};
function enterFullscreenMode(options) {
var docHeight = $(window).height();
var editHeight = Math.floor(docHeight * 0.3);
var fullscreenHeight = Math.floor(docHeight * 0.7);
var oldTimeRange = scope.range;
scope.height = options.edit ? editHeight : fullscreenHeight;
scope.editMode = options.edit;
if (!scope.fullscreen) {
var closeEditMode = $rootScope.$on('panel-fullscreen-exit', function() {
scope.editMode = false;
scope.fullscreen = false;
delete scope.height;
closeEditMode();
$timeout(function() {
if (oldTimeRange !== $scope.range) {
scope.dashboard.refresh();
}
else {
scope.$emit('render');
}
});
});
}
$(window).scrollTop(0);
scope.fullscreen = true;
$rootScope.$emit('panel-fullscreen-enter');
$timeout(function() {
scope.$emit('render');
});
}
scope.toggleFullscreenEdit = function() {
if (scope.editMode) {
$rootScope.$emit('panel-fullscreen-exit');
return;
}
enterFullscreenMode({edit: true});
};
$scope.toggleFullscreen = function() {
if (scope.fullscreen && !scope.editMode) {
$rootScope.$emit('panel-fullscreen-exit');
return;
}
enterFullscreenMode({ edit: false });
};
var menu = [
{
text: 'Edit',
configModal: "app/partials/paneleditor.html",
condition: !scope.panelMeta.fullscreenEdit
},
{
text: 'Edit',
click: "toggleFullscreenEdit()",
condition: scope.panelMeta.fullscreenEdit
},
{
text: "Fullscreen",
click: 'toggleFullscreen()',
condition: scope.panelMeta.fullscreenView
},
{
text: 'Duplicate',
click: 'duplicatePanel(panel)',
condition: true
},
{
text: 'Span',
submenu: [
{ text: '1', click: 'updateColumnSpan(1)' },
{ text: '2', click: 'updateColumnSpan(2)' },
{ text: '3', click: 'updateColumnSpan(3)' },
{ text: '4', click: 'updateColumnSpan(4)' },
{ text: '5', click: 'updateColumnSpan(5)' },
{ text: '6', click: 'updateColumnSpan(6)' },
{ text: '7', click: 'updateColumnSpan(7)' },
{ text: '8', click: 'updateColumnSpan(8)' },
{ text: '9', click: 'updateColumnSpan(9)' },
{ text: '10', click: 'updateColumnSpan(10)' },
{ text: '11', click: 'updateColumnSpan(11)' },
{ text: '12', click: 'updateColumnSpan(12)' },
],
condition: true
},
{
text: 'Remove',
click: 'remove_panel_from_row(row, panel)',
condition: true
}
];
scope.inspector = {};
scope.panelMeta.menu = _.where(menu, { condition: true });
};
}
};
});
src/app/panels/graphite/module.js
+1 -1
View File
@@ -199,7 +199,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
}
$scope.init = function() {
$scope.initPanel($scope);
$scope.initBaseController(this, $scope);
$scope.fullscreen = false;
$scope.editor = { index: 1 };
src/app/panels/text/module.html
+1 -1
View File
@@ -1,4 +1,4 @@
<div ng-controller='text' ng-init="init()" style="min-height:{{panel.height || row.height}}">
<div ng-controller='text' ng-init="init()" style="min-height:{{panel.height || row.height}}" ng-dblclick="openEditor()">
<!--<p ng-style="panel.style" ng-bind-html-unsafe="panel.content | striphtml | newlines"></p>-->
<markdown ng-show="ready && panel.mode == 'markdown'">
{{panel.content}}
src/app/panels/text/module.js
+10 -10
View File
@@ -23,28 +23,23 @@ function (angular, app, _, require) {
app.useModule(module);
module.controller('text', function($scope) {
$scope.panelMeta = {
description : "A static text panel that can use plain text, markdown, or (sanitized) HTML"
};
// Set and populate defaults
var _d = {
/** @scratch /panels/text/5
* === Parameters
*
* mode:: `html', `markdown' or `text'
*/
mode : "markdown", // 'html','markdown','text'
/** @scratch /panels/text/5
* content:: The content of your panel, written in the mark up specified in +mode+
*/
mode : "markdown", // 'html', 'markdown', 'text'
content : "",
style: {},
};
_.defaults($scope.panel,_d);
$scope.init = function() {
$scope.initPanel($scope);
$scope.initBaseController(this, $scope);
$scope.ready = false;
};
@@ -52,6 +47,11 @@ function (angular, app, _, require) {
$scope.$emit('render');
};
$scope.openEditor = function() {
//$scope.$emit('open-modal','paneleditor');
console.log('scope id', $scope.$id);
};
});
module.directive('markdown', function() {
src/app/partials/panelgeneral.html
+2 -7
View File
@@ -8,13 +8,8 @@
<label class="small">Span</label> <select class="input-mini" ng-model="panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
</div>
<div class="editor-option">
<label class="small">Editable</label><input type="checkbox" ng-model="panel.editable" ng-checked="panel.editable">
</div>
<div class="editor-option" ng-show="!_.isUndefined(panel.spyable)">
<label class="small">
Inspect <i class="icon-question-sign" bs-tooltip="'Allow query reveal via <i class=icon-eye-open></i>'"></i>
</label>
<input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
<label class="small">Hide title</label>
<input type="checkbox" ng-model="panel.hide_title" ng-checked="panel.hide_title">
</div>
</div>
</div>
src/css/bootstrap.dark.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/css/bootstrap.light.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/css/less/grafana.less
+4 -1
View File
@@ -158,8 +158,11 @@
// Graphite Graph Legends
.grafana-legend-container {
margin: 4px 15px;
margin: 0 15px;
text-align: left;
overflow: hidden;
position: relative;
top: 2px;
}
.grafana-legend-container .popover-content {