More work on integrated console, with request details

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.method = data.config.method;
-      this.elapsed = new Date().getTime() - data.config.$grafana_timestamp;
+      this.elapsed = (new Date().getTime() - data.config.$grafana_timestamp) + ' ms';
-      this.title = this.title + ' (' + this.elapsed + ' 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) {
+  ConsoleEvent.prototype.extractTimeseriesInfo = function(series) {
-    $httpProvider.interceptors.push(function() {
+    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) {

src/app/partials/console.html

@@ -3,12 +3,17 @@
 		<span class="grafana-console-title large"><i class="icon-terminal"></i></span>
 	</div>
 	<div class="grafana-console-body">
-		<div class="grafana-console-item" ng-repeat="item in events">
+		<div class="grafana-console-item" ng-repeat="item in events" ng-class="{'grafana-console-error': item.error}">
-			<span class="grafana-console-time" ng-bind="item.time"></span>
+			<span class="grafana-console-time gfc-col" ng-bind="item.time"></span>
-			<span class="grafana-console-type">
+			<span class="grafana-console-type gfc-col">
 				<span class="label label-info" ng-bind="item.type"></span>
 			</span>
-			<span class="grafana-console-title" ng-bind="item.title"></span>
+			<span class="gfc-col grafana-console-method" ng-bind="item.method"></span>
+			<span class="gfc-col grafana-console-title" ng-bind="item.title"></span>
+			<span class="gfc-col grafana-console-elapsed" ng-bind="item.elapsed"></span>
+			<span class="gfc-col grafana-console-field1" ng-bind="item.field1"></span>
+			<span class="gfc-col grafana-console-field2" ng-bind="item.field2"></span>
+			<span class="gfc-col grafana-console-field3" ng-bind="item.field3"></span>
 		</div>
 	</div>
 </div>

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 {
+.gfc-col {
-  margin: 0 3px;
+  display: table-cell;
-  min-width: 75px;
+  padding: 2px 4px;
-  display: inline-block;
+  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);
+}
+