[Table Visualization] Replace table visualization with React and Data…

…Grid

In this PR, we add back functions to make new table usage to
be consistent with the replaced one.
* total function
* percentage column
* filter in/out

Meanwhile, we also add back server. Functional tests are removed.
We will add new functional test in opensearch-dashboards-functional-test
repo. We also clean out some legacy codes.

Issue Resolved:
#2855

Signed-off-by: Anan Zhuang <[email protected]>

CHANGELOG.md

@@ -45,6 +45,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Vis Builder] Add an experimental table visualization in vis builder ([#2705](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2705))
 - [Vis Builder] Add field summary popovers ([#2682](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2682))
 - Add yarn opensearch arg to setup plugin dependencies ([#2544](https://github.com/opensearch-project/OpenSearch-Dashboards/issues/2544))
+- [Table Visualization] Replace table visualization using React and DataGrid component ([#2863](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2863))
 
 ### 🐛 Bug Fixes
 

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/visualizations/table/components/table_viz_options.tsx

@@ -3,14 +3,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { get } from 'lodash';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
 import produce from 'immer';
 import { Draft } from 'immer';
 import { EuiIconTip } from '@elastic/eui';
-import { search } from '../../../../../data/public';
 import { NumberInputOption, SwitchOption } from '../../../../../charts/public';
 import {
   useTypedDispatch,

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

@@ -4,7 +4,7 @@
  */
 
 import { SchemaConfig } from '../../../../visualizations/public';
-import { TableVisExpressionFunctionDefinition } from '../../../../vis_type_table_new/public';
+import { TableVisExpressionFunctionDefinition } from '../../../../vis_type_table/public';
 import { AggConfigs, IAggConfig } from '../../../../data/common';
 import { buildExpression, buildExpressionFunction } from '../../../../expressions/public';
 import { RenderState } from '../../application/utils/state_management';
@@ -120,7 +120,7 @@ export const toExpression = async ({ style: styleState, visualization }: TableRo
   };
 
   const tableVis = buildExpressionFunction<TableVisExpressionFunctionDefinition>(
-    'opensearch_dashboards_table_new',
+    'opensearch_dashboards_table',
     {
       visConfig: JSON.stringify(visConfig),
     }

src/plugins/vis_type_table/README.md

@@ -1 +1,36 @@
-Contains the data table visualization, that allows presenting data in a simple table format.
+# Data Table
+
+This is an OpenSearch Dashboards plugin that is used to visualize data and aggregations in tabular format.
+
+## Create Data Table
+To create a data table in OpenSearch Dashboards, first select `Visualize` from the navigation menu. Then click `Create Visualization` and choose `Data Table` as the visualization type.
+
+## Select Metrics
+
+### Metrics Aggregation
+At the `Metrics`, select the metric aggregation type from the menu and config it accordinly.
+
+### Buckets Aggregation
+At the `Buckets`, config the columns to be displayed in the table visualization.
+- `Split Rows` allows you to add another column to the table.
+- `Split Table` splits the table into seperate tables for the aggregation you choose.
+
+## Select Options
+In the `Options` tab, you could config more options.
+- `Max rows per page` is the maximum number of rows displayed per page.
+- `Show metrics for every bucket/level` adds metrics aggregation to every columns.
+- `Show partial rows` will include data with missing columns.
+- `Show total` calculates the selected metrics per column and displays the result at the bottom.
+- `Percentage column` adds one percentage column based on the chosen metrics aggregation.
+
+## Example
+
+Below is an example of creating a table visualization using sample ecommerce data.
+
+- Create a new data table visualization and set a relative time 15 weeks ago.
+- Compute the count of ecommerce: Choose `Count` in Metrics Aggregation.
+- Split the rows on the top 5 of `manufacturer.keyword` ordered by `Metric:Count` in descending and add a label "manufacturer".
+geoip.city_name
+- Split the table in rows on the top 5 of `geoip.city_name` ordered by `Metric:Count` in ascending order.
+- Click the `Save` button on the top left and save the visualization as "Top manufacturers by count per city".
+- Choose a table and click the download icon to download the table.

src/plugins/vis_type_table/opensearch_dashboards.json

@@ -6,13 +6,13 @@
   "requiredPlugins": [
     "expressions",
     "visualizations",
-    "data",
-    "opensearchDashboardsLegacy"
+    "data"
   ],
   "requiredBundles": [
     "opensearchDashboardsUtils",
-    "share",
+    "opensearchDashboardsReact",
     "charts",
+    "share",
     "visDefaultEditor"
   ]
 }