From e763104a6f16d46f57c7c14397b9f469c10618e9 Mon Sep 17 00:00:00 2001
From: Daniel Lee <dan.limerick@gmail.com>
Date: Wed, 23 Aug 2017 15:17:51 +0200
Subject: [PATCH] csv: add toggle for export to Excel

Adds back feature that adds 'sep=;' text that excel needs in a csv file.
Also adds toggle to make this optional if exporting to other spreadsheet
programs. Fixes #9083.
---
 public/app/core/utils/file_export.ts               | 12 ++++++------
 .../dashboard/export_data/export_data_modal.html   |  8 ++++++--
 .../dashboard/export_data/export_data_modal.ts     | 14 +++++++++++---
 public/app/plugins/panel/table/module.ts           |  9 ++++++++-
 4 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/public/app/core/utils/file_export.ts b/public/app/core/utils/file_export.ts
index 960be37230c..96af397fadf 100644
--- a/public/app/core/utils/file_export.ts
+++ b/public/app/core/utils/file_export.ts
@@ -7,8 +7,8 @@ declare var window: any;
 
 const DEFAULT_DATETIME_FORMAT: String = 'YYYY-MM-DDTHH:mm:ssZ';
 
-export function exportSeriesListToCsv(seriesList, dateTimeFormat = DEFAULT_DATETIME_FORMAT) {
-    var text = 'Series;Time;Value\n';
+export function exportSeriesListToCsv(seriesList, dateTimeFormat = DEFAULT_DATETIME_FORMAT, excel = false) {
+    var text = excel ? 'sep=;\n' : '' + 'Series;Time;Value\n';
     _.each(seriesList, function(series) {
         _.each(series.datapoints, function(dp) {
             text += series.alias + ';' + moment(dp[1]).format(dateTimeFormat) + ';' + dp[0] + '\n';
@@ -17,8 +17,8 @@ export function exportSeriesListToCsv(seriesList, dateTimeFormat = DEFAULT_DATET
     saveSaveBlob(text, 'grafana_data_export.csv');
 }
 
-export function exportSeriesListToCsvColumns(seriesList, dateTimeFormat = DEFAULT_DATETIME_FORMAT) {
-    var text = 'Time;';
+export function exportSeriesListToCsvColumns(seriesList, dateTimeFormat = DEFAULT_DATETIME_FORMAT, excel = false) {
+    var text = excel ? 'sep=;\n' : '' + 'Time;';
     // add header
     _.each(seriesList, function(series) {
         text += series.alias + ';';
@@ -52,8 +52,8 @@ export function exportSeriesListToCsvColumns(seriesList, dateTimeFormat = DEFAUL
     saveSaveBlob(text, 'grafana_data_export.csv');
 }
 
-export function exportTableDataToCsv(table) {
-    var text = '';
+export function exportTableDataToCsv(table, excel = false) {
+  var text = excel ? 'sep=;\n' : '';
     // add header
     _.each(table.columns, function(column) {
         text += (column.title || column.text) + ';';
diff --git a/public/app/features/dashboard/export_data/export_data_modal.html b/public/app/features/dashboard/export_data/export_data_modal.html
index ad6494f16cc..8e46d121e95 100644
--- a/public/app/features/dashboard/export_data/export_data_modal.html
+++ b/public/app/features/dashboard/export_data/export_data_modal.html
@@ -11,17 +11,21 @@
 
   <div class="modal-content">
     <div class="p-t-2">
-      <div class="gf-form">
+      <div class="gf-form" ng-hide="ctrl.panel === 'table'">
         <label class="gf-form-label width-10">Mode</label>
         <div class="gf-form-select-wrapper">
           <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">
+      <div class="gf-form" ng-hide="ctrl.panel === 'table'">
         <label class="gf-form-label width-10">Date Time Format</label>
         <input type="text" class="gf-form-input" ng-model="ctrl.dateTimeFormat">
       </div>
+      <gf-form-switch class="gf-form"
+        label="Export To Excel" label-class="width-12" switch-class="max-width-6"
+        checked="ctrl.excel">
+      </gf-form-switch>
     </div>
 
     <div class="gf-form-button-row text-center">
diff --git a/public/app/features/dashboard/export_data/export_data_modal.ts b/public/app/features/dashboard/export_data/export_data_modal.ts
index 80b2ff7d2f2..559d03c5dca 100644
--- a/public/app/features/dashboard/export_data/export_data_modal.ts
+++ b/public/app/features/dashboard/export_data/export_data_modal.ts
@@ -6,17 +6,24 @@ import appEvents from 'app/core/app_events';
 
 export class ExportDataModalCtrl {
   private data: any[];
+  private panel: string;
   asRows: Boolean = true;
   dateTimeFormat: String = 'YYYY-MM-DDTHH:mm:ssZ';
+  excel: false;
   /** @ngInject */
   constructor(private $scope) { }
 
   export() {
-    if (this.asRows) {
-      fileExport.exportSeriesListToCsv(this.data, this.dateTimeFormat);
+    if (this.panel === 'table') {
+      fileExport.exportTableDataToCsv(this.data, this.excel);
     } else {
-      fileExport.exportSeriesListToCsvColumns(this.data, this.dateTimeFormat);
+      if (this.asRows) {
+        fileExport.exportSeriesListToCsv(this.data, this.dateTimeFormat, this.excel);
+      } else {
+        fileExport.exportSeriesListToCsvColumns(this.data, this.dateTimeFormat, this.excel);
+      }
     }
+
     this.dismiss();
   }
 
@@ -32,6 +39,7 @@ export function exportDataModal() {
     controller: ExportDataModalCtrl,
     controllerAs: 'ctrl',
     scope: {
+      panel: '<',
       data: '<' // The difference to '=' is that the bound properties are not watched
     },
     bindToController: true
diff --git a/public/app/plugins/panel/table/module.ts b/public/app/plugins/panel/table/module.ts
index 8acf14f56ca..75f96fe200f 100644
--- a/public/app/plugins/panel/table/module.ts
+++ b/public/app/plugins/panel/table/module.ts
@@ -148,7 +148,14 @@ class TablePanelCtrl extends MetricsPanelCtrl {
   }
 
   exportCsv() {
-    FileExport.exportTableDataToCsv(this.renderer.render_values());
+    var scope = this.$scope.$new(true);
+    scope.tableData = this.renderer.render_values();
+    scope.panel = 'table';
+    this.publishAppEvent('show-modal', {
+      templateHtml: '<export-data-modal panel="panel" data="tableData"></export-data-modal>',
+      scope,
+      modalClass: 'modal--narrow'
+    });
   }
 
   link(scope, elem, attrs, ctrl) {