From 91caca99448c259733f2f1768eca42fb39d9cdbd Mon Sep 17 00:00:00 2001 From: Anan Zhuang Date: Wed, 12 Oct 2022 23:49:34 +0000 Subject: [PATCH] [Table Visualization]restore export csv feature to table vis * add addtional action in toolbar to allow export data to csv. there are two types of csv, raw and formatted. raw is the original data and formatted is to show formatted Date and percentage data when needed. * when table is not saved, export csv file will be named as unsaved-raw.csv if choose raw. when table is saved with a filename, it will be saved as [filename]-[raw/formatted].csv Partically resolved: https://github.com/opensearch-project/OpenSearch-Dashboards/issues/2379 Signed-off-by: Anan Zhuang --- .../vis_type_table/opensearch_dashboards.json | 1 + .../public/components/table_vis_component.tsx | 24 +++++- .../public/components/table_vis_control.tsx | 57 +++++++++++++ src/plugins/vis_type_table/public/to_ast.ts | 1 + src/plugins/vis_type_table/public/types.ts | 1 + .../public/utils/convert_to_csv_data.ts | 85 +++++++++++++++++++ 6 files changed, 166 insertions(+), 3 deletions(-) create mode 100644 src/plugins/vis_type_table/public/components/table_vis_control.tsx create mode 100644 src/plugins/vis_type_table/public/utils/convert_to_csv_data.ts diff --git a/src/plugins/vis_type_table/opensearch_dashboards.json b/src/plugins/vis_type_table/opensearch_dashboards.json index 5ba8545250e0..668331680549 100644 --- a/src/plugins/vis_type_table/opensearch_dashboards.json +++ b/src/plugins/vis_type_table/opensearch_dashboards.json @@ -12,6 +12,7 @@ "opensearchDashboardsUtils", "opensearchDashboardsReact", "charts", + "share", "visDefaultEditor" ] } \ No newline at end of file diff --git a/src/plugins/vis_type_table/public/components/table_vis_component.tsx b/src/plugins/vis_type_table/public/components/table_vis_component.tsx index 5d4739c4eaa5..98f84faa7755 100644 --- a/src/plugins/vis_type_table/public/components/table_vis_component.tsx +++ b/src/plugins/vis_type_table/public/components/table_vis_component.tsx @@ -13,14 +13,21 @@ import { TableVisConfig, ColumnWidth, SortColumn } from '../types'; import { getDataGridColumns } from './table_vis_grid_columns'; import { usePagination } from '../utils'; import { convertToFormattedData } from '../utils/convert_to_formatted_data'; +import { TableVisControl } from './table_vis_control'; interface TableVisComponentProps { + title?: string; table: Table; visConfig: TableVisConfig; handlers: IInterpreterRenderHandlers; } -export const TableVisComponent = ({ table, visConfig, handlers }: TableVisComponentProps) => { +export const TableVisComponent = ({ + title, + table, + visConfig, + handlers, +}: TableVisComponentProps) => { const { formattedRows: rows, formattedColumns: columns } = convertToFormattedData( table, visConfig @@ -32,7 +39,7 @@ export const TableVisComponent = ({ table, visConfig, handlers }: TableVisCompon const currentColState = useRef<{ columnsWidth: ColumnWidth[]; }>({ - columnsWidth: handlers.uiState.get('vis.columnsWidth'), + columnsWidth: handlers.uiState.get('vis.columnsWidth') || [], }); const sortedRows = useMemo(() => { @@ -97,9 +104,11 @@ export const TableVisComponent = ({ table, visConfig, handlers }: TableVisCompon [columns, currentColState, handlers.uiState] ); + const ariaLabel = title || visConfig.title || 'tableVis'; + return ( id), @@ -110,6 +119,15 @@ export const TableVisComponent = ({ table, visConfig, handlers }: TableVisCompon sorting={{ columns: sortedColumns, onSort }} onColumnResize={onColumnResize} pagination={pagination} + toolbarVisibility={{ + showColumnSelector: false, + showSortSelector: false, + showFullScreenSelector: false, + showStyleSelector: false, + additionalControls: ( + + ), + }} /> ); }; diff --git a/src/plugins/vis_type_table/public/components/table_vis_control.tsx b/src/plugins/vis_type_table/public/components/table_vis_control.tsx new file mode 100644 index 000000000000..a190177df2a7 --- /dev/null +++ b/src/plugins/vis_type_table/public/components/table_vis_control.tsx @@ -0,0 +1,57 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { useState } from 'react'; +import { EuiPopover, EuiButtonEmpty, EuiContextMenuPanel, EuiContextMenuItem } from '@elastic/eui'; +import { OpenSearchDashboardsDatatableRow } from 'src/plugins/expressions'; +import { CoreStart } from 'opensearch-dashboards/public'; +import { exportAsCsv } from '../utils/convert_to_csv_data'; +import { FormattedColumn } from '../types'; +import { useOpenSearchDashboards } from '../../../../../src/plugins/opensearch_dashboards_react/public'; + +interface TableVisControlProps { + filename?: string; + rows: OpenSearchDashboardsDatatableRow[]; + columns: FormattedColumn[]; +} + +export const TableVisControl = (props: TableVisControlProps) => { + const { + services: { uiSettings }, + } = useOpenSearchDashboards(); + const [isPopoverOpen, setPopover] = useState(false); + + return ( + setPopover((open) => !open)}> + Export + + } + isOpen={isPopoverOpen} + closePopover={() => setPopover(false)} + panelPaddingSize="none" + > + exportAsCsv(false, { ...props, uiSettings })} + > + Raw + , + exportAsCsv(true, { ...props, uiSettings })} + > + Formatted + , + ]} + /> + + ); +}; diff --git a/src/plugins/vis_type_table/public/to_ast.ts b/src/plugins/vis_type_table/public/to_ast.ts index 67381388d18a..3ef0fdc56cd4 100644 --- a/src/plugins/vis_type_table/public/to_ast.ts +++ b/src/plugins/vis_type_table/public/to_ast.ts @@ -23,6 +23,7 @@ export const toExpressionAst = (vis: Vis, params: any) => { const schemas = getVisSchemas(vis, params); const tableData = { + title: vis.title, metrics: schemas.metric, buckets: schemas.bucket || [], splitRow: schemas.split_row, diff --git a/src/plugins/vis_type_table/public/types.ts b/src/plugins/vis_type_table/public/types.ts index f93f338893ca..35957ead902a 100644 --- a/src/plugins/vis_type_table/public/types.ts +++ b/src/plugins/vis_type_table/public/types.ts @@ -40,6 +40,7 @@ export enum AggTypes { } export interface TableVisConfig extends TableVisParams { + title: string; metrics: SchemaConfig[]; buckets: SchemaConfig[]; splitRow?: SchemaConfig[]; diff --git a/src/plugins/vis_type_table/public/utils/convert_to_csv_data.ts b/src/plugins/vis_type_table/public/utils/convert_to_csv_data.ts new file mode 100644 index 000000000000..2c37df1aa3d5 --- /dev/null +++ b/src/plugins/vis_type_table/public/utils/convert_to_csv_data.ts @@ -0,0 +1,85 @@ +/* + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Any modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +/* + * 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 { isObject } from 'lodash'; +// @ts-ignore +import { saveAs } from '@elastic/filesaver'; +import { CoreStart } from 'opensearch-dashboards/public'; +import { CSV_SEPARATOR_SETTING, CSV_QUOTE_VALUES_SETTING } from '../../../share/public'; +import { OpenSearchDashboardsDatatable } from '../../../expressions/public'; +import { FormattedColumn } from '../types'; + +const nonAlphaNumRE = /[^a-zA-Z0-9]/; +const allDoubleQuoteRE = /"/g; + +interface CSVDataProps { + filename?: string; + rows: OpenSearchDashboardsDatatable['rows']; + columns: FormattedColumn[]; + uiSettings: CoreStart['uiSettings']; +} + +const toCsv = function (formatted: boolean, { rows, columns, uiSettings }: CSVDataProps) { + const separator = uiSettings.get(CSV_SEPARATOR_SETTING); + const quoteValues = uiSettings.get(CSV_QUOTE_VALUES_SETTING); + + function escape(val: any) { + if (!formatted && isObject(val)) val = val.valueOf(); + val = String(val); + if (quoteValues && nonAlphaNumRE.test(val)) { + val = '"' + val.replace(allDoubleQuoteRE, '""') + '"'; + } + return val; + } + + let csvRows: string[][] = []; + for (const row of rows) { + const rowArray = []; + for (const col of columns) { + const value = row[col.id]; + const formattedValue = + formatted && col.formatter ? escape(col.formatter.convert(value)) : escape(value); + rowArray.push(formattedValue); + } + csvRows = [...csvRows, rowArray]; + } + + // add the columns to the rows + csvRows.unshift(columns.map((col) => escape(col.title))); + + return csvRows.map((row) => row.join(separator) + '\r\n').join(''); +}; + +export const exportAsCsv = function (formatted: boolean, csvData: CSVDataProps) { + const csv = new Blob([toCsv(formatted, csvData)], { type: 'text/csv;charset=utf-8' }); + const type = formatted ? 'formatted' : 'raw'; + if (csvData.filename) saveAs(csv, `${csvData.filename}-${type}.csv`); + else saveAs(csv, `unsaved-${type}.csv`); +};