From af513949862a45d87f48495766c33456e72e7c10 Mon Sep 17 00:00:00 2001 From: Quynh Nguyen <43350163+qn895@users.noreply.github.com> Date: Wed, 11 Nov 2020 11:30:30 -0600 Subject: [PATCH] [ML] Replace EuiBasicTable with EuiInMemoryTable (#83057) --- .../search_bar_filters.tsx} | 81 +------------ .../analytics_list/analytics_list.tsx | 50 +++++--- .../analytics_list/use_table_settings.ts | 55 +-------- .../components/analytics_search_bar/index.ts | 7 -- .../models_management/models_list.tsx | 56 +++++---- .../transform_list/transform_list.tsx | 108 +++++++++--------- ...r.tsx => transform_search_bar_filters.tsx} | 79 +------------ .../transform_list/use_table_settings.ts | 54 +-------- .../translations/translations/ja-JP.json | 14 +-- .../translations/translations/zh-CN.json | 14 +-- 10 files changed, 152 insertions(+), 366 deletions(-) rename x-pack/plugins/ml/public/application/data_frame_analytics/{pages/analytics_management/components/analytics_search_bar/analytics_search_bar.tsx => common/search_bar_filters.tsx} (66%) delete mode 100644 x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_search_bar/index.ts rename x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/{transform_search_bar.tsx => transform_search_bar_filters.tsx} (63%) diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_search_bar/analytics_search_bar.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/common/search_bar_filters.tsx similarity index 66% rename from x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_search_bar/analytics_search_bar.tsx rename to x-pack/plugins/ml/public/application/data_frame_analytics/common/search_bar_filters.tsx index 7a366bb63420c..e045eb68a63f8 100644 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_search_bar/analytics_search_bar.tsx +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/common/search_bar_filters.tsx @@ -4,23 +4,14 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { Dispatch, SetStateAction, FC, Fragment, useState } from 'react'; -import { - EuiSearchBar, - EuiSearchBarProps, - EuiFlexGroup, - EuiFlexItem, - EuiFormRow, -} from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; -import { stringMatch } from '../../../../../util/string_utils'; +import { stringMatch } from '../../util/string_utils'; import { TermClause, FieldClause, Value, DataFrameAnalyticsListRow, -} from '../analytics_list/common'; -import { ModelItem } from '../models_management/models_list'; +} from '../pages/analytics_management/components/analytics_list/common'; +import { ModelItem } from '../pages/analytics_management/components/models_management/models_list'; export function filterAnalyticsModels( items: ModelItem[], @@ -151,69 +142,3 @@ export function filterAnalytics( return filtered; } - -function getError(errorMessage: string | null) { - if (errorMessage) { - return i18n.translate('xpack.ml.analyticList.searchBar.invalidSearchErrorMessage', { - defaultMessage: 'Invalid search: {errorMessage}', - values: { errorMessage }, - }); - } - - return ''; -} - -interface Props { - filters: EuiSearchBarProps['filters']; - searchQueryText: string; - setSearchQueryText: Dispatch>; -} - -export const AnalyticsSearchBar: FC = ({ filters, searchQueryText, setSearchQueryText }) => { - const [errorMessage, setErrorMessage] = useState(null); - - const onChange: EuiSearchBarProps['onChange'] = ({ query, error }) => { - if (error) { - setErrorMessage(error.message); - } else if (query !== null && query.text !== undefined) { - setSearchQueryText(query.text); - setErrorMessage(null); - } - }; - - return ( - - - {searchQueryText === undefined && ( - - )} - {searchQueryText !== undefined && ( - - )} - - - - - - ); -}; diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx index 77d33af24848b..8ed2436843e0e 100644 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx @@ -10,7 +10,7 @@ import { EuiCallOut, EuiFlexGroup, EuiFlexItem, - EuiBasicTable, + EuiInMemoryTable, EuiSearchBar, EuiSearchBarProps, EuiSpacer, @@ -35,7 +35,7 @@ import { getGroupQueryText, } from '../../../../../jobs/jobs_list/components/utils'; import { SourceSelection } from '../source_selection'; -import { filterAnalytics, AnalyticsSearchBar } from '../analytics_search_bar'; +import { filterAnalytics } from '../../../../common/search_bar_filters'; import { AnalyticsEmptyPrompt } from './empty_prompt'; import { useTableSettings } from './use_table_settings'; import { RefreshAnalyticsListButton } from '../refresh_analytics_list_button'; @@ -97,6 +97,7 @@ export const DataFrameAnalyticsList: FC = ({ const [isLoading, setIsLoading] = useState(false); const [filteredAnalytics, setFilteredAnalytics] = useState([]); const [searchQueryText, setSearchQueryText] = useState(''); + const [searchError, setSearchError] = useState(); const [analytics, setAnalytics] = useState([]); const [analyticsStats, setAnalyticsStats] = useState( undefined @@ -183,9 +184,21 @@ export const DataFrameAnalyticsList: FC = ({ isMlEnabledInSpace ); - const { onTableChange, pageOfItems, pagination, sorting } = useTableSettings< - DataFrameAnalyticsListRow - >(DataFrameAnalyticsListColumn.id, filteredAnalytics); + const { onTableChange, pagination, sorting } = useTableSettings( + DataFrameAnalyticsListColumn.id, + filteredAnalytics + ); + + const handleSearchOnChange: EuiSearchBarProps['onChange'] = (search) => { + if (search.error !== null) { + setSearchError(search.error.message); + return false; + } + + setSearchError(undefined); + setSearchQueryText(search.queryText); + return true; + }; // Before the analytics have been loaded for the first time, display the loading indicator only. // Otherwise a user would see 'No data frame analytics found' during the initial loading. @@ -240,6 +253,14 @@ export const DataFrameAnalyticsList: FC = ({ ); + const search: EuiSearchBarProps = { + query: searchQueryText, + onChange: handleSearchOnChange, + box: { + incremental: true, + }, + filters, + }; return (
@@ -263,25 +284,22 @@ export const DataFrameAnalyticsList: FC = ({
- - - - className="mlAnalyticsTable" + + allowNeutralSort={false} + className="mlAnalyticsInMemoryTable" columns={columns} + error={searchError} hasActions={false} isExpandable={true} isSelectable={false} - items={pageOfItems} + items={analytics} itemId={DataFrameAnalyticsListColumn.id} itemIdToExpandedRowMap={itemIdToExpandedRowMap} loading={isLoading} - onChange={onTableChange} - pagination={pagination!} + onTableChange={onTableChange} + pagination={pagination} sorting={sorting} + search={search} data-test-subj={isLoading ? 'mlAnalyticsTable loading' : 'mlAnalyticsTable loaded'} rowProps={(item) => ({ 'data-test-subj': `mlAnalyticsTableRow row-${item.id}`, diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_table_settings.ts b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_table_settings.ts index c2018463fdf49..5b7d71dacccf8 100644 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_table_settings.ts +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_table_settings.ts @@ -5,18 +5,11 @@ */ import { useState } from 'react'; -import { Direction, EuiBasicTableProps, EuiTableSortingType } from '@elastic/eui'; -import { sortBy, get } from 'lodash'; +import { Direction, EuiBasicTableProps, Pagination, PropertySort } from '@elastic/eui'; const PAGE_SIZE = 10; const PAGE_SIZE_OPTIONS = [10, 25, 50]; -const jobPropertyMap = { - ID: 'id', - Status: 'state', - Type: 'job_type', -}; - // Copying from EUI EuiBasicTable types as type is not correctly picked up for table's onChange // Can be removed when https://github.com/elastic/eui/issues/4011 is addressed in EUI export interface Criteria { @@ -47,9 +40,8 @@ interface AnalyticsBasicTableSettings { interface UseTableSettingsReturnValue { onTableChange: EuiBasicTableProps['onChange']; - pageOfItems: T[]; - pagination: EuiBasicTableProps['pagination']; - sorting: EuiTableSortingType; + pagination: Pagination; + sorting: { sort: PropertySort }; } export function useTableSettings( @@ -65,33 +57,6 @@ export function useTableSettings( sortDirection: 'asc', }); - const getPageOfItems = ( - list: TypeOfItem[], - index: number, - size: number, - sortField: keyof TypeOfItem, - sortDirection: Direction - ) => { - list = sortBy(list, (item) => - get(item, jobPropertyMap[sortField as keyof typeof jobPropertyMap] || sortField) - ); - list = sortDirection === 'asc' ? list : list.reverse(); - const listLength = list.length; - - let pageStart = index * size; - if (pageStart >= listLength && listLength !== 0) { - // if the page start is larger than the number of items due to - // filters being applied or items being deleted, calculate a new page start - pageStart = Math.floor((listLength - 1) / size) * size; - - setTableSettings({ ...tableSettings, pageIndex: pageStart / size }); - } - return { - pageOfItems: list.slice(pageStart, pageStart + size), - totalItemCount: listLength, - }; - }; - const onTableChange: EuiBasicTableProps['onChange'] = ({ page = { index: 0, size: PAGE_SIZE }, sort = { field: sortByField, direction: 'asc' }, @@ -110,27 +75,19 @@ export function useTableSettings( const { pageIndex, pageSize, sortField, sortDirection } = tableSettings; - const { pageOfItems, totalItemCount } = getPageOfItems( - items, - pageIndex, - pageSize, - sortField, - sortDirection - ); - const pagination = { pageIndex, pageSize, - totalItemCount, + totalItemCount: items.length, pageSizeOptions: PAGE_SIZE_OPTIONS, }; const sorting = { sort: { - field: sortField, + field: sortField as string, direction: sortDirection, }, }; - return { onTableChange, pageOfItems, pagination, sorting }; + return { onTableChange, pagination, sorting }; } diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_search_bar/index.ts b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_search_bar/index.ts deleted file mode 100644 index 2748764d7f46e..0000000000000 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_search_bar/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -export { AnalyticsSearchBar, filterAnalytics, filterAnalyticsModels } from './analytics_search_bar'; diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/models_management/models_list.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/models_management/models_list.tsx index 6dd55f1881d72..713cbbc814c32 100644 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/models_management/models_list.tsx +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/models_management/models_list.tsx @@ -8,7 +8,7 @@ import React, { FC, useState, useCallback, useEffect, useMemo } from 'react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { - EuiBasicTable, + EuiInMemoryTable, EuiFlexGroup, EuiFlexItem, EuiTitle, @@ -18,6 +18,7 @@ import { EuiButtonIcon, EuiBadge, SearchFilterConfig, + EuiSearchBarProps, } from '@elastic/eui'; import { EuiBasicTableColumn } from '@elastic/eui/src/components/basic_table/basic_table'; @@ -41,7 +42,7 @@ import { useRefreshAnalyticsList, } from '../../../../common'; import { useTableSettings } from '../analytics_list/use_table_settings'; -import { filterAnalyticsModels, AnalyticsSearchBar } from '../analytics_search_bar'; +import { filterAnalyticsModels } from '../../../../common/search_bar_filters'; import { ML_PAGES } from '../../../../../../../common/constants/ml_url_generator'; import { DataFrameAnalysisConfigType } from '../../../../../../../common/types/data_frame_analytics'; import { timeFormatter } from '../../../../../../../common/util/date_utils'; @@ -401,7 +402,7 @@ export const ModelsList: FC = () => { ] : []; - const { onTableChange, pageOfItems, pagination, sorting } = useTableSettings( + const { onTableChange, pagination, sorting } = useTableSettings( ModelsTableToConfigMapping.id, filteredModels ); @@ -452,6 +453,29 @@ export const ModelsList: FC = () => { } : undefined; + const search: EuiSearchBarProps = { + query: searchQueryText, + onChange: (searchChange) => { + if (searchChange.error !== null) { + return false; + } + setSearchQueryText(searchChange.queryText); + return true; + }, + box: { + incremental: true, + }, + ...(inferenceTypesOptions && inferenceTypesOptions.length > 0 + ? { + filters, + } + : {}), + ...(selectedModels.length > 0 + ? { + toolsLeft, + } + : {}), + }; return ( <> @@ -464,31 +488,21 @@ export const ModelsList: FC = () => {
- - {selectedModels.length > 0 && toolsLeft} - - - - - - + + allowNeutralSort={false} columns={columns} hasActions={true} isExpandable={true} + itemIdToExpandedRowMap={itemIdToExpandedRowMap} isSelectable={false} - items={pageOfItems} + items={items} itemId={ModelsTableToConfigMapping.id} - itemIdToExpandedRowMap={itemIdToExpandedRowMap} loading={isLoading} - onChange={onTableChange} - selection={selection} - pagination={pagination!} + onTableChange={onTableChange} + pagination={pagination} sorting={sorting} - data-test-subj={isLoading ? 'mlModelsTable loading' : 'mlModelsTable loaded'} + search={search} + selection={selection} rowProps={(item) => ({ 'data-test-subj': `mlModelsTableRow row-${item.model_id}`, })} diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx index 12836c0a18ce2..4204433feb6b6 100644 --- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx +++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx @@ -4,26 +4,24 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { MouseEventHandler, FC, useContext, useEffect, useState } from 'react'; +import React, { MouseEventHandler, FC, useContext, useState } from 'react'; import { i18n } from '@kbn/i18n'; import { - EuiBasicTable, - EuiBasicTableProps, EuiButtonEmpty, EuiButtonIcon, EuiCallOut, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, - EuiSearchBar, - EuiSpacer, EuiPopover, EuiTitle, + EuiInMemoryTable, + EuiSearchBarProps, } from '@elastic/eui'; -import { TransformId } from '../../../../../../common/types/transform'; +import type { TransformId } from '../../../../../../common/types/transform'; import { useRefreshTransformList, @@ -47,7 +45,7 @@ import { StopActionName } from '../action_stop'; import { ItemIdToExpandedRowMap } from './common'; import { useColumns } from './use_columns'; import { ExpandedRow } from './expanded_row'; -import { TransformSearchBar, filterTransforms } from './transform_search_bar'; +import { transformFilters, filterTransforms } from './transform_search_bar_filters'; import { useTableSettings } from './use_table_settings'; function getItemIdToExpandedRowMap( @@ -81,7 +79,8 @@ export const TransformList: FC = ({ const [isLoading, setIsLoading] = useState(false); const { refresh } = useRefreshTransformList({ isLoading: setIsLoading }); - const [searchQueryText, setSearchQueryText] = useState(''); + const [filterActive, setFilterActive] = useState(false); + const [filteredTransforms, setFilteredTransforms] = useState([]); const [expandedRowItemIds, setExpandedRowItemIds] = useState([]); const [transformSelection, setTransformSelection] = useState([]); @@ -89,6 +88,7 @@ export const TransformList: FC = ({ const bulkStartAction = useStartAction(false); const bulkDeleteAction = useDeleteAction(false); + const [searchError, setSearchError] = useState(undefined); const stopTransforms = useStopTransforms(); const { capabilities } = useContext(AuthorizationContext); @@ -97,42 +97,38 @@ export const TransformList: FC = ({ !capabilities.canPreviewTransform || !capabilities.canStartStopTransform; + const { sorting, pagination, onTableChange } = useTableSettings( + TRANSFORM_LIST_COLUMN.ID, + transforms + ); + const { columns, modals: singleActionModals } = useColumns( expandedRowItemIds, setExpandedRowItemIds, transformSelection ); - const updateFilteredItems = (queryClauses: any) => { - if (queryClauses.length) { - const filtered = filterTransforms(transforms, queryClauses); - setFilteredTransforms(filtered); + const onQueryChange = ({ + query, + error, + }: Parameters>[0]) => { + if (error) { + setSearchError(error.message); } else { - setFilteredTransforms(transforms); - } - }; - - useEffect(() => { - const filterList = () => { - if (searchQueryText !== '') { - const query = EuiSearchBar.Query.parse(searchQueryText); - let clauses: any = []; - if (query && query.ast !== undefined && query.ast.clauses !== undefined) { - clauses = query.ast.clauses; - } - updateFilteredItems(clauses); + let clauses: any = []; + if (query && query.ast !== undefined && query.ast.clauses !== undefined) { + clauses = query.ast.clauses; + } + if (clauses.length > 0) { + setFilterActive(true); + const filtered = filterTransforms(transforms, clauses); + setFilteredTransforms(filtered); } else { - updateFilteredItems([]); + setFilterActive(false); } - }; - filterList(); - // eslint-disable-next-line - }, [searchQueryText, transforms]); // missing dependency updateFilteredItems - - const { onTableChange, pageOfItems, pagination, sorting } = useTableSettings( - TRANSFORM_LIST_COLUMN.ID, - filteredTransforms - ); + setSearchError(undefined); + } + }; // Before the transforms have been loaded for the first time, display the loading indicator only. // Otherwise a user would see 'No transforms found' during the initial loading. @@ -265,6 +261,16 @@ export const TransformList: FC = ({ ); + const search = { + toolsLeft: transformSelection.length > 0 ? renderToolsLeft() : undefined, + toolsRight, + onChange: onQueryChange, + box: { + incremental: true, + }, + filters: transformFilters, + }; + const selection = { onSelectionChange: (selected: TransformListRow[]) => setTransformSelection(selected), }; @@ -277,38 +283,30 @@ export const TransformList: FC = ({ {/* Single Action Modals */} {singleActionModals} - - {transformSelection.length > 0 ? ( - {renderToolsLeft()} - ) : null} - - - - {toolsRight} - - - + + ['onChange']} + onTableChange={onTableChange} + pagination={pagination} + rowProps={(item) => ({ + 'data-test-subj': `transformListRow row-${item.id}`, + })} selection={selection} - pagination={pagination!} sorting={sorting} + search={search} data-test-subj={`transformListTable ${ isLoading || transformsLoading ? 'loading' : 'loaded' }`} - rowProps={(item) => ({ - 'data-test-subj': `transformListRow row-${item.id}`, - })} />
); diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_search_bar.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_search_bar_filters.tsx similarity index 63% rename from x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_search_bar.tsx rename to x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_search_bar_filters.tsx index fdcb9ba5f0aff..915ae67e843e3 100644 --- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_search_bar.tsx +++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_search_bar_filters.tsx @@ -4,23 +4,15 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { Dispatch, SetStateAction, FC, Fragment, useState } from 'react'; -import { - EuiBadge, - EuiSearchBar, - EuiSearchBarProps, - EuiFlexGroup, - EuiFlexItem, - EuiFormRow, - SearchFilterConfig, -} from '@elastic/eui'; +import React from 'react'; +import { EuiBadge, SearchFilterConfig } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { TermClause, FieldClause, Value } from './common'; import { TRANSFORM_MODE, TRANSFORM_STATE } from '../../../../../../common/constants'; import { TransformListRow } from '../../../../common'; import { getTaskStateBadge } from './use_columns'; -const filters: SearchFilterConfig[] = [ +export const transformFilters: SearchFilterConfig[] = [ { type: 'field_value_selection', field: 'state.state', @@ -114,68 +106,3 @@ export const filterTransforms = ( return filtered; }; - -function getError(errorMessage: string | null) { - if (errorMessage) { - return i18n.translate('xpack.transform.transformList.searchBar.invalidSearchErrorMessage', { - defaultMessage: 'Invalid search: {errorMessage}', - values: { errorMessage }, - }); - } - - return ''; -} - -interface Props { - searchQueryText: string; - setSearchQueryText: Dispatch>; -} - -export const TransformSearchBar: FC = ({ searchQueryText, setSearchQueryText }) => { - const [errorMessage, setErrorMessage] = useState(null); - - const onChange: EuiSearchBarProps['onChange'] = ({ query, error }) => { - if (error) { - setErrorMessage(error.message); - } else if (query !== null && query.text !== undefined) { - setSearchQueryText(query.text); - setErrorMessage(null); - } - }; - - return ( - - - {searchQueryText === undefined && ( - - )} - {searchQueryText !== undefined && ( - - )} - - - - - - ); -}; diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/use_table_settings.ts b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/use_table_settings.ts index 9739fb6be6afb..5b7d71dacccf8 100644 --- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/use_table_settings.ts +++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/use_table_settings.ts @@ -5,17 +5,11 @@ */ import { useState } from 'react'; -import { Direction, EuiBasicTableProps, EuiTableSortingType } from '@elastic/eui'; -import { sortBy } from 'lodash'; -import { get } from 'lodash'; +import { Direction, EuiBasicTableProps, Pagination, PropertySort } from '@elastic/eui'; const PAGE_SIZE = 10; const PAGE_SIZE_OPTIONS = [10, 25, 50]; -const propertyMap = { - Mode: 'mode', -}; - // Copying from EUI EuiBasicTable types as type is not correctly picked up for table's onChange // Can be removed when https://github.com/elastic/eui/issues/4011 is addressed in EUI export interface Criteria { @@ -46,9 +40,8 @@ interface AnalyticsBasicTableSettings { interface UseTableSettingsReturnValue { onTableChange: EuiBasicTableProps['onChange']; - pageOfItems: T[]; - pagination: EuiBasicTableProps['pagination']; - sorting: EuiTableSortingType; + pagination: Pagination; + sorting: { sort: PropertySort }; } export function useTableSettings( @@ -64,33 +57,6 @@ export function useTableSettings( sortDirection: 'asc', }); - const getPageOfItems = ( - list: TypeOfItem[], - index: number, - size: number, - sortField: keyof TypeOfItem, - sortDirection: Direction - ) => { - list = sortBy(list, (item) => - get(item, propertyMap[sortField as keyof typeof propertyMap] || sortField) - ); - list = sortDirection === 'asc' ? list : list.reverse(); - const listLength = list.length; - - let pageStart = index * size; - if (pageStart >= listLength && listLength !== 0) { - // if the page start is larger than the number of items due to - // filters being applied or items being deleted, calculate a new page start - pageStart = Math.floor((listLength - 1) / size) * size; - - setTableSettings({ ...tableSettings, pageIndex: pageStart / size }); - } - return { - pageOfItems: list.slice(pageStart, pageStart + size), - totalItemCount: listLength, - }; - }; - const onTableChange: EuiBasicTableProps['onChange'] = ({ page = { index: 0, size: PAGE_SIZE }, sort = { field: sortByField, direction: 'asc' }, @@ -109,27 +75,19 @@ export function useTableSettings( const { pageIndex, pageSize, sortField, sortDirection } = tableSettings; - const { pageOfItems, totalItemCount } = getPageOfItems( - items, - pageIndex, - pageSize, - sortField, - sortDirection - ); - const pagination = { pageIndex, pageSize, - totalItemCount, + totalItemCount: items.length, pageSizeOptions: PAGE_SIZE_OPTIONS, }; const sorting = { sort: { - field: sortField, + field: sortField as string, direction: sortDirection, }, }; - return { onTableChange, pageOfItems, pagination, sorting }; + return { onTableChange, pagination, sorting }; } diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 125371dbcb800..852c3ffd9bfd6 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -1360,6 +1360,12 @@ "data.search.unableToGetSavedQueryToastTitle": "保存したクエリ {savedQueryId} を読み込めません", "data.search.upgradeLicense": "クエリがタイムアウトしました。無料のベーシックティアではクエリがタイムアウトすることはありません。", "data.search.upgradeLicenseActionText": "今すぐアップグレード", + "data.search.functions.kibana_context.filters.help": "Kibana ジェネリックフィルターを指定します", + "data.search.functions.kibana_context.help": "Kibana グローバルコンテキストを更新します", + "data.search.functions.kibana_context.q.help": "自由形式の Kibana テキストクエリを指定します", + "data.search.functions.kibana_context.savedSearchId.help": "クエリとフィルターに使用する保存検索ID を指定します。", + "data.search.functions.kibana_context.timeRange.help": "Kibana 時間範囲フィルターを指定します", + "data.search.functions.kibana.help": "Kibana グローバルコンテキストを取得します", "devTools.badge.readOnly.text": "読み込み専用", "devTools.badge.readOnly.tooltip": "を保存できませんでした", "devTools.devToolsTitle": "開発ツール", @@ -1661,12 +1667,6 @@ "expressions.functions.font.invalidFontWeightErrorMessage": "無効なフォント太さ：'{weight}'", "expressions.functions.font.invalidTextAlignmentErrorMessage": "無効なテキストアラインメント：'{align}'", "expressions.functions.fontHelpText": "フォントスタイルを作成します。", - "data.search.functions.kibana_context.filters.help": "Kibana ジェネリックフィルターを指定します", - "data.search.functions.kibana_context.help": "Kibana グローバルコンテキストを更新します", - "data.search.functions.kibana_context.q.help": "自由形式の Kibana テキストクエリを指定します", - "data.search.functions.kibana_context.savedSearchId.help": "クエリとフィルターに使用する保存検索ID を指定します。", - "data.search.functions.kibana_context.timeRange.help": "Kibana 時間範囲フィルターを指定します", - "data.search.functions.kibana.help": "Kibana グローバルコンテキストを取得します", "expressions.functions.theme.args.defaultHelpText": "テーマ情報がない場合のデフォルト値。", "expressions.functions.theme.args.variableHelpText": "読み取るテーマ変数名。", "expressions.functions.themeHelpText": "テーマ設定を読み取ります。", @@ -11647,7 +11647,6 @@ "xpack.ml.advancedSettings.anomalyDetectionDefaultTimeRangeName": "異常検知結果の時間フィルターデフォルト", "xpack.ml.advancedSettings.enableAnomalyDetectionDefaultTimeRangeDesc": "シングルメトリックビューアーと異常エクスプローラーでデフォルト時間フィルターを使用します。有効ではない場合、ジョブの全時間範囲の結果が表示されます。", "xpack.ml.advancedSettings.enableAnomalyDetectionDefaultTimeRangeName": "異常検知結果の時間フィルターデフォルトを有効にする", - "xpack.ml.analyticList.searchBar.invalidSearchErrorMessage": "無効な検索: {errorMessage}", "xpack.ml.annotationFlyout.applyToPartitionTextLabel": "注釈をこの系列に適用", "xpack.ml.annotationsTable.actionsColumnName": "アクション", "xpack.ml.annotationsTable.annotationColumnName": "注釈", @@ -19797,7 +19796,6 @@ "xpack.transform.transformList.refreshButtonLabel": "更新", "xpack.transform.transformList.rowCollapse": "{transformId} の詳細を非表示", "xpack.transform.transformList.rowExpand": "{transformId} の詳細を表示", - "xpack.transform.transformList.searchBar.invalidSearchErrorMessage": "無効な検索: {errorMessage}", "xpack.transform.transformList.showDetailsColumn.screenReaderDescription": "このカラムには変換ごとの詳細を示すクリック可能なコントロールが含まれます", "xpack.transform.transformList.startActionNameText": "開始", "xpack.transform.transformList.startedTransformBulkToolTip": "1 つまたは複数の変換が既に開始済みです。", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 957626e7e60c8..461b93e2e081d 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -1361,6 +1361,12 @@ "data.search.unableToGetSavedQueryToastTitle": "无法加载已保存查询 {savedQueryId}", "data.search.upgradeLicense": "您的查询已超时。使用我们免费的基础级许可，您的查询永不会超时。", "data.search.upgradeLicenseActionText": "立即升级", + "data.search.functions.kibana_context.filters.help": "指定 Kibana 常规筛选", + "data.search.functions.kibana_context.help": "更新 kibana 全局上下文", + "data.search.functions.kibana_context.q.help": "指定 Kibana 自由格式文本查询", + "data.search.functions.kibana_context.savedSearchId.help": "指定要用于查询和筛选的已保存搜索 ID", + "data.search.functions.kibana_context.timeRange.help": "指定 Kibana 时间范围筛选", + "data.search.functions.kibana.help": "获取 kibana 全局上下文", "devTools.badge.readOnly.text": "只读", "devTools.badge.readOnly.tooltip": "无法保存", "devTools.devToolsTitle": "开发工具", @@ -1662,12 +1668,6 @@ "expressions.functions.font.invalidFontWeightErrorMessage": "无效的字体粗细：“{weight}”", "expressions.functions.font.invalidTextAlignmentErrorMessage": "无效的文本对齐方式：“{align}”", "expressions.functions.fontHelpText": "创建字体样式。", - "data.search.functions.kibana_context.filters.help": "指定 Kibana 常规筛选", - "data.search.functions.kibana_context.help": "更新 kibana 全局上下文", - "data.search.functions.kibana_context.q.help": "指定 Kibana 自由格式文本查询", - "data.search.functions.kibana_context.savedSearchId.help": "指定要用于查询和筛选的已保存搜索 ID", - "data.search.functions.kibana_context.timeRange.help": "指定 Kibana 时间范围筛选", - "data.search.functions.kibana.help": "获取 kibana 全局上下文", "expressions.functions.theme.args.defaultHelpText": "主题信息不可用时的默认值。", "expressions.functions.theme.args.variableHelpText": "要读取的主题变量的名称。", "expressions.functions.themeHelpText": "读取主题设置。", @@ -11660,7 +11660,6 @@ "xpack.ml.advancedSettings.anomalyDetectionDefaultTimeRangeName": "异常检测结果的时间筛选默认值", "xpack.ml.advancedSettings.enableAnomalyDetectionDefaultTimeRangeDesc": "使用 Single Metric Viewer 和 Anomaly Explorer 中的默认时间筛选。如果未启用，则将显示作业的整个时间范围的结果。", "xpack.ml.advancedSettings.enableAnomalyDetectionDefaultTimeRangeName": "对异常检测结果启用时间筛选默认值", - "xpack.ml.analyticList.searchBar.invalidSearchErrorMessage": "搜索无效：{errorMessage}", "xpack.ml.annotationFlyout.applyToPartitionTextLabel": "将标注应用到此系列", "xpack.ml.annotationsTable.actionsColumnName": "操作", "xpack.ml.annotationsTable.annotationColumnName": "注释", @@ -19816,7 +19815,6 @@ "xpack.transform.transformList.refreshButtonLabel": "刷新", "xpack.transform.transformList.rowCollapse": "隐藏 {transformId} 的详情", "xpack.transform.transformList.rowExpand": "显示 {transformId} 的详情", - "xpack.transform.transformList.searchBar.invalidSearchErrorMessage": "搜索无效：{errorMessage}", "xpack.transform.transformList.showDetailsColumn.screenReaderDescription": "此列包含可单击控件，用于显示每个转换的更多详情", "xpack.transform.transformList.startActionNameText": "启动", "xpack.transform.transformList.startedTransformBulkToolTip": "一个或多个选定数据帧转换已启动。",