Skip to content

N
nexpie-grafana-theme
Commit 75bec29d by Torkel Ödegaard
Options

moving stuff out of graphite panel and into kibanaPanel

parent 20bc1afe
Showing with 213 additions and 151 deletions
src/app/directives/addPanel.js
...@@ -32,5 +32,4 @@ function (angular, app, _) { ...@@ -32,5 +32,4 @@ function (angular, app, _) {
} }
}; };
}); });
}); });
\ No newline at end of file
src/app/directives/bootstrap-tagsinput.js
...@@ -82,4 +82,52 @@ function (angular, $) { ...@@ -82,4 +82,52 @@ function (angular, $) {
} }
}; };
}); });
angular
.module('kibana.directives')
.directive('gfDropdown', function ($parse, $compile, $timeout) {
function buildTemplate(items, ul) {
if (!ul) {
ul = [
'<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">',
'</ul>'
];
}
angular.forEach(items, function (item, index) {
if (item.divider) {
return ul.splice(index + 1, 0, '<li class="divider"></li>');
}
var li = '<li' + (item.submenu && item.submenu.length ? ' class="dropdown-submenu"' : '') + '>' +
'<a tabindex="-1" ng-href="' + (item.href || '') + '"' + (item.click ? '" ng-click="' + item.click + '"' : '') +
(item.target ? '" target="' + item.target + '"' : '') + (item.method ? '" data-method="' + item.method + '"' : '') +
(item.configModal ? ' config-modal="' + item.configModal + '"' : "") +
'>' + (item.text || '') + '</a>';
if (item.submenu && item.submenu.length) {
li += buildTemplate(item.submenu).join('\n');
}
li += '</li>';
ul.splice(index + 1, 0, li);
});
return ul;
}
return {
restrict: 'EA',
scope: true,
link: function postLink(scope, iElement, iAttrs) {
var getter = $parse(iAttrs.gfDropdown), items = getter(scope);
$timeout(function () {
var dropdown = angular.element(buildTemplate(items).join(''));
dropdown.insertAfter(iElement);
$compile(iElement.next('ul.dropdown-menu'))(scope);
});
iElement.addClass('dropdown-toggle').attr('data-toggle', 'dropdown');
}
};
});
}); });
\ No newline at end of file
src/app/directives/kibanaPanel.js
define([ define([
'angular', 'angular',
'jquery' 'jquery',
'underscore'
], ],
function (angular, $) { function (angular, $, _) {
'use strict'; 'use strict';
angular angular
.module('kibana.directives') .module('kibana.directives')
.directive('kibanaPanel', function($compile) { .directive('kibanaPanel', function($compile, $timeout, $rootScope) {
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>';
...@@ -28,8 +29,8 @@ function (angular, $) { ...@@ -28,8 +29,8 @@ function (angular, $) {
'<i class="icon-spinner icon-spin icon-large"></i>' + '<i class="icon-spinner icon-spin icon-large"></i>' +
'</span>' + '</span>' +
'<span ng-if="panelMeta.menuItems" class="dropdown">' + '<span class="dropdown">' +
'<span class="panel-text panel-title pointer" bs-dropdown="panelMeta.menuItems" tabindex="1" ' + '<span class="panel-text panel-title pointer" gf-dropdown="panelMeta.menu" tabindex="1" ' +
'data-drag=true data-jqyoui-options="kbnJqUiDraggableOptions"'+ 'data-drag=true data-jqyoui-options="kbnJqUiDraggableOptions"'+
' jqyoui-draggable="'+ ' jqyoui-draggable="'+
'{'+ '{'+
...@@ -44,11 +45,6 @@ function (angular, $) { ...@@ -44,11 +45,6 @@ function (angular, $) {
'</span>' + '</span>' +
'</span>'+ '</span>'+
'<span ng-if="!panelMeta.menuItems" config-modal="./app/partials/paneleditor.html" ' +
' class="panel-text panel-title pointer" >' +
'{{panel.title}}' +
'</span>'+
'</div>'+ '</div>'+
'</div>\n'+ '</div>\n'+
'</div>'; '</div>';
...@@ -100,9 +96,7 @@ function (angular, $) { ...@@ -100,9 +96,7 @@ function (angular, $) {
$controllers.first().prepend(panelHeader); $controllers.first().prepend(panelHeader);
$controllers.first().find('.panel-header').nextAll().wrapAll(content); $controllers.first().find('.panel-header').nextAll().wrapAll(content);
$scope.require([ $scope.require(['panels/' + nameAsPath + '/module'], function() {
'panels/'+nameAsPath+'/module'
], function() {
loadModule($module); loadModule($module);
}); });
} else { } else {
...@@ -110,6 +104,126 @@ function (angular, $) { ...@@ -110,6 +104,126 @@ 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.panelMeta.menu = _.where(menu, { condition: true });
};
} }
}; };
}); });
......
src/app/panels/graphite/module.html
...@@ -2,13 +2,6 @@ ...@@ -2,13 +2,6 @@
ng-init="init()" ng-init="init()"
style="min-height:{{panel.height || row.height}}" style="min-height:{{panel.height || row.height}}"
ng-class="{'panel-fullscreen': fullscreen}"> ng-class="{'panel-fullscreen': fullscreen}">
<div>
<span ng-show='panel.options'>
<a class="link underline small" ng-show='panel.options' ng-click="options=!options">
<i ng-show="!options" class="icon-caret-right"></i><i ng-show="options" class="icon-caret-down"></i> View
</a> |&nbsp
</span>
</div>
<div style="position: relative"> <div style="position: relative">
......
src/app/panels/graphite/module.js
...@@ -39,7 +39,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -39,7 +39,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
$scope.panelMeta = { $scope.panelMeta = {
modals : [], modals : [],
editorTabs: [], editorTabs: [],
fullEditorTabs : [ fullEditorTabs : [
{ {
title: 'General', title: 'General',
...@@ -57,30 +56,9 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -57,30 +56,9 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
src:'app/panels/graphite/styleEditor.html' src:'app/panels/graphite/styleEditor.html'
} }
], ],
fullscreenEdit: true,
menuItems: [ fullscreenView: true,
{ text: 'Edit', click: 'openConfigureModal()' }, description : "Graphing"
{ text: 'Fullscreen', click: 'toggleFullscreen()' },
{ text: 'Duplicate', click: 'duplicatePanel(panel)' },
{ 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)' },
]},
{ text: 'Remove', click: 'remove_panel_from_row(row, panel)' }
],
status : "Unstable",
description : "Graphs panel"
}; };
// Set and populate defaults // Set and populate defaults
...@@ -220,10 +198,10 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -220,10 +198,10 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
} }
$scope.init = function() { $scope.init = function() {
// Hide view options by default $scope.initPanel($scope);
$scope.fullscreen = false; $scope.fullscreen = false;
$scope.options = false; $scope.editor = { index: 1 };
$scope.editor = {index: 1};
$scope.editorTabs = _.pluck($scope.panelMeta.fullEditorTabs,'title'); $scope.editorTabs = _.pluck($scope.panelMeta.fullEditorTabs,'title');
$scope.hiddenSeries = {}; $scope.hiddenSeries = {};
...@@ -239,15 +217,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -239,15 +217,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
$scope.get_data(); $scope.get_data();
}; };
$scope.remove_panel_from_row = function(row, panel) {
if ($scope.fullscreen) {
$rootScope.$emit('panel-fullscreen-exit');
}
else {
$scope.$parent.remove_panel_from_row(row, panel);
}
};
$scope.removeTarget = function (target) { $scope.removeTarget = function (target) {
$scope.panel.targets = _.without($scope.panel.targets, target); $scope.panel.targets = _.without($scope.panel.targets, target);
$scope.get_data(); $scope.get_data();
...@@ -284,13 +253,13 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -284,13 +253,13 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
$scope.annotationsPromise = annotationsSrv.getAnnotations($scope.rangeUnparsed); $scope.annotationsPromise = annotationsSrv.getAnnotations($scope.rangeUnparsed);
return $scope.datasource.query(graphiteQuery) return $scope.datasource.query(graphiteQuery)
.then($scope.receiveGraphiteData) .then($scope.dataHandler)
.then(null, function(err) { .then(null, function(err) {
$scope.panel.error = err.message || "Graphite HTTP Request Error"; $scope.panel.error = err.message || "Graphite HTTP Request Error";
}); });
}; };
$scope.receiveGraphiteData = function(results) { $scope.dataHandler = function(results) {
$scope.panelMeta.loading = false; $scope.panelMeta.loading = false;
$scope.legend = []; $scope.legend = [];
...@@ -300,44 +269,11 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -300,44 +269,11 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
return; return;
} }
results = results.data;
var data = [];
$scope.datapointsWarning = false; $scope.datapointsWarning = false;
$scope.datapointsCount = 0; $scope.datapointsCount = 0;
$scope.datapointsOutside = false; $scope.datapointsOutside = false;
_.each(results, function(targetData) { var data = _.map(results.data, $scope.seriesHandler);
var datapoints = targetData.datapoints;
var alias = targetData.target;
var color = $scope.panel.aliasColors[alias] || $scope.colors[data.length];
var yaxis = $scope.panel.aliasYAxis[alias] || 1;
var seriesInfo = {
alias: alias,
color: color,
enable: true,
yaxis: yaxis
};
var series = new timeSeries.ZeroFilled({
datapoints: datapoints,
info: seriesInfo,
});
if (datapoints && datapoints.length > 0) {
var last = moment.utc(datapoints[datapoints.length - 1][1] * 1000);
var from = moment.utc($scope.range.from);
if (last - from < -1000) {
$scope.datapointsOutside = true;
}
}
$scope.datapointsCount += datapoints.length;
$scope.legend.push(seriesInfo);
data.push(series);
});
$scope.datapointsWarning = $scope.datapointsCount || !$scope.datapointsOutside; $scope.datapointsWarning = $scope.datapointsCount || !$scope.datapointsOutside;
...@@ -350,53 +286,39 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -350,53 +286,39 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
}); });
}; };
$scope.add_target = function() { $scope.seriesHandler = function(seriesData, index) {
$scope.panel.targets.push({target: ''}); var datapoints = seriesData.datapoints;
}; var alias = seriesData.target;
var color = $scope.panel.aliasColors[alias] || $scope.colors[index];
var yaxis = $scope.panel.aliasYAxis[alias] || 1;
var seriesInfo = {
alias: alias,
color: color,
enable: true,
yaxis: yaxis
};
$scope.enterFullscreenMode = function(options) { var series = new timeSeries.ZeroFilled({
var docHeight = $(window).height(); datapoints: datapoints,
var editHeight = Math.floor(docHeight * 0.3); info: seriesInfo,
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); if (datapoints && datapoints.length > 0) {
var last = moment.utc(datapoints[datapoints.length - 1][1] * 1000);
var from = moment.utc($scope.range.from);
if (last - from < -1000) {
$scope.datapointsOutside = true;
}
}
$scope.fullscreen = true; $scope.datapointsCount += datapoints.length;
$rootScope.$emit('panel-fullscreen-enter');
$timeout($scope.render); return series;
}; };
$scope.openConfigureModal = function() { $scope.add_target = function() {
if ($scope.editMode) { $scope.panel.targets.push({target: ''});
$rootScope.$emit('panel-fullscreen-exit');
return;
}
$scope.enterFullscreenMode({edit: true});
}; };
$scope.otherPanelInFullscreenMode = function() { $scope.otherPanelInFullscreenMode = function() {
...@@ -413,15 +335,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -413,15 +335,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
$scope.render(); $scope.render();
}; };
$scope.toggleFullscreen = function() {
if ($scope.fullscreen && !$scope.editMode) {
$rootScope.$emit('panel-fullscreen-exit');
return;
}
$scope.enterFullscreenMode({edit: false});
};
$scope.toggleSeries = function(info) { $scope.toggleSeries = function(info) {
if ($scope.hiddenSeries[info.alias]) { if ($scope.hiddenSeries[info.alias]) {
delete $scope.hiddenSeries[info.alias]; delete $scope.hiddenSeries[info.alias];
...@@ -444,11 +357,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -444,11 +357,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
$scope.render(); $scope.render();
}; };
$scope.updateColumnSpan = function(span) {
$scope.panel.span = span;
$timeout($scope.render);
};
}); });
......
src/app/panels/text/module.js
...@@ -24,7 +24,6 @@ function (angular, app, _, require) { ...@@ -24,7 +24,6 @@ function (angular, app, _, require) {
module.controller('text', function($scope) { module.controller('text', function($scope) {
$scope.panelMeta = { $scope.panelMeta = {
status : "Stable",
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"
}; };
...@@ -45,6 +44,7 @@ function (angular, app, _, require) { ...@@ -45,6 +44,7 @@ function (angular, app, _, require) {
_.defaults($scope.panel,_d); _.defaults($scope.panel,_d);
$scope.init = function() { $scope.init = function() {
$scope.initPanel($scope);
$scope.ready = false; $scope.ready = false;
}; };
......
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