Refactor to component based style

public/app/features/dashboard/all.js

@@ -17,9 +17,9 @@ define([
   './upload',
   './import/dash_import',
   './export/export_modal',
+  './export_data/export_data_modal',
   './dash_list_ctrl',
   './ad_hoc_filters',
   './row/row_ctrl',
   './repeat_option/repeat_option',
-  './exportCsvModalCtrl'
 ], function () {});

public/app/features/dashboard/exportCsvModalCtrl.ts

-///<reference path="../../headers/common.d.ts" />
-
-import config from 'app/core/config';
-import angular from 'angular';
-import _ from 'lodash';
-import * as fileExport from 'app/core/utils/file_export';
-
-const module = angular.module('grafana.controllers');
-
-export class ExportCsvModalCtrl {
-  scope: any;
-  seriesList: any = [];
-  /** @ngInject */
-  constructor(private $scope) {
-    this.seriesList = $scope.seriesList;
-    this.$scope = $scope;
-    $scope.asRows = true;
-    $scope.dateTimeFormat = 'YYYY-MM-DDTHH:mm:ssZ';
-    $scope.export = this.export.bind(this);
-  }
-
-  export() {
-    if (this.$scope.asRows) {
-      fileExport.exportSeriesListToCsv(this.seriesList, this.$scope.dateTimeFormat);
-    } else {
-      fileExport.exportSeriesListToCsvColumns(this.seriesList, this.$scope.dateTimeFormat);
-    }
-    this.$scope.dismiss();
-  }
-}
-
-module.controller('ExportCsvModalCtrl', ExportCsvModalCtrl);

public/app/features/dashboard/partials/exportCsvModal.html → public/app/features/dashboard/export_data/export_data_modal.html

-<div class="modal-body" ng-controller="ExportCsvModalCtrl">
+<div class="modal-body">
   <div class="modal-header">
     <h2 class="modal-header-title">
       Export CSV
     </h2>
 
-    <a class="modal-header-close" ng-click="dismiss();">
+    <a class="modal-header-close" ng-click="ctrl.dismiss();">
       <i class="fa fa-remove"></i>
     </a>
   </div>
@@ -14,19 +14,19 @@
       <div class="gf-form">
         <label class="gf-form-label width-10">Mode</label>
         <div class="gf-form-select-wrapper">
-          <select class="gf-form-input" ng-model="asRows" ng-options="f.value as f.text for f in [{text: 'Series as rows', value: true}, {text: 'Series as columns', value: false}]">
+          <select class="gf-form-input" ng-model="ctrl.asRows" ng-options="f.value as f.text for f in [{text: 'Series as rows', value: true}, {text: 'Series as columns', value: false}]">
           </select>
         </div>
       </div>
       <div class="gf-form">
         <label class="gf-form-label width-10">Date Time Format</label>
-        <input type="text" class="gf-form-input" ng-model="dateTimeFormat">
+        <input type="text" class="gf-form-input" ng-model="ctrl.dateTimeFormat">
       </div>
     </div>
 
     <div class="gf-form-button-row text-center">
-      <a class="btn btn-success" ng-click="export();">Export</a>
-      <a class="btn-text" ng-click="dismiss();">Cancel</a>
+      <a class="btn btn-success" ng-click="ctrl.export();">Export</a>
+      <a class="btn-text" ng-click="ctrl.dismiss();">Cancel</a>
     </div>
   </div>
 </div>

public/app/features/dashboard/export_data/export_data_modal.ts

+///<reference path="../../../headers/common.d.ts" />
+
+import angular from 'angular';
+import * as fileExport from 'app/core/utils/file_export';
+import appEvents from 'app/core/app_events';
+
+export class ExportDataModalCtrl {
+  private data: any[];
+  asRows: Boolean = true;
+  dateTimeFormat: String = 'YYYY-MM-DDTHH:mm:ssZ';
+  /** @ngInject */
+  constructor(private $scope) { }
+
+  export() {
+    if (this.asRows) {
+      fileExport.exportSeriesListToCsv(this.data, this.dateTimeFormat);
+    } else {
+      fileExport.exportSeriesListToCsvColumns(this.data, this.dateTimeFormat);
+    }
+    this.dismiss();
+  }
+
+  dismiss() {
+    appEvents.emit('hide-modal');
+  }
+}
+
+export function exportDataModal() {
+  return {
+    restrict: 'E',
+    templateUrl: 'public/app/features/dashboard/export_data/export_data_modal.html',
+    controller: ExportDataModalCtrl,
+    controllerAs: 'ctrl',
+    scope: {
+      data: '<' // The difference to '=' is that the bound properties are not watched
+    },
+    bindToController: true
+  };
+}
+
+angular.module('grafana.directives').directive('exportDataModal', exportDataModal);

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

@@ -311,11 +311,10 @@ class GraphCtrl extends MetricsPanelCtrl {
   }
 
   exportCsv() {
-    var scope = this.$scope.$new();
+    var scope = this.$scope.$new(true);
     scope.seriesList = this.seriesList;
-
     this.publishAppEvent('show-modal', {
-      src: 'public/app/features/dashboard/partials/exportCsvModal.html',
+      templateHtml: '<export-data-modal data="seriesList"></export-data-modal>',
       scope,
       modalClass: 'modal--narrow'
     });