Add sorting params to list endpoints; allow sorting on agent config and package config tables; normalize casing of 'desc' and 'asc'

Author: jen-huang

x-pack/plugins/ingest_manager/common/types/rest_spec/common.ts

@@ -5,7 +5,9 @@
  */
 
 export interface ListWithKuery {
-  page: number;
-  perPage: number;
+  page?: number;
+  perPage?: number;
+  sortField?: string;
+  sortOrder?: 'desc' | 'asc';
   kuery?: string;
 }

x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/index.ts

@@ -13,6 +13,7 @@ export { useLink } from './use_link';
 export { useKibanaLink } from './use_kibana_link';
 export { usePackageIconType, UsePackageIconType } from './use_package_icon_type';
 export { usePagination, Pagination } from './use_pagination';
+export { useSorting } from './use_sorting';
 export { useDebounce } from './use_debounce';
 export * from './use_request';
 export * from './use_input';

x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_sorting.tsx

@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+import { useState } from 'react';
+import { CriteriaWithPagination } from '@elastic/eui/src/components/basic_table/basic_table';
+
+export function useSorting<T>(defaultSorting: CriteriaWithPagination<T>['sort']) {
+  const [sorting, setSorting] = useState<CriteriaWithPagination<T>['sort']>(defaultSorting);
+
+  return {
+    sorting,
+    setSorting,
+  };
+}

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_package_config_page/step_select_config.tsx

