apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source
pull/299/head
Torkel Ödegaard 12 years ago
parent 5cd73cea4b
commit 6f114b17d6
10 changed files with 166 additions and 147 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 130
      src/app/controllers/panelBaseCtrl.js
  2. 9
      src/app/directives/grafanaGraph.js
  3. 132
      src/app/directives/kibanaPanel.js
  4. 2
      src/app/panels/graphite/module.js
  5. 2
      src/app/panels/text/module.html
  6. 20
      src/app/panels/text/module.js
  7. 9
      src/app/partials/panelgeneral.html
  8. 2
      src/css/bootstrap.dark.min.css
  9. 2
      src/css/bootstrap.light.min.css
  10. 5
      src/css/less/grafana.less

130
src/app/controllers/panelBaseCtrl.js
Unescape 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;
});

9
src/app/directives/grafanaGraph.js
Unescape 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;
}

132
src/app/directives/kibanaPanel.js
Unescape 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 });
};
}
};
});

2
src/app/panels/graphite/module.js
Unescape 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 };

2
src/app/panels/text/module.html
Unescape 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}}

20
src/app/panels/text/module.js
Unescape 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() {

9
src/app/partials/panelgeneral.html
Unescape 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>

2
src/css/bootstrap.dark.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
src/css/bootstrap.light.min.css vendored
View File

File diff suppressed because one or more lines are too long

5
src/css/less/grafana.less
Unescape 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 {

Write Preview
Loading…
Cancel
Save