From 75bec29dbcc21e4764f56756d1501430490a8a57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 28 Feb 2014 16:40:32 +0100 Subject: [PATCH] moving stuff out of graphite panel and into kibanaPanel --- src/app/directives/addPanel.js | 1 - src/app/directives/bootstrap-tagsinput.js | 48 +++++++ src/app/directives/kibanaPanel.js | 140 ++++++++++++++++-- src/app/panels/graphite/module.html | 7 - src/app/panels/graphite/module.js | 164 +++++----------------- src/app/panels/text/module.js | 2 +- 6 files changed, 212 insertions(+), 150 deletions(-) diff --git a/src/app/directives/addPanel.js b/src/app/directives/addPanel.js index 64b9c1927ee..4d7dee74901 100644 --- a/src/app/directives/addPanel.js +++ b/src/app/directives/addPanel.js @@ -32,5 +32,4 @@ function (angular, app, _) { } }; }); - }); \ No newline at end of file diff --git a/src/app/directives/bootstrap-tagsinput.js b/src/app/directives/bootstrap-tagsinput.js index a4ffc623a3b..356ed60b195 100644 --- a/src/app/directives/bootstrap-tagsinput.js +++ b/src/app/directives/bootstrap-tagsinput.js @@ -82,4 +82,52 @@ function (angular, $) { } }; }); + + angular + .module('kibana.directives') + .directive('gfDropdown', function ($parse, $compile, $timeout) { + + function buildTemplate(items, ul) { + if (!ul) { + ul = [ + '' + ]; + } + + angular.forEach(items, function (item, index) { + if (item.divider) { + return ul.splice(index + 1, 0, '
  • '); + } + + var li = '' + + '' + (item.text || '') + ''; + + if (item.submenu && item.submenu.length) { + li += buildTemplate(item.submenu).join('\n'); + } + + 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 diff --git a/src/app/directives/kibanaPanel.js b/src/app/directives/kibanaPanel.js index 719889b0b7f..664707aeebf 100644 --- a/src/app/directives/kibanaPanel.js +++ b/src/app/directives/kibanaPanel.js @@ -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 = '
    '; var content = '
    '; @@ -28,8 +29,8 @@ function (angular, $) { '' + '' + - '' + - '' + + '' + - '{{panel.title}}' + - ''+ - ''+ '\n'+ ''; @@ -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 }); + }; } }; }); diff --git a/src/app/panels/graphite/module.html b/src/app/panels/graphite/module.html index 6f2bdd1f759..4c56568b993 100644 --- a/src/app/panels/graphite/module.html +++ b/src/app/panels/graphite/module.html @@ -2,13 +2,6 @@ ng-init="init()" style="min-height:{{panel.height || row.height}}" ng-class="{'panel-fullscreen': fullscreen}"> -
    - - - View - |  - -
    diff --git a/src/app/panels/graphite/module.js b/src/app/panels/graphite/module.js index 91554c236da..2d5e45b2fac 100644 --- a/src/app/panels/graphite/module.js +++ b/src/app/panels/graphite/module.js @@ -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); - }; - }); diff --git a/src/app/panels/text/module.js b/src/app/panels/text/module.js index 39e16f55599..063b59e88df 100644 --- a/src/app/panels/text/module.js +++ b/src/app/panels/text/module.js @@ -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; };