[8.x] [ML][Fleet] Adds link to anomaly detection configurations from Integration > Assets tab (#193105) (#193485)

# Backport This will backport the following commits from `main` to `8.x`: - [[ML][Fleet] Adds link to anomaly detection configurations from Integration > Assets tab (#193105)](https://github.com/elastic/kibana/pull/193105)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Melissa Alvarez <melissa.alvarez@elastic.co>
2025-04-24 01:38:56 -04:00 · 2024-09-20 08:03:49 +10:00 · 2024-09-20 08:03:49 +10:00 · d253c0eb67
commit d253c0eb67
parent c37ef77fb5
8 changed files with 120 additions and 27 deletions
--- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/constants.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/constants.tsx
@ -66,10 +66,10 @@ export const AssetTitleMap: Record<
    }
  ),
  'ml-module': i18n.translate('xpack.fleet.epm.assetTitles.mlModules', {
-    defaultMessage: 'ML modules',
+    defaultMessage: 'Anomaly detection configurations',
  }),
  ml_module: i18n.translate('xpack.fleet.epm.assetTitles.mlModules', {
-    defaultMessage: 'ML modules',
+    defaultMessage: 'Anomaly detection configurations',
  }),
  tag: i18n.translate('xpack.fleet.epm.assetTitles.tag', {
    defaultMessage: 'Tags',
--- a/x-pack/plugins/fleet/server/services/epm/packages/get_bulk_assets.ts
+++ b/x-pack/plugins/fleet/server/services/epm/packages/get_bulk_assets.ts
@ -71,7 +71,6 @@ export async function getBulkAssets(
      }

      // TODO: Ask for Kibana SOs to have `getInAppUrl()` registered so that the above works safely:
-      //  ml-module
      //  security-rule
      //  csp-rule-template
      //  osquery-pack-asset
--- a/x-pack/plugins/ml/public/application/supplied_configurations/supplied_configurations.tsx
+++ b/x-pack/plugins/ml/public/application/supplied_configurations/supplied_configurations.tsx
@ -6,22 +6,45 @@
 */

 import React, { useCallback, useMemo, useState } from 'react';
-import type { SearchFilterConfig, FieldValueOptionType } from '@elastic/eui';
-import { EuiCard, EuiIcon, EuiFlexGrid, EuiFlexItem, EuiSearchBar, EuiSpacer } from '@elastic/eui';
+import type { SearchFilterConfig, FieldValueOptionType, EuiSearchBarProps } from '@elastic/eui';
+import {
+  EuiCard,
+  EuiIcon,
+  EuiFlexGrid,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiSearchBar,
+  EuiSpacer,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { usePageUrlState, type PageUrlState } from '@kbn/ml-url-state';
 import useMountedState from 'react-use/lib/useMountedState';
 import useMount from 'react-use/lib/useMount';
 import { isPopulatedObject } from '@kbn/ml-is-populated-object';
 import { useMlKibana } from '../contexts/kibana';
 import type { Module } from '../../../common/types/modules';
+import { ML_PAGES } from '../../../common/constants/locator';
 import { LoadingIndicator } from '../components/loading_indicator';
 import { filterModules } from './utils';
 import { SuppliedConfigurationsFlyout } from './supplied_configurations_flyout';

+interface SuppliedConfigurationsPageUrlState {
+  queryText: string;
+}
+
 export function isLogoObject(arg: unknown): arg is { icon: string } {
  return isPopulatedObject(arg) && Object.hasOwn(arg, 'icon');
 }

+const SCHEMA = {
+  strict: true,
+  fields: {
+    tags: {
+      type: 'string',
+    },
+  },
+};
+
 export const SuppliedConfigurations = () => {
  const {
    services: {
@ -31,9 +54,14 @@ export const SuppliedConfigurations = () => {
    },
  } = useMlKibana();

+  const [suppliedConfigurationsPageState, setSuppliedConfigurationsPageState] =
+    usePageUrlState<PageUrlState>(ML_PAGES.SUPPLIED_CONFIGURATIONS, {
+      queryText: '',
+    });
+
  const [modules, setModules] = useState<Module[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [query, setQuery] = useState(EuiSearchBar.Query.MATCH_ALL);
+  const [searchError, setSearchError] = useState<string | undefined>();
  const [isFlyoutVisible, setIsFlyoutVisible] = useState<boolean>(false);
  const [selectedModuleId, setSelectedModuleId] = useState<string | undefined>();

@ -82,13 +110,27 @@ export const SuppliedConfigurations = () => {
    ];
  }, [modules]);

-  const schema = {
-    strict: true,
-    fields: {
-      tags: {
-        type: 'string',
-      },
+  const setSearchQueryText = useCallback(
+    (value: string) => {
+      setSuppliedConfigurationsPageState({ queryText: value });
    },
+    [setSuppliedConfigurationsPageState]
+  );
+
+  const query = useMemo(() => {
+    const searchQueryText = (suppliedConfigurationsPageState as SuppliedConfigurationsPageUrlState)
+      .queryText;
+    return searchQueryText !== '' ? EuiSearchBar.Query.parse(searchQueryText) : undefined;
+  }, [suppliedConfigurationsPageState]);
+
+  const onChange: EuiSearchBarProps['onChange'] = (search) => {
+    if (search.error !== null) {
+      setSearchError(search.error.message);
+      return;
+    }
+
+    setSearchError(undefined);
+    setSearchQueryText(search.queryText);
  };

  const filteredModules = useMemo(() => {
@ -96,8 +138,6 @@ export const SuppliedConfigurations = () => {
    return clauses.length > 0 ? filterModules(modules, clauses) : modules;
  }, [query, modules]);

-  const onChange = useCallback(({ query: onChangeQuery }) => setQuery(onChangeQuery), [setQuery]);
-
  if (isLoading === true) return <LoadingIndicator />;

  return (
@ -112,11 +152,18 @@ export const SuppliedConfigurations = () => {
            }
          ),
          incremental: true,
-          schema,
+          schema: SCHEMA,
        }}
        filters={filters}
        onChange={onChange}
      />
+      <EuiFormRow
+        data-test-subj="mlAnomalyJobSelectionControls"
+        isInvalid={searchError !== undefined}
+        error={searchError}
+      >
+        <></>
+      </EuiFormRow>
      <EuiSpacer size="l" />
      <EuiFlexGrid gutterSize="l" columns={4}>
        {filteredModules.map(({ description, id, logo, title }) => {
--- a/x-pack/plugins/ml/public/application/util/string_utils.test.ts
+++ b/x-pack/plugins/ml/public/application/util/string_utils.test.ts
@ -15,6 +15,7 @@ import {
  mlEscape,
  escapeForElasticsearchQuery,
  escapeKueryForEmbeddableFieldValuePair,
+  stringMatch,
 } from './string_utils';

 describe('ML - string utils', () => {
@ -170,4 +171,19 @@ describe('ML - string utils', () => {
      );
    });
  });
+
+  describe('stringMatch', () => {
+    test('should return true for partial match', () => {
+      expect(stringMatch('foobar', 'Foo')).toBe(true);
+    });
+    test('should return true for exact match', () => {
+      expect(stringMatch('foobar', 'foobar')).toBe(true);
+    });
+    test('should return false for no match', () => {
+      expect(stringMatch('foobar', 'nomatch')).toBe(false);
+    });
+    test('should catch error for invalid regex substring and return false', () => {
+      expect(stringMatch('foobar', '?')).toBe(false);
+    });
+  });
 });
--- a/x-pack/plugins/ml/public/application/util/string_utils.ts
+++ b/x-pack/plugins/ml/public/application/util/string_utils.ts
@ -187,9 +187,13 @@ export function calculateTextWidth(txt: string | number, isNumber: boolean) {
 }

 export function stringMatch(str: string | undefined, substr: any) {
-  return (
-    typeof str === 'string' &&
-    typeof substr === 'string' &&
-    (str.toLowerCase().match(substr.toLowerCase()) === null) === false
-  );
+  try {
+    return (
+      typeof str === 'string' &&
+      typeof substr === 'string' &&
+      (str.toLowerCase().match(substr.toLowerCase()) === null) === false
+    );
+  } catch (error) {
+    return false;
+  }
 }
--- a/x-pack/plugins/ml/server/saved_objects/saved_objects.ts
+++ b/x-pack/plugins/ml/server/saved_objects/saved_objects.ts
@ -6,6 +6,7 @@
 */

 import type { SavedObjectsServiceSetup } from '@kbn/core/server';
+import rison from '@kbn/rison';
 import { mlJob, mlTrainedModel, mlModule } from './mappings';

 import { migrations } from './migrations';
@ -15,6 +16,17 @@ import {
  ML_TRAINED_MODEL_SAVED_OBJECT_TYPE,
 } from '../../common/types/saved_objects';

+interface MlModuleAttributes {
+  id: string;
+  title: string;
+  description?: string;
+  type: string;
+  logo?: object;
+  query?: string;
+  jobs: object[];
+  datafeeds: object[];
+}
+
 export function setupSavedObjects(savedObjects: SavedObjectsServiceSetup) {
  savedObjects.registerType({
    name: ML_JOB_SAVED_OBJECT_TYPE,
@ -30,12 +42,23 @@ export function setupSavedObjects(savedObjects: SavedObjectsServiceSetup) {
    migrations,
    mappings: mlTrainedModel,
  });
-  savedObjects.registerType({
+  savedObjects.registerType<MlModuleAttributes>({
    name: ML_MODULE_SAVED_OBJECT_TYPE,
    hidden: false,
    management: {
      importableAndExportable: true,
      visibleInManagement: false,
+      getTitle(obj) {
+        return obj.attributes.title;
+      },
+      getInAppUrl(obj) {
+        return {
+          path: `/app/ml/supplied_configurations/?_a=${encodeURIComponent(
+            rison.encode({ supplied_configurations: { queryText: obj.attributes.title } })
+          )}`,
+          uiCapabilitiesPath: 'ml.canGetJobs',
+        };
+      },
    },
    namespaceType: 'agnostic',
    migrations,
--- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_search_bar_filters.tsx
+++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_search_bar_filters.tsx
@ -62,11 +62,15 @@ export const transformFilters: SearchFilterConfig[] = [
 ];

 function stringMatch(str: string | undefined, substr: any) {
-  return (
-    typeof str === 'string' &&
-    typeof substr === 'string' &&
-    (str.toLowerCase().match(substr.toLowerCase()) === null) === false
-  );
+  try {
+    return (
+      typeof str === 'string' &&
+      typeof substr === 'string' &&
+      (str.toLowerCase().match(substr.toLowerCase()) === null) === false
+    );
+  } catch (error) {
+    return false;
+  }
 }

 export const filterTransforms = (transforms: TransformListRow[], clauses: Clause[]) => {
--- a/x-pack/test/fleet_api_integration/apis/epm/snapshots/bulk_get_assets.snap
+++ b/x-pack/test/fleet_api_integration/apis/epm/snapshots/bulk_get_assets.snap
@ -140,7 +140,7 @@ Array [
    "type": "index-pattern",
  },
  Object {
-    "appLink": "",
+    "appLink": "/app/ml/supplied_configurations/?_a=(supplied_configurations%3A(queryText%3A'Nginx%20access%20logs'))",
    "attributes": Object {
      "description": "Find unusual activity in HTTP access logs from filebeat (ECS).",
      "title": "Nginx access logs",