diff --git a/src/plugins/vis_type_table/opensearch_dashboards.json b/src/plugins/vis_type_table/opensearch_dashboards.json
index 97a7d4c753d0..5ba8545250e0 100644
--- a/src/plugins/vis_type_table/opensearch_dashboards.json
+++ b/src/plugins/vis_type_table/opensearch_dashboards.json
@@ -10,6 +10,7 @@
],
"requiredBundles": [
"opensearchDashboardsUtils",
+ "opensearchDashboardsReact",
"charts",
"visDefaultEditor"
]
diff --git a/src/plugins/vis_type_table/public/components/table_vis_app.tsx b/src/plugins/vis_type_table/public/components/table_vis_app.tsx
new file mode 100644
index 000000000000..6498abe1fb2f
--- /dev/null
+++ b/src/plugins/vis_type_table/public/components/table_vis_app.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { CoreStart } from 'opensearch-dashboards/public';
+import { I18nProvider } from '@osd/i18n/react';
+import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
+import { OpenSearchDashboardsContextProvider } from '../../../opensearch_dashboards_react/public';
+
+import { TableContext } from '../table_vis_response_handler';
+import { TableVisConfig } from '../types';
+import { TableVisComponent } from './table_vis_component';
+
+interface TableVisAppProps {
+ visData: TableContext;
+ visConfig: TableVisConfig;
+ handlers: IInterpreterRenderHandlers;
+}
+
+export const TableVisApp = ({
+ services,
+ visData: { table, tableGroups, direction },
+ visConfig,
+ handlers,
+}: TableVisAppProps & { services: CoreStart }) => {
+ return (
+
+
+
+ {table ? (
+
+ ) : (
+ <>>
+ )}
+
+
+
+ );
+};
+
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { TableVisApp as default };
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
new file mode 100644
index 000000000000..de0074beac38
--- /dev/null
+++ b/src/plugins/vis_type_table/public/components/table_vis_component.tsx
@@ -0,0 +1,64 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useCallback, useMemo } from 'react';
+import { EuiDataGridProps, EuiDataGrid } from '@elastic/eui';
+
+import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
+import { Table } from '../table_vis_response_handler';
+import { TableVisConfig } from '../types';
+
+interface TableVisComponentProps {
+ table: Table;
+ visConfig: TableVisConfig;
+ handlers: IInterpreterRenderHandlers;
+}
+
+export const TableVisComponent = ({ table, visConfig, handlers }: TableVisComponentProps) => {
+ const { rows, columns } = table;
+ const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 5 });
+ const onChangeItemsPerPage = useCallback(
+ (pageSize) => setPagination((p) => ({ ...p, pageSize, pageIndex: 0 })),
+ [setPagination]
+ );
+
+ const onChangePage = useCallback((pageIndex) => setPagination((p) => ({ ...p, pageIndex })), [
+ setPagination,
+ ]);
+
+ // toDo: it is a sample renderCellValue to render a data grid component
+ // will check on it and it might be replaced
+ const renderCellValue = useMemo(() => {
+ return (({ rowIndex, columnId }) => {
+ let adjustedRowIndex = rowIndex;
+
+ // If we are doing the pagination (instead of leaving that to the grid)
+ // then the row index must be adjusted as `data` has already been pruned to the page size
+ adjustedRowIndex = rowIndex - pagination.pageIndex * pagination.pageSize;
+
+ return rows.hasOwnProperty(adjustedRowIndex)
+ ? rows[adjustedRowIndex][columnId] || null
+ : null;
+ }) as EuiDataGridProps['renderCellValue'];
+ }, [rows, pagination.pageIndex, pagination.pageSize]);
+
+ return (
+ id),
+ setVisibleColumns: () => {},
+ }}
+ rowCount={rows.length}
+ renderCellValue={renderCellValue}
+ pagination={{
+ ...pagination,
+ onChangeItemsPerPage,
+ onChangePage,
+ }}
+ />
+ );
+};
diff --git a/src/plugins/vis_type_table/public/plugin.ts b/src/plugins/vis_type_table/public/plugin.ts
index ce0852a9ba7d..c5648f75d4fb 100644
--- a/src/plugins/vis_type_table/public/plugin.ts
+++ b/src/plugins/vis_type_table/public/plugin.ts
@@ -17,7 +17,7 @@ import { getTableVisTypeDefinition } from './table_vis_type';
import { DataPublicPluginStart } from '../../data/public';
import { setFormatService } from './services';
import { ConfigSchema } from '../config';
-import { tableVisRenderer } from './table_vis_renderer';
+import { getTableVisRenderer } from './table_vis_renderer';
/** @internal */
export interface TableVisPluginSetupDependencies {
@@ -30,6 +30,16 @@ export interface TableVisPluginStartDependencies {
data: DataPublicPluginStart;
}
+const setupTableVis = async (
+ core: CoreSetup,
+ { expressions, visualizations }: TableVisPluginSetupDependencies
+) => {
+ const [coreStart] = await core.getStartServices();
+ expressions.registerFunction(createTableVisFn);
+ expressions.registerRenderer(getTableVisRenderer(coreStart));
+ visualizations.createBaseVisualization(getTableVisTypeDefinition());
+};
+
/** @internal */
export class TableVisPlugin implements Plugin {
initializerContext: PluginInitializerContext;
@@ -38,10 +48,8 @@ export class TableVisPlugin implements Plugin {
this.initializerContext = initializerContext;
}
- public setup(core: CoreSetup, { expressions, visualizations }: TableVisPluginSetupDependencies) {
- expressions.registerFunction(createTableVisFn);
- expressions.registerRenderer(tableVisRenderer);
- visualizations.createBaseVisualization(getTableVisTypeDefinition());
+ public async setup(core: CoreSetup, dependencies: TableVisPluginSetupDependencies) {
+ setupTableVis(core, dependencies);
}
public start(core: CoreStart, { data }: TableVisPluginStartDependencies) {
diff --git a/src/plugins/vis_type_table/public/table_vis_renderer.tsx b/src/plugins/vis_type_table/public/table_vis_renderer.tsx
index dd35d8b77f23..a717d38e04b2 100644
--- a/src/plugins/vis_type_table/public/table_vis_renderer.tsx
+++ b/src/plugins/vis_type_table/public/table_vis_renderer.tsx
@@ -6,11 +6,15 @@
import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
+import { CoreStart } from 'opensearch-dashboards/public';
import { VisualizationContainer } from '../../visualizations/public';
import { ExpressionRenderDefinition } from '../../expressions/common/expression_renderers';
import { TableVisRenderValue } from './table_vis_fn';
+import { TableVisApp } from './components/table_vis_app';
-export const tableVisRenderer: () => ExpressionRenderDefinition = () => ({
+export const getTableVisRenderer: (
+ core: CoreStart
+) => ExpressionRenderDefinition = (core) => ({
name: 'table_vis',
displayName: 'table visualization',
reuseDomNode: true,
@@ -25,7 +29,7 @@ export const tableVisRenderer: () => ExpressionRenderDefinition
- <>> //toDo: add TableVisComponent
+
,
domNode
);
diff --git a/yarn.lock b/yarn.lock
index 6ec85a1424f5..e1ff92cb3069 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11640,10 +11640,10 @@ leaflet-responsive-popup@0.6.4:
resolved "https://registry.yarnpkg.com/leaflet-responsive-popup/-/leaflet-responsive-popup-0.6.4.tgz#b93d9368ef9f96d6dc911cf5b96d90e08601c6b3"
integrity sha512-2D8G9aQA6NHkulDBPN9kqbUCkCpWQQ6dF0xFL11AuEIWIbsL4UC/ZPP5m8GYM0dpU6YTlmyyCh1Tz+cls5Q4dg==
-"leaflet-vega@npm:@amoo-miki/leaflet-vega@0.8.7":
- version "0.8.7"
- resolved "https://registry.yarnpkg.com/@amoo-miki/leaflet-vega/-/leaflet-vega-0.8.7.tgz#8faca1b4b8e2ef7d48667ac6faad9204f4da7153"
- integrity sha512-T4M5yziwj3Fi9Adsbce+cdWqPjON0BRwEjwqLlPMoirU1vhifA6YKrlZkVzJrK0IIm+hdfMCLkBz33gD8fdxzQ==
+"leaflet-vega@npm:@amoo-miki/leaflet-vega@0.8.8":
+ version "0.8.8"
+ resolved "https://registry.yarnpkg.com/@amoo-miki/leaflet-vega/-/leaflet-vega-0.8.8.tgz#675abf37d72fbea859755e982f4fd19dea776557"
+ integrity sha512-W2gGgFDxzy/XUx+fQJfz0NYVXsKl7V+G6QywiMcOV5NEodDId9c60up7NNf+cfM7ggpo+5BuLqrKmosuGO1CsA==
dependencies:
vega-spec-injector "^0.0.2"
@@ -18000,10 +18000,10 @@ vega-hierarchy@~4.1.0:
vega-dataflow "^5.7.3"
vega-util "^1.15.2"
-"vega-interpreter@npm:@amoo-miki/vega-forced-csp-compliant-interpreter@1.0.5":
- version "1.0.5"
- resolved "https://registry.yarnpkg.com/@amoo-miki/vega-forced-csp-compliant-interpreter/-/vega-forced-csp-compliant-interpreter-1.0.5.tgz#49970be9b00ca7e45ced0617fbf373c77a28aab4"
- integrity sha512-lfeU77lVoUbSCC6N1ywdKg+I6K08xpkd82TLon+LebtKyC8aLCe7P5Dd/89zAPyFwRyobKftHu8z0xpV7R7a4Q==
+"vega-interpreter@npm:@amoo-miki/vega-forced-csp-compliant-interpreter@1.0.6":
+ version "1.0.6"
+ resolved "https://registry.yarnpkg.com/@amoo-miki/vega-forced-csp-compliant-interpreter/-/vega-forced-csp-compliant-interpreter-1.0.6.tgz#5cffdf12b7fe12dc936194edd9e8519506c38716"
+ integrity sha512-9S5nTTVd8JVKobcWp5iwirIeePiamwH1J9uSZPuG5kcF0TUBvGu++ERKjNdst5Qck7e4R6/7vjx2wVf58XUarg==
vega-label@~1.2.0:
version "1.2.0"