Skip to content

N
nexpie-grafana-theme
Commit 6f114b17 by Torkel Ödegaard
Options

Closes ##278, improvements in row height matching, refactorings of base kibana… 

Closes ##278, improvements in row height matching, refactorings of base kibana panel features into PanelBaseCtrl
parent 5cd73cea
Showing with 166 additions and 145 deletions
src/app/controllers/panelBaseCtrl.js 0 → 100644
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;
});
\ No newline at end of file
src/app/directives/grafanaGraph.js
...@@ -46,10 +46,14 @@ function (angular, $, kbn, moment, _) { ...@@ -46,10 +46,14 @@ function (angular, $, kbn, moment, _) {
function setElementHeight() { function setElementHeight() {
try { try {
var height = scope.height || scope.panel.height || scope.row.height; 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) { if (scope.panel.legend.show) {
height = height - 35; // subtract one line legend height = height - 21; // subtract one line legend
} }
elem.css('height', height + 'px'); elem.css('height', height + 'px');
...@@ -64,6 +68,7 @@ function (angular, $, kbn, moment, _) { ...@@ -64,6 +68,7 @@ function (angular, $, kbn, moment, _) {
if (!data) { if (!data) {
return true; return true;
} }
if ($rootScope.fullscreen && !scope.fullscreen) { if ($rootScope.fullscreen && !scope.fullscreen) {
return true; return true;
} }
......
src/app/directives/kibanaPanel.js
define([ define([
'angular', 'angular',
'jquery', 'jquery',
'underscore' 'underscore',
'../controllers/PanelBaseCtrl'
], ],
function (angular, $, _) { function (angular, $, _, PanelBaseCtrl) {
'use strict'; 'use strict';
angular angular
.module('kibana.directives') .module('kibana.directives')
.directive('kibanaPanel', function($compile, $timeout, $rootScope) { .directive('kibanaPanel', function($compile, $timeout, $rootScope, $injector) {
var container = '<div class="panel-container"></div>'; var container = '<div class="panel-container"></div>';
var content = '<div class="panel-content"></div>'; var content = '<div class="panel-content"></div>';
...@@ -23,7 +24,7 @@ function (angular, $, _) { ...@@ -23,7 +24,7 @@ function (angular, $, _) {
'</div>' + '</div>' +
'</div>\n' + '</div>\n' +
'<div class="row-fluid panel-extra">' + '<div class="row-fluid panel-extra" ng-hide="panel.hide_title">' +
'<div class="panel-extra-container">' + '<div class="panel-extra-container">' +
'<span class="panel-loading" ng-show="panelMeta.loading == true">' + '<span class="panel-loading" ng-show="panelMeta.loading == true">' +
...@@ -79,6 +80,10 @@ function (angular, $, _) { ...@@ -79,6 +80,10 @@ function (angular, $, _) {
elem.remove(); elem.remove();
}); });
newScope.initBaseController = function(self, scope) {
$injector.invoke(PanelBaseCtrl, self, { $scope: scope });
};
$scope.$watch(attr.type, function (name) { $scope.$watch(attr.type, function (name) {
elem.addClass("ng-cloak"); elem.addClass("ng-cloak");
// load the panels module file, then render it in the dom. // load the panels module file, then render it in the dom.
...@@ -107,125 +112,6 @@ function (angular, $, _) { ...@@ -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
...@@ -199,7 +199,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -199,7 +199,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
} }
$scope.init = function() { $scope.init = function() {
$scope.initPanel($scope); $scope.initBaseController(this, $scope);
$scope.fullscreen = false; $scope.fullscreen = false;
$scope.editor = { index: 1 }; $scope.editor = { index: 1 };
......
src/app/panels/text/module.html
<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>--> <!--<p ng-style="panel.style" ng-bind-html-unsafe="panel.content | striphtml | newlines"></p>-->
<markdown ng-show="ready && panel.mode == 'markdown'"> <markdown ng-show="ready && panel.mode == 'markdown'">
{{panel.content}} {{panel.content}}
......
src/app/panels/text/module.js
...@@ -23,28 +23,23 @@ function (angular, app, _, require) { ...@@ -23,28 +23,23 @@ function (angular, app, _, require) {
app.useModule(module); app.useModule(module);
module.controller('text', function($scope) { module.controller('text', function($scope) {
$scope.panelMeta = { $scope.panelMeta = {
description : "A static text panel that can use plain text, markdown, or (sanitized) HTML" description : "A static text panel that can use plain text, markdown, or (sanitized) HTML"
}; };
// Set and populate defaults // Set and populate defaults
var _d = { var _d = {
/** @scratch /panels/text/5 mode : "markdown", // 'html', 'markdown', 'text'
* === 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+
*/
content : "", content : "",
style: {}, style: {},
}; };
_.defaults($scope.panel,_d); _.defaults($scope.panel,_d);
$scope.init = function() { $scope.init = function() {
$scope.initPanel($scope); $scope.initBaseController(this, $scope);
$scope.ready = false; $scope.ready = false;
}; };
...@@ -52,6 +47,11 @@ function (angular, app, _, require) { ...@@ -52,6 +47,11 @@ function (angular, app, _, require) {
$scope.$emit('render'); $scope.$emit('render');
}; };
$scope.openEditor = function() {
//$scope.$emit('open-modal','paneleditor');
console.log('scope id', $scope.$id);
};
}); });
module.directive('markdown', function() { module.directive('markdown', function() {
......
src/app/partials/panelgeneral.html
...@@ -8,13 +8,8 @@ ...@@ -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> <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>
<div class="editor-option"> <div class="editor-option">
<label class="small">Editable</label><input type="checkbox" ng-model="panel.editable" ng-checked="panel.editable"> <label class="small">Hide title</label>
</div> <input type="checkbox" ng-model="panel.hide_title" ng-checked="panel.hide_title">
<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">
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
src/css/bootstrap.dark.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/css/bootstrap.light.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/css/less/grafana.less
...@@ -158,8 +158,11 @@ ...@@ -158,8 +158,11 @@
// Graphite Graph Legends // Graphite Graph Legends
.grafana-legend-container { .grafana-legend-container {
margin: 4px 15px; margin: 0 15px;
text-align: left; text-align: left;
overflow: hidden;
position: relative;
top: 2px;
} }
.grafana-legend-container .popover-content { .grafana-legend-container .popover-content {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment