Revert "Integrate react control group embeddable into dashboard conta…

…iner (elastic#190273) (elastic#191993) elastic#190273 introduced a performance regression. Reverting to move metrics to baseline again and create some time to identify root cause. Co-authored-by: Thomas Neirynck <[email protected]>
nreese · Sep 4, 2024 · 86a63da · 86a63da
1 parent 1aaee64
commit 86a63da
Show file tree

Hide file tree

Showing 64 changed files with 1,065 additions and 1,171 deletions.
diff --git a/examples/controls_example/public/app/react_control_example/serialized_control_group_state.ts b/examples/controls_example/public/app/react_control_example/serialized_control_group_state.ts
@@ -90,12 +90,12 @@ const initialSerializedControlGroupState = {
   } as object,
   references: [
     {
-      name: `controlGroup_${rangeSliderControlId}:rangeSliderDataView`,
+      name: `controlGroup_${rangeSliderControlId}:${RANGE_SLIDER_CONTROL}DataView`,
       type: 'index-pattern',
       id: WEB_LOGS_DATA_VIEW_ID,
     },
     {
-      name: `controlGroup_${optionsListId}:optionsListDataView`,
+      name: `controlGroup_${optionsListId}:${OPTIONS_LIST_CONTROL}DataView`,
       type: 'index-pattern',
       id: WEB_LOGS_DATA_VIEW_ID,
     },

diff --git a/examples/portable_dashboards_example/public/dashboard_with_controls_example.tsx b/examples/portable_dashboards_example/public/dashboard_with_controls_example.tsx
@@ -11,7 +11,8 @@ import React, { useEffect, useState } from 'react';
 import { ViewMode } from '@kbn/embeddable-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
-import { controlGroupStateBuilder } from '@kbn/controls-plugin/public';
+import { controlGroupInputBuilder } from '@kbn/controls-plugin/public';
+import { getDefaultControlGroupInput } from '@kbn/controls-plugin/common';
 import {
   AwaitingDashboardAPI,
   DashboardRenderer,
@@ -62,15 +63,16 @@ export const DashboardWithControlsExample = ({ dataView }: { dataView: DataView
       <EuiPanel hasBorder={true}>
         <DashboardRenderer
           getCreationOptions={async (): Promise<DashboardCreationOptions> => {
-            const controlGroupState = {};
-            await controlGroupStateBuilder.addDataControlFromField(controlGroupState, {
+            const builder = controlGroupInputBuilder;
+            const controlGroupInput = getDefaultControlGroupInput();
+            await builder.addDataControlFromField(controlGroupInput, {
               dataViewId: dataView.id ?? '',
               title: 'Destintion country',
               fieldName: 'geo.dest',
               width: 'medium',
               grow: false,
             });
-            await controlGroupStateBuilder.addDataControlFromField(controlGroupState, {
+            await builder.addDataControlFromField(controlGroupInput, {
               dataViewId: dataView.id ?? '',
               fieldName: 'bytes',
               width: 'medium',
@@ -83,7 +85,7 @@ export const DashboardWithControlsExample = ({ dataView }: { dataView: DataView
               getInitialInput: () => ({
                 timeRange: { from: 'now-30d', to: 'now' },
                 viewMode: ViewMode.VIEW,
-                controlGroupState,
+                controlGroupInput,
               }),
             };
           }}

diff --git a/src/plugins/controls/common/control_group/control_group_persistence.ts b/src/plugins/controls/common/control_group/control_group_persistence.ts
@@ -9,6 +9,7 @@
 import deepEqual from 'fast-deep-equal';
 import { SerializableRecord } from '@kbn/utility-types';
 
+import { v4 } from 'uuid';
 import { pick, omit, xor } from 'lodash';
 
 import {
@@ -22,6 +23,7 @@ import {
 } from './control_group_panel_diff_system';
 import { ControlGroupInput } from '..';
 import {
+  ControlsPanels,
   PersistableControlGroupInput,
   persistableControlGroupInputKeys,
   RawControlGroupAttributes,
@@ -101,6 +103,32 @@ const getPanelsAreEqual = (
   return true;
 };
 
+export const controlGroupInputToRawControlGroupAttributes = (
+  controlGroupInput: Omit<ControlGroupInput, 'id'>
+): RawControlGroupAttributes => {
+  return {
+    controlStyle: controlGroupInput.controlStyle,
+    chainingSystem: controlGroupInput.chainingSystem,
+    showApplySelections: controlGroupInput.showApplySelections,
+    panelsJSON: JSON.stringify(controlGroupInput.panels),
+    ignoreParentSettingsJSON: JSON.stringify(controlGroupInput.ignoreParentSettings),
+  };
+};
+
+export const generateNewControlIds = (controlGroupInput?: PersistableControlGroupInput) => {
+  if (!controlGroupInput?.panels) return;
+
+  const newPanelsMap: ControlsPanels = {};
+  for (const panel of Object.values(controlGroupInput.panels)) {
+    const newId = v4();
+    newPanelsMap[newId] = {
+      ...panel,
+      explicitInput: { ...panel.explicitInput, id: newId },
+    };
+  }
+  return { ...controlGroupInput, panels: newPanelsMap };
+};
+
 export const rawControlGroupAttributesToControlGroupInput = (
   rawControlGroupAttributes: RawControlGroupAttributes
 ): PersistableControlGroupInput | undefined => {

diff --git a/src/plugins/controls/common/index.ts b/src/plugins/controls/common/index.ts
@@ -22,12 +22,14 @@ export {
   persistableControlGroupInputKeys,
 } from './control_group/types';
 export {
+  controlGroupInputToRawControlGroupAttributes,
   rawControlGroupAttributesToControlGroupInput,
   rawControlGroupAttributesToSerializable,
   serializableToRawControlGroupAttributes,
   getDefaultControlGroupPersistableInput,
   persistableControlGroupInputIsEqual,
   getDefaultControlGroupInput,
+  generateNewControlIds,
 } from './control_group/control_group_persistence';
 
 export {

diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_group.tsx b/src/plugins/controls/public/react_controls/control_group/components/control_group.tsx
@@ -121,7 +121,6 @@ export function ControlGroup({
       paddingSize="none"
       color={draggingId ? 'success' : 'transparent'}
       className="controlsWrapper"
-      data-test-subj="controls-group-wrapper"
     >
       <EuiFlexGroup
         gutterSize="s"

diff --git a/...plugins/controls/public/react_controls/control_group/control_group_unsaved_changes_api.ts b/...plugins/controls/public/react_controls/control_group/control_group_unsaved_changes_api.ts
@@ -24,7 +24,11 @@ import { apiPublishesAsyncFilters } from '../controls/data_controls/publishes_as
 
 export type ControlGroupComparatorState = Pick<
   ControlGroupRuntimeState,
-  'autoApplySelections' | 'chainingSystem' | 'ignoreParentSettings' | 'labelPosition'
+  | 'autoApplySelections'
+  | 'chainingSystem'
+  | 'ignoreParentSettings'
+  | 'initialChildControlState'
+  | 'labelPosition'
 > & {
   controlsInOrder: ControlsInOrder;
 };
@@ -34,7 +38,6 @@ export function initializeControlGroupUnsavedChanges(
   children$: PresentationContainer['children$'],
   comparators: StateComparators<ControlGroupComparatorState>,
   snapshotControlsRuntimeState: () => ControlPanelsState,
-  resetControlsUnsavedChanges: () => void,
   parentApi: unknown,
   lastSavedRuntimeState: ControlGroupRuntimeState
 ) {
@@ -44,6 +47,7 @@ export function initializeControlGroupUnsavedChanges(
       chainingSystem: lastSavedRuntimeState.chainingSystem,
       controlsInOrder: getControlsInOrder(lastSavedRuntimeState.initialChildControlState),
       ignoreParentSettings: lastSavedRuntimeState.ignoreParentSettings,
+      initialChildControlState: lastSavedRuntimeState.initialChildControlState,
       labelPosition: lastSavedRuntimeState.labelPosition,
     },
     parentApi,
@@ -68,7 +72,6 @@ export function initializeControlGroupUnsavedChanges(
       ),
       asyncResetUnsavedChanges: async () => {
         controlGroupUnsavedChanges.api.resetUnsavedChanges();
-        resetControlsUnsavedChanges();
 
         const filtersReadyPromises: Array<Promise<void>> = [];
         Object.values(children$.value).forEach((controlApi) => {

diff --git a/src/plugins/controls/public/react_controls/control_group/get_control_group_factory.tsx b/src/plugins/controls/public/react_controls/control_group/get_control_group_factory.tsx
@@ -34,19 +34,12 @@ import { chaining$, controlFetch$, controlGroupFetch$ } from './control_fetch';
 import { initControlsManager } from './init_controls_manager';
 import { openEditControlGroupFlyout } from './open_edit_control_group_flyout';
 import { deserializeControlGroup } from './serialization_utils';
-import {
-  ControlGroupApi,
-  ControlGroupRuntimeState,
-  ControlGroupSerializedState,
-  ControlPanelsState,
-} from './types';
+import { ControlGroupApi, ControlGroupRuntimeState, ControlGroupSerializedState } from './types';
 import { ControlGroup } from './components/control_group';
 import { initSelectionsManager } from './selections_manager';
 import { initializeControlGroupUnsavedChanges } from './control_group_unsaved_changes_api';
 import { openDataControlEditor } from '../controls/data_controls/open_data_control_editor';
 
-const DEFAULT_CHAINING_SYSTEM = 'HIERARCHICAL';
-
 export const getControlGroupEmbeddableFactory = (services: {
   core: CoreStart;
   dataViews: DataViewsPublicPluginStart;
@@ -67,29 +60,27 @@ export const getControlGroupEmbeddableFactory = (services: {
       lastSavedRuntimeState
     ) => {
       const {
+        initialChildControlState,
         labelPosition: initialLabelPosition,
         chainingSystem,
         autoApplySelections,
         ignoreParentSettings,
       } = initialRuntimeState;
 
       const autoApplySelections$ = new BehaviorSubject<boolean>(autoApplySelections);
-      const defaultDataViewId = await services.dataViews.getDefaultId();
-      const lastSavedControlsState$ = new BehaviorSubject<ControlPanelsState>(
-        lastSavedRuntimeState.initialChildControlState
-      );
+      const parentDataViewId = apiPublishesDataViews(parentApi)
+        ? parentApi.dataViews.value?.[0]?.id
+        : undefined;
       const controlsManager = initControlsManager(
-        initialRuntimeState.initialChildControlState,
-        lastSavedControlsState$
+        initialChildControlState,
+        parentDataViewId ?? (await services.dataViews.getDefaultId())
       );
       const selectionsManager = initSelectionsManager({
         ...controlsManager.api,
         autoApplySelections$,
       });
       const dataViews = new BehaviorSubject<DataView[] | undefined>(undefined);
-      const chainingSystem$ = new BehaviorSubject<ControlGroupChainingSystem>(
-        chainingSystem ?? DEFAULT_CHAINING_SYSTEM
-      );
+      const chainingSystem$ = new BehaviorSubject<ControlGroupChainingSystem>(chainingSystem);
       const ignoreParentSettings$ = new BehaviorSubject<ParentIgnoreSettings | undefined>(
         ignoreParentSettings
       );
@@ -113,7 +104,6 @@ export const getControlGroupEmbeddableFactory = (services: {
           chainingSystem: [
             chainingSystem$,
             (next: ControlGroupChainingSystem) => chainingSystem$.next(next),
-            (a, b) => (a ?? DEFAULT_CHAINING_SYSTEM) === (b ?? DEFAULT_CHAINING_SYSTEM),
           ],
           ignoreParentSettings: [
             ignoreParentSettings$,
@@ -123,7 +113,6 @@ export const getControlGroupEmbeddableFactory = (services: {
           labelPosition: [labelPosition$, (next: ControlStyle) => labelPosition$.next(next)],
         },
         controlsManager.snapshotControlsRuntimeState,
-        controlsManager.resetControlsUnsavedChanges,
         parentApi,
         lastSavedRuntimeState
       );
@@ -170,28 +159,20 @@ export const getControlGroupEmbeddableFactory = (services: {
           i18n.translate('controls.controlGroup.displayName', {
             defaultMessage: 'Controls',
           }),
-        openAddDataControlFlyout: (options) => {
-          const parentDataViewId = apiPublishesDataViews(parentApi)
-            ? parentApi.dataViews.value?.[0]?.id
-            : undefined;
-          const newControlState = controlsManager.getNewControlState();
+        openAddDataControlFlyout: (settings) => {
+          const { controlInputTransform } = settings ?? {
+            controlInputTransform: (state) => state,
+          };
           openDataControlEditor({
-            initialState: {
-              ...newControlState,
-              dataViewId:
-                newControlState.dataViewId ?? parentDataViewId ?? defaultDataViewId ?? undefined,
-            },
+            initialState: controlsManager.getNewControlState(),
             onSave: ({ type: controlType, state: initialState }) => {
               controlsManager.api.addNewPanel({
                 panelType: controlType,
-                initialState: options?.controlInputTransform
-                  ? options.controlInputTransform(
-                      initialState as Partial<ControlGroupSerializedState>,
-                      controlType
-                    )
-                  : initialState,
+                initialState: controlInputTransform!(
+                  initialState as Partial<ControlGroupSerializedState>,
+                  controlType
+                ),
               });
-              options?.onSave?.();
             },
             controlGroupApi: api,
             services,
@@ -226,20 +207,6 @@ export const getControlGroupEmbeddableFactory = (services: {
         dataViews.next(newDataViews)
       );
 
-      const saveNotificationSubscription = apiHasSaveNotification(parentApi)
-        ? parentApi.saveNotification$.subscribe(() => {
-            lastSavedControlsState$.next(controlsManager.snapshotControlsRuntimeState());
-
-            if (
-              typeof autoApplySelections$.value === 'boolean' &&
-              !autoApplySelections$.value &&
-              selectionsManager.hasUnappliedSelections$.value
-            ) {
-              selectionsManager.applySelections();
-            }
-          })
-        : undefined;
-
       /** Fetch the allowExpensiveQuries setting for the children to use if necessary */
       try {
         const { allowExpensiveQueries } = await services.core.http.get<{
@@ -268,7 +235,6 @@ export const getControlGroupEmbeddableFactory = (services: {
             return () => {
               selectionsManager.cleanup();
               childrenDataViewsSubscription.unsubscribe();
-              saveNotificationSubscription?.unsubscribe();
             };
           }, []);