[time_table] adding support for URLs / links (#3600)

Using Mustache templating and providing {{ metric }} as well as
{{ ...formData }} as context.

superset/assets/javascripts/components/MetricOption.jsx

@@ -6,17 +6,18 @@ import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';
 const propTypes = {
   metric: PropTypes.object.isRequired,
   showFormula: PropTypes.bool,
+  url: PropTypes.string,
 };
 const defaultProps = {
   showFormula: true,
 };
 
-export default function MetricOption({ metric, showFormula }) {
+export default function MetricOption({ metric, showFormula, url }) {
+  const verbose = metric.verbose_name || metric.metric_name;
+  const link = url ? <a href={url}>{verbose}</a> : verbose;
   return (
     <div>
-      <span className="m-r-5 option-label">
-        {metric.verbose_name || metric.metric_name}
-      </span>
+      <span className="m-r-5 option-label">{link}</span>
       {metric.description &&
         <InfoTooltipWithTrigger
           className="m-r-5 text-muted"

superset/assets/javascripts/explore/stores/visTypes.js

@@ -379,6 +379,7 @@ export const visTypes = {
         controlSetRows: [
           ['groupby', 'metrics'],
           ['column_collection'],
+          ['url'],
         ],
       },
     ],
@@ -386,6 +387,11 @@ export const visTypes = {
       groupby: {
         multiple: false,
       },
+      url: {
+        label: t(
+          "Templated link, it's possible to include {{ metric }} " +
+          'or other values coming from the controls.'),
+      },
     },
   },
 

superset/assets/visualizations/time_table.jsx

@@ -4,6 +4,7 @@ import propTypes from 'prop-types';
 import { Table, Thead, Th } from 'reactable';
 import d3 from 'd3';
 import { Sparkline, LineSeries } from '@data-ui/sparkline';
+import Mustache from 'mustache';
 
 import MetricOption from '../javascripts/components/MetricOption';
 import TooltipWrapper from '../javascripts/components/TooltipWrapper';
@@ -55,10 +56,13 @@ function viz(slice, payload) {
   }
   const tableData = metrics.map((metric) => {
     let leftCell;
+    const context = Object.assign({}, fd, { metric });
+    const url = fd.url ? Mustache.render(fd.url, context) : null;
+
     if (!payload.data.is_group_by) {
-      leftCell = <MetricOption metric={metricMap[metric]} showFormula={false} />;
+      leftCell = <MetricOption metric={metricMap[metric]} url={url}showFormula={false} />;
     } else {
-      leftCell = metric;
+      leftCell = url ? <a href={url}>{metric}</a> : metric;
     }
     const row = { metric: leftCell };
     fd.column_collection.forEach((c) => {