Make csv export date time format configurable

- Move export csv options to modal dialog

public/app/core/utils/file_export.ts

@@ -1,20 +1,23 @@
 ///<reference path="../../headers/common.d.ts" />
 
 import _ from 'lodash';
+import moment from 'moment';
 
 declare var window: any;
 
-export function exportSeriesListToCsv(seriesList) {
+const DEFAULT_DATETIME_FORMAT: String = 'YYYY-MM-DDTHH:mm:ssZ';
+
+export function exportSeriesListToCsv(seriesList, dateTimeFormat = DEFAULT_DATETIME_FORMAT) {
     var text = 'sep=;\nSeries;Time;Value\n';
     _.each(seriesList, function(series) {
         _.each(series.datapoints, function(dp) {
-            text += series.alias + ';' + new Date(dp[1]).toISOString() + ';' + dp[0] + '\n';
+            text += series.alias + ';' + moment(dp[1]).format(dateTimeFormat) + ';' + dp[0] + '\n';
         });
     });
     saveSaveBlob(text, 'grafana_data_export.csv');
 }
 
-export function exportSeriesListToCsvColumns(seriesList) {
+export function exportSeriesListToCsvColumns(seriesList, dateTimeFormat = DEFAULT_DATETIME_FORMAT) {
     var text = 'sep=;\nTime;';
     // add header
     _.each(seriesList, function(series) {
@@ -30,7 +33,7 @@ export function exportSeriesListToCsvColumns(seriesList) {
         var cIndex = 0;
         dataArr.push([]);
         _.each(series.datapoints, function(dp) {
-            dataArr[0][cIndex] = new Date(dp[1]).toISOString();
+            dataArr[0][cIndex] = moment(dp[1]).format(dateTimeFormat);
             dataArr[sIndex][cIndex] = dp[0];
             cIndex++;
         });

public/app/features/dashboard/all.js

@@ -21,4 +21,5 @@ define([
   './ad_hoc_filters',
   './row/row_ctrl',
   './repeat_option/repeat_option',
+  './exportCsvModalCtrl'
 ], function () {});

public/app/features/dashboard/exportCsvModalCtrl.ts

@@ -0,0 +1,32 @@
+///<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

@@ -0,0 +1,32 @@
+<div class="modal-body" ng-controller="ExportCsvModalCtrl">
+  <div class="modal-header">
+    <h2 class="modal-header-title">
+      Export CSV
+    </h2>
+
+    <a class="modal-header-close" ng-click="dismiss();">
+      <i class="fa fa-remove"></i>
+    </a>
+  </div>
+
+  <div class="modal-content">
+    <div class="p-t-2">
+      <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>
+        </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">
+      </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>
+    </div>
+  </div>
+</div>

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

@@ -11,7 +11,6 @@ import moment from 'moment';
 import _ from 'lodash';
 import TimeSeries from 'app/core/time_series2';
 import config from 'app/core/config';
-import * as fileExport from 'app/core/utils/file_export';
 import {MetricsPanelCtrl, alertTab} from 'app/plugins/sdk';
 import {DataProcessor} from './data_processor';
 import {axesEditorComponent} from './axes_editor';
@@ -147,8 +146,7 @@ class GraphCtrl extends MetricsPanelCtrl {
   }
 
   onInitPanelActions(actions) {
-    actions.push({text: 'Export CSV (series as rows)', click: 'ctrl.exportCsv()'});
-    actions.push({text: 'Export CSV (series as columns)', click: 'ctrl.exportCsvColumns()'});
+    actions.push({text: 'Export CSV', click: 'ctrl.exportCsv()'});
     actions.push({text: 'Toggle legend', click: 'ctrl.toggleLegend()'});
   }
 
@@ -313,13 +311,15 @@ class GraphCtrl extends MetricsPanelCtrl {
   }
 
   exportCsv() {
-    fileExport.exportSeriesListToCsv(this.seriesList);
-  }
+    var scope = this.$scope.$new();
+    scope.seriesList = this.seriesList;
 
-  exportCsvColumns() {
-    fileExport.exportSeriesListToCsvColumns(this.seriesList);
+    this.publishAppEvent('show-modal', {
+      src: 'public/app/features/dashboard/partials/exportCsvModal.html',
+      scope,
+      modalClass: 'modal--narrow'
+    });
   }
-
 }
 
 export {GraphCtrl, GraphCtrl as PanelCtrl};