diff --git a/src/app/controllers/console-ctrl.js b/src/app/controllers/console-ctrl.js index 313a506545d..e2194b8eca9 100644 --- a/src/app/controllers/console-ctrl.js +++ b/src/app/controllers/console-ctrl.js @@ -1,8 +1,9 @@ define([ 'angular', + 'lodash', 'moment', ], -function (angular, moment) { +function (angular, _, moment) { 'use strict'; var module = angular.module('grafana.controllers'); @@ -14,6 +15,20 @@ function (angular, moment) { var events = []; + var oldLog = console.log; + console.log = function (message) { + try { + if (_.isObject(message)) { + message = angular.toJson(message); + if (message.length > 50) { + message = message.substring(0, 50); + } + } + events.push(new ConsoleEvent('log', message, {})); + oldLog.apply(console, arguments); + } catch (e) { } + }; + function ConsoleEvent(type, title, data) { this.type = type; this.title = title; @@ -21,17 +36,54 @@ function (angular, moment) { 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)'; + this.method = data.config.method; + this.elapsed = (new Date().getTime() - data.config.$grafana_timestamp) + ' ms'; if (data.config.params && data.config.params.q) { - this.query = data.config.params.q; + this.field2 = data.config.params.q; + } + if (_.isString(data.config.data)) { + this.field2 = data.config.data; + } + if (data.status !== 200) { + this.error = true; + this.field3 = data.data; + } + + if (_.isArray(data.data)) { + this.extractTimeseriesInfo(data.data); } } } - module.config(function($httpProvider) { - $httpProvider.interceptors.push(function() { + ConsoleEvent.prototype.extractTimeseriesInfo = function(series) { + if (series.length === 0) { + return; + } + + var points = 0; + var ok = false; + + if (series[0].datapoints) { + points = _.reduce(series, function(memo, val) { + return memo + val.datapoints.length; + }, 0); + ok = true; + } + if (series[0].columns) { + points = _.reduce(series, function(memo, val) { + return memo + val.points.length; + }, 0); + ok = true; + } + + if (ok) { + this.field1 = '(' + series.length + ' series'; + this.field1 += ', ' + points + ' points)'; + } + }; + + module.config(function($provide, $httpProvider) { + $provide.factory('mupp', function($q) { return { 'request': function(config) { if (config.inspect) { @@ -42,12 +94,22 @@ function (angular, moment) { 'response': function(response) { if (response.config.inspect) { events.push(new ConsoleEvent(response.config.inspect.type, response.config.url, response)); - console.log(response); } return response; + }, + 'requestError': function(rejection) { + console.log('requestError', rejection); + return $q.reject(rejection); + }, + 'responseError': function (rejection) { + var inspect = rejection.config.inspect || { type: 'error' }; + events.push(new ConsoleEvent(inspect.type, rejection.config.url, rejection)); + return $q.reject(rejection); } }; }); + + $httpProvider.interceptors.push('mupp'); }); module.controller('ConsoleCtrl', function($scope) { diff --git a/src/app/partials/console.html b/src/app/partials/console.html index 4e43d3a1e7d..97a4d41197d 100644 --- a/src/app/partials/console.html +++ b/src/app/partials/console.html @@ -3,12 +3,17 @@
-
- - +
+ + - + + + + + +
diff --git a/src/css/less/console.less b/src/css/less/console.less index 8a865626d24..166314d19df 100644 --- a/src/css/less/console.less +++ b/src/css/less/console.less @@ -19,17 +19,35 @@ color: @blue; } margin: 2px 0; + display: table-row; } .grafana-console-body { overflow-y: auto; - padding-left: 3px; + display: table; + width: 100%; } -.grafana-console-type { - margin: 0 3px; - min-width: 75px; - display: inline-block; +.gfc-col { + display: table-cell; + padding: 2px 4px; + white-space: nowrap; + overflow: hidden; + vertical-align: middle; +} + +.grafana-console-method { + text-align: center; +} + +.grafana-console-error { + .grafana-console-method { + color: red; + } +} + +.grafana-console-field2 { + width: 90%; } .grafana-console-time:before { @@ -46,3 +64,8 @@ color: rgb(162, 196, 253); } +.grafana-console-elapsed { + text-align: right; + color: rgb(162, 196, 253); +} +