feat(table panel): table panel can now show nested object data, closes #3263

public/app/panels/table/editor.html

@@ -158,7 +158,7 @@
 	</div>
 
 	<button class="btn btn-inverse" style="margin-top: 20px" ng-click="addColumnStyle()">
-		Add style display rule
+		Add column style rule
 	</button>
 </div>
 

public/app/panels/table/specs/transformers_specs.ts

 import {describe, beforeEach, it, sinon, expect} from 'test/lib/common';
 
 import {TableModel} from '../table_model';
+import {transformers} from '../transformers';
 
 describe('when transforming time series table', () => {
   var table;
@@ -100,7 +101,11 @@ describe('when transforming time series table', () => {
     describe('JSON Data', () => {
       var panel = {
         transform: 'json',
-        columns: [{text: 'Timestamp', value: 'timestamp'}, {text: 'Message', value: 'message'}]
+        columns: [
+          {text: 'Timestamp', value: 'timestamp'},
+          {text: 'Message', value: 'message'},
+          {text: 'nested.level2', value: 'nested.level2'},
+        ]
       };
       var rawData = [
         {
@@ -108,26 +113,42 @@ describe('when transforming time series table', () => {
           datapoints: [
             {
               timestamp: 'time',
-              message: 'message'
+              message: 'message',
+              nested: {
+                level2: 'level2-value'
+              }
             }
           ]
         }
       ];
 
-      beforeEach(() => {
-        table = TableModel.transform(rawData, panel);
-      });
-
-      it ('should return 2 columns', () => {
-        expect(table.columns.length).to.be(2);
-        expect(table.columns[0].text).to.be('Timestamp');
-        expect(table.columns[1].text).to.be('Message');
-      });
-
-      it ('should return 2 rows', () => {
-        expect(table.rows.length).to.be(1);
-        expect(table.rows[0][0]).to.be('time');
-        expect(table.rows[0][1]).to.be('message');
+      describe('getColumns', function() {
+        it('should return nested properties', function() {
+          var columns = transformers['json'].getColumns(rawData);
+          expect(columns[0].text).to.be('timestamp');
+          expect(columns[1].text).to.be('message');
+          expect(columns[2].text).to.be('nested.level2');
+        });
+      });
+
+      describe('transform', function() {
+        beforeEach(() => {
+          table = TableModel.transform(rawData, panel);
+        });
+
+        it ('should return 2 columns', () => {
+          expect(table.columns.length).to.be(3);
+          expect(table.columns[0].text).to.be('Timestamp');
+          expect(table.columns[1].text).to.be('Message');
+          expect(table.columns[2].text).to.be('nested.level2');
+        });
+
+        it ('should return 2 rows', () => {
+          expect(table.rows.length).to.be(1);
+          expect(table.rows[0][0]).to.be('time');
+          expect(table.rows[0][1]).to.be('message');
+          expect(table.rows[0][2]).to.be('level2-value');
+        });
       });
     });
 

public/app/panels/table/transformers.ts

@@ -2,6 +2,7 @@
 
 import moment = require('moment');
 import _ = require('lodash');
+import flatten = require('app/core/utils/flatten');
 import TimeSeries = require('app/core/time_series');
 
 var transformers = {};
@@ -149,9 +150,12 @@ transformers['json'] = {
         continue;
       }
 
-      for (var y = 0; y < series.datapoints.length; y++) {
+      // only look at 100 docs
+      var maxDocs = Math.min(series.datapoints.length, 100);
+      for (var y = 0; y < maxDocs; y++) {
         var doc = series.datapoints[y];
-        for (var propName in doc) {
+        var flattened = flatten(doc, null);
+        for (var propName in flattened) {
           names[propName] = true;
         }
       }
@@ -177,13 +181,16 @@ transformers['json'] = {
       for (y = 0; y < series.datapoints.length; y++) {
         var dp = series.datapoints[y];
         var values = [];
-        for (z = 0; z < panel.columns.length; z++) {
-          values.push(dp[panel.columns[z].value]);
-        }
 
-        if (values.length === 0) {
+        if (_.isObject(dp) && panel.columns.length > 0) {
+          var flattened = flatten(dp, null);
+          for (z = 0; z < panel.columns.length; z++) {
+            values.push(flattened[panel.columns[z].value]);
+          }
+        } else {
           values.push(JSON.stringify(dp));
         }
+
         model.rows.push(values);
       }
     }