[ML] Move nested property utilities and url state to packages

.github/CODEOWNERS

@@ -1071,4 +1071,6 @@ x-pack/packages/ml/agg_utils @elastic/ml-ui
 x-pack/packages/ml/aiops_components @elastic/ml-ui
 x-pack/packages/ml/aiops_utils @elastic/ml-ui
 x-pack/packages/ml/is_populated_object @elastic/ml-ui
+x-pack/packages/ml/nested_property @elastic/ml-ui
 x-pack/packages/ml/string_hash @elastic/ml-ui
+x-pack/packages/ml/url_state @elastic/ml-ui

package.json

@@ -350,7 +350,9 @@
     "@kbn/mapbox-gl": "link:packages/kbn-mapbox-gl",
     "@kbn/ml-agg-utils": "link:x-pack/packages/ml/agg_utils",
     "@kbn/ml-is-populated-object": "link:x-pack/packages/ml/is_populated_object",
+    "@kbn/ml-nested-property": "link:x-pack/packages/ml/nested_property",
     "@kbn/ml-string-hash": "link:x-pack/packages/ml/string_hash",
+    "@kbn/ml-url-state": "link:x-pack/packages/ml/url_state",
     "@kbn/monaco": "link:packages/kbn-monaco",
     "@kbn/osquery-io-ts-types": "link:packages/kbn-osquery-io-ts-types",
     "@kbn/plugin-discovery": "link:packages/kbn-plugin-discovery",

tsconfig.base.json

@@ -816,10 +816,14 @@
       "@kbn/ml-agg-utils/*": ["x-pack/packages/ml/agg_utils/*"],
       "@kbn/ml-is-populated-object": ["x-pack/packages/ml/is_populated_object"],
       "@kbn/ml-is-populated-object/*": ["x-pack/packages/ml/is_populated_object/*"],
+      "@kbn/ml-nested-property": ["x-pack/packages/ml/nested_property"],
+      "@kbn/ml-nested-property/*": ["x-pack/packages/ml/nested_property/*"],
       "@kbn/ml-plugin": ["x-pack/plugins/ml"],
       "@kbn/ml-plugin/*": ["x-pack/plugins/ml/*"],
       "@kbn/ml-string-hash": ["x-pack/packages/ml/string_hash"],
       "@kbn/ml-string-hash/*": ["x-pack/packages/ml/string_hash/*"],
+      "@kbn/ml-url-state": ["x-pack/packages/ml/url_state"],
+      "@kbn/ml-url-state/*": ["x-pack/packages/ml/url_state/*"],
       "@kbn/monaco": ["packages/kbn-monaco"],
       "@kbn/monaco/*": ["packages/kbn-monaco/*"],
       "@kbn/monitoring-collection-plugin": ["x-pack/plugins/monitoring_collection"],

x-pack/packages/ml/nested_property/README.md

@@ -0,0 +1,3 @@
+# @kbn/ml-nested-property
+
+Provides functionality similar to lodash's get() except that it's TypeScript aware and able to infer return types.

x-pack/packages/ml/nested_property/index.ts

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { getNestedProperty } from './src/get_nested_property';
+export { setNestedProperty } from './src/set_nested_property';

x-pack/packages/ml/nested_property/jest.config.js

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../..',
+  roots: ['<rootDir>/x-pack/packages/ml/nested_property'],
+};

x-pack/packages/ml/nested_property/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/ml-nested-property",
+  "owner": "@elastic/ml-ui"
+}

x-pack/packages/ml/nested_property/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@kbn/ml-nested-property",
+  "description": "TypeScript-aware utility functions to get/set attributes from objects.",
+  "author": "Machine Learning UI",
+  "homepage": "https://docs.elastic.dev/kibana-dev-docs/api/kbn-ml-nested-property",
+  "private": true,
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

