Add sorting capabilities to Inference Endpoints table

x-pack/solutions/search/plugins/search_inference_endpoints/public/components/all_inference_endpoints/constants.ts

@@ -5,28 +5,12 @@
  * 2.0.
  */
 
-import type { QueryParams, AllInferenceEndpointsTableState, FilterOptions } from './types';
-import { SortFieldInferenceEndpoint, SortOrder } from './types';
-
-export const DEFAULT_TABLE_ACTIVE_PAGE = 1;
-export const DEFAULT_TABLE_LIMIT = 25;
-
-export const DEFAULT_QUERY_PARAMS: QueryParams = {
-  page: DEFAULT_TABLE_ACTIVE_PAGE,
-  perPage: DEFAULT_TABLE_LIMIT,
-  sortField: SortFieldInferenceEndpoint.inference_id,
-  sortOrder: SortOrder.asc,
-};
+import type { FilterOptions } from './types';
 
 export const DEFAULT_FILTER_OPTIONS: FilterOptions = {
   provider: [],
   type: [],
 };
 
-export const DEFAULT_INFERENCE_ENDPOINTS_TABLE_STATE: AllInferenceEndpointsTableState = {
-  filterOptions: DEFAULT_FILTER_OPTIONS,
-  queryParams: DEFAULT_QUERY_PARAMS,
-};
-
 export const PIPELINE_URL = 'ingest/ingest_pipelines';
 export const SERVERLESS_INDEX_MANAGEMENT_URL = 'index_details';

x-pack/solutions/search/plugins/search_inference_endpoints/public/components/all_inference_endpoints/tabular_page.tsx

@@ -10,7 +10,7 @@ import { i18n as kbnI18n } from '@kbn/i18n';
 import { css } from '@emotion/react';
 
 import type { EuiBasicTableColumn, UseEuiTheme } from '@elastic/eui';
