feat(tablepanel): renamed some table panel schema things

public/app/panels/table/controller.ts

@@ -29,7 +29,7 @@ export class TablePanelCtrl {
       transform: 'timeseries_to_rows',
       pageSize: 50,
       showHeader: true,
-      columns: [
+      styles: [
         {
           type: 'date',
           pattern: 'Time',
@@ -45,13 +45,20 @@ export class TablePanelCtrl {
           thresholds: [],
         }
       ],
-      fields: [],
+      columns: [],
       scroll: true,
       fontSize: '100%',
       sort: {col: 0, desc: true},
     };
 
     $scope.init = function() {
+      if ($scope.panel.styles === void 0) {
+        $scope.panel.styles = $scope.panel.columns;
+        $scope.panel.columns = $scope.panel.fields;
+        delete $scope.panel.columns;
+        delete $scope.panel.fields;
+      }
+
       _.defaults($scope.panel, panelDefaults);
 
       panelSrv.init($scope);

public/app/panels/table/editor.html

@@ -19,15 +19,15 @@
 			<div class="tight-form" ng-if="panel.transform === 'json'">
 				<ul class="tight-form-list">
 					<li class="tight-form-item" style="width: 140px">
-						Fields
+						Columns
 					</li>
-					<li class="tight-form-item" ng-repeat="field in panel.fields">
-						<i class="pointer fa fa-remove" ng-click="removeJsonField(field)"></i>
+					<li class="tight-form-item" ng-repeat="column in panel.columns">
+						<i class="pointer fa fa-remove" ng-click="removeColumn(column)"></i>
 						<span>
-							{{field.name}}
+							{{column.name}}
 						</span>
 					</li>
-					<li class="dropdown" dropdown-typeahead="jsonFieldsMenu" dropdown-typeahead-on-select="addJsonField($item, $subItem)">
+					<li class="dropdown" dropdown-typeahead="columnsMenu" dropdown-typeahead-on-select="addColumn($item, $subItem)">
 					</li>
 				</ul>
 				<div class="clearfix"></div>
@@ -67,11 +67,11 @@
 	<h5>Column Styles</h5>
 
 	<div class="tight-form-container">
-		<div ng-repeat="column in panel.columns">
+		<div ng-repeat="style in panel.styles">
 			<div class="tight-form">
 				<ul class="tight-form-list pull-right">
 					<li class="tight-form-item last">
-						<i class="fa fa-remove pointer" ng-click="removeColumnStyle(column)"></i>
+						<i class="fa fa-remove pointer" ng-click="removeColumnStyle(style)"></i>
 					</li>
 				</ul>
 
@@ -80,38 +80,38 @@
 						Name or regex
 					</li>
 					<li>
-						<input type="text" ng-model="column.pattern" bs-typeahead="getColumnNames" ng-blur="render()" data-min-length=0 data-items=100 class="input-medium tight-form-input">
+						<input type="text" ng-model="style.pattern" bs-typeahead="getColumnNames" ng-blur="render()" data-min-length=0 data-items=100 class="input-medium tight-form-input">
 					</li>
 					<li class="tight-form-item" style="width: 86px">
 						Type
 					</li>
 					<li>
 						<select class="input-small tight-form-input"
-							ng-model="column.type"
+							ng-model="style.type"
 							ng-options="c.value as c.text for c in columnTypes"
 							ng-change="render()"
 							style="width: 150px"
 							></select>
 					</li>
 				</ul>
-				<ul class="tight-form-list" ng-if="column.type === 'date'">
+				<ul class="tight-form-list" ng-if="style.type === 'date'">
 					<li class="tight-form-item">
 						Format
 					</li>
 					<li>
-						<metric-segment-model property="column.dateFormat" options="dateFormats" on-change="render()" custom="true"></metric-segment-model>
+						<metric-segment-model property="style.dateFormat" options="dateFormats" on-change="render()" custom="true"></metric-segment-model>
 					</li>
 				</ul>
 				<div class="clearfix"></div>
 			</div>
-			<div class="tight-form" ng-if="column.type === 'number'">
+			<div class="tight-form" ng-if="style.type === 'number'">
 				<ul class="tight-form-list">
 					<li class="tight-form-item text-right" style="width: 93px">
 						Coloring
 					</li>
 					<li>
 						<select class="input-small tight-form-input"
-							ng-model="column.colorMode"
+							ng-model="style.colorMode"
 							ng-options="c.value as c.text for c in colorModes"
 							ng-change="render()"
 							style="width: 150px"
@@ -121,34 +121,34 @@
 						Thresholds<tip>Comma seperated values</tip>
 					</li>
 					<li>
-						<input type="text" class="input-small tight-form-input" style="width: 150px" ng-model="column.thresholds" ng-blur="render()" placeholder="0,50,80" array-join></input>
+						<input type="text" class="input-small tight-form-input" style="width: 150px" ng-model="style.thresholds" ng-blur="render()" placeholder="0,50,80" array-join></input>
 					</li>
 					<li class="tight-form-item" style="width: 60px">
 						Colors
 					</li>
 					<li class="tight-form-item">
-						<spectrum-picker ng-model="column.colors[0]" ng-change="render()" ></spectrum-picker>
-						<spectrum-picker ng-model="column.colors[1]" ng-change="render()" ></spectrum-picker>
-						<spectrum-picker ng-model="column.colors[2]" ng-change="render()" ></spectrum-picker>
+						<spectrum-picker ng-model="style.colors[0]" ng-change="render()" ></spectrum-picker>
+						<spectrum-picker ng-model="style.colors[1]" ng-change="render()" ></spectrum-picker>
+						<spectrum-picker ng-model="style.colors[2]" ng-change="render()" ></spectrum-picker>
 					</li>
 				</ul>
 				<div class="clearfix"></div>
 			</div>
-			<div class="tight-form" ng-if="column.type === 'number'">
+			<div class="tight-form" ng-if="style.type === 'number'">
 				<ul class="tight-form-list">
 					<li class="tight-form-item text-right" style="width: 93px">
 						Unit
 					</li>
 					<li class="dropdown" style="width: 150px"
-						ng-model="column.unit"
+						ng-model="style.unit"
 						dropdown-typeahead="unitFormats"
-						dropdown-typeahead-on-select="setUnitFormat(column, $subItem)">
+						dropdown-typeahead-on-select="setUnitFormat(style, $subItem)">
 					</li>
 					<li class="tight-form-item" style="width: 86px">
 						Decimals
 					</li>
 					<li style="width: 105px">
-						<input type="number" class="input-mini tight-form-input" ng-model="column.decimals" ng-change="render()" ng-model-onblur>
+						<input type="number" class="input-mini tight-form-input" ng-model="style.decimals" ng-change="render()" ng-model-onblur>
 					</li>
 				</ul>
 				<div class="clearfix"></div>
@@ -158,7 +158,7 @@
 	</div>
 
 	<button class="btn btn-inverse" style="margin-top: 20px" ng-click="addColumnStyle()">
-		Add column display rule
+		Add style display rule
 	</button>
 </div>
 

public/app/panels/table/editor.ts

@@ -36,8 +36,8 @@ export function tablePanelEditor() {
          {text: 'MMMM D, YYYY LT',  value: 'MMMM D, YYYY LT'},
       ];
 
-      scope.updateJsonFieldsMenu = function(data) {
-        scope.jsonFieldsMenu = [];
+      scope.updateColumnsMenu = function(data) {
+        scope.columnsMenu = [];
         if (!data || data.length === 0) {
           return;
         }
@@ -58,18 +58,18 @@ export function tablePanelEditor() {
         }
 
         _.each(names, function(value, key) {
-          scope.jsonFieldsMenu.push({text: key});
+          scope.columnsMenu.push({text: key});
         });
       };
 
-      scope.updateJsonFieldsMenu(scope.dataRaw);
+      scope.updateColumnsMenu(scope.dataRaw);
 
       scope.$on('render', function(event, table, rawData) {
-        scope.updateJsonFieldsMenu(rawData);
+        scope.updateColumnsMenu(rawData);
       });
 
-      scope.addJsonField = function(menuItem) {
-        scope.panel.fields.push({name: menuItem.text});
+      scope.addColumn = function(menuItem) {
+        scope.panel.columns.push({name: menuItem.text});
         scope.render();
       };
 
@@ -77,8 +77,8 @@ export function tablePanelEditor() {
         scope.render();
       };
 
-      scope.removeJsonField = function(field) {
-        scope.panel.fields = _.without(scope.panel.fields, field);
+      scope.removeColumn = function(column) {
+        scope.panel.column = _.without(scope.panel.column, column);
         scope.render();
       };
 
@@ -99,11 +99,11 @@ export function tablePanelEditor() {
           thresholds: [],
         };
 
-        scope.panel.columns.push(angular.copy(columnStyleDefaults));
+        scope.panel.styles.push(angular.copy(columnStyleDefaults));
       };
 
-      scope.removeColumnStyle = function(col) {
-        scope.panel.columns = _.without(scope.panel.columns, col);
+      scope.removeColumnStyle = function(style) {
+        scope.panel.styles = _.without(scope.panel.styles, style);
       };
 
       scope.getColumnNames = function() {

public/app/panels/table/renderer.ts

@@ -81,8 +81,8 @@ export class TableRenderer {
       return this.formaters[colIndex](value);
     }
 
-    for (let i = 0; i < this.panel.columns.length; i++) {
-      let style = this.panel.columns[i];
+    for (let i = 0; i < this.panel.styles.length; i++) {
+      let style = this.panel.styles[i];
       let column = this.table.columns[colIndex];
       var regex = kbn.stringToJsRegex(style.pattern);
       if (column.text.match(regex)) {

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

@@ -15,7 +15,7 @@ describe('when rendering table', () => {
 
     var panel = {
       pageSize: 10,
-      columns: [
+      styles: [
         {
           pattern: 'Time',
           type: 'date',

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

@@ -71,10 +71,36 @@ describe('when transforming time series table', () => {
       });
     });
 
+    describe('timeseries_to_summaries', () => {
+      var panel = {
+        transform: 'timeseries_to_summaries',
+        sort: {col: 0, desc: true},
+      };
+
+      beforeEach(() => {
+        table = TableModel.transform(timeSeries, panel);
+      });
+
+      // it('should return 2 rows', () => {
+      //   expect(table.rows.length).to.be(2);
+      //   expect(table.rows[0][0]).to.be('series1');
+      //   expect(table.rows[0][1]).to.be('Min');
+      //   expect(table.rows[1][0]).to.be('series2');
+      // });
+      //
+      // it('should return 2 columns', () => {
+      //   expect(table.columns.length).to.be(3);
+      //   expect(table.columns[0].text).to.be('Series');
+      //   expect(table.columns[1].text).to.be('Min');
+      //   expect(table.columns[2].text).to.be('Value');
+      // });
+    });
+
+
     describe('JSON Data', () => {
       var panel = {
         transform: 'json',
-        fields: [{name: 'timestamp'}, {name: 'message'}]
+        columns: [{name: 'timestamp'}, {name: 'message'}]
       };
       var rawData = [
         {

public/app/panels/table/transformers.ts

@@ -87,8 +87,8 @@ transformers['json'] = {
   description: 'JSON Data',
   transform: function(data, panel, model) {
     var i, y, z;
-    for (i = 0; i < panel.fields.length; i++) {
-      model.columns.push({text: panel.fields[i].name});
+    for (i = 0; i < panel.columns.length; i++) {
+      model.columns.push({text: panel.columns[i].name});
     }
 
     if (model.columns.length === 0) {
@@ -101,8 +101,8 @@ transformers['json'] = {
       for (y = 0; y < series.datapoints.length; y++) {
         var dp = series.datapoints[y];
         var values = [];
-        for (z = 0; z < panel.fields.length; z++) {
-          values.push(dp[panel.fields[z].name]);
+        for (z = 0; z < panel.columns.length; z++) {
+          values.push(dp[panel.columns[z].name]);
         }
 
         if (values.length === 0) {