feat(panels): updated text panel to new format

public/app/plugins/panel/text/editor.html

@@ -1,17 +1,17 @@
 <div>
   <div class="row-fluid">
     <div class="span4">
-      <label class="small">Mode</label> <select class="input-medium" ng-model="panel.mode" ng-options="f for f in ['html','markdown','text']"></select>
+      <label class="small">Mode</label> <select class="input-medium" ng-model="panelCtrl.panel.mode" ng-options="f for f in ['html','markdown','text']"></select>
     </div>
-    <div class="span2" ng-show="panel.mode == 'text'">
+    <div class="span2" ng-show="panelCtrl.panel.mode == 'text'">
-      <label class="small">Font Size</label> <select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['6pt','7pt','8pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select>
+      <label class="small">Font Size</label> <select class="input-mini" ng-model="panelCtrl.panel.style['font-size']" ng-options="f for f in ['6pt','7pt','8pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select>
     </div>
   </div>
 
   <label class=small>Content
-    <span ng-show="panel.mode == 'markdown'">(This area uses <a target="_blank" href="http://en.wikipedia.org/wiki/Markdown">Markdown</a>. HTML is not supported)</span>
+    <span ng-show="panelCtrl.panel.mode == 'markdown'">(This area uses <a target="_blank" href="http://en.wikipedia.org/wiki/Markdown">Markdown</a>. HTML is not supported)</span>
   </label>
 
-  <textarea ng-model="panel.content" rows="20" style="width:95%" ng-change="render()" ng-model-onblur>
+  <textarea ng-model="panelCtrl.panel.content" rows="20" style="width:95%" ng-change="panelCtrl.render()" ng-model-onblur>
   </textarea>
 </div>

public/app/plugins/panel/text/module.html

@@ -1,3 +1 @@
-<grafana-panel>
+<p ng-bind-html="ctrl.content" ng-show="ctrl.content"></p>
-  <p ng-bind-html="content" ng-show="content"></p>
-</grafana-panel>

public/app/plugins/panel/text/module.js

@@ -1,113 +0,0 @@
-define([
-  'angular',
-  'app/app',
-  'lodash',
-  'require',
-  'app/features/panel/panel_meta',
-],
-function (angular, app, _, require, PanelMeta) {
-  'use strict';
-
-  var converter;
-
-  /** @ngInject */
-  function TextPanelCtrl($scope, templateSrv, $sce, panelSrv) {
-
-    $scope.panelMeta = new PanelMeta({
-      panelName: 'Text',
-      editIcon:  "fa fa-text-width",
-      fullscreen: true,
-    });
-
-    $scope.panelMeta.addEditorTab('Edit text', 'app/plugins/panel/text/editor.html');
-
-    // Set and populate defaults
-    var _d = {
-      title   : 'default title',
-      mode    : "markdown", // 'html', 'markdown', 'text'
-      content : "",
-      style: {},
-    };
-
-    _.defaults($scope.panel, _d);
-
-    $scope.init = function() {
-      panelSrv.init($scope);
-      $scope.ready = false;
-      $scope.render();
-    };
-
-    $scope.refreshData = function() {
-      $scope.panelMeta.loading = false;
-      $scope.render();
-    };
-
-    $scope.render = function() {
-      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.panelRenderingComplete();
-    };
-
-    $scope.renderText = function(content) {
-      content = content
-        .replace(/&/g, '&')
-        .replace(/>/g, '>')
-        .replace(/</g, '&lt;')
-        .replace(/\n/g, '<br/>');
-
-      $scope.updateContent(content);
-    };
-
-    $scope.renderMarkdown = function(content) {
-      var text = content
-        .replace(/&/g, '&amp;')
-        .replace(/>/g, '&gt;')
-        .replace(/</g, '&lt;');
-
-      if (converter) {
-        $scope.updateContent(converter.makeHtml(text));
-      }
-      else {
-        require(['vendor/showdown'], function (Showdown) {
-          converter = new Showdown.converter();
-          $scope.updateContent(converter.makeHtml(text));
-        });
-      }
-    };
-
-    $scope.updateContent = function(html) {
-      try {
-        $scope.content = $sce.trustAsHtml(templateSrv.replace(html, $scope.panel.scopedVars));
-      } catch(e) {
-        console.log('Text panel error: ', e);
-        $scope.content = $sce.trustAsHtml(html);
-      }
-      if(!$scope.$$phase) {
-        $scope.$digest();
-      }
-    };
-
-    $scope.openEditor = function() {
-    };
-
-    $scope.init();
-  }
-
-  function textPanel() {
-    return {
-      controller: TextPanelCtrl,
-      templateUrl: 'app/plugins/panel/text/module.html',
-    };
-  }
-
-  return {
-    panel: textPanel,
-  };
-});

public/app/plugins/panel/text/module.ts

@@ -0,0 +1,92 @@
+///<reference path="../../../headers/common.d.ts" />
+
+import _ from 'lodash';
+import {PanelDirective, PanelCtrl} from '../../../features/panel/panel';
+
+function optionsEditorTab() {
+  return {templateUrl: 'public/app/plugins/panel/text/editor.html'};
+}
+
+ // Set and populate defaults
+var panelDefaults = {
+  mode    : "markdown", // 'html', 'markdown', 'text'
+  content : "# title",
+};
+
+export class TextPanelCtrl extends PanelCtrl {
+  converter: any;
+  content: string;
+
+  /** @ngInject */
+  constructor($scope, private templateSrv, private $sce) {
+    super($scope);
+
+    _.defaults(this.panel, panelDefaults);
+    this.render();
+  }
+
+  initEditorTabs() {
+    super.initEditorTabs();
+    this.editorTabs.push({title: 'Options', directiveFn: optionsEditorTab});
+  }
+
+  render() {
+    if (this.panel.mode === 'markdown') {
+      this.renderMarkdown(this.panel.content);
+    } else if (this.panel.mode === 'html') {
+      this.updateContent(this.panel.content);
+    } else if (this.panel.mode === 'text') {
+      this.renderText(this.panel.content);
+    }
+    // this.panelRenderingComplete();
+  }
+
+  refreshData() {
+    this.render();
+  }
+
+  renderText(content) {
+    content = content
+    .replace(/&/g, '&amp;')
+    .replace(/>/g, '&gt;')
+    .replace(/</g, '&lt;')
+    .replace(/\n/g, '<br/>');
+    this.updateContent(content);
+  }
+
+  renderMarkdown(content) {
+    var text = content
+    .replace(/&/g, '&amp;')
+    .replace(/>/g, '&gt;')
+    .replace(/</g, '&lt;');
+
+    if (this.converter) {
+      this.updateContent(this.converter.makeHtml(text));
+    } else {
+      System.import('vendor/showdown').then(Showdown => {
+        this.converter = new Showdown.converter();
+        this.updateContent(this.converter.makeHtml(text));
+      });
+    }
+  }
+
+  updateContent(html) {
+    try {
+      this.content = this.$sce.trustAsHtml(this.templateSrv.replace(html, this.panel.scopedVars));
+    } catch (e) {
+      console.log('Text panel error: ', e);
+      this.content = this.$sce.trustAsHtml(html);
+    }
+
+    if (!this.$scope.$$phase) {
+      this.$scope.$digest();
+    }
+  }
+}
+
+class TextPanel extends PanelDirective {
+  templateUrl = `app/plugins/panel/text/module.html`;
+  controller = TextPanelCtrl;
+}
+
+export {TextPanel as Panel}