[stringify/url] support label templates for url field formatters

elastic · May 5, 2015 · a2b63fc · a2b63fc
1 parent 5924d84
commit a2b63fc
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 23 deletions.
diff --git a/src/kibana/components/stringify/editors/url.html b/src/kibana/components/stringify/editors/url.html
@@ -8,13 +8,12 @@
 </div>
 
 <div class="form-group">
-  <span class="pull-right text-info hintbox-label" ng-click="editor.showUrlTemplateHelp = !editor.showUrlTemplateHelp">
+  <span class="pull-right text-info hintbox-label" ng-click="editor.showUrlTmplHelp = !editor.showUrlTmplHelp">
     <i class="fa fa-info"></i> Url Template Help
   </span>
 
-  <label>Template</label>
-  <text ng-model="editor.formatParams.format">
-  <div class="hintbox" ng-if="editor.showUrlTemplateHelp">
+  <label>Url Template</label>
+  <div class="hintbox" ng-if="editor.showUrlTmplHelp">
     <h4 class="hintbox-heading">
       <i class="fa fa-question-circle text-info"></i> Url Template Help
     </h4>
@@ -33,8 +32,35 @@ <h4 class="hintbox-heading">
     </ul>
   </div>
 
-  <field-format-editor-pattern
-   ng-model="editor.formatParams.template"
-   inputs="url.sampleInputs">
-  </field-format-editor-pattern>
+  <input ng-model="editor.formatParams.template" class="form-control">
 </div>
+
+<div class="form-group">
+  <span class="pull-right text-info hintbox-label" ng-click="editor.showLabelTmplHelp = !editor.showLabelTmplHelp">
+    <i class="fa fa-info"></i> Label Template Help
+  </span>
+
+  <label>Label Template</label>
+  <div class="hintbox" ng-if="editor.showLabelTmplHelp">
+    <h4 class="hintbox-heading">
+      <i class="fa fa-question-circle text-info"></i> Label Template Help
+    </h4>
+
+    <p>
+      If the url in this field is large, it might be useful to provide an alternate template for the text version of the url. This will be displayed instead of the url, but will still link to the url. The format is a string which uses double curly brace notation <code ng-bind="'\{\{ \}\}'"></code> to inject values. The following values can be accessed:
+    </p>
+
+    <ul>
+      <li>
+        <strong>value</strong> &mdash; The fields value
+      </li>
+      <li>
+        <strong>url</strong> &mdash; The formatted url
+      </li>
+    </ul>
+  </div>
+
+  <input ng-model="editor.formatParams.labelTemplate" class="form-control">
+</div>
+
+<field-format-editor-samples inputs="url.sampleInputs"></field-format-editor-samples>
diff --git a/src/kibana/components/stringify/types/Url.js b/src/kibana/components/stringify/types/Url.js
@@ -35,33 +35,54 @@ define(function (require) {
     Url.templateMatchRE = /{{([\s\S]+?)}}/g;
     Url.paramDefaults = {
       type: 'a',
-      template: null
+      template: null,
+      labelTemplate: null
     };
 
     Url.urlTypes = [
       { id: 'a', name: 'Link' },
       { id: 'img', name: 'Image' }
     ];
 
+    Url.prototype._formatUrl = function (value) {
+      var template = this.param('template');
+      if (!template) return value;
+
+      return this._compileTemplate(template)({
+        value: encodeURIComponent(value),
+        rawValue: value
+      });
+    };
+
+    Url.prototype._formatLabel = function (value, url) {
+      var template = this.param('labelTemplate');
+      if (url == null) url = this._formatUrl(value);
+      if (!template) return url;
+
+      return this._compileTemplate(template)({
+        value: value,
+        url: url
+      });
+    };
+
     Url.prototype._convert = {
       text: function (value) {
-        var template = this.param('template');
-        return !template ? value : this._compileTemplate(template)(value);
+        return this._formatLabel(value);
       },
 
       html: function (rawValue, field, hit) {
-        var url = _.escape(this.convert(rawValue, 'text'));
-        var value = _.escape(rawValue);
+        var url = _.escape(this._formatUrl(rawValue));
+        var label = _.escape(this._formatLabel(rawValue, url));
 
         switch (this.param('type')) {
-        case 'img': return '<img src="' + url + '" alt="' + value + '" title="' + value + '">';
+        case 'img':
+          return '<img src="' + url + '" alt="' + label + '" title="' + label + '">';
         default:
-          var urlDisplay = url;
           if (hit && hit.highlight && hit.highlight[field.name]) {
-            urlDisplay = highlightFilter(url, hit.highlight[field.name]);
+            label = highlightFilter(label, hit.highlight[field.name]);
           }
 
-          return '<a href="' + url + '" target="_blank">' + urlDisplay + '</a>';
+          return '<a href="' + url + '" target="_blank">' + label + '</a>';
         }
       }
     };
@@ -72,12 +93,7 @@ define(function (require) {
         return (i % 2) ? part.trim() : part;
       });
 
-      return function (val) {
-        var locals = {
-          value: encodeURIComponent(val),
-          rawValue: val
-        };
-
+      return function (locals) {
         // replace all the odd bits with their local var
         var output = '';
         var i = -1;