[Lens] CSV Export for Lens

docs/development/plugins/data/public/kibana-plugin-plugins-data-public.exportascsvs.md

@@ -0,0 +1,26 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [exportAsCSVs](./kibana-plugin-plugins-data-public.exportascsvs.md)
+
+## exportAsCSVs() function
+
+<b>Signature:</b>
+
+```typescript
+export declare function exportAsCSVs(filename: string, datatables: Record<string, Datatable> | undefined, { asString, ...options }: CSVOptions): Record<string, string> | undefined;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  filename | <code>string</code> | filename to use (either as is, or as prefix for multiple CSVs) for the files to download |
+|  datatables | <code>Record&lt;string, Datatable&gt; &#124; undefined</code> | data (as a dictionary of Datatable) to be translated into CSVs. It can contain multiple tables. |
+|  { asString, ...options } | <code>CSVOptions</code> |  |
+
+<b>Returns:</b>
+
+`Record<string, string> | undefined`
+
+undefined (download) - Record<!-- -->&lt;<!-- -->string, string<!-- -->&gt; (only for testing)
+

docs/development/plugins/data/public/kibana-plugin-plugins-data-public.md

@@ -41,6 +41,7 @@
 
 |  Function | Description |
 |  --- | --- |
+|  [exportAsCSVs(filename, datatables, { asString, ...options })](./kibana-plugin-plugins-data-public.exportascsvs.md) |  |
 |  [getDefaultQuery(language)](./kibana-plugin-plugins-data-public.getdefaultquery.md) |  |
 |  [getEsPreference(uiSettings, sessionId)](./kibana-plugin-plugins-data-public.getespreference.md) |  |
 |  [getSearchParamsFromRequest(searchRequest, dependencies)](./kibana-plugin-plugins-data-public.getsearchparamsfromrequest.md) |  |

src/plugins/data/public/exports/export_csv.test.ts

@@ -0,0 +1,116 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Datatable } from 'src/plugins/expressions';
+import { FieldFormat } from '../../common/field_formats';
+import { exportAsCSVs } from './export_csv';
+
+function getDefaultOptions() {
+  const formatFactory = jest.fn();
+  formatFactory.mockReturnValue({ convert: (v: unknown) => `Formatted_${v}` } as FieldFormat);
+  return {
+    csvSeparator: ',',
+    quoteValues: true,
+    formatFactory,
+    // this is for testing
+    asString: true,
+  };
+}
+
+function getDataTable({
+  multipleLayers,
+  multipleColumns,
+}: { multipleLayers?: boolean; multipleColumns?: boolean } = {}): Record<string, Datatable> {
+  const datatables: Record<string, Datatable> = {
+    layer1: {
+      type: 'datatable',
+      columns: [{ id: 'col1', name: 'columnOne', meta: { type: 'string' } }],
+      rows: [{ col1: 'value' }],
+    },
+  };
+  if (multipleColumns) {
+    datatables.layer1.columns.push({ id: 'col2', name: 'columnTwo', meta: { type: 'number' } });
+    datatables.layer1.rows[0].col2 = 5;
+  }
+  if (multipleLayers) {
+    datatables.layer2 = {
+      type: 'datatable',
+      columns: [{ id: 'col1', name: 'columnOne', meta: { type: 'string' } }],
+      rows: [{ col1: 'value' }],
+    };
+  }
+  return datatables;
+}
+
+describe('CSV exporter', () => {
+  test('should do nothing with no data', () => {
+    expect(exportAsCSVs('noData', undefined, getDefaultOptions())).toStrictEqual(undefined);
+  });
+
+  test('should not break with empty data', () => {
+    expect(exportAsCSVs('emptyFile', {}, getDefaultOptions())).toStrictEqual({});
+  });
+
+  test('should export formatted values by default', () => {
+    expect(exportAsCSVs('oneCSV', getDataTable(), getDefaultOptions())).toStrictEqual({
+      'oneCSV.csv': 'columnOne\r\n"Formatted_value"\r\n',
+    });
+  });
+
+  test('should not quote values when requested', () => {
+    return expect(
+      exportAsCSVs('oneCSV', getDataTable(), { ...getDefaultOptions(), quoteValues: false })
+    ).toStrictEqual({
+      'oneCSV.csv': 'columnOne\r\nFormatted_value\r\n',
+    });
+  });
+
+  test('should use raw values when requested', () => {
+    expect(
+      exportAsCSVs('oneCSV', getDataTable(), { ...getDefaultOptions(), raw: true })
+    ).toStrictEqual({
+      'oneCSV.csv': 'columnOne\r\nvalue\r\n',
+    });
+  });
+
+  test('should use separator for multiple columns', () => {
+    expect(
+      exportAsCSVs('oneCSV', getDataTable({ multipleColumns: true }), getDefaultOptions())
+    ).toStrictEqual({
+      'oneCSV.csv': 'columnOne,columnTwo\r\n"Formatted_value","Formatted_5"\r\n',
+    });
+  });
+
+  test('should support multiple layers', () => {
+    expect(
+      exportAsCSVs('twoCSVs', getDataTable({ multipleLayers: true }), getDefaultOptions())
+    ).toStrictEqual({
+      'twoCSVs-1.csv': 'columnOne\r\n"Formatted_value"\r\n',
+      'twoCSVs-2.csv': 'columnOne\r\n"Formatted_value"\r\n',
+    });
+  });
+
+  test('should escape values', () => {
+    const datatables = getDataTable();
+    datatables.layer1.rows[0].col1 = '"value"';
+    expect(exportAsCSVs('oneCSV', datatables, getDefaultOptions())).toStrictEqual({
+      'oneCSV.csv': 'columnOne\r\n"Formatted_""value"""\r\n',
+    });
+  });
+});

src/plugins/data/public/exports/export_csv.tsx

@@ -0,0 +1,145 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// Inspired by the inspector CSV exporter
+
+// @ts-ignore
+import { saveAs } from '@elastic/filesaver';
+import pMap from 'p-map';
+
+import { FormatFactory } from 'src/plugins/data/common/field_formats/utils';
+import { Datatable } from 'src/plugins/expressions';
+
+const LINE_FEED_CHARACTER = '\r\n';
+const nonAlphaNumRE = /[^a-zA-Z0-9]/;
+const allDoubleQuoteRE = /"/g;
+
+// TODO: enhance this later on
+function escape(val: object | string, quoteValues: boolean) {
+  if (val != null && typeof val === 'object') {
+    val = val.valueOf();
+  }
+
+  val = String(val);
+
+  if (quoteValues && nonAlphaNumRE.test(val)) {
+    val = `"${val.replace(allDoubleQuoteRE, '""')}"`;
+  }
+
+  return val;
+}
+
+interface CSVOptions {
+  csvSeparator: string;
+  quoteValues: boolean;
+  formatFactory: FormatFactory;
+  raw?: boolean;
+  asString?: boolean; // use it for testing
+}
+
+function buildCSV(
+  { columns, rows }: Datatable,
+  { csvSeparator, quoteValues, formatFactory, raw }: Omit<CSVOptions, 'asString'>
+) {
+  // Build the header row by its names
+  const header = columns.map((col) => escape(col.name, quoteValues));
+
+  const formatters = columns.reduce<Record<string, ReturnType<FormatFactory>>>(
+    (memo, { id, meta }) => {
+      memo[id] = formatFactory(meta?.params);
+      return memo;
+    },
+    {}
+  );
+
+  // Convert the array of row objects to an array of row arrays
+  const csvRows = rows.map((row) => {
+    return columns.map((column) =>
+      escape(raw ? row[column.id] : formatters[column.id].convert(row[column.id]), quoteValues)
+    );
+  });
+
+  return (
+    [header, ...csvRows].map((row) => row.join(csvSeparator)).join(LINE_FEED_CHARACTER) +
+    LINE_FEED_CHARACTER
+  ); // Add \r\n after last line
+}
+
+/**
+ *
+ * @param filename - filename to use (either as is, or as prefix for multiple CSVs) for the files to download
+ * @param datatables - data (as a dictionary of Datatable) to be translated into CSVs. It can contain multiple tables.
+ * @param options - set of options for the exporter
+ *
+ * @returns undefined (download) - Record\<string, string\> (only for testing)
+ */
+export function exportAsCSVs(
+  filename: string,
+  datatables: Record<string, Datatable> | undefined,
+  { asString, ...options }: CSVOptions
+) {
+  if (datatables == null) {
+    return;
+  }
+  // build a csv for datatable layer
+  const csvs = Object.keys(datatables)
+    .filter((layerId) => {
+      return (
+        datatables[layerId].columns.length &&
+        datatables[layerId].rows.length &&
+        datatables[layerId].rows.every((row) => Object.keys(row).length)
+      );
+    })
+    .reduce<Record<string, string>>((memo, layerId) => {
+      memo[layerId] = buildCSV(datatables[layerId], options);
+      return memo;
+    }, {});
+
+  const layerIds = Object.keys(csvs);
+
+  // useful for testing
+  if (asString) {
+    return layerIds.reduce<Record<string, string>>((memo, layerId, i) => {
+      const content = csvs[layerId];
+      const postFix = layerIds.length > 1 ? `-${i + 1}` : '';
+      memo[`${filename}${postFix}.csv`] = content;
+      return memo;
+    }, {});
+  }
+
+  const type = 'text/plain;charset=utf-8';
+
+  const downloadQueue = layerIds.map((layerId, i) => {
+    const blob = new Blob([csvs[layerId]], { type });
+    const postFix = layerIds.length > 1 ? `-${i + 1}` : '';
+    // TODO: remove this workaround for multiple files when fixed (in filesaver?)
+    return () => Promise.resolve().then(() => saveAs(blob, `${filename}${postFix}.csv`));
+  });
+
+  // There's a bug in some browser with multiple files downloaded at once
+  // * sometimes only the first/last content is downloaded multiple times
+  // * sometimes only the first/last filename is used multiple times
+  pMap(downloadQueue, (downloadFn) => Promise.all([downloadFn(), wait(50)]), {
+    concurrency: 1,
+  });
+}
+// Probably there's already another one around?
+function wait(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

src/plugins/data/public/exports/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from './export_csv';

src/plugins/data/public/index.ts

@@ -212,6 +212,12 @@ export {
   FieldFormat,
 } from '../common';
 
+/**
+ * Exporters (CSV)
+ */
+
+export * from './exports';
+
 /*
  * Index patterns:
  */