feat(panels): upgraded dashlist panel to new format

public/app/features/panel/metrics_panel_ctrl.ts

@@ -48,7 +48,7 @@ class MetricsPanelCtrl extends PanelCtrl {
     }, 30);;
   }
 
-  initEditorTabs() {
+  initEditMode() {
     this.addEditorTab('Metrics', () => {
       return { templateUrl: 'public/app/partials/metrics.html' };
     });

public/app/features/panel/panel_ctrl.ts

@@ -33,6 +33,7 @@ export class PanelCtrl {
 
   init() {
     this.publishAppEvent('panel-instantiated', {scope: this.$scope});
+    this.refresh();
   }
 
   renderingCompleted() {
@@ -61,7 +62,7 @@ export class PanelCtrl {
     if (!this.editorTabs) {
       this.editorTabs = [];
       this.editorTabs.push({title: 'General', directiveFn: generalOptionsTabEditorTab});
-      this.initEditorTabs();
+      this.initEditMode();
     }
 
     this.changeView(true, true);
@@ -71,7 +72,7 @@ export class PanelCtrl {
     this.changeView(false, false);
   }
 
-  initEditorTabs() {
+  initEditMode() {
     return;
   }
 

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

@@ -7,7 +7,7 @@
 					<strong>Mode</strong>
 				</li>
 				<li>
-					<select class="input-small tight-form-input last" ng-model="panel.mode" ng-options="f for f in modes" ng-change="get_data()"></select>
+					<select class="input-small tight-form-input last" ng-model="ctrl.panel.mode" ng-options="f for f in ctrl.modes" ng-change="ctrl.refresh()"></select>
 				</li>
 			</ul>
 			<div class="clearfix"></div>
@@ -24,13 +24,13 @@
 				</li>
 				<li>
 					<input type="text" class="input-medium tight-form-input" placeholder="title query"
-					ng-model="panel.query" ng-change="get_data()" ng-model-onblur>
+					ng-model="ctrl.panel.query" ng-change="ctrl.refresh()" ng-model-onblur>
 				</li>
 				<li class="tight-form-item">
 					Tags
 				</li>
 				<li>
-					<bootstrap-tagsinput ng-model="panel.tags" tagclass="label label-tag" placeholder="add tags" on-tags-updated="get_data()">
+					<bootstrap-tagsinput ng-model="ctrl.panel.tags" tagclass="label label-tag" placeholder="add tags" on-tags-updated="ctrl.refresh()">
 					</bootstrap-tagsinput>
 				</li>
 			</ul>
@@ -47,7 +47,7 @@
 					<strong>Limit number to</strong>
 				</li>
 				<li>
-					<input class="input-small tight-form-input last" type="number" ng-model="panel.limit" ng-model-onblur ng-change="get_data()">
+					<input class="input-small tight-form-input last" type="number" ng-model="ctrl.panel.limit" ng-model-onblur ng-change="ctrl.refresh()">
 				</li>
 			</ul>
 			<div class="clearfix"></div>

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

-<grafana-panel>
-	<div class="dashlist">
-	<div class="dashlist-item" ng-repeat="dash in dashList">
+<div class="dashlist">
+	<div class="dashlist-item" ng-repeat="dash in ctrl.dashList">
 		<a class="dashlist-link dashlist-link-{{dash.type}}" href="dashboard/{{dash.uri}}">
 			<span class="dashlist-title">
 				{{dash.title}}
@@ -10,4 +9,4 @@
 			</span>
 		</a>
 	</div>
-</grafana-panel>
+</div>

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

-define([
-  'angular',
-  'app/app',
-  'lodash',
-  'app/core/config',
-  'app/features/panel/panel_meta',
-],
-function (angular, app, _, config, PanelMeta) {
-  'use strict';
-
-  var module = angular.module('grafana.panels.dashlist', []);
-  app.useModule(module);
-
-  /** @ngInject */
-  function DashListPanelCtrl($scope, panelSrv, backendSrv) {
-
-    $scope.panelMeta = new PanelMeta({
-      panelName: 'Dashboard list',
-      editIcon:  "fa fa-star",
-      fullscreen: true,
-    });
-
-    $scope.panelMeta.addEditorTab('Options', 'app/plugins/panel/dashlist/editor.html');
-
-    var defaults = {
-      mode: 'starred',
-      query: '',
-      limit: 10,
-      tags: []
-    };
-
-    $scope.modes = ['starred', 'search'];
-
-    _.defaults($scope.panel, defaults);
-
-    $scope.dashList = [];
-
-    $scope.init = function() {
-      panelSrv.init($scope);
-
-      if ($scope.panel.tag) {
-        $scope.panel.tags = [$scope.panel.tag];
-        delete $scope.panel.tag;
-      }
-
-      if ($scope.isNewPanel()) {
-        $scope.panel.title = "Starred Dashboards";
-      }
-    };
-
-    $scope.refreshData = function() {
-      var params = {
-        limit: $scope.panel.limit
-      };
-
-      if ($scope.panel.mode === 'starred') {
-        params.starred = "true";
-      } else {
-        params.query = $scope.panel.query;
-        params.tag = $scope.panel.tags;
-      }
-
-      return backendSrv.search(params).then(function(result) {
-        $scope.dashList = result;
-        $scope.panelRenderingComplete();
-      });
-    };
-
-    $scope.init();
-  }
-
-  function dashListPanelDirective() {
-    return {
-      controller: DashListPanelCtrl,
-      templateUrl: 'app/plugins/panel/dashlist/module.html',
-    };
-  }
-
-  return {
-    panel: dashListPanelDirective
-  };
-});

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

+///<reference path="../../../headers/common.d.ts" />
+
+import _ from 'lodash';
+import config from 'app/core/config';
+import {PanelDirective, PanelCtrl} from '../../../features/panel/panel';
+
+ // Set and populate defaults
+var panelDefaults = {
+  mode: 'starred',
+  query: '',
+  limit: 10,
+  tags: []
+};
+
+class DashListCtrl extends PanelCtrl {
+  dashList: any[];
+  modes: any[];
+
+  /** @ngInject */
+  constructor($scope, $injector, private backendSrv) {
+    super($scope, $injector);
+    _.defaults(this.panel, panelDefaults);
+
+    if (this.panel.tag) {
+      this.panel.tags = [$scope.panel.tag];
+      delete this.panel.tag;
+    }
+  }
+
+  initEditMode() {
+    this.modes = ['starred', 'search'];
+    this.icon = "fa fa-star";
+    this.addEditorTab('Options', () => {
+      return {templateUrl: 'app/plugins/panel/dashlist/editor.html'};
+    });
+  }
+
+  refresh() {
+    var params: any = {limit: this.panel.limit};
+
+    if (this.panel.mode === 'starred') {
+      params.starred = "true";
+    } else {
+      params.query = this.panel.query;
+      params.tag = this.panel.tags;
+    }
+
+    return this.backendSrv.search(params).then(result => {
+      this.dashList = result;
+      this.renderingCompleted();
+    });
+  }
+}
+
+class DashListPanel extends PanelDirective {
+  controller = DashListCtrl;
+  templateUrl = 'public/app/plugins/panel/dashlist/module.html';
+}
+
+export {
+  DashListCtrl,
+  DashListPanel as Panel
+}

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

@@ -18,17 +18,19 @@ export class TextPanelCtrl extends PanelCtrl {
     super($scope, $injector);
 
     _.defaults(this.panel, panelDefaults);
-    this.render();
-
   }
 
-  initEditorTabs() {
+  initEditMode() {
     this.icon = 'fa fa-text-width';
     this.addEditorTab('Options', () => {
       return { templateUrl: 'public/app/plugins/panel/text/editor.html' };
     });
   }
 
+  refresh() {
+    this.render();
+  }
+
   render() {
     if (this.panel.mode === 'markdown') {
       this.renderMarkdown(this.panel.content);
@@ -40,10 +42,6 @@ export class TextPanelCtrl extends PanelCtrl {
     this.renderingCompleted();
   }
 
-  refresh() {
-    this.render();
-  }
-
   renderText(content) {
     content = content
     .replace(/&/g, '&')