@@ -31,7 +31,12 @@ export const StepSelectConfig: React.FunctionComponent<{
     data: agentConfigsData,
     error: agentConfigsError,
     isLoading: isAgentConfigsLoading,
-  } = useGetAgentConfigs();
+  } = useGetAgentConfigs({
+    page: 1,
+    perPage: 1000,
+    sortField: 'name',
+    sortOrder: 'asc',
+  });
   const agentConfigs = agentConfigsData?.items || [];
   const agentConfigsById = agentConfigs.reduce(
     (acc: { [key: string]: GetAgentConfigsResponseItem }, config) => {

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/package_configs/package_configs_table.tsx

@@ -118,6 +118,7 @@ export const PackageConfigsTable: React.FunctionComponent<Props> = ({
     (): EuiInMemoryTableProps<InMemoryPackageConfig>['columns'] => [
       {
         field: 'name',
+        sortable: true,
         name: i18n.translate(
           'xpack.ingestManager.configDetails.packageConfigsTable.nameColumnTitle',
           {
@@ -137,6 +138,7 @@ export const PackageConfigsTable: React.FunctionComponent<Props> = ({
       },
       {
         field: 'packageTitle',
+        sortable: true,
         name: i18n.translate(
           'xpack.ingestManager.configDetails.packageConfigsTable.packageNameColumnTitle',
           {

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/list_page/index.tsx

@@ -17,6 +17,7 @@ import {
   EuiTableFieldDataColumnType,
   EuiTextColor,
 } from '@elastic/eui';
+import { CriteriaWithPagination } from '@elastic/eui/src/components/basic_table/basic_table';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage, FormattedDate } from '@kbn/i18n/react';
 import { useHistory } from 'react-router-dom';
@@ -27,6 +28,7 @@ import {
   useCapabilities,
   useGetAgentConfigs,
   usePagination,
+  useSorting,
   useLink,
   useConfig,
   useUrlParams,
@@ -84,6 +86,10 @@ export const AgentConfigListPage: React.FunctionComponent<{}> = () => {
       : urlParams.kuery ?? ''
   );
   const { pagination, pageSizeOptions, setPagination } = usePagination();
+  const { sorting, setSorting } = useSorting<AgentConfig>({
+    field: 'updated_at',
+    direction: 'desc',
+  });
   const history = useHistory();
   const isCreateAgentConfigFlyoutOpen = 'create' in urlParams;
   const setIsCreateAgentConfigFlyoutOpen = useCallback(
@@ -106,6 +112,8 @@ export const AgentConfigListPage: React.FunctionComponent<{}> = () => {
   const { isLoading, data: agentConfigData, sendRequest } = useGetAgentConfigs({
     page: pagination.currentPage,
     perPage: pagination.pageSize,
+    sortField: sorting?.field,
+    sortOrder: sorting?.direction,
     kuery: search,
   });
 
@@ -116,6 +124,7 @@ export const AgentConfigListPage: React.FunctionComponent<{}> = () => {
     > = [
       {
         field: 'name',
+        sortable: true,
         name: i18n.translate('xpack.ingestManager.agentConfigList.nameColumnTitle', {
           defaultMessage: 'Name',
         }),
@@ -158,6 +167,7 @@ export const AgentConfigListPage: React.FunctionComponent<{}> = () => {
       },
       {
         field: 'updated_at',
+        sortable: true,
         name: i18n.translate('xpack.ingestManager.agentConfigList.updatedOnColumnTitle', {
           defaultMessage: 'Last updated on',
         }),
@@ -240,6 +250,16 @@ export const AgentConfigListPage: React.FunctionComponent<{}> = () => {
     [createAgentConfigButton]
   );
 
+  const onTableChange = (criteria: CriteriaWithPagination<AgentConfig>) => {
+    const newPagination = {
+      ...pagination,
+      currentPage: criteria.page.index + 1,
+      pageSize: criteria.page.size,
+    };
+    setPagination(newPagination);
+    setSorting(criteria.sort);
+  };
+
   return (
     <AgentConfigListPageLayout>
       {isCreateAgentConfigFlyoutOpen ? (
@@ -276,7 +296,7 @@ export const AgentConfigListPage: React.FunctionComponent<{}> = () => {
       </EuiFlexGroup>
 
       <EuiSpacer size="m" />
-      <EuiBasicTable
+      <EuiBasicTable<AgentConfig>
         loading={isLoading}
         hasActions={true}
         noItemsMessage={
@@ -314,14 +334,8 @@ export const AgentConfigListPage: React.FunctionComponent<{}> = () => {
           totalItemCount: agentConfigData ? agentConfigData.total : 0,
           pageSizeOptions,
         }}
-        onChange={({ page }: { page: { index: number; size: number } }) => {
-          const newPagination = {
-            ...pagination,
-            currentPage: page.index + 1,
-            pageSize: page.size,
-          };
-          setPagination(newPagination);
-        }}
+        sorting={{ sort: sorting }}
+        onChange={onTableChange}
       />
     </AgentConfigListPageLayout>
   );

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_reassign_config_flyout/index.tsx

@@ -36,7 +36,10 @@ export const AgentReassignConfigFlyout: React.FunctionComponent<Props> = ({ onCl
     agent.config_id
   );
 
-  const agentConfigsRequest = useGetAgentConfigs();
+  const agentConfigsRequest = useGetAgentConfigs({
+    page: 1,
+    perPage: 1000,
+  });
   const agentConfigs = agentConfigsRequest.data ? agentConfigsRequest.data.items : [];
 
   const [isSubmitting, setIsSubmitting] = useState(false);

x-pack/plugins/ingest_manager/server/saved_objects/index.ts

@@ -119,8 +119,7 @@ const savedObjectTypes: { [key: string]: SavedObjectsType } = {
     },
     mappings: {
       properties: {
-        id: { type: 'keyword' },
-        name: { type: 'text' },
+        name: { type: 'keyword' },
         description: { type: 'text' },
         namespace: { type: 'keyword' },
         is_default: { type: 'boolean' },

x-pack/plugins/ingest_manager/server/services/agent_config.ts

@@ -143,10 +143,12 @@ class AgentConfigService {
     soClient: SavedObjectsClientContract,
     options: ListWithKuery
   ): Promise<{ items: AgentConfig[]; total: number; page: number; perPage: number }> {
-    const { page = 1, perPage = 20, kuery } = options;
+    const { page = 1, perPage = 20, sortField = 'updated_at', sortOrder = 'desc', kuery } = options;
 
     const agentConfigs = await soClient.find<AgentConfigSOAttributes>({
       type: SAVED_OBJECT_TYPE,
+      sortField,
+      sortOrder,
       page,
       perPage,
       // To ensure users don't need to know about SO data structure...

x-pack/plugins/ingest_manager/server/services/agents/crud.ts

@@ -12,20 +12,24 @@ import {
   AGENT_TYPE_EPHEMERAL,
   AGENT_POLLING_THRESHOLD_MS,
 } from '../../constants';
-import { AgentSOAttributes, Agent, AgentEventSOAttributes } from '../../types';
+import { AgentSOAttributes, Agent, AgentEventSOAttributes, ListWithKuery } from '../../types';
 import { savedObjectToAgent } from './saved_objects';
 import { escapeSearchQueryPhrase } from '../saved_object';
 
 export async function listAgents(
   soClient: SavedObjectsClientContract,
-  options: {
-    page: number;
-    perPage: number;
-    kuery?: string;
+  options: ListWithKuery & {
     showInactive: boolean;
   }
 ) {
-  const { page, perPage, kuery, showInactive = false } = options;
+  const {
+    page = 1,
+    perPage = 20,
+    sortField = 'enrolled_at',
+    sortOrder = 'desc',
+    kuery,
+    showInactive = false,
+  } = options;
 
   const filters = [];
 
@@ -49,10 +53,11 @@ export async function listAgents(
 
   const { saved_objects, total } = await soClient.find<AgentSOAttributes>({
     type: AGENT_SAVED_OBJECT_TYPE,
+    sortField,
+    sortOrder,
     page,
     perPage,
     filter: _joinFilters(filters),
-    ..._getSortFields(),
   });
 
   const agents: Agent[] = saved_objects.map(savedObjectToAgent);
@@ -137,23 +142,6 @@ export async function deleteAgent(soClient: SavedObjectsClientContract, agentId:
   });
 }
 
-function _getSortFields(sortOption?: string) {
-  switch (sortOption) {
-    case 'ASC':
-      return {
-        sortField: 'enrolled_at',
-        sortOrder: 'ASC',
-      };
-
-    case 'DESC':
-    default:
-      return {
-        sortField: 'enrolled_at',
-        sortOrder: 'DESC',
-      };
-  }
-}
-
 function _joinFilters(filters: string[], operator = 'AND') {
   return filters.reduce((acc: string | undefined, filter) => {
     if (acc) {