x-pack/plugins/transform/common/utils/object_utils.test.ts → x-pack/packages/ml/nested_property/src/get_nested_property.test.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { getNestedProperty } from './object_utils';
+import { getNestedProperty } from './get_nested_property';
 
 describe('object_utils', () => {
   test('getNestedProperty()', () => {

x-pack/plugins/transform/common/utils/object_utils.ts → x-pack/packages/ml/nested_property/src/get_nested_property.ts

@@ -33,21 +33,3 @@ export function getNestedProperty(
 
   return o;
 }
-
-export const setNestedProperty = (obj: Record<string, any>, accessor: string, value: any) => {
-  let ref = obj;
-  const accessors = accessor.split('.');
-  const len = accessors.length;
-  for (let i = 0; i < len - 1; i++) {
-    const attribute = accessors[i];
-    if (ref[attribute] === undefined) {
-      ref[attribute] = {};
-    }
-
-    ref = ref[attribute];
-  }
-
-  ref[accessors[len - 1]] = value;
-
-  return obj;
-};

x-pack/packages/ml/nested_property/src/set_nested_property.ts

@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+
+export const setNestedProperty = (obj: Record<string, any>, accessor: string, value: any) => {
+  let ref = obj;
+  const accessors = accessor.split('.');
+  const len = accessors.length;
+  for (let i = 0; i < len - 1; i++) {
+    const attribute = accessors[i];
+    if (ref[attribute] === undefined) {
+      ref[attribute] = {};
+    }
+
+    ref = ref[attribute];
+  }
+
+  ref[accessors[len - 1]] = value;
+
+  return obj;
+};

x-pack/packages/ml/nested_property/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": [
+      "jest",
+      "node",
+      "react"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+      "**/*.tsx",
+  ],
+  "exclude": [
+    "target/**/*",
+  ]
+}

x-pack/packages/ml/url_state/README.md

@@ -0,0 +1,3 @@
+# @kbn/ml-url-state
+
+URL state management.

x-pack/packages/ml/url_state/index.ts

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+export {
+  isRisonSerializationRequired,
+  parseUrlState,
+  usePageUrlState,
+  useUrlState,
+  PageUrlStateService,
+  Provider,
+  UrlStateProvider,
+  type Accessor,
+  type Dictionary,
+  type SetUrlState,
+} from './src/url_state';

x-pack/packages/ml/url_state/jest.config.js

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../..',
+  roots: ['<rootDir>/x-pack/packages/ml/url_state'],
+};

x-pack/packages/ml/url_state/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/ml-url-state",
+  "owner": "@elastic/ml-ui"
+}

x-pack/packages/ml/url_state/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@kbn/ml-url-state",
+  "description": "Url state management utilities.",
+  "author": "Machine Learning UI",
+  "homepage": "https://docs.elastic.dev/kibana-dev-docs/api/kbn-ml-url-state",
+  "private": true,
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

x-pack/plugins/ml/public/application/util/url_state.tsx → x-pack/packages/ml/url_state/src/url_state.tsx

@@ -11,23 +11,25 @@ import React, {
   useCallback,
   useContext,
   useMemo,
-  FC,
   useRef,
   useEffect,
+  type FC,
 } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
 import { isEqual } from 'lodash';
+
+import { getNestedProperty } from '@kbn/ml-nested-property';
 import { decode, encode } from '@kbn/rison';
-import { useHistory, useLocation } from 'react-router-dom';
 
 import { BehaviorSubject, Observable } from 'rxjs';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { isPopulatedObject } from '@kbn/ml-is-populated-object';
-import { Dictionary } from '../../../common/types/common';
 
-import { getNestedProperty } from './object_utils';
-import { MlPages } from '../../../common/constants/locator';
+export interface Dictionary<TValue> {
+  [id: string]: TValue;
+}
 
