From f6279c7bffcdd5f60f4543d108b826194b667d4b Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Wed, 8 May 2024 19:41:29 +0200 Subject: [PATCH] use setScreenContext instead of PoC localStorage approach --- .../components/layout/discover_layout.tsx | 19 +++++- .../components/top_nav/discover_topnav.tsx | 24 ------- x-pack/packages/ml/local_storage/index.ts | 1 - .../src/use_local_storage_listener.ts | 63 ------------------- .../hooks/use_nav_control_screen_context.ts | 13 +--- 5 files changed, 19 insertions(+), 101 deletions(-) delete mode 100644 x-pack/packages/ml/local_storage/src/use_local_storage_listener.ts diff --git a/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx b/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx index 24c92fd192408de..b8143adc1ea3ca8 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx @@ -136,12 +136,27 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) { }); // The assistant is getting the state from the url correctly - // expect from the index pattern where we have only the dataview id + // except from the index pattern where we have only the dataview id. useEffect(() => { + const indexPattern = dataView?.getIndexPattern() || null; + const indexPatternTimeField = dataView?.getTimeField()?.spec.name || null; + const dataViewId = dataView?.id; + + let indexPatternText = + 'The current Elasticsearch index pattern could not be identified or the current page does not make use of an Elasticsearch index pattern.'; + + if (indexPattern !== null && indexPatternTimeField === null) { + indexPatternText = `The current Elasticsearch index is '${indexPattern}' and it has no time field specified.`; + } else if (indexPattern !== null && indexPatternTimeField !== null) { + indexPatternText = `The current Elasticsearch index is '${indexPattern}' and its time field is '${indexPatternTimeField}'.`; + } + + const dataViewIdText = dataViewId ? ` The Kibana Data View Id is ${dataViewId}.` : ''; + return observabilityAIAssistant?.service.setScreenContext({ screenDescription: `The user is looking at the Discover view on the ${ isPlainRecord ? 'ES|QL' : 'dataView' - } mode. The index pattern is the ${dataView.getIndexPattern()}`, + } mode. ${indexPatternText}${dataViewIdText}`, }); }, [dataView, isPlainRecord, observabilityAIAssistant?.service]); diff --git a/src/plugins/discover/public/application/main/components/top_nav/discover_topnav.tsx b/src/plugins/discover/public/application/main/components/top_nav/discover_topnav.tsx index 1d4ced234a27ff4..6222a909a4221fd 100644 --- a/src/plugins/discover/public/application/main/components/top_nav/discover_topnav.tsx +++ b/src/plugins/discover/public/application/main/components/top_nav/discover_topnav.tsx @@ -7,7 +7,6 @@ */ import React, { useCallback, useEffect, useMemo, useRef } from 'react'; -import { useLocalStorageListener } from '@kbn/ml-local-storage'; import type { AggregateQuery, Query, TimeRange } from '@kbn/es-query'; import { type DataView, DataViewType } from '@kbn/data-views-plugin/public'; import { DataViewPickerProps } from '@kbn/unified-search-plugin/public'; @@ -79,16 +78,6 @@ export const DiscoverTopNav = ({ const closeFieldEditor = useRef<() => void | undefined>(); const closeDataViewEditor = useRef<() => void | undefined>(); - const [lsIndex, saveLsIndex] = useLocalStorageListener('obs-ai-assistant-index', null); - const [lsDataViewId, saveLsDataViewId] = useLocalStorageListener( - 'obs-ai-assistant-data-view-id', - null - ); - const [lsIndexTimeField, saveLsIndexTimeField] = useLocalStorageListener( - 'obs-ai-assistant-index-time-field', - null - ); - useEffect(() => { return () => { // Make sure to close the editors when unmounting @@ -199,19 +188,6 @@ export const DiscoverTopNav = ({ topNavMenu, ]); - useEffect(() => { - saveLsIndex(dataView?.getIndexPattern() || null); - saveLsIndexTimeField(dataView?.getTimeField()?.spec.name || null); - saveLsDataViewId(dataView?.id); - - return () => { - saveLsIndex(null); - saveLsIndexTimeField(null); - saveLsDataViewId(null); - }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [dataView]); - const savedSearchId = useSavedSearch().id; const savedSearchHasChanged = useSavedSearchHasChanged(); const dataViewPickerProps: DataViewPickerProps = useMemo(() => { diff --git a/x-pack/packages/ml/local_storage/index.ts b/x-pack/packages/ml/local_storage/index.ts index c4a41bebe328b4b..f950f8791a34157 100644 --- a/x-pack/packages/ml/local_storage/index.ts +++ b/x-pack/packages/ml/local_storage/index.ts @@ -6,4 +6,3 @@ */ export { StorageContextProvider, useStorage } from './src/storage_context'; -export { useLocalStorageListener } from './src/use_local_storage_listener'; diff --git a/x-pack/packages/ml/local_storage/src/use_local_storage_listener.ts b/x-pack/packages/ml/local_storage/src/use_local_storage_listener.ts deleted file mode 100644 index 3bf82ba4edf7283..000000000000000 --- a/x-pack/packages/ml/local_storage/src/use_local_storage_listener.ts +++ /dev/null @@ -1,63 +0,0 @@ -/* - * 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 { useEffect, useState } from 'react'; - -const EVENT_NAME_PREFIX = 'local-storage-listener'; - -export function useLocalStorageListener(key: string, initValue: any) { - const [state, setState] = useState(() => { - const value = localStorage.getItem(key); - if (value !== null) { - try { - return JSON.parse(value); - } catch (e) { - return null; - } - } - - localStorage.setItem(key, JSON.stringify(initValue)); - window.dispatchEvent(new Event(`${EVENT_NAME_PREFIX}${key}`)); - return initValue; - }); - - useEffect(() => { - const value = localStorage.getItem(key); - if (value !== JSON.stringify(state)) { - localStorage.setItem(key, JSON.stringify(state)); - window.dispatchEvent(new Event(`${EVENT_NAME_PREFIX}${key}`)); - } - }, [key, state]); - - useEffect(() => { - const listenStorageChange = () => { - setState(() => { - const value = localStorage.getItem(key); - if (value !== null) { - try { - return JSON.parse(value); - } catch (e) { - return null; - } - } - - if (initValue !== null) { - localStorage.setItem(key, JSON.stringify(initValue)); - window.dispatchEvent(new Event(`${EVENT_NAME_PREFIX}${key}`)); - return initValue; - } - - return null; - }); - }; - window.addEventListener(`${EVENT_NAME_PREFIX}${key}`, listenStorageChange); - return () => window.removeEventListener(`${EVENT_NAME_PREFIX}${key}`, listenStorageChange); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return [state, setState]; -} diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/hooks/use_nav_control_screen_context.ts b/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/hooks/use_nav_control_screen_context.ts index c6e8f7a06ac6b04..10195bf38651efb 100644 --- a/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/hooks/use_nav_control_screen_context.ts +++ b/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/hooks/use_nav_control_screen_context.ts @@ -8,7 +8,6 @@ import { useEffect, useState } from 'react'; import datemath from '@elastic/datemath'; import moment from 'moment'; -import { useLocalStorageListener } from '@kbn/ml-local-storage'; import { useKibana } from './use_kibana'; import { useObservabilityAIAssistantAppService } from './use_observability_ai_assistant_app_service'; @@ -23,9 +22,6 @@ export function useNavControlScreenContext() { }, } = useKibana(); - const [lsIndex] = useLocalStorageListener('obs-ai-assistant-index', null); - const [lsDataViewId] = useLocalStorageListener('obs-ai-assistant-data-view-id', null); - const [lsIndexTimeField] = useLocalStorageListener('obs-ai-assistant-index-time-field', null); const { from, to } = data.query.timefilter.timefilter.getTime(); const [href, setHref] = useState(window.location.href); @@ -66,13 +62,8 @@ export function useNavControlScreenContext() { const start = datemath.parse(from)?.toISOString() ?? moment().subtract(1, 'day').toISOString(); const end = datemath.parse(to)?.toISOString() ?? moment().toISOString(); - const index = - lsIndex !== null && lsIndexTimeField !== null - ? `The current Elasticsearch index is '${lsIndex}' and its time field is '${lsIndexTimeField}'.` - : `The current Elasticsearch index could not be identified or the current page does not make use of an Elasticsearch index.`; - return service.setScreenContext({ - screenDescription: `The user is looking at ${href}. The current time range is ${start} - ${end}. ${index} The Kibana Data View Id is ${lsDataViewId}.`, + screenDescription: `The user is looking at ${href}. The current time range is ${start} - ${end}.`, }); - }, [service, from, to, href, lsDataViewId, lsIndex, lsIndexTimeField]); + }, [service, from, to, href]); }