[8.x] [Observability] Split up observability-utils package (#199801)

package.json

@@ -704,7 +704,9 @@
     "@kbn/observability-plugin": "link:x-pack/plugins/observability_solution/observability",
     "@kbn/observability-shared-plugin": "link:x-pack/plugins/observability_solution/observability_shared",
     "@kbn/observability-synthetics-test-data": "link:x-pack/packages/observability/synthetics_test_data",
-    "@kbn/observability-utils": "link:x-pack/packages/observability/observability_utils",
+    "@kbn/observability-utils-browser": "link:x-pack/packages/observability/observability_utils/observability_utils_browser",
+    "@kbn/observability-utils-common": "link:x-pack/packages/observability/observability_utils/observability_utils_common",
+    "@kbn/observability-utils-server": "link:x-pack/packages/observability/observability_utils/observability_utils_server",
     "@kbn/oidc-provider-plugin": "link:x-pack/test/security_api_integration/plugins/oidc_provider",
     "@kbn/open-telemetry-instrumented-plugin": "link:test/common/plugins/otel_metrics",
     "@kbn/openapi-common": "link:packages/kbn-openapi-common",

packages/kbn-apm-utils/index.ts

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import agent from 'elastic-apm-node';
+import agent, { Logger } from 'elastic-apm-node';
 import asyncHooks from 'async_hooks';
 
 export interface SpanOptions {
@@ -34,14 +34,48 @@ const runInNewContext = <T extends (...args: any[]) => any>(cb: T): ReturnType<T
 
 export async function withSpan<T>(
   optionsOrName: SpanOptions | string,
-  cb: (span?: Span) => Promise<T>
+  cb: (span?: Span) => Promise<T>,
+  logger?: Logger
 ): Promise<T> {
   const options = parseSpanOptions(optionsOrName);
 
   const { name, type, subtype, labels, intercept } = options;
 
+  let time: number | undefined;
+  if (logger?.isLevelEnabled('debug')) {
+    time = performance.now();
+  }
+
+  function logTook(failed: boolean) {
+    if (time) {
+      logger?.debug(
+        () =>
+          `Operation ${name}${failed ? ` (failed)` : ''} ${
+            Math.round(performance.now() - time!) / 1000
+          }s`
+      );
+    }
+  }
+
+  const withLogTook = [
+    <TR>(res: TR): TR | Promise<TR> => {
+      logTook(false);
+      return res;
+    },
+    (err: any): never => {
+      logTook(true);
+      throw err;
+    },
+  ];
+
   if (!agent.isStarted()) {
-    return cb();
+    const promise = cb();
+    // make sure tests that mock out the callback with a sync
+    // function don't fail.
+    if (typeof promise === 'object' && 'then' in promise) {
+      return promise.then(...withLogTook);
+    }
+    return promise;
   }
 
   let createdSpan: Span | undefined;
@@ -57,7 +91,7 @@ export async function withSpan<T>(
     createdSpan = agent.startSpan(name) ?? undefined;
 
     if (!createdSpan) {
-      return cb();
+      return cb().then(...withLogTook);
     }
   }
 
@@ -76,7 +110,7 @@ export async function withSpan<T>(
     }
 
     if (!span) {
-      return promise;
+      return promise.then(...withLogTook);
     }
 
     const targetedSpan = span;
@@ -98,6 +132,7 @@ export async function withSpan<T>(
     }
 
     return promise
+      .then(...withLogTook)
       .then((res) => {
         if (!targetedSpan.outcome || targetedSpan.outcome === 'unknown') {
           targetedSpan.outcome = 'success';

tsconfig.base.json

@@ -1332,8 +1332,12 @@
       "@kbn/observability-shared-plugin/*": ["x-pack/plugins/observability_solution/observability_shared/*"],
       "@kbn/observability-synthetics-test-data": ["x-pack/packages/observability/synthetics_test_data"],
       "@kbn/observability-synthetics-test-data/*": ["x-pack/packages/observability/synthetics_test_data/*"],
-      "@kbn/observability-utils": ["x-pack/packages/observability/observability_utils"],
-      "@kbn/observability-utils/*": ["x-pack/packages/observability/observability_utils/*"],
+      "@kbn/observability-utils-browser": ["x-pack/packages/observability/observability_utils/observability_utils_browser"],
+      "@kbn/observability-utils-browser/*": ["x-pack/packages/observability/observability_utils/observability_utils_browser/*"],
+      "@kbn/observability-utils-common": ["x-pack/packages/observability/observability_utils/observability_utils_common"],
+      "@kbn/observability-utils-common/*": ["x-pack/packages/observability/observability_utils/observability_utils_common/*"],
+      "@kbn/observability-utils-server": ["x-pack/packages/observability/observability_utils/observability_utils_server"],
+      "@kbn/observability-utils-server/*": ["x-pack/packages/observability/observability_utils/observability_utils_server/*"],
       "@kbn/oidc-provider-plugin": ["x-pack/test/security_api_integration/plugins/oidc_provider"],
       "@kbn/oidc-provider-plugin/*": ["x-pack/test/security_api_integration/plugins/oidc_provider/*"],
       "@kbn/open-telemetry-instrumented-plugin": ["test/common/plugins/otel_metrics"],

x-pack/packages/ai-infra/inference-common/index.ts

@@ -81,3 +81,5 @@ export {
   isInferenceInternalError,
   isInferenceRequestError,
 } from './src/errors';
+
+export { truncateList } from './src/truncate_list';

x-pack/packages/observability/observability_utils/hooks/use_abort_controller.ts → x-pack/packages/observability/observability_utils/observability_utils_browser/hooks/use_abort_controller.ts

@@ -18,6 +18,9 @@ export function useAbortController() {
 
   return {
     signal: controller.signal,
+    abort: () => {
+      controller.abort();
+    },
     refresh: () => {
       setController(() => new AbortController());
     },

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

@@ -17,12 +17,32 @@ export type AbortableAsyncState<T> = (T extends Promise<infer TReturn>
   ? State<TReturn>
   : State<T>) & { refresh: () => void };
 
+export type AbortableAsyncStateOf<T extends AbortableAsyncState<any>> =
+  T extends AbortableAsyncState<infer TResponse> ? Awaited<TResponse> : never;
+
+interface UseAbortableAsyncOptions<T> {
+  clearValueOnNext?: boolean;
+  unsetValueOnError?: boolean;
+  defaultValue?: () => T;
+  onError?: (error: Error) => void;
+}
+
+export type UseAbortableAsync<
+  TAdditionalParameters extends Record<string, any> = {},
+  TAdditionalOptions extends Record<string, any> = {}
+> = <T>(
+  fn: ({}: { signal: AbortSignal } & TAdditionalParameters) => T | Promise<T>,
+  deps: any[],
+  options?: UseAbortableAsyncOptions<T> & TAdditionalOptions
+) => AbortableAsyncState<T>;
+
 export function useAbortableAsync<T>(
   fn: ({}: { signal: AbortSignal }) => T | Promise<T>,
   deps: any[],
-  options?: { clearValueOnNext?: boolean; defaultValue?: () => T }
+  options?: UseAbortableAsyncOptions<T>
 ): AbortableAsyncState<T> {
   const clearValueOnNext = options?.clearValueOnNext;
+  const unsetValueOnError = options?.unsetValueOnError;
 
   const controllerRef = useRef(new AbortController());
 
@@ -43,6 +63,15 @@ export function useAbortableAsync<T>(
       setError(undefined);
     }
 
+    function handleError(err: Error) {
+      setError(err);
+      if (unsetValueOnError) {
+        setValue(undefined);
+      }
+      setLoading(false);
+      options?.onError?.(err);
+    }
+
     try {
       const response = fn({ signal: controller.signal });
       if (isPromise(response)) {
@@ -52,22 +81,15 @@ export function useAbortableAsync<T>(
             setError(undefined);
             setValue(nextValue);
           })
-          .catch((err) => {
-            setValue(undefined);
-            if (!controller.signal.aborted) {
-              setError(err);
-            }
-          })
+          .catch(handleError)
           .finally(() => setLoading(false));
       } else {
         setError(undefined);
         setValue(response);
         setLoading(false);
       }
     } catch (err) {
-      setValue(undefined);
-      setError(err);
-      setLoading(false);
+      handleError(err);
     }
 
     return () => {

x-pack/packages/observability/observability_utils/observability_utils_browser/hooks/use_date_range.ts

@@ -0,0 +1,63 @@
+/*
+ * 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 { TimeRange } from '@kbn/data-plugin/common';
+import { DataPublicPluginStart } from '@kbn/data-plugin/public';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+export function useDateRange({ data }: { data: DataPublicPluginStart }): {
+  timeRange: TimeRange;
+  absoluteTimeRange: {
+    start: number;
+    end: number;
+  };
+  setTimeRange: React.Dispatch<React.SetStateAction<TimeRange>>;
+} {
+  const timefilter = data.query.timefilter.timefilter;
+
+  const [timeRange, setTimeRange] = useState(() => timefilter.getTime());
+
+  const [absoluteTimeRange, setAbsoluteTimeRange] = useState(() => timefilter.getAbsoluteTime());
+
+  useEffect(() => {
+    const timeUpdateSubscription = timefilter.getTimeUpdate$().subscribe({
+      next: () => {
+        setTimeRange(() => timefilter.getTime());
+        setAbsoluteTimeRange(() => timefilter.getAbsoluteTime());
+      },
+    });
+
+    return () => {
+      timeUpdateSubscription.unsubscribe();
+    };
+  }, [timefilter]);
+
+  const setTimeRangeMemoized: React.Dispatch<React.SetStateAction<TimeRange>> = useCallback(
+    (nextOrCallback) => {
+      const val =
+        typeof nextOrCallback === 'function'
+          ? nextOrCallback(timefilter.getTime())
+          : nextOrCallback;
+
+      timefilter.setTime(val);
+    },
+    [timefilter]
+  );
+
+  const asEpoch = useMemo(() => {
+    return {
+      start: new Date(absoluteTimeRange.from).getTime(),
+      end: new Date(absoluteTimeRange.to).getTime(),
+    };
+  }, [absoluteTimeRange]);
+
+  return {
+    timeRange,
+    absoluteTimeRange: asEpoch,
+    setTimeRange: setTimeRangeMemoized,
+  };
+}

x-pack/packages/observability/observability_utils/observability_utils_browser/hooks/use_local_storage.ts

@@ -0,0 +1,60 @@
+/*
+ * 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 { useState, useEffect, useMemo, useCallback } from 'react';
+
+export function useLocalStorage<T>(key: string, defaultValue: T) {
+  // This is necessary to fix a race condition issue.
+  // It guarantees that the latest value will be always returned after the value is updated
+  const [storageUpdate, setStorageUpdate] = useState(0);
+
+  const item = useMemo(() => {
+    return getFromStorage(key, defaultValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key, storageUpdate, defaultValue]);
+
+  const saveToStorage = useCallback(
+    (value: T) => {
+      if (value === undefined) {
+        window.localStorage.removeItem(key);
+      } else {
+        window.localStorage.setItem(key, JSON.stringify(value));
+        setStorageUpdate(storageUpdate + 1);
+      }
+    },
+    [key, storageUpdate]
+  );
+
+  useEffect(() => {
+    function onUpdate(event: StorageEvent) {
+      if (event.key === key) {
+        setStorageUpdate(storageUpdate + 1);
+      }
+    }
+    window.addEventListener('storage', onUpdate);
+    return () => {
+      window.removeEventListener('storage', onUpdate);
+    };
+  }, [key, setStorageUpdate, storageUpdate]);
+
+  return useMemo(() => [item, saveToStorage] as const, [item, saveToStorage]);
+}
+
+function getFromStorage<T>(keyName: string, defaultValue: T) {
+  const storedItem = window.localStorage.getItem(keyName);
+
+  if (storedItem !== null) {
+    try {
+      return JSON.parse(storedItem) as T;
+    } catch (err) {
+      window.localStorage.removeItem(keyName);
+      // eslint-disable-next-line no-console
+      console.log(`Unable to decode: ${keyName}`);
+    }
+  }
+  return defaultValue;
+}

x-pack/packages/observability/observability_utils/observability_utils_browser/jest.config.js

@@ -0,0 +1,14 @@
+/*
+ * 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/observability/observability_utils/observability_utils_browser',
+  ],
+};

x-pack/packages/observability/observability_utils/observability_utils_browser/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-browser",
+  "id": "@kbn/observability-utils-browser",
+  "owner": "@elastic/observability-ui"
+}

x-pack/packages/observability/observability_utils/observability_utils_browser/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/observability-utils-browser",
+  "private": true,
+  "version": "1.0.0",
+  "license": "Elastic License 2.0"
+}

x-pack/packages/observability/observability_utils/observability_utils_browser/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/data-plugin",
+    "@kbn/core-ui-settings-browser",
+    "@kbn/std",
+  ]
+}