[Table Vis] add an experimental table visualization in vis builder

To convert the table visualization into React & OUI DataGrid component,
in this PR, we did two main things:
* add an experimental table visualization
* enable it in vis builder

The experimental table vis has all the features from current table. It
does couple of things:
* restore table vis in react using OUI datagrid component
* datagrid component does not support splitted grids. For future transfer
to OUI Datagrid, we create a tableGroup in visData for splitted grids.
* restore basic pagenation, sort and format.
* implement datagrid columns
* display column title correctly
* deangular and re-use formatted column
* convert formatted column to data grid column
* restore filter in and filter out value functions
* make table vis column resizable
* format table cell to show Date and percent
* restore showTotal feature: it allows table vis to show total,
avg, min, max and count statics on count
* restore export csv feature to table vis
* split table in rows and columns

Issue Resolved:
opensearch-project#2212
opensearch-project#2213
opensearch-project#2305
opensearch-project#2379

[Table Visualization][IMPROVE] remove repeated column from split tables (opensearch-project#2583)

Currently, when we split table by columns, the split column is shown
both in the table title and as a separate column. This is not needed.
In this PR, we remove the repeated column in split tables in col.

Partically resolved:
opensearch-project#2579 (comment)

Signed-off-by: Anan Zhuang <ananzh@amazon.com>

[Table Visualization][BUG] remove local column width state (opensearch-project#2582)

* remove local col width state to allow split tables to fetch
updated col width state
* fix type errors in usePagination

Partially resolved:
opensearch-project#2579 (comment)

Signed-off-by: Anan Zhuang <ananzh@amazon.com>

Signed-off-by: Anan Zhuang <ananzh@amazon.com>

[Table Visualization][BUG] partical rows shows metrics for all columns (opensearch-project#2648)

Currently, when we enable Show partial rows in the Options panel, we see metrics been
added to every column even though Show metrics for every bucket/level is not enabled.

Metrics are added and returned when we enable the partial rows. This PR fixed the bug
by slice the returned data to allow only the last set of metrices.

Partially resolved:
opensearch-project#2579 (comment)

Signed-off-by: Anan Zhuang <ananzh@amazon.com>

config/opensearch_dashboards.yml

@@ -222,7 +222,7 @@
 
 # Set the value of this setting to true to start exploring wizard
 # functionality in Visualization.
-# vis_builder.enabled: false
+vis_builder.enabled: true
 
 # Set the value of this setting to true to enable the experimental multiple data source
 # support feature. Use with caution.

src/plugins/data/common/field_formats/field_format.ts

@@ -95,6 +95,12 @@ export abstract class FieldFormat {
  */
  public type: any = this.constructor;
 
+ /**
+ * @property {boolean} - allow numeric aggregation
+ * @private
+ */
+ allowsNumericalAggregations?: boolean;
+
  protected readonly _params: any;
  protected getConfig: FieldFormatsGetConfigFn | undefined;
 

src/plugins/vis_builder/public/application/utils/use/use_saved_vis_builder_vis.ts

@@ -14,6 +14,7 @@ import {
 import { EDIT_PATH, PLUGIN_ID } from '../../../../common';
 import { VisBuilderServices } from '../../../types';
 import { MetricOptionsDefaults } from '../../../visualizations/metric/metric_viz_type';
+import { TableOptionsDefaults } from '../../../visualizations/table/table_viz_type';
 import { getCreateBreadcrumbs, getEditBreadcrumbs } from '../breadcrumbs';
 import { getSavedVisBuilderVis } from '../get_saved_vis_builder_vis';
 import {
@@ -82,6 +83,7 @@ export const useSavedVisBuilderVis = (visualizationIdFromUrl: string | undefined
  }
 
  dispatch(setStyleState<MetricOptionsDefaults>(styleState));
+ dispatch(setStyleState<TableOptionsDefaults>(styleState));
  dispatch(setVisualizationState(visualizationState));
  }
 

src/plugins/vis_builder/public/visualizations/index.ts

@@ -5,6 +5,7 @@
 
 import type { TypeServiceSetup } from '../services/type_service';
 import { createMetricConfig } from './metric';
+import { createTableConfig } from './table';
 import { createHistogramConfig, createLineConfig, createAreaConfig } from './vislib';
 
 export function registerDefaultTypes(typeServiceSetup: TypeServiceSetup) {
@@ -13,6 +14,7 @@ export function registerDefaultTypes(typeServiceSetup: TypeServiceSetup) {
  createLineConfig,
  createAreaConfig,
  createMetricConfig,
+ createTableConfig,
  ];
 
  visualizationTypes.forEach((createTypeConfig) => {

src/plugins/vis_builder/public/visualizations/table/components/table_viz_options.tsx

@@ -0,0 +1,255 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { get, cloneDeep } from 'lodash';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { i18n } from '@osd/i18n';
+import produce from 'immer';
+import { Draft } from 'immer';
+import { EuiIconTip } from '@elastic/eui';
+import { search } from '../../../../../data/public';
+import { NumberInputOption, SwitchOption, SelectOption } from '../../../../../charts/public';
+import {
+ useTypedDispatch,
+ useTypedSelector,
+ setStyleState,
+} from '../../../application/utils/state_management';
+import { TableOptionsDefaults } from '../table_viz_type';
+import { Option } from '../../../application/app';
+import { useIndexPatterns } from '../../../application/utils/use';
+import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
+import { VisBuilderServices } from '../../../types';
+
+const { tabifyGetColumns } = search;
+
+export enum AggTypes {
+ SUM = 'sum',
+ AVG = 'avg',
+ MIN = 'min',
+ MAX = 'max',
+ COUNT = 'count',
+}
+
+const totalAggregations = [
+ {
+ value: AggTypes.SUM,
+ text: i18n.translate('visTypeTableNew.totalAggregations.sumText', {
+ defaultMessage: 'Sum',
+ }),
+ },
+ {
+ value: AggTypes.AVG,
+ text: i18n.translate('visTypeTableNew.totalAggregations.averageText', {
+ defaultMessage: 'Average',
+ }),
+ },
+ {
+ value: AggTypes.MIN,
+ text: i18n.translate('visTypeTableNewNew.totalAggregations.minText', {
+ defaultMessage: 'Min',
+ }),
+ },
+ {
+ value: AggTypes.MAX,
+ text: i18n.translate('visTypeTableNewNew.totalAggregations.maxText', {
+ defaultMessage: 'Max',
+ }),
+ },
+ {
+ value: AggTypes.COUNT,
+ text: i18n.translate('visTypeTableNewNew.totalAggregations.countText', {
+ defaultMessage: 'Count',
+ }),
+ },
+];
+
+function TableVizOptions() {
+ const perPageLabel = i18n.translate('visTypeTableNewNew.params.perPageLabel', {
+ defaultMessage: 'Max rows per page',
+ });
+ const showMetricsLabel = i18n.translate('visTypeTableNewNew.params.showMetricsLabel', {
+ defaultMessage: 'Show metrics for every bucket/level',
+ });
+ const showPartialRowsLabel = i18n.translate('visTypeTableNewNew.params.showPartialRowsLabel', {
+ defaultMessage: 'Show partial rows',
+ });
+ const showTotalLabel = i18n.translate('visTypeTableNewNew.params.showTotalLabel', {
+ defaultMessage: 'Show total',
+ });
+ const totalFunctionLabel = i18n.translate('visTypeTableNewNew.params.totalFunctionLabel', {
+ defaultMessage: 'Total function',
+ });
+ const percentageColLabel = i18n.translate('visTypeTableNewNew.params.PercentageColLabel', {
+ defaultMessage: 'Percentage column',
+ });
+ const showPartialRowsTip = i18n.translate('visTypeTableNewNew.params.showPartialRowsTip', {
+ defaultMessage:
+ 'Show rows that have partial data. This will still calculate metrics for every bucket/level, even if they are not displayed.',
+ });
+ const defaultPercentageColText = i18n.translate('visTypeTableNewNew.params.defaultPercentageCol', {
+ defaultMessage: 'Don’t show',
+ });
+ const defaultPercentageColumns = useMemo(() => [{ value: '', text: defaultPercentageColText }], [
+ defaultPercentageColText,
+ ]);
+
+ const styleState = useTypedSelector((state) => state.style) as TableOptionsDefaults;
+ const dispatch = useTypedDispatch();
+ const indexPattern = useIndexPatterns().selected;
+ const {
+ services: {
+ data: {
+ search: { aggs: aggService },
+ },
+ },
+ } = useOpenSearchDashboards<VisBuilderServices>();
+ const aggConfigParams = useTypedSelector(
+ (state) => state.visualization.activeVisualization?.aggConfigParams
+ );
+ const aggConfigs = useMemo(() => {
+ return indexPattern && aggService.createAggConfigs(indexPattern, cloneDeep(aggConfigParams));
+ }, [aggConfigParams, aggService, indexPattern]);
+
+ const setOption = useCallback(
+ (callback: (draft: Draft<typeof styleState>) => void) => {
+ const newState = produce(styleState, callback);
+ dispatch(setStyleState<TableOptionsDefaults>(newState));
+ },
+ [dispatch, styleState]
+ );
+
+ // const percentageColumns = aggConfigs
+ // ? useMemo(
+ // () => [
+ // defaultPercentageColumns,
+ // ...tabifyGetColumns(aggConfigs.getResponseAggs(), true)
+ // .filter((col) => get(col.aggConfig.toSerializedFieldFormat(), 'id') === 'number')
+ // .map(({ name }) => ({ value: name, text: name })),
+ // ],
+ // [aggConfigs]
+ // )
+ // : [defaultPercentageColumns];
+
+ const percentageColumns = useMemo(
+ () =>
+ aggConfigs
+ ? [
+ defaultPercentageColumns,
+ ...tabifyGetColumns(aggConfigs.getResponseAggs(), true)
+ .filter((col) => get(col.aggConfig.toSerializedFieldFormat(), 'id') === 'number')
+ .map(({ name }) => ({ value: name, text: name })),
+ ]
+ : [defaultPercentageColumns],
+ [aggConfigs, defaultPercentageColumns]
+ );
+
+ useEffect(() => {
+ if (
+ !percentageColumns.find(({ value }) => value === styleState.percentageCol) &&
+ percentageColumns[0] &&
+ percentageColumns[0].value !== styleState.percentageCol
+ ) {
+ setOption((draft) => {
+ draft.percentageCol = percentageColumns[0].value;
+ });
+ }
+ }, [percentageColumns, styleState.percentageCol, setOption]);
+
+ const isPerPageValid = styleState.perPage === '' || styleState.perPage > 0;
+
+ return (
+ <>
+ <Option
+ title={i18n.translate('visTypeTableNewNew.params.settingsTitle', { defaultMessage: 'Settings' })}
+ initialIsOpen
+ >
+ <NumberInputOption
+ label={
+ <>
+ {perPageLabel},
+ <EuiIconTip
+ content="Leaving this field empty means it will use number of buckets from the response."
+ position="right"
+ />
+ </>
+ }
+ isInvalid={!isPerPageValid}
+ min={1}
+ paramName="perPage"
+ value={styleState.perPage}
+ setValue={(_, value) =>
+ setOption((draft) => {
+ draft.perPage = value;
+ })
+ }
+ />
+
+ <SwitchOption
+ label={showMetricsLabel}
+ paramName="showMetricsAtAllLevels"
+ value={styleState.showMetricsAtAllLevels}
+ setValue={(_, value) =>
+ setOption((draft) => {
+ draft.showMetricsAtAllLevels = value;
+ })
+ }
+ data-test-subj="showMetricsAtAllLevels"
+ />
+
+ <SwitchOption
+ label={showPartialRowsLabel}
+ tooltip={showPartialRowsTip}
+ paramName="showPartialRows"
+ value={styleState.showPartialRows}
+ setValue={(_, value) =>
+ setOption((draft) => {
+ draft.showPartialRows = value;
+ })
+ }
+ data-test-subj="showPartialRows"
+ />
+
+ <SwitchOption
+ label={showTotalLabel}
+ paramName="showTotal"
+ value={styleState.showTotal}
+ setValue={(_, value) =>
+ setOption((draft) => {
+ draft.showTotal = value;
+ })
+ }
+ />
+
+ <SelectOption
+ label={totalFunctionLabel}
+ disabled={!styleState.showTotal}
+ options={totalAggregations}
+ paramName="totalFunc"
+ value={styleState.totalFunc}
+ setValue={(_, value) =>
+ setOption((draft) => {
+ draft.totalFunc = value;
+ })
+ }
+ />
+
+ <SelectOption
+ label={percentageColLabel}
+ options={percentageColumns}
+ paramName="percentageCol"
+ value={styleState.percentageCol}
+ setValue={(_, value) =>
+ setOption((draft) => {
+ draft.percentageCol = value;
+ })
+ }
+ id="datatableVisualizationPercentageCol"
+ />
+ </Option>
+ </>
+ );
+}
+
+export { TableVizOptions };

src/plugins/vis_builder/public/visualizations/table/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { createTableConfig } from './table_viz_type';