diff --git a/package.json b/package.json index e95428e903e..f7cd3e36d83 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "grunt-contrib-less": "~0.7.0", "grunt-contrib-requirejs": "~0.4.1", "grunt-contrib-uglify": "~0.2.4", + "grunt-contrib-watch": "^0.6.1", "grunt-filerev": "^0.2.1", "grunt-git-describe": "~2.3.2", "grunt-karma": "~0.8.3", diff --git a/src/app/app.js b/src/app/app.js index d41e54a5bde..973a74ab9e0 100644 --- a/src/app/app.js +++ b/src/app/app.js @@ -51,13 +51,13 @@ function (angular, $, _, appLevelRequire, config) { app.config(function ($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) { $routeProvider.otherwise({ redirectTo: config.default_route }); - // this is how the internet told me to dynamically add modules :/ register_fns.controller = $controllerProvider.register; register_fns.directive = $compileProvider.directive; register_fns.factory = $provide.factory; register_fns.service = $provide.service; register_fns.filter = $filterProvider.register; + }); var apps_deps = [ diff --git a/src/app/controllers/all.js b/src/app/controllers/all.js index 2857f6c33c6..d3de182589d 100644 --- a/src/app/controllers/all.js +++ b/src/app/controllers/all.js @@ -13,4 +13,5 @@ define([ './playlistCtrl', './inspectCtrl', './opentsdbTargetCtrl', + './console-ctrl', ], function () {}); diff --git a/src/app/controllers/console-ctrl.js b/src/app/controllers/console-ctrl.js new file mode 100644 index 00000000000..313a506545d --- /dev/null +++ b/src/app/controllers/console-ctrl.js @@ -0,0 +1,59 @@ +define([ + 'angular', + 'moment', +], +function (angular, moment) { + 'use strict'; + + var module = angular.module('grafana.controllers'); + var consoleEnabled = window.localStorage && window.localStorage.grafanaConsole === 'true'; + + if (!consoleEnabled) { + return; + } + + var events = []; + + function ConsoleEvent(type, title, data) { + this.type = type; + this.title = title; + this.data = data; + this.time = moment().format('hh:mm:ss'); + + if (data.config) { + this.title = data.config.method + ' ' + this.title; + this.elapsed = new Date().getTime() - data.config.$grafana_timestamp; + this.title = this.title + ' (' + this.elapsed + ' ms)'; + if (data.config.params && data.config.params.q) { + this.query = data.config.params.q; + } + } + } + + module.config(function($httpProvider) { + $httpProvider.interceptors.push(function() { + return { + 'request': function(config) { + if (config.inspect) { + config.$grafana_timestamp = new Date().getTime(); + } + return config; + }, + 'response': function(response) { + if (response.config.inspect) { + events.push(new ConsoleEvent(response.config.inspect.type, response.config.url, response)); + console.log(response); + } + return response; + } + }; + }); + }); + + module.controller('ConsoleCtrl', function($scope) { + + $scope.events = events; + + }); + +}); diff --git a/src/app/controllers/grafanaCtrl.js b/src/app/controllers/grafanaCtrl.js index 8254c02e9d9..eaf3dfd0422 100644 --- a/src/app/controllers/grafanaCtrl.js +++ b/src/app/controllers/grafanaCtrl.js @@ -18,6 +18,13 @@ function (angular, config, _) { $scope.grafana = { style: 'dark' }; + + $scope.consoleEnabled = (window.localStorage && window.localStorage.grafanaConsole === 'true'); + }; + + $scope.toggleConsole = function() { + $scope.consoleEnabled = !$scope.consoleEnabled; + window.localStorage.grafanaConsole = $scope.consoleEnabled ? 'true' : 'false'; }; $rootScope.onAppEvent = function(name, callback) { diff --git a/src/app/partials/console.html b/src/app/partials/console.html new file mode 100644 index 00000000000..4e43d3a1e7d --- /dev/null +++ b/src/app/partials/console.html @@ -0,0 +1,14 @@ +
+
+ +
+
+
+ + + + + +
+
+
diff --git a/src/app/partials/dashboard.html b/src/app/partials/dashboard.html index a42a1c67e19..cecb7842a7a 100644 --- a/src/app/partials/dashboard.html +++ b/src/app/partials/dashboard.html @@ -121,4 +121,7 @@ +
+
+ diff --git a/src/app/partials/dasheditor.html b/src/app/partials/dasheditor.html index f3e5ba74b34..d4d76c7897f 100644 --- a/src/app/partials/dasheditor.html +++ b/src/app/partials/dasheditor.html @@ -25,7 +25,7 @@ - +
@@ -98,6 +98,7 @@ Grafana version: {{grafanaVersion}} + | enable console disable console
diff --git a/src/app/services/graphite/graphiteDatasource.js b/src/app/services/graphite/graphiteDatasource.js index a43c47f1df9..e048484d28c 100644 --- a/src/app/services/graphite/graphiteDatasource.js +++ b/src/app/services/graphite/graphiteDatasource.js @@ -205,6 +205,7 @@ function (angular, _, $, config, kbn, moment) { } options.url = this.url + options.url; + options.inspect = { type: 'graphite' }; return $http(options); }; diff --git a/src/app/services/influxdb/influxdbDatasource.js b/src/app/services/influxdb/influxdbDatasource.js index 8844a9942c3..05008127cca 100644 --- a/src/app/services/influxdb/influxdbDatasource.js +++ b/src/app/services/influxdb/influxdbDatasource.js @@ -223,7 +223,8 @@ function (angular, _, kbn, InfluxSeries) { method: method, url: currentUrl + url, params: params, - data: data + data: data, + inspect: { type: 'influxdb' }, }; return $http(options).success(function (data) { diff --git a/src/css/less/console.less b/src/css/less/console.less new file mode 100644 index 00000000000..8a865626d24 --- /dev/null +++ b/src/css/less/console.less @@ -0,0 +1,48 @@ +.grafana-console { + position: fixed; + width: 100%; + bottom: 0px; + height: 300px; + background: @grafanaPanelBackground; + border-top: 1px solid @fullEditBorder; +} + +.grafana-console-header { + background: @fullEditTabsBackground; + border-top: @fullEditTabsBorder; + padding: 2px 5px; +} + +.grafana-console-item { + .icon-caret-right { + font-size: 14px; + color: @blue; + } + margin: 2px 0; +} + +.grafana-console-body { + overflow-y: auto; + padding-left: 3px; +} + +.grafana-console-type { + margin: 0 3px; + min-width: 75px; + display: inline-block; +} + +.grafana-console-time:before { + content: '('; + color: rgb(106, 253, 81); +} + +.grafana-console-time:after { + content: ')'; + color: rgb(106, 253, 81); +} + +.grafana-console-time { + color: rgb(162, 196, 253); +} + diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 752f08ffa2f..f334cbe07a6 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -1,5 +1,6 @@ @import "submenu.less"; @import "graph.less"; +@import "console.less"; @import "bootstrap-tagsinput.less"; .hide-controls { diff --git a/tasks/default_task.js b/tasks/default_task.js index e7902e72060..0bd46b9f5f9 100644 --- a/tasks/default_task.js +++ b/tasks/default_task.js @@ -1,5 +1,6 @@ // Lint and build CSS module.exports = function(grunt) { - grunt.registerTask('default', ['jscs', 'jshint', 'less:src', 'concat:cssDark', 'concat:cssLight']); + grunt.registerTask('css', ['less:src', 'concat:cssDark', 'concat:cssLight']); + grunt.registerTask('default', ['jscs', 'jshint', 'css']); grunt.registerTask('test', ['default', 'karma:test']); }; diff --git a/tasks/options/watch.js b/tasks/options/watch.js new file mode 100644 index 00000000000..c97609d9e53 --- /dev/null +++ b/tasks/options/watch.js @@ -0,0 +1,11 @@ +module.exports = function(config) { + return { + css: { + files: [ '<%= srcDir %>/css/**/*.less' ], + tasks: ['css'], + options: { + spawn: false + } + } + }; +};