[Inventory][ECO] Use ControlGroupRenderer to filter by entity types (e…

…lastic#199174)

closes elastic#193397


https://github.com/user-attachments/assets/e78639a8-bc63-4c5a-8676-0ad9b5f0563e

- Added `Entity type` control group field on the Inventory page. 
- Added `Filters` buttons to the Unified Search bar on the Inventory
oage
- Moved common hooks from infra to Obs-shared
- Refactoring

---------

Co-authored-by: kibanamachine <[email protected]>

packages/kbn-optimizer/limits.yml

@@ -119,7 +119,7 @@ pageLoadAssetSize:
   observabilityAiAssistantManagement: 19279
   observabilityLogsExplorer: 46650
   observabilityOnboarding: 19573
-  observabilityShared: 80000
+  observabilityShared: 111036
   osquery: 107090
   painlessLab: 179748
   presentationPanel: 55463

x-pack/packages/observability/observability_utils/hooks/use_abortable_async.ts

@@ -54,7 +54,9 @@ export function useAbortableAsync<T>(
           })
           .catch((err) => {
             setValue(undefined);
-            setError(err);
+            if (!controller.signal.aborted) {
+              setError(err);
+            }
           })
           .finally(() => setLoading(false));
       } else {

x-pack/plugins/observability_solution/infra/public/components/asset_details/hooks/use_asset_details_url_state.ts

@@ -15,8 +15,8 @@ import {
   ALERT_STATUS_RECOVERED,
   ALERT_STATUS_UNTRACKED,
 } from '@kbn/rule-data-utils';
+import { useUrlState } from '@kbn/observability-shared-plugin/public';
 import { ContentTabIds } from '../types';
-import { useUrlState } from '../../../hooks/use_url_state';
 import { ASSET_DETAILS_URL_STATE_KEY } from '../constants';
 import { ALERT_STATUS_ALL } from '../../shared/alerts/constants';
 

x-pack/plugins/observability_solution/infra/public/hooks/use_inventory_views.ts

@@ -9,7 +9,7 @@ import { pipe } from 'fp-ts/lib/pipeable';
 import { fold } from 'fp-ts/lib/Either';
 import { constant, identity } from 'fp-ts/lib/function';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useUiTracker } from '@kbn/observability-shared-plugin/public';
+import { useUiTracker, useUrlState } from '@kbn/observability-shared-plugin/public';
 import {
   MutationContext,
   SavedViewResult,
@@ -23,7 +23,6 @@ import {
 } from '../../common/http_api/latest';
 import type { InventoryView } from '../../common/inventory_views';
 import { useKibanaContextForPlugin } from './use_kibana';
-import { useUrlState } from './use_url_state';
 import { useSavedViewsNotifier } from './use_saved_views_notifier';
 import { useSourceContext } from '../containers/metrics_source';
 

x-pack/plugins/observability_solution/infra/public/hooks/use_metrics_explorer_views.ts

@@ -9,7 +9,7 @@ import { pipe } from 'fp-ts/lib/pipeable';
 import { fold } from 'fp-ts/lib/Either';
 import { constant, identity } from 'fp-ts/lib/function';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useUiTracker } from '@kbn/observability-shared-plugin/public';
