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

moving stuff out of graphite panel and into kibanaPanel

Browse Source
pull/162/head
Torkel Ödegaard 12 years ago
parent 20bc1afec8
commit 75bec29dbc
6 changed files with 212 additions and 150 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. 1
      src/app/directives/addPanel.js
  2. 48
      src/app/directives/bootstrap-tagsinput.js
  3. 140
      src/app/directives/kibanaPanel.js
  4. 7
      src/app/panels/graphite/module.html
  5. 164
      src/app/panels/graphite/module.js
  6. 2
      src/app/panels/text/module.js

1
src/app/directives/addPanel.js
Unescape View File

@ -32,5 +32,4 @@ function (angular, app, _) {
}
};
});
});

48
src/app/directives/bootstrap-tagsinput.js vendored
Unescape View File

@ -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');
}
};
});
});

140
src/app/directives/kibanaPanel.js
Unescape View File

@ -1,13 +1,14 @@
define([
'angular',
'jquery'
'jquery',
'underscore'
],
function (angular, $) {
function (angular, $, _) {
'use strict';
angular
.module('kibana.directives')
.directive('kibanaPanel', function($compile) {
.directive('kibanaPanel', function($compile, $timeout, $rootScope) {
var container = '<div class="panel-container"></div>';
var content = '<div class="panel-content"></div>';
@ -28,8 +29,8 @@ function (angular, $) {
'<i class="icon-spinner icon-spin icon-large"></i>' +
'</span>' +
'<span ng-if="panelMeta.menuItems" class="dropdown">' +
'<span class="panel-text panel-title pointer" bs-dropdown="panelMeta.menuItems" tabindex="1" ' +
'<span class="dropdown">' +
'<span class="panel-text panel-title pointer" gf-dropdown="panelMeta.menu" tabindex="1" ' +
'data-drag=true data-jqyoui-options="kbnJqUiDraggableOptions"'+
' jqyoui-draggable="'+
'{'+
@ -44,11 +45,6 @@ function (angular, $) {
'</span>' +
'</span>'+
'<span ng-if="!panelMeta.menuItems" config-modal="./app/partials/paneleditor.html" ' +
' class="panel-text panel-title pointer" >' +
'{{panel.title}}' +
'</span>'+
'</div>'+
'</div>\n'+
'</div>';
@ -100,9 +96,7 @@ function (angular, $) {
$controllers.first().prepend(panelHeader);
$controllers.first().find('.panel-header').nextAll().wrapAll(content);
$scope.require([
'panels/'+nameAsPath+'/module'
], function() {
$scope.require(['panels/' + nameAsPath + '/module'], function() {
loadModule($module);
});
} else {
@ -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 });
};
}
};
});

7
src/app/panels/graphite/module.html
Unescape View File

@ -2,13 +2,6 @@
ng-init="init()"
style="min-height:{{panel.height || row.height}}"
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">

164
src/app/panels/graphite/module.js
Unescape View File

@ -39,7 +39,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
$scope.panelMeta = {
modals : [],
editorTabs: [],
fullEditorTabs : [
{
title: 'General',
@ -57,30 +56,9 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
src:'app/panels/graphite/styleEditor.html'
}
],
menuItems: [
{ text: 'Edit', click: 'openConfigureModal()' },
{ 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"
fullscreenEdit: true,
fullscreenView: true,
description : "Graphing"
};
// Set and populate defaults
@ -220,10 +198,10 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
}
$scope.init = function() {
// Hide view options by default
$scope.initPanel($scope);
$scope.fullscreen = false;
$scope.options = false;
$scope.editor = {index: 1};
$scope.editor = { index: 1 };
$scope.editorTabs = _.pluck($scope.panelMeta.fullEditorTabs,'title');
$scope.hiddenSeries = {};
@ -239,15 +217,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
$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.panel.targets = _.without($scope.panel.targets, target);
$scope.get_data();
@ -284,13 +253,13 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
$scope.annotationsPromise = annotationsSrv.getAnnotations($scope.rangeUnparsed);
return $scope.datasource.query(graphiteQuery)
.then($scope.receiveGraphiteData)
.then($scope.dataHandler)
.then(null, function(err) {
$scope.panel.error = err.message || "Graphite HTTP Request Error";
});
};
$scope.receiveGraphiteData = function(results) {
$scope.dataHandler = function(results) {
$scope.panelMeta.loading = false;
$scope.legend = [];
@ -300,44 +269,11 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
return;
}
results = results.data;
var data = [];
$scope.datapointsWarning = false;
$scope.datapointsCount = 0;
$scope.datapointsOutside = false;
_.each(results, function(targetData) {
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);
});
var data = _.map(results.data, $scope.seriesHandler);
$scope.datapointsWarning = $scope.datapointsCount || !$scope.datapointsOutside;
@ -350,53 +286,39 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
});
};
$scope.add_target = function() {
$scope.panel.targets.push({target: ''});
};
$scope.seriesHandler = function(seriesData, index) {
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 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');
}
});
});
}
var series = new timeSeries.ZeroFilled({
datapoints: datapoints,
info: seriesInfo,
});
$(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;
$rootScope.$emit('panel-fullscreen-enter');
$scope.datapointsCount += datapoints.length;
$timeout($scope.render);
return series;
};
$scope.openConfigureModal = function() {
if ($scope.editMode) {
$rootScope.$emit('panel-fullscreen-exit');
return;
}
$scope.enterFullscreenMode({edit: true});
$scope.add_target = function() {
$scope.panel.targets.push({target: ''});
};
$scope.otherPanelInFullscreenMode = function() {
@ -413,15 +335,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
$scope.render();
};
$scope.toggleFullscreen = function() {
if ($scope.fullscreen && !$scope.editMode) {
$rootScope.$emit('panel-fullscreen-exit');
return;
}
$scope.enterFullscreenMode({edit: false});
};
$scope.toggleSeries = function(info) {
if ($scope.hiddenSeries[info.alias]) {
delete $scope.hiddenSeries[info.alias];
@ -444,11 +357,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
$scope.render();
};
$scope.updateColumnSpan = function(span) {
$scope.panel.span = span;
$timeout($scope.render);
};
});

2
src/app/panels/text/module.js
Unescape View File

@ -24,7 +24,6 @@ function (angular, app, _, require) {
module.controller('text', function($scope) {
$scope.panelMeta = {
status : "Stable",
description : "A static text panel that can use plain text, markdown, or (sanitized) HTML"
};
@ -45,6 +44,7 @@ function (angular, app, _, require) {
_.defaults($scope.panel,_d);
$scope.init = function() {
$scope.initPanel($scope);
$scope.ready = false;
};

Write Preview
Loading…
Cancel
Save