From 79404e754e35f0ca9977022d40f6724e4339780b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 7 Jun 2014 19:43:15 +0200 Subject: [PATCH 01/35] started on some big refactoring of how the app starts and how dashboard object is loaded, created. This should make it easier to add other dashboard storage backends and other views --- src/app/app.js | 22 ++--- src/app/controllers/dash.js | 12 +-- src/app/controllers/dashLoader.js | 15 +-- src/app/directives/bodyClass.js | 16 ++- src/app/directives/grafanaGraph.js | 7 +- src/app/panels/graph/module.js | 5 +- src/app/partials/dashboard.html | 16 ++- src/app/routes/dashboard-loader.js | 70 +++++++++++++ src/app/services/annotationsSrv.js | 13 +-- src/app/services/dashboard.js | 99 ++++++++++++++----- .../dashboard/dashboardKeyBindings.js | 2 +- src/app/services/filterSrv.js | 10 +- .../services/graphite/graphiteDatasource.js | 10 +- src/index.html | 11 +-- 14 files changed, 207 insertions(+), 101 deletions(-) create mode 100644 src/app/routes/dashboard-loader.js diff --git a/src/app/app.js b/src/app/app.js index 3e2b01e1475..493b8a2a04c 100644 --- a/src/app/app.js +++ b/src/app/app.js @@ -6,15 +6,16 @@ define([ 'jquery', 'underscore', 'require', + 'config', 'elasticjs', 'bootstrap', 'angular-sanitize', 'angular-strap', 'angular-dragdrop', 'extend-jquery', - 'bindonce' + 'bindonce', ], -function (angular, $, _, appLevelRequire) { +function (angular, $, _, appLevelRequire, config) { "use strict"; @@ -67,19 +68,7 @@ function (angular, $, _, appLevelRequire) { app.config(function ($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) { - $routeProvider - .when('/dashboard', { - templateUrl: 'app/partials/dashboard.html', - }) - .when('/dashboard/:kbnType/:kbnId', { - templateUrl: 'app/partials/dashboard.html', - }) - .when('/dashboard/:kbnType/:kbnId/:params', { - templateUrl: 'app/partials/dashboard.html' - }) - .otherwise({ - redirectTo: 'dashboard' - }); + $routeProvider.otherwise({ redirectTo: config.default_route }); // this is how the internet told me to dynamically add modules :/ register_fns.controller = $controllerProvider.register; @@ -98,7 +87,7 @@ function (angular, $, _, appLevelRequire) { 'pasvaz.bindonce' ]; - var module_types = ['controllers', 'directives', 'factories', 'services', 'services.dashboard', 'filters']; + var module_types = ['controllers', 'directives', 'factories', 'services', 'filters', 'routes']; _.each(module_types, function (type) { var module_name = 'kibana.'+type; @@ -120,6 +109,7 @@ function (angular, $, _, appLevelRequire) { 'directives/all', 'filters/all', 'components/partials', + 'routes/dashboard-loader', ], function () { // bootstrap the app diff --git a/src/app/controllers/dash.js b/src/app/controllers/dash.js index b4113a507ac..eb26c5fe17b 100644 --- a/src/app/controllers/dash.js +++ b/src/app/controllers/dash.js @@ -31,11 +31,9 @@ function (angular, $, config, _) { var module = angular.module('kibana.controllers'); module.controller('DashCtrl', function( - $scope, $rootScope, $timeout, ejsResource, dashboard, filterSrv, dashboardKeybindings, + $scope, $rootScope, $timeout, ejsResource, filterSrv, dashboardKeybindings, alertSrv, panelMove, keyboardManager, grafanaVersion) { - $scope.requiredElasticSearchVersion = ">=0.90.3"; - $scope.editor = { index: 0 }; @@ -54,16 +52,8 @@ function (angular, $, config, _) { // Make stuff, including underscore.js available to views $scope._ = _; - $scope.dashboard = dashboard; $scope.dashAlerts = alertSrv; - $scope.filter = filterSrv; - $scope.filter.init(dashboard.current); - - $rootScope.$on("dashboard-loaded", function(event, dashboard) { - $scope.filter.init(dashboard); - }); - // Clear existing alerts alertSrv.clearAll(); diff --git a/src/app/controllers/dashLoader.js b/src/app/controllers/dashLoader.js index d660e6d475a..b4c5045a682 100644 --- a/src/app/controllers/dashLoader.js +++ b/src/app/controllers/dashLoader.js @@ -8,8 +8,7 @@ function (angular, _, moment) { var module = angular.module('kibana.controllers'); - module.controller('dashLoader', function($scope, $rootScope, $http, dashboard, alertSrv, $location, playlistSrv) { - $scope.loader = dashboard.current.loader; + module.controller('dashLoader', function($scope, $rootScope, $http, alertSrv, $location, playlistSrv) { $scope.init = function() { $scope.gist_pattern = /(^\d{5,}$)|(^[a-z0-9]{10,}$)|(gist.github.com(\/*.*)\/[a-z0-9]{5,}\/*$)/; @@ -23,6 +22,10 @@ function (angular, _, moment) { $rootScope.$on('zoom-out', function() { $scope.zoom(2); }); + + $rootScope.$on('dashboard-loaded', function(event, dashboard) { + $scope.loader = dashboard.loader; + }); }; $scope.exitFullscreen = function() { @@ -30,11 +33,11 @@ function (angular, _, moment) { }; $scope.showDropdown = function(type) { - if(_.isUndefined(dashboard.current.loader)) { + if(_.isUndefined($scope.loader)) { return true; } - var _l = dashboard.current.loader; + var _l = $scope.loader; if(type === 'load') { return (_l.load_elasticsearch || _l.load_gist || _l.load_local); } @@ -129,7 +132,7 @@ function (angular, _, moment) { // function $scope.zoom // factor :: Zoom factor, so 0.5 = cuts timespan in half, 2 doubles timespan $scope.zoom = function(factor) { - var _range = this.filter.timeRange(); + var _range = $scope.filter.timeRange(); var _timespan = (_range.to.valueOf() - _range.from.valueOf()); var _center = _range.to.valueOf() - _timespan/2; @@ -143,7 +146,7 @@ function (angular, _, moment) { _to = Date.now(); } - this.filter.setTime({ + $scope.filter.setTime({ from:moment.utc(_from).toDate(), to:moment.utc(_to).toDate(), }); diff --git a/src/app/directives/bodyClass.js b/src/app/directives/bodyClass.js index 6cd9bab1346..d26ae71feeb 100644 --- a/src/app/directives/bodyClass.js +++ b/src/app/directives/bodyClass.js @@ -15,8 +15,12 @@ function (angular, app, _) { var lastPulldownVal; var lastHideControlsVal; - $scope.$watch('dashboard.current.pulldowns', function() { - var panel = _.find($scope.dashboard.current.pulldowns, function(pulldown) { return pulldown.enable; }); + $scope.$watch('dashboard.pulldowns', function() { + if (!$scope.dashboard) { + return; + } + + var panel = _.find($scope.dashboard.pulldowns, function(pulldown) { return pulldown.enable; }); var panelEnabled = panel ? panel.enable : false; if (lastPulldownVal !== panelEnabled) { elem.toggleClass('submenu-controls-visible', panelEnabled); @@ -24,8 +28,12 @@ function (angular, app, _) { } }, true); - $scope.$watch('dashboard.current.hideControls', function() { - var hideControls = $scope.dashboard.current.hideControls || $scope.playlist_active; + $scope.$watch('dashboard.hideControls', function() { + if (!$scope.dashboard) { + return; + } + + var hideControls = $scope.dashboard.hideControls || $scope.playlist_active; if (lastHideControlsVal !== hideControls) { elem.toggleClass('hide-controls', hideControls); diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index 95e2848a8b1..bb9291a7694 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -10,13 +10,14 @@ function (angular, $, kbn, moment, _) { var module = angular.module('kibana.directives'); - module.directive('grafanaGraph', function($rootScope, dashboard) { + module.directive('grafanaGraph', function($rootScope) { return { restrict: 'A', template: '
', link: function(scope, elem) { var data, plot, annotations; var hiddenData = {}; + var dashboard = scope.dashboard; scope.$on('refresh',function() { if (scope.otherPanelInFullscreenMode()) { return; } @@ -172,7 +173,7 @@ function (angular, $, kbn, moment, _) { var max = _.isUndefined(scope.range.to) ? null : scope.range.to.getTime(); options.xaxis = { - timezone: dashboard.current.timezone, + timezone: dashboard.timezone, show: scope.panel['x-axis'], mode: "time", min: min, @@ -329,7 +330,7 @@ function (angular, $, kbn, moment, _) { value = kbn.getFormatFunction(format, 2)(value); - timestamp = dashboard.current.timezone === 'browser' ? + timestamp = dashboard.timezone === 'browser' ? moment(item.datapoint[0]).format('YYYY-MM-DD HH:mm:ss') : moment.utc(item.datapoint[0]).format('YYYY-MM-DD HH:mm:ss'); $tooltip diff --git a/src/app/panels/graph/module.js b/src/app/panels/graph/module.js index 0533c97b98d..18414f6326b 100644 --- a/src/app/panels/graph/module.js +++ b/src/app/panels/graph/module.js @@ -259,10 +259,11 @@ function (angular, app, $, _, kbn, moment, timeSeries) { targets: $scope.panel.targets, format: $scope.panel.renderer === 'png' ? 'png' : 'json', maxDataPoints: $scope.resolution, - datasource: $scope.panel.datasource + datasource: $scope.panel.datasource, + timezone: $scope.dashboard.timezone }; - $scope.annotationsPromise = annotationsSrv.getAnnotations($scope.filter, $scope.rangeUnparsed); + $scope.annotationsPromise = annotationsSrv.getAnnotations($scope.filter, $scope.rangeUnparsed, $scope.dashboard); return $scope.datasource.query($scope.filter, graphiteQuery) .then($scope.dataHandler) diff --git a/src/app/partials/dashboard.html b/src/app/partials/dashboard.html index 0c4976148a7..a1b1e3b6b3b 100644 --- a/src/app/partials/dashboard.html +++ b/src/app/partials/dashboard.html @@ -1,5 +1,15 @@ + +