[ML][Fleet] Link to ML assets from Integration > Assets tab

x-pack/plugins/fleet/server/services/epm/packages/get_bulk_assets.ts

@@ -33,11 +33,9 @@ const getKibanaLinkForESAsset = (type: ElasticsearchAssetType, id: string): stri
     case 'data_stream_ilm_policy':
       return `/app/management/data/index_lifecycle_management/policies/edit/${id}`;
     case 'transform':
-      // TODO: Confirm link for transforms
-      return '';
+      return `/app/management/data/transform?_a=(transform:(queryText:${id}))`;
     case 'ml_model':
-      // TODO: Confirm link for ml models
-      return '';
+      return `/app/ml/trained_models?_a=(trained_models:(queryText:'model_id:(${id})'))`;
     default:
       return '';
   }

x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.test.tsx

@@ -40,6 +40,8 @@ describe('Transform: Transform List <TransformList />', () => {
             transforms={[]}
             transformsLoading={false}
             transformsStatsLoading={false}
+            pageState={{ pageSize: 10, pageIndex: 0, sortField: 'id', sortDirection: 'asc' }}
+            updatePageState={jest.fn()}
           />
         </QueryClientProvider>
       </IntlProvider>

x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { type FC, type MouseEventHandler, useState } from 'react';
+import React, { type FC, type MouseEventHandler, useCallback, useMemo, useState } from 'react';
 
 import { i18n } from '@kbn/i18n';
 import type { EuiSearchBarProps } from '@elastic/eui';
@@ -18,6 +18,7 @@ import {
   EuiInMemoryTable,
   EuiPageTemplate,
   EuiPopover,
+  EuiSearchBar,
   EuiTitle,
 } from '@elastic/eui';
 import {
@@ -64,6 +65,7 @@ import { useTableSettings } from './use_table_settings';
 import { useAlertRuleFlyout } from '../../../../../alerting/transform_alerting_flyout';
 import type { TransformHealthAlertRule } from '../../../../../../common/types/alerting';
 import { StopActionModal } from '../action_stop/stop_action_modal';
+import type { ListingPageUrlState } from '../../transform_management_section';
 
 type ItemIdToExpandedRowMap = Record<string, JSX.Element>;
 
@@ -85,25 +87,36 @@ function getItemIdToExpandedRowMap(
 interface TransformListProps {
   isLoading: boolean;
   onCreateTransform: MouseEventHandler<HTMLButtonElement>;
+  pageState: ListingPageUrlState;
   transformNodes: number;
   transforms: TransformListRow[];
   transformsLoading: boolean;
   transformsStatsLoading: boolean;
+  updatePageState: (update: Partial<ListingPageUrlState>) => void;
 }
 
 export const TransformList: FC<TransformListProps> = ({
   isLoading,
   onCreateTransform,
+  pageState,
   transformNodes,
   transforms,
   transformsLoading,
   transformsStatsLoading,
+  updatePageState,
 }) => {
   const refreshTransformList = useRefreshTransformList();
   const { setEditAlertRule } = useAlertRuleFlyout();
 
-  const [query, setQuery] = useState<Parameters<NonNullable<EuiSearchBarProps['onChange']>>[0]>();
+  const searchQueryText = pageState.queryText ?? '';
+  const setSearchQueryText = useCallback(
+    (value) => {
+      updatePageState({ queryText: value });
+    },
+    [updatePageState]
+  );
 
+  const [searchError, setSearchError] = useState<string | undefined>();
   const [expandedRowItemIds, setExpandedRowItemIds] = useState<TransformId[]>([]);
   const [transformSelection, setTransformSelection] = useState<TransformListRow[]>([]);
   const [isActionsMenuOpen, setIsActionsMenuOpen] = useState(false);
@@ -122,7 +135,9 @@ export const TransformList: FC<TransformListProps> = ({
 
   const { sorting, pagination, onTableChange } = useTableSettings<TransformListRow>(
     TRANSFORM_LIST_COLUMN.ID,
-    transforms
+    transforms,
+    pageState,
+    updatePageState
   );
 
   const { columns, modals: singleActionModals } = useColumns(
@@ -133,10 +148,11 @@ export const TransformList: FC<TransformListProps> = ({
     transformsStatsLoading
   );
 
-  const searchError = query?.error ? query?.error.message : undefined;
-  const clauses = query?.query?.ast?.clauses ?? [];
-  const filteredTransforms =
-    clauses.length > 0 ? filterTransforms(transforms, clauses) : transforms;
+  const filteredTransforms = useMemo(() => {
+    const query = searchQueryText !== '' ? EuiSearchBar.Query.parse(searchQueryText) : undefined;
+    const clauses = query?.ast?.clauses ?? [];
+    return clauses.length > 0 ? filterTransforms(transforms, clauses) : transforms;
+  }, [searchQueryText, transforms]);
 
   if (transforms.length === 0) {
     return (
@@ -317,14 +333,25 @@ export const TransformList: FC<TransformListProps> = ({
     </EuiFlexGroup>
   );
 
+  const handleSearchOnChange: EuiSearchBarProps['onChange'] = (search) => {
+    if (search.error !== null) {
+      setSearchError(search.error.message);
+      return;
+    }
+
+    setSearchError(undefined);
+    setSearchQueryText(search.queryText);
+  };
+
   const search = {
     toolsLeft: transformSelection.length > 0 ? renderToolsLeft() : undefined,
     toolsRight,
-    onChange: setQuery,
+    onChange: handleSearchOnChange,
     box: {
       incremental: true,
     },
     filters: transformFilters,
+    query: searchQueryText,
   };
 
   const selection = {

x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_search_bar_filters.tsx

@@ -24,7 +24,7 @@ import { TransformHealthColoredDot } from './transform_health_colored_dot';
 export const transformFilters: SearchFilterConfig[] = [
   {
     type: 'field_value_selection',
-    field: 'state.state',
+    field: 'stats.state',
     name: i18n.translate('xpack.transform.statusFilter', { defaultMessage: 'Status' }),
     multiSelect: 'or',
     options: Object.values(TRANSFORM_STATE).map((val) => ({
@@ -50,7 +50,7 @@ export const transformFilters: SearchFilterConfig[] = [
   },
   {
     type: 'field_value_selection',
-    field: 'health',
+    field: 'stats.health.status',
     name: i18n.translate('xpack.transform.healthFilter', { defaultMessage: 'Health' }),
     multiSelect: false,
     options: Object.values(TRANSFORM_HEALTH_STATUS).map((val) => ({
@@ -113,7 +113,7 @@ export const filterTransforms = (transforms: TransformListRow[], clauses: Clause
       } else {
         ts = transforms.filter((transform) => {
           if (!transform.stats) return false;
-          if (c.type === 'field' && c.field === 'health') {
+          if (c.type === 'field' && c.field === 'stats.health.status') {
             return transform.stats.health?.status === c.value;
           }
           if (c.type === 'field' && c.field === 'mode') {

x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/use_table_settings.ts

@@ -5,10 +5,10 @@
  * 2.0.
  */
 
-import { useState } from 'react';
+import { useCallback } from 'react';
 import type { Direction, EuiBasicTableProps, Pagination, PropertySort } from '@elastic/eui';
+import type { ListingPageUrlState } from '../../transform_management_section';
 
-const PAGE_SIZE = 10;
 const PAGE_SIZE_OPTIONS = [10, 25, 50];
 
 // Copying from EUI EuiBasicTable types as type is not correctly picked up for table's onChange
@@ -30,15 +30,6 @@ export interface CriteriaWithPagination<T extends object> extends Criteria<T> {
   };
 }
 
-interface AnalyticsBasicTableSettings<T extends object> {
-  pageIndex: number;
-  pageSize: number;
-  totalItemCount: number;
-  showPerPageOptions: boolean;
-  sortField: keyof T;
-  sortDirection: Direction;
-}
-
 interface UseTableSettingsReturnValue<T extends object> {
   onTableChange: EuiBasicTableProps<T>['onChange'];
   pagination: Pagination;
@@ -47,34 +38,29 @@ interface UseTableSettingsReturnValue<T extends object> {
 
 export function useTableSettings<TypeOfItem extends object>(
   sortByField: keyof TypeOfItem,
-  items: TypeOfItem[]
+  items: TypeOfItem[],
+  pageState: ListingPageUrlState,
+  updatePageState: (update: Partial<ListingPageUrlState>) => void
 ): UseTableSettingsReturnValue<TypeOfItem> {
-  const [tableSettings, setTableSettings] = useState<AnalyticsBasicTableSettings<TypeOfItem>>({
-    pageIndex: 0,
-    pageSize: PAGE_SIZE,
-    totalItemCount: 0,
-    showPerPageOptions: true,
-    sortField: sortByField,
-    sortDirection: 'asc',
-  });
+  const { pageIndex, pageSize, sortField, sortDirection } = pageState;
 
-  const onTableChange: EuiBasicTableProps<TypeOfItem>['onChange'] = ({
-    page = { index: 0, size: PAGE_SIZE },
-    sort = { field: sortByField, direction: 'asc' },
-  }: CriteriaWithPagination<TypeOfItem>) => {
-    const { index, size } = page;
-    const { field, direction } = sort;
+  const onTableChange: EuiBasicTableProps<TypeOfItem>['onChange'] = useCallback(
+    ({ page, sort }: CriteriaWithPagination<TypeOfItem>) => {
+      let resultSortField = sort?.field;
+      if (typeof resultSortField !== 'string') {
+        resultSortField = pageState.sortField as keyof TypeOfItem;
+      }
 
-    setTableSettings({
-      ...tableSettings,
-      pageIndex: index,
-      pageSize: size,
-      sortField: field,
-      sortDirection: direction,
-    });
-  };
-
-  const { pageIndex, pageSize, sortField, sortDirection } = tableSettings;
+      const result = {
+        pageIndex: page?.index ?? pageState.pageIndex,
+        pageSize: page?.size ?? pageState.pageSize,
+        sortField: resultSortField as string,
+        sortDirection: sort?.direction ?? pageState.sortDirection,
+      };
+      updatePageState(result);
+    },
+    [pageState, updatePageState]
+  );
 
   const pagination = {
     pageIndex,
@@ -85,8 +71,8 @@ export function useTableSettings<TypeOfItem extends object>(
 
   const sorting = {
     sort: {
-      field: sortField as string,
-      direction: sortDirection,
+      field: sortField,
+      direction: sortDirection as Direction,
     },
   };
   return { onTableChange, pagination, sorting };

x-pack/plugins/transform/public/app/sections/transform_management/transform_management_section.tsx

@@ -20,6 +20,8 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { IHttpFetchError } from '@kbn/core-http-browser';
+import { usePageUrlState } from '@kbn/ml-url-state';
+import { UrlStateProvider } from '@kbn/ml-url-state';
 
 import { useAppDependencies } from '../../app_dependencies';
 import type { TransformListRow } from '../../common';
@@ -28,6 +30,7 @@ import { useGetTransformsStats } from '../../hooks/use_get_transform_stats';
 import { useEnabledFeatures } from '../../serverless_context';
 import { needsReauthorization } from '../../common/reauthorization_utils';
 import { TRANSFORM_STATE } from '../../../../common/constants';
+import { TRANSFORM_LIST_COLUMN } from '../../common';
 
 import {
   useDocumentationLinks,
@@ -50,6 +53,28 @@ import {
   TransformAlertFlyoutWrapper,
 } from '../../../alerting/transform_alerting_flyout';
 
+export interface ListingPageUrlState {
+  pageSize: number;
+  pageIndex: number;
+  sortField: string;
+  sortDirection: string;
+  queryText?: string;
+  showPerPageOptions?: boolean;
+}
+
+interface PageUrlState {
+  pageKey: string;
+  pageUrlState: ListingPageUrlState;
+}
+
+const getDefaultTransformListState = (): ListingPageUrlState => ({
+  pageIndex: 0,
+  pageSize: 10,
+  sortField: TRANSFORM_LIST_COLUMN.ID,
+  sortDirection: 'asc',
+  showPerPageOptions: true,
+});
+
 const ErrorMessageCallout: FC<{
   text: JSX.Element;
   errorMessage: IHttpFetchError<unknown> | null;
@@ -78,6 +103,10 @@ export const TransformManagement: FC = () => {
   const { esTransform } = useDocumentationLinks();
   const { showNodeInfo } = useEnabledFeatures();
   const { dataViewEditor } = useAppDependencies();
+  const [transformPageState, setTransformPageState] = usePageUrlState<PageUrlState>(
+    'transform',
+    getDefaultTransformListState()
+  );
 
   const deleteTransforms = useDeleteTransforms();
 
@@ -346,6 +375,8 @@ export const TransformManagement: FC = () => {
                   transforms={transforms}
                   transformsLoading={transformsWithoutStatsLoading}
                   transformsStatsLoading={transformsStatsLoading}
+                  pageState={transformPageState}
+                  updatePageState={setTransformPageState}
                 />
               )}
               <TransformAlertFlyoutWrapper />
@@ -380,7 +411,9 @@ export const TransformManagementSection: FC = () => {
 
   return (
     <CapabilitiesWrapper requiredCapabilities={'canGetTransform'}>
-      <TransformManagement />
+      <UrlStateProvider>
+        <TransformManagement />
+      </UrlStateProvider>
     </CapabilitiesWrapper>
   );
 };