Skip to content

Commit

Permalink
Resolve sort, default sort and short dot (#5771)
Browse files Browse the repository at this point in the history
Signed-off-by: Anan Z <[email protected]>
Signed-off-by: Anan Zhuang <[email protected]>
  • Loading branch information
ananzh authored Feb 2, 2024
1 parent 0246257 commit 0901ddc
Show file tree
Hide file tree
Showing 14 changed files with 333 additions and 143 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
Expand All @@ -49,6 +55,7 @@ export const DataGridTable = ({
indexPattern,
onAddColumn,
onFilter,
onMoveColumn,
onRemoveColumn,
onReorderColumn,
onSetColumns,
Expand All @@ -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);
Expand Down Expand Up @@ -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,
]
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import React, { useEffect, useRef, useState } from 'react';
import {
EuiButtonEmpty,
EuiCallOut,
EuiDataGridColumn,
EuiDataGridSorting,
EuiProgress,
EuiPagination,
EuiFlexGroup,
Expand All @@ -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));
Expand Down Expand Up @@ -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>
Expand All @@ -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}
/>
);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
Loading

0 comments on commit 0901ddc

Please sign in to comment.