[6.x] update spy table headers when columns update

src/ui/public/paginated_table/paginated_table.html

@@ -5,10 +5,10 @@
   class="agg-table">
   <div class="agg-table-paginated">
     <table class="table table-condensed">
-      <thead>
+      <thead data-test-subj="paginated-table-header">
         <tr>
           <th
-            ng-repeat="col in ::columns"
+            ng-repeat="col in columns"
             ng-click="paginatedTable.sortColumn($index)"
             class="{{ col.class }}">
             <span ng-bind="::col.title"></span>
@@ -25,7 +25,12 @@
           </th>
         </tr>
       </thead>
-      <tbody kbn-rows="page" kbn-rows-min="paginatedTable.rowsToShow(perPage, page.length)"></tbody>
+      <tbody
+        data-test-subj="paginated-table-body"
+        kbn-rows="page"
+        kbn-rows-min="paginatedTable.rowsToShow(perPage, page.length)"
+      >
+      </tbody>
       <tfoot ng-if="showTotal">
         <tr>
           <th ng-repeat="col in columns" class="numeric-value">{{col.total}}</th>

test/functional/apps/visualize/_spy_panel.js

@@ -0,0 +1,43 @@
+import expect from 'expect.js';
+
+export default function ({ getService, getPageObjects }) {
+  const log = getService('log');
+  const PageObjects = getPageObjects(['common', 'visualize', 'header']);
+
+  describe('visualize app', function describeIndexTests() {
+    before(async function () {
+      const fromTime = '2015-09-19 06:31:44.000';
+      const toTime = '2015-09-23 18:31:44.000';
+
+      await PageObjects.common.navigateToUrl('visualize', 'new');
+      await PageObjects.visualize.clickVerticalBarChart();
+      await PageObjects.visualize.clickNewSearch();
+
+      log.debug('Set absolute time range from \"' + fromTime + '\" to \"' + toTime + '\"');
+      await PageObjects.header.setAbsoluteRange(fromTime, toTime);
+      await PageObjects.visualize.clickGo();
+      await PageObjects.header.waitUntilLoadingHasFinished();
+    });
+
+    describe('spy panel tabel', function indexPatternCreation() {
+
+      it('should update table header when columns change', async function () {
+
+        await PageObjects.visualize.openSpyPanel();
+        let headers = await PageObjects.visualize.getDataTableHeaders();
+        expect(headers.trim()).to.equal('Count');
+
+        log.debug('Add Average Metric on machine.ram field');
+        await PageObjects.visualize.clickAddMetric();
+        await PageObjects.visualize.clickBucket('Y-Axis');
+        await PageObjects.visualize.selectAggregation('Average');
+        await PageObjects.visualize.selectField('machine.ram', 'metrics');
+        await PageObjects.visualize.clickGo();
+        await PageObjects.visualize.openSpyPanel();
+
+        headers = await PageObjects.visualize.getDataTableHeaders();
+        expect(headers.trim()).to.equal('Count Average machine.ram');
+      });
+    });
+  });
+}

test/functional/apps/visualize/index.js

@@ -14,6 +14,7 @@ export default function ({ getService, loadTestFile }) {
       await kibanaServer.uiSettings.replace({ 'dateFormat:tz': 'UTC', 'defaultIndex': 'logstash-*' });
     });
 
+    loadTestFile(require.resolve('./_spy_panel'));
     loadTestFile(require.resolve('./_chart_types'));
     loadTestFile(require.resolve('./_gauge_chart'));
     loadTestFile(require.resolve('./_area_chart'));

test/functional/page_objects/visualize_page.js

@@ -469,10 +469,16 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
 
     async getDataTableData() {
       const dataTable = await retry.try(
-        async () => find.byCssSelector('table.table.table-condensed tbody', defaultFindTimeout * 2));
+        async () => testSubjects.find('paginated-table-body'));
       return await dataTable.getVisibleText();
     }
 
+    async getDataTableHeaders() {
+      const dataTableHeader = await retry.try(
+        async () => testSubjects.find('paginated-table-header'));
+      return await dataTableHeader.getVisibleText();
+    }
+
     async getMarkdownData() {
       const markdown = await retry.try(async () => find.byCssSelector('visualize.ng-isolate-scope'));
       return await markdown.getVisibleText();