Make infra Hosts work

elastic · Aug 8, 2024 · 509caf2 · 509caf2
1 parent 0dc8fcf
commit 509caf2
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 69 deletions.
diff --git a/examples/controls_example/public/react_controls/control_group/external_api/types.ts b/examples/controls_example/public/react_controls/control_group/external_api/types.ts
@@ -15,7 +15,6 @@ import type {
   ControlGroupSettings,
   ControlInputTransform,
   ControlPanelState,
-  SerializedControlPanelState,
 } from '../types';
 
 export type ControlGroupRendererApi = ControlGroupApi & {
@@ -33,7 +32,7 @@ export type ControlGroupRendererState = Omit<
 > & {
   id: string;
   panels: {
-    [panelId: string]: ControlPanelState<SerializedControlPanelState>;
+    [panelId: string]: ControlPanelState<ControlPanelState>;
   };
   viewMode?: ViewMode;
   ignoreParentSettings?: ParentIgnoreSettings;

diff --git a/examples/controls_example/public/react_controls/control_group/get_control_group_factory.tsx b/examples/controls_example/public/react_controls/control_group/get_control_group_factory.tsx
@@ -167,8 +167,13 @@ export const getControlGroupEmbeddableFactory = (services: {
         autoApplySelections$,
         allowExpensiveQueries$,
         snapshotRuntimeState: () => {
-          // TODO: Remove this if it ends up being unnecessary
-          return {} as unknown as ControlGroupRuntimeState;
+          return {
+            initialChildControlState, // this never changes
+            chainingSystem: chainingSystem$.getValue(),
+            labelPosition: labelPosition$.getValue(),
+            autoApplySelections: autoApplySelections$.getValue(),
+            panels: controlsManager.snapshotControlsRuntimeState(),
+          };
         },
         dataLoading: dataLoading$,
         onEdit: async () => {

diff --git a/examples/controls_example/public/react_controls/control_group/serialization_utils.ts b/examples/controls_example/public/react_controls/control_group/serialization_utils.ts
@@ -58,7 +58,7 @@ export const deserializeControlGroup = (
     autoApplySelections:
       typeof state.rawState.showApplySelections === 'boolean'
         ? !state.rawState.showApplySelections
-        : false, // Rename "showApplySelections" to "autoApplySelections"
+        : true, // Rename "showApplySelections" to "autoApplySelections"
     labelPosition: state.rawState.controlStyle, // Rename "controlStyle" to "labelPosition"
     defaultControlGrow: DEFAULT_CONTROL_GROW,
     defaultControlWidth: DEFAULT_CONTROL_WIDTH,

diff --git a/examples/controls_example/public/react_controls/control_group/types.ts b/examples/controls_example/public/react_controls/control_group/types.ts
@@ -109,6 +109,7 @@ export interface ControlGroupRuntimeState<State extends DefaultControlState = De
   autoApplySelections: boolean;
   ignoreParentSettings?: ParentIgnoreSettings;
 
+  panels?: ControlPanelsState;
   initialChildControlState: ControlPanelsState<State>;
 
   /*

diff --git a/x-pack/plugins/observability_solution/infra/kibana.jsonc b/x-pack/plugins/observability_solution/infra/kibana.jsonc
@@ -56,7 +56,7 @@
       "kibanaReact",
       "ml",
       "embeddable",
-      "controls"
+      "controlsExample"
     ]
   }
 }
diff --git a/...lity_solution/infra/public/pages/metrics/hosts/components/search_bar/controls_content.tsx b/...lity_solution/infra/public/pages/metrics/hosts/components/search_bar/controls_content.tsx
@@ -5,20 +5,15 @@
  * 2.0.
  */
 
-import React, { useCallback, useEffect, useRef } from 'react';
-import {
-  type ControlEmbeddable,
-  ControlGroupAPI,
-  ControlGroupRenderer,
-  type ControlInput,
-  type ControlOutput,
-  type ControlGroupInput,
-} from '@kbn/controls-plugin/public';
+import { ControlGroupAPI, ControlGroupRenderer } from '@kbn/controls-example-plugin/public';
+import { ControlGroupRendererState } from '@kbn/controls-example-plugin/public/react_controls/control_group/external_api/types';
+import { DataControlApi } from '@kbn/controls-example-plugin/public/react_controls/data_controls/types';
+import { DataView } from '@kbn/data-views-plugin/public';
 import { ViewMode } from '@kbn/embeddable-plugin/public';
 import type { Filter, Query, TimeRange } from '@kbn/es-query';
-import { DataView } from '@kbn/data-views-plugin/public';
-import { Subscription } from 'rxjs';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { Subscription } from 'rxjs';
 import { useControlPanels } from '../../hooks/use_control_panels_url_state';
 import { ControlTitle } from './controls_title';
 
@@ -42,45 +37,45 @@ export const ControlsContent: React.FC<Props> = ({
 
   const getInitialInput = useCallback(
     (loadedDataView: DataView) => async () => {
-      const initialInput: Partial<ControlGroupInput> = {
+      const initialInput: Partial<ControlGroupRendererState> = {
         id: loadedDataView.id,
         viewMode: ViewMode.VIEW,
         chainingSystem: 'HIERARCHICAL',
         controlStyle: 'oneLine',
         defaultControlWidth: 'small',
         panels: controlPanels,
-        filters,
-        query,
-        timeRange,
       };
 
       return { initialInput };
     },
-    [controlPanels, filters, query, timeRange]
+    [controlPanels]
   );
 
   const loadCompleteHandler = useCallback(
     (controlGroup: ControlGroupAPI) => {
       if (!controlGroup) return;
 
-      controlGroup.untilAllChildrenReady().then(() => {
-        controlGroup.getChildIds().map((id) => {
-          const embeddable =
-            controlGroup.getChild<ControlEmbeddable<ControlInput, ControlOutput>>(id);
-          embeddable.renderPrepend = () => (
-            <ControlTitle title={embeddable.getTitle()} embeddableId={id} />
+      controlGroup.untilInitialized().then(() => {
+        const children = controlGroup.children$.getValue();
+        Object.keys(children).map((childId) => {
+          const child = children[childId] as DataControlApi;
+          child.CustomPrependComponent = () => (
+            <ControlTitle title={child.panelTitle.getValue()} embeddableId={childId} />
           );
         });
       });
 
       subscriptions.current.add(
-        controlGroup.onFiltersPublished$.subscribe((newFilters) => {
+        controlGroup.filters$.subscribe((newFilters = []) => {
           onFiltersChange(newFilters);
         })
       );
 
       subscriptions.current.add(
-        controlGroup.getInput$().subscribe(({ panels }) => setControlPanels(panels))
+        controlGroup.children$.subscribe(() => {
+          const { panels } = controlGroup.snapshotRuntimeState();
+          if (panels) setControlPanels(panels);
+        })
       );
     },
     [onFiltersChange, setControlPanels]

diff --git a/...bility_solution/infra/public/pages/metrics/hosts/components/search_bar/controls_title.tsx b/...bility_solution/infra/public/pages/metrics/hosts/components/search_bar/controls_title.tsx
@@ -46,7 +46,7 @@ const TitleWithPopoverMessage = ({
   embeddableId: string;
 }) => {
   return (
-    <EuiFormLabel className="controlFrame__formControlLayoutLabel" htmlFor={embeddableId}>
+    <EuiFormLabel className="controlPanel--label" htmlFor={embeddableId}>
       <EuiFlexGroup alignItems="center" gutterSize="xs">
         <EuiFlexItem grow={false}>{title}</EuiFlexItem>
         <EuiFlexItem grow={false}>
@@ -62,7 +62,7 @@ export const ControlTitle = ({ title, embeddableId }: { title?: string; embeddab
   return helpMessage ? (
     <TitleWithPopoverMessage title={title} helpMessage={helpMessage} embeddableId={embeddableId} />
   ) : (
-    <EuiFormLabel className="controlFrame__formControlLayoutLabel" htmlFor={embeddableId}>
+    <EuiFormLabel className="controlPanel--label" htmlFor={embeddableId}>
       {title}
     </EuiFormLabel>
   );

diff --git a/...rvability_solution/infra/public/pages/metrics/hosts/hooks/use_control_panels_url_state.ts b/...rvability_solution/infra/public/pages/metrics/hosts/hooks/use_control_panels_url_state.ts
@@ -28,33 +28,24 @@ const controlPanelConfigs: ControlPanels = {
     width: 'medium',
     grow: false,
     type: 'optionsListControl',
-    explicitInput: {
-      id: availableControlsPanels.HOST_OS_NAME,
-      fieldName: availableControlsPanels.HOST_OS_NAME,
-      title: 'Operating System',
-    },
+    fieldName: availableControlsPanels.HOST_OS_NAME,
+    title: 'Operating System',
   },
   [availableControlsPanels.CLOUD_PROVIDER]: {
     order: 1,
     width: 'medium',
     grow: false,
     type: 'optionsListControl',
-    explicitInput: {
-      id: availableControlsPanels.CLOUD_PROVIDER,
-      fieldName: availableControlsPanels.CLOUD_PROVIDER,
-      title: 'Cloud Provider',
-    },
+    fieldName: availableControlsPanels.CLOUD_PROVIDER,
+    title: 'Cloud Provider',
   },
   [availableControlsPanels.SERVICE_NAME]: {
     order: 2,
     width: 'medium',
     grow: false,
     type: 'optionsListControl',
-    explicitInput: {
-      id: availableControlsPanels.SERVICE_NAME,
-      fieldName: availableControlsPanels.SERVICE_NAME,
-      title: 'Service Name',
-    },
+    fieldName: availableControlsPanels.SERVICE_NAME,
+    title: 'Service Name',
   },
 };
 
@@ -108,19 +99,18 @@ const addDataViewIdToControlPanels = (controlPanels: ControlPanels, dataViewId:
       ...acc,
       [key]: {
         ...controlPanelConfig,
-        explicitInput: { ...controlPanelConfig.explicitInput, dataViewId },
+        dataViewId,
       },
     };
   }, {});
 };
 
 const cleanControlPanels = (controlPanels: ControlPanels) => {
   return Object.entries(controlPanels).reduce((acc, [key, controlPanelConfig]) => {
-    const { explicitInput } = controlPanelConfig;
-    const { dataViewId, ...rest } = explicitInput;
+    const { dataViewId, ...rest } = controlPanelConfig;
     return {
       ...acc,
-      [key]: { ...controlPanelConfig, explicitInput: rest },
+      [key]: rest,
     };
   }, {});
 };
@@ -140,21 +130,20 @@ const mergeDefaultPanelsWithUrlConfig = (dataView: DataView, urlPanels: ControlP
   );
 };
 
-const PanelRT = rt.type({
-  order: rt.number,
-  width: rt.union([rt.literal('medium'), rt.literal('small'), rt.literal('large')]),
-  grow: rt.boolean,
-  type: rt.string,
-  explicitInput: rt.intersection([
-    rt.type({ id: rt.string }),
-    rt.partial({
-      dataViewId: rt.string,
-      fieldName: rt.string,
-      title: rt.union([rt.string, rt.undefined]),
-      selectedOptions: rt.array(rt.string),
-    }),
-  ]),
-});
+const PanelRT = rt.intersection([
+  rt.type({
+    order: rt.number,
+    type: rt.string,
+  }),
+  rt.partial({
+    width: rt.union([rt.literal('medium'), rt.literal('small'), rt.literal('large')]),
+    grow: rt.boolean,
+    dataViewId: rt.string,
+    fieldName: rt.string,
+    title: rt.union([rt.string, rt.undefined]),
+    selectedOptions: rt.array(rt.string),
+  }),
+]);
 
 const ControlPanelRT = rt.record(rt.string, PanelRT);
 

diff --git a/x-pack/plugins/observability_solution/infra/tsconfig.json b/x-pack/plugins/observability_solution/infra/tsconfig.json
@@ -45,6 +45,7 @@
     "@kbn/safer-lodash-set",
     "@kbn/test-jest-helpers",
     "@kbn/controls-plugin",
+    "@kbn/controls-example-plugin",
     "@kbn/securitysolution-io-ts-types",
     "@kbn/config-schema",
     "@kbn/es-ui-shared-plugin",
@@ -109,7 +110,5 @@
     "@kbn/core-analytics-browser",
     "@kbn/observability-alerting-rule-utils"
   ],
-  "exclude": [
-    "target/**/*"
-  ]
+  "exclude": ["target/**/*"]
 }