Download CSV: format the dates (#24992)

* export formatted dates

* remove if(true)

* display processor

packages/grafana-data/src/vector/FormattedVector.ts

+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();
+  }
+}

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';

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], {