Implement table using table gird and remove doc_viewer_link

Issue Resolve
opensearch-project#4442

Signed-off-by: ananzh <[email protected]>

src/plugins/discover/public/application/components/create_discover_legacy_directive.ts

@@ -28,7 +28,7 @@
  * under the License.
  */
 
-import { DiscoverLegacy } from './discover_legacy';
+import { DiscoverLegacy } from './discover';
 
 export function createDiscoverLegacyDirective(reactDirective: any) {
   return reactDirective(DiscoverLegacy, [

src/plugins/discover/public/application/components/data_grid/constants.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const toolbarVisibility = {
+  showColumnSelector: {
+    allowHide: false,
+    allowReorder: true,
+  },
+  showStyleSelector: false,
+};

src/plugins/discover/public/application/components/data_grid/data_grid_context.tsx

@@ -0,0 +1,20 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { DocViewFilterFn } from '../../doc_views/doc_views_types';
+
+export interface DataGridContextProps {
+  docViewExpand: any;
+  onFilter: DocViewFilterFn;
+  setDocViewExpand: (hit: any) => void;
+  rows: any[];
+  indexPattern: IndexPattern;
+}
+
+export const DataGridContext = React.createContext<DataGridContextProps>(
+  ({} as unknown) as DataGridContextProps
+);

src/plugins/discover/public/application/components/data_grid/data_grid_flyout.tsx

@@ -0,0 +1,161 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { i18n } from '@osd/i18n';
+import { stringify } from 'query-string';
+import rison from 'rison-node';
+
+import {
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiFlyoutBody,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+  EuiLink,
+  EuiSpacer,
+} from '@elastic/eui';
+import { DocViewer } from '../doc_viewer/doc_viewer';
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { DocViewFilterFn } from '../../doc_views/doc_views_types';
+import { DiscoverServices } from '../../../build_services';
+import { url } from '../../../../../opensearch_dashboards_utils/common';
+import { opensearchFilters } from '../../../../../data/public';
+
+interface Props {
+  columns: string[];
+  hit: any;
+  indexPattern: IndexPattern;
+  onAddColumn: (column: string) => void;
+  onClose: () => void;
+  onFilter: DocViewFilterFn;
+  onRemoveColumn: (column: string) => void;
+  services: DiscoverServices;
+}
+
+export function DataGridFlyout({
+  hit,
+  columns,
+  indexPattern,
+  onAddColumn,
+  onClose,
+  onFilter,
+  onRemoveColumn,
+  services,
+}: Props) {
+  const generateSurroundingDocumentsUrl = (hitId: string, indexPatternId: string) => {
+    const globalFilters = services.filterManager.getGlobalFilters();
+    const appFilters = services.filterManager.getAppFilters();
+
+    const hash = stringify(
+      url.encodeQuery({
+        _g: rison.encode({
+          filters: globalFilters || [],
+        }),
+        _a: rison.encode({
+          columns,
+          filters: (appFilters || []).map(opensearchFilters.disableFilter),
+        }),
+      }),
+      { encode: false, sort: false }
+    );
+
+    return `#/context/${encodeURIComponent(indexPatternId)}/${encodeURIComponent(hitId)}?${hash}`;
+  };
+
+  const generateSingleDocumentUrl = (hitObj: any, indexPatternId: string) => {
+    return `#/doc/${indexPatternId}/${hitObj._index}?id=${encodeURIComponent(hit._id)}`;
+  };
+
+  return (
+    <EuiFlyout onClose={onClose} size="m">
+      <EuiFlyoutHeader>
+        <EuiTitle>
+          <h2>Document Details</h2>
+        </EuiTitle>
+        <EuiSpacer size="s" />
+        <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
+          <EuiFlexItem grow={false}>
+            <EuiLink href={generateSingleDocumentUrl(hit, indexPattern.id)}>
+              {i18n.translate('discover.docTable.tableRow.viewSingleDocumentLinkText', {
+                defaultMessage: 'View single document',
+              })}
+            </EuiLink>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiLink href={generateSurroundingDocumentsUrl(hit._id, indexPattern.id)}>
+              {i18n.translate('discover.docTable.tableRow.viewSurroundingDocumentsLinkText', {
+                defaultMessage: 'View surrounding documents',
+              })}
+            </EuiLink>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <EuiFlexGroup direction="column">
+          <DocViewer
+            hit={hit}
+            columns={columns}
+            indexPattern={indexPattern}
+            onRemoveColumn={(columnName: string) => {
+              onRemoveColumn(columnName);
+              onClose();
+            }}
+            onAddColumn={(columnName: string) => {
+              onAddColumn(columnName);
+              onClose();
+            }}
+            filter={(mapping, value, mode) => {
+              onFilter(mapping, value, mode);
+              onClose();
+            }}
+          />
+        </EuiFlexGroup>
+      </EuiFlyoutBody>
+    </EuiFlyout>
+  );
+}
+
+// export function DataGridFlyout({
+//  hit,
+//  columns,
+//  indexPattern,
+//  onAddColumn,
+//  onClose,
+//  onFilter,
+//  onRemoveColumn,
+// }: Props) {
+//  return (
+//    <EuiFlyout onClose={onClose} size="m">
+//      <EuiFlyoutHeader>
+//        <EuiTitle>
+//          <h2>Document Details</h2>
+//        </EuiTitle>
+//      </EuiFlyoutHeader>
+//      <EuiFlyoutBody>
+//        <EuiFlexGroup direction="column">
+//          <DocViewer
+//            hit={hit}
+//            columns={columns}
+//            indexPattern={indexPattern}
+//            onRemoveColumn={(columnName: string) => {
+//              onRemoveColumn(columnName);
+//              onClose();
+//            }}
+//            onAddColumn={(columnName: string) => {
+//              onAddColumn(columnName);
+//              onClose();
+//            }}
+//            filter={(mapping, value, mode) => {
+//              onFilter(mapping, value, mode);
+//              onClose();
+//            }}
+//          />
+//        </EuiFlexGroup>
+//      </EuiFlyoutBody>
+//    </EuiFlyout>
+//  );
+// }

src/plugins/discover/public/application/components/data_grid/data_grid_table.scss

@@ -0,0 +1,9 @@
+.dscDiscoverGrid {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+
+  .euiDataGrid__controls {
+    border: $euiBorderThin;
+  }
+}

src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx

@@ -0,0 +1,135 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './data_grid_table.scss';
+import React, { useState, useMemo, useCallback } from 'react';
+import { EuiDataGrid } from '@elastic/eui';
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { fetchTableDataCell } from './data_grid_table_cell_value';
+import { buildDataGridColumns, computeVisibleColumns } from './data_grid_table_columns';
+import { DocViewExpandButton } from './data_grid_table_docview_expand_button';
+import { DataGridFlyout } from './data_grid_flyout';
+import { DataGridContext } from './data_grid_context';
+import { toolbarVisibility } from './constants';
+import { DocViewFilterFn } from '../../doc_views/doc_views_types';
+import { DiscoverServices } from '../../../build_services';
+import { OpenSearchSearchHit } from '../../doc_views/doc_views_types';
+import { usePagination } from '../utils/use_pagination';
+
+export interface DataGridTableProps {
+  columns: string[];
+  indexPattern: IndexPattern;
+  onAddColumn: (column: string) => void;
+  onFilter: DocViewFilterFn;
+  onRemoveColumn: (column: string) => void;
+  onSort: (sort: string[][]) => void;
+  rows: OpenSearchSearchHit[];
+  onSetColumns: (columns: string[]) => void;
+  sort: Array<[string, string]>;
+  displayTimeColumn: boolean;
+  services: DiscoverServices;
+}
+
+export const DataGridTable = ({
+  columns,
+  indexPattern,
+  onAddColumn,
+  onFilter,
+  onRemoveColumn,
+  onSetColumns,
+  onSort,
+  sort,
+  rows,
+  displayTimeColumn,
+  services,
+}: DataGridTableProps) => {
+  const [docViewExpand, setDocViewExpand] = useState(undefined);
+  const rowCount = useMemo(() => (rows ? rows.length : 0), [rows]);
+  const pagination = usePagination(rowCount);
+
+  const sortingColumns = useMemo(() => sort.map(([id, direction]) => ({ id, direction })), [sort]);
+
+  const onColumnSort = useCallback(
+    (cols) => {
+      onSort(cols.map(({ id, direction }: any) => [id, direction]));
+    },
+    [onSort]
+  );
+
+  const renderCellValue = useMemo(() => fetchTableDataCell(indexPattern, rows), [
+    indexPattern,
+    rows,
+  ]);
+
+  const dataGridTableColumns = useMemo(
+    () => buildDataGridColumns(columns, indexPattern, displayTimeColumn),
+    [columns, indexPattern, displayTimeColumn]
+  );
+
+  const dataGridTableColumnsVisibility = useMemo(
+    () => ({
+      visibleColumns: computeVisibleColumns(columns, indexPattern, displayTimeColumn) as string[],
+      setVisibleColumns: (newColumns: string[]) => {
+        onSetColumns(newColumns);
+      },
+    }),
+    [columns, indexPattern, displayTimeColumn, onSetColumns]
+  );
+
+  const sorting = useMemo(() => ({ columns: sortingColumns, onSort: onColumnSort }), [
+    sortingColumns,
+    onColumnSort,
+  ]);
+
+  const leadingControlColumns = useMemo(() => {
+    return [
+      {
+        id: 'expandCollapseColumn',
+        headerCellRender: () => null,
+        rowCellRender: DocViewExpandButton,
+        width: 40,
+      },
+    ];
+  }, []);
+
+  return (
+    <DataGridContext.Provider
+      value={{
+        docViewExpand,
+        onFilter,
+        setDocViewExpand,
+        rows: rows || [],
+        indexPattern,
+      }}
+    >
+      <>
+        <EuiDataGrid
+          aria-labelledby="aria-labelledby"
+          columns={dataGridTableColumns}
+          columnVisibility={dataGridTableColumnsVisibility}
+          leadingControlColumns={leadingControlColumns}
+          data-test-subj="docTable"
+          pagination={pagination}
+          renderCellValue={renderCellValue}
+          rowCount={rowCount}
+          sorting={sorting}
+          toolbarVisibility={toolbarVisibility}
+        />
+        {docViewExpand && (
+          <DataGridFlyout
+            indexPattern={indexPattern}
+            hit={docViewExpand}
+            columns={columns}
+            onRemoveColumn={onRemoveColumn}
+            onAddColumn={onAddColumn}
+            onFilter={onFilter}
+            onClose={() => setDocViewExpand(undefined)}
+            services={services}
+          />
+        )}
+      </>
+    </DataGridContext.Provider>
+  );
+};