[Infra] Fix hosts view crashing on load

x-pack/solutions/observability/plugins/infra/moon.yml

@@ -140,6 +140,7 @@ dependsOn:
   - '@kbn/inspector-plugin'
   - '@kbn/css-utils'
   - '@kbn/agent-builder-plugin'
+  - '@kbn/controls-constants'
 tags:
   - plugin
   - prod

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

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { OPTIONS_LIST_CONTROL } from '@kbn/controls-constants';
 import {
   CLOUD_PROVIDER,
   HOST_OS_NAME,
@@ -23,15 +24,15 @@ const commonControlPanelConfig: ControlPanels = {
     order: 1,
     width: 'medium',
     grow: false,
-    type: 'optionsListControl',
+    type: OPTIONS_LIST_CONTROL,
     fieldName: CLOUD_PROVIDER,
     title: 'Cloud Provider',
   },
   [SERVICE_NAME]: {
     order: 2,
     width: 'medium',
     grow: false,
-    type: 'optionsListControl',
+    type: OPTIONS_LIST_CONTROL,
     fieldName: SERVICE_NAME,
     title: 'Service Name',
   },
@@ -43,7 +44,7 @@ const controlPanelConfig: Record<DataSchemaFormat, ControlPanels> = {
       order: 0,
       width: 'medium',
       grow: false,
-      type: 'optionsListControl',
+      type: OPTIONS_LIST_CONTROL,
       fieldName: HOST_OS_NAME,
       title: 'Operating System',
     },
@@ -53,7 +54,7 @@ const controlPanelConfig: Record<DataSchemaFormat, ControlPanels> = {
       order: 0,
       width: 'medium',
       grow: false,
-      type: 'optionsListControl',
+      type: OPTIONS_LIST_CONTROL,
       fieldName: OS_NAME,
       title: 'Operating System',
     },

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

@@ -19,6 +19,7 @@ import type { DataControlApi } from '@kbn/controls-plugin/public';
 import React, { useCallback, useEffect, useRef, useMemo } from 'react';
 import { Subscription } from 'rxjs';
 import type { DataSchemaFormat } from '@kbn/metrics-data-access-plugin/common';
+import { NOT_AVAILABLE_LABEL } from '@kbn/observability-plugin/common';
 import { useTimeRangeMetadataContext } from '../../../../../hooks/use_time_range_metadata';
 import { SchemaSelector } from '../../../../../components/schema_selector';
 import { getControlPanelConfigs } from './control_panels_config';
@@ -78,7 +79,10 @@ export const ControlsContent = ({
             const child = children[childId] as DataControlApi;
 
             child.CustomPrependComponent = () => (
-              <ControlTitle title={child.title$.getValue()} embeddableId={childId} />
+              <ControlTitle
+                title={child.title$?.getValue() ?? NOT_AVAILABLE_LABEL}
+                embeddableId={childId}
+              />
             );
           });
         })

x-pack/solutions/observability/plugins/infra/tsconfig.json

@@ -133,7 +133,8 @@
     "@kbn/presentation-publishing",
     "@kbn/inspector-plugin",
     "@kbn/css-utils",
-    "@kbn/agent-builder-plugin"
+    "@kbn/agent-builder-plugin",
+    "@kbn/controls-constants"
   ],
   "exclude": ["target/**/*"]
 }

x-pack/solutions/observability/plugins/observability/common/index.ts

@@ -88,3 +88,7 @@ export {
   OBSERVABILITY_TIERED_FEATURES,
   OBSERVABILITY_COMPLETE_LANDING_PAGE_FEATURE,
 } from './product_features';
+
+// This label is used in multiple places across the observability plugins, so we export it from the common package
+// to avoid having to recreate it in multiple places and ensure consistency.
+export { NOT_AVAILABLE_LABEL } from './i18n';

x-pack/solutions/observability/plugins/observability_shared/moon.yml

@@ -54,6 +54,7 @@ dependsOn:
   - '@kbn/deeplinks-observability'
   - '@kbn/home-sample-data-tab'
   - '@kbn/agent-builder-plugin'
+  - '@kbn/controls-constants'
 tags:
   - plugin
   - prod

x-pack/solutions/observability/plugins/observability_shared/public/hooks/use_control_panels_url_state.ts

@@ -7,11 +7,16 @@
 
 import * as rt from 'io-ts';
 import { pick } from 'lodash';
-import { pipe } from 'fp-ts/pipeable';
 import { fold } from 'fp-ts/Either';
-import { constant, identity } from 'fp-ts/function';
+import { constant, identity, pipe } from 'fp-ts/function';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { useMemo } from 'react';
+import {
+  ESQL_CONTROL,
+  OPTIONS_LIST_CONTROL,
+  RANGE_SLIDER_CONTROL,
+  TIME_SLIDER_CONTROL,
+} from '@kbn/controls-constants';
 import { useUrlState } from './use_url_state';
 
 const CONTROL_PANELS_URL_KEY = 'controlPanels';
@@ -87,6 +92,39 @@ const addDataViewIdToControlPanels = (controlPanels: ControlPanels, dataViewId:
   }, {});
 };
 
+// Ensure the final value has the correct control type values in case we're dealing with an older URL state
+// that still has old string values instead of the new constants.
+const ensureCorrectControlTypes = (controlPanels: ControlPanels) => {
+  return Object.entries(controlPanels).reduce((acc, [key, controlPanelConfig]) => {
+    let type: string;
+
+    switch (controlPanelConfig.type) {
+      case 'optionsListControl':
+        type = OPTIONS_LIST_CONTROL;
+        break;
+      case 'timeSlider':
+        type = TIME_SLIDER_CONTROL;
+        break;
+      case 'rangeSliderControl':
+        type = RANGE_SLIDER_CONTROL;
+        break;
+      case 'esqlControl':
+        type = ESQL_CONTROL;
+        break;
+      default:
+        type = controlPanelConfig.type;
+    }
+
+    return {
+      ...acc,
+      [key]: {
+        ...controlPanelConfig,
+        type,
+      },
+    };
+  }, {});
+};
+
 /**
  * Converts a panel's serialized state (snake_case from the controls plugin) back to
  * the camelCase keys expected by the PanelRT io-ts codec, and strips data view IDs
@@ -138,8 +176,8 @@ const mergeDefaultPanelsWithUrlConfig = (
     };
   }, {});
 
-  // Merge default and existing configs and add dataView.id to each of them
-  return addDataViewIdToControlPanels(merged, dataView.id);
+  // Merge default and existing configs, add dataView.id to each of them and ensure control types have correct values
+  return ensureCorrectControlTypes(addDataViewIdToControlPanels(merged, dataView.id));
 };
 
 const encodeUrlState = (value: ControlPanels) => {

x-pack/solutions/observability/plugins/observability_shared/tsconfig.json

@@ -50,6 +50,7 @@
     "@kbn/deeplinks-observability",
     "@kbn/home-sample-data-tab",
     "@kbn/agent-builder-plugin",
+    "@kbn/controls-constants",
   ],
   "exclude": ["target/**/*", ".storybook/**/*.js"]
 }