+import { useUiTracker, useUrlState } from '@kbn/observability-shared-plugin/public';
 
 import {
   MutationContext,
@@ -23,7 +23,6 @@ import {
   UpdateMetricsExplorerViewAttributesRequestPayload,
 } from '../../common/http_api/latest';
 import { MetricsExplorerView } from '../../common/metrics_explorer_views';
-import { useUrlState } from './use_url_state';
 import { useSavedViewsNotifier } from './use_saved_views_notifier';
 import { useSourceContext } from '../containers/metrics_source';
 import { useKibanaContextForPlugin } from './use_kibana';

x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/use_log_entry_categories_results_url_state.tsx

@@ -9,7 +9,7 @@ import { fold } from 'fp-ts/lib/Either';
 import { constant, identity } from 'fp-ts/lib/function';
 import { pipe } from 'fp-ts/lib/pipeable';
 import * as rt from 'io-ts';
-import { useUrlState } from '../../../hooks/use_url_state';
+import { useUrlState } from '@kbn/observability-shared-plugin/public';
 import {
   useKibanaTimefilterTime,
   useSyncKibanaTimeFilterTime,

x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_rate/use_log_entry_rate_results_url_state.tsx

@@ -12,8 +12,8 @@ import moment from 'moment';
 import * as rt from 'io-ts';
 import type { TimeRange as KibanaTimeRange } from '@kbn/es-query';
 import { decodeOrThrow } from '@kbn/io-ts-utils';
+import { useUrlState } from '@kbn/observability-shared-plugin/public';
 import { TimeRange } from '../../../../common/time/time_range';
-import { useUrlState } from '../../../hooks/use_url_state';
 import {
   useKibanaTimefilterTime,
   useSyncKibanaTimeFilterTime,

x-pack/plugins/observability_solution/infra/public/pages/logs/stream/page.tsx

@@ -6,15 +6,14 @@
  */
 
 import { EuiErrorBoundary } from '@elastic/eui';
-import { useTrackPageview } from '@kbn/observability-shared-plugin/public';
+import { useKibanaQuerySettings, useTrackPageview } from '@kbn/observability-shared-plugin/public';
 import React from 'react';
 import { useLogViewContext } from '@kbn/logs-shared-plugin/public';
 import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
 import { useLogsBreadcrumbs } from '../../../hooks/use_logs_breadcrumbs';
 import { LogStreamPageStateProvider } from '../../../observability_logs/log_stream_page/state';
 import { streamTitle } from '../../../translations';
 import { useKbnUrlStateStorageFromRouterContext } from '../../../containers/kbn_url_state_context';
-import { useKibanaQuerySettings } from '../../../hooks/use_kibana_query_settings';
 import { ConnectedStreamPageContent } from './page_content';
 
 export const StreamPage = () => {

x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/search_bar/control_panels_config.ts

@@ -0,0 +1,41 @@
+/*
+ * 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 { ControlPanels } from '@kbn/observability-shared-plugin/public';
+
+export const availableControlsPanels = {
+  HOST_OS_NAME: 'host.os.name',
+  CLOUD_PROVIDER: 'cloud.provider',
+  SERVICE_NAME: 'service.name',
+};
+
+export const controlPanelConfigs: ControlPanels = {
+  [availableControlsPanels.HOST_OS_NAME]: {
+    order: 0,
+    width: 'medium',
+    grow: false,
+    type: 'optionsListControl',
+    fieldName: availableControlsPanels.HOST_OS_NAME,
+    title: 'Operating System',
+  },
+  [availableControlsPanels.CLOUD_PROVIDER]: {
+    order: 1,
+    width: 'medium',
+    grow: false,
+    type: 'optionsListControl',
+    fieldName: availableControlsPanels.CLOUD_PROVIDER,
+    title: 'Cloud Provider',
+  },
+  [availableControlsPanels.SERVICE_NAME]: {
+    order: 2,
+    width: 'medium',
+    grow: false,
+    type: 'optionsListControl',
+    fieldName: availableControlsPanels.SERVICE_NAME,
+    title: 'Service Name',
+  },
+};

x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/search_bar/controls_content.tsx

@@ -5,18 +5,19 @@
  * 2.0.
  */
 
-import React, { useCallback, useEffect, useRef } from 'react';
 import {
   ControlGroupRenderer,
   ControlGroupRendererApi,
-  DataControlApi,
   ControlGroupRuntimeState,
+  DataControlApi,
 } from '@kbn/controls-plugin/public';
-import type { Filter, Query, TimeRange } from '@kbn/es-query';
 import { DataView } from '@kbn/data-views-plugin/public';
-import { Subscription } from 'rxjs';
+import type { Filter, Query, TimeRange } from '@kbn/es-query';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
-import { useControlPanels } from '../../hooks/use_control_panels_url_state';
+import { useControlPanels } from '@kbn/observability-shared-plugin/public';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { Subscription } from 'rxjs';
+import { controlPanelConfigs } from './control_panels_config';
 import { ControlTitle } from './controls_title';
 
 interface Props {
@@ -34,7 +35,7 @@ export const ControlsContent: React.FC<Props> = ({
   timeRange,
   onFiltersChange,
 }) => {
-  const [controlPanels, setControlPanels] = useControlPanels(dataView);
+  const [controlPanels, setControlPanels] = useControlPanels(controlPanelConfigs, dataView);
   const subscriptions = useRef<Subscription>(new Subscription());
 
   const getInitialInput = useCallback(

x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/search_bar/controls_title.tsx

@@ -8,8 +8,8 @@
 import React from 'react';
 import { EuiFormLabel, EuiText, EuiLink, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { availableControlsPanels } from '../../hooks/use_control_panels_url_state';
 import { Popover } from '../common/popover';
+import { availableControlsPanels } from './control_panels_config';
 
 const helpMessages = {
   [availableControlsPanels.SERVICE_NAME]: (

x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/hooks/use_hosts_table_url_state.ts

@@ -12,7 +12,7 @@ import { constant, identity } from 'fp-ts/lib/function';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
 import deepEqual from 'fast-deep-equal';
 import { useReducer } from 'react';
-import { useUrlState } from '../../../../hooks/use_url_state';
+import { useUrlState } from '@kbn/observability-shared-plugin/public';
 import { DEFAULT_PAGE_SIZE, LOCAL_STORAGE_PAGE_SIZE_KEY } from '../constants';
 
 export const GET_DEFAULT_TABLE_PROPERTIES: TableProperties = {

x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/hooks/use_logs_search_url_state.ts

@@ -9,7 +9,7 @@ import * as rt from 'io-ts';
 import { pipe } from 'fp-ts/lib/pipeable';
 import { fold } from 'fp-ts/lib/Either';
 import { constant, identity } from 'fp-ts/lib/function';
-import { useUrlState } from '../../../../hooks/use_url_state';
+import { useUrlState } from '@kbn/observability-shared-plugin/public';
 
 const DEFAULT_QUERY = {
   language: 'kuery',

x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/hooks/use_tab_id.ts

@@ -9,7 +9,7 @@ import * as rt from 'io-ts';
 import { pipe } from 'fp-ts/lib/pipeable';
 import { fold } from 'fp-ts/lib/Either';
 import { constant, identity } from 'fp-ts/lib/function';
-import { useUrlState } from '../../../../hooks/use_url_state';
+import { useUrlState } from '@kbn/observability-shared-plugin/public';
 
 const TAB_ID_URL_STATE_KEY = 'tabId';
 

x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/hooks/use_unified_search.ts

@@ -10,9 +10,9 @@ import { buildEsQuery, Filter, fromKueryExpression, TimeRange, type Query } from
 import { Subscription, map, tap } from 'rxjs';
 import deepEqual from 'fast-deep-equal';
 import useEffectOnce from 'react-use/lib/useEffectOnce';
+import { useKibanaQuerySettings } from '@kbn/observability-shared-plugin/public';
 import { useSearchSessionContext } from '../../../../hooks/use_search_session';
 import { parseDateRange } from '../../../../utils/datemath';
-import { useKibanaQuerySettings } from '../../../../hooks/use_kibana_query_settings';
 import { useKibanaContextForPlugin } from '../../../../hooks/use_kibana';
 import { telemetryTimeRangeFormatter } from '../../../../../common/formatters/telemetry_time_range';
 import { useMetricsDataViewContext } from '../../../../containers/metrics_source';

x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/hooks/use_unified_search_url_state.ts

@@ -14,7 +14,7 @@ import { constant, identity } from 'fp-ts/lib/function';
 import { enumeration } from '@kbn/securitysolution-io-ts-types';
 import { FilterStateStore } from '@kbn/es-query';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
-import { useUrlState } from '../../../../hooks/use_url_state';
+import { useUrlState } from '@kbn/observability-shared-plugin/public';
 import {
   useKibanaTimefilterTime,
   useSyncKibanaTimeFilterTime,

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/hooks/use_asset_details_flyout_url_state.ts

@@ -9,7 +9,7 @@ import * as rt from 'io-ts';
 import { pipe } from 'fp-ts/lib/pipeable';
 import { fold } from 'fp-ts/lib/Either';
 import { constant, identity } from 'fp-ts/lib/function';
-import { useUrlState } from '../../../../hooks/use_url_state';
+import { useUrlState } from '@kbn/observability-shared-plugin/public';
 
 export const GET_DEFAULT_PROPERTIES: AssetDetailsFlyoutProperties = {
   detailsItemId: null,

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/hooks/use_waffle_filters.ts

@@ -12,12 +12,12 @@ import { pipe } from 'fp-ts/lib/pipeable';
 import { fold } from 'fp-ts/lib/Either';
 import { constant, identity } from 'fp-ts/lib/function';
 import createContainter from 'constate';
+import { useUrlState } from '@kbn/observability-shared-plugin/public';
 import {
   type InventoryFiltersState,
   inventoryFiltersStateRT,
 } from '../../../../../common/inventory_views';
 import { useAlertPrefillContext } from '../../../../alerting/use_alert_prefill';
-import { useUrlState } from '../../../../hooks/use_url_state';
 import { useMetricsDataViewContext } from '../../../../containers/metrics_source';
 import { convertKueryToElasticSearchQuery } from '../../../../utils/kuery';
 

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/hooks/use_waffle_options.ts

@@ -11,6 +11,7 @@ import { fold } from 'fp-ts/lib/Either';
 import { constant, identity } from 'fp-ts/lib/function';
 import createContainer from 'constate';
 import type { InventoryItemType } from '@kbn/metrics-data-access-plugin/common';
+import { useUrlState } from '@kbn/observability-shared-plugin/public';
 import { InventoryViewOptions } from '../../../../../common/inventory_views/types';
 import {
   type InventoryLegendOptions,
@@ -24,7 +25,6 @@ import type {
   SnapshotGroupBy,
   SnapshotCustomMetricInput,
 } from '../../../../../common/http_api/snapshot_api';
-import { useUrlState } from '../../../../hooks/use_url_state';
 
 export const DEFAULT_LEGEND: WaffleLegendOptions = {
   palette: 'cool',

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/hooks/use_waffle_time.ts

@@ -12,7 +12,7 @@ import { fold } from 'fp-ts/lib/Either';
 import DateMath from '@kbn/datemath';
 import { constant, identity } from 'fp-ts/lib/function';
 import createContainer from 'constate';
-import { useUrlState } from '../../../../hooks/use_url_state';
+import { useUrlState } from '@kbn/observability-shared-plugin/public';
 import { useKibanaTimefilterTime } from '../../../../hooks/use_kibana_timefilter_time';
 export const DEFAULT_WAFFLE_TIME_STATE: WaffleTimeState = {
   currentTime: Date.now(),

x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/hooks/use_metrics_time.ts

@@ -13,8 +13,8 @@ import * as rt from 'io-ts';
 import { pipe } from 'fp-ts/lib/pipeable';
 import { fold } from 'fp-ts/lib/Either';
 import { constant, identity } from 'fp-ts/lib/function';
+import { useUrlState } from '@kbn/observability-shared-plugin/public';
 import { replaceStateKeyInQueryString } from '../../../../../common/url_state_storage_service';
-import { useUrlState } from '../../../../hooks/use_url_state';
 
 const parseRange = (range: MetricsTimeInput) => {
   const parsedFrom = dateMath.parse(range.from.toString());

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

@@ -80,29 +80,6 @@ export const ENTITIES_LATEST_ALIAS = entitiesAliasPattern({
   dataset: ENTITY_LATEST,
 });
 
-const entityArrayRt = t.array(t.string);
-export const entityTypesRt = new t.Type<string[], 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()
-);
-
 export interface Entity {
   [ENTITY_LAST_SEEN]: string;
   [ENTITY_ID]: string;
@@ -117,7 +94,7 @@ export interface Entity {
 export type EntityGroup = {
   count: number;
 } & {
-  [key: string]: any;
+  [key: string]: string;
 };
 
 export type InventoryEntityLatest = z.infer<typeof entityLatestSchema> & {