Resolve sort, default sort and short dot

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

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

@@ -5,32 +5,38 @@
 
 import React, { useState, useMemo, useCallback } from 'react';
 import { EuiDataGrid, EuiDataGridSorting, EuiPanel } from '@elastic/eui';
-import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { IndexPattern, getServices } from '../../../opensearch_dashboards_services';
 import { fetchTableDataCell } from './data_grid_table_cell_value';
 import { buildDataGridColumns, computeVisibleColumns } from './data_grid_table_columns';
 import { DocViewInspectButton } from './data_grid_table_docview_inspect_button';
 import { DataGridFlyout } from './data_grid_table_flyout';
 import { DiscoverGridContextProvider } from './data_grid_table_context';
 import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_types';
 import { usePagination } from '../utils/use_pagination';
-import { SortOrder } from '../../../saved_searches/types';
 import { buildColumns } from '../../utils/columns';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { DiscoverServices } from '../../../build_services';
-import { SAMPLE_SIZE_SETTING } from '../../../../common';
+import {
+  DOC_HIDE_TIME_COLUMN_SETTING,
+  SAMPLE_SIZE_SETTING,
+  SORT_DEFAULT_ORDER_SETTING,
+} from '../../../../common';
+import { UI_SETTINGS } from '../../../../../data/common';
 import { LegacyDiscoverTable } from '../default_discover_table/default_discover_table';
 import { toolbarVisibility } from './constants';
 import { getDataGridTableSetting } from '../utils/local_storage';
 import { Storage } from '../../../../../opensearch_dashboards_utils/public';