-type Accessor = '_a' | '_g';
+export type Accessor = '_a' | '_g';
 export type SetUrlState = (
   accessor: Accessor,
   attribute: string | Dictionary<any>,
@@ -48,7 +50,7 @@ const risonSerializedParams = new Set(['_a', '_g']);
  * Checks if the URL query parameter requires rison serialization.
  * @param queryParam
  */
-function isRisonSerializationRequired(queryParam: string): boolean {
+export function isRisonSerializationRequired(queryParam: string): boolean {
   return risonSerializedParams.has(queryParam);
 }
 
@@ -86,7 +88,7 @@ export const urlStateStore = createContext<UrlState>({
   setUrlState: () => {},
 });
 
-const { Provider } = urlStateStore;
+export const { Provider } = urlStateStore;
 
 export const UrlStateProvider: FC = ({ children }) => {
   const history = useHistory();
@@ -183,15 +185,6 @@ export const useUrlState = (
   return [urlState, setUrlState];
 };
 
-type LegacyUrlKeys = 'mlExplorerSwimlane';
-
-export type AppStateKey =
-  | 'mlSelectSeverity'
-  | 'mlSelectInterval'
-  | 'mlAnomaliesTable'
-  | MlPages
-  | LegacyUrlKeys;
-
 /**
  * Service for managing URL state of particular page.
  */
@@ -239,7 +232,7 @@ export class PageUrlStateService<T> {
  * Hook for managing the URL state of the page.
  */
 export const usePageUrlState = <PageUrlState extends object>(
-  pageKey: AppStateKey,
+  pageKey: string,
   defaultState?: PageUrlState
 ): [
   PageUrlState,

x-pack/packages/ml/url_state/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": [
+      "jest",
+      "node",
+      "react"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+      "**/*.tsx",
+  ],
+  "exclude": [
+    "target/**/*",
+  ],
+  "kbn_references": [
+    "@kbn/ml-nested-property",
+    "@kbn/rison",
+    "@kbn/ml-is-populated-object",
+  ]
+}

x-pack/plugins/aiops/public/components/change_point_detection/change_point_detection_context.tsx

@@ -18,6 +18,7 @@ import { type DataViewField } from '@kbn/data-views-plugin/public';
 import { startWith } from 'rxjs';
 import useMount from 'react-use/lib/useMount';
 import type { Query, Filter } from '@kbn/es-query';
+import { usePageUrlState } from '@kbn/ml-url-state';
 import {
   createMergedEsQuery,
   getEsQueryFromSavedSearch,
@@ -27,7 +28,6 @@ import { useTimefilter, useTimeRangeUpdates } from '../../hooks/use_time_filter'
 import { useChangePointResults } from './use_change_point_agg_request';
 import { type TimeBuckets, TimeBucketsInterval } from '../../../common/time_buckets';
 import { useDataSource } from '../../hooks/use_data_source';
-import { usePageUrlState } from '../../hooks/use_url_state';
 import { useTimeBuckets } from '../../hooks/use_time_buckets';
 
 export interface ChangePointDetectionRequestParams {

x-pack/plugins/aiops/public/components/change_point_detection/change_point_detetion_root.tsx

@@ -8,10 +8,10 @@
 import { DataView } from '@kbn/data-views-plugin/common';
 import { SavedSearch } from '@kbn/saved-search-plugin/public';
 import React, { FC } from 'react';
+import { UrlStateProvider } from '@kbn/ml-url-state';
 import { PageHeader } from '../page_header';
 import { ChangePointDetectionContextProvider } from './change_point_detection_context';
 import { DataSourceContext } from '../../hooks/use_data_source';
-import { UrlStateProvider } from '../../hooks/use_url_state';
 import { SavedSearchSavedObject } from '../../application/utils/search_utils';
 import { AiopsAppContext, AiopsAppDependencies } from '../../hooks/use_aiops_app_context';
 import { ChangePointDetectionPage } from './change_point_detection_page';

x-pack/plugins/aiops/public/components/date_picker_wrapper/date_picker_wrapper.tsx

@@ -20,14 +20,15 @@ import {
   OnRefreshProps,
   OnTimeChangeProps,
 } from '@elastic/eui';
+
 import type { TimeRange } from '@kbn/es-query';
 import { TimeHistoryContract, UI_SETTINGS } from '@kbn/data-plugin/public';
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { toMountPoint, wrapWithTheme } from '@kbn/kibana-react-plugin/public';
+import { useUrlState } from '@kbn/ml-url-state';
 import { useRefreshIntervalUpdates, useTimeRangeUpdates } from '../../hooks/use_time_filter';
-import { useUrlState } from '../../hooks/use_url_state';
 import { useAiopsAppContext } from '../../hooks/use_aiops_app_context';
 import { aiopsRefresh$ } from '../../application/services/timefilter_refresh_service';
 

x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_app_state.tsx

@@ -15,12 +15,12 @@ import { i18n } from '@kbn/i18n';
 import type { SavedSearch } from '@kbn/discover-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
 
+import { UrlStateProvider } from '@kbn/ml-url-state';
 import {
   SEARCH_QUERY_LANGUAGE,
   SearchQueryLanguage,
   SavedSearchSavedObject,
 } from '../../application/utils/search_utils';
-import { UrlStateProvider } from '../../hooks/use_url_state';
 import type { AiopsAppDependencies } from '../../hooks/use_aiops_app_context';
 import { AiopsAppContext } from '../../hooks/use_aiops_app_context';
 

x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_page.tsx

@@ -27,9 +27,9 @@ import { Filter, FilterStateStore, Query } from '@kbn/es-query';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { SavedSearch } from '@kbn/discover-plugin/public';
 
+import { useUrlState, usePageUrlState } from '@kbn/ml-url-state';
 import { useAiopsAppContext } from '../../hooks/use_aiops_app_context';
 import { SearchQueryLanguage, SavedSearchSavedObject } from '../../application/utils/search_utils';
-import { useUrlState, usePageUrlState, AppStateKey } from '../../hooks/use_url_state';
 import { useData } from '../../hooks/use_data';
 import { FullTimeRangeSelector } from '../full_time_range_selector';
 import { DocumentCountContent } from '../document_count_content/document_count_content';
@@ -79,7 +79,10 @@ export const ExplainLogRateSpikesPage: FC<ExplainLogRateSpikesPageProps> = ({
     setSelectedGroup,
   } = useSpikeAnalysisTableRowContext();
 
-  const [aiopsListState, setAiopsListState] = usePageUrlState(AppStateKey, restorableDefaults);
+  const [aiopsListState, setAiopsListState] = usePageUrlState(
+    'AIOPS_INDEX_VIEWER',
+    restorableDefaults
+  );
   const [globalState, setGlobalState] = useUrlState('_g');
 
   const [currentSavedSearch, setCurrentSavedSearch] = useState(savedSearch);

x-pack/plugins/aiops/public/components/log_categorization/log_categorization_app_state.tsx

@@ -7,11 +7,11 @@
 import React, { FC } from 'react';
 import type { SavedSearch } from '@kbn/discover-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
+import { UrlStateProvider } from '@kbn/ml-url-state';
 import { LogCategorizationPage } from './log_categorization_page';
 import { SavedSearchSavedObject } from '../../application/utils/search_utils';
 import type { AiopsAppDependencies } from '../../hooks/use_aiops_app_context';
 import { AiopsAppContext } from '../../hooks/use_aiops_app_context';
-import { UrlStateProvider } from '../../hooks/use_url_state';
 
 export interface LogCategorizationAppStateProps {
   dataView: DataView;