Refactoring PR #511, Allow filter notation [[..]] in text panels

CHANGELOG.md

 vNext
 vNext
 
 
+**New features or improvements**
+- Allow [[..]] filter notation in all text panels (markdown/html/text) (Issue #511)
+
 **Changes**
 **Changes**
 - Use unix epoch for Graphite from/to for absolute time ranges (Closes #536)
 - Use unix epoch for Graphite from/to for absolute time ranges (Closes #536)
 
 

src/app/panels/text/module.html

 <div ng-controller='text' ng-init="init()" style="min-height:{{panel.height || row.height}}" ng-dblclick="openEditor()">
 <div ng-controller='text' ng-init="init()" style="min-height:{{panel.height || row.height}}" ng-dblclick="openEditor()">
-  <!--<p ng-style="panel.style" ng-bind-html-unsafe="panel.content | striphtml | newlines"></p>-->
-  <markdown ng-show="ready && panel.mode == 'markdown'" ng-bind-html-unsafe="panel.content | applymarkdown | applytemplate">
-  </markdown>
-  <p ng-show="panel.mode == 'text'" ng-style='panel.style' ng-bind-html-unsafe="panel.content | striphtml | newlines | applytemplate">
-  </p>
-  <p ng-show="panel.mode == 'html'" ng-bind-html-unsafe="panel.content | applytemplate">
+  <p ng-bind-html-unsafe="content">
   </p>
   </p>
 </div>
 </div>

src/app/panels/text/module.js

@@ -23,7 +23,7 @@ function (angular, app, _, require) {
   var module = angular.module('kibana.panels.text', []);
   var module = angular.module('kibana.panels.text', []);
   app.useModule(module);
   app.useModule(module);
 
 
-  module.controller('text', function($scope) {
+  module.controller('text', function($scope, filterSrv) {
 
 
     $scope.panelMeta = {
     $scope.panelMeta = {
       description : "A static text panel that can use plain text, markdown, or (sanitized) HTML"
       description : "A static text panel that can use plain text, markdown, or (sanitized) HTML"
@@ -40,84 +40,58 @@ function (angular, app, _, require) {
 
 
     $scope.init = function() {
     $scope.init = function() {
       $scope.initBaseController(this, $scope);
       $scope.initBaseController(this, $scope);
-
       $scope.ready = false;
       $scope.ready = false;
+      $scope.$on('refresh', $scope.render);
+      $scope.render();
     };
     };
 
 
     $scope.render = function() {
     $scope.render = function() {
-      $scope.$emit('render');
+      if ($scope.panel.mode === 'markdown') {
+        $scope.renderMarkdown($scope.panel.content);
+      }
+      else if ($scope.panel.mode === 'html') {
+        $scope.updateContent($scope.panel.content);
+      }
+      else if ($scope.panel.mode === 'text') {
+        $scope.renderText($scope.panel.content);
+      }
     };
     };
 
 
-    $scope.openEditor = function() {
-      //$scope.$emit('open-modal','paneleditor');
-      console.log('scope id', $scope.$id);
-    };
+    $scope.renderText = function(content) {
+      content = content
+        .replace(/&/g, '&')
+        .replace(/>/g, '>')
+        .replace(/</g, '&lt;')
+        .replace(/\n/g, '<br/>');
 
 
-  });
+      $scope.updateContent(content);
+    };
 
 
-  module.directive('markdown', function() {
-    return {
-      restrict: 'E',
-      link: function(scope, element) {
-        scope.$on('render', function() {
-          render_panel();
-        });
-
-        function render_panel() {
-          require(['./lib/showdown'], function (Showdown) {
-            scope.ready = true;
-            var converter = new Showdown.converter();
-            var text = scope.panel.content.replace(/&/g, '&amp;')
-              .replace(/>/g, '&gt;')
-              .replace(/</g, '&lt;');
-            var htmlText = converter.makeHtml(text);
-            element.html(htmlText);
-            // For whatever reason, this fixes chrome. I don't like it, I think
-            // it makes things slow?
-            if(!scope.$$phase) {
-              scope.$apply();
-            }
-          });
-        }
+    $scope.renderMarkdown = function(content) {
+      require(['./lib/showdown'], function (Showdown) {
+        var converter = new Showdown.converter();
+        var text = content
+          .replace(/&/g, '&amp;')
+          .replace(/>/g, '&gt;')
+          .replace(/</g, '&lt;');
 
 
-        render_panel();
-      }
+        $scope.updateContent(converter.makeHtml(text));
+      });
     };
     };
-  });
 
 
-  module.filter('newlines', function() {
-    return function (input) {
-      return input.replace(/\n/g, '<br/>');
-    };
-  });
+    $scope.updateContent = function(html) {
+      try {
+        $scope.content = filterSrv.applyTemplateToTarget(html);
 
 
-  module.filter('striphtml', function () {
-    return function(text) {
-      return text
-        .replace(/&/g, '&amp;')
-        .replace(/>/g, '&gt;')
-        .replace(/</g, '&lt;');
+        if(!$scope.$$phase) {
+          $scope.$apply();
+        }
+      } catch(e) {
+      }
     };
     };
-  });
 
 
-  module.filter('applytemplate', function(filterSrv) {
-    return function (input) {
-      return filterSrv.applyTemplateToTarget(input);
+    $scope.openEditor = function() {
     };
     };
-  });
 
 
-  module.filter('applymarkdown', function() {
-    return function (input) {
-      if(require.defined('./lib/showdown')) {
-        var Showdown = require('./lib/showdown');
-        var converter = new Showdown.converter();
-        var text = input.replace(/&/g, '&amp;')
-           .replace(/>/g, '&gt;')
-           .replace(/</g, '&lt;');
-        return converter.makeHtml(text);
-      } else {
-        return input;
-      }
-    };
   });
   });
 });
 });