+import { SortOrder } from '../default_discover_table/helper';
 
 export interface DataGridTableProps {
   columns: string[];
   indexPattern: IndexPattern;
   onAddColumn: (column: string) => void;
   onFilter: DocViewFilterFn;
+  onMoveColumn: (colName: string, destination: number) => void;
   onRemoveColumn: (column: string) => void;
   onReorderColumn: (col: string, source: number, destination: number) => void;
-  onSort: (sort: SortOrder[]) => void;
+  onSort: (s: SortOrder[]) => void;
   rows: OpenSearchSearchHit[];
   onSetColumns: (columns: string[]) => void;
   sort: SortOrder[];
@@ -49,6 +55,7 @@ export const DataGridTable = ({
   indexPattern,
   onAddColumn,
   onFilter,
+  onMoveColumn,
   onRemoveColumn,
   onReorderColumn,
   onSetColumns,
@@ -64,11 +71,17 @@ export const DataGridTable = ({
   storage,
   showPagination,
 }: DataGridTableProps) => {
-  const { services } = useOpenSearchDashboards<DiscoverServices>();
-
+  const services = getServices();
   const [inspectedHit, setInspectedHit] = useState<OpenSearchSearchHit | undefined>();
   const rowCount = useMemo(() => (rows ? rows.length : 0), [rows]);
-  const pageSizeLimit = services.uiSettings?.get(SAMPLE_SIZE_SETTING);
+  const [pageSizeLimit, isShortDots, hideTimeColumn, defaultSortOrder] = useMemo(() => {
+    return [
+      services.uiSettings.get(SAMPLE_SIZE_SETTING),
+      services.uiSettings.get(UI_SETTINGS.SHORT_DOTS_ENABLE),
+      services.uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING),
+      services.uiSettings.get(SORT_DEFAULT_ORDER_SETTING, 'desc'),
+    ];
+  }, [services.uiSettings]);
   const pagination = usePagination({ rowCount, pageSizeLimit });
 
   let adjustedColumns = buildColumns(columns);
@@ -151,34 +164,38 @@ export const DataGridTable = ({
   const legacyDiscoverTable = useMemo(
     () => (
       <LegacyDiscoverTable
-        displayedTableColumns={displayedTableColumns}
         columns={adjustedColumns}
         rows={rows}
         indexPattern={indexPattern}
-        sortOrder={sortingColumns}
-        onChangeSortOrder={onColumnSort}
+        sort={sort}
+        onSort={onSort}
         onRemoveColumn={onRemoveColumn}
-        onReorderColumn={onReorderColumn}
+        onReorderColumn={onMoveColumn}
         onAddColumn={onAddColumn}
         onFilter={onFilter}
         onClose={() => setInspectedHit(undefined)}
         sampleSize={pageSizeLimit}
         showPagination={showPagination}
+        isShortDots={isShortDots}
+        hideTimeColumn={hideTimeColumn}
+        defaultSortOrder={defaultSortOrder}
       />
     ),
     [
-      displayedTableColumns,
       adjustedColumns,
       rows,
       indexPattern,
-      sortingColumns,
-      onColumnSort,
+      sort,
+      onSort,
       onRemoveColumn,
-      onReorderColumn,
+      onMoveColumn,
       onAddColumn,
       onFilter,
       pageSizeLimit,
       showPagination,
+      defaultSortOrder,
+      hideTimeColumn,
+      isShortDots,
     ]
   );
 

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

@@ -16,18 +16,21 @@ import {
 import { stringify } from '@osd/std';
 import { IndexPattern } from '../../../opensearch_dashboards_services';
 import { OpenSearchSearchHit } from '../../doc_views/doc_views_types';
+import { shortenDottedString } from '../../helpers';
 
 export function fetchSourceTypeDataCell(
   idxPattern: IndexPattern,
   row: Record<string, unknown>,
   columnId: string,
-  isDetails: boolean
+  isDetails: boolean,
+  isShortDots: boolean
 ) {
   if (isDetails) {
     return <span>{stringify(row[columnId], null, 2)}</span>;
   }
   const formattedRow = idxPattern.formatHit(row);
-  const keys = Object.keys(formattedRow);
+  const rawKeys = Object.keys(formattedRow);
+  const keys = isShortDots ? rawKeys.map((k) => shortenDottedString(k)) : rawKeys;
 
   return (
     <EuiDescriptionList type="inline" compressed className="source">

src/plugins/discover/public/application/components/default_discover_table/default_discover_table.tsx

@@ -9,8 +9,6 @@ import React, { useEffect, useRef, useState } from 'react';
 import {
   EuiButtonEmpty,
   EuiCallOut,
-  EuiDataGridColumn,
-  EuiDataGridSorting,
   EuiProgress,
   EuiPagination,
   EuiFlexGroup,
@@ -21,41 +19,51 @@ import { TableHeader } from './table_header';
 import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_types';
 import { TableRow } from './table_rows';
 import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { SortOrder } from './helper';
+import { getLegacyDisplayedColumns } from './helper';
 
 export interface DefaultDiscoverTableProps {
-  displayedTableColumns: EuiDataGridColumn[];
   columns: string[];
   rows: OpenSearchSearchHit[];
   indexPattern: IndexPattern;
-  sortOrder: Array<{
-    id: string;
-    direction: 'asc' | 'desc';
-  }>;
-  onChangeSortOrder: (cols: EuiDataGridSorting['columns']) => void;
+  sort: SortOrder[];
+  onSort: (s: SortOrder[]) => void;
   onRemoveColumn: (column: string) => void;
-  onReorderColumn: (col: string, source: number, destination: number) => void;
+  onReorderColumn: (colName: string, destination: number) => void;
   onAddColumn: (column: string) => void;
   onFilter: DocViewFilterFn;
   onClose: () => void;
   sampleSize: number;
+  isShortDots: boolean;
+  hideTimeColumn: boolean;
+  defaultSortOrder: string;
   showPagination?: boolean;
 }
 
 export const LegacyDiscoverTable = ({
-  displayedTableColumns,
   columns,
   rows,
   indexPattern,
-  sortOrder,
-  onChangeSortOrder,
+  sort,
+  onSort,
   onRemoveColumn,
   onReorderColumn,
   onAddColumn,
   onFilter,
   onClose,
   sampleSize,
+  isShortDots,
+  hideTimeColumn,
+  defaultSortOrder,
   showPagination,
 }: DefaultDiscoverTableProps) => {
+  const displayedColumns = getLegacyDisplayedColumns(
+    columns,
+    indexPattern,
+    hideTimeColumn,
+    isShortDots
+  );
+  const displayedColumnNames = displayedColumns.map((column) => column.name);
   const pageSize = 50;
   const [renderedRowCount, setRenderedRowCount] = useState(50); // Start with 50 rows
   const [displayedRows, setDisplayedRows] = useState(rows.slice(0, pageSize));
@@ -137,15 +145,13 @@ export const LegacyDiscoverTable = ({
         <table data-test-subj="docTable" className="osd-table table">
           <thead>
             <TableHeader
-              displayedTableColumns={displayedTableColumns}
-              defaultSortOrder={''}
-              // hideTimeColumn,
+              displayedColumns={displayedColumns}
+              defaultSortOrder={defaultSortOrder}
               indexPattern={indexPattern}
-              // isShortDots,
-              onChangeSortOrder={onChangeSortOrder}
+              onChangeSortOrder={onSort}
               onReorderColumn={onReorderColumn}
               onRemoveColumn={onRemoveColumn}
-              sortOrder={sortOrder}
+              sortOrder={sort}
             />
           </thead>
           <tbody>
@@ -155,13 +161,13 @@ export const LegacyDiscoverTable = ({
                   <TableRow
                     key={index}
                     row={row}
-                    columnIds={displayedTableColumns.map((column) => column.id)}
-                    columns={columns}
+                    columns={displayedColumnNames}
                     indexPattern={indexPattern}
                     onRemoveColumn={onRemoveColumn}
                     onAddColumn={onAddColumn}
                     onFilter={onFilter}
                     onClose={onClose}
+                    isShortDots={isShortDots}
                   />
                 );
               }

src/plugins/discover/public/application/components/default_discover_table/helper.tsx

@@ -0,0 +1,101 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { shortenDottedString } from '../../helpers';
+
+export type SortOrder = [string, string];
+export interface LegacyDisplayedColumn {
+  name: string;
+  displayName: string;
+  isSortable: boolean;
+  isRemoveable: boolean;
+  colLeftIdx: number;
+  colRightIdx: number;
+}
+
+export interface ColumnProps {
+  name: string;
+  displayName: string;
+  isSortable: boolean;
+  isRemoveable: boolean;
+  colLeftIdx: number;
+  colRightIdx: number;
+}
+
+/**
+ * Returns properties necessary to display the time column
+ * If it's an IndexPattern with timefield, the time column is
+ * prepended, not moveable and removeable
+ * @param timeFieldName
+ */
+export function getTimeColumn(timeFieldName: string): ColumnProps {
+  return {
+    name: timeFieldName,
+    displayName: 'Time',
+    isSortable: true,
+    isRemoveable: false,
+    colLeftIdx: -1,
+    colRightIdx: -1,
+  };
+}
+/**
+ * A given array of column names returns an array of properties
+ * necessary to display the columns. If the given indexPattern
+ * has a timefield, a time column is prepended
+ * @param columns
+ * @param indexPattern
+ * @param hideTimeField
+ * @param isShortDots
+ */
+export function getLegacyDisplayedColumns(
+  columns: string[],
+  indexPattern: IndexPattern,
+  hideTimeField: boolean,
+  isShortDots: boolean
+): LegacyDisplayedColumn[] {
+  if (!Array.isArray(columns) || typeof indexPattern !== 'object' || !indexPattern.getFieldByName) {
+    return [];
+  }
+  const columnProps = columns.map((column, idx) => {
+    const field = indexPattern.getFieldByName(column);
+    return {
+      name: column,
+      displayName: isShortDots ? shortenDottedString(column) : column,
+      isSortable: field && field.sortable ? true : false,
+      isRemoveable: column !== '_source' || columns.length > 1,
+      colLeftIdx: idx - 1 < 0 ? -1 : idx - 1,
+      colRightIdx: idx + 1 >= columns.length ? -1 : idx + 1,
+    };
+  });
+  return !hideTimeField && indexPattern.timeFieldName
+    ? [getTimeColumn(indexPattern.timeFieldName), ...columnProps]
+    : columnProps;
+}