[Backport 2.4] [Vis Builder] Add an experimental table visualization in vis builder

src/plugins/vis_builder/README.md

@@ -31,6 +31,6 @@ Outline:
 
 **Notes:**
 
-- Currently only the metric viz is defined, so schema properties that other vis types might need may be missing and require further setup.
+- Currently only the metric and table viz are defined, so schema properties that other vis types might need may be missing and require further setup.
 - `to_expression` has not yet been abstracted into a common utility for different visualizations. Adding more visualization types should make it easier to identify which parts of expression creation are common, and which are visualization-specific.
 

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

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

src/plugins/vis_builder/public/visualizations/common/expression_helpers.ts

@@ -9,8 +9,12 @@ import { ExpressionFunctionOpenSearchDashboards } from '../../../../expressions'
 import { buildExpressionFunction } from '../../../../expressions/public';
 import { VisualizationState } from '../../application/utils/state_management';
 import { getSearchService, getIndexPatterns } from '../../plugin_services';
+import { StyleState } from '../../application/utils/state_management';
 
-export const getAggExpressionFunctions = async (visualization: VisualizationState) => {
+export const getAggExpressionFunctions = async (
+  visualization: VisualizationState,
+  style?: StyleState
+) => {
   const { activeVisualization, indexPattern: indexId = '' } = visualization;
   const { aggConfigParams } = activeVisualization || {};
 
@@ -32,8 +36,8 @@ export const getAggExpressionFunctions = async (visualization: VisualizationStat
     'opensearchaggs',
     {
       index: indexId,
-      metricsAtAllLevels: false,
-      partialRows: false,
+      metricsAtAllLevels: style?.showMetricsAtAllLevels || false,
+      partialRows: style?.showPartialRows || false,
       aggConfigs: JSON.stringify(aggConfigs.aggs),
       includeFormatHints: false,
     }

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,109 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { get } from 'lodash';
+import React, { useCallback, useEffect, useMemo } 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,
+  useTypedSelector,
+  setStyleState,
+} from '../../../application/utils/state_management';
+import { TableOptionsDefaults } from '../table_viz_type';
+import { Option } from '../../../application/app';
+
+function TableVizOptions() {
+  const styleState = useTypedSelector((state) => state.style) as TableOptionsDefaults;
+  const dispatch = useTypedDispatch();
+
+  const setOption = useCallback(
+    (callback: (draft: Draft<typeof styleState>) => void) => {
+      const newState = produce(styleState, callback);
+      dispatch(setStyleState<TableOptionsDefaults>(newState));
+    },
+    [dispatch, styleState]
+  );
+
+  const isPerPageValid = styleState.perPage === '' || styleState.perPage > 0;
+
+  return (
+    <>
+      <Option
+        title={i18n.translate('visTypeTableNewNew.params.settingsTitle', {
+          defaultMessage: 'Settings',
+        })}
+        initialIsOpen
+      >
+        <NumberInputOption
+          label={
+            <>
+              {i18n.translate('visTypeTableNewNew.params.perPageLabel', {
+                defaultMessage: 'Max rows per page',
+              })}
+              <EuiIconTip
+                content={
+                  <FormattedMessage
+                    id="visTypeTableNewNews.field.emptyTooltip"
+                    defaultMessage="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={i18n.translate('visTypeTableNewNew.params.showMetricsLabel', {
+            defaultMessage: 'Show metrics for every bucket/level',
+          })}
+          paramName="showMetricsAtAllLevels"
+          value={styleState.showMetricsAtAllLevels}
+          setValue={(_, value) =>
+            setOption((draft) => {
+              draft.showMetricsAtAllLevels = value;
+            })
+          }
+          data-test-subj="showMetricsAtAllLevels"
+        />
+
+        <SwitchOption
+          label={i18n.translate('visTypeTableNewNew.params.showPartialRowsLabel', {
+            defaultMessage: 'Show partial rows',
+          })}
+          tooltip={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.',
+          })}
+          paramName="showPartialRows"
+          value={styleState.showPartialRows}
+          setValue={(_, value) =>
+            setOption((draft) => {
+              draft.showPartialRows = value;
+            })
+          }
+          data-test-subj="showPartialRows"
+        />
+      </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';

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

@@ -0,0 +1,95 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { i18n } from '@osd/i18n';
+import { Schemas } from '../../../../vis_default_editor/public';
+import { AggGroupNames } from '../../../../data/public';
+import { TableVizOptions } from './components/table_viz_options';
+import { VisualizationTypeOptions } from '../../services/type_service';
+import { toExpression } from './to_expression';
+
+export interface TableOptionsDefaults {
+  perPage: number | '';
+  showPartialRows: boolean;
+  showMetricsAtAllLevels: boolean;
+}
+
+export const createTableConfig = (): VisualizationTypeOptions<TableOptionsDefaults> => ({
+  name: 'table',
+  title: 'Table',
+  icon: 'visTable',
+  description: 'Display table visualizations',
+  toExpression,
+  ui: {
+    containerConfig: {
+      data: {
+        schemas: new Schemas([
+          {
+            group: AggGroupNames.Metrics,
+            name: 'metric',
+            title: i18n.translate('visTypeTableNewNew.tableVisEditorConfig.schemas.metricTitle', {
+              defaultMessage: 'Metric',
+            }),
+            min: 1,
+            aggFilter: ['!geo_centroid', '!geo_bounds'],
+            aggSettings: {
+              top_hits: {
+                allowStrings: true,
+              },
+            },
+            defaults: {
+              aggTypes: ['avg', 'cardinality'],
+            },
+          },
+          {
+            group: AggGroupNames.Buckets,
+            name: 'bucket',
+            title: i18n.translate('visTypeTableNewNew.tableVisEditorConfig.schemas.bucketTitle', {
+              defaultMessage: 'Split rows',
+            }),
+            aggFilter: ['!filter'],
+            defaults: {
+              aggTypes: ['terms'],
+            },
+          },
+          {
+            group: AggGroupNames.Buckets,
+            name: 'split_row',
+            title: i18n.translate('visTypeTableNewNew.tableVisEditorConfig.schemas.splitTitle', {
+              defaultMessage: 'Split table in rows',
+            }),
+            min: 0,
+            max: 1,
+            aggFilter: ['!filter'],
+            defaults: {
+              aggTypes: ['terms'],
+            },
+          },
+          {
+            group: AggGroupNames.Buckets,
+            name: 'split_column',
+            title: i18n.translate('visTypeTableNewNew.tableVisEditorConfig.schemas.splitTitle', {
+              defaultMessage: 'Split table in columns',
+            }),
+            min: 0,
+            max: 1,
+            aggFilter: ['!filter'],
+            defaults: {
+              aggTypes: ['terms'],
+            },
+          },
+        ]),
+      },
+      style: {
+        defaults: {
+          perPage: 10,
+          showPartialRows: false,
+          showMetricsAtAllLevels: false,
+        },
+        render: TableVizOptions,
+      },
+    },
+  },
+});