[Inventory][ECO] Entities page search bar

x-pack/plugins/observability_solution/inventory/.storybook/get_mock_inventory_context.tsx

@@ -6,8 +6,11 @@
  */
 
 import { coreMock } from '@kbn/core/public/mocks';
-import type { ObservabilitySharedPluginStart } from '@kbn/observability-shared-plugin/public';
+import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
+import type { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
 import type { InferencePublicStart } from '@kbn/inference-plugin/public';
+import type { ObservabilitySharedPluginStart } from '@kbn/observability-shared-plugin/public';
+import type { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
 import type { InventoryKibanaContext } from '../public/hooks/use_kibana';
 
 export function getMockInventoryContext(): InventoryKibanaContext {
@@ -19,6 +22,9 @@ export function getMockInventoryContext(): InventoryKibanaContext {
       start: {
         observabilityShared: {} as unknown as ObservabilitySharedPluginStart,
         inference: {} as unknown as InferencePublicStart,
+        unifiedSearch: {} as unknown as UnifiedSearchPublicPluginStart,
+        dataViews: {} as unknown as DataViewsPublicPluginStart,
+        data: {} as unknown as DataPublicPluginStart,
       },
     },
     services: {

x-pack/plugins/observability_solution/inventory/common/entities.ts

@@ -5,6 +5,8 @@
  * 2.0.
  */
 import * as t from 'io-ts';
+import { ENTITY_LATEST, entitiesAliasPattern } from '@kbn/entities-schema';
+import { isRight } from 'fp-ts/lib/Either';
 
 export const entityTypeRt = t.union([
   t.literal('service'),
@@ -15,3 +17,31 @@ export const entityTypeRt = t.union([
 export type EntityType = t.TypeOf<typeof entityTypeRt>;
 
 export const MAX_NUMBER_OF_ENTITIES = 500;
+
+export const ENTITIES_LATEST_ALIAS = entitiesAliasPattern({
+  type: '*',
+  dataset: ENTITY_LATEST,
+});
+
+const entityArrayRt = t.array(entityTypeRt);
+export const entityTypesRt = new t.Type<EntityType[], string, unknown>(
+  'entityTypesRt',
+  entityArrayRt.is,
+  (input, context) => {
+    if (typeof input === 'string') {
+      const arr = input.split(',');
+      const validation = entityArrayRt.decode(arr);
+      if (isRight(validation)) {
+        return t.success(validation.right);
+      }
+    } else if (Array.isArray(input)) {
+      const validation = entityArrayRt.decode(input);
+      if (isRight(validation)) {
+        return t.success(validation.right);
+      }
+    }
+
+    return t.failure(input, context);
+  },
+  (arr) => arr.join()
+);

x-pack/plugins/observability_solution/inventory/common/entitites.test.ts

@@ -0,0 +1,99 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { isLeft, isRight } from 'fp-ts/lib/Either';
+import { type EntityType, entityTypesRt } from './entities';
+
+const validate = (input: unknown) => entityTypesRt.decode(input);
+
+describe('entityTypesRt codec', () => {
+  it('should validate a valid string of entity types', () => {
+    const input = 'service,host,container';
+    const result = validate(input);
+    expect(isRight(result)).toBe(true);
+    if (isRight(result)) {
+      expect(result.right).toEqual(['service', 'host', 'container']);
+    }
+  });
+
+  it('should validate a valid array of entity types', () => {
+    const input = ['service', 'host', 'container'];
+    const result = validate(input);
+    expect(isRight(result)).toBe(true);
+    if (isRight(result)) {
+      expect(result.right).toEqual(['service', 'host', 'container']);
+    }
+  });
+
+  it('should fail validation when the string contains invalid entity types', () => {
+    const input = 'service,invalidType,host';
+    const result = validate(input);
+    expect(isLeft(result)).toBe(true);
+  });
+
+  it('should fail validation when the array contains invalid entity types', () => {
+    const input = ['service', 'invalidType', 'host'];
+    const result = validate(input);
+    expect(isLeft(result)).toBe(true);
+  });
+
+  it('should fail validation when input is not a string or array', () => {
+    const input = 123;
+    const result = validate(input);
+    expect(isLeft(result)).toBe(true);
+  });
+
+  it('should fail validation when the array contains non-string elements', () => {
+    const input = ['service', 123, 'host'];
+    const result = validate(input);
+    expect(isLeft(result)).toBe(true);
+  });
+
+  it('should fail validation an empty string', () => {
+    const input = '';
+    const result = validate(input);
+    expect(isLeft(result)).toBe(true);
+  });
+
+  it('should validate an empty array as valid', () => {
+    const input: unknown[] = [];
+    const result = validate(input);
+    expect(isRight(result)).toBe(true);
+    if (isRight(result)) {
+      expect(result.right).toEqual([]);
+    }
+  });
+
+  it('should fail validation when the string contains only commas', () => {
+    const input = ',,,';
+    const result = validate(input);
+    expect(isLeft(result)).toBe(true);
+  });
+
+  it('should fail validation for partial valid entities in a string', () => {
+    const input = 'service,invalidType';
+    const result = validate(input);
+    expect(isLeft(result)).toBe(true);
+  });
+
+  it('should fail validation for partial valid entities in an array', () => {
+    const input = ['service', 'invalidType'];
+    const result = validate(input);
+    expect(isLeft(result)).toBe(true);
+  });
+
+  it('should serialize a valid array back to a string', () => {
+    const input: EntityType[] = ['service', 'host'];
+    const serialized = entityTypesRt.encode(input);
+    expect(serialized).toBe('service,host');
+  });
+
+  it('should serialize an empty array back to an empty string', () => {
+    const input: EntityType[] = [];
+    const serialized = entityTypesRt.encode(input);
+    expect(serialized).toBe('');
+  });
+});

x-pack/plugins/observability_solution/inventory/kibana.jsonc

@@ -11,11 +11,11 @@
       "observabilityShared",
       "entityManager",
       "inference",
-      "dataViews"
-    ],
-    "requiredBundles": [
-      "kibanaReact"
+      "dataViews",
+      "unifiedSearch",
+      "data"
     ],
+    "requiredBundles": ["kibanaReact"],
     "optionalPlugins": [],
     "extraPublicDirs": []
   }

x-pack/plugins/observability_solution/inventory/public/components/entities_grid/index.tsx

@@ -26,6 +26,8 @@ import {
   ENTITY_TYPE,
 } from '../../../common/es_fields/entities';
 import { APIReturnType } from '../../api';
+import { getEntityTypeLabel } from '../../utils/get_entity_type_label';
+import { EntityType } from '../../../common/entities';
 
 type InventoryEntitiesAPIReturnType = APIReturnType<'GET /internal/inventory/entities'>;
 
@@ -139,7 +141,11 @@ export function EntitiesGrid({
       const columnEntityTableId = columnId as EntityColumnIds;
       switch (columnEntityTableId) {
         case ENTITY_TYPE:
-          return <EuiBadge color="hollow">{entity[columnEntityTableId]}</EuiBadge>;
+          return (
+            <EuiBadge color="hollow">
+              {getEntityTypeLabel(entity[columnEntityTableId] as EntityType)}
+            </EuiBadge>
+          );
         case ENTITY_LAST_SEEN:
           return (
             <FormattedMessage

x-pack/plugins/observability_solution/inventory/public/components/inventory_page_template/index.tsx

@@ -6,7 +6,9 @@
  */
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { useKibana } from '../../hooks/use_kibana';
+import { SearchBar } from '../search_bar';
 
 export function InventoryPageTemplate({ children }: { children: React.ReactNode }) {
   const {
@@ -25,7 +27,12 @@ export function InventoryPageTemplate({ children }: { children: React.ReactNode
         }),
       }}
     >
-      {children}
+      <EuiFlexGroup direction="column">
+        <EuiFlexItem>
+          <SearchBar />
+        </EuiFlexItem>
+        <EuiFlexItem>{children}</EuiFlexItem>
+      </EuiFlexGroup>
     </ObservabilityPageTemplate>
   );
 }

x-pack/plugins/observability_solution/inventory/public/components/search_bar/entity_types_controls.tsx

@@ -0,0 +1,67 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
+import { useAbortableAsync } from '@kbn/observability-utils/hooks/use_abortable_async';
+import React from 'react';
+import { EntityType } from '../../../common/entities';
+import { useKibana } from '../../hooks/use_kibana';
+import { getEntityTypeLabel } from '../../utils/get_entity_type_label';
+import { useInventoryParams } from '../../hooks/use_inventory_params';
+
+interface Props {
+  onChange: (entityTypes: EntityType[]) => void;
+}
+
+const toComboBoxOption = (entityType: EntityType): EuiComboBoxOptionOption<EntityType> => ({
+  key: entityType,
+  label: getEntityTypeLabel(entityType),
+});
+
+export function EntityTypesControls({ onChange }: Props) {
+  const {
+    query: { entityTypes = [] },
+  } = useInventoryParams('/*');
+
+  const {
+    services: { inventoryAPIClient },
+  } = useKibana();
+
+  const { value, loading } = useAbortableAsync(
+    ({ signal }) => {
+      return inventoryAPIClient.fetch('GET /internal/inventory/entities/types', { signal });
+    },
+    [inventoryAPIClient]
+  );
+
+  const options = value?.entityTypes.map(toComboBoxOption);
+  const selectedOptions = entityTypes.map(toComboBoxOption);
+
+  return (
+    <EuiComboBox<EntityType>
+      isLoading={loading}
+      css={css`
+        max-width: 325px;
+      `}
+      aria-label={i18n.translate(
+        'xpack.inventory.entityTypesControls.euiComboBox.accessibleScreenReaderLabel',
+        { defaultMessage: 'Entity types filter' }
+      )}
+      placeholder={i18n.translate(
+        'xpack.inventory.entityTypesControls.euiComboBox.placeHolderLabel',
+        { defaultMessage: 'Types' }
+      )}
+      options={options}
+      selectedOptions={selectedOptions}
+      onChange={(newOptions) => {
+        onChange(newOptions.map((option) => option.key as EntityType));
+      }}
+      isClearable={true}
+    />
+  );
+}

x-pack/plugins/observability_solution/inventory/public/components/search_bar/index.tsx

@@ -0,0 +1,91 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { SearchBarOwnProps } from '@kbn/unified-search-plugin/public/search_bar';
+import deepEqual from 'fast-deep-equal';
+import React, { useCallback, useEffect } from 'react';
+import { Subject } from 'rxjs';
+import { i18n } from '@kbn/i18n';
+import { EntityType } from '../../../common/entities';
+import { useAdHocInventoryDataView } from '../../hooks/use_adhoc_inventory_data_view';
+import { useInventoryParams } from '../../hooks/use_inventory_params';
+import { useKibana } from '../../hooks/use_kibana';
+import { EntityTypesControls } from './entity_types_controls';
+
+export const searchBarContentSubject$ = new Subject<{
+  kuery?: string;
+  entityTypes?: EntityType[];
+  refresh: boolean;
+}>();
+
+export function SearchBar() {
+  const {
+    dependencies: {
+      start: {
+        unifiedSearch,
+        data: {
+          query: { queryString: queryStringService },
+        },
+      },
+    },
+  } = useKibana();
+
+  const {
+    query: { kuery, entityTypes },
+  } = useInventoryParams('/*');
+
+  const { SearchBar: UnifiedSearchBar } = unifiedSearch.ui;
+
+  const { dataView } = useAdHocInventoryDataView();
+
+  const syncSearchBarWithUrl = useCallback(() => {
+    const query = kuery ? { query: kuery, language: 'kuery' } : undefined;
+    if (query && !deepEqual(queryStringService.getQuery(), query)) {
+      queryStringService.setQuery(query);
+    }
+
+    if (!query) {
+      queryStringService.clearQuery();
+    }
+  }, [kuery, queryStringService]);
+
+  useEffect(() => {
+    syncSearchBarWithUrl();
+  }, [syncSearchBarWithUrl]);
+
+  const handleEntityTypesChange = useCallback(
+    (nextEntityTypes: EntityType[]) => {
+      searchBarContentSubject$.next({ kuery, entityTypes: nextEntityTypes, refresh: false });
+    },
+    [kuery]
+  );
+
+  const handleQuerySubmit = useCallback<NonNullable<SearchBarOwnProps['onQuerySubmit']>>(
+    ({ query }, isUpdate) => {
+      searchBarContentSubject$.next({
+        kuery: query?.query as string,
+        entityTypes,
+        refresh: !isUpdate,
+      });
+    },
+    [entityTypes]
+  );
+
+  return (
+    <UnifiedSearchBar
+      appName="Inventory"
+      showDatePicker={false}
+      showFilterBar={false}
+      indexPatterns={dataView ? [dataView] : undefined}
+      renderQueryInputAppend={() => <EntityTypesControls onChange={handleEntityTypesChange} />}
+      onQuerySubmit={handleQuerySubmit}
+      placeholder={i18n.translate('xpack.inventory.searchBar.placeholder', {
+        defaultMessage:
+          'Search for your entities by name or its metadata (e.g. entity.type : service)',
+      })}
+    />
+  );
+}