From 81d1f6653f70cfbdd2574bd9441ee09138dd7efc Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Mon, 25 May 2020 02:12:53 -0700
Subject: [PATCH] Download CSV: format the dates (#24992)

* export formatted dates

* remove if(true)

* display processor
---
 .../src/vector/FormattedVector.ts             | 25 +++++++++++++++
 packages/grafana-data/src/vector/index.ts     |  1 +
 .../components/Inspector/InspectDataTab.tsx   | 31 +++++++++++++++++++
 3 files changed, 57 insertions(+)
 create mode 100644 packages/grafana-data/src/vector/FormattedVector.ts

diff --git a/packages/grafana-data/src/vector/FormattedVector.ts b/packages/grafana-data/src/vector/FormattedVector.ts
new file mode 100644
index 00000000000..da58cff2815
--- /dev/null
+++ b/packages/grafana-data/src/vector/FormattedVector.ts
@@ -0,0 +1,25 @@
+import { Vector } from '../types/vector';
+import { DisplayProcessor } from '../types';
+import { formattedValueToString } from '../valueFormats';
+import { vectorToArray } from './vectorToArray';
+
+export class FormattedVector<T = any> implements Vector<string> {
+  constructor(private source: Vector<T>, private formatter: DisplayProcessor) {}
+
+  get length() {
+    return this.source.length;
+  }
+
+  get(index: number): string {
+    const v = this.source.get(index);
+    return formattedValueToString(this.formatter(v));
+  }
+
+  toArray(): string[] {
+    return vectorToArray(this);
+  }
+
+  toJSON(): string[] {
+    return this.toArray();
+  }
+}
diff --git a/packages/grafana-data/src/vector/index.ts b/packages/grafana-data/src/vector/index.ts
index 2d19d2cd07b..d5380ae4389 100644
--- a/packages/grafana-data/src/vector/index.ts
+++ b/packages/grafana-data/src/vector/index.ts
@@ -4,5 +4,6 @@ export * from './CircularVector';
 export * from './ConstantVector';
 export * from './BinaryOperationVector';
 export * from './SortedVector';
+export * from './FormattedVector';
 
 export { vectorator } from './FunctionalVector';
diff --git a/public/app/features/dashboard/components/Inspector/InspectDataTab.tsx b/public/app/features/dashboard/components/Inspector/InspectDataTab.tsx
index 6bb5bd8fd07..6622dcaa2e2 100644
--- a/public/app/features/dashboard/components/Inspector/InspectDataTab.tsx
+++ b/public/app/features/dashboard/components/Inspector/InspectDataTab.tsx
@@ -8,6 +8,11 @@ import {
   SelectableValue,
   toCSV,
   transformDataFrame,
+  getTimeField,
+  FieldType,
+  FormattedVector,
+  DisplayProcessor,
+  getDisplayProcessor,
 } from '@grafana/data';
 import { Button, Field, Icon, LegacyForms, Select, Table } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
@@ -52,6 +57,32 @@ export class InspectDataTab extends PureComponent<Props, State> {
   exportCsv = (dataFrame: DataFrame) => {
     const { panel } = this.props;
     const { transformId } = this.state;
+
+    // Replace the time field with a formatted time
+    const { timeIndex, timeField } = getTimeField(dataFrame);
+    if (timeField) {
+      // Use the configurd date or standandard time display
+      let processor: DisplayProcessor = timeField.display;
+      if (!processor) {
+        processor = getDisplayProcessor({
+          field: timeField,
+        });
+      }
+
+      const formattedDateField = {
+        ...timeField,
+        type: FieldType.string,
+        values: new FormattedVector(timeField.values, processor),
+      };
+
+      const fields = [...dataFrame.fields];
+      fields[timeIndex] = formattedDateField;
+      dataFrame = {
+        ...dataFrame,
+        fields,
+      };
+    }
+
     const dataFrameCsv = toCSV([dataFrame]);
 
     const blob = new Blob([dataFrameCsv], {