-import { EuiBasicTable, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiInMemoryTable, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import type { InferenceAPIConfigResponse } from '@kbn/ml-trained-models-utils';
 import type {
   InferenceInferenceEndpointInfo,
@@ -23,8 +23,9 @@ import * as i18n from '../../../common/translations';
 
 import { useTableData } from '../../hooks/use_table_data';
 import type { FilterOptions } from './types';
+import { INFERENCE_ENDPOINTS_TABLE_PER_PAGE_VALUES } from './types';
 
-import { useAllInferenceEndpointsState } from '../../hooks/use_all_inference_endpoints_state';
+import { DEFAULT_FILTER_OPTIONS } from './constants';
 import { ServiceProviderFilter } from './filter/service_provider_filter';
 import { TaskTypeFilter } from './filter/task_type_filter';
 import { TableSearch } from './search/table_search';
@@ -34,6 +35,7 @@ import { ServiceProvider } from './render_table_columns/render_service_provider/
 import { TaskType } from './render_table_columns/render_task_type/task_type';
 import { DeleteAction } from './render_table_columns/render_actions/actions/delete/delete_action';
 import { useKibana } from '../../hooks/use_kibana';
+import { getModelId } from '../../utils/get_model_id';
 import { isEndpointPreconfigured } from '../../utils/preconfigured_endpoint_helper';
 import { EditInferenceFlyout } from '../edit_inference_endpoints/edit_inference_flyout';
 import { docLinks } from '../../../common/doc_links';
@@ -58,8 +60,7 @@ export const TabularPage: React.FC<TabularPageProps> = ({ inferenceEndpoints })
     InferenceInferenceEndpointInfo | undefined
   >(undefined);
   const [searchKey, setSearchKey] = React.useState('');
-  const { queryParams, setQueryParams, filterOptions, setFilterOptions } =
-    useAllInferenceEndpointsState();
+  const [filterOptions, setFilterOptions] = useState<FilterOptions>(DEFAULT_FILTER_OPTIONS);
 
   const copyContent = useCallback(
     (inferenceId: string) => {
@@ -111,19 +112,11 @@ export const TabularPage: React.FC<TabularPageProps> = ({ inferenceEndpoints })
     setSelectedInferenceEndpoint(undefined);
   }, []);
 
-  const onFilterChangedCallback = useCallback(
-    (newFilterOptions: Partial<FilterOptions>) => {
-      setFilterOptions(newFilterOptions);
-    },
-    [setFilterOptions]
-  );
+  const onFilterChangedCallback = useCallback((newFilterOptions: Partial<FilterOptions>) => {
+    setFilterOptions((prev) => ({ ...prev, ...newFilterOptions }));
+  }, []);
 
-  const { tableData, paginatedSortedTableData, pagination, sorting } = useTableData(
-    inferenceEndpoints,
-    queryParams,
-    filterOptions,
-    searchKey
-  );
+  const tableData = useTableData(inferenceEndpoints, filterOptions, searchKey);
 
   const tableColumns = useMemo<Array<EuiBasicTableColumn<InferenceInferenceEndpointInfo>>>(
     () => [
@@ -151,6 +144,7 @@ export const TabularPage: React.FC<TabularPageProps> = ({ inferenceEndpoints })
         render: (endpointInfo: InferenceInferenceEndpointInfo) => {
           return <Model endpointInfo={endpointInfo} />;
         },
+        sortable: (endpointInfo: InferenceInferenceEndpointInfo) => getModelId(endpointInfo) ?? '',
         width: '200px',
       },
       {
@@ -164,7 +158,7 @@ export const TabularPage: React.FC<TabularPageProps> = ({ inferenceEndpoints })
 
           return null;
         },
-        sortable: false,
+        sortable: true,
         width: '285px',
       },
       {
@@ -178,7 +172,7 @@ export const TabularPage: React.FC<TabularPageProps> = ({ inferenceEndpoints })
 
           return null;
         },
-        sortable: false,
+        sortable: true,
         width: '100px',
       },
       {
@@ -218,24 +212,6 @@ export const TabularPage: React.FC<TabularPageProps> = ({ inferenceEndpoints })
     [copyContent, displayDeleteActionitem, displayInferenceFlyout]
   );
 
-  const handleTableChange = useCallback(
-    ({ page, sort }: any) => {
-      const newQueryParams = {
-        ...queryParams,
-        ...(sort && {
-          sortField: sort.field,
-          sortOrder: sort.direction,
-        }),
-        ...(page && {
-          page: page.index + 1,
-          perPage: page.size,
-        }),
-      };
-      setQueryParams(newQueryParams);
-    },
-    [queryParams, setQueryParams]
-  );
-
   return (
     <>
       <EuiFlexGroup direction="column">
@@ -278,13 +254,20 @@ export const TabularPage: React.FC<TabularPageProps> = ({ inferenceEndpoints })
         </EuiFlexGroup>
         <EndpointStats endpoints={tableData} />
         <EuiFlexItem>
-          <EuiBasicTable
+          <EuiInMemoryTable
+            allowNeutralSort={false}
             columns={tableColumns}
             itemId="inference_id"
-            items={paginatedSortedTableData}
-            onChange={handleTableChange}
-            pagination={pagination}
-            sorting={sorting}
+            items={tableData}
+            pagination={{
+              pageSizeOptions: INFERENCE_ENDPOINTS_TABLE_PER_PAGE_VALUES,
+            }}
+            sorting={{
+              sort: {
+                field: 'inference_id',
+                direction: 'asc',
+              },
+            }}
             data-test-subj="inferenceEndpointTable"
             tableCaption={kbnI18n.translate(
               'xpack.searchInferenceEndpoints.tabularPage.tableCaption',

x-pack/solutions/search/plugins/search_inference_endpoints/public/components/all_inference_endpoints/types.ts

@@ -10,39 +10,11 @@ import type { InferenceTaskType } from '@elastic/elasticsearch/lib/api/types';
 
 export const INFERENCE_ENDPOINTS_TABLE_PER_PAGE_VALUES = [25, 50, 100];
 
-export enum SortFieldInferenceEndpoint {
-  inference_id = 'inference_id',
-}
-export enum SortOrder {
-  asc = 'asc',
-  desc = 'desc',
-}
-
-export interface SortingParams {
-  sortField: SortFieldInferenceEndpoint;
-  sortOrder: SortOrder;
-}
-
-export interface QueryParams extends SortingParams {
-  page: number;
-  perPage: number;
-}
-
 export interface FilterOptions {
   provider: ServiceProviderKeys[];
   type: InferenceTaskType[];
 }
 
-export interface AllInferenceEndpointsTableState {
-  filterOptions: FilterOptions;
-  queryParams: QueryParams;
-}
-
-export interface EuiBasicTableSortTypes {
-  direction: SortOrder;
-  field: string;
-}
-
 export interface InferenceUsageInfo {
   id: string;
   type: string;