Skip to content

Commit

Permalink
Resolve sort, default sort and short dot
Browse files Browse the repository at this point in the history
Signed-off-by: Anan Z <[email protected]>
  • Loading branch information
ananzh committed Feb 1, 2024
1 parent 1848efe commit 4017f26
Show file tree
Hide file tree
Showing 12 changed files with 240 additions and 139 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,24 +13,30 @@ 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 @@ -48,6 +54,7 @@ export const DataGridTable = ({
indexPattern,
onAddColumn,
onFilter,
onMoveColumn,
onRemoveColumn,
onReorderColumn,
onSetColumns,
Expand All @@ -66,7 +73,14 @@ export const DataGridTable = ({

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 @@ -149,32 +163,36 @@ 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}
isShortDots={isShortDots}
hideTimeColumn={hideTimeColumn}
defaultSortOrder={defaultSortOrder}
/>
),
[
displayedTableColumns,
adjustedColumns,
rows,
indexPattern,
sortingColumns,
onColumnSort,
sort,
onSort,
onRemoveColumn,
onReorderColumn,
onMoveColumn,
onAddColumn,
onFilter,
pageSizeLimit,
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 @@ -6,51 +6,55 @@
import './_doc_table.scss';

import React, { useEffect, useRef, useState } from 'react';
import {
EuiButtonEmpty,
EuiCallOut,
EuiDataGridColumn,
EuiDataGridSorting,
EuiProgress,
} from '@elastic/eui';
import { EuiButtonEmpty, EuiCallOut, EuiProgress } from '@elastic/eui';
import { FormattedMessage } from '@osd/i18n/react';
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;
}

export const LegacyDiscoverTable = ({
displayedTableColumns,
columns,
rows,
indexPattern,
sortOrder,
onChangeSortOrder,
sort,
onSort,
onRemoveColumn,
onReorderColumn,
onAddColumn,
onFilter,
onClose,
sampleSize,
isShortDots,
hideTimeColumn,
defaultSortOrder,
}: DefaultDiscoverTableProps) => {
const displayedDefaultColumns = getLegacyDisplayedColumns(
columns,
indexPattern,
hideTimeColumn,
isShortDots
);
const adjustedDefaultColumnNames = displayedDefaultColumns.map((column) => column.name);
const [renderedRowCount, setRenderedRowCount] = useState(50); // Start with 50 rows
const observerRef = useRef<IntersectionObserver | null>(null);
const sentinelRef = useRef<HTMLDivElement | null>(null);
Expand Down Expand Up @@ -87,15 +91,13 @@ export const LegacyDiscoverTable = ({
<table data-test-subj="docTable" className="osd-table table">
<thead>
<TableHeader
displayedTableColumns={displayedTableColumns}
defaultSortOrder={''}
// hideTimeColumn,
displayedColumns={displayedDefaultColumns}
defaultSortOrder={defaultSortOrder}
indexPattern={indexPattern}
// isShortDots,
onChangeSortOrder={onChangeSortOrder}
onChangeSortOrder={onSort}
onReorderColumn={onReorderColumn}
onRemoveColumn={onRemoveColumn}
sortOrder={sortOrder}
sortOrder={sort as SortOrder[]}
/>
</thead>
<tbody>
Expand All @@ -104,13 +106,13 @@ export const LegacyDiscoverTable = ({
<TableRow
key={index}
row={row}
columnIds={displayedTableColumns.map((column) => column.id)}
columns={columns}
columns={adjustedDefaultColumnNames}
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 4017f26

Please sign in to comment.