[TSVB] Table view - fix the display of table elements if they are in the URL form

src/plugins/vis_type_timeseries/public/application/components/panel_config/table.tsx

@@ -207,6 +207,7 @@ export class TablePanelConfig extends Component<
               <EuiFieldText
                 onChange={this.handleTextChange('drilldown_url')}
                 value={model.drilldown_url ?? ''}
+                data-test-subj="drilldownUrl"
               />
             </EuiFormRow>
 

src/plugins/vis_type_timeseries/public/application/components/vis_types/table/vis.js

@@ -58,7 +58,11 @@ class TableVis extends Component {
 
   renderRow = (row) => {
     const { model } = this.props;
-    let rowDisplay = model.pivot_type === 'date' ? this.dateFormatter.convert(row.key) : row.key;
+
+    let rowDisplay = getValueOrEmpty(
+      model.pivot_type === 'date' ? this.dateFormatter.convert(row.key) : row.key
+    );
+
     if (model.drilldown_url) {
       const url = replaceVars(model.drilldown_url, {}, { key: row.key });
       rowDisplay = <a href={sanitizeUrl(url)}>{rowDisplay}</a>;
@@ -98,7 +102,7 @@ class TableVis extends Component {
       });
     return (
       <tr key={row.key}>
-        <td>{getValueOrEmpty(rowDisplay)}</td>
+        <td>{rowDisplay}</td>
         {columns}
       </tr>
     );

test/functional/apps/visualize/_tsvb_table.ts

@@ -10,12 +10,14 @@ import expect from '@kbn/expect';
 
 import { FtrProviderContext } from '../../ftr_provider_context';
 
-export default function ({ getPageObjects }: FtrProviderContext) {
+export default function ({ getPageObjects, getService }: FtrProviderContext) {
   const { visualBuilder, visualize, visChart } = getPageObjects([
     'visualBuilder',
     'visualize',
     'visChart',
   ]);
+  const findService = getService('find');
+  const retry = getService('retry');
 
   describe('visual builder', function describeIndexTests() {
     before(async () => {
@@ -43,6 +45,19 @@ export default function ({ getPageObjects }: FtrProviderContext) {
         expect(tableData).to.be(EXPECTED);
       });
 
+      it('should display drilldown urls', async () => {
+        const baseURL = 'http://elastic.co/foo/';
+
+        await visualBuilder.clickPanelOptions('table');
+        await visualBuilder.setDrilldownUrl(`${baseURL}{{key}}`);
+
+        await retry.try(async () => {
+          const links = await findService.allByCssSelector(`a[href="${baseURL}ios"]`);
+
+          expect(links.length).to.be(1);
+        });
+      });
+
       it('should display correct values on changing metrics aggregation', async () => {
         const EXPECTED = 'OS Cardinality\nwin 8 12\nwin xp 9\nwin 7 8\nios 5\nosx 3';
 

test/functional/page_objects/visual_builder_page.ts

@@ -277,6 +277,13 @@ export class VisualBuilderPageObject extends FtrService {
     await this.comboBox.setElement(formatterEl, formatter, { clickWithMouse: true });
   }
 
+  public async setDrilldownUrl(value: string) {
+    const drilldownEl = await this.testSubjects.find('drilldownUrl');
+
+    await drilldownEl.clearValue();
+    await drilldownEl.type(value);
+  }
+
   /**
    * set duration formatter additional settings
    *