add more refactoring

Signed-off-by: abbyhu2000 <[email protected]>
abbyhu2000 · Jan 29, 2024 · e59b8f5 · e59b8f5
1 parent d650824
commit e59b8f5
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 102 deletions.
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx
@@ -222,7 +222,7 @@ export const DataGridTable = ({
         <EuiPanel hasBorder={false} hasShadow={true} paddingSize="s" style={{ margin: '8px' }}>
           {getDataGridTableSetting(storage) ? dataGridTable : legacyDiscoverTable}
         </EuiPanel>
-        {inspectedHit && (
+        {getDataGridTableSetting(storage) && inspectedHit && (
           <DataGridFlyout
             indexPattern={indexPattern}
             hit={inspectedHit}

diff --git a/.../discover/public/application/components/default_discover_table/default_discover_table.tsx b/.../discover/public/application/components/default_discover_table/default_discover_table.tsx
@@ -59,13 +59,12 @@ export const LegacyDiscoverTable = ({
           />
         </thead>
         <tbody>
-          {rows.map((row: OpenSearchSearchHit, index: number) => {
+          {rows.map((row: OpenSearchSearchHit) => {
             return (
               <TableRow
                 key={row._id}
                 row={row}
-                rowIndex={index}
-                displayedTableColumns={displayedTableColumns}
+                columnIds={displayedTableColumns.map((column) => column.id)}
                 columns={columns}
                 indexPattern={indexPattern}
                 onRemoveColumn={onRemoveColumn}

diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_cell.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_cell.tsx
@@ -11,74 +11,27 @@
 
 import './_table_cell.scss';
 
-import React, { useState, useMemo, useCallback } from 'react';
+import React from 'react';
 import dompurify from 'dompurify';
-import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiButtonIcon,
-  EuiDataGridColumn,
-  EuiToolTip,
-} from '@elastic/eui';
+import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
-import { indexPatternField } from '../../../../../opensearch_ui_shared/static/forms/helpers/field_validators/index_pattern_field';
-import { fetchSourceTypeDataCell } from '../data_grid/data_grid_table_cell_value';
-import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_types';
-import { IndexPattern } from '../../../opensearch_dashboards_services';
-import { useDataGridContext } from '../data_grid/data_grid_table_context';
+import { DocViewFilterFn } from '../../doc_views/doc_views_types';
 
 export interface TableCellProps {
-  column: EuiDataGridColumn;
-  row: OpenSearchSearchHit;
-  rowIndex: number;
-  indexPattern: IndexPattern;
-  flattened: Record<string, any>;
+  columnId: string;
   onFilter: DocViewFilterFn;
+  filterable?: boolean;
+  fieldMapping?: any;
+  formattedValue: any;
 }
 
 export const TableCell = ({
-  column,
-  row,
-  rowIndex,
-  indexPattern,
-  flattened,
+  columnId,
   onFilter,
+  filterable,
+  fieldMapping,
+  formattedValue,
 }: TableCellProps) => {
-  const singleRow = row as Record<string, unknown>;
-  // const flattenedRows = dataRows ? dataRows.map((hit) => idxPattern.flattenHit(hit)) : [];
-  // const flattenedRow = flattenedRows
-  //   ? (flattenedRows[rowIndex] as Record<string, unknown>)
-  //   : undefined;
-
-  const fieldInfo = indexPattern.fields.getByName(column.id);
-  const fieldMapping = flattened[column.id];
-
-  if (typeof singleRow === 'undefined') {
-    return (
-      <td
-        data-test-subj="docTableField"
-        className="osdDocTableCell eui-textBreakAll eui-textBreakWord"
-      >
-        <span>-</span>
-      </td>
-    );
-  }
-
-  // TODO: when the cell is a object
-  // if (!fieldInfo?.type && typeof flattenedRow?.[columnId] === 'object') {
-  //   return <span>{stringify(flattenedRow[columnId])}</span>;
-  // }
-
-  if (fieldInfo?.type === '_source') {
-    return (
-      <td className="eui-textBreakAll eui-textBreakWord" data-test-subj="docTableField">
-        {fetchSourceTypeDataCell(indexPattern, singleRow, column.id, false)}
-      </td>
-    );
-  }
-
-  const formattedValue = indexPattern.formatField(singleRow, column.id);
-
   if (typeof formattedValue === 'undefined') {
     return (
       <td
@@ -99,7 +52,7 @@ export const TableCell = ({
           })}
         >
           <EuiButtonIcon
-            onClick={() => onFilter(column.id, fieldMapping, '+')}
+            onClick={() => onFilter(columnId, fieldMapping, '+')}
             iconType="plusInCircle"
             aria-label={i18n.translate('discover.filterForValueLabel', {
               defaultMessage: 'Filter for value',
@@ -114,7 +67,7 @@ export const TableCell = ({
           })}
         >
           <EuiButtonIcon
-            onClick={() => onFilter(column.id, fieldMapping, '-')}
+            onClick={() => onFilter(columnId, fieldMapping, '-')}
             iconType="minusInCircle"
             aria-label={i18n.translate('discover.filterOutValueLabel', {
               defaultMessage: 'Filter out value',
@@ -133,7 +86,7 @@ export const TableCell = ({
         className="osdDocTableCell eui-textBreakAll eui-textBreakWord"
       >
         <span dangerouslySetInnerHTML={{ __html: sanitizedCellValue }} />
-        {fieldInfo?.filterable && filters}
+        {filterable && filters}
       </td>
     );
   }

diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_header.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_header.tsx
@@ -27,14 +27,14 @@ interface Props {
   onChangeSortOrder?: (cols: EuiDataGridSorting['columns']) => void;
   onMoveColumn?: (name: string, index: number) => void;
   onRemoveColumn?: (name: string) => void;
+  onReorderColumn?: (col: string, source: number, destination: number) => void;
   sortOrder: Array<{
     id: string;
     direction: 'desc' | 'asc';
   }>;
 }
 
 export function TableHeader({
-  // columns,
   displayedTableColumns,
   defaultSortOrder,
   // hideTimeColumn,

diff --git a/...ins/discover/public/application/components/default_discover_table/table_header_column.tsx b/...ins/discover/public/application/components/default_discover_table/table_header_column.tsx
@@ -13,8 +13,7 @@ import './_table_header.scss';
 
 import React, { ReactNode } from 'react';
 import { i18n } from '@osd/i18n';
-import { EuiButtonIcon, EuiDataGridSorting, EuiFieldText, EuiIcon, EuiToolTip } from '@elastic/eui';
-import { SortOrder } from '../../view_components/utils/get_default_sort';
+import { EuiButtonIcon, EuiDataGridSorting, EuiToolTip } from '@elastic/eui';
 
 interface Props {
   currentIdx: number;
@@ -26,11 +25,12 @@ interface Props {
   name: string;
   onChangeSortOrder?: (cols: EuiDataGridSorting['columns']) => void;
   onMoveColumn?: (name: string, idx: number) => void;
+  onReorderColumn?: (col: string, source: number, destination: number) => void;
   onRemoveColumn?: (name: string) => void;
-  sortOrder: {
+  sortOrder: Array<{
     id: string;
-    direction: "desc" | "asc";
-}[];
+    direction: 'desc' | 'asc';
+  }>;
 }
 
 const sortDirectionToIcon: Record<string, string> = {
@@ -52,46 +52,47 @@ export function TableHeaderColumn({
   onRemoveColumn,
   sortOrder,
 }: Props) {
-  //const [, sortDirection = ''] = sortOrder.find((sortPair) => name === sortPair.id) || [];
   const currentSortWithoutColumn = sortOrder.filter((pair) => pair.id !== name);
   const currentColumnSort = sortOrder.find((pair) => pair.id === name);
   const currentColumnSortDirection = (currentColumnSort && currentColumnSort.direction) || '';
 
   const btnSortIcon = sortDirectionToIcon[currentColumnSortDirection];
   const btnSortClassName =
-  currentColumnSortDirection !== '' ? btnSortIcon : `osdDocTableHeader__sortChange ${btnSortIcon}`;
+    currentColumnSortDirection !== ''
+      ? btnSortIcon
+      : `osdDocTableHeader__sortChange ${btnSortIcon}`;
 
   const handleChangeSortOrder = () => {
     if (!onChangeSortOrder) return;
 
     let currentSortOrder;
     let newSortOrder: {
       id: string;
-      direction: "desc" | "asc";
-  };
+      direction: 'desc' | 'asc';
+    };
     // Cycle goes Unsorted -> Asc -> Desc -> Unsorted
     if (currentColumnSort === undefined) {
       newSortOrder = {
         id: name,
-        direction: "asc"
-      }
-      currentSortOrder = [...currentSortWithoutColumn, newSortOrder]
+        direction: 'asc',
+      };
+      currentSortOrder = [...currentSortWithoutColumn, newSortOrder];
       onChangeSortOrder(currentSortOrder);
     } else if (currentColumnSortDirection === 'asc') {
       newSortOrder = {
         id: name,
-        direction: "desc"
-      }
-      currentSortOrder = [...currentSortWithoutColumn, newSortOrder]
+        direction: 'desc',
+      };
+      currentSortOrder = [...currentSortWithoutColumn, newSortOrder];
       onChangeSortOrder(currentSortOrder);
     } else if (currentColumnSortDirection === 'desc' && currentSortWithoutColumn.length === 0) {
       // If we're at the end of the cycle and this is the only existing sort, we switch
       // back to ascending sort instead of removing it.
       newSortOrder = {
         id: name,
-        direction: "asc"
-      }
-      currentSortOrder = [...currentSortWithoutColumn, newSortOrder]
+        direction: 'asc',
+      };
+      currentSortOrder = [...currentSortWithoutColumn, newSortOrder];
       onChangeSortOrder(currentSortOrder);
     } else {
       onChangeSortOrder(currentSortWithoutColumn);
@@ -142,7 +143,7 @@ export function TableHeaderColumn({
       onClick: handleChangeSortOrder,
       testSubject: `docTableHeaderFieldSort_${name}`,
       tooltip: getSortButtonAriaLabel(),
-      iconType: "sortable"
+      iconType: 'sortable',
     },
     // Remove Button
     {

diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_rows.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_rows.tsx
@@ -9,20 +9,18 @@
  * GitHub history for details.
  */
 
-import React, { useState, useMemo, useCallback } from 'react';
-import { EuiButtonIcon, EuiDataGridColumn, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
-import { AnyAction } from '@reduxjs/toolkit';
-import { fatalErrorsServiceMock } from 'src/core/public/mocks';
+import React, { useState } from 'react';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
 import { TableCell } from './table_cell';
 import { DocViewerLinks } from '../doc_viewer_links/doc_viewer_links';
 import { DocViewer } from '../doc_viewer/doc_viewer';
 import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_types';
 import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { fetchSourceTypeDataCell } from '../data_grid/data_grid_table_cell_value';
 
 export interface TableRowProps {
   row: OpenSearchSearchHit;
-  rowIndex: number;
-  displayedTableColumns: EuiDataGridColumn[];
+  columnIds: string[];
   columns: string[];
   indexPattern: IndexPattern;
   onRemoveColumn: (column: string) => void;
@@ -33,8 +31,7 @@ export interface TableRowProps {
 
 export const TableRow = ({
   row,
-  rowIndex,
-  displayedTableColumns,
+  columnIds,
   columns,
   indexPattern,
   onRemoveColumn,
@@ -56,16 +53,38 @@ export const TableRow = ({
           className="osdDocTableCell__toggleDetails"
         />
       </td>
-      {displayedTableColumns.map((column) => {
+      {columnIds.map((columnId) => {
+        const fieldInfo = indexPattern.fields.getByName(columnId);
+        const fieldMapping = flattened[columnId];
+
+        if (typeof row === 'undefined') {
+          return (
+            <td
+              data-test-subj="docTableField"
+              className="osdDocTableCell eui-textBreakAll eui-textBreakWord"
+            >
+              <span>-</span>
+            </td>
+          );
+        }
+
+        if (fieldInfo?.type === '_source') {
+          return (
+            <td className="eui-textBreakAll eui-textBreakWord" data-test-subj="docTableField">
+              {fetchSourceTypeDataCell(indexPattern, row, columnId, false)}
+            </td>
+          );
+        }
+
+        const formattedValue = indexPattern.formatField(row, columnId);
         return (
           <TableCell
-            key={row._id + column.id}
-            column={column}
-            row={row}
-            rowIndex={rowIndex}
-            indexPattern={indexPattern}
-            flattened={flattened}
+            key={row._id + columnId}
+            columnId={columnId}
             onFilter={onFilter}
+            filterable={fieldInfo?.filterable}
+            fieldMapping={fieldMapping}
+            formattedValue={formattedValue}
           />
         );
       })}
@@ -76,11 +95,11 @@ export const TableRow = ({
     <tr>
       <td
         style={{ borderTop: 'none', background: 'white', padding: '5px' }}
-        colSpan={displayedTableColumns.length + 2}
+        colSpan={columnIds.length + 2}
       >
         <EuiFlexGroup>
           <EuiFlexItem grow={false}>
-            <EuiIcon type="folderOpen" /> <span>{displayedTableColumns.size}</span>
+            <EuiIcon type="folderOpen" /> <span>{columnIds.length}</span>
           </EuiFlexItem>
           <EuiFlexItem>
             <h4

diff --git a/src/plugins/discover/public/application/components/doc_views/context_app.tsx b/src/plugins/discover/public/application/components/doc_views/context_app.tsx
@@ -101,6 +101,7 @@ export function ContextApp({
           onAddColumn={() => {}}
           onFilter={onAddFilter}
           onRemoveColumn={() => {}}
+          onReorderColumn={() => {}}
           onSetColumns={() => {}}
           onSort={() => {}}
           sort={sort}

diff --git a/src/plugins/discover/public/embeddable/search_embeddable.tsx b/src/plugins/discover/public/embeddable/search_embeddable.tsx
@@ -80,6 +80,7 @@ export interface SearchProps {
   onRemoveColumn?: (column: string) => void;
   onAddColumn?: (column: string) => void;
   onMoveColumn?: (column: string, index: number) => void;
+  onReorderColumn?: (col: string, source: number, destination: number) => void;
   onFilter?: (field: IFieldType, value: string[], operator: string) => void;
   rows?: any[];
   indexPattern?: IndexPattern;

diff --git a/src/plugins/discover/public/embeddable/search_embeddable_component.tsx b/src/plugins/discover/public/embeddable/search_embeddable_component.tsx
@@ -34,6 +34,7 @@ export function SearchEmbeddableComponent({ searchProps }: SearchEmbeddableProps
     onAddColumn: searchProps.onAddColumn,
     onFilter: searchProps.onFilter,
     onRemoveColumn: searchProps.onRemoveColumn,
+    onReorderColumn: searchProps.onReorderColumn,
     onSort: searchProps.onSort,
     rows: searchProps.rows,
     onSetColumns: searchProps.onSetColumns,