({ + isCollapsed: true, + toggle: () => {}, + }) + } + isChartAvailable={undefined} + renderedFor="root" + /> + ), }; const component = mountWithIntl( @@ -128,15 +151,36 @@ describe('Discover main content component', () => { expect(component.find(DiscoverDocuments).prop('viewModeToggle')).toBeDefined(); }); - it('should not show DocumentViewModeToggle when isPlainRecord is true', async () => { + it('should include DocumentViewModeToggle when isPlainRecord is true', async () => { const component = await mountComponent({ isPlainRecord: true }); - expect(component.find(DiscoverDocuments).prop('viewModeToggle')).toBeUndefined(); + expect(component.find(DiscoverDocuments).prop('viewModeToggle')).toBeDefined(); }); it('should show DocumentViewModeToggle for Field Statistics', async () => { const component = await mountComponent({ viewMode: VIEW_MODE.AGGREGATED_LEVEL }); expect(component.find(DocumentViewModeToggle).exists()).toBe(true); }); + + it('should include PanelsToggle when chart is available', async () => { + const component = await mountComponent({ isChartAvailable: true }); + expect(component.find(PanelsToggle).prop('isChartAvailable')).toBe(true); + expect(component.find(PanelsToggle).prop('renderedFor')).toBe('tabs'); + expect(component.find(EuiHorizontalRule).exists()).toBe(true); + }); + + it('should include PanelsToggle when chart is available and hidden', async () => { + const component = await mountComponent({ isChartAvailable: true, hideChart: true }); + expect(component.find(PanelsToggle).prop('isChartAvailable')).toBe(true); + expect(component.find(PanelsToggle).prop('renderedFor')).toBe('tabs'); + expect(component.find(EuiHorizontalRule).exists()).toBe(false); + }); + + it('should include PanelsToggle when chart is not available', async () => { + const component = await mountComponent({ isChartAvailable: false }); + expect(component.find(PanelsToggle).prop('isChartAvailable')).toBe(false); + expect(component.find(PanelsToggle).prop('renderedFor')).toBe('tabs'); + expect(component.find(EuiHorizontalRule).exists()).toBe(false); + }); }); describe('Document view', () => { diff --git a/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx b/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx index 8b6ff5880d3dc..07a37e3ba1bc3 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx @@ -8,7 +8,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui'; import { DragDrop, type DropType, DropOverlayWrapper } from '@kbn/dom-drag-drop'; -import React, { useCallback, useMemo } from 'react'; +import React, { ReactElement, useCallback, useMemo } from 'react'; import { DataView } from '@kbn/data-views-plugin/common'; import { METRIC_TYPE } from '@kbn/analytics'; import { i18n } from '@kbn/i18n'; @@ -21,6 +21,7 @@ import { FieldStatisticsTab } from '../field_stats_table'; import { DiscoverDocuments } from './discover_documents'; import { DOCUMENTS_VIEW_CLICK, FIELD_STATISTICS_VIEW_CLICK } from '../field_stats_table/constants'; import { useAppStateSelector } from '../../services/discover_app_state_container'; +import type { PanelsToggleProps } from '../../../../components/panels_toggle'; const DROP_PROPS = { value: { @@ -44,6 +45,8 @@ export interface DiscoverMainContentProps { onFieldEdited: () => Promise; onDropFieldToTable?: () => void; columns: string[]; + panelsToggle: ReactElement; + isChartAvailable?: boolean; // it will be injected by UnifiedHistogram } export const DiscoverMainContent = ({ @@ -55,6 +58,8 @@ export const DiscoverMainContent = ({ columns, stateContainer, onDropFieldToTable, + panelsToggle, + isChartAvailable, }: DiscoverMainContentProps) => { const { trackUiMetric } = useDiscoverServices(); @@ -76,10 +81,27 @@ export const DiscoverMainContent = ({ const isDropAllowed = Boolean(onDropFieldToTable); const viewModeToggle = useMemo(() => { - return !isPlainRecord ? ( - - ) : undefined; - }, [viewMode, setDiscoverViewMode, isPlainRecord]); + return ( + + ); + }, [ + viewMode, + setDiscoverViewMode, + isPlainRecord, + stateContainer, + panelsToggle, + isChartAvailable, + ]); const showChart = useAppStateSelector((state) => !state.hideChart); @@ -99,7 +121,7 @@ export const DiscoverMainContent = ({ responsive={false} data-test-subj="dscMainContent" > - {showChart && } + {showChart && isChartAvailable && } {viewMode === VIEW_MODE.DOCUMENT_LEVEL ? ( { const wrapper = mount( ({ + isCollapsed: true, + toggle: () => {}, + }) + } sidebarPanel={
} mainPanel={
} /> @@ -69,7 +74,12 @@ describe('DiscoverResizableLayout', () => { const wrapper = mount( ({ + isCollapsed: true, + toggle: () => {}, + }) + } sidebarPanel={
} mainPanel={
} /> @@ -82,7 +92,12 @@ describe('DiscoverResizableLayout', () => { const wrapper = mount( ({ + isCollapsed: true, + toggle: () => {}, + }) + } sidebarPanel={
} mainPanel={
} /> @@ -95,8 +110,11 @@ describe('DiscoverResizableLayout', () => { const wrapper = mount( ({ + isCollapsed: false, + toggle: () => {}, + }) } sidebarPanel={
} mainPanel={
} @@ -110,8 +128,11 @@ describe('DiscoverResizableLayout', () => { const wrapper = mount( ({ + isCollapsed: false, + toggle: () => {}, + }) } sidebarPanel={
} mainPanel={
} @@ -125,8 +146,11 @@ describe('DiscoverResizableLayout', () => { const wrapper = mount( ({ + isCollapsed: true, + toggle: () => {}, + }) } sidebarPanel={
} mainPanel={
} @@ -140,8 +164,11 @@ describe('DiscoverResizableLayout', () => { const wrapper = mount( ({ + isCollapsed: false, + toggle: () => {}, + }) } sidebarPanel={
} mainPanel={
} @@ -157,8 +184,11 @@ describe('DiscoverResizableLayout', () => { const wrapper = mount( ({ + isCollapsed: false, + toggle: () => {}, + }) } sidebarPanel={
} mainPanel={
} diff --git a/src/plugins/discover/public/application/main/components/layout/discover_resizable_layout.tsx b/src/plugins/discover/public/application/main/components/layout/discover_resizable_layout.tsx index e0859617f0057..179914b9fb68a 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_resizable_layout.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_resizable_layout.tsx @@ -12,23 +12,23 @@ import { ResizableLayoutDirection, ResizableLayoutMode, } from '@kbn/resizable-layout'; -import type { UnifiedFieldListSidebarContainerApi } from '@kbn/unified-field-list'; import React, { ReactNode, useState } from 'react'; import { createHtmlPortalNode, InPortal, OutPortal } from 'react-reverse-portal'; import useLocalStorage from 'react-use/lib/useLocalStorage'; import useObservable from 'react-use/lib/useObservable'; -import { of } from 'rxjs'; +import { BehaviorSubject } from 'rxjs'; +import { SidebarToggleState } from '../../../types'; export const SIDEBAR_WIDTH_KEY = 'discover:sidebarWidth'; export const DiscoverResizableLayout = ({ container, - unifiedFieldListSidebarContainerApi, + sidebarToggleState$, sidebarPanel, mainPanel, }: { container: HTMLElement | null; - unifiedFieldListSidebarContainerApi: UnifiedFieldListSidebarContainerApi | null; + sidebarToggleState$: BehaviorSubject; sidebarPanel: ReactNode; mainPanel: ReactNode; }) => { @@ -45,10 +45,9 @@ export const DiscoverResizableLayout = ({ const minMainPanelWidth = euiTheme.base * 30; const [sidebarWidth, setSidebarWidth] = useLocalStorage(SIDEBAR_WIDTH_KEY, defaultSidebarWidth); - const isSidebarCollapsed = useObservable( - unifiedFieldListSidebarContainerApi?.isSidebarCollapsed$ ?? of(true), - true - ); + + const sidebarToggleState = useObservable(sidebarToggleState$); + const isSidebarCollapsed = sidebarToggleState?.isCollapsed ?? false; const isMobile = useIsWithinBreakpoints(['xs', 's']); const layoutMode = diff --git a/src/plugins/discover/public/application/main/components/layout/use_discover_histogram.test.tsx b/src/plugins/discover/public/application/main/components/layout/use_discover_histogram.test.tsx index ae73126afde88..068f21863de6c 100644 --- a/src/plugins/discover/public/application/main/components/layout/use_discover_histogram.test.tsx +++ b/src/plugins/discover/public/application/main/components/layout/use_discover_histogram.test.tsx @@ -261,20 +261,14 @@ describe('useDiscoverHistogram', () => { hook.result.current.ref(api); }); stateContainer.appState.update({ hideChart: true, interval: '1m', breakdownField: 'test' }); - expect(api.setTotalHits).toHaveBeenCalled(); + expect(api.setTotalHits).not.toHaveBeenCalled(); expect(api.setChartHidden).toHaveBeenCalled(); expect(api.setTimeInterval).toHaveBeenCalled(); expect(api.setBreakdownField).toHaveBeenCalled(); - expect(Object.keys(params ?? {})).toEqual([ - 'totalHitsStatus', - 'totalHitsResult', - 'breakdownField', - 'timeInterval', - 'chartHidden', - ]); + expect(Object.keys(params ?? {})).toEqual(['breakdownField', 'timeInterval', 'chartHidden']); }); - it('should exclude totalHitsStatus and totalHitsResult from Unified Histogram state updates after the first load', async () => { + it('should exclude totalHitsStatus and totalHitsResult from Unified Histogram state updates', async () => { const stateContainer = getStateContainer(); const { hook } = await renderUseDiscoverHistogram({ stateContainer }); const containerState = stateContainer.appState.getState(); @@ -290,20 +284,13 @@ describe('useDiscoverHistogram', () => { api.setChartHidden = jest.fn((chartHidden) => { params = { ...params, chartHidden }; }); - api.setTotalHits = jest.fn((p) => { - params = { ...params, ...p }; - }); const subject$ = new BehaviorSubject(state); api.state$ = subject$; act(() => { hook.result.current.ref(api); }); stateContainer.appState.update({ hideChart: true }); - expect(Object.keys(params ?? {})).toEqual([ - 'totalHitsStatus', - 'totalHitsResult', - 'chartHidden', - ]); + expect(Object.keys(params ?? {})).toEqual(['chartHidden']); params = {}; stateContainer.appState.update({ hideChart: false }); act(() => { @@ -434,14 +421,14 @@ describe('useDiscoverHistogram', () => { act(() => { hook.result.current.ref(api); }); - expect(api.refetch).not.toHaveBeenCalled(); + expect(api.refetch).toHaveBeenCalled(); act(() => { savedSearchFetch$.next({ options: { reset: false, fetchMore: false }, searchSessionId: '1234', }); }); - expect(api.refetch).toHaveBeenCalled(); + expect(api.refetch).toHaveBeenCalledTimes(2); }); it('should skip the next refetch when hideChart changes from true to false', async () => { @@ -459,6 +446,7 @@ describe('useDiscoverHistogram', () => { act(() => { hook.result.current.ref(api); }); + expect(api.refetch).toHaveBeenCalled(); act(() => { hook.rerender({ ...initialProps, hideChart: true }); }); @@ -471,7 +459,7 @@ describe('useDiscoverHistogram', () => { searchSessionId: '1234', }); }); - expect(api.refetch).not.toHaveBeenCalled(); + expect(api.refetch).toHaveBeenCalledTimes(1); }); it('should skip the next refetch when fetching more', async () => { @@ -489,13 +477,14 @@ describe('useDiscoverHistogram', () => { act(() => { hook.result.current.ref(api); }); + expect(api.refetch).toHaveBeenCalledTimes(1); act(() => { savedSearchFetch$.next({ options: { reset: false, fetchMore: true }, searchSessionId: '1234', }); }); - expect(api.refetch).not.toHaveBeenCalled(); + expect(api.refetch).toHaveBeenCalledTimes(1); act(() => { savedSearchFetch$.next({ @@ -503,7 +492,7 @@ describe('useDiscoverHistogram', () => { searchSessionId: '1234', }); }); - expect(api.refetch).toHaveBeenCalled(); + expect(api.refetch).toHaveBeenCalledTimes(2); }); }); diff --git a/src/plugins/discover/public/application/main/components/layout/use_discover_histogram.ts b/src/plugins/discover/public/application/main/components/layout/use_discover_histogram.ts index 764145d72aac1..871edb89d15aa 100644 --- a/src/plugins/discover/public/application/main/components/layout/use_discover_histogram.ts +++ b/src/plugins/discover/public/application/main/components/layout/use_discover_histogram.ts @@ -30,7 +30,6 @@ import { useDiscoverCustomization } from '../../../../customizations'; import { useDiscoverServices } from '../../../../hooks/use_discover_services'; import { getUiActions } from '../../../../kibana_services'; import { FetchStatus } from '../../../types'; -import { useDataState } from '../../hooks/use_data_state'; import type { InspectorAdapters } from '../../hooks/use_inspector'; import { checkHitCount, sendErrorTo } from '../../hooks/use_saved_search_messages'; import type { DiscoverStateContainer } from '../../services/discover_state'; @@ -68,9 +67,6 @@ export const useDiscoverHistogram = ({ breakdownField, } = stateContainer.appState.getState(); - const { fetchStatus: totalHitsStatus, result: totalHitsResult } = - savedSearchData$.totalHits$.getValue(); - return { localStorageKeyPrefix: 'discover', disableAutoFetching: true, @@ -78,11 +74,11 @@ export const useDiscoverHistogram = ({ chartHidden, timeInterval, breakdownField, - totalHitsStatus: totalHitsStatus.toString() as UnifiedHistogramFetchStatus, - totalHitsResult, + totalHitsStatus: UnifiedHistogramFetchStatus.loading, + totalHitsResult: undefined, }, }; - }, [savedSearchData$.totalHits$, stateContainer.appState]); + }, [stateContainer.appState]); /** * Sync Unified Histogram state with Discover state @@ -115,28 +111,6 @@ export const useDiscoverHistogram = ({ }; }, [inspectorAdapters, stateContainer.appState, unifiedHistogram?.state$]); - /** - * Override Unified Histgoram total hits with Discover partial results - */ - - const firstLoadComplete = useRef(false); - - const { fetchStatus: totalHitsStatus, result: totalHitsResult } = useDataState( - savedSearchData$.totalHits$ - ); - - useEffect(() => { - // We only want to show the partial results on the first load, - // or there will be a flickering effect as the loading spinner - // is quickly shown and hidden again on fetches - if (!firstLoadComplete.current) { - unifiedHistogram?.setTotalHits({ - totalHitsStatus: totalHitsStatus.toString() as UnifiedHistogramFetchStatus, - totalHitsResult, - }); - } - }, [totalHitsResult, totalHitsStatus, unifiedHistogram]); - /** * Sync URL query params with Unified Histogram */ @@ -181,7 +155,17 @@ export const useDiscoverHistogram = ({ return; } - const { recordRawType } = savedSearchData$.totalHits$.getValue(); + const { recordRawType, result: totalHitsResult } = savedSearchData$.totalHits$.getValue(); + + if ( + (status === UnifiedHistogramFetchStatus.loading || + status === UnifiedHistogramFetchStatus.uninitialized) && + totalHitsResult && + typeof result !== 'number' + ) { + // ignore the histogram initial loading state if discover state already has a total hits value + return; + } // Sync the totalHits$ observable with the unified histogram state savedSearchData$.totalHits$.next({ @@ -196,10 +180,6 @@ export const useDiscoverHistogram = ({ // Check the hits count to set a partial or no results state checkHitCount(savedSearchData$.main$, result); - - // Indicate the first load has completed so we don't show - // partial results on subsequent fetches - firstLoadComplete.current = true; } ); @@ -317,6 +297,11 @@ export const useDiscoverHistogram = ({ skipRefetch.current = false; }); + // triggering the initial request for total hits hook + if (!isPlainRecord && !skipRefetch.current) { + unifiedHistogram.refetch(); + } + return () => { subscription.unsubscribe(); }; @@ -326,14 +311,24 @@ export const useDiscoverHistogram = ({ const histogramCustomization = useDiscoverCustomization('unified_histogram'); + const servicesMemoized = useMemo(() => ({ ...services, uiActions: getUiActions() }), [services]); + + const filtersMemoized = useMemo( + () => [...(filters ?? []), ...customFilters], + [filters, customFilters] + ); + + // eslint-disable-next-line react-hooks/exhaustive-deps + const timeRangeMemoized = useMemo(() => timeRange, [timeRange?.from, timeRange?.to]); + return { ref, getCreationOptions, - services: { ...services, uiActions: getUiActions() }, + services: servicesMemoized, dataView: isPlainRecord ? textBasedDataView : dataView, query: isPlainRecord ? textBasedQuery : query, - filters: [...(filters ?? []), ...customFilters], - timeRange, + filters: filtersMemoized, + timeRange: timeRangeMemoized, relativeTimeRange, columns, onFilter: histogramCustomization?.onFilter, diff --git a/src/plugins/discover/public/application/main/components/sidebar/discover_sidebar_responsive.test.tsx b/src/plugins/discover/public/application/main/components/sidebar/discover_sidebar_responsive.test.tsx index c4558f4590c5b..0e5e9838f420b 100644 --- a/src/plugins/discover/public/application/main/components/sidebar/discover_sidebar_responsive.test.tsx +++ b/src/plugins/discover/public/application/main/components/sidebar/discover_sidebar_responsive.test.tsx @@ -13,13 +13,13 @@ import { EuiProgress } from '@elastic/eui'; import { getDataTableRecords, realHits } from '../../../../__fixtures__/real_hits'; import { act } from 'react-dom/test-utils'; import { mountWithIntl } from '@kbn/test-jest-helpers'; -import React, { useState } from 'react'; +import React from 'react'; import { DiscoverSidebarResponsive, DiscoverSidebarResponsiveProps, } from './discover_sidebar_responsive'; import { DiscoverServices } from '../../../../build_services'; -import { FetchStatus } from '../../../types'; +import { FetchStatus, SidebarToggleState } from '../../../types'; import { AvailableFields$, DataDocuments$, @@ -37,7 +37,6 @@ import { buildDataTableRecord } from '@kbn/discover-utils'; import type { DataTableRecord } from '@kbn/discover-utils/types'; import type { DiscoverCustomizationId } from '../../../../customizations/customization_service'; import type { SearchBarCustomization } from '../../../../customizations'; -import type { UnifiedFieldListSidebarContainerApi } from '@kbn/unified-field-list'; const mockSearchBarCustomization: SearchBarCustomization = { id: 'search_bar', @@ -169,8 +168,10 @@ function getCompProps(options?: { hits?: DataTableRecord[] }): DiscoverSidebarRe trackUiMetric: jest.fn(), onFieldEdited: jest.fn(), onDataViewCreated: jest.fn(), - unifiedFieldListSidebarContainerApi: null, - setUnifiedFieldListSidebarContainerApi: jest.fn(), + sidebarToggleState$: new BehaviorSubject({ + isCollapsed: false, + toggle: () => {}, + }), }; } @@ -202,21 +203,10 @@ async function mountComponent( mockedServices.data.query.getState = jest.fn().mockImplementation(() => appState.getState()); await act(async () => { - const SidebarWrapper = () => { - const [api, setApi] = useState(null); - return ( - - ); - }; - comp = mountWithIntl( - + ); diff --git a/src/plugins/discover/public/application/main/components/sidebar/discover_sidebar_responsive.tsx b/src/plugins/discover/public/application/main/components/sidebar/discover_sidebar_responsive.tsx index 3177adefdf49b..b820b63b461b3 100644 --- a/src/plugins/discover/public/application/main/components/sidebar/discover_sidebar_responsive.tsx +++ b/src/plugins/discover/public/application/main/components/sidebar/discover_sidebar_responsive.tsx @@ -6,9 +6,13 @@ * Side Public License, v 1. */ -import React, { useCallback, useEffect, useMemo, useReducer, useRef } from 'react'; +import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'; import { UiCounterMetricType } from '@kbn/analytics'; import { i18n } from '@kbn/i18n'; +import { css } from '@emotion/react'; +import { EuiFlexGroup, EuiFlexItem, EuiHideFor, useEuiTheme } from '@elastic/eui'; +import useObservable from 'react-use/lib/useObservable'; +import { BehaviorSubject, of } from 'rxjs'; import type { DataView, DataViewField } from '@kbn/data-views-plugin/public'; import { DataViewPicker } from '@kbn/unified-search-plugin/public'; import { @@ -25,7 +29,7 @@ import { RecordRawType, } from '../../services/discover_data_state_container'; import { calcFieldCounts } from '../../utils/calc_field_counts'; -import { FetchStatus } from '../../../types'; +import { FetchStatus, SidebarToggleState } from '../../../types'; import { DISCOVER_TOUR_STEP_ANCHOR_IDS } from '../../../../components/discover_tour'; import { getUiActions } from '../../../../kibana_services'; import { @@ -134,8 +138,7 @@ export interface DiscoverSidebarResponsiveProps { */ fieldListVariant?: UnifiedFieldListSidebarContainerProps['variant']; - unifiedFieldListSidebarContainerApi: UnifiedFieldListSidebarContainerApi | null; - setUnifiedFieldListSidebarContainerApi: (api: UnifiedFieldListSidebarContainerApi) => void; + sidebarToggleState$: BehaviorSubject; } /** @@ -144,6 +147,9 @@ export interface DiscoverSidebarResponsiveProps { * Mobile: Data view selector is visible and a button to trigger a flyout with all elements */ export function DiscoverSidebarResponsive(props: DiscoverSidebarResponsiveProps) { + const [unifiedFieldListSidebarContainerApi, setUnifiedFieldListSidebarContainerApi] = + useState(null); + const { euiTheme } = useEuiTheme(); const services = useDiscoverServices(); const { fieldListVariant, @@ -156,8 +162,7 @@ export function DiscoverSidebarResponsive(props: DiscoverSidebarResponsiveProps) onChangeDataView, onAddField, onRemoveField, - unifiedFieldListSidebarContainerApi, - setUnifiedFieldListSidebarContainerApi, + sidebarToggleState$, } = props; const [sidebarState, dispatchSidebarStateAction] = useReducer( discoverSidebarReducer, @@ -373,27 +378,55 @@ export function DiscoverSidebarResponsive(props: DiscoverSidebarResponsiveProps) [onRemoveField] ); - if (!selectedDataView) { - return null; - } + const isSidebarCollapsed = useObservable( + unifiedFieldListSidebarContainerApi?.sidebarVisibility.isCollapsed$ ?? of(false), + false + ); + + useEffect(() => { + sidebarToggleState$.next({ + isCollapsed: isSidebarCollapsed, + toggle: unifiedFieldListSidebarContainerApi?.sidebarVisibility.toggle, + }); + }, [isSidebarCollapsed, unifiedFieldListSidebarContainerApi, sidebarToggleState$]); return ( - + + + {selectedDataView ? ( + + ) : null} + + + + + ); } diff --git a/src/plugins/discover/public/application/main/utils/fetch_all.ts b/src/plugins/discover/public/application/main/utils/fetch_all.ts index 289ad9e336b04..16f2a1c50de56 100644 --- a/src/plugins/discover/public/application/main/utils/fetch_all.ts +++ b/src/plugins/discover/public/application/main/utils/fetch_all.ts @@ -89,7 +89,7 @@ export function fetchAll( // Mark all subjects as loading sendLoadingMsg(dataSubjects.main$, { recordRawType }); sendLoadingMsg(dataSubjects.documents$, { recordRawType, query }); - sendLoadingMsg(dataSubjects.totalHits$, { recordRawType }); + // histogram will send `loading` for totalHits$ // Start fetching all required requests const response = @@ -116,9 +116,12 @@ export function fetchAll( meta: { fetchType }, }); } + + const currentTotalHits = dataSubjects.totalHits$.getValue(); // If the total hits (or chart) query is still loading, emit a partial // hit count that's at least our retrieved document count - if (dataSubjects.totalHits$.getValue().fetchStatus === FetchStatus.LOADING) { + if (currentTotalHits.fetchStatus === FetchStatus.LOADING && !currentTotalHits.result) { + // trigger `partial` only for the first request (if no total hits value yet) dataSubjects.totalHits$.next({ fetchStatus: FetchStatus.PARTIAL, result: records.length, diff --git a/src/plugins/discover/public/application/types.ts b/src/plugins/discover/public/application/types.ts index 70773d2db521f..d3f8ccd8f990d 100644 --- a/src/plugins/discover/public/application/types.ts +++ b/src/plugins/discover/public/application/types.ts @@ -38,3 +38,8 @@ export interface RecordsFetchResponse { textBasedHeaderWarning?: string; interceptedWarnings?: SearchResponseWarning[]; } + +export interface SidebarToggleState { + isCollapsed: boolean; + toggle: undefined | ((isCollapsed: boolean) => void); +} diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx index 8d4e9bbee4ae1..485a3d2f8a4fe 100644 --- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx +++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx @@ -7,8 +7,8 @@ */ import React from 'react'; +import { EuiButtonIcon, EuiContextMenuItem, EuiPopover } from '@elastic/eui'; import { findTestSubject } from '@elastic/eui/lib/test'; -import { EuiFlexItem } from '@elastic/eui'; import { mountWithIntl } from '@kbn/test-jest-helpers'; import type { Query, AggregateQuery } from '@kbn/es-query'; import { DiscoverGridFlyout, DiscoverGridFlyoutProps } from './discover_grid_flyout'; @@ -36,6 +36,22 @@ jest.mock('../../customizations', () => ({ useDiscoverCustomization: jest.fn(), })); +let mockBreakpointSize: string | null = null; + +jest.mock('@elastic/eui', () => { + const original = jest.requireActual('@elastic/eui'); + return { + ...original, + useIsWithinBreakpoints: jest.fn((breakpoints: string[]) => { + if (mockBreakpointSize && breakpoints.includes(mockBreakpointSize)) { + return true; + } + + return original.useIsWithinBreakpoints(breakpoints); + }), + }; +}); + const waitNextTick = () => new Promise((resolve) => setTimeout(resolve, 0)); const waitNextUpdate = async (component: ReactWrapper) => { @@ -227,7 +243,7 @@ describe('Discover flyout', function () { const singleDocumentView = findTestSubject(component, 'docTableRowAction'); expect(singleDocumentView.length).toBeFalsy(); const flyoutTitle = findTestSubject(component, 'docTableRowDetailsTitle'); - expect(flyoutTitle.text()).toBe('Expanded row'); + expect(flyoutTitle.text()).toBe('Row'); }); describe('with applied customizations', () => { @@ -246,17 +262,32 @@ describe('Discover flyout', function () { describe('when actions are customized', () => { it('should display actions added by getActionItems', async () => { + mockBreakpointSize = 'xl'; mockFlyoutCustomization.actions = { getActionItems: jest.fn(() => [ { id: 'action-item-1', enabled: true, - Content: () => Action 1, + label: 'Action 1', + iconType: 'document', + dataTestSubj: 'customActionItem1', + onClick: jest.fn(), }, { id: 'action-item-2', enabled: true, - Content: () => Action 2, + label: 'Action 2', + iconType: 'document', + dataTestSubj: 'customActionItem2', + onClick: jest.fn(), + }, + { + id: 'action-item-3', + enabled: false, + label: 'Action 3', + iconType: 'document', + dataTestSubj: 'customActionItem3', + onClick: jest.fn(), }, ]), }; @@ -268,6 +299,88 @@ describe('Discover flyout', function () { expect(action1.text()).toBe('Action 1'); expect(action2.text()).toBe('Action 2'); + expect(findTestSubject(component, 'customActionItem3').exists()).toBe(false); + mockBreakpointSize = null; + }); + + it('should display multiple actions added by getActionItems', async () => { + mockFlyoutCustomization.actions = { + getActionItems: jest.fn(() => + Array.from({ length: 5 }, (_, i) => ({ + id: `action-item-${i}`, + enabled: true, + label: `Action ${i}`, + iconType: 'document', + dataTestSubj: `customActionItem${i}`, + onClick: jest.fn(), + })) + ), + }; + + const { component } = await mountComponent({}); + expect( + findTestSubject(component, 'docViewerFlyoutActions') + .find(EuiButtonIcon) + .map((button) => button.prop('data-test-subj')) + ).toEqual([ + 'docTableRowAction', + 'customActionItem0', + 'customActionItem1', + 'docViewerMoreFlyoutActionsButton', + ]); + + act(() => { + findTestSubject(component, 'docViewerMoreFlyoutActionsButton').simulate('click'); + }); + + component.update(); + + expect( + component + .find(EuiPopover) + .find(EuiContextMenuItem) + .map((button) => button.prop('data-test-subj')) + ).toEqual(['customActionItem2', 'customActionItem3', 'customActionItem4']); + }); + + it('should display multiple actions added by getActionItems in mobile view', async () => { + mockBreakpointSize = 's'; + + mockFlyoutCustomization.actions = { + getActionItems: jest.fn(() => + Array.from({ length: 3 }, (_, i) => ({ + id: `action-item-${i}`, + enabled: true, + label: `Action ${i}`, + iconType: 'document', + dataTestSubj: `customActionItem${i}`, + onClick: jest.fn(), + })) + ), + }; + + const { component } = await mountComponent({}); + expect(findTestSubject(component, 'docViewerFlyoutActions').length).toBe(0); + + act(() => { + findTestSubject(component, 'docViewerMobileActionsButton').simulate('click'); + }); + + component.update(); + + expect( + component + .find(EuiPopover) + .find(EuiContextMenuItem) + .map((button) => button.prop('data-test-subj')) + ).toEqual([ + 'docTableRowAction', + 'customActionItem0', + 'customActionItem1', + 'customActionItem2', + ]); + + mockBreakpointSize = null; }); it('should allow disabling default actions', async () => { diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx index 58d60466e17b0..40d47e1292f92 100644 --- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx +++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx @@ -8,6 +8,7 @@ import React, { useMemo, useCallback } from 'react'; import { i18n } from '@kbn/i18n'; +import { css } from '@emotion/react'; import type { DataView } from '@kbn/data-views-plugin/public'; import { EuiFlexGroup, @@ -29,6 +30,7 @@ import { useDiscoverServices } from '../../hooks/use_discover_services'; import { isTextBasedQuery } from '../../application/main/utils/is_text_based_query'; import { useFlyoutActions } from './use_flyout_actions'; import { useDiscoverCustomization } from '../../customizations'; +import { DiscoverGridFlyoutActions } from './discover_grid_flyout_actions'; export interface DiscoverGridFlyoutProps { savedSearchId?: string; @@ -189,14 +191,13 @@ export function DiscoverGridFlyout({ ); const defaultFlyoutTitle = isPlainRecord - ? i18n.translate('discover.grid.tableRow.textBasedDetailHeading', { - defaultMessage: 'Expanded row', + ? i18n.translate('discover.grid.tableRow.docViewerTextBasedDetailHeading', { + defaultMessage: 'Row', }) - : i18n.translate('discover.grid.tableRow.detailHeading', { - defaultMessage: 'Expanded document', + : i18n.translate('discover.grid.tableRow.docViewerDetailHeading', { + defaultMessage: 'Document', }); const flyoutTitle = flyoutCustomization?.title ?? defaultFlyoutTitle; - const flyoutSize = flyoutCustomization?.size ?? 'm'; return ( @@ -209,17 +210,24 @@ export function DiscoverGridFlyout({ ownFocus={false} > - -

{flyoutTitle}

- - - - {!isPlainRecord && - flyoutActions.map((action) => action.enabled && )} + + +

{flyoutTitle}

+ + {activePage !== -1 && ( )} + {isPlainRecord || !flyoutActions.length ? null : ( + <> + + + + )} {bodyContent} diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx new file mode 100644 index 0000000000000..a9b168ef7ae8e --- /dev/null +++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx @@ -0,0 +1,201 @@ +/* + * 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 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React, { useState } from 'react'; +import { i18n } from '@kbn/i18n'; +import { slice } from 'lodash'; +import { css } from '@emotion/react'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiPopover, + EuiContextMenuPanel, + EuiContextMenuItem, + EuiContextMenuItemIcon, + useIsWithinBreakpoints, + EuiText, + EuiButtonEmpty, + EuiButtonIcon, + EuiPopoverProps, + EuiToolTip, + useEuiTheme, +} from '@elastic/eui'; +import type { FlyoutActionItem } from '../../customizations'; + +const MAX_VISIBLE_ACTIONS_BEFORE_THE_FOLD = 3; + +export interface DiscoverGridFlyoutActionsProps { + flyoutActions: FlyoutActionItem[]; +} + +export function DiscoverGridFlyoutActions({ flyoutActions }: DiscoverGridFlyoutActionsProps) { + const { euiTheme } = useEuiTheme(); + const [isMoreFlyoutActionsPopoverOpen, setIsMoreFlyoutActionsPopoverOpen] = + useState(false); + const isMobileScreen = useIsWithinBreakpoints(['xs', 's']); + const isLargeScreen = useIsWithinBreakpoints(['xl']); + + if (isMobileScreen) { + return ( + setIsMoreFlyoutActionsPopoverOpen(!isMoreFlyoutActionsPopoverOpen)} + > + {i18n.translate('discover.grid.tableRow.mobileFlyoutActionsButton', { + defaultMessage: 'Actions', + })} + + } + isOpen={isMoreFlyoutActionsPopoverOpen} + closePopover={() => setIsMoreFlyoutActionsPopoverOpen(false)} + /> + ); + } + + const visibleFlyoutActions = slice(flyoutActions, 0, MAX_VISIBLE_ACTIONS_BEFORE_THE_FOLD); + const remainingFlyoutActions = slice( + flyoutActions, + MAX_VISIBLE_ACTIONS_BEFORE_THE_FOLD, + flyoutActions.length + ); + const showFlyoutIconsOnly = + remainingFlyoutActions.length > 0 || (!isLargeScreen && visibleFlyoutActions.length > 1); + + return ( + + + + + {i18n.translate('discover.grid.tableRow.actionsLabel', { + defaultMessage: 'Actions', + })} + : + + + + {visibleFlyoutActions.map((action) => ( + + {showFlyoutIconsOnly ? ( + + + + ) : ( + + {/* eslint-disable-next-line @elastic/eui/href-or-on-click */} + + {action.label} + + + )} + + ))} + {remainingFlyoutActions.length > 0 && ( + + + setIsMoreFlyoutActionsPopoverOpen(!isMoreFlyoutActionsPopoverOpen)} + /> + + } + isOpen={isMoreFlyoutActionsPopoverOpen} + closePopover={() => setIsMoreFlyoutActionsPopoverOpen(false)} + /> + + )} + + ); +} + +function FlyoutActionsPopover({ + flyoutActions, + button, + isOpen, + closePopover, +}: { + flyoutActions: DiscoverGridFlyoutActionsProps['flyoutActions']; + button: EuiPopoverProps['button']; + isOpen: EuiPopoverProps['isOpen']; + closePopover: EuiPopoverProps['closePopover']; +}) { + return ( + + ( + + {action.label} + + ))} + /> + + ); +} diff --git a/src/plugins/discover/public/components/discover_grid_flyout/use_flyout_actions.tsx b/src/plugins/discover/public/components/discover_grid_flyout/use_flyout_actions.tsx index fb364995b1c21..e0df28e468003 100644 --- a/src/plugins/discover/public/components/discover_grid_flyout/use_flyout_actions.tsx +++ b/src/plugins/discover/public/components/discover_grid_flyout/use_flyout_actions.tsx @@ -6,35 +6,18 @@ * Side Public License, v 1. */ -import React from 'react'; -import { - EuiButtonEmpty, - EuiFlexGroup, - EuiFlexItem, - EuiHideFor, - EuiIconTip, - EuiText, -} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { FlyoutCustomization } from '../../customizations'; +import { FlyoutActionItem, FlyoutCustomization } from '../../customizations'; import { UseNavigationProps, useNavigationProps } from '../../hooks/use_navigation_props'; interface UseFlyoutActionsParams extends UseNavigationProps { actions?: FlyoutCustomization['actions']; } -interface FlyoutActionProps { - onClick: React.MouseEventHandler; - href: string; -} - -const staticViewDocumentItem = { - id: 'viewDocument', - enabled: true, - Content: () => , -}; - -export const useFlyoutActions = ({ actions, ...props }: UseFlyoutActionsParams) => { +export const useFlyoutActions = ({ + actions, + ...props +}: UseFlyoutActionsParams): { flyoutActions: FlyoutActionItem[] } => { const { dataView } = props; const { singleDocHref, contextViewHref, onOpenSingleDoc, onOpenContextView } = useNavigationProps(props); @@ -45,95 +28,35 @@ export const useFlyoutActions = ({ actions, ...props }: UseFlyoutActionsParams) } = actions?.defaultActions ?? {}; const customActions = [...(actions?.getActionItems?.() ?? [])]; - const flyoutActions = [ + const flyoutActions: FlyoutActionItem[] = [ { id: 'singleDocument', enabled: !viewSingleDocument.disabled, - Content: () => , + dataTestSubj: 'docTableRowAction', + iconType: 'document', + href: singleDocHref, + onClick: onOpenSingleDoc, + label: i18n.translate('discover.grid.tableRow.viewSingleDocumentLinkLabel', { + defaultMessage: 'View single document', + }), }, { id: 'surroundingDocument', enabled: Boolean(!viewSurroundingDocument.disabled && dataView.isTimeBased() && dataView.id), - Content: () => , + dataTestSubj: 'docTableRowAction', + iconType: 'documents', + href: contextViewHref, + onClick: onOpenContextView, + label: i18n.translate('discover.grid.tableRow.viewSurroundingDocumentsLinkLabel', { + defaultMessage: 'View surrounding documents', + }), + helpText: i18n.translate('discover.grid.tableRow.viewSurroundingDocumentsHover', { + defaultMessage: + 'Inspect documents that occurred before and after this document. Only pinned filters remain active in the Surrounding documents view.', + }), }, ...customActions, ]; - const hasEnabledActions = flyoutActions.some((action) => action.enabled); - - if (hasEnabledActions) { - flyoutActions.unshift(staticViewDocumentItem); - } - - return { flyoutActions, hasEnabledActions }; -}; - -const ViewDocument = () => { - return ( - - - - - {i18n.translate('discover.grid.tableRow.viewText', { - defaultMessage: 'View:', - })} - - - - - ); -}; - -const SingleDocument = (props: FlyoutActionProps) => { - return ( - - - {i18n.translate('discover.grid.tableRow.viewSingleDocumentLinkTextSimple', { - defaultMessage: 'Single document', - })} - - - ); -}; - -const SurroundingDocuments = (props: FlyoutActionProps) => { - return ( - - - - {i18n.translate('discover.grid.tableRow.viewSurroundingDocumentsLinkTextSimple', { - defaultMessage: 'Surrounding documents', - })} - - - - - - - ); + return { flyoutActions: flyoutActions.filter((action) => action.enabled) }; }; diff --git a/src/plugins/discover/public/components/hits_counter/hits_counter.test.tsx b/src/plugins/discover/public/components/hits_counter/hits_counter.test.tsx new file mode 100644 index 0000000000000..8d84cdcef5a0c --- /dev/null +++ b/src/plugins/discover/public/components/hits_counter/hits_counter.test.tsx @@ -0,0 +1,96 @@ +/* + * 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 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React from 'react'; +import { mountWithIntl } from '@kbn/test-jest-helpers'; +import { HitsCounter, HitsCounterMode } from './hits_counter'; +import { findTestSubject } from '@elastic/eui/lib/test'; +import { EuiLoadingSpinner } from '@elastic/eui'; +import { BehaviorSubject } from 'rxjs'; +import { getDiscoverStateMock } from '../../__mocks__/discover_state.mock'; +import { DataTotalHits$ } from '../../application/main/services/discover_data_state_container'; +import { FetchStatus } from '../../application/types'; + +describe('hits counter', function () { + it('expect to render the number of hits', function () { + const stateContainer = getDiscoverStateMock({ isTimeBased: true }); + stateContainer.dataState.data$.totalHits$ = new BehaviorSubject({ + fetchStatus: FetchStatus.COMPLETE, + result: 1, + }) as DataTotalHits$; + const component1 = mountWithIntl( + + ); + expect(findTestSubject(component1, 'discoverQueryHits').text()).toBe('1'); + expect(findTestSubject(component1, 'discoverQueryTotalHits').text()).toBe('1'); + expect(component1.find('[data-test-subj="discoverQueryHits"]').length).toBe(1); + + const component2 = mountWithIntl( + + ); + expect(findTestSubject(component2, 'discoverQueryHits').text()).toBe('1'); + expect(findTestSubject(component2, 'discoverQueryTotalHits').text()).toBe('1 result'); + expect(component2.find('[data-test-subj="discoverQueryHits"]').length).toBe(1); + }); + + it('expect to render 1,899 hits if 1899 hits given', function () { + const stateContainer = getDiscoverStateMock({ isTimeBased: true }); + stateContainer.dataState.data$.totalHits$ = new BehaviorSubject({ + fetchStatus: FetchStatus.COMPLETE, + result: 1899, + }) as DataTotalHits$; + const component1 = mountWithIntl( + + ); + expect(findTestSubject(component1, 'discoverQueryHits').text()).toBe('1,899'); + expect(findTestSubject(component1, 'discoverQueryTotalHits').text()).toBe('1,899'); + + const component2 = mountWithIntl( + + ); + expect(findTestSubject(component2, 'discoverQueryHits').text()).toBe('1,899'); + expect(findTestSubject(component2, 'discoverQueryTotalHits').text()).toBe('1,899 results'); + }); + + it('should render a EuiLoadingSpinner when status is partial', () => { + const stateContainer = getDiscoverStateMock({ isTimeBased: true }); + stateContainer.dataState.data$.totalHits$ = new BehaviorSubject({ + fetchStatus: FetchStatus.PARTIAL, + result: 2, + }) as DataTotalHits$; + const component = mountWithIntl( + + ); + expect(component.find(EuiLoadingSpinner).length).toBe(1); + }); + + it('should render discoverQueryHitsPartial when status is partial', () => { + const stateContainer = getDiscoverStateMock({ isTimeBased: true }); + stateContainer.dataState.data$.totalHits$ = new BehaviorSubject({ + fetchStatus: FetchStatus.PARTIAL, + result: 2, + }) as DataTotalHits$; + const component = mountWithIntl( + + ); + expect(component.find('[data-test-subj="discoverQueryHitsPartial"]').length).toBe(1); + expect(findTestSubject(component, 'discoverQueryTotalHits').text()).toBe('≥2 results'); + }); + + it('should not render if loading', () => { + const stateContainer = getDiscoverStateMock({ isTimeBased: true }); + stateContainer.dataState.data$.totalHits$ = new BehaviorSubject({ + fetchStatus: FetchStatus.LOADING, + result: undefined, + }) as DataTotalHits$; + const component = mountWithIntl( + + ); + expect(component.isEmptyRender()).toBe(true); + }); +}); diff --git a/src/plugins/discover/public/components/hits_counter/hits_counter.tsx b/src/plugins/discover/public/components/hits_counter/hits_counter.tsx new file mode 100644 index 0000000000000..be3e819a5e073 --- /dev/null +++ b/src/plugins/discover/public/components/hits_counter/hits_counter.tsx @@ -0,0 +1,117 @@ +/* + * 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 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiText, EuiLoadingSpinner } from '@elastic/eui'; +import { FormattedMessage, FormattedNumber } from '@kbn/i18n-react'; +import { i18n } from '@kbn/i18n'; +import { css } from '@emotion/react'; +import type { DiscoverStateContainer } from '../../application/main/services/discover_state'; +import { FetchStatus } from '../../application/types'; +import { useDataState } from '../../application/main/hooks/use_data_state'; + +export enum HitsCounterMode { + standalone = 'standalone', + appended = 'appended', +} + +export interface HitsCounterProps { + mode: HitsCounterMode; + stateContainer: DiscoverStateContainer; +} + +export const HitsCounter: React.FC = ({ mode, stateContainer }) => { + const totalHits$ = stateContainer.dataState.data$.totalHits$; + const totalHitsState = useDataState(totalHits$); + const hitsTotal = totalHitsState.result; + const hitsStatus = totalHitsState.fetchStatus; + + if (!hitsTotal && hitsStatus === FetchStatus.LOADING) { + return null; + } + + const formattedHits = ( + + + + ); + + const hitsCounterCss = css` + display: inline-flex; + `; + const hitsCounterTextCss = css` + overflow: hidden; + `; + + const element = ( + + + + + {hitsStatus === FetchStatus.PARTIAL && + (mode === HitsCounterMode.standalone ? ( + + ) : ( + + ))} + {hitsStatus !== FetchStatus.PARTIAL && + (mode === HitsCounterMode.standalone ? ( + + ) : ( + formattedHits + ))} + + + + {hitsStatus === FetchStatus.PARTIAL && ( + + + + )} + + ); + + return mode === HitsCounterMode.appended ? ( + <> + {' ('} + {element} + {')'} + + ) : ( + element + ); +}; diff --git a/src/plugins/discover/public/components/hits_counter/index.ts b/src/plugins/discover/public/components/hits_counter/index.ts new file mode 100644 index 0000000000000..8d7f69c3af275 --- /dev/null +++ b/src/plugins/discover/public/components/hits_counter/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 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export { HitsCounter, HitsCounterMode } from './hits_counter'; diff --git a/src/plugins/discover/public/components/panels_toggle/index.ts b/src/plugins/discover/public/components/panels_toggle/index.ts new file mode 100644 index 0000000000000..7586567d3665c --- /dev/null +++ b/src/plugins/discover/public/components/panels_toggle/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 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export { PanelsToggle, type PanelsToggleProps } from './panels_toggle'; diff --git a/src/plugins/discover/public/components/panels_toggle/panels_toggle.test.tsx b/src/plugins/discover/public/components/panels_toggle/panels_toggle.test.tsx new file mode 100644 index 0000000000000..54a41fbb9255b --- /dev/null +++ b/src/plugins/discover/public/components/panels_toggle/panels_toggle.test.tsx @@ -0,0 +1,206 @@ +/* + * 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 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React from 'react'; +import { mountWithIntl } from '@kbn/test-jest-helpers'; +import { findTestSubject } from '@elastic/eui/lib/test'; +import { BehaviorSubject } from 'rxjs'; +import { getDiscoverStateMock } from '../../__mocks__/discover_state.mock'; +import { PanelsToggle, type PanelsToggleProps } from './panels_toggle'; +import { DiscoverAppStateProvider } from '../../application/main/services/discover_app_state_container'; +import { SidebarToggleState } from '../../application/types'; + +describe('Panels toggle component', () => { + const mountComponent = ({ + sidebarToggleState$, + isChartAvailable, + renderedFor, + hideChart, + }: Omit & { hideChart: boolean }) => { + const stateContainer = getDiscoverStateMock({ isTimeBased: true }); + const appStateContainer = stateContainer.appState; + appStateContainer.set({ + hideChart, + }); + + return mountWithIntl( + + + + ); + }; + + describe('inside histogram toolbar', function () { + it('should render correctly when sidebar is visible and histogram is visible', () => { + const sidebarToggleState$ = new BehaviorSubject({ + isCollapsed: false, + toggle: jest.fn(), + }); + const component = mountComponent({ + hideChart: false, + isChartAvailable: undefined, + renderedFor: 'histogram', + sidebarToggleState$, + }); + expect(findTestSubject(component, 'dscShowSidebarButton').exists()).toBe(false); + expect(findTestSubject(component, 'dscHideHistogramButton').exists()).toBe(true); + }); + + it('should render correctly when sidebar is collapsed and histogram is visible', () => { + const sidebarToggleState$ = new BehaviorSubject({ + isCollapsed: true, + toggle: jest.fn(), + }); + const component = mountComponent({ + hideChart: false, + isChartAvailable: undefined, + renderedFor: 'histogram', + sidebarToggleState$, + }); + expect(findTestSubject(component, 'dscShowSidebarButton').exists()).toBe(true); + expect(findTestSubject(component, 'dscHideHistogramButton').exists()).toBe(true); + + findTestSubject(component, 'dscShowSidebarButton').simulate('click'); + + expect(sidebarToggleState$.getValue().toggle).toHaveBeenCalledWith(false); + }); + }); + + describe('inside view mode tabs', function () { + it('should render correctly when sidebar is visible and histogram is visible', () => { + const sidebarToggleState$ = new BehaviorSubject({ + isCollapsed: false, + toggle: jest.fn(), + }); + const component = mountComponent({ + hideChart: false, + isChartAvailable: true, + renderedFor: 'tabs', + sidebarToggleState$, + }); + expect(findTestSubject(component, 'dscShowSidebarButton').exists()).toBe(false); + expect(findTestSubject(component, 'dscHideHistogramButton').exists()).toBe(false); + expect(findTestSubject(component, 'dscShowHistogramButton').exists()).toBe(false); + }); + + it('should render correctly when sidebar is visible and histogram is visible but chart is not available', () => { + const sidebarToggleState$ = new BehaviorSubject({ + isCollapsed: false, + toggle: jest.fn(), + }); + const component = mountComponent({ + hideChart: false, + isChartAvailable: false, + renderedFor: 'tabs', + sidebarToggleState$, + }); + expect(findTestSubject(component, 'dscShowSidebarButton').exists()).toBe(false); + expect(findTestSubject(component, 'dscHideHistogramButton').exists()).toBe(false); + expect(findTestSubject(component, 'dscShowHistogramButton').exists()).toBe(false); + }); + + it('should render correctly when sidebar is hidden and histogram is visible', () => { + const sidebarToggleState$ = new BehaviorSubject({ + isCollapsed: true, + toggle: jest.fn(), + }); + const component = mountComponent({ + hideChart: false, + isChartAvailable: true, + renderedFor: 'tabs', + sidebarToggleState$, + }); + expect(findTestSubject(component, 'dscShowSidebarButton').exists()).toBe(false); + expect(findTestSubject(component, 'dscHideHistogramButton').exists()).toBe(false); + expect(findTestSubject(component, 'dscShowHistogramButton').exists()).toBe(false); + }); + + it('should render correctly when sidebar is hidden and histogram is visible but chart is not available', () => { + const sidebarToggleState$ = new BehaviorSubject({ + isCollapsed: true, + toggle: jest.fn(), + }); + const component = mountComponent({ + hideChart: false, + isChartAvailable: false, + renderedFor: 'tabs', + sidebarToggleState$, + }); + expect(findTestSubject(component, 'dscShowSidebarButton').exists()).toBe(true); + expect(findTestSubject(component, 'dscHideHistogramButton').exists()).toBe(false); + expect(findTestSubject(component, 'dscShowHistogramButton').exists()).toBe(false); + }); + + it('should render correctly when sidebar is visible and histogram is hidden', () => { + const sidebarToggleState$ = new BehaviorSubject({ + isCollapsed: false, + toggle: jest.fn(), + }); + const component = mountComponent({ + hideChart: true, + isChartAvailable: true, + renderedFor: 'tabs', + sidebarToggleState$, + }); + expect(findTestSubject(component, 'dscShowSidebarButton').exists()).toBe(false); + expect(findTestSubject(component, 'dscShowHistogramButton').exists()).toBe(true); + }); + + it('should render correctly when sidebar is visible and histogram is hidden but chart is not available', () => { + const sidebarToggleState$ = new BehaviorSubject({ + isCollapsed: false, + toggle: jest.fn(), + }); + const component = mountComponent({ + hideChart: true, + isChartAvailable: false, + renderedFor: 'tabs', + sidebarToggleState$, + }); + expect(findTestSubject(component, 'dscShowSidebarButton').exists()).toBe(false); + expect(findTestSubject(component, 'dscShowHistogramButton').exists()).toBe(false); + expect(findTestSubject(component, 'dscHideHistogramButton').exists()).toBe(false); + }); + + it('should render correctly when sidebar is hidden and histogram is hidden', () => { + const sidebarToggleState$ = new BehaviorSubject({ + isCollapsed: true, + toggle: jest.fn(), + }); + const component = mountComponent({ + hideChart: true, + isChartAvailable: true, + renderedFor: 'tabs', + sidebarToggleState$, + }); + expect(findTestSubject(component, 'dscShowSidebarButton').exists()).toBe(true); + expect(findTestSubject(component, 'dscShowHistogramButton').exists()).toBe(true); + }); + + it('should render correctly when sidebar is hidden and histogram is hidden but chart is not available', () => { + const sidebarToggleState$ = new BehaviorSubject({ + isCollapsed: true, + toggle: jest.fn(), + }); + const component = mountComponent({ + hideChart: true, + isChartAvailable: false, + renderedFor: 'tabs', + sidebarToggleState$, + }); + expect(findTestSubject(component, 'dscShowSidebarButton').exists()).toBe(true); + expect(findTestSubject(component, 'dscShowHistogramButton').exists()).toBe(false); + expect(findTestSubject(component, 'dscHideHistogramButton').exists()).toBe(false); + }); + }); +}); diff --git a/src/plugins/discover/public/components/panels_toggle/panels_toggle.tsx b/src/plugins/discover/public/components/panels_toggle/panels_toggle.tsx new file mode 100644 index 0000000000000..bd04823affd80 --- /dev/null +++ b/src/plugins/discover/public/components/panels_toggle/panels_toggle.tsx @@ -0,0 +1,101 @@ +/* + * 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 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React, { useCallback } from 'react'; +import { i18n } from '@kbn/i18n'; +import useObservable from 'react-use/lib/useObservable'; +import { BehaviorSubject } from 'rxjs'; +import { IconButtonGroup } from '@kbn/shared-ux-button-toolbar'; +import { useAppStateSelector } from '../../application/main/services/discover_app_state_container'; +import { DiscoverStateContainer } from '../../application/main/services/discover_state'; +import { SidebarToggleState } from '../../application/types'; + +export interface PanelsToggleProps { + stateContainer: DiscoverStateContainer; + sidebarToggleState$: BehaviorSubject; + renderedFor: 'histogram' | 'prompt' | 'tabs' | 'root'; + isChartAvailable: boolean | undefined; // it will be injected in `DiscoverMainContent` when rendering View mode tabs or in `DiscoverLayout` when rendering No results or Error prompt +} + +/** + * An element of this component is created in DiscoverLayout + * @param stateContainer + * @param sidebarToggleState$ + * @param renderedIn + * @param isChartAvailable + * @constructor + */ +export const PanelsToggle: React.FC = ({ + stateContainer, + sidebarToggleState$, + renderedFor, + isChartAvailable, +}) => { + const isChartHidden = useAppStateSelector((state) => Boolean(state.hideChart)); + + const onToggleChart = useCallback(() => { + stateContainer.appState.update({ hideChart: !isChartHidden }); + }, [stateContainer, isChartHidden]); + + const sidebarToggleState = useObservable(sidebarToggleState$); + const isSidebarCollapsed = sidebarToggleState?.isCollapsed ?? false; + + const isInsideHistogram = renderedFor === 'histogram'; + const isInsideDiscoverContent = !isInsideHistogram; + + const buttons = [ + ...((isInsideHistogram && isSidebarCollapsed) || + (isInsideDiscoverContent && isSidebarCollapsed && (isChartHidden || !isChartAvailable)) + ? [ + { + label: i18n.translate('discover.panelsToggle.showSidebarButton', { + defaultMessage: 'Show sidebar', + }), + iconType: 'transitionLeftIn', + 'data-test-subj': 'dscShowSidebarButton', + 'aria-expanded': !isSidebarCollapsed, + 'aria-controls': 'discover-sidebar', + onClick: () => sidebarToggleState?.toggle?.(false), + }, + ] + : []), + ...(isInsideHistogram || (isInsideDiscoverContent && isChartAvailable && isChartHidden) + ? [ + { + label: isChartHidden + ? i18n.translate('discover.panelsToggle.showChartButton', { + defaultMessage: 'Show chart', + }) + : i18n.translate('discover.panelsToggle.hideChartButton', { + defaultMessage: 'Hide chart', + }), + iconType: isChartHidden ? 'transitionTopIn' : 'transitionTopOut', + 'data-test-subj': isChartHidden ? 'dscShowHistogramButton' : 'dscHideHistogramButton', + 'aria-expanded': !isChartHidden, + 'aria-controls': 'unifiedHistogramCollapsablePanel', + onClick: onToggleChart, + }, + ] + : []), + ]; + + if (!buttons.length) { + return null; + } + + return ( + + ); +}; diff --git a/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.test.tsx b/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.test.tsx index 7c17e5e1a31ef..e1788389d3caf 100644 --- a/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.test.tsx +++ b/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.test.tsx @@ -11,12 +11,18 @@ import { VIEW_MODE } from '../../../common/constants'; import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; import { mountWithIntl } from '@kbn/test-jest-helpers'; import React from 'react'; +import { findTestSubject } from '@elastic/eui/lib/test'; import { DocumentViewModeToggle } from './view_mode_toggle'; +import { BehaviorSubject } from 'rxjs'; +import { getDiscoverStateMock } from '../../__mocks__/discover_state.mock'; +import { DataTotalHits$ } from '../../application/main/services/discover_data_state_container'; +import { FetchStatus } from '../../application/types'; describe('Document view mode toggle component', () => { const mountComponent = ({ showFieldStatistics = true, viewMode = VIEW_MODE.DOCUMENT_LEVEL, + isTextBasedQuery = false, setDiscoverViewMode = jest.fn(), } = {}) => { const serivces = { @@ -25,21 +31,40 @@ describe('Document view mode toggle component', () => { }, }; + const stateContainer = getDiscoverStateMock({ isTimeBased: true }); + stateContainer.dataState.data$.totalHits$ = new BehaviorSubject({ + fetchStatus: FetchStatus.COMPLETE, + result: 10, + }) as DataTotalHits$; + return mountWithIntl( - + ); }; it('should render if SHOW_FIELD_STATISTICS is true', () => { const component = mountComponent(); - expect(component.isEmptyRender()).toBe(false); + expect(findTestSubject(component, 'dscViewModeToggle').exists()).toBe(true); + expect(findTestSubject(component, 'discoverQueryTotalHits').exists()).toBe(true); }); it('should not render if SHOW_FIELD_STATISTICS is false', () => { const component = mountComponent({ showFieldStatistics: false }); - expect(component.isEmptyRender()).toBe(true); + expect(findTestSubject(component, 'dscViewModeToggle').exists()).toBe(false); + expect(findTestSubject(component, 'discoverQueryTotalHits').exists()).toBe(true); + }); + + it('should not render if text-based', () => { + const component = mountComponent({ isTextBasedQuery: true }); + expect(findTestSubject(component, 'dscViewModeToggle').exists()).toBe(false); + expect(findTestSubject(component, 'discoverQueryTotalHits').exists()).toBe(true); }); it('should set the view mode to VIEW_MODE.DOCUMENT_LEVEL when dscViewModeDocumentButton is clicked', () => { diff --git a/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx b/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx index 79c9213e76395..147486ac6dc6e 100644 --- a/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx +++ b/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx @@ -6,19 +6,27 @@ * Side Public License, v 1. */ -import React, { useMemo } from 'react'; -import { EuiTab, EuiTabs, useEuiTheme } from '@elastic/eui'; +import React, { useMemo, ReactElement } from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiTab, EuiTabs, useEuiTheme } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { css } from '@emotion/react'; import { DOC_TABLE_LEGACY, SHOW_FIELD_STATISTICS } from '@kbn/discover-utils'; import { VIEW_MODE } from '../../../common/constants'; import { useDiscoverServices } from '../../hooks/use_discover_services'; +import { DiscoverStateContainer } from '../../application/main/services/discover_state'; +import { HitsCounter, HitsCounterMode } from '../hits_counter'; export const DocumentViewModeToggle = ({ viewMode, + isTextBasedQuery, + prepend, + stateContainer, setDiscoverViewMode, }: { viewMode: VIEW_MODE; + isTextBasedQuery: boolean; + prepend?: ReactElement; + stateContainer: DiscoverStateContainer; setDiscoverViewMode: (viewMode: VIEW_MODE) => void; }) => { const { euiTheme } = useEuiTheme(); @@ -26,10 +34,12 @@ export const DocumentViewModeToggle = ({ const isLegacy = useMemo(() => uiSettings.get(DOC_TABLE_LEGACY), [uiSettings]); const includesNormalTabsStyle = viewMode === VIEW_MODE.AGGREGATED_LEVEL || isLegacy; - const tabsPadding = includesNormalTabsStyle ? euiTheme.size.s : 0; - const tabsCss = css` - padding: ${tabsPadding} ${tabsPadding} 0 ${tabsPadding}; + const containerPadding = includesNormalTabsStyle ? euiTheme.size.s : 0; + const containerCss = css` + padding: ${containerPadding} ${containerPadding} 0 ${containerPadding}; + `; + const tabsCss = css` .euiTab__content { line-height: ${euiTheme.size.xl}; } @@ -37,29 +47,52 @@ export const DocumentViewModeToggle = ({ const showViewModeToggle = uiSettings.get(SHOW_FIELD_STATISTICS) ?? false; - if (!showViewModeToggle) { - return null; - } - return ( - - setDiscoverViewMode(VIEW_MODE.DOCUMENT_LEVEL)} - data-test-subj="dscViewModeDocumentButton" - > - - - setDiscoverViewMode(VIEW_MODE.AGGREGATED_LEVEL)} - data-test-subj="dscViewModeFieldStatsButton" - > - - - + + {prepend && ( + + {prepend} + + )} + + {isTextBasedQuery || !showViewModeToggle ? ( + + ) : ( + + setDiscoverViewMode(VIEW_MODE.DOCUMENT_LEVEL)} + data-test-subj="dscViewModeDocumentButton" + > + + + + setDiscoverViewMode(VIEW_MODE.AGGREGATED_LEVEL)} + data-test-subj="dscViewModeFieldStatsButton" + > + + + + )} + + ); }; diff --git a/src/plugins/discover/public/customizations/customization_service.ts b/src/plugins/discover/public/customizations/customization_service.ts index 15175c8bad1ae..de3108b9ab53f 100644 --- a/src/plugins/discover/public/customizations/customization_service.ts +++ b/src/plugins/discover/public/customizations/customization_service.ts @@ -7,7 +7,8 @@ */ import { filter, map, Observable, startWith, Subject } from 'rxjs'; -import type { +import { + DataTableCustomization, FlyoutCustomization, SearchBarCustomization, TopNavCustomization, @@ -18,7 +19,8 @@ export type DiscoverCustomization = | FlyoutCustomization | SearchBarCustomization | TopNavCustomization - | UnifiedHistogramCustomization; + | UnifiedHistogramCustomization + | DataTableCustomization; export type DiscoverCustomizationId = DiscoverCustomization['id']; diff --git a/src/plugins/discover/public/customizations/customization_types/data_table_customisation.ts b/src/plugins/discover/public/customizations/customization_types/data_table_customisation.ts new file mode 100644 index 0000000000000..0fdbebee2ac60 --- /dev/null +++ b/src/plugins/discover/public/customizations/customization_types/data_table_customisation.ts @@ -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 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import type { CustomCellRenderer } from '@kbn/unified-data-table'; + +export interface DataTableCustomization { + id: 'data_table'; + customCellRenderer?: CustomCellRenderer; +} diff --git a/src/plugins/discover/public/customizations/customization_types/flyout_customization.ts b/src/plugins/discover/public/customizations/customization_types/flyout_customization.ts index a57a538f21642..794711ba17b17 100644 --- a/src/plugins/discover/public/customizations/customization_types/flyout_customization.ts +++ b/src/plugins/discover/public/customizations/customization_types/flyout_customization.ts @@ -5,10 +5,10 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ -import { EuiFlyoutProps } from '@elastic/eui'; +import { EuiFlyoutProps, IconType } from '@elastic/eui'; import type { DataTableRecord } from '@kbn/discover-utils/types'; import type { DocViewRenderProps } from '@kbn/unified-doc-viewer/types'; -import React, { type ComponentType } from 'react'; +import React, { type ComponentType, MouseEventHandler } from 'react'; export interface FlyoutDefaultActionItem { disabled?: boolean; @@ -21,8 +21,13 @@ export interface FlyoutDefaultActions { export interface FlyoutActionItem { id: string; - Content: React.ElementType; enabled: boolean; + label: string; + helpText?: string; + iconType: IconType; + onClick: (() => void) | MouseEventHandler; + href?: string; + dataTestSubj?: string; } export interface FlyoutContentProps { diff --git a/src/plugins/discover/public/customizations/customization_types/index.ts b/src/plugins/discover/public/customizations/customization_types/index.ts index effb7fccf207c..a0e9a1cdb098f 100644 --- a/src/plugins/discover/public/customizations/customization_types/index.ts +++ b/src/plugins/discover/public/customizations/customization_types/index.ts @@ -10,3 +10,4 @@ export * from './flyout_customization'; export * from './search_bar_customization'; export * from './top_nav_customization'; export * from './histogram_customization'; +export * from './data_table_customisation'; diff --git a/src/plugins/discover/public/embeddable/saved_search_grid.tsx b/src/plugins/discover/public/embeddable/saved_search_grid.tsx index 0177a324dd2b8..f64f000c0bf0b 100644 --- a/src/plugins/discover/public/embeddable/saved_search_grid.tsx +++ b/src/plugins/discover/public/embeddable/saved_search_grid.tsx @@ -100,6 +100,8 @@ export function DiscoverGridEmbeddable(props: DiscoverGridEmbeddableProps) { maxDocFieldsDisplayed={props.services.uiSettings.get(MAX_DOC_FIELDS_DISPLAYED)} renderDocumentView={renderDocumentView} renderCustomToolbar={renderCustomToolbar} + showColumnTokens + headerRowHeight={3} /> ); diff --git a/src/plugins/discover/tsconfig.json b/src/plugins/discover/tsconfig.json index fe06c93232460..b75f27c9266f8 100644 --- a/src/plugins/discover/tsconfig.json +++ b/src/plugins/discover/tsconfig.json @@ -78,6 +78,7 @@ "@kbn/rule-data-utils", "@kbn/core-chrome-browser", "@kbn/core-plugins-server", + "@kbn/shared-ux-button-toolbar", "@kbn/serverless", "@kbn/deeplinks-observability" ], diff --git a/src/plugins/event_annotation_listing/public/components/group_editor_flyout/group_preview.test.tsx b/src/plugins/event_annotation_listing/public/components/group_editor_flyout/group_preview.test.tsx index 386976ac571b6..935aad45570ac 100644 --- a/src/plugins/event_annotation_listing/public/components/group_editor_flyout/group_preview.test.tsx +++ b/src/plugins/event_annotation_listing/public/components/group_editor_flyout/group_preview.test.tsx @@ -21,51 +21,14 @@ import { TypedLensByValueInput, } from '@kbn/lens-plugin/public'; import { Datatable } from '@kbn/expressions-plugin/common'; -import { fireEvent, render, screen, waitFor } from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; import '@testing-library/jest-dom'; import userEvent from '@testing-library/user-event'; import { I18nProvider } from '@kbn/i18n-react'; import { GroupPreview } from './group_preview'; import { LensByValueInput } from '@kbn/lens-plugin/public/embeddable'; import { DATA_LAYER_ID, DATE_HISTOGRAM_COLUMN_ID, getCurrentTimeField } from './lens_attributes'; -import moment from 'moment'; - -class EuiSuperDatePickerTestHarness { - public static get currentCommonlyUsedRange() { - return screen.queryByTestId('superDatePickerShowDatesButton')?.textContent ?? ''; - } - - // TODO - add assertion with date formatting - public static get currentRange() { - if (screen.queryByTestId('superDatePickerShowDatesButton')) { - // showing a commonly-used range - return { from: '', to: '' }; - } - - return { - from: screen.getByTestId('superDatePickerstartDatePopoverButton').textContent, - to: screen.getByTestId('superDatePickerendDatePopoverButton').textContent, - }; - } - - static togglePopover() { - userEvent.click(screen.getByRole('button', { name: 'Date quick select' })); - } - - static async selectCommonlyUsedRange(label: string) { - if (!screen.queryByText('Commonly used')) this.togglePopover(); - - // Using fireEvent here because userEvent erroneously claims that - // pointer-events is set to 'none'. - // - // I have verified that this fixed on the latest version of the @testing-library/user-event package - fireEvent.click(await screen.findByText(label)); - } - - static refresh() { - userEvent.click(screen.getByRole('button', { name: 'Refresh' })); - } -} +import { EuiSuperDatePickerTestHarness } from '@kbn/test-eui-helpers'; describe('group editor preview', () => { const annotation = getDefaultManualAnnotation('my-id', 'some-timestamp'); @@ -186,11 +149,11 @@ describe('group editor preview', () => { // from chart brush userEvent.click(screen.getByTestId('brushEnd')); - const format = 'MMM D, YYYY @ HH:mm:ss.SSS'; // from https://github.com/elastic/eui/blob/6a30eba7c2a154691c96a1d17c8b2f3506d351a3/src/components/date_picker/super_date_picker/super_date_picker.tsx#L222; - expect(EuiSuperDatePickerTestHarness.currentRange).toEqual({ - from: moment(BRUSH_RANGE[0]).format(format), - to: moment(BRUSH_RANGE[1]).format(format), - }); + EuiSuperDatePickerTestHarness.assertCurrentRange( + { from: BRUSH_RANGE[0], to: BRUSH_RANGE[1] }, + expect + ); + expect(getEmbeddableTimeRange()).toEqual({ from: new Date(BRUSH_RANGE[0]).toISOString(), to: new Date(BRUSH_RANGE[1]).toISOString(), diff --git a/src/plugins/event_annotation_listing/tsconfig.json b/src/plugins/event_annotation_listing/tsconfig.json index 8c9efd4559400..e3c77073de168 100644 --- a/src/plugins/event_annotation_listing/tsconfig.json +++ b/src/plugins/event_annotation_listing/tsconfig.json @@ -41,7 +41,8 @@ "@kbn/core-notifications-browser-mocks", "@kbn/core-notifications-browser", "@kbn/core-saved-objects-api-browser", - "@kbn/content-management-table-list-view-common" + "@kbn/content-management-table-list-view-common", + "@kbn/test-eui-helpers" ], "exclude": [ "target/**/*", diff --git a/src/plugins/kibana_usage_collection/server/collectors/management/schema.ts b/src/plugins/kibana_usage_collection/server/collectors/management/schema.ts index b2e2c5ec3f748..5e49b09b01d24 100644 --- a/src/plugins/kibana_usage_collection/server/collectors/management/schema.ts +++ b/src/plugins/kibana_usage_collection/server/collectors/management/schema.ts @@ -449,6 +449,10 @@ export const stackManagementSchema: MakeSchemaFrom = { type: 'boolean', _meta: { description: 'Non-default value of setting.' }, }, + 'observability:apmEnableTableSearchBar': { + type: 'boolean', + _meta: { description: 'Non-default value of setting.' }, + }, 'observability:apmAWSLambdaPriceFactor': { type: 'text', _meta: { description: 'Non-default value of setting.' }, diff --git a/src/plugins/kibana_usage_collection/server/collectors/management/types.ts b/src/plugins/kibana_usage_collection/server/collectors/management/types.ts index e1de9aa7842d5..a1125a6d118b8 100644 --- a/src/plugins/kibana_usage_collection/server/collectors/management/types.ts +++ b/src/plugins/kibana_usage_collection/server/collectors/management/types.ts @@ -48,6 +48,7 @@ export interface UsageStats { 'observability:enableInfrastructureHostsView': boolean; 'observability:enableInfrastructureProfilingIntegration': boolean; 'observability:apmAgentExplorerView': boolean; + 'observability:apmEnableTableSearchBar': boolean; 'visualization:heatmap:maxBuckets': number; 'visualization:colorMapping': string; 'visualization:useLegacyTimeAxis': boolean; diff --git a/src/plugins/presentation_util/kibana.jsonc b/src/plugins/presentation_util/kibana.jsonc index 91ac6c4194378..f9b659fa61630 100644 --- a/src/plugins/presentation_util/kibana.jsonc +++ b/src/plugins/presentation_util/kibana.jsonc @@ -8,7 +8,6 @@ "server": true, "browser": true, "requiredPlugins": [ - "savedObjects", "kibanaReact", "contentManagement", "embeddable", @@ -16,6 +15,7 @@ "dataViews", "uiActions" ], - "extraPublicDirs": ["common"] + "extraPublicDirs": ["common"], + "requiredBundles": ["savedObjects"], } } diff --git a/src/plugins/telemetry/schema/oss_plugins.json b/src/plugins/telemetry/schema/oss_plugins.json index e04e83dc46feb..7e5a19d41d3d3 100644 --- a/src/plugins/telemetry/schema/oss_plugins.json +++ b/src/plugins/telemetry/schema/oss_plugins.json @@ -9863,6 +9863,12 @@ "description": "Non-default value of setting." } }, + "observability:apmEnableTableSearchBar": { + "type": "boolean", + "_meta": { + "description": "Non-default value of setting." + } + }, "observability:apmAWSLambdaPriceFactor": { "type": "text", "_meta": { diff --git a/src/plugins/unified_histogram/README.md b/src/plugins/unified_histogram/README.md index 229af7851d8a3..4509f28a7a61e 100755 --- a/src/plugins/unified_histogram/README.md +++ b/src/plugins/unified_histogram/README.md @@ -49,9 +49,6 @@ return ( // Pass a ref to the containing element to // handle top panel resize functionality resizeRef={resizeRef} - // Optionally append an element after the - // hits counter display - appendHitsCounter={} > @@ -165,7 +162,6 @@ return ( searchSessionId={searchSessionId} requestAdapter={requestAdapter} resizeRef={resizeRef} - appendHitsCounter={} > diff --git a/src/plugins/unified_histogram/public/__mocks__/suggestions.ts b/src/plugins/unified_histogram/public/__mocks__/suggestions.ts index bed2eee388cde..9e3a00d396047 100644 --- a/src/plugins/unified_histogram/public/__mocks__/suggestions.ts +++ b/src/plugins/unified_histogram/public/__mocks__/suggestions.ts @@ -57,26 +57,9 @@ export const currentSuggestionMock = { }, }, ], - allColumns: [ - { - columnId: '81e332d6-ee37-42a8-a646-cea4fc75d2d3', - fieldName: 'Dest', - meta: { - type: 'string', - }, - }, - { - columnId: '5b9b8b76-0836-4a12-b9c0-980c9900502f', - fieldName: 'AvgTicketPrice', - meta: { - type: 'number', - }, - }, - ], timeField: 'timestamp', }, }, - fieldList: [], indexPatternRefs: [], initialContext: { dataViewSpec: { @@ -196,26 +179,9 @@ export const allSuggestionsMock = [ }, }, ], - allColumns: [ - { - columnId: '923f0681-3fe1-4987-aa27-d9c91fb95fa6', - fieldName: 'Dest', - meta: { - type: 'string', - }, - }, - { - columnId: 'b5f41c04-4bca-4abe-ae5c-b1d4d6fb00e0', - fieldName: 'AvgTicketPrice', - meta: { - type: 'number', - }, - }, - ], timeField: 'timestamp', }, }, - fieldList: [], indexPatternRefs: [], initialContext: { dataViewSpec: { diff --git a/src/plugins/unified_histogram/public/chart/breakdown_field_selector.test.tsx b/src/plugins/unified_histogram/public/chart/breakdown_field_selector.test.tsx index c0c20a1e1a80e..86ec06ba48e67 100644 --- a/src/plugins/unified_histogram/public/chart/breakdown_field_selector.test.tsx +++ b/src/plugins/unified_histogram/public/chart/breakdown_field_selector.test.tsx @@ -6,68 +6,132 @@ * Side Public License, v 1. */ -import { EuiComboBox } from '@elastic/eui'; -import { mountWithIntl } from '@kbn/test-jest-helpers'; +import { render, act, screen } from '@testing-library/react'; import React from 'react'; import { UnifiedHistogramBreakdownContext } from '../types'; import { dataViewWithTimefieldMock } from '../__mocks__/data_view_with_timefield'; import { BreakdownFieldSelector } from './breakdown_field_selector'; -import { fieldSupportsBreakdown } from './utils/field_supports_breakdown'; describe('BreakdownFieldSelector', () => { - it('should pass fields that support breakdown as options to the EuiComboBox', () => { + it('should render correctly', () => { const onBreakdownFieldChange = jest.fn(); const breakdown: UnifiedHistogramBreakdownContext = { field: undefined, }; - const wrapper = mountWithIntl( + + render( ); - const comboBox = wrapper.find(EuiComboBox); - expect(comboBox.prop('options')).toEqual( - dataViewWithTimefieldMock.fields - .filter(fieldSupportsBreakdown) - .map((field) => ({ label: field.displayName, value: field.name })) - .sort((a, b) => a.label.toLowerCase().localeCompare(b.label.toLowerCase())) - ); + + const button = screen.getByTestId('unifiedHistogramBreakdownSelectorButton'); + expect(button.getAttribute('data-selected-value')).toBe(null); + + act(() => { + button.click(); + }); + + const options = screen.getAllByRole('option'); + expect( + options.map((option) => ({ + label: option.getAttribute('title'), + value: option.getAttribute('value'), + checked: option.getAttribute('aria-checked'), + })) + ).toMatchInlineSnapshot(` + Array [ + Object { + "checked": "true", + "label": "No breakdown", + "value": "__EMPTY_SELECTOR_OPTION__", + }, + Object { + "checked": "false", + "label": "bytes", + "value": "bytes", + }, + Object { + "checked": "false", + "label": "extension", + "value": "extension", + }, + ] + `); }); - it('should pass selectedOptions to the EuiComboBox if breakdown.field is defined', () => { + it('should mark the option as checked if breakdown.field is defined', () => { const onBreakdownFieldChange = jest.fn(); const field = dataViewWithTimefieldMock.fields.find((f) => f.name === 'extension')!; const breakdown: UnifiedHistogramBreakdownContext = { field }; - const wrapper = mountWithIntl( + + render( ); - const comboBox = wrapper.find(EuiComboBox); - expect(comboBox.prop('selectedOptions')).toEqual([ - { label: field.displayName, value: field.name }, - ]); + + const button = screen.getByTestId('unifiedHistogramBreakdownSelectorButton'); + expect(button.getAttribute('data-selected-value')).toBe('extension'); + + act(() => { + button.click(); + }); + + const options = screen.getAllByRole('option'); + expect( + options.map((option) => ({ + label: option.getAttribute('title'), + value: option.getAttribute('value'), + checked: option.getAttribute('aria-checked'), + })) + ).toMatchInlineSnapshot(` + Array [ + Object { + "checked": "false", + "label": "No breakdown", + "value": "__EMPTY_SELECTOR_OPTION__", + }, + Object { + "checked": "false", + "label": "bytes", + "value": "bytes", + }, + Object { + "checked": "true", + "label": "extension", + "value": "extension", + }, + ] + `); }); it('should call onBreakdownFieldChange with the selected field when the user selects a field', () => { const onBreakdownFieldChange = jest.fn(); + const selectedField = dataViewWithTimefieldMock.fields.find((f) => f.name === 'bytes')!; const breakdown: UnifiedHistogramBreakdownContext = { field: undefined, }; - const wrapper = mountWithIntl( + render( ); - const comboBox = wrapper.find(EuiComboBox); - const selectedField = dataViewWithTimefieldMock.fields.find((f) => f.name === 'extension')!; - comboBox.prop('onChange')!([{ label: selectedField.displayName, value: selectedField.name }]); + + act(() => { + screen.getByTestId('unifiedHistogramBreakdownSelectorButton').click(); + }); + + act(() => { + screen.getByTitle('bytes').click(); + }); + expect(onBreakdownFieldChange).toHaveBeenCalledWith(selectedField); }); }); diff --git a/src/plugins/unified_histogram/public/chart/breakdown_field_selector.tsx b/src/plugins/unified_histogram/public/chart/breakdown_field_selector.tsx index 77e00e157d62b..78df66f50873e 100644 --- a/src/plugins/unified_histogram/public/chart/breakdown_field_selector.tsx +++ b/src/plugins/unified_histogram/public/chart/breakdown_field_selector.tsx @@ -6,14 +6,20 @@ * Side Public License, v 1. */ -import { EuiComboBox, EuiComboBoxOptionOption, EuiToolTip, useEuiTheme } from '@elastic/eui'; +import React, { useCallback, useMemo } from 'react'; +import { EuiSelectableOption } from '@elastic/eui'; +import { FieldIcon, getFieldIconProps } from '@kbn/field-utils'; import { css } from '@emotion/react'; -import { DataView, DataViewField } from '@kbn/data-views-plugin/common'; -import { calculateWidthFromEntries } from '@kbn/calculate-width-from-char-count'; +import type { DataView, DataViewField } from '@kbn/data-views-plugin/common'; import { i18n } from '@kbn/i18n'; -import React, { useCallback, useState } from 'react'; import { UnifiedHistogramBreakdownContext } from '../types'; import { fieldSupportsBreakdown } from './utils/field_supports_breakdown'; +import { + ToolbarSelector, + ToolbarSelectorProps, + EMPTY_OPTION, + SelectableEntry, +} from './toolbar_selector'; export interface BreakdownFieldSelectorProps { dataView: DataView; @@ -21,77 +27,83 @@ export interface BreakdownFieldSelectorProps { onBreakdownFieldChange?: (breakdownField: DataViewField | undefined) => void; } -const TRUNCATION_PROPS = { truncation: 'middle' as const }; -const SINGLE_SELECTION = { asPlainText: true }; - export const BreakdownFieldSelector = ({ dataView, breakdown, onBreakdownFieldChange, }: BreakdownFieldSelectorProps) => { - const fieldOptions = dataView.fields - .filter(fieldSupportsBreakdown) - .map((field) => ({ label: field.displayName, value: field.name })) - .sort((a, b) => a.label.toLowerCase().localeCompare(b.label.toLowerCase())); + const fieldOptions: SelectableEntry[] = useMemo(() => { + const options: SelectableEntry[] = dataView.fields + .filter(fieldSupportsBreakdown) + .map((field) => ({ + key: field.name, + label: field.displayName, + value: field.name, + checked: + breakdown?.field?.name === field.name + ? ('on' as EuiSelectableOption['checked']) + : undefined, + prepend: ( + + + + ), + })) + .sort((a, b) => a.label.toLowerCase().localeCompare(b.label.toLowerCase())); - const selectedFields = breakdown.field - ? [{ label: breakdown.field.displayName, value: breakdown.field.name }] - : []; + options.unshift({ + key: EMPTY_OPTION, + value: EMPTY_OPTION, + label: i18n.translate('unifiedHistogram.breakdownFieldSelector.noBreakdownButtonLabel', { + defaultMessage: 'No breakdown', + }), + checked: !breakdown?.field ? ('on' as EuiSelectableOption['checked']) : undefined, + }); - const onFieldChange = useCallback( - (newOptions: EuiComboBoxOptionOption[]) => { - const field = newOptions.length - ? dataView.fields.find((currentField) => currentField.name === newOptions[0].value) - : undefined; + return options; + }, [dataView, breakdown.field]); + const onChange: ToolbarSelectorProps['onChange'] = useCallback( + (chosenOption) => { + const field = chosenOption?.value + ? dataView.fields.find((currentField) => currentField.name === chosenOption.value) + : undefined; onBreakdownFieldChange?.(field); }, [dataView.fields, onBreakdownFieldChange] ); - const [fieldPopoverDisabled, setFieldPopoverDisabled] = useState(false); - const disableFieldPopover = useCallback(() => setFieldPopoverDisabled(true), []); - const enableFieldPopover = useCallback( - () => setTimeout(() => setFieldPopoverDisabled(false)), - [] - ); - - const { euiTheme } = useEuiTheme(); - const breakdownCss = css` - width: 100%; - max-width: ${euiTheme.base * 22}px; - `; - - const panelMinWidth = calculateWidthFromEntries(fieldOptions, ['label']); - return ( - - - + ); }; diff --git a/src/plugins/unified_histogram/public/chart/chart.test.tsx b/src/plugins/unified_histogram/public/chart/chart.test.tsx index d561a3310ceae..474da6bce5bf7 100644 --- a/src/plugins/unified_histogram/public/chart/chart.test.tsx +++ b/src/plugins/unified_histogram/public/chart/chart.test.tsx @@ -18,11 +18,11 @@ import type { ReactWrapper } from 'enzyme'; import { unifiedHistogramServicesMock } from '../__mocks__/services'; import { searchSourceInstanceMock } from '@kbn/data-plugin/common/search/search_source/mocks'; import { of } from 'rxjs'; -import { HitsCounter } from '../hits_counter'; import { dataViewWithTimefieldMock } from '../__mocks__/data_view_with_timefield'; import { dataViewMock } from '../__mocks__/data_view'; import { BreakdownFieldSelector } from './breakdown_field_selector'; import { SuggestionSelector } from './suggestion_selector'; +import { checkChartAvailability } from './check_chart_availability'; import { currentSuggestionMock, allSuggestionsMock } from '../__mocks__/suggestions'; @@ -33,6 +33,7 @@ jest.mock('./hooks/use_edit_visualization', () => ({ })); async function mountComponent({ + customToggle, noChart, noHits, noBreakdown, @@ -45,6 +46,7 @@ async function mountComponent({ hasDashboardPermissions, isChartLoading, }: { + customToggle?: ReactElement; noChart?: boolean; noHits?: boolean; noBreakdown?: boolean; @@ -70,6 +72,19 @@ async function mountComponent({ } as unknown as Capabilities, }; + const chart = noChart + ? undefined + : { + status: 'complete' as UnifiedHistogramFetchStatus, + hidden: chartHidden, + timeInterval: 'auto', + bucketInterval: { + scaled: true, + description: 'test', + scale: 2, + }, + }; + const props = { dataView, query: { @@ -85,28 +100,18 @@ async function mountComponent({ status: 'complete' as UnifiedHistogramFetchStatus, number: 2, }, - chart: noChart - ? undefined - : { - status: 'complete' as UnifiedHistogramFetchStatus, - hidden: chartHidden, - timeInterval: 'auto', - bucketInterval: { - scaled: true, - description: 'test', - scale: 2, - }, - }, + chart, breakdown: noBreakdown ? undefined : { field: undefined }, currentSuggestion, allSuggestions, isChartLoading: Boolean(isChartLoading), isPlainRecord, appendHistogram, - onResetChartHeight: jest.fn(), onChartHiddenChange: jest.fn(), onTimeIntervalChange: jest.fn(), withDefaultActions: undefined, + isChartAvailable: checkChartAvailability({ chart, dataView, isPlainRecord }), + renderCustomChartToggleActions: customToggle ? () => customToggle : undefined, }; let instance: ReactWrapper = {} as ReactWrapper; @@ -126,16 +131,33 @@ describe('Chart', () => { test('render when chart is undefined', async () => { const component = await mountComponent({ noChart: true }); - expect( - component.find('[data-test-subj="unifiedHistogramChartOptionsToggle"]').exists() - ).toBeFalsy(); + expect(component.find('[data-test-subj="unifiedHistogramToggleChartButton"]').exists()).toBe( + true + ); + }); + + test('should render a custom toggle when provided', async () => { + const component = await mountComponent({ + customToggle: , + }); + expect(component.find('[data-test-subj="custom-toggle"]').exists()).toBe(true); + expect(component.find('[data-test-subj="unifiedHistogramToggleChartButton"]').exists()).toBe( + false + ); + }); + + test('should not render when custom toggle is provided and chart is hidden', async () => { + const component = await mountComponent({ customToggle: , chartHidden: true }); + expect(component.find('[data-test-subj="unifiedHistogramChartPanelHidden"]').exists()).toBe( + true + ); }); test('render when chart is defined and onEditVisualization is undefined', async () => { mockUseEditVisualization = undefined; const component = await mountComponent(); expect( - component.find('[data-test-subj="unifiedHistogramChartOptionsToggle"]').exists() + component.find('[data-test-subj="unifiedHistogramToggleChartButton"]').exists() ).toBeTruthy(); expect( component.find('[data-test-subj="unifiedHistogramEditVisualization"]').exists() @@ -145,7 +167,7 @@ describe('Chart', () => { test('render when chart is defined and onEditVisualization is defined', async () => { const component = await mountComponent(); expect( - component.find('[data-test-subj="unifiedHistogramChartOptionsToggle"]').exists() + component.find('[data-test-subj="unifiedHistogramToggleChartButton"]').exists() ).toBeTruthy(); expect( component.find('[data-test-subj="unifiedHistogramEditVisualization"]').exists() @@ -155,7 +177,7 @@ describe('Chart', () => { test('render when chart.hidden is true', async () => { const component = await mountComponent({ chartHidden: true }); expect( - component.find('[data-test-subj="unifiedHistogramChartOptionsToggle"]').exists() + component.find('[data-test-subj="unifiedHistogramToggleChartButton"]').exists() ).toBeTruthy(); expect(component.find('[data-test-subj="unifiedHistogramChart"]').exists()).toBeFalsy(); }); @@ -163,7 +185,7 @@ describe('Chart', () => { test('render when chart.hidden is false', async () => { const component = await mountComponent({ chartHidden: false }); expect( - component.find('[data-test-subj="unifiedHistogramChartOptionsToggle"]').exists() + component.find('[data-test-subj="unifiedHistogramToggleChartButton"]').exists() ).toBeTruthy(); expect(component.find('[data-test-subj="unifiedHistogramChart"]').exists()).toBeTruthy(); }); @@ -171,7 +193,7 @@ describe('Chart', () => { test('render when is text based and not timebased', async () => { const component = await mountComponent({ isPlainRecord: true, dataView: dataViewMock }); expect( - component.find('[data-test-subj="unifiedHistogramChartOptionsToggle"]').exists() + component.find('[data-test-subj="unifiedHistogramToggleChartButton"]').exists() ).toBeTruthy(); expect(component.find('[data-test-subj="unifiedHistogramChart"]').exists()).toBeTruthy(); }); @@ -187,22 +209,12 @@ describe('Chart', () => { await act(async () => { component .find('[data-test-subj="unifiedHistogramEditVisualization"]') - .first() + .last() .simulate('click'); }); expect(mockUseEditVisualization).toHaveBeenCalled(); }); - it('should render HitsCounter when hits is defined', async () => { - const component = await mountComponent(); - expect(component.find(HitsCounter).exists()).toBeTruthy(); - }); - - it('should not render HitsCounter when hits is undefined', async () => { - const component = await mountComponent({ noHits: true }); - expect(component.find(HitsCounter).exists()).toBeFalsy(); - }); - it('should render the element passed to appendHistogram', async () => { const appendHistogram =
; const component = await mountComponent({ appendHistogram }); diff --git a/src/plugins/unified_histogram/public/chart/chart.tsx b/src/plugins/unified_histogram/public/chart/chart.tsx index a64944d73b5fe..657f27a72c070 100644 --- a/src/plugins/unified_histogram/public/chart/chart.tsx +++ b/src/plugins/unified_histogram/public/chart/chart.tsx @@ -8,28 +8,19 @@ import React, { ReactElement, useMemo, useState, useEffect, useCallback, memo } from 'react'; import type { Observable } from 'rxjs'; -import { - EuiButtonIcon, - EuiContextMenu, - EuiFlexGroup, - EuiFlexItem, - EuiPopover, - EuiToolTip, - EuiProgress, -} from '@elastic/eui'; +import { IconButtonGroup, type IconButtonGroupProps } from '@kbn/shared-ux-button-toolbar'; +import { EuiFlexGroup, EuiFlexItem, EuiProgress } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import type { EmbeddableComponentProps, Suggestion, LensEmbeddableOutput, } from '@kbn/lens-plugin/public'; -import { DataView, DataViewField, DataViewType } from '@kbn/data-views-plugin/public'; +import type { DataView, DataViewField } from '@kbn/data-views-plugin/public'; import type { LensEmbeddableInput } from '@kbn/lens-plugin/public'; import type { AggregateQuery, Filter, Query, TimeRange } from '@kbn/es-query'; import { Subject } from 'rxjs'; -import { HitsCounter } from '../hits_counter'; import { Histogram } from './histogram'; -import { useChartPanels } from './hooks/use_chart_panels'; import type { UnifiedHistogramBreakdownContext, UnifiedHistogramChartContext, @@ -43,6 +34,7 @@ import type { } from '../types'; import { BreakdownFieldSelector } from './breakdown_field_selector'; import { SuggestionSelector } from './suggestion_selector'; +import { TimeIntervalSelector } from './time_interval_selector'; import { useTotalHits } from './hooks/use_total_hits'; import { useRequestParams } from './hooks/use_request_params'; import { useChartStyles } from './hooks/use_chart_styles'; @@ -53,6 +45,8 @@ import { useRefetch } from './hooks/use_refetch'; import { useEditVisualization } from './hooks/use_edit_visualization'; export interface ChartProps { + isChartAvailable: boolean; + hiddenPanel?: boolean; className?: string; services: UnifiedHistogramServices; dataView: DataView; @@ -67,7 +61,7 @@ export interface ChartProps { hits?: UnifiedHistogramHitsContext; chart?: UnifiedHistogramChartContext; breakdown?: UnifiedHistogramBreakdownContext; - appendHitsCounter?: ReactElement; + renderCustomChartToggleActions?: () => ReactElement | undefined; appendHistogram?: ReactElement; disableAutoFetching?: boolean; disableTriggers?: LensEmbeddableInput['disableTriggers']; @@ -78,7 +72,6 @@ export interface ChartProps { isOnHistogramMode?: boolean; histogramQuery?: AggregateQuery; isChartLoading?: boolean; - onResetChartHeight?: () => void; onChartHiddenChange?: (chartHidden: boolean) => void; onTimeIntervalChange?: (timeInterval: string) => void; onBreakdownFieldChange?: (breakdownField: DataViewField | undefined) => void; @@ -93,6 +86,7 @@ export interface ChartProps { const HistogramMemoized = memo(Histogram); export function Chart({ + isChartAvailable, className, services, dataView, @@ -107,7 +101,7 @@ export function Chart({ currentSuggestion, allSuggestions, isPlainRecord, - appendHitsCounter, + renderCustomChartToggleActions, appendHistogram, disableAutoFetching, disableTriggers, @@ -118,7 +112,6 @@ export function Chart({ isOnHistogramMode, histogramQuery, isChartLoading, - onResetChartHeight, onChartHiddenChange, onTimeIntervalChange, onSuggestionChange, @@ -131,33 +124,12 @@ export function Chart({ }: ChartProps) { const [isSaveModalVisible, setIsSaveModalVisible] = useState(false); const [isFlyoutVisible, setIsFlyoutVisible] = useState(false); - const { - showChartOptionsPopover, - chartRef, - toggleChartOptions, - closeChartOptions, - toggleHideChart, - } = useChartActions({ + const { chartRef, toggleHideChart } = useChartActions({ chart, onChartHiddenChange, }); - const panels = useChartPanels({ - chart, - toggleHideChart, - onTimeIntervalChange, - closePopover: closeChartOptions, - onResetChartHeight, - isPlainRecord, - }); - - const chartVisible = !!( - chart && - !chart.hidden && - dataView.id && - dataView.type !== DataViewType.ROLLUP && - (isPlainRecord || (!isPlainRecord && dataView.isTimeBased())) - ); + const chartVisible = isChartAvailable && !!chart && !chart.hidden; const input$ = useMemo( () => originalInput$ ?? new Subject(), @@ -201,17 +173,7 @@ export function Chart({ isPlainRecord, }); - const { - resultCountCss, - resultCountInnerCss, - resultCountTitleCss, - resultCountToggleCss, - histogramCss, - breakdownFieldSelectorGroupCss, - breakdownFieldSelectorItemCss, - suggestionsSelectorItemCss, - chartToolButtonCss, - } = useChartStyles(chartVisible); + const { chartToolbarCss, histogramCss } = useChartStyles(chartVisible); const lensAttributesContext = useMemo( () => @@ -258,162 +220,135 @@ export function Chart({ lensAttributes: lensAttributesContext.attributes, isPlainRecord, }); + + const a11yCommonProps = { + id: 'unifiedHistogramCollapsablePanel', + }; + + if (Boolean(renderCustomChartToggleActions) && !chartVisible) { + return
; + } + const LensSaveModalComponent = services.lens.SaveModalComponent; const canSaveVisualization = chartVisible && currentSuggestion && services.capabilities.dashboard?.showWriteControls; + const canEditVisualizationOnTheFly = currentSuggestion && chartVisible; - const renderEditButton = useMemo( - () => ( - setIsFlyoutVisible(true)} - data-test-subj="unifiedHistogramEditFlyoutVisualization" - aria-label={i18n.translate('unifiedHistogram.editVisualizationButton', { - defaultMessage: 'Edit visualization', - })} - disabled={isFlyoutVisible} - /> - ), - [isFlyoutVisible] - ); + const actions: IconButtonGroupProps['buttons'] = []; - const canEditVisualizationOnTheFly = currentSuggestion && chartVisible; + if (canEditVisualizationOnTheFly) { + actions.push({ + label: i18n.translate('unifiedHistogram.editVisualizationButton', { + defaultMessage: 'Edit visualization', + }), + iconType: 'pencil', + isDisabled: isFlyoutVisible, + 'data-test-subj': 'unifiedHistogramEditFlyoutVisualization', + onClick: () => setIsFlyoutVisible(true), + }); + } else if (onEditVisualization) { + actions.push({ + label: i18n.translate('unifiedHistogram.editVisualizationButton', { + defaultMessage: 'Edit visualization', + }), + iconType: 'lensApp', + 'data-test-subj': 'unifiedHistogramEditVisualization', + onClick: onEditVisualization, + }); + } + if (canSaveVisualization) { + actions.push({ + label: i18n.translate('unifiedHistogram.saveVisualizationButton', { + defaultMessage: 'Save visualization', + }), + iconType: 'save', + 'data-test-subj': 'unifiedHistogramSaveVisualization', + onClick: () => setIsSaveModalVisible(true), + }); + } return ( - + - - {hits && } - - {chart && ( - - - {chartVisible && breakdown && ( - + + + + {renderCustomChartToggleActions ? ( + renderCustomChartToggleActions() + ) : ( + + )} + + {chartVisible && !isPlainRecord && !!onTimeIntervalChange && ( + + + + )} + +
+ {chartVisible && breakdown && ( - - )} - {chartVisible && currentSuggestion && allSuggestions && allSuggestions?.length > 1 && ( - - - - )} - {canSaveVisualization && ( - <> - - - setIsSaveModalVisible(true)} - data-test-subj="unifiedHistogramSaveVisualization" - aria-label={i18n.translate('unifiedHistogram.saveVisualizationButton', { - defaultMessage: 'Save visualization', - })} - /> - - - - )} - {canEditVisualizationOnTheFly && ( - - {!isFlyoutVisible ? ( - - {renderEditButton} - - ) : ( - renderEditButton - )} - - )} - {onEditVisualization && ( - - - 1 && ( + - - - )} - - - - - } - isOpen={showChartOptionsPopover} - closePopover={closeChartOptions} - panelPaddingSize="none" - anchorPosition="downLeft" - > - - - - + )} +
+ + + + {chartVisible && actions.length > 0 && ( + + )} @@ -427,6 +362,7 @@ export function Chart({ defaultMessage: 'Histogram of found documents', })} css={histogramCss} + data-test-subj="unifiedHistogramRendered" > {isChartLoading && ( { meta: { type: 'es_ql' }, columns: [ { - id: 'rows', - name: 'rows', + id: 'results', + name: 'results', meta: { type: 'number', dimensionName: 'Vertical axis', @@ -260,10 +260,10 @@ describe('Histogram', () => { ], rows: [ { - rows: 16, + results: 16, }, { - rows: 4, + results: 4, }, ], } as any; diff --git a/src/plugins/unified_histogram/public/chart/histogram.tsx b/src/plugins/unified_histogram/public/chart/histogram.tsx index 956f4ef86f2a5..a4071b4ac8cfa 100644 --- a/src/plugins/unified_histogram/public/chart/histogram.tsx +++ b/src/plugins/unified_histogram/public/chart/histogram.tsx @@ -70,9 +70,13 @@ const computeTotalHits = ( return Object.values(adapterTables ?? {})?.[0]?.rows?.length; } else if (isPlainRecord && !hasLensSuggestions) { // ES|QL histogram case + const rows = Object.values(adapterTables ?? {})?.[0]?.rows; + if (!rows) { + return undefined; + } let rowsCount = 0; - Object.values(adapterTables ?? {})?.[0]?.rows.forEach((r) => { - rowsCount += r.rows; + rows.forEach((r) => { + rowsCount += r.results; }); return rowsCount; } else { diff --git a/src/plugins/unified_histogram/public/chart/hooks/use_chart_actions.test.ts b/src/plugins/unified_histogram/public/chart/hooks/use_chart_actions.test.ts index 120dc0b3d0884..7696f0f9782b7 100644 --- a/src/plugins/unified_histogram/public/chart/hooks/use_chart_actions.test.ts +++ b/src/plugins/unified_histogram/public/chart/hooks/use_chart_actions.test.ts @@ -27,31 +27,6 @@ describe('useChartActions', () => { }; }; - it('should toggle chart options', () => { - const { hook } = render(); - expect(hook.result.current.showChartOptionsPopover).toBe(false); - act(() => { - hook.result.current.toggleChartOptions(); - }); - expect(hook.result.current.showChartOptionsPopover).toBe(true); - act(() => { - hook.result.current.toggleChartOptions(); - }); - expect(hook.result.current.showChartOptionsPopover).toBe(false); - }); - - it('should close chart options', () => { - const { hook } = render(); - act(() => { - hook.result.current.toggleChartOptions(); - }); - expect(hook.result.current.showChartOptionsPopover).toBe(true); - act(() => { - hook.result.current.closeChartOptions(); - }); - expect(hook.result.current.showChartOptionsPopover).toBe(false); - }); - it('should toggle hide chart', () => { const { chart, onChartHiddenChange, hook } = render(); act(() => { diff --git a/src/plugins/unified_histogram/public/chart/hooks/use_chart_actions.ts b/src/plugins/unified_histogram/public/chart/hooks/use_chart_actions.ts index 168db2ca0c4d9..3c4bd2434e3dd 100644 --- a/src/plugins/unified_histogram/public/chart/hooks/use_chart_actions.ts +++ b/src/plugins/unified_histogram/public/chart/hooks/use_chart_actions.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { useCallback, useEffect, useRef, useState } from 'react'; +import { useCallback, useEffect, useRef } from 'react'; import type { UnifiedHistogramChartContext } from '../../types'; export const useChartActions = ({ @@ -16,16 +16,6 @@ export const useChartActions = ({ chart: UnifiedHistogramChartContext | undefined; onChartHiddenChange?: (chartHidden: boolean) => void; }) => { - const [showChartOptionsPopover, setShowChartOptionsPopover] = useState(false); - - const toggleChartOptions = useCallback(() => { - setShowChartOptionsPopover(!showChartOptionsPopover); - }, [showChartOptionsPopover]); - - const closeChartOptions = useCallback(() => { - setShowChartOptionsPopover(false); - }, [setShowChartOptionsPopover]); - const chartRef = useRef<{ element: HTMLElement | null; moveFocus: boolean }>({ element: null, moveFocus: false, @@ -44,10 +34,7 @@ export const useChartActions = ({ }, [chart?.hidden, onChartHiddenChange]); return { - showChartOptionsPopover, chartRef, - toggleChartOptions, - closeChartOptions, toggleHideChart, }; }; diff --git a/src/plugins/unified_histogram/public/chart/hooks/use_chart_panels.test.ts b/src/plugins/unified_histogram/public/chart/hooks/use_chart_panels.test.ts deleted file mode 100644 index e5ee2b2c55cd9..0000000000000 --- a/src/plugins/unified_histogram/public/chart/hooks/use_chart_panels.test.ts +++ /dev/null @@ -1,108 +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 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import { renderHook } from '@testing-library/react-hooks'; -import { useChartPanels } from './use_chart_panels'; -import { EuiContextMenuPanelDescriptor } from '@elastic/eui'; - -describe('test useChartPanels', () => { - test('useChartsPanel when hideChart is true', async () => { - const { result } = renderHook(() => { - return useChartPanels({ - toggleHideChart: jest.fn(), - onTimeIntervalChange: jest.fn(), - closePopover: jest.fn(), - onResetChartHeight: jest.fn(), - chart: { - hidden: true, - timeInterval: 'auto', - }, - }); - }); - const panels: EuiContextMenuPanelDescriptor[] = result.current; - const panel0: EuiContextMenuPanelDescriptor = result.current[0]; - expect(panels.length).toBe(1); - expect(panel0!.items).toHaveLength(1); - expect(panel0!.items![0].icon).toBe('eye'); - }); - test('useChartsPanel when hideChart is false', async () => { - const { result } = renderHook(() => { - return useChartPanels({ - toggleHideChart: jest.fn(), - onTimeIntervalChange: jest.fn(), - closePopover: jest.fn(), - onResetChartHeight: jest.fn(), - chart: { - hidden: false, - timeInterval: 'auto', - }, - }); - }); - const panels: EuiContextMenuPanelDescriptor[] = result.current; - const panel0: EuiContextMenuPanelDescriptor = result.current[0]; - expect(panels.length).toBe(2); - expect(panel0!.items).toHaveLength(3); - expect(panel0!.items![0].icon).toBe('eyeClosed'); - expect(panel0!.items![1].icon).toBe('refresh'); - }); - test('should not show reset chart height when onResetChartHeight is undefined', async () => { - const { result } = renderHook(() => { - return useChartPanels({ - toggleHideChart: jest.fn(), - onTimeIntervalChange: jest.fn(), - closePopover: jest.fn(), - chart: { - hidden: false, - timeInterval: 'auto', - }, - }); - }); - const panel0: EuiContextMenuPanelDescriptor = result.current[0]; - expect(panel0!.items).toHaveLength(2); - expect(panel0!.items![0].icon).toBe('eyeClosed'); - }); - test('onResetChartHeight is called when the reset chart height button is clicked', async () => { - const onResetChartHeight = jest.fn(); - const { result } = renderHook(() => { - return useChartPanels({ - toggleHideChart: jest.fn(), - onTimeIntervalChange: jest.fn(), - closePopover: jest.fn(), - onResetChartHeight, - chart: { - hidden: false, - timeInterval: 'auto', - }, - }); - }); - const panel0: EuiContextMenuPanelDescriptor = result.current[0]; - const resetChartHeightButton = panel0!.items![1]; - (resetChartHeightButton.onClick as Function)(); - expect(onResetChartHeight).toBeCalled(); - }); - test('useChartsPanel when isPlainRecord', async () => { - const { result } = renderHook(() => { - return useChartPanels({ - toggleHideChart: jest.fn(), - onTimeIntervalChange: jest.fn(), - closePopover: jest.fn(), - onResetChartHeight: jest.fn(), - isPlainRecord: true, - chart: { - hidden: true, - timeInterval: 'auto', - }, - }); - }); - const panels: EuiContextMenuPanelDescriptor[] = result.current; - const panel0: EuiContextMenuPanelDescriptor = result.current[0]; - expect(panels.length).toBe(1); - expect(panel0!.items).toHaveLength(1); - expect(panel0!.items![0].icon).toBe('eye'); - }); -}); diff --git a/src/plugins/unified_histogram/public/chart/hooks/use_chart_panels.ts b/src/plugins/unified_histogram/public/chart/hooks/use_chart_panels.ts deleted file mode 100644 index bf1bf4d6b95cd..0000000000000 --- a/src/plugins/unified_histogram/public/chart/hooks/use_chart_panels.ts +++ /dev/null @@ -1,124 +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 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import { i18n } from '@kbn/i18n'; -import type { - EuiContextMenuPanelItemDescriptor, - EuiContextMenuPanelDescriptor, -} from '@elastic/eui'; -import { search } from '@kbn/data-plugin/public'; -import type { UnifiedHistogramChartContext } from '../../types'; - -export function useChartPanels({ - chart, - toggleHideChart, - onTimeIntervalChange, - closePopover, - onResetChartHeight, - isPlainRecord, -}: { - chart?: UnifiedHistogramChartContext; - toggleHideChart: () => void; - onTimeIntervalChange?: (timeInterval: string) => void; - closePopover: () => void; - onResetChartHeight?: () => void; - isPlainRecord?: boolean; -}) { - if (!chart) { - return []; - } - - const selectedOptionIdx = search.aggs.intervalOptions.findIndex( - (opt) => opt.val === chart.timeInterval - ); - const intervalDisplay = - selectedOptionIdx > -1 - ? search.aggs.intervalOptions[selectedOptionIdx].display - : search.aggs.intervalOptions[0].display; - - const mainPanelItems: EuiContextMenuPanelItemDescriptor[] = [ - { - name: !chart.hidden - ? i18n.translate('unifiedHistogram.hideChart', { - defaultMessage: 'Hide chart', - }) - : i18n.translate('unifiedHistogram.showChart', { - defaultMessage: 'Show chart', - }), - icon: !chart.hidden ? 'eyeClosed' : 'eye', - onClick: () => { - toggleHideChart(); - closePopover(); - }, - 'data-test-subj': 'unifiedHistogramChartToggle', - }, - ]; - if (!chart.hidden) { - if (onResetChartHeight) { - mainPanelItems.push({ - name: i18n.translate('unifiedHistogram.resetChartHeight', { - defaultMessage: 'Reset to default height', - }), - icon: 'refresh', - onClick: () => { - onResetChartHeight(); - closePopover(); - }, - 'data-test-subj': 'unifiedHistogramChartResetHeight', - }); - } - - if (!isPlainRecord) { - mainPanelItems.push({ - name: i18n.translate('unifiedHistogram.timeIntervalWithValue', { - defaultMessage: 'Time interval: {timeInterval}', - values: { - timeInterval: intervalDisplay, - }, - }), - panel: 1, - 'data-test-subj': 'unifiedHistogramTimeIntervalPanel', - }); - } - } - - const panels: EuiContextMenuPanelDescriptor[] = [ - { - id: 0, - title: i18n.translate('unifiedHistogram.chartOptions', { - defaultMessage: 'Chart options', - }), - items: mainPanelItems, - }, - ]; - if (!chart.hidden && !isPlainRecord) { - panels.push({ - id: 1, - initialFocusedItemIndex: selectedOptionIdx > -1 ? selectedOptionIdx : 0, - title: i18n.translate('unifiedHistogram.timeIntervals', { - defaultMessage: 'Time intervals', - }), - items: search.aggs.intervalOptions - .filter(({ val }) => val !== 'custom') - .map(({ display, val }) => { - return { - name: display, - label: display, - icon: val === chart.timeInterval ? 'check' : 'empty', - onClick: () => { - onTimeIntervalChange?.(val); - closePopover(); - }, - 'data-test-subj': `unifiedHistogramTimeInterval-${display}`, - className: val === chart.timeInterval ? 'unifiedHistogramIntervalSelected' : '', - }; - }), - }); - } - return panels; -} diff --git a/src/plugins/unified_histogram/public/chart/hooks/use_chart_styles.tsx b/src/plugins/unified_histogram/public/chart/hooks/use_chart_styles.tsx index 13b527be702c1..5a5bf41ca395d 100644 --- a/src/plugins/unified_histogram/public/chart/hooks/use_chart_styles.tsx +++ b/src/plugins/unified_histogram/public/chart/hooks/use_chart_styles.tsx @@ -6,36 +6,18 @@ * Side Public License, v 1. */ -import { useEuiBreakpoint, useEuiTheme } from '@elastic/eui'; +import { useEuiTheme } from '@elastic/eui'; import { css } from '@emotion/react'; export const useChartStyles = (chartVisible: boolean) => { const { euiTheme } = useEuiTheme(); - const resultCountCss = css` + + const chartToolbarCss = css` padding: ${euiTheme.size.s} ${euiTheme.size.s} ${chartVisible ? 0 : euiTheme.size.s} ${euiTheme.size.s}; min-height: ${euiTheme.base * 2.5}px; `; - const resultCountInnerCss = css` - ${useEuiBreakpoint(['xs', 's'])} { - align-items: center; - } - `; - const resultCountTitleCss = css` - flex-basis: auto; - ${useEuiBreakpoint(['xs', 's'])} { - margin-bottom: 0 !important; - } - `; - const resultCountToggleCss = css` - flex-basis: auto; - min-width: 0; - - ${useEuiBreakpoint(['xs', 's'])} { - align-items: flex-end; - } - `; const histogramCss = css` flex-grow: 1; display: flex; @@ -48,34 +30,9 @@ export const useChartStyles = (chartVisible: boolean) => { stroke-width: 1; } `; - const breakdownFieldSelectorGroupCss = css` - width: 100%; - `; - const breakdownFieldSelectorItemCss = css` - min-width: 0; - align-items: flex-end; - padding-left: ${euiTheme.size.s}; - `; - const suggestionsSelectorItemCss = css` - min-width: 0; - align-items: flex-start; - padding-left: ${euiTheme.size.s}; - `; - const chartToolButtonCss = css` - display: flex; - justify-content: center; - padding-left: ${euiTheme.size.s}; - `; return { - resultCountCss, - resultCountInnerCss, - resultCountTitleCss, - resultCountToggleCss, + chartToolbarCss, histogramCss, - breakdownFieldSelectorGroupCss, - breakdownFieldSelectorItemCss, - suggestionsSelectorItemCss, - chartToolButtonCss, }; }; diff --git a/src/plugins/unified_histogram/public/chart/hooks/use_total_hits.test.ts b/src/plugins/unified_histogram/public/chart/hooks/use_total_hits.test.ts index 3135f3c86f465..b6250f8fa82b7 100644 --- a/src/plugins/unified_histogram/public/chart/hooks/use_total_hits.test.ts +++ b/src/plugins/unified_histogram/public/chart/hooks/use_total_hits.test.ts @@ -85,7 +85,7 @@ describe('useTotalHits', () => { const query = { query: 'test query', language: 'kuery' }; const filters: Filter[] = [{ meta: { index: 'test' }, query: { match_all: {} } }]; const adapter = new RequestAdapter(); - renderHook(() => + const { rerender } = renderHook(() => useTotalHits({ ...getDeps(), services: { data } as any, @@ -99,6 +99,8 @@ describe('useTotalHits', () => { onTotalHitsChange, }) ); + refetch$.next({ type: 'refetch' }); + rerender(); expect(onTotalHitsChange).toBeCalledTimes(1); expect(onTotalHitsChange).toBeCalledWith(UnifiedHistogramFetchStatus.loading, undefined); expect(setFieldSpy).toHaveBeenCalledWith('index', dataViewWithTimefieldMock); @@ -125,7 +127,9 @@ describe('useTotalHits', () => { onTotalHitsChange, query: { esql: 'from test' }, }; - renderHook(() => useTotalHits(deps)); + const { rerender } = renderHook(() => useTotalHits(deps)); + refetch$.next({ type: 'refetch' }); + rerender(); expect(onTotalHitsChange).toBeCalledTimes(1); await waitFor(() => { expect(deps.services.expressions.run).toBeCalledTimes(1); @@ -153,22 +157,16 @@ describe('useTotalHits', () => { expect(fetchSpy).not.toHaveBeenCalled(); }); - it('should not fetch a second time if refetch$ is not triggered', async () => { + it('should not fetch if refetch$ is not triggered', async () => { const onTotalHitsChange = jest.fn(); const fetchSpy = jest.spyOn(searchSourceInstanceMock, 'fetch$').mockClear(); const setFieldSpy = jest.spyOn(searchSourceInstanceMock, 'setField').mockClear(); const options = { ...getDeps(), onTotalHitsChange }; const { rerender } = renderHook(() => useTotalHits(options)); - expect(onTotalHitsChange).toBeCalledTimes(1); - expect(setFieldSpy).toHaveBeenCalled(); - expect(fetchSpy).toHaveBeenCalled(); - await waitFor(() => { - expect(onTotalHitsChange).toBeCalledTimes(2); - }); rerender(); - expect(onTotalHitsChange).toBeCalledTimes(2); - expect(setFieldSpy).toHaveBeenCalledTimes(5); - expect(fetchSpy).toHaveBeenCalledTimes(1); + expect(onTotalHitsChange).toBeCalledTimes(0); + expect(setFieldSpy).toHaveBeenCalledTimes(0); + expect(fetchSpy).toHaveBeenCalledTimes(0); }); it('should fetch a second time if refetch$ is triggered', async () => { @@ -178,6 +176,8 @@ describe('useTotalHits', () => { const setFieldSpy = jest.spyOn(searchSourceInstanceMock, 'setField').mockClear(); const options = { ...getDeps(), onTotalHitsChange }; const { rerender } = renderHook(() => useTotalHits(options)); + refetch$.next({ type: 'refetch' }); + rerender(); expect(onTotalHitsChange).toBeCalledTimes(1); expect(setFieldSpy).toHaveBeenCalled(); expect(fetchSpy).toHaveBeenCalled(); @@ -202,7 +202,9 @@ describe('useTotalHits', () => { .spyOn(searchSourceInstanceMock, 'fetch$') .mockClear() .mockReturnValue(throwError(() => error)); - renderHook(() => useTotalHits({ ...getDeps(), onTotalHitsChange })); + const { rerender } = renderHook(() => useTotalHits({ ...getDeps(), onTotalHitsChange })); + refetch$.next({ type: 'refetch' }); + rerender(); await waitFor(() => { expect(onTotalHitsChange).toBeCalledTimes(2); expect(onTotalHitsChange).toBeCalledWith(UnifiedHistogramFetchStatus.error, error); @@ -220,7 +222,7 @@ describe('useTotalHits', () => { .mockClear() .mockReturnValue(timeRange as any); const filters: Filter[] = [{ meta: { index: 'test' }, query: { match_all: {} } }]; - renderHook(() => + const { rerender } = renderHook(() => useTotalHits({ ...getDeps(), dataView: { @@ -230,6 +232,8 @@ describe('useTotalHits', () => { filters, }) ); + refetch$.next({ type: 'refetch' }); + rerender(); expect(setOverwriteDataViewTypeSpy).toHaveBeenCalledWith(undefined); expect(setFieldSpy).toHaveBeenCalledWith('filter', filters); }); diff --git a/src/plugins/unified_histogram/public/chart/hooks/use_total_hits.ts b/src/plugins/unified_histogram/public/chart/hooks/use_total_hits.ts index 5bb927747e669..c16bb2335be24 100644 --- a/src/plugins/unified_histogram/public/chart/hooks/use_total_hits.ts +++ b/src/plugins/unified_histogram/public/chart/hooks/use_total_hits.ts @@ -13,7 +13,6 @@ import type { AggregateQuery, Filter, Query, TimeRange } from '@kbn/es-query'; import { Datatable, isExpressionValueError } from '@kbn/expressions-plugin/common'; import { i18n } from '@kbn/i18n'; import { MutableRefObject, useEffect, useRef } from 'react'; -import useEffectOnce from 'react-use/lib/useEffectOnce'; import { catchError, filter, lastValueFrom, map, Observable, of, pluck } from 'rxjs'; import { UnifiedHistogramFetchStatus, @@ -66,8 +65,6 @@ export const useTotalHits = ({ }); }); - useEffectOnce(fetch); - useEffect(() => { const subscription = refetch$.subscribe(fetch); return () => subscription.unsubscribe(); @@ -102,13 +99,11 @@ const fetchTotalHits = async ({ abortController.current?.abort(); abortController.current = undefined; - // Either the chart is visible, in which case Lens will make the request, - // or there is no hits context, which means the total hits should be hidden - if (chartVisible || !hits) { + if (chartVisible) { return; } - onTotalHitsChange?.(UnifiedHistogramFetchStatus.loading, hits.total); + onTotalHitsChange?.(UnifiedHistogramFetchStatus.loading, hits?.total); const newAbortController = new AbortController(); diff --git a/src/plugins/unified_histogram/public/chart/index.ts b/src/plugins/unified_histogram/public/chart/index.ts index 6a6d2d65f6f92..4a8b758f7d86e 100644 --- a/src/plugins/unified_histogram/public/chart/index.ts +++ b/src/plugins/unified_histogram/public/chart/index.ts @@ -7,3 +7,4 @@ */ export { Chart } from './chart'; +export { checkChartAvailability } from './check_chart_availability'; diff --git a/src/plugins/unified_histogram/public/chart/suggestion_selector.tsx b/src/plugins/unified_histogram/public/chart/suggestion_selector.tsx index 0196387633396..cad20279bfdf0 100644 --- a/src/plugins/unified_histogram/public/chart/suggestion_selector.tsx +++ b/src/plugins/unified_histogram/public/chart/suggestion_selector.tsx @@ -75,6 +75,8 @@ export const SuggestionSelector = ({ position="top" content={suggestionsPopoverDisabled ? undefined : activeSuggestion?.title} anchorProps={{ css: suggestionComboCss }} + display="block" + delay="long" > { + it('should render correctly', () => { + const onTimeIntervalChange = jest.fn(); + + render( + + ); + + const button = screen.getByTestId('unifiedHistogramTimeIntervalSelectorButton'); + expect(button.getAttribute('data-selected-value')).toBe('auto'); + + act(() => { + button.click(); + }); + + const options = screen.getAllByRole('option'); + expect( + options.map((option) => ({ + label: option.getAttribute('title'), + value: option.getAttribute('value'), + checked: option.getAttribute('aria-checked'), + })) + ).toMatchInlineSnapshot(` + Array [ + Object { + "checked": "true", + "label": "Auto", + "value": "auto", + }, + Object { + "checked": "false", + "label": "Millisecond", + "value": "ms", + }, + Object { + "checked": "false", + "label": "Second", + "value": "s", + }, + Object { + "checked": "false", + "label": "Minute", + "value": "m", + }, + Object { + "checked": "false", + "label": "Hour", + "value": "h", + }, + Object { + "checked": "false", + "label": "Day", + "value": "d", + }, + Object { + "checked": "false", + "label": "Week", + "value": "w", + }, + Object { + "checked": "false", + "label": "Month", + "value": "M", + }, + Object { + "checked": "false", + "label": "Year", + "value": "y", + }, + ] + `); + }); + + it('should mark the selected option as checked', () => { + const onTimeIntervalChange = jest.fn(); + + render( + + ); + + const button = screen.getByTestId('unifiedHistogramTimeIntervalSelectorButton'); + expect(button.getAttribute('data-selected-value')).toBe('y'); + + act(() => { + button.click(); + }); + + const options = screen.getAllByRole('option'); + expect( + options.map((option) => ({ + label: option.getAttribute('title'), + value: option.getAttribute('value'), + checked: option.getAttribute('aria-checked'), + })) + ).toMatchInlineSnapshot(` + Array [ + Object { + "checked": "false", + "label": "Auto", + "value": "auto", + }, + Object { + "checked": "false", + "label": "Millisecond", + "value": "ms", + }, + Object { + "checked": "false", + "label": "Second", + "value": "s", + }, + Object { + "checked": "false", + "label": "Minute", + "value": "m", + }, + Object { + "checked": "false", + "label": "Hour", + "value": "h", + }, + Object { + "checked": "false", + "label": "Day", + "value": "d", + }, + Object { + "checked": "false", + "label": "Week", + "value": "w", + }, + Object { + "checked": "false", + "label": "Month", + "value": "M", + }, + Object { + "checked": "true", + "label": "Year", + "value": "y", + }, + ] + `); + }); + + it('should call onTimeIntervalChange with the selected option when the user selects an interval', () => { + const onTimeIntervalChange = jest.fn(); + + render( + + ); + + act(() => { + screen.getByTestId('unifiedHistogramTimeIntervalSelectorButton').click(); + }); + + act(() => { + screen.getByTitle('Week').click(); + }); + + expect(onTimeIntervalChange).toHaveBeenCalledWith('w'); + }); +}); diff --git a/src/plugins/unified_histogram/public/chart/time_interval_selector.tsx b/src/plugins/unified_histogram/public/chart/time_interval_selector.tsx new file mode 100644 index 0000000000000..86c17fdc79172 --- /dev/null +++ b/src/plugins/unified_histogram/public/chart/time_interval_selector.tsx @@ -0,0 +1,81 @@ +/* + * 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 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React, { useCallback } from 'react'; +import { EuiSelectableOption } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { search } from '@kbn/data-plugin/public'; +import type { UnifiedHistogramChartContext } from '../types'; +import { ToolbarSelector, ToolbarSelectorProps, SelectableEntry } from './toolbar_selector'; + +export interface TimeIntervalSelectorProps { + chart: UnifiedHistogramChartContext; + onTimeIntervalChange: (timeInterval: string) => void; +} + +export const TimeIntervalSelector: React.FC = ({ + chart, + onTimeIntervalChange, +}) => { + const onChange: ToolbarSelectorProps['onChange'] = useCallback( + (chosenOption) => { + const selectedOption = chosenOption?.value; + if (selectedOption) { + onTimeIntervalChange(selectedOption); + } + }, + [onTimeIntervalChange] + ); + + const selectedOptionIdx = search.aggs.intervalOptions.findIndex( + (opt) => opt.val === chart.timeInterval + ); + const intervalDisplay = + selectedOptionIdx > -1 + ? search.aggs.intervalOptions[selectedOptionIdx].display + : search.aggs.intervalOptions[0].display; + + const options: SelectableEntry[] = search.aggs.intervalOptions + .filter(({ val }) => val !== 'custom') + .map(({ display, val }) => { + return { + key: val, + value: val, + label: display, + checked: val === chart.timeInterval ? ('on' as EuiSelectableOption['checked']) : undefined, + }; + }); + + return ( + + ); +}; diff --git a/src/plugins/unified_histogram/public/chart/toolbar_selector.tsx b/src/plugins/unified_histogram/public/chart/toolbar_selector.tsx new file mode 100644 index 0000000000000..1a83a736bb534 --- /dev/null +++ b/src/plugins/unified_histogram/public/chart/toolbar_selector.tsx @@ -0,0 +1,178 @@ +/* + * 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 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React, { useCallback, ReactElement, useState, useMemo } from 'react'; +import { + EuiPopover, + EuiPopoverTitle, + EuiSelectable, + EuiSelectableProps, + EuiSelectableOption, + useEuiTheme, + EuiPanel, + EuiToolTip, +} from '@elastic/eui'; +import { ToolbarButton } from '@kbn/shared-ux-button-toolbar'; +import { FormattedMessage } from '@kbn/i18n-react'; +import { css } from '@emotion/react'; +import { calculateWidthFromEntries } from '@kbn/calculate-width-from-char-count'; +import { i18n } from '@kbn/i18n'; + +export const EMPTY_OPTION = '__EMPTY_SELECTOR_OPTION__'; + +export type SelectableEntry = EuiSelectableOption<{ value: string }>; + +export interface ToolbarSelectorProps { + 'data-test-subj': string; + 'data-selected-value'?: string; // currently selected value + buttonLabel: ReactElement | string; + popoverTitle: string; + options: SelectableEntry[]; + searchable: boolean; + onChange?: (chosenOption: SelectableEntry | undefined) => void; +} + +export const ToolbarSelector: React.FC = ({ + 'data-test-subj': dataTestSubj, + 'data-selected-value': dataSelectedValue, + buttonLabel, + popoverTitle, + options, + searchable, + onChange, +}) => { + const { euiTheme } = useEuiTheme(); + const [isOpen, setIsOpen] = useState(false); + const [searchTerm, setSearchTerm] = useState(); + const [labelPopoverDisabled, setLabelPopoverDisabled] = useState(false); + + const disableLabelPopover = useCallback(() => setLabelPopoverDisabled(true), []); + + const enableLabelPopover = useCallback( + () => setTimeout(() => setLabelPopoverDisabled(false)), + [] + ); + + const onSelectionChange = useCallback( + (newOptions) => { + const chosenOption = newOptions.find(({ checked }: SelectableEntry) => checked === 'on'); + + onChange?.( + chosenOption?.value && chosenOption?.value !== EMPTY_OPTION ? chosenOption : undefined + ); + setIsOpen(false); + disableLabelPopover(); + }, + [disableLabelPopover, onChange] + ); + + const searchProps: EuiSelectableProps['searchProps'] = useMemo( + () => + searchable + ? { + id: `${dataTestSubj}SelectableInput`, + 'data-test-subj': `${dataTestSubj}SelectorSearch`, + compressed: true, + placeholder: i18n.translate( + 'unifiedHistogram.toolbarSelectorPopover.searchPlaceholder', + { + defaultMessage: 'Search', + } + ), + onChange: (value) => setSearchTerm(value), + } + : undefined, + [dataTestSubj, searchable, setSearchTerm] + ); + + const panelMinWidth = calculateWidthFromEntries(options, ['label']) + 2 * euiTheme.base; // plus extra width for the right Enter button + + return ( + + setIsOpen(!isOpen)} + onBlur={enableLabelPopover} + /> + + } + isOpen={isOpen} + closePopover={() => setIsOpen(false)} + anchorPosition="downLeft" + > + {popoverTitle} + + {searchTerm}, + }} + /> +

+ ), + } + : {})} + > + {(list, search) => ( + <> + {search && ( + + {search} + + )} + {list} + + )} + + + ); +}; diff --git a/src/plugins/unified_histogram/public/chart/utils/get_lens_attributes.test.ts b/src/plugins/unified_histogram/public/chart/utils/get_lens_attributes.test.ts index 53ec7350401b7..3c049649d5c20 100644 --- a/src/plugins/unified_histogram/public/chart/utils/get_lens_attributes.test.ts +++ b/src/plugins/unified_histogram/public/chart/utils/get_lens_attributes.test.ts @@ -565,7 +565,6 @@ describe('getLensAttributes', () => { "state": Object { "datasourceStates": Object { "textBased": Object { - "fieldList": Array [], "indexPatternRefs": Array [], "initialContext": Object { "contextualFields": Array [ @@ -644,22 +643,6 @@ describe('getLensAttributes', () => { }, "layers": Object { "46aa21fa-b747-4543-bf90-0b40007c546d": Object { - "allColumns": Array [ - Object { - "columnId": "81e332d6-ee37-42a8-a646-cea4fc75d2d3", - "fieldName": "Dest", - "meta": Object { - "type": "string", - }, - }, - Object { - "columnId": "5b9b8b76-0836-4a12-b9c0-980c9900502f", - "fieldName": "AvgTicketPrice", - "meta": Object { - "type": "number", - }, - }, - ], "columns": Array [ Object { "columnId": "81e332d6-ee37-42a8-a646-cea4fc75d2d3", diff --git a/src/plugins/unified_histogram/public/container/container.tsx b/src/plugins/unified_histogram/public/container/container.tsx index c65f1e2b43c04..fb152a1921e23 100644 --- a/src/plugins/unified_histogram/public/container/container.tsx +++ b/src/plugins/unified_histogram/public/container/container.tsx @@ -54,7 +54,7 @@ export type UnifiedHistogramContainerProps = { | 'relativeTimeRange' | 'columns' | 'container' - | 'appendHitsCounter' + | 'renderCustomChartToggleActions' | 'children' | 'onBrushEnd' | 'onFilter' diff --git a/src/plugins/unified_histogram/public/container/services/state_service.test.ts b/src/plugins/unified_histogram/public/container/services/state_service.test.ts index 73a493e167c19..40304a967243a 100644 --- a/src/plugins/unified_histogram/public/container/services/state_service.test.ts +++ b/src/plugins/unified_histogram/public/container/services/state_service.test.ts @@ -211,28 +211,4 @@ describe('UnifiedHistogramStateService', () => { expect(setTopPanelHeight as jest.Mock).not.toHaveBeenCalled(); expect(setBreakdownField as jest.Mock).not.toHaveBeenCalled(); }); - - it('should not update total hits to loading when the current status is partial', () => { - const stateService = createStateService({ - services: unifiedHistogramServicesMock, - initialState: { - ...initialState, - totalHitsStatus: UnifiedHistogramFetchStatus.partial, - }, - }); - let state: UnifiedHistogramState | undefined; - stateService.state$.subscribe((s) => (state = s)); - expect(state).toEqual({ - ...initialState, - totalHitsStatus: UnifiedHistogramFetchStatus.partial, - }); - stateService.setTotalHits({ - totalHitsStatus: UnifiedHistogramFetchStatus.loading, - totalHitsResult: 100, - }); - expect(state).toEqual({ - ...initialState, - totalHitsStatus: UnifiedHistogramFetchStatus.partial, - }); - }); }); diff --git a/src/plugins/unified_histogram/public/container/services/state_service.ts b/src/plugins/unified_histogram/public/container/services/state_service.ts index f96a4b5b7b033..1a79389e2bc6f 100644 --- a/src/plugins/unified_histogram/public/container/services/state_service.ts +++ b/src/plugins/unified_histogram/public/container/services/state_service.ts @@ -217,15 +217,6 @@ export const createStateService = ( totalHitsStatus: UnifiedHistogramFetchStatus; totalHitsResult: number | Error | undefined; }) => { - // If we have a partial result already, we don't - // want to update the total hits back to loading - if ( - state$.getValue().totalHitsStatus === UnifiedHistogramFetchStatus.partial && - totalHits.totalHitsStatus === UnifiedHistogramFetchStatus.loading - ) { - return; - } - updateState(totalHits); }, }; diff --git a/src/plugins/unified_histogram/public/hits_counter/hits_counter.test.tsx b/src/plugins/unified_histogram/public/hits_counter/hits_counter.test.tsx deleted file mode 100644 index 03b350448e9c2..0000000000000 --- a/src/plugins/unified_histogram/public/hits_counter/hits_counter.test.tsx +++ /dev/null @@ -1,72 +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 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React from 'react'; -import { mountWithIntl } from '@kbn/test-jest-helpers'; -import type { ReactWrapper } from 'enzyme'; -import type { HitsCounterProps } from './hits_counter'; -import { HitsCounter } from './hits_counter'; -import { findTestSubject } from '@elastic/eui/lib/test'; -import { EuiLoadingSpinner } from '@elastic/eui'; -import { UnifiedHistogramFetchStatus } from '../types'; - -describe('hits counter', function () { - let props: HitsCounterProps; - let component: ReactWrapper; - - beforeAll(() => { - props = { - hits: { - status: UnifiedHistogramFetchStatus.complete, - total: 2, - }, - }; - }); - - it('expect to render the number of hits', function () { - component = mountWithIntl(); - const hits = findTestSubject(component, 'unifiedHistogramQueryHits'); - expect(hits.text()).toBe('2'); - }); - - it('expect to render 1,899 hits if 1899 hits given', function () { - component = mountWithIntl( - - ); - const hits = findTestSubject(component, 'unifiedHistogramQueryHits'); - expect(hits.text()).toBe('1,899'); - }); - - it('should render the element passed to the append prop', () => { - const appendHitsCounter =
appendHitsCounter
; - component = mountWithIntl(); - expect(findTestSubject(component, 'appendHitsCounter').length).toBe(1); - }); - - it('should render a EuiLoadingSpinner when status is partial', () => { - component = mountWithIntl( - - ); - expect(component.find(EuiLoadingSpinner).length).toBe(1); - }); - - it('should render unifiedHistogramQueryHitsPartial when status is partial', () => { - component = mountWithIntl( - - ); - expect(component.find('[data-test-subj="unifiedHistogramQueryHitsPartial"]').length).toBe(1); - }); - - it('should render unifiedHistogramQueryHits when status is complete', () => { - component = mountWithIntl(); - expect(component.find('[data-test-subj="unifiedHistogramQueryHits"]').length).toBe(1); - }); -}); diff --git a/src/plugins/unified_histogram/public/hits_counter/hits_counter.tsx b/src/plugins/unified_histogram/public/hits_counter/hits_counter.tsx deleted file mode 100644 index b6f1212bfeaed..0000000000000 --- a/src/plugins/unified_histogram/public/hits_counter/hits_counter.tsx +++ /dev/null @@ -1,83 +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 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import type { ReactElement } from 'react'; -import React from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiText, EuiLoadingSpinner } from '@elastic/eui'; -import { FormattedMessage, FormattedNumber } from '@kbn/i18n-react'; -import { i18n } from '@kbn/i18n'; -import { css } from '@emotion/react'; -import type { UnifiedHistogramHitsContext } from '../types'; - -export interface HitsCounterProps { - hits: UnifiedHistogramHitsContext; - append?: ReactElement; -} - -export function HitsCounter({ hits, append }: HitsCounterProps) { - if (!hits.total && hits.status === 'loading') { - return null; - } - - const formattedHits = ( - - - - ); - - const hitsCounterCss = css` - flex-grow: 0; - `; - const hitsCounterTextCss = css` - overflow: hidden; - `; - - return ( - - - - {hits.status === 'partial' && ( - - )} - {hits.status !== 'partial' && ( - - )} - - - {hits.status === 'partial' && ( - - - - )} - {append} - - ); -} diff --git a/src/plugins/unified_histogram/public/layout/hooks/use_lens_suggestions.test.ts b/src/plugins/unified_histogram/public/layout/hooks/use_lens_suggestions.test.ts index 119356af6f63f..f74cc8a3c5925 100644 --- a/src/plugins/unified_histogram/public/layout/hooks/use_lens_suggestions.test.ts +++ b/src/plugins/unified_histogram/public/layout/hooks/use_lens_suggestions.test.ts @@ -137,7 +137,7 @@ describe('useLensSuggestions', () => { currentSuggestion: allSuggestionsMock[0], isOnHistogramMode: true, histogramQuery: { - esql: 'from the-data-view | limit 100 | EVAL timestamp=DATE_TRUNC(30 minute, @timestamp) | stats rows = count(*) by timestamp | rename timestamp as `@timestamp every 30 minute`', + esql: 'from the-data-view | limit 100 | EVAL timestamp=DATE_TRUNC(30 minute, @timestamp) | stats results = count(*) by timestamp | rename timestamp as `@timestamp every 30 minute`', }, suggestionUnsupported: false, }); diff --git a/src/plugins/unified_histogram/public/layout/hooks/use_lens_suggestions.ts b/src/plugins/unified_histogram/public/layout/hooks/use_lens_suggestions.ts index 063e1b7ef89a2..ac1053fd7fa3f 100644 --- a/src/plugins/unified_histogram/public/layout/hooks/use_lens_suggestions.ts +++ b/src/plugins/unified_histogram/public/layout/hooks/use_lens_suggestions.ts @@ -87,7 +87,7 @@ export const useLensSuggestions = ({ const interval = computeInterval(timeRange, data); const language = getAggregateQueryMode(query); const safeQuery = cleanupESQLQueryForLensSuggestions(query[language]); - const esqlQuery = `${safeQuery} | EVAL timestamp=DATE_TRUNC(${interval}, ${dataView.timeFieldName}) | stats rows = count(*) by timestamp | rename timestamp as \`${dataView.timeFieldName} every ${interval}\``; + const esqlQuery = `${safeQuery} | EVAL timestamp=DATE_TRUNC(${interval}, ${dataView.timeFieldName}) | stats results = count(*) by timestamp | rename timestamp as \`${dataView.timeFieldName} every ${interval}\``; const context = { dataViewSpec: dataView?.toSpec(), fieldName: '', @@ -100,8 +100,8 @@ export const useLensSuggestions = ({ }, }, { - id: 'rows', - name: 'rows', + id: 'results', + name: 'results', meta: { type: 'number', }, diff --git a/src/plugins/unified_histogram/public/layout/layout.test.tsx b/src/plugins/unified_histogram/public/layout/layout.test.tsx index a12c8cf46430e..a10df63e7c328 100644 --- a/src/plugins/unified_histogram/public/layout/layout.test.tsx +++ b/src/plugins/unified_histogram/public/layout/layout.test.tsx @@ -10,7 +10,6 @@ import { searchSourceInstanceMock } from '@kbn/data-plugin/common/search/search_ import { mountWithIntl } from '@kbn/test-jest-helpers'; import type { ReactWrapper } from 'enzyme'; import React from 'react'; -import { act } from 'react-dom/test-utils'; import { of } from 'rxjs'; import { Chart } from '../chart'; import { @@ -153,13 +152,6 @@ describe('Layout', () => { height: `${expectedHeight}px`, }); }); - - it('should pass undefined for onResetChartHeight to Chart when layout mode is ResizableLayoutMode.Static', async () => { - const component = await mountComponent({ topPanelHeight: 123 }); - expect(component.find(Chart).prop('onResetChartHeight')).toBeDefined(); - setBreakpoint(component, 's'); - expect(component.find(Chart).prop('onResetChartHeight')).toBeUndefined(); - }); }); describe('topPanelHeight', () => { @@ -167,39 +159,5 @@ describe('Layout', () => { const component = await mountComponent({ topPanelHeight: undefined }); expect(component.find(ResizableLayout).prop('fixedPanelSize')).toBeGreaterThan(0); }); - - it('should reset the fixedPanelSize to the default when onResetChartHeight is called on Chart', async () => { - const component: ReactWrapper = await mountComponent({ - onTopPanelHeightChange: jest.fn((topPanelHeight) => { - component.setProps({ topPanelHeight }); - }), - }); - const defaultTopPanelHeight = component.find(ResizableLayout).prop('fixedPanelSize'); - const newTopPanelHeight = 123; - expect(component.find(ResizableLayout).prop('fixedPanelSize')).not.toBe(newTopPanelHeight); - act(() => { - component.find(ResizableLayout).prop('onFixedPanelSizeChange')!(newTopPanelHeight); - }); - expect(component.find(ResizableLayout).prop('fixedPanelSize')).toBe(newTopPanelHeight); - act(() => { - component.find(Chart).prop('onResetChartHeight')!(); - }); - expect(component.find(ResizableLayout).prop('fixedPanelSize')).toBe(defaultTopPanelHeight); - }); - - it('should pass undefined for onResetChartHeight to Chart when the chart is the default height', async () => { - const component = await mountComponent({ - topPanelHeight: 123, - onTopPanelHeightChange: jest.fn((topPanelHeight) => { - component.setProps({ topPanelHeight }); - }), - }); - expect(component.find(Chart).prop('onResetChartHeight')).toBeDefined(); - act(() => { - component.find(Chart).prop('onResetChartHeight')!(); - }); - component.update(); - expect(component.find(Chart).prop('onResetChartHeight')).toBeUndefined(); - }); }); }); diff --git a/src/plugins/unified_histogram/public/layout/layout.tsx b/src/plugins/unified_histogram/public/layout/layout.tsx index 17eaf65fcde5f..1a175690eb447 100644 --- a/src/plugins/unified_histogram/public/layout/layout.tsx +++ b/src/plugins/unified_histogram/public/layout/layout.tsx @@ -7,7 +7,7 @@ */ import { EuiSpacer, useEuiTheme, useIsWithinBreakpoints } from '@elastic/eui'; -import React, { PropsWithChildren, ReactElement, useMemo, useState } from 'react'; +import React, { PropsWithChildren, ReactElement, useState } from 'react'; import { Observable } from 'rxjs'; import { createHtmlPortalNode, InPortal, OutPortal } from 'react-reverse-portal'; import { css } from '@emotion/css'; @@ -26,7 +26,7 @@ import { ResizableLayoutMode, ResizableLayoutDirection, } from '@kbn/resizable-layout'; -import { Chart } from '../chart'; +import { Chart, checkChartAvailability } from '../chart'; import type { UnifiedHistogramChartContext, UnifiedHistogramServices, @@ -39,6 +39,10 @@ import type { } from '../types'; import { useLensSuggestions } from './hooks/use_lens_suggestions'; +const ChartMemoized = React.memo(Chart); + +const chartSpacer = ; + export interface UnifiedHistogramLayoutProps extends PropsWithChildren { /** * Optional class name to add to the layout container @@ -107,9 +111,9 @@ export interface UnifiedHistogramLayoutProps extends PropsWithChildren */ topPanelHeight?: number; /** - * Append a custom element to the right of the hits count + * This element would replace the default chart toggle buttons */ - appendHitsCounter?: ReactElement; + renderCustomChartToggleActions?: () => ReactElement | undefined; /** * Disable automatic refetching based on props changes, and instead wait for a `refetch` message */ @@ -197,7 +201,7 @@ export const UnifiedHistogramLayout = ({ breakdown, container, topPanelHeight, - appendHitsCounter, + renderCustomChartToggleActions, disableAutoFetching, disableTriggers, disabledActions, @@ -234,6 +238,8 @@ export const UnifiedHistogramLayout = ({ }); const chart = suggestionUnsupported ? undefined : originalChart; + const isChartAvailable = checkChartAvailability({ chart, dataView, isPlainRecord }); + const [topPanelNode] = useState(() => createHtmlPortalNode({ attributes: { class: 'eui-fullHeight' } }) ); @@ -263,17 +269,11 @@ export const UnifiedHistogramLayout = ({ const currentTopPanelHeight = topPanelHeight ?? defaultTopPanelHeight; - const onResetChartHeight = useMemo(() => { - return currentTopPanelHeight !== defaultTopPanelHeight && - panelsMode === ResizableLayoutMode.Resizable - ? () => onTopPanelHeightChange?.(undefined) - : undefined; - }, [currentTopPanelHeight, defaultTopPanelHeight, onTopPanelHeightChange, panelsMode]); - return ( <> - } + renderCustomChartToggleActions={renderCustomChartToggleActions} + appendHistogram={chartSpacer} disableAutoFetching={disableAutoFetching} disableTriggers={disableTriggers} disabledActions={disabledActions} input$={input$} - onResetChartHeight={onResetChartHeight} onChartHiddenChange={onChartHiddenChange} onTimeIntervalChange={onTimeIntervalChange} onBreakdownFieldChange={onBreakdownFieldChange} @@ -311,7 +310,11 @@ export const UnifiedHistogramLayout = ({ withDefaultActions={withDefaultActions} /> - {children} + + {React.isValidElement(children) + ? React.cloneElement(children, { isChartAvailable }) + : children} + { const original = jest.requireActual('@kbn/code-editor'); @@ -50,6 +53,7 @@ describe('', () => { onCancel: jest.fn(), onSubmit: jest.fn(), docLinks: coreMock.createStart().docLinks, + dataViews: dataMock.dataViews, }; testBed = await registerTestBed(FilterEditor, { defaultProps })(); }); @@ -76,4 +80,72 @@ describe('', () => { expect(find('saveFilter').props().disabled).toBe(false); }); }); + describe('handling data view fallback', () => { + let testBed: TestBed; + + beforeEach(async () => { + dataMock.dataViews.get = jest.fn().mockReturnValue(Promise.resolve(dataViewMockList[1])); + const defaultProps: Omit = { + theme: { + euiTheme: {} as unknown as EuiThemeComputed<{}>, + colorMode: 'DARK', + modifications: [], + } as UseEuiTheme<{}>, + filter: { + meta: { + type: 'phase', + index: dataViewMockList[1].id, + } as any, + }, + indexPatterns: [dataViewMockList[0]], + onCancel: jest.fn(), + onSubmit: jest.fn(), + docLinks: coreMock.createStart().docLinks, + dataViews: dataMock.dataViews, + }; + testBed = await registerTestBed(FilterEditor, { defaultProps })(); + }); + + it('renders the right data view to be selected', async () => { + const { exists, component, find } = testBed; + component.update(); + expect(exists('filterIndexPatternsSelect')).toBe(true); + expect(find('filterIndexPatternsSelect').find('input').props().value).toBe( + dataViewMockList[1].getName() + ); + }); + }); + describe('UI renders when data view fallback promise is rejected', () => { + let testBed: TestBed; + + beforeEach(async () => { + dataMock.dataViews.get = jest.fn().mockReturnValue(Promise.reject()); + const defaultProps: Omit = { + theme: { + euiTheme: {} as unknown as EuiThemeComputed<{}>, + colorMode: 'DARK', + modifications: [], + } as UseEuiTheme<{}>, + filter: { + meta: { + type: 'phase', + index: dataViewMockList[1].id, + } as any, + }, + indexPatterns: [dataViewMockList[0]], + onCancel: jest.fn(), + onSubmit: jest.fn(), + docLinks: coreMock.createStart().docLinks, + dataViews: dataMock.dataViews, + }; + testBed = registerTestBed(FilterEditor, { defaultProps })(); + }); + + it('renders the right data view to be selected', async () => { + const { exists, component, find } = await testBed; + component.update(); + expect(exists('filterIndexPatternsSelect')).toBe(true); + expect(find('filterIndexPatternsSelect').find('input').props().value).toBe(''); + }); + }); }); diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/filter_editor.tsx b/src/plugins/unified_search/public/filter_bar/filter_editor/filter_editor.tsx index c3c93edb54ffa..67764134e448a 100644 --- a/src/plugins/unified_search/public/filter_bar/filter_editor/filter_editor.tsx +++ b/src/plugins/unified_search/public/filter_bar/filter_editor/filter_editor.tsx @@ -25,6 +25,7 @@ import { withEuiTheme, EuiTextColor, EuiLink, + EuiLoadingSpinner, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { @@ -43,7 +44,7 @@ import React, { Component } from 'react'; import { i18n } from '@kbn/i18n'; import { XJsonLang } from '@kbn/monaco'; import { DataView } from '@kbn/data-views-plugin/common'; -import { getIndexPatternFromFilter } from '@kbn/data-plugin/public'; +import { DataViewsContract, getIndexPatternFromFilter } from '@kbn/data-plugin/public'; import { CodeEditor } from '@kbn/code-editor'; import { cx } from '@emotion/css'; import { WithEuiThemeProps } from '@elastic/eui/src/services/theme'; @@ -143,42 +144,80 @@ export interface FilterEditorComponentProps { suggestionsAbstraction?: SuggestionsAbstraction; docLinks: DocLinksStart; filtersCount?: number; + dataViews?: DataViewsContract; } export type FilterEditorProps = WithEuiThemeProps & FilterEditorComponentProps; interface State { + indexPatterns: DataView[]; selectedDataView?: DataView; customLabel: string | null; queryDsl: string; isCustomEditorOpen: boolean; localFilter: Filter; + isLoadingDataView?: boolean; } class FilterEditorComponent extends Component { constructor(props: FilterEditorProps) { super(props); - const dataView = this.getIndexPatternFromFilter(); + const dataView = getIndexPatternFromFilter(props.filter, props.indexPatterns); this.state = { + indexPatterns: props.indexPatterns, selectedDataView: dataView, customLabel: props.filter.meta.alias || '', - queryDsl: this.parseFilterToQueryDsl(props.filter), + queryDsl: this.parseFilterToQueryDsl(props.filter, props.indexPatterns), isCustomEditorOpen: this.isUnknownFilterType() || !!this.props.filter?.meta.isMultiIndex, localFilter: dataView ? merge({}, props.filter) : buildEmptyFilter(false), + isLoadingDataView: !Boolean(dataView), }; } componentDidMount() { - const { localFilter, queryDsl, customLabel } = this.state; + const { localFilter, queryDsl, customLabel, selectedDataView } = this.state; this.props.onLocalFilterCreate?.({ filter: localFilter, queryDslFilter: { queryDsl, customLabel }, }); this.props.onLocalFilterUpdate?.(localFilter); + if (!selectedDataView) { + const dataViewId = this.props.filter.meta.index; + if (!dataViewId || !this.props.dataViews) { + this.setState({ isLoadingDataView: false }); + } else { + this.loadDataView(dataViewId, this.props.dataViews); + } + } + } + + /** + * Helper function to load the data view from the index pattern id + * E.g. in Discover there's just one active data view, so filters with different data view id + * Than the currently selected data view need to load the data view from the id to display the filter + * correctly + * @param dataViewId + * @private + */ + private async loadDataView(dataViewId: string, dataViews: DataViewsContract) { + try { + const dataView = await dataViews.get(dataViewId, false); + this.setState({ + selectedDataView: dataView, + isLoadingDataView: false, + indexPatterns: [dataView, ...this.props.indexPatterns], + localFilter: merge({}, this.props.filter), + queryDsl: this.parseFilterToQueryDsl(this.props.filter, this.state.indexPatterns), + }); + } catch (e) { + this.setState({ + isLoadingDataView: false, + }); + } } - private parseFilterToQueryDsl(filter: Filter) { - const dsl = filterToQueryDsl(filter, this.props.indexPatterns); + private parseFilterToQueryDsl(filter: Filter, indexPatterns: DataView[]) { + const dsl = filterToQueryDsl(filter, indexPatterns); return JSON.stringify(dsl, null, 2); } @@ -217,61 +256,67 @@ class FilterEditorComponent extends Component { - + {this.state.isLoadingDataView ? (
- {this.renderIndexPatternInput()} - - {this.state.isCustomEditorOpen - ? this.renderCustomEditor() - : this.renderFiltersBuilderEditor()} - - - - - +
- - - {/* Adding isolation here fixes this bug https://github.com/elastic/kibana/issues/142211 */} - - - - {this.props.mode === 'add' - ? strings.getAddButtonLabel() - : strings.getUpdateButtonLabel()} - - - - - - - - - - - + ) : ( + +
+ {this.renderIndexPatternInput()} + + {this.state.isCustomEditorOpen + ? this.renderCustomEditor() + : this.renderFiltersBuilderEditor()} + + + + + +
+ + + {/* Adding isolation here fixes this bug https://github.com/elastic/kibana/issues/142211 */} + + + + {this.props.mode === 'add' + ? strings.getAddButtonLabel() + : strings.getUpdateButtonLabel()} + + + + + + + + + + + + )}
); } @@ -283,8 +328,8 @@ class FilterEditorComponent extends Component { } if ( - this.props.indexPatterns.length <= 1 && - this.props.indexPatterns.find( + this.state.indexPatterns.length <= 1 && + this.state.indexPatterns.find( (indexPattern) => indexPattern === this.getIndexPatternFromFilter() ) ) { @@ -296,15 +341,16 @@ class FilterEditorComponent extends Component { return null; } const { selectedDataView } = this.state; + return ( <> indexPattern.getName()} + getLabel={(indexPattern) => indexPattern?.getName()} onChange={this.onIndexPatternChange} isClearable={false} data-test-subj="filterIndexPatternsSelect" @@ -381,7 +427,7 @@ class FilterEditorComponent extends Component { @@ -447,7 +493,7 @@ class FilterEditorComponent extends Component { } private getIndexPatternFromFilter() { - return getIndexPatternFromFilter(this.props.filter, this.props.indexPatterns); + return getIndexPatternFromFilter(this.props.filter, this.state.indexPatterns); } private isQueryDslValid = (queryDsl: string) => { @@ -526,7 +572,7 @@ class FilterEditorComponent extends Component { return; } - const newIndex = index || this.props.indexPatterns[0].id!; + const newIndex = index || this.state.indexPatterns[0].id!; try { const body = JSON.parse(queryDsl); return buildCustomFilter(newIndex, body, disabled, negate, customLabel || null, $state.store); @@ -592,7 +638,7 @@ class FilterEditorComponent extends Component { const filter = this.props.filter?.meta.type === FILTERS.CUSTOM || // only convert non-custom filters to custom when DSL changes - queryDsl !== this.parseFilterToQueryDsl(this.props.filter) + queryDsl !== this.parseFilterToQueryDsl(this.props.filter, this.state.indexPatterns) ? this.getFilterFromQueryDsl(queryDsl) : { ...this.props.filter, diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/lib/filter_editor_utils.ts b/src/plugins/unified_search/public/filter_bar/filter_editor/lib/filter_editor_utils.ts index f5b28971ec412..afc91cbe5ddd2 100644 --- a/src/plugins/unified_search/public/filter_bar/filter_editor/lib/filter_editor_utils.ts +++ b/src/plugins/unified_search/public/filter_bar/filter_editor/lib/filter_editor_utils.ts @@ -7,19 +7,42 @@ */ import dateMath from '@kbn/datemath'; -import { Filter } from '@kbn/es-query'; +import { Filter, RangeFilter, ScriptedRangeFilter, isRangeFilter } from '@kbn/es-query'; import { ES_FIELD_TYPES } from '@kbn/field-types'; import isSemverValid from 'semver/functions/valid'; import { isFilterable, IpAddress } from '@kbn/data-plugin/common'; import type { DataView, DataViewField } from '@kbn/data-views-plugin/common'; -import { FILTER_OPERATORS, Operator } from './filter_operators'; +import { FILTER_OPERATORS, OPERATORS, Operator } from './filter_operators'; export function getFieldFromFilter(filter: Filter, indexPattern?: DataView) { return indexPattern?.fields.find((field) => field.name === filter.meta.key); } +function getRangeOperatorFromFilter({ + meta: { params: { gte, gt, lte, lt } = {}, negate }, +}: RangeFilter | ScriptedRangeFilter) { + if (negate) { + // if filter is negated, always use 'is not between' operator + return OPERATORS.NOT_BETWEEN; + } + const left = gte ?? gt; + const right = lte ?? lt; + + if (left !== undefined && right === undefined) { + return OPERATORS.GREATER_OR_EQUAL; + } + + if (left === undefined && right !== undefined) { + return OPERATORS.LESS; + } + return OPERATORS.BETWEEN; +} + export function getOperatorFromFilter(filter: Filter) { return FILTER_OPERATORS.find((operator) => { + if (isRangeFilter(filter)) { + return getRangeOperatorFromFilter(filter) === operator.id; + } return filter.meta.type === operator.type && filter.meta.negate === operator.negate; }); } diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/lib/filter_operators.ts b/src/plugins/unified_search/public/filter_bar/filter_editor/lib/filter_operators.ts index 5bfc6540d37d9..1b54defae5b10 100644 --- a/src/plugins/unified_search/public/filter_bar/filter_editor/lib/filter_operators.ts +++ b/src/plugins/unified_search/public/filter_bar/filter_editor/lib/filter_operators.ts @@ -32,6 +32,14 @@ export const strings = { i18n.translate('unifiedSearch.filter.filterEditor.isBetweenOperatorOptionLabel', { defaultMessage: 'is between', }), + getIsGreaterOrEqualOperatorOptionLabel: () => + i18n.translate('unifiedSearch.filter.filterEditor.greaterThanOrEqualOptionLabel', { + defaultMessage: 'greater or equal', + }), + getLessThanOperatorOptionLabel: () => + i18n.translate('unifiedSearch.filter.filterEditor.lessThanOrEqualOptionLabel', { + defaultMessage: 'less than', + }), getIsNotBetweenOperatorOptionLabel: () => i18n.translate('unifiedSearch.filter.filterEditor.isNotBetweenOperatorOptionLabel', { defaultMessage: 'is not between', @@ -46,10 +54,24 @@ export const strings = { }), }; +export enum OPERATORS { + LESS = 'less', + GREATER_OR_EQUAL = 'greater_or_equal', + BETWEEN = 'between', + IS = 'is', + NOT_BETWEEN = 'not_between', + IS_NOT = 'is_not', + IS_ONE_OF = 'is_one_of', + IS_NOT_ONE_OF = 'is_not_one_of', + EXISTS = 'exists', + DOES_NOT_EXIST = 'does_not_exist', +} + export interface Operator { message: string; type: FILTERS; negate: boolean; + id: OPERATORS; /** * KbnFieldTypes applicable for operator @@ -67,12 +89,14 @@ export const isOperator = { message: strings.getIsOperatorOptionLabel(), type: FILTERS.PHRASE, negate: false, + id: OPERATORS.IS, }; export const isNotOperator = { message: strings.getIsNotOperatorOptionLabel(), type: FILTERS.PHRASE, negate: true, + id: OPERATORS.IS_NOT, }; export const isOneOfOperator = { @@ -80,6 +104,7 @@ export const isOneOfOperator = { type: FILTERS.PHRASES, negate: false, fieldTypes: ['string', 'number', 'date', 'ip', 'geo_point', 'geo_shape'], + id: OPERATORS.IS_ONE_OF, }; export const isNotOneOfOperator = { @@ -87,12 +112,11 @@ export const isNotOneOfOperator = { type: FILTERS.PHRASES, negate: true, fieldTypes: ['string', 'number', 'date', 'ip', 'geo_point', 'geo_shape'], + id: OPERATORS.IS_NOT_ONE_OF, }; -export const isBetweenOperator = { - message: strings.getIsBetweenOperatorOptionLabel(), +const rangeOperatorsSharedProps = { type: FILTERS.RANGE, - negate: false, field: (field: DataViewField) => { if (['number', 'number_range', 'date', 'date_range', 'ip', 'ip_range'].includes(field.type)) return true; @@ -103,30 +127,46 @@ export const isBetweenOperator = { }, }; +export const isBetweenOperator = { + ...rangeOperatorsSharedProps, + message: strings.getIsBetweenOperatorOptionLabel(), + id: OPERATORS.BETWEEN, + negate: false, +}; + +export const isLessThanOperator = { + ...rangeOperatorsSharedProps, + message: strings.getLessThanOperatorOptionLabel(), + id: OPERATORS.LESS, + negate: false, +}; + +export const isGreaterOrEqualOperator = { + ...rangeOperatorsSharedProps, + message: strings.getIsGreaterOrEqualOperatorOptionLabel(), + id: OPERATORS.GREATER_OR_EQUAL, + negate: false, +}; + export const isNotBetweenOperator = { + ...rangeOperatorsSharedProps, message: strings.getIsNotBetweenOperatorOptionLabel(), - type: FILTERS.RANGE, negate: true, - field: (field: DataViewField) => { - if (['number', 'number_range', 'date', 'date_range', 'ip', 'ip_range'].includes(field.type)) - return true; - - if (field.type === 'string' && field.esTypes?.includes(ES_FIELD_TYPES.VERSION)) return true; - - return false; - }, + id: OPERATORS.NOT_BETWEEN, }; export const existsOperator = { message: strings.getExistsOperatorOptionLabel(), type: FILTERS.EXISTS, negate: false, + id: OPERATORS.EXISTS, }; export const doesNotExistOperator = { message: strings.getDoesNotExistOperatorOptionLabel(), type: FILTERS.EXISTS, negate: true, + id: OPERATORS.DOES_NOT_EXIST, }; export const FILTER_OPERATORS: Operator[] = [ @@ -134,6 +174,8 @@ export const FILTER_OPERATORS: Operator[] = [ isNotOperator, isOneOfOperator, isNotOneOfOperator, + isGreaterOrEqualOperator, + isLessThanOperator, isBetweenOperator, isNotBetweenOperator, existsOperator, diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/phrase_value_input.tsx b/src/plugins/unified_search/public/filter_bar/filter_editor/phrase_value_input.tsx index 9328ecfa66c50..e2e2d289d64e7 100644 --- a/src/plugins/unified_search/public/filter_bar/filter_editor/phrase_value_input.tsx +++ b/src/plugins/unified_search/public/filter_bar/filter_editor/phrase_value_input.tsx @@ -19,6 +19,7 @@ import { MIDDLE_TRUNCATION_PROPS, SINGLE_SELECTION_AS_TEXT_PROPS } from './lib/h interface PhraseValueInputProps extends PhraseSuggestorProps { value?: string; onChange: (value: string | number | boolean) => void; + onBlur?: (value: string | number | boolean) => void; intl: InjectedIntl; fullWidth?: boolean; compressed?: boolean; @@ -43,6 +44,7 @@ class PhraseValueInputUI extends PhraseSuggestorUI { id: 'unifiedSearch.filter.filterEditor.valueInputPlaceholder', defaultMessage: 'Enter a value', })} + onBlur={this.props.onBlur} value={this.props.value} onChange={this.props.onChange} field={this.props.field} diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/range_value_input.tsx b/src/plugins/unified_search/public/filter_bar/filter_editor/range_value_input.tsx index 4f35d4a7f2d81..cb24ae53212ee 100644 --- a/src/plugins/unified_search/public/filter_bar/filter_editor/range_value_input.tsx +++ b/src/plugins/unified_search/public/filter_bar/filter_editor/range_value_input.tsx @@ -11,8 +11,9 @@ import { EuiFormControlLayoutDelimited } from '@elastic/eui'; import { InjectedIntl, injectI18n } from '@kbn/i18n-react'; import { get } from 'lodash'; import React from 'react'; -import { useKibana } from '@kbn/kibana-react-plugin/public'; +import { KibanaReactContextValue, useKibana } from '@kbn/kibana-react-plugin/public'; import type { DataViewField } from '@kbn/data-views-plugin/common'; +import { CoreStart } from '@kbn/core/public'; import { ValueInputType } from './value_input_type'; interface RangeParams { @@ -36,19 +37,22 @@ export function isRangeParams(params: any): params is RangeParams { return Boolean(params && 'from' in params && 'to' in params); } -function RangeValueInputUI(props: Props) { - const kibana = useKibana(); +export const formatDateChange = ( + value: string | number | boolean, + kibana: KibanaReactContextValue> +) => { + if (typeof value !== 'string' && typeof value !== 'number') return value; - const formatDateChange = (value: string | number | boolean) => { - if (typeof value !== 'string' && typeof value !== 'number') return value; + const tzConfig = kibana.services.uiSettings!.get('dateFormat:tz'); + const tz = !tzConfig || tzConfig === 'Browser' ? moment.tz.guess() : tzConfig; + const momentParsedValue = moment(value).tz(tz); + if (momentParsedValue.isValid()) return momentParsedValue?.format('YYYY-MM-DDTHH:mm:ss.SSSZ'); - const tzConfig = kibana.services.uiSettings!.get('dateFormat:tz'); - const tz = !tzConfig || tzConfig === 'Browser' ? moment.tz.guess() : tzConfig; - const momentParsedValue = moment(value).tz(tz); - if (momentParsedValue.isValid()) return momentParsedValue?.format('YYYY-MM-DDTHH:mm:ss.SSSZ'); + return value; +}; - return value; - }; +function RangeValueInputUI(props: Props) { + const kibana = useKibana(); const onFromChange = (value: string | number | boolean) => { if (typeof value !== 'string' && typeof value !== 'number') { @@ -81,7 +85,7 @@ function RangeValueInputUI(props: Props) { value={props.value ? props.value.from : undefined} onChange={onFromChange} onBlur={(value) => { - onFromChange(formatDateChange(value)); + onFromChange(formatDateChange(value, kibana)); }} placeholder={props.intl.formatMessage({ id: 'unifiedSearch.filter.filterEditor.rangeStartInputPlaceholder', @@ -99,7 +103,7 @@ function RangeValueInputUI(props: Props) { value={props.value ? props.value.to : undefined} onChange={onToChange} onBlur={(value) => { - onToChange(formatDateChange(value)); + onToChange(formatDateChange(value, kibana)); }} placeholder={props.intl.formatMessage({ id: 'unifiedSearch.filter.filterEditor.rangeEndInputPlaceholder', diff --git a/src/plugins/unified_search/public/filter_bar/filter_item/filter_item.tsx b/src/plugins/unified_search/public/filter_bar/filter_item/filter_item.tsx index 596a32ea0a2f5..aed639ec76d0d 100644 --- a/src/plugins/unified_search/public/filter_bar/filter_item/filter_item.tsx +++ b/src/plugins/unified_search/public/filter_bar/filter_item/filter_item.tsx @@ -34,7 +34,7 @@ import React, { useCallback, } from 'react'; import type { DocLinksStart, IUiSettingsClient } from '@kbn/core/public'; -import { DataView } from '@kbn/data-views-plugin/public'; +import { DataView, DataViewsContract } from '@kbn/data-views-plugin/public'; import { css } from '@emotion/react'; import { getIndexPatternFromFilter, getDisplayValueFromFilter } from '@kbn/data-plugin/public'; import { FilterEditor } from '../filter_editor/filter_editor'; @@ -62,6 +62,7 @@ export interface FilterItemProps extends WithCloseFilterEditorConfirmModalProps readOnly?: boolean; suggestionsAbstraction?: SuggestionsAbstraction; filtersCount?: number; + dataViews?: DataViewsContract; } type FilterPopoverProps = HTMLAttributes & EuiPopoverProps; @@ -399,6 +400,7 @@ function FilterItemComponent(props: FilterItemProps) { suggestionsAbstraction={props.suggestionsAbstraction} docLinks={docLinks} filtersCount={props.filtersCount} + dataViews={props.dataViews} />
, ]} diff --git a/src/plugins/unified_search/public/filter_bar/filter_item/filter_items.tsx b/src/plugins/unified_search/public/filter_bar/filter_item/filter_items.tsx index f0e558f75ba71..941e842d30f6d 100644 --- a/src/plugins/unified_search/public/filter_bar/filter_item/filter_items.tsx +++ b/src/plugins/unified_search/public/filter_bar/filter_item/filter_items.tsx @@ -47,7 +47,7 @@ export interface FilterItemsProps { const FilterItemsUI = React.memo(function FilterItemsUI(props: FilterItemsProps) { const groupRef = useRef(null); const kibana = useKibana(); - const { appName, usageCollection, uiSettings, docLinks } = kibana.services; + const { appName, data, usageCollection, uiSettings, docLinks } = kibana.services; const { readOnly = false } = props; if (!uiSettings) return null; @@ -84,6 +84,7 @@ const FilterItemsUI = React.memo(function FilterItemsUI(props: FilterItemsProps) readOnly={readOnly} suggestionsAbstraction={props.suggestionsAbstraction} filtersCount={props.filters.length} + dataViews={data?.dataViews} /> )); diff --git a/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.tsx b/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.tsx index 97ea1f364b9d2..b789930dcda8d 100644 --- a/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.tsx +++ b/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.tsx @@ -105,22 +105,26 @@ export function FilterItem({ const conditionalOperationType = getBooleanRelationType(filter); const { euiTheme } = useEuiTheme(); let field: DataViewField | undefined; - let operator: Operator | undefined; let params: Filter['meta']['params']; const isMaxNesting = isMaxFilterNesting(path); if (!conditionalOperationType) { field = getFieldFromFilter(filter, dataView!); if (field) { - operator = getOperatorFromFilter(filter); params = getFilterParams(filter); } } + const [operator, setOperator] = useState(() => { + if (!conditionalOperationType && field) { + return getOperatorFromFilter(filter); + } + }); const [multiValueFilterParams, setMultiValueFilterParams] = useState< Array >(Array.isArray(params) ? params : []); const onHandleField = useCallback( (selectedField: DataViewField) => { + setOperator(undefined); dispatch({ type: 'updateFilter', payload: { dest: { path, index }, field: selectedField }, @@ -131,6 +135,7 @@ export function FilterItem({ const onHandleOperator = useCallback( (selectedOperator: Operator) => { + setOperator(selectedOperator); dispatch({ type: 'updateFilter', payload: { dest: { path, index }, field, operator: selectedOperator }, diff --git a/src/plugins/unified_search/public/filters_builder/filter_item/params_editor_input.tsx b/src/plugins/unified_search/public/filters_builder/filter_item/params_editor_input.tsx index 7d2cf5dc9c8d0..c3138f7a14e24 100644 --- a/src/plugins/unified_search/public/filters_builder/filter_item/params_editor_input.tsx +++ b/src/plugins/unified_search/public/filters_builder/filter_item/params_editor_input.tsx @@ -11,6 +11,7 @@ import { i18n } from '@kbn/i18n'; import { DataView, DataViewField } from '@kbn/data-views-plugin/common'; import { EuiFieldText } from '@elastic/eui'; import { Filter } from '@kbn/es-query'; +import { useKibana } from '@kbn/kibana-react-plugin/public'; import { PhraseValueInput, PhrasesValuesInput, @@ -19,6 +20,8 @@ import { } from '../../filter_bar/filter_editor'; import type { Operator } from '../../filter_bar/filter_editor'; import { SuggestionsAbstraction } from '../../typeahead/suggestions_component'; +import { OPERATORS } from '../../filter_bar/filter_editor/lib/filter_operators'; +import { formatDateChange } from '../../filter_bar/filter_editor/range_value_input'; export const strings = { getSelectFieldPlaceholderLabel: () => @@ -70,6 +73,7 @@ export function ParamsEditorInput({ filtersForSuggestions, suggestionsAbstraction, }: ParamsEditorInputProps) { + const kibana = useKibana(); switch (operator?.type) { case 'exists': return null; @@ -106,16 +110,51 @@ export function ParamsEditorInput({ /> ); case 'range': - return ( - - ); + switch (operator.id) { + case OPERATORS.GREATER_OR_EQUAL: + return ( + { + onParamsChange({ from: formatDateChange(value, kibana) }); + }} + field={field!} + value={isRangeParams(params) && params.from ? `${params.from}` : undefined} + onChange={(value) => onParamsChange({ from: value })} + fullWidth + invalid={invalid} + disabled={disabled} + /> + ); + case OPERATORS.LESS: + return ( + { + onParamsChange({ to: formatDateChange(value, kibana) }); + }} + compressed + indexPattern={dataView} + field={field!} + value={isRangeParams(params) && params.to ? `${params.to}` : undefined} + onChange={(value) => onParamsChange({ to: value })} + fullWidth + invalid={invalid} + disabled={disabled} + /> + ); + default: + return ( + + ); + } default: const placeholderText = getPlaceholderText(Boolean(field), Boolean(operator?.type)); return ( diff --git a/src/plugins/unified_search/public/query_string_input/filter_editor_wrapper.tsx b/src/plugins/unified_search/public/query_string_input/filter_editor_wrapper.tsx index 6f801b2a32f04..cb3094e66260f 100644 --- a/src/plugins/unified_search/public/query_string_input/filter_editor_wrapper.tsx +++ b/src/plugins/unified_search/public/query_string_input/filter_editor_wrapper.tsx @@ -119,6 +119,7 @@ export const FilterEditorWrapper = React.memo(function FilterEditorWrapper({ filtersForSuggestions={filtersForSuggestions} suggestionsAbstraction={suggestionsAbstraction} docLinks={docLinks} + dataViews={data.dataViews} /> )}
diff --git a/src/plugins/vis_type_markdown/public/markdown_vis.scss b/src/plugins/vis_type_markdown/public/markdown_vis.scss index 97cfc4b151c77..923888db5652f 100644 --- a/src/plugins/vis_type_markdown/public/markdown_vis.scss +++ b/src/plugins/vis_type_markdown/public/markdown_vis.scss @@ -16,7 +16,10 @@ flex-grow: 1; } - .mkdEditor { - height: 100%; + .mkdEditor, + .euiFormControlLayout__childrenWrapper, + .euiFormControlLayout--euiTextArea, + .visEditor--markdown__textarea { + height: 100% } } diff --git a/src/plugins/visualizations/kibana.jsonc b/src/plugins/visualizations/kibana.jsonc index 69caa82b50030..9d1c6c1da0e58 100644 --- a/src/plugins/visualizations/kibana.jsonc +++ b/src/plugins/visualizations/kibana.jsonc @@ -17,7 +17,6 @@ "navigation", "embeddable", "inspector", - "savedObjects", "screenshotMode", "presentationUtil", "dataViews", @@ -40,7 +39,8 @@ "requiredBundles": [ "kibanaUtils", "kibanaReact", - "charts" + "charts", + "savedObjects", ], "extraPublicDirs": [ "common/constants", diff --git a/test/accessibility/apps/discover.ts b/test/accessibility/apps/discover.ts index 3f9a1ef9bce0c..4deb2acb66d74 100644 --- a/test/accessibility/apps/discover.ts +++ b/test/accessibility/apps/discover.ts @@ -159,24 +159,15 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await a11y.testAppSnapshot(); }); - it('a11y test for chart options panel', async () => { - await testSubjects.click('unifiedHistogramChartOptionsToggle'); - await a11y.testAppSnapshot(); - }); - it('a11y test for data grid with hidden chart', async () => { - await testSubjects.click('unifiedHistogramChartToggle'); + await PageObjects.discover.closeHistogramPanel(); await a11y.testAppSnapshot(); - await testSubjects.click('unifiedHistogramChartOptionsToggle'); - await testSubjects.click('unifiedHistogramChartToggle'); + await PageObjects.discover.openHistogramPanel(); }); it('a11y test for time interval panel', async () => { - await testSubjects.click('unifiedHistogramChartOptionsToggle'); - await testSubjects.click('unifiedHistogramTimeIntervalPanel'); + await testSubjects.click('unifiedHistogramTimeIntervalSelectorButton'); await a11y.testAppSnapshot(); - await testSubjects.click('contextMenuPanelTitleButton'); - await testSubjects.click('unifiedHistogramChartOptionsToggle'); }); it('a11y test for data grid sort panel', async () => { @@ -205,7 +196,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { it('a11y test for data grid with collapsed side bar', async () => { await PageObjects.discover.closeSidebar(); await a11y.testAppSnapshot(); - await PageObjects.discover.toggleSidebarCollapse(); + await PageObjects.discover.openSidebar(); }); it('a11y test for adding a field from side bar', async () => { diff --git a/test/functional/apps/discover/group1/_discover.ts b/test/functional/apps/discover/group1/_discover.ts index a041939f2b809..0210c7d8cc7f2 100644 --- a/test/functional/apps/discover/group1/_discover.ts +++ b/test/functional/apps/discover/group1/_discover.ts @@ -114,10 +114,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { it('should show correct initial chart interval of Auto', async function () { await PageObjects.timePicker.setDefaultAbsoluteRange(); await PageObjects.discover.waitUntilSearchingHasFinished(); - await testSubjects.click('unifiedHistogramQueryHits'); // to cancel out tooltips + await testSubjects.click('discoverQueryHits'); // to cancel out tooltips const actualInterval = await PageObjects.discover.getChartInterval(); - const expectedInterval = 'Auto'; + const expectedInterval = 'auto'; expect(actualInterval).to.be(expectedInterval); }); diff --git a/test/functional/apps/discover/group1/_discover_histogram.ts b/test/functional/apps/discover/group1/_discover_histogram.ts index 64e9b0e47dc90..ad5563e78f918 100644 --- a/test/functional/apps/discover/group1/_discover_histogram.ts +++ b/test/functional/apps/discover/group1/_discover_histogram.ts @@ -156,6 +156,15 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const chartCanvasExist = await elasticChart.canvasExists(); expect(chartCanvasExist).to.be(true); const chartIntervalIconTip = await PageObjects.discover.getChartIntervalWarningIcon(); + expect(chartIntervalIconTip).to.be(false); + }); + it('should visualize monthly data with different years scaled to seconds', async () => { + const from = 'Jan 1, 2010 @ 00:00:00.000'; + const to = 'Mar 21, 2019 @ 00:00:00.000'; + await prepareTest({ from, to }, 'Second'); + const chartCanvasExist = await elasticChart.canvasExists(); + expect(chartCanvasExist).to.be(true); + const chartIntervalIconTip = await PageObjects.discover.getChartIntervalWarningIcon(); expect(chartIntervalIconTip).to.be(true); }); it('should allow hide/show histogram, persisted in url state', async () => { @@ -164,8 +173,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await prepareTest({ from, to }); let canvasExists = await elasticChart.canvasExists(); expect(canvasExists).to.be(true); - await testSubjects.click('unifiedHistogramChartOptionsToggle'); - await testSubjects.click('unifiedHistogramChartToggle'); + await PageObjects.discover.toggleChartVisibility(); await retry.try(async () => { canvasExists = await elasticChart.canvasExists(); expect(canvasExists).to.be(false); @@ -174,8 +182,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await browser.refresh(); canvasExists = await elasticChart.canvasExists(); expect(canvasExists).to.be(false); - await testSubjects.click('unifiedHistogramChartOptionsToggle'); - await testSubjects.click('unifiedHistogramChartToggle'); + await PageObjects.discover.toggleChartVisibility(); await PageObjects.header.waitUntilLoadingHasFinished(); await retry.try(async () => { canvasExists = await elasticChart.canvasExists(); @@ -189,8 +196,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await prepareTest({ from, to }); // close chart for saved search - await testSubjects.click('unifiedHistogramChartOptionsToggle'); - await testSubjects.click('unifiedHistogramChartToggle'); + await PageObjects.discover.toggleChartVisibility(); let canvasExists: boolean; await retry.try(async () => { canvasExists = await elasticChart.canvasExists(); @@ -212,8 +218,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { expect(canvasExists).to.be(false); // open chart for saved search - await testSubjects.click('unifiedHistogramChartOptionsToggle'); - await testSubjects.click('unifiedHistogramChartToggle'); + await PageObjects.discover.toggleChartVisibility(); await retry.waitFor(`Discover histogram to be displayed`, async () => { canvasExists = await elasticChart.canvasExists(); return canvasExists; @@ -235,8 +240,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }); it('should show permitted hidden histogram state when returning back to discover', async () => { // close chart - await testSubjects.click('unifiedHistogramChartOptionsToggle'); - await testSubjects.click('unifiedHistogramChartToggle'); + await PageObjects.discover.toggleChartVisibility(); let canvasExists: boolean; await retry.try(async () => { canvasExists = await elasticChart.canvasExists(); @@ -248,8 +252,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.header.waitUntilLoadingHasFinished(); // open chart - await testSubjects.click('unifiedHistogramChartOptionsToggle'); - await testSubjects.click('unifiedHistogramChartToggle'); + await PageObjects.discover.toggleChartVisibility(); await retry.try(async () => { canvasExists = await elasticChart.canvasExists(); expect(canvasExists).to.be(true); @@ -266,8 +269,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { expect(canvasExists).to.be(true); // close chart - await testSubjects.click('unifiedHistogramChartOptionsToggle'); - await testSubjects.click('unifiedHistogramChartToggle'); + await PageObjects.discover.toggleChartVisibility(); await retry.try(async () => { canvasExists = await elasticChart.canvasExists(); expect(canvasExists).to.be(false); @@ -278,8 +280,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.common.navigateToApp('discover'); await PageObjects.discover.waitUntilSearchingHasFinished(); // Make sure the chart is visible - await testSubjects.click('unifiedHistogramChartOptionsToggle'); - await testSubjects.click('unifiedHistogramChartToggle'); + await PageObjects.discover.toggleChartVisibility(); await PageObjects.discover.waitUntilSearchingHasFinished(); // type an invalid search query, hit refresh await queryBar.setQuery('this is > not valid'); diff --git a/test/functional/apps/discover/group2/_data_grid.ts b/test/functional/apps/discover/group2/_data_grid.ts index 2facbc95c93ce..cdce56db6e856 100644 --- a/test/functional/apps/discover/group2/_data_grid.ts +++ b/test/functional/apps/discover/group2/_data_grid.ts @@ -71,17 +71,17 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { it('should hide elements beneath the table when in full screen mode regardless of their z-index', async () => { await retry.try(async () => { - expect(await isVisible('unifiedHistogramQueryHits')).to.be(true); + expect(await isVisible('discover-dataView-switch-link')).to.be(true); expect(await isVisible('unifiedHistogramResizableButton')).to.be(true); }); await testSubjects.click('dataGridFullScreenButton'); await retry.try(async () => { - expect(await isVisible('unifiedHistogramQueryHits')).to.be(false); + expect(await isVisible('discover-dataView-switch-link')).to.be(false); expect(await isVisible('unifiedHistogramResizableButton')).to.be(false); }); await testSubjects.click('dataGridFullScreenButton'); await retry.try(async () => { - expect(await isVisible('unifiedHistogramQueryHits')).to.be(true); + expect(await isVisible('discover-dataView-switch-link')).to.be(true); expect(await isVisible('unifiedHistogramResizableButton')).to.be(true); }); }); diff --git a/test/functional/apps/discover/group3/_panels_toggle.ts b/test/functional/apps/discover/group3/_panels_toggle.ts new file mode 100644 index 0000000000000..d471969d3528f --- /dev/null +++ b/test/functional/apps/discover/group3/_panels_toggle.ts @@ -0,0 +1,261 @@ +/* + * 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 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import expect from '@kbn/expect'; +import { FtrProviderContext } from '../ftr_provider_context'; + +export default function ({ getService, getPageObjects }: FtrProviderContext) { + const esArchiver = getService('esArchiver'); + const kibanaServer = getService('kibanaServer'); + const testSubjects = getService('testSubjects'); + const monacoEditor = getService('monacoEditor'); + const PageObjects = getPageObjects([ + 'settings', + 'common', + 'discover', + 'header', + 'timePicker', + 'unifiedFieldList', + ]); + const security = getService('security'); + const defaultSettings = { + defaultIndex: 'logstash-*', + hideAnnouncements: true, + }; + + describe('discover panels toggle', function () { + before(async () => { + await security.testUser.setRoles(['kibana_admin', 'test_logstash_reader']); + await esArchiver.loadIfNeeded('test/functional/fixtures/es_archiver/logstash_functional'); + await kibanaServer.importExport.load('test/functional/fixtures/kbn_archiver/discover'); + }); + + after(async () => { + await kibanaServer.importExport.unload('test/functional/fixtures/kbn_archiver/discover'); + await kibanaServer.uiSettings.replace({}); + await kibanaServer.savedObjects.cleanStandardList(); + }); + + async function checkSidebarAndHistogram({ + shouldSidebarBeOpen, + shouldHistogramBeOpen, + isChartAvailable, + totalHits, + }: { + shouldSidebarBeOpen: boolean; + shouldHistogramBeOpen: boolean; + isChartAvailable: boolean; + totalHits: string; + }) { + expect(await PageObjects.discover.getHitCount()).to.be(totalHits); + + if (shouldSidebarBeOpen) { + expect(await PageObjects.discover.isSidebarPanelOpen()).to.be(true); + await testSubjects.existOrFail('unifiedFieldListSidebar__toggle-collapse'); + await testSubjects.missingOrFail('dscShowSidebarButton'); + } else { + expect(await PageObjects.discover.isSidebarPanelOpen()).to.be(false); + await testSubjects.missingOrFail('unifiedFieldListSidebar__toggle-collapse'); + await testSubjects.existOrFail('dscShowSidebarButton'); + } + + if (isChartAvailable) { + expect(await PageObjects.discover.isChartVisible()).to.be(shouldHistogramBeOpen); + if (shouldHistogramBeOpen) { + await testSubjects.existOrFail('dscPanelsToggleInHistogram'); + await testSubjects.existOrFail('dscHideHistogramButton'); + + await testSubjects.missingOrFail('dscPanelsToggleInPage'); + await testSubjects.missingOrFail('dscShowHistogramButton'); + } else { + await testSubjects.existOrFail('dscPanelsToggleInPage'); + await testSubjects.existOrFail('dscShowHistogramButton'); + + await testSubjects.missingOrFail('dscPanelsToggleInHistogram'); + await testSubjects.missingOrFail('dscHideHistogramButton'); + } + } else { + expect(await PageObjects.discover.isChartVisible()).to.be(false); + await testSubjects.missingOrFail('dscPanelsToggleInHistogram'); + await testSubjects.missingOrFail('dscHideHistogramButton'); + await testSubjects.missingOrFail('dscShowHistogramButton'); + + if (shouldSidebarBeOpen) { + await testSubjects.missingOrFail('dscPanelsToggleInPage'); + } else { + await testSubjects.existOrFail('dscPanelsToggleInPage'); + } + } + } + + function checkPanelsToggle({ + isChartAvailable, + totalHits, + }: { + isChartAvailable: boolean; + totalHits: string; + }) { + it('sidebar can be toggled', async () => { + await checkSidebarAndHistogram({ + shouldSidebarBeOpen: true, + shouldHistogramBeOpen: true, + isChartAvailable, + totalHits, + }); + + await PageObjects.discover.closeSidebar(); + + await checkSidebarAndHistogram({ + shouldSidebarBeOpen: false, + shouldHistogramBeOpen: true, + isChartAvailable, + totalHits, + }); + + await PageObjects.discover.openSidebar(); + + await checkSidebarAndHistogram({ + shouldSidebarBeOpen: true, + shouldHistogramBeOpen: true, + isChartAvailable, + totalHits, + }); + }); + + if (isChartAvailable) { + it('histogram can be toggled', async () => { + await checkSidebarAndHistogram({ + shouldSidebarBeOpen: true, + shouldHistogramBeOpen: true, + isChartAvailable, + totalHits, + }); + + await PageObjects.discover.closeHistogramPanel(); + + await checkSidebarAndHistogram({ + shouldSidebarBeOpen: true, + shouldHistogramBeOpen: false, + isChartAvailable, + totalHits, + }); + + await PageObjects.discover.openHistogramPanel(); + + await checkSidebarAndHistogram({ + shouldSidebarBeOpen: true, + shouldHistogramBeOpen: true, + isChartAvailable, + totalHits, + }); + }); + + it('sidebar and histogram can be toggled', async () => { + await checkSidebarAndHistogram({ + shouldSidebarBeOpen: true, + shouldHistogramBeOpen: true, + isChartAvailable, + totalHits, + }); + + await PageObjects.discover.closeSidebar(); + await PageObjects.discover.closeHistogramPanel(); + + await checkSidebarAndHistogram({ + shouldSidebarBeOpen: false, + shouldHistogramBeOpen: false, + isChartAvailable, + totalHits, + }); + + await PageObjects.discover.openSidebar(); + await PageObjects.discover.openHistogramPanel(); + + await checkSidebarAndHistogram({ + shouldSidebarBeOpen: true, + shouldHistogramBeOpen: true, + isChartAvailable, + totalHits, + }); + }); + } + } + + describe('time based data view', function () { + before(async function () { + await PageObjects.timePicker.setDefaultAbsoluteRangeViaUiSettings(); + await kibanaServer.uiSettings.update(defaultSettings); + await PageObjects.common.navigateToApp('discover'); + await PageObjects.header.waitUntilLoadingHasFinished(); + await PageObjects.discover.waitUntilSearchingHasFinished(); + await PageObjects.unifiedFieldList.waitUntilSidebarHasLoaded(); + }); + + checkPanelsToggle({ isChartAvailable: true, totalHits: '14,004' }); + }); + + describe('non-time based data view', function () { + before(async function () { + await PageObjects.timePicker.setDefaultAbsoluteRangeViaUiSettings(); + await kibanaServer.uiSettings.update(defaultSettings); + await PageObjects.common.navigateToApp('discover'); + await PageObjects.header.waitUntilLoadingHasFinished(); + await PageObjects.discover.createAdHocDataView('log*', false); + await PageObjects.unifiedFieldList.waitUntilSidebarHasLoaded(); + }); + + checkPanelsToggle({ isChartAvailable: false, totalHits: '14,004' }); + }); + + describe('text-based with histogram chart', function () { + before(async function () { + await PageObjects.timePicker.setDefaultAbsoluteRangeViaUiSettings(); + await kibanaServer.uiSettings.update(defaultSettings); + await PageObjects.common.navigateToApp('discover'); + await PageObjects.header.waitUntilLoadingHasFinished(); + await PageObjects.discover.selectTextBaseLang(); + await PageObjects.unifiedFieldList.waitUntilSidebarHasLoaded(); + }); + + checkPanelsToggle({ isChartAvailable: true, totalHits: '10' }); + }); + + describe('text-based with aggs chart', function () { + before(async function () { + await PageObjects.timePicker.setDefaultAbsoluteRangeViaUiSettings(); + await kibanaServer.uiSettings.update(defaultSettings); + await PageObjects.common.navigateToApp('discover'); + await PageObjects.header.waitUntilLoadingHasFinished(); + await PageObjects.discover.selectTextBaseLang(); + await monacoEditor.setCodeEditorValue( + 'from logstash-* | stats avg(bytes) by extension | limit 100' + ); + await testSubjects.click('querySubmitButton'); + await PageObjects.header.waitUntilLoadingHasFinished(); + await PageObjects.unifiedFieldList.waitUntilSidebarHasLoaded(); + }); + + checkPanelsToggle({ isChartAvailable: true, totalHits: '5' }); + }); + + describe('text-based without a time field', function () { + before(async function () { + await PageObjects.timePicker.setDefaultAbsoluteRangeViaUiSettings(); + await kibanaServer.uiSettings.update(defaultSettings); + await PageObjects.common.navigateToApp('discover'); + await PageObjects.header.waitUntilLoadingHasFinished(); + await PageObjects.discover.createAdHocDataView('log*', false); + await PageObjects.header.waitUntilLoadingHasFinished(); + await PageObjects.discover.selectTextBaseLang(); + await PageObjects.unifiedFieldList.waitUntilSidebarHasLoaded(); + }); + + checkPanelsToggle({ isChartAvailable: false, totalHits: '10' }); + }); + }); +} diff --git a/test/functional/apps/discover/group3/_request_counts.ts b/test/functional/apps/discover/group3/_request_counts.ts index a1038b3f7e4ee..d462155a3e029 100644 --- a/test/functional/apps/discover/group3/_request_counts.ts +++ b/test/functional/apps/discover/group3/_request_counts.ts @@ -240,7 +240,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { savedSearch: 'esql test', query1: 'from logstash-* | where bytes > 1000 | stats countB = count(bytes) ', query2: 'from logstash-* | where bytes < 2000 | stats countB = count(bytes) ', - savedSearchesRequests: 4, + savedSearchesRequests: 3, setQuery: (query) => monacoEditor.setCodeEditorValue(query), }); }); diff --git a/test/functional/apps/discover/group3/_sidebar.ts b/test/functional/apps/discover/group3/_sidebar.ts index 313c350209930..cae06dd375b46 100644 --- a/test/functional/apps/discover/group3/_sidebar.ts +++ b/test/functional/apps/discover/group3/_sidebar.ts @@ -273,13 +273,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }); it('should collapse when clicked', async function () { - await PageObjects.discover.toggleSidebarCollapse(); - await testSubjects.existOrFail('discover-sidebar'); + await PageObjects.discover.closeSidebar(); + await testSubjects.existOrFail('dscShowSidebarButton'); await testSubjects.missingOrFail('fieldList'); }); it('should expand when clicked', async function () { - await PageObjects.discover.toggleSidebarCollapse(); + await PageObjects.discover.openSidebar(); await testSubjects.existOrFail('discover-sidebar'); await testSubjects.existOrFail('fieldList'); }); diff --git a/test/functional/apps/discover/group3/index.ts b/test/functional/apps/discover/group3/index.ts index 848bdc84def4d..e2e0706cd6b4a 100644 --- a/test/functional/apps/discover/group3/index.ts +++ b/test/functional/apps/discover/group3/index.ts @@ -27,5 +27,6 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) { loadTestFile(require.resolve('./_doc_viewer')); loadTestFile(require.resolve('./_view_mode_toggle')); loadTestFile(require.resolve('./_unsaved_changes_badge')); + loadTestFile(require.resolve('./_panels_toggle')); }); } diff --git a/test/functional/apps/discover/group4/_esql_view.ts b/test/functional/apps/discover/group4/_esql_view.ts index 2b6547152970d..fd9060f9b9ec8 100644 --- a/test/functional/apps/discover/group4/_esql_view.ts +++ b/test/functional/apps/discover/group4/_esql_view.ts @@ -52,7 +52,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { expect(await testSubjects.exists('addFilter')).to.be(true); expect(await testSubjects.exists('dscViewModeDocumentButton')).to.be(true); expect(await testSubjects.exists('unifiedHistogramChart')).to.be(true); - expect(await testSubjects.exists('unifiedHistogramQueryHits')).to.be(true); + expect(await testSubjects.exists('discoverQueryHits')).to.be(true); expect(await testSubjects.exists('discoverAlertsButton')).to.be(true); expect(await testSubjects.exists('shareTopNavButton')).to.be(true); expect(await testSubjects.exists('docTableExpandToggleColumn')).to.be(true); @@ -74,7 +74,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { expect(await testSubjects.exists('dscViewModeDocumentButton')).to.be(false); // when Lens suggests a table, we render an ESQL based histogram expect(await testSubjects.exists('unifiedHistogramChart')).to.be(true); - expect(await testSubjects.exists('unifiedHistogramQueryHits')).to.be(true); + expect(await testSubjects.exists('discoverQueryHits')).to.be(true); expect(await testSubjects.exists('discoverAlertsButton')).to.be(true); expect(await testSubjects.exists('shareTopNavButton')).to.be(true); expect(await testSubjects.exists('dataGridColumnSortingButton')).to.be(false); diff --git a/test/functional/page_objects/discover_page.ts b/test/functional/page_objects/discover_page.ts index 3ec60eae8e407..658e235c77d33 100644 --- a/test/functional/page_objects/discover_page.ts +++ b/test/functional/page_objects/discover_page.ts @@ -215,12 +215,26 @@ export class DiscoverPageObject extends FtrService { ); } - public async chooseBreakdownField(field: string) { - await this.comboBox.set('unifiedHistogramBreakdownFieldSelector', field); + public async chooseBreakdownField(field: string, value?: string) { + await this.retry.try(async () => { + await this.testSubjects.click('unifiedHistogramBreakdownSelectorButton'); + await this.testSubjects.existOrFail('unifiedHistogramBreakdownSelectorSelectable'); + }); + + await ( + await this.testSubjects.find('unifiedHistogramBreakdownSelectorSelectorSearch') + ).type(field); + + const option = await this.find.byCssSelector( + `[data-test-subj="unifiedHistogramBreakdownSelectorSelectable"] .euiSelectableListItem[value="${ + value ?? field + }"]` + ); + await option.click(); } public async clearBreakdownField() { - await this.comboBox.clear('unifiedHistogramBreakdownFieldSelector'); + await this.chooseBreakdownField('No breakdown', '__EMPTY_SELECTOR_OPTION__'); } public async chooseLensChart(chart: string) { @@ -248,36 +262,52 @@ export class DiscoverPageObject extends FtrService { } public async toggleChartVisibility() { - await this.testSubjects.moveMouseTo('unifiedHistogramChartOptionsToggle'); - await this.testSubjects.click('unifiedHistogramChartOptionsToggle'); - await this.testSubjects.exists('unifiedHistogramChartToggle'); - await this.testSubjects.click('unifiedHistogramChartToggle'); + if (await this.isChartVisible()) { + await this.testSubjects.click('dscHideHistogramButton'); + } else { + await this.testSubjects.click('dscShowHistogramButton'); + } + await this.header.waitUntilLoadingHasFinished(); + } + + public async openHistogramPanel() { + await this.testSubjects.click('dscShowHistogramButton'); + await this.header.waitUntilLoadingHasFinished(); + } + + public async closeHistogramPanel() { + await this.testSubjects.click('dscHideHistogramButton'); await this.header.waitUntilLoadingHasFinished(); } public async getChartInterval() { - await this.testSubjects.click('unifiedHistogramChartOptionsToggle'); - await this.testSubjects.click('unifiedHistogramTimeIntervalPanel'); - const selectedOption = await this.find.byCssSelector(`.unifiedHistogramIntervalSelected`); - return selectedOption.getVisibleText(); + const button = await this.testSubjects.find('unifiedHistogramTimeIntervalSelectorButton'); + return await button.getAttribute('data-selected-value'); } public async getChartIntervalWarningIcon() { - await this.testSubjects.click('unifiedHistogramChartOptionsToggle'); await this.header.waitUntilLoadingHasFinished(); - return await this.find.existsByCssSelector('.euiToolTipAnchor'); + return await this.find.existsByCssSelector( + '[data-test-subj="unifiedHistogramRendered"] .euiToolTipAnchor' + ); } - public async setChartInterval(interval: string) { - await this.testSubjects.click('unifiedHistogramChartOptionsToggle'); - await this.testSubjects.click('unifiedHistogramTimeIntervalPanel'); - await this.testSubjects.click(`unifiedHistogramTimeInterval-${interval}`); + public async setChartInterval(intervalTitle: string) { + await this.retry.try(async () => { + await this.testSubjects.click('unifiedHistogramTimeIntervalSelectorButton'); + await this.testSubjects.existOrFail('unifiedHistogramTimeIntervalSelectorSelectable'); + }); + + const option = await this.find.byCssSelector( + `[data-test-subj="unifiedHistogramTimeIntervalSelectorSelectable"] .euiSelectableListItem[title="${intervalTitle}"]` + ); + await option.click(); return await this.header.waitUntilLoadingHasFinished(); } public async getHitCount() { await this.header.waitUntilLoadingHasFinished(); - return await this.testSubjects.getVisibleText('unifiedHistogramQueryHits'); + return await this.testSubjects.getVisibleText('discoverQueryHits'); } public async getHitCountInt() { @@ -398,8 +428,12 @@ export class DiscoverPageObject extends FtrService { return await Promise.all(marks.map((mark) => mark.getVisibleText())); } - public async toggleSidebarCollapse() { - return await this.testSubjects.click('unifiedFieldListSidebar__toggle'); + public async openSidebar() { + await this.testSubjects.click('dscShowSidebarButton'); + + await this.retry.waitFor('sidebar to appear', async () => { + return await this.isSidebarPanelOpen(); + }); } public async closeSidebar() { @@ -410,6 +444,13 @@ export class DiscoverPageObject extends FtrService { }); } + public async isSidebarPanelOpen() { + return ( + (await this.testSubjects.exists('fieldList')) && + (await this.testSubjects.exists('unifiedFieldListSidebar__toggle-collapse')) + ); + } + public async editField(field: string) { await this.retry.try(async () => { await this.unifiedFieldList.pressEnterFieldListItemToggle(field); diff --git a/tsconfig.base.json b/tsconfig.base.json index 406b2f3dda838..a4f658e7acb62 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -1100,6 +1100,8 @@ "@kbn/ml-url-state/*": ["x-pack/packages/ml/url_state/*"], "@kbn/mock-idp-plugin": ["packages/kbn-mock-idp-plugin"], "@kbn/mock-idp-plugin/*": ["packages/kbn-mock-idp-plugin/*"], + "@kbn/mock-idp-utils": ["packages/kbn-mock-idp-utils"], + "@kbn/mock-idp-utils/*": ["packages/kbn-mock-idp-utils/*"], "@kbn/monaco": ["packages/kbn-monaco"], "@kbn/monaco/*": ["packages/kbn-monaco/*"], "@kbn/monitoring-collection-plugin": ["x-pack/plugins/monitoring_collection"], diff --git a/versions.json b/versions.json index 8406528bb4428..ce91f8f76bb7e 100644 --- a/versions.json +++ b/versions.json @@ -13,16 +13,10 @@ "currentMajor": true, "previousMinor": true }, - { - "version": "8.11.4", - "branch": "8.11", - "currentMajor": true, - "previousMinor": true - }, { "version": "7.17.17", "branch": "7.17", "previousMajor": true } ] -} \ No newline at end of file +} diff --git a/x-pack/examples/lens_embeddable_inline_editing_example/public/flyout.tsx b/x-pack/examples/lens_embeddable_inline_editing_example/public/flyout.tsx index f916abbad18f2..3fde509b112ad 100644 --- a/x-pack/examples/lens_embeddable_inline_editing_example/public/flyout.tsx +++ b/x-pack/examples/lens_embeddable_inline_editing_example/public/flyout.tsx @@ -86,6 +86,7 @@ function InlineEditingContent({ const style = css` padding: 0; position: relative; + height: 100%; } `; @@ -104,6 +105,7 @@ function InlineEditingContent({ `} direction="column" ref={containerRef} + gutterSize="none" /> ); diff --git a/x-pack/packages/kbn-elastic-assistant-common/impl/capabilities/README.md b/x-pack/packages/kbn-elastic-assistant-common/impl/capabilities/README.md new file mode 100644 index 0000000000000..5a471245e0449 --- /dev/null +++ b/x-pack/packages/kbn-elastic-assistant-common/impl/capabilities/README.md @@ -0,0 +1,51 @@ +### Feature Capabilities + +Feature capabilities are an object describing specific capabilities of the assistant, like whether a feature like streaming is enabled, and are defined in the sibling `./index.ts` file within this `kbn-elastic-assistant-common` package. These capabilities can be registered for a given plugin through the assistant server, and so do not need to be plumbed through the `ElasticAssistantProvider`. + +Storage and accessor functions are made available via the `AppContextService`, and exposed to clients via the`/internal/elastic_assistant/capabilities` route, which can be fetched by clients using the `useCapabilities()` UI hook. + +### Registering Capabilities + +To register a capability on plugin start, add the following in the consuming plugin's `start()`, specifying any number of capabilities you would like to explicitly declare: + +```ts +plugins.elasticAssistant.registerFeatures(APP_UI_ID, { + assistantModelEvaluation: config.experimentalFeatures.assistantModelEvaluation, + assistantStreamingEnabled: config.experimentalFeatures.assistantStreamingEnabled, +}); +``` + +### Declaring Feature Capabilities +Default feature capabilities are declared in `x-pack/packages/kbn-elastic-assistant-common/impl/capabilities/index.ts`: + +```ts +export type AssistantFeatures = { [K in keyof typeof defaultAssistantFeatures]: boolean }; + +export const defaultAssistantFeatures = Object.freeze({ + assistantModelEvaluation: false, + assistantStreamingEnabled: false, +}); +``` + +### Using Capabilities Client Side +Capabilities can be fetched client side using the `useCapabilities()` hook ala: + +```ts +const { data: capabilities } = useCapabilities({ http, toasts }); +const { assistantModelEvaluation: modelEvaluatorEnabled, assistantStreamingEnabled } = capabilities ?? defaultAssistantFeatures; +``` + +### Using Capabilities Server Side +Or server side within a route (or elsewhere) via the `assistantContext`: + +```ts +const assistantContext = await context.elasticAssistant; +const pluginName = getPluginNameFromRequest({ request, logger }); +const registeredFeatures = assistantContext.getRegisteredFeatures(pluginName); +if (!registeredFeatures.assistantModelEvaluation) { + return response.notFound(); +} +``` + +> [!NOTE] +> Note, just as with [registering arbitrary tools](https://github.com/elastic/kibana/pull/172234), features are registered for a specific plugin, where the plugin name that corresponds to your application is defined in the `x-kbn-context` header of requests made from your application, which may be different than your plugin's registered `APP_ID`. diff --git a/x-pack/packages/kbn-elastic-assistant-common/impl/capabilities/index.ts b/x-pack/packages/kbn-elastic-assistant-common/impl/capabilities/index.ts new file mode 100644 index 0000000000000..1d404309f73e3 --- /dev/null +++ b/x-pack/packages/kbn-elastic-assistant-common/impl/capabilities/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. + */ + +/** + * Interface for features available to the elastic assistant + */ +export type AssistantFeatures = { [K in keyof typeof defaultAssistantFeatures]: boolean }; + +/** + * Default features available to the elastic assistant + */ +export const defaultAssistantFeatures = Object.freeze({ + assistantModelEvaluation: false, + assistantStreamingEnabled: false, +}); diff --git a/x-pack/packages/kbn-elastic-assistant-common/index.ts b/x-pack/packages/kbn-elastic-assistant-common/index.ts index f17e13a33af3d..c64b02160d6e4 100644 --- a/x-pack/packages/kbn-elastic-assistant-common/index.ts +++ b/x-pack/packages/kbn-elastic-assistant-common/index.ts @@ -5,6 +5,9 @@ * 2.0. */ +export { defaultAssistantFeatures } from './impl/capabilities'; +export type { AssistantFeatures } from './impl/capabilities'; + export { getAnonymizedValue } from './impl/data_anonymization/get_anonymized_value'; export { diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/api/capabilities/capabilities.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/api/capabilities/capabilities.test.tsx new file mode 100644 index 0000000000000..b41d7ac144554 --- /dev/null +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/api/capabilities/capabilities.test.tsx @@ -0,0 +1,43 @@ +/* + * 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 { HttpSetup } from '@kbn/core-http-browser'; + +import { getCapabilities } from './capabilities'; +import { API_ERROR } from '../../translations'; + +jest.mock('@kbn/core-http-browser'); + +const mockHttp = { + fetch: jest.fn(), +} as unknown as HttpSetup; + +describe('Capabilities API tests', () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + describe('getCapabilities', () => { + it('calls the internal assistant API for fetching assistant capabilities', async () => { + await getCapabilities({ http: mockHttp }); + + expect(mockHttp.fetch).toHaveBeenCalledWith('/internal/elastic_assistant/capabilities', { + method: 'GET', + signal: undefined, + version: '1', + }); + }); + + it('returns API_ERROR when the response status is error', async () => { + (mockHttp.fetch as jest.Mock).mockResolvedValue({ status: API_ERROR }); + + const result = await getCapabilities({ http: mockHttp }); + + expect(result).toEqual({ status: API_ERROR }); + }); + }); +}); diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/api/capabilities/capabilities.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/api/capabilities/capabilities.tsx new file mode 100644 index 0000000000000..794b89e1775f8 --- /dev/null +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/api/capabilities/capabilities.tsx @@ -0,0 +1,44 @@ +/* + * 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 { HttpSetup, IHttpFetchError } from '@kbn/core-http-browser'; +import { AssistantFeatures } from '@kbn/elastic-assistant-common'; + +export interface GetCapabilitiesParams { + http: HttpSetup; + signal?: AbortSignal | undefined; +} + +export type GetCapabilitiesResponse = AssistantFeatures; + +/** + * API call for fetching assistant capabilities + * + * @param {Object} options - The options object. + * @param {HttpSetup} options.http - HttpSetup + * @param {AbortSignal} [options.signal] - AbortSignal + * + * @returns {Promise} + */ +export const getCapabilities = async ({ + http, + signal, +}: GetCapabilitiesParams): Promise => { + try { + const path = `/internal/elastic_assistant/capabilities`; + + const response = await http.fetch(path, { + method: 'GET', + signal, + version: '1', + }); + + return response as GetCapabilitiesResponse; + } catch (error) { + return error as IHttpFetchError; + } +}; diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/api/capabilities/use_capabilities.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/api/capabilities/use_capabilities.test.tsx new file mode 100644 index 0000000000000..c9e60b806d1bf --- /dev/null +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/api/capabilities/use_capabilities.test.tsx @@ -0,0 +1,49 @@ +/* + * 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 { renderHook } from '@testing-library/react-hooks'; + +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import type { ReactNode } from 'react'; +import React from 'react'; +import { useCapabilities, UseCapabilitiesParams } from './use_capabilities'; + +const statusResponse = { assistantModelEvaluation: true, assistantStreamingEnabled: false }; + +const http = { + fetch: jest.fn().mockResolvedValue(statusResponse), +}; +const toasts = { + addError: jest.fn(), +}; +const defaultProps = { http, toasts } as unknown as UseCapabilitiesParams; + +const createWrapper = () => { + const queryClient = new QueryClient(); + // eslint-disable-next-line react/display-name + return ({ children }: { children: ReactNode }) => ( + {children} + ); +}; + +describe('useFetchRelatedCases', () => { + it(`should make http request to fetch capabilities`, () => { + renderHook(() => useCapabilities(defaultProps), { + wrapper: createWrapper(), + }); + + expect(defaultProps.http.fetch).toHaveBeenCalledWith( + '/internal/elastic_assistant/capabilities', + { + method: 'GET', + version: '1', + signal: new AbortController().signal, + } + ); + expect(toasts.addError).not.toHaveBeenCalled(); + }); +}); diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/api/capabilities/use_capabilities.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/api/capabilities/use_capabilities.tsx new file mode 100644 index 0000000000000..5d52a2801fb9e --- /dev/null +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/api/capabilities/use_capabilities.tsx @@ -0,0 +1,52 @@ +/* + * 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 type { UseQueryResult } from '@tanstack/react-query'; +import { useQuery } from '@tanstack/react-query'; +import type { HttpSetup, IHttpFetchError, ResponseErrorBody } from '@kbn/core-http-browser'; +import type { IToasts } from '@kbn/core-notifications-browser'; +import { i18n } from '@kbn/i18n'; +import { getCapabilities, GetCapabilitiesResponse } from './capabilities'; + +const CAPABILITIES_QUERY_KEY = ['elastic-assistant', 'capabilities']; + +export interface UseCapabilitiesParams { + http: HttpSetup; + toasts?: IToasts; +} +/** + * Hook for getting the feature capabilities of the assistant + * + * @param {Object} options - The options object. + * @param {HttpSetup} options.http - HttpSetup + * @param {IToasts} options.toasts - IToasts + * + * @returns {useQuery} hook for getting the status of the Knowledge Base + */ +export const useCapabilities = ({ + http, + toasts, +}: UseCapabilitiesParams): UseQueryResult => { + return useQuery({ + queryKey: CAPABILITIES_QUERY_KEY, + queryFn: async ({ signal }) => { + return getCapabilities({ http, signal }); + }, + retry: false, + keepPreviousData: true, + // Deprecated, hoist to `queryCache` w/in `QueryClient. See: https://stackoverflow.com/a/76961109 + onError: (error: IHttpFetchError) => { + if (error.name !== 'AbortError') { + toasts?.addError(error.body && error.body.message ? new Error(error.body.message) : error, { + title: i18n.translate('xpack.elasticAssistant.capabilities.statusError', { + defaultMessage: 'Error fetching capabilities', + }), + }); + } + }, + }); +}; diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/index.test.tsx index 84a2ac40a6f24..a8dc5b1aa1db7 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/index.test.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/index.test.tsx @@ -6,53 +6,14 @@ */ import { renderHook } from '@testing-library/react-hooks'; -import React from 'react'; -import { AssistantProvider, useAssistantContext } from '.'; -import { httpServiceMock } from '@kbn/core-http-browser-mocks'; -import { actionTypeRegistryMock } from '@kbn/triggers-actions-ui-plugin/public/application/action_type_registry.mock'; -import { AssistantAvailability } from '../..'; +import { useAssistantContext } from '.'; import { useLocalStorage } from 'react-use'; +import { TestProviders } from '../mock/test_providers/test_providers'; jest.mock('react-use', () => ({ useLocalStorage: jest.fn().mockReturnValue(['456', jest.fn()]), })); -const actionTypeRegistry = actionTypeRegistryMock.create(); -const mockGetInitialConversations = jest.fn(() => ({})); -const mockGetComments = jest.fn(() => []); -const mockHttp = httpServiceMock.createStartContract({ basePath: '/test' }); -const mockAssistantAvailability: AssistantAvailability = { - hasAssistantPrivilege: false, - hasConnectorsAllPrivilege: true, - hasConnectorsReadPrivilege: true, - isAssistantEnabled: true, -}; - -const ContextWrapper: React.FC = ({ children }) => ( - - {children} - -); describe('AssistantContext', () => { beforeEach(() => jest.clearAllMocks()); @@ -66,30 +27,29 @@ describe('AssistantContext', () => { }); test('it should return the httpFetch function', async () => { - const { result } = renderHook(useAssistantContext, { wrapper: ContextWrapper }); - const http = await result.current.http; + const { result } = renderHook(useAssistantContext, { wrapper: TestProviders }); const path = '/path/to/resource'; - await http.fetch(path); + await result.current.http.fetch(path); - expect(mockHttp.fetch).toBeCalledWith(path); + expect(result.current.http.fetch).toBeCalledWith(path); }); test('getConversationId defaults to provided id', async () => { - const { result } = renderHook(useAssistantContext, { wrapper: ContextWrapper }); + const { result } = renderHook(useAssistantContext, { wrapper: TestProviders }); const id = result.current.getConversationId('123'); expect(id).toEqual('123'); }); test('getConversationId uses local storage id when no id is provided ', async () => { - const { result } = renderHook(useAssistantContext, { wrapper: ContextWrapper }); + const { result } = renderHook(useAssistantContext, { wrapper: TestProviders }); const id = result.current.getConversationId(); expect(id).toEqual('456'); }); test('getConversationId defaults to Welcome when no local storage id and no id is provided ', async () => { (useLocalStorage as jest.Mock).mockReturnValue([undefined, jest.fn()]); - const { result } = renderHook(useAssistantContext, { wrapper: ContextWrapper }); + const { result } = renderHook(useAssistantContext, { wrapper: TestProviders }); const id = result.current.getConversationId(); expect(id).toEqual('Welcome'); }); diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/index.tsx index 50a3211f74f3c..3f3102a4ea6bf 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/index.tsx @@ -13,6 +13,7 @@ import type { IToasts } from '@kbn/core-notifications-browser'; import { ActionTypeRegistryContract } from '@kbn/triggers-actions-ui-plugin/public'; import { useLocalStorage } from 'react-use'; import type { DocLinksStart } from '@kbn/core-doc-links-browser'; +import { defaultAssistantFeatures } from '@kbn/elastic-assistant-common'; import { WELCOME_CONVERSATION_TITLE } from '../assistant/use_conversation/translations'; import { updatePromptContexts } from './helpers'; import type { @@ -37,6 +38,7 @@ import { } from './constants'; import { CONVERSATIONS_TAB, SettingsTabs } from '../assistant/settings/assistant_settings'; import { AssistantAvailability, AssistantTelemetry } from './types'; +import { useCapabilities } from '../assistant/api/capabilities/use_capabilities'; export interface ShowAssistantOverlayProps { showOverlay: boolean; @@ -53,7 +55,6 @@ export interface AssistantProviderProps { actionTypeRegistry: ActionTypeRegistryContract; alertsIndexPattern?: string; assistantAvailability: AssistantAvailability; - assistantStreamingEnabled?: boolean; assistantTelemetry?: AssistantTelemetry; augmentMessageCodeBlocks: (currentConversation: Conversation) => CodeBlockDetails[][]; baseAllow: string[]; @@ -87,7 +88,6 @@ export interface AssistantProviderProps { }) => EuiCommentProps[]; http: HttpSetup; getInitialConversations: () => Record; - modelEvaluatorEnabled?: boolean; nameSpace?: string; setConversations: React.Dispatch>>; setDefaultAllow: React.Dispatch>; @@ -163,7 +163,6 @@ export const AssistantProvider: React.FC = ({ actionTypeRegistry, alertsIndexPattern, assistantAvailability, - assistantStreamingEnabled = false, assistantTelemetry, augmentMessageCodeBlocks, baseAllow, @@ -179,7 +178,6 @@ export const AssistantProvider: React.FC = ({ getComments, http, getInitialConversations, - modelEvaluatorEnabled = false, nameSpace = DEFAULT_ASSISTANT_NAMESPACE, setConversations, setDefaultAllow, @@ -298,6 +296,11 @@ export const AssistantProvider: React.FC = ({ [localStorageLastConversationId] ); + // Fetch assistant capabilities + const { data: capabilities } = useCapabilities({ http, toasts }); + const { assistantModelEvaluation: modelEvaluatorEnabled, assistantStreamingEnabled } = + capabilities ?? defaultAssistantFeatures; + const value = useMemo( () => ({ actionTypeRegistry, diff --git a/x-pack/packages/ml/in_memory_table/hooks/use_table_state.ts b/x-pack/packages/ml/in_memory_table/hooks/use_table_state.ts index fbb0cbddfb742..726c3eb0dd268 100644 --- a/x-pack/packages/ml/in_memory_table/hooks/use_table_state.ts +++ b/x-pack/packages/ml/in_memory_table/hooks/use_table_state.ts @@ -11,7 +11,7 @@ import { EuiInMemoryTable, Direction, Pagination } from '@elastic/eui'; /** * Returned type for useTableState hook */ -export interface UseTableState { +export interface UseTableState { /** * Callback function which gets called whenever the pagination or sorting state of the table changed */ @@ -36,7 +36,7 @@ export interface UseTableState { * @param {string} initialSortField - field name to sort by default * @param {string} initialSortDirection - default to 'asc' */ -export function useTableState( +export function useTableState( items: T[], initialSortField: string, initialSortDirection: 'asc' | 'desc' = 'asc' diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/mock/test_providers/test_providers.tsx b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/mock/test_providers/test_providers.tsx index b2bd63f8101aa..175380cc5169a 100644 --- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/mock/test_providers/test_providers.tsx +++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/mock/test_providers/test_providers.tsx @@ -13,6 +13,7 @@ import { euiDarkVars } from '@kbn/ui-theme'; import React from 'react'; import { ThemeProvider } from 'styled-components'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { DataQualityProvider } from '../../data_quality_panel/data_quality_context'; interface Props { @@ -39,38 +40,52 @@ export const TestProvidersComponent: React.FC = ({ children, isILMAvailab hasConnectorsReadPrivilege: true, isAssistantEnabled: true, }; + const queryClient = new QueryClient({ + defaultOptions: { + queries: { + retry: false, + }, + }, + logger: { + log: jest.fn(), + warn: jest.fn(), + error: () => {}, + }, + }); return ( ({ eui: euiDarkVars, darkMode: true })}> - - + - {children} - - + + {children} + + + ); diff --git a/x-pack/plugins/alerting/server/integration_tests/__snapshots__/alert_as_data_fields.test.ts.snap b/x-pack/plugins/alerting/server/integration_tests/__snapshots__/alert_as_data_fields.test.ts.snap index 3f3785b89f619..95f1fca184d56 100644 --- a/x-pack/plugins/alerting/server/integration_tests/__snapshots__/alert_as_data_fields.test.ts.snap +++ b/x-pack/plugins/alerting/server/integration_tests/__snapshots__/alert_as_data_fields.test.ts.snap @@ -8973,7 +8973,11 @@ Object { } `; -exports[`Alert as data fields checks detect AAD fields changes for: transform_health 1`] = `undefined`; +exports[`Alert as data fields checks detect AAD fields changes for: transform_health 1`] = ` +Object { + "fieldMap": Object {}, +} +`; exports[`Alert as data fields checks detect AAD fields changes for: xpack.ml.anomaly_detection_alert 1`] = ` Object { @@ -9087,7 +9091,11 @@ Object { } `; -exports[`Alert as data fields checks detect AAD fields changes for: xpack.ml.anomaly_detection_jobs_health 1`] = `undefined`; +exports[`Alert as data fields checks detect AAD fields changes for: xpack.ml.anomaly_detection_jobs_health 1`] = ` +Object { + "fieldMap": Object {}, +} +`; exports[`Alert as data fields checks detect AAD fields changes for: xpack.synthetics.alerts.monitorStatus 1`] = ` Object { diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx index b3e36fc8bebb9..4d3186c784447 100644 --- a/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx @@ -17,7 +17,7 @@ import { import { i18n } from '@kbn/i18n'; import { ALERT_STATUS_ACTIVE } from '@kbn/rule-data-utils'; import { TypeOf } from '@kbn/typed-react-router-config'; -import React, { useMemo } from 'react'; +import React, { useCallback, useMemo } from 'react'; import { ServiceHealthStatus } from '../../../../../common/service_health_status'; import { ServiceInventoryFieldName, @@ -358,6 +358,16 @@ export function ServiceList({ ] ); + const handleSort = useCallback( + (itemsToSort, sortField, sortDirection) => + sortFn( + itemsToSort, + sortField as ServiceInventoryFieldName, + sortDirection + ), + [sortFn] + ); + return ( @@ -405,13 +415,7 @@ export function ServiceList({ initialSortField={initialSortField} initialSortDirection={initialSortDirection} initialPageSize={initialPageSize} - sortFn={(itemsToSort, sortField, sortDirection) => - sortFn( - itemsToSort, - sortField as ServiceInventoryFieldName, - sortDirection - ) - } + sortFn={handleSort} /> diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/instance_actions_menu/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/instance_actions_menu/index.tsx index 450c5ec061971..ff88e61fd5132 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/instance_actions_menu/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/instance_actions_menu/index.tsx @@ -19,10 +19,7 @@ import { AllDatasetsLocatorParams, ALL_DATASETS_LOCATOR_ID, } from '@kbn/deeplinks-observability/locators'; -import { - NODE_LOGS_LOCATOR_ID, - NodeLogsLocatorParams, -} from '@kbn/logs-shared-plugin/common'; +import { getLogsLocatorsFromUrlService } from '@kbn/logs-shared-plugin/common'; import { isJavaAgentName } from '../../../../../../common/agent_name'; import { SERVICE_NODE_NAME } from '../../../../../../common/es_fields/apm'; import { useApmPluginContext } from '../../../../../context/apm_plugin/use_apm_plugin_context'; @@ -63,8 +60,7 @@ export function InstanceActionsMenu({ const allDatasetsLocator = share.url.locators.get( ALL_DATASETS_LOCATOR_ID )!; - const nodeLogsLocator = - share.url.locators.get(NODE_LOGS_LOCATOR_ID)!; + const { nodeLogsLocator } = getLogsLocatorsFromUrlService(share.url); if (isPending(status)) { return ( diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/instance_actions_menu/menu_sections.ts b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/instance_actions_menu/menu_sections.ts index 8401cc6bbc744..3f258ea089a15 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/instance_actions_menu/menu_sections.ts +++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/instance_actions_menu/menu_sections.ts @@ -8,10 +8,10 @@ import { i18n } from '@kbn/i18n'; import { IBasePath } from '@kbn/core/public'; import moment from 'moment'; -import type { LocatorPublic } from '@kbn/share-plugin/public'; import { AllDatasetsLocatorParams } from '@kbn/deeplinks-observability/locators'; +import type { LocatorPublic } from '@kbn/share-plugin/public'; import { NodeLogsLocatorParams } from '@kbn/logs-shared-plugin/common'; -import { getNodeLogsHref } from '../../../../shared/links/observability_logs_link'; +import { findInventoryFields } from '@kbn/metrics-data-access-plugin/common'; import { APIReturnType } from '../../../../../services/rest/create_call_apm_api'; import { getInfraHref } from '../../../../shared/links/infra_link'; import { @@ -58,20 +58,17 @@ export function getMenuSections({ : undefined; const infraMetricsQuery = getInfraMetricsQuery(instanceDetails['@timestamp']); - const podLogsHref = getNodeLogsHref( - 'pod', - podId!, + const podLogsHref = nodeLogsLocator.getRedirectUrl({ + nodeField: findInventoryFields('pod').id, + nodeId: podId!, time, - allDatasetsLocator, - nodeLogsLocator - ); - const containerLogsHref = getNodeLogsHref( - 'container', - containerId!, + }); + + const containerLogsHref = nodeLogsLocator.getRedirectUrl({ + nodeField: findInventoryFields('container').id, + nodeId: containerId!, time, - allDatasetsLocator, - nodeLogsLocator - ); + }); const podActions: Action[] = [ { diff --git a/x-pack/plugins/apm/public/components/app/settings/general_settings/index.tsx b/x-pack/plugins/apm/public/components/app/settings/general_settings/index.tsx index 8926e2155592d..c9d3351ce2ebc 100644 --- a/x-pack/plugins/apm/public/components/app/settings/general_settings/index.tsx +++ b/x-pack/plugins/apm/public/components/app/settings/general_settings/index.tsx @@ -20,6 +20,7 @@ import { apmEnableContinuousRollups, enableAgentExplorerView, apmEnableProfilingIntegration, + apmEnableTableSearchBar, } from '@kbn/observability-plugin/common'; import { isEmpty } from 'lodash'; import React from 'react'; @@ -41,6 +42,7 @@ const apmSettingsKeys = [ apmEnableServiceMetrics, apmEnableContinuousRollups, enableAgentExplorerView, + apmEnableTableSearchBar, apmEnableProfilingIntegration, ]; diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_item.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_item.tsx index 39ad6f4945dff..35f559d81f982 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_item.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_item.tsx @@ -10,7 +10,10 @@ import { i18n } from '@kbn/i18n'; import React, { ReactNode, useRef, useState, useEffect } from 'react'; import { euiStyled } from '@kbn/kibana-react-plugin/common'; import { useTheme } from '../../../../../../hooks/use_theme'; -import { isRumAgentName } from '../../../../../../../common/agent_name'; +import { + isMobileAgentName, + isRumAgentName, +} from '../../../../../../../common/agent_name'; import { TRACE_ID, TRANSACTION_ID, @@ -335,6 +338,18 @@ function RelatedErrors({ kuery += ` and ${TRANSACTION_ID} : "${item.doc.transaction?.id}"`; } + const mobileHref = apmRouter.link( + `/mobile-services/{serviceName}/errors-and-crashes`, + { + path: { serviceName: item.doc.service.name }, + query: { + ...query, + serviceGroup: '', + kuery, + }, + } + ); + const href = apmRouter.link(`/services/{serviceName}/errors`, { path: { serviceName: item.doc.service.name }, query: { @@ -349,7 +364,7 @@ function RelatedErrors({ // eslint-disable-next-line jsx-a11y/click-events-have-key-events
e.stopPropagation()}> diff --git a/x-pack/plugins/apm/public/components/shared/links/observability_logs_link.ts b/x-pack/plugins/apm/public/components/shared/links/observability_logs_link.ts deleted file mode 100644 index 72ae29960942e..0000000000000 --- a/x-pack/plugins/apm/public/components/shared/links/observability_logs_link.ts +++ /dev/null @@ -1,89 +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 type { - LogsLocatorParams, - NodeLogsLocatorParams, -} from '@kbn/logs-shared-plugin/common'; -import { AllDatasetsLocatorParams } from '@kbn/deeplinks-observability/locators'; -import { LocatorPublic } from '@kbn/share-plugin/common'; -import moment from 'moment'; -import { DurationInputObject } from 'moment'; - -type NodeType = 'host' | 'pod' | 'container'; - -const NodeTypeMapping: Record = { - host: 'host.name', - container: 'container.id', - pod: 'kubernetes.pod.uid', -}; - -export const getNodeLogsHref = ( - nodeType: NodeType, - id: string, - time: number | undefined, - allDatasetsLocator: LocatorPublic, - infraNodeLocator?: LocatorPublic -): string => { - if (infraNodeLocator) - return infraNodeLocator?.getRedirectUrl({ - nodeId: id!, - nodeType, - time, - }); - - return allDatasetsLocator.getRedirectUrl({ - query: getNodeQuery(nodeType, id), - ...(time - ? { - timeRange: { - from: getTimeRangeStartFromTime(time), - to: getTimeRangeEndFromTime(time), - }, - } - : {}), - }); -}; - -export const getTraceLogsHref = ( - traceId: string, - time: number | undefined, - allDatasetsLocator: LocatorPublic, - infraLogsLocator: LocatorPublic -): string => { - const query = `trace.id:"${traceId}" OR (not trace.id:* AND "${traceId}")`; - - if (infraLogsLocator) - return infraLogsLocator.getRedirectUrl({ - filter: query, - time, - }); - - return allDatasetsLocator.getRedirectUrl({ - query: { language: 'kuery', query }, - ...(time - ? { - timeRange: { - from: getTimeRangeStartFromTime(time), - to: getTimeRangeEndFromTime(time), - }, - } - : {}), - }); -}; - -const getNodeQuery = (type: NodeType, id: string) => { - return { language: 'kuery', query: `${NodeTypeMapping[type]}: ${id}` }; -}; - -const defaultTimeRangeFromPositionOffset: DurationInputObject = { hours: 1 }; - -const getTimeRangeStartFromTime = (time: number): string => - moment(time).subtract(defaultTimeRangeFromPositionOffset).toISOString(); - -const getTimeRangeEndFromTime = (time: number): string => - moment(time).add(defaultTimeRangeFromPositionOffset).toISOString(); diff --git a/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx b/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx index 41512f00d22b6..88d9e88c5e7ba 100644 --- a/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx @@ -14,7 +14,7 @@ import { useLegacyUrlParams } from '../../../context/url_params_context/use_url_ import { fromQuery, toQuery } from '../links/url_helpers'; // TODO: this should really be imported from EUI -export interface ITableColumn { +export interface ITableColumn { name: ReactNode; actions?: Array>; field?: string; @@ -26,7 +26,7 @@ export interface ITableColumn { render?: (value: any, item: T) => unknown; } -interface Props { +interface Props { items: T[]; columns: Array>; initialPageSize: number; @@ -59,7 +59,7 @@ export type SortFunction = ( sortDirection: 'asc' | 'desc' ) => T[]; -function UnoptimizedManagedTable(props: Props) { +function UnoptimizedManagedTable(props: Props) { const history = useHistory(); const { items, diff --git a/x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections.test.ts b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections.test.ts index 7d7a720f27cfc..dd1cfa389453f 100644 --- a/x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections.test.ts +++ b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections.test.ts @@ -7,11 +7,6 @@ import { createMemoryHistory } from 'history'; import { IBasePath } from '@kbn/core/public'; -import { LocatorPublic } from '@kbn/share-plugin/common'; -import { - LogsLocatorParams, - NodeLogsLocatorParams, -} from '@kbn/logs-shared-plugin/common'; import { Transaction } from '../../../../typings/es_schemas/ui/transaction'; import { getSections } from './sections'; import { @@ -19,7 +14,7 @@ import { ApmRouter, } from '../../routing/apm_route_config'; import { - infraLocatorsMock, + logsLocatorsMock, observabilityLogExplorerLocatorsMock, } from '../../../context/apm_plugin/mock_apm_plugin_context'; @@ -30,11 +25,11 @@ const apmRouter = { } as ApmRouter; const { allDatasetsLocator } = observabilityLogExplorerLocatorsMock; -const { nodeLogsLocator, logsLocator } = infraLocatorsMock; +const { nodeLogsLocator, traceLogsLocator } = logsLocatorsMock; -const expectInfraLocatorsToBeCalled = () => { +const expectLogsLocatorsToBeCalled = () => { expect(nodeLogsLocator.getRedirectUrl).toBeCalledTimes(3); - expect(logsLocator.getRedirectUrl).toBeCalledTimes(1); + expect(traceLogsLocator.getRedirectUrl).toBeCalledTimes(1); }; describe('Transaction action menu', () => { @@ -70,9 +65,7 @@ describe('Transaction action menu', () => { location, apmRouter, allDatasetsLocator, - logsLocator: logsLocator as unknown as LocatorPublic, - nodeLogsLocator: - nodeLogsLocator as unknown as LocatorPublic, + logsLocators: logsLocatorsMock, infraLinksAvailable: false, rangeFrom: 'now-24h', rangeTo: 'now', @@ -121,7 +114,7 @@ describe('Transaction action menu', () => { }, ], ]); - expectInfraLocatorsToBeCalled(); + expectLogsLocatorsToBeCalled(); }); it('shows pod and required sections only', () => { @@ -138,10 +131,8 @@ describe('Transaction action menu', () => { basePath, location, apmRouter, - logsLocator: logsLocator as unknown as LocatorPublic, - nodeLogsLocator: - nodeLogsLocator as unknown as LocatorPublic, allDatasetsLocator, + logsLocators: logsLocatorsMock, infraLinksAvailable: true, rangeFrom: 'now-24h', rangeTo: 'now', @@ -209,7 +200,7 @@ describe('Transaction action menu', () => { }, ], ]); - expectInfraLocatorsToBeCalled(); + expectLogsLocatorsToBeCalled(); }); it('shows host and required sections only', () => { @@ -226,10 +217,8 @@ describe('Transaction action menu', () => { basePath, location, apmRouter, - logsLocator: logsLocator as unknown as LocatorPublic, - nodeLogsLocator: - nodeLogsLocator as unknown as LocatorPublic, allDatasetsLocator, + logsLocators: logsLocatorsMock, infraLinksAvailable: true, rangeFrom: 'now-24h', rangeTo: 'now', @@ -296,6 +285,6 @@ describe('Transaction action menu', () => { }, ], ]); - expectInfraLocatorsToBeCalled(); + expectLogsLocatorsToBeCalled(); }); }); diff --git a/x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections.ts b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections.ts index 09f742ad1254e..398a657d06714 100644 --- a/x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections.ts +++ b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections.ts @@ -11,10 +11,8 @@ import { IBasePath } from '@kbn/core/public'; import { isEmpty, pickBy } from 'lodash'; import moment from 'moment'; import url from 'url'; -import { - LogsLocatorParams, - NodeLogsLocatorParams, -} from '@kbn/logs-shared-plugin/common'; +import type { getLogsLocatorsFromUrlService } from '@kbn/logs-shared-plugin/common'; +import { findInventoryFields } from '@kbn/metrics-data-access-plugin/common'; import { LocatorPublic } from '@kbn/share-plugin/common'; import { AllDatasetsLocatorParams } from '@kbn/deeplinks-observability/locators'; import type { ProfilingLocators } from '@kbn/observability-shared-plugin/public'; @@ -27,10 +25,6 @@ import { fromQuery } from '../links/url_helpers'; import { SectionRecord, getNonEmptySections, Action } from './sections_helper'; import { HOST_NAME, TRACE_ID } from '../../../../common/es_fields/apm'; import { ApmRouter } from '../../routing/apm_route_config'; -import { - getNodeLogsHref, - getTraceLogsHref, -} from '../links/observability_logs_link'; function getInfraMetricsQuery(transaction: Transaction) { const timestamp = new Date(transaction['@timestamp']).getTime(); @@ -53,8 +47,7 @@ export const getSections = ({ rangeTo, environment, allDatasetsLocator, - logsLocator, - nodeLogsLocator, + logsLocators, dataViewId, }: { transaction?: Transaction; @@ -67,8 +60,7 @@ export const getSections = ({ rangeTo: string; environment: Environment; allDatasetsLocator: LocatorPublic; - logsLocator: LocatorPublic; - nodeLogsLocator: LocatorPublic; + logsLocators: ReturnType; dataViewId?: string; }) => { if (!transaction) return []; @@ -95,33 +87,26 @@ export const getSections = ({ }); // Logs hrefs - const podLogsHref = getNodeLogsHref( - 'pod', - podId!, + const podLogsHref = logsLocators.nodeLogsLocator.getRedirectUrl({ + nodeField: findInventoryFields('pod').id, + nodeId: podId!, time, - allDatasetsLocator, - nodeLogsLocator - ); - const containerLogsHref = getNodeLogsHref( - 'container', - containerId!, + }); + const containerLogsHref = logsLocators.nodeLogsLocator.getRedirectUrl({ + nodeField: findInventoryFields('container').id, + nodeId: containerId!, time, - allDatasetsLocator, - nodeLogsLocator - ); - const hostLogsHref = getNodeLogsHref( - 'host', - hostName!, + }); + const hostLogsHref = logsLocators.nodeLogsLocator.getRedirectUrl({ + nodeField: findInventoryFields('host').id, + nodeId: hostName!, time, - allDatasetsLocator, - nodeLogsLocator - ); - const traceLogsHref = getTraceLogsHref( - transaction.trace.id!, + }); + + const traceLogsHref = logsLocators.traceLogsLocator.getRedirectUrl({ + traceId: transaction.trace.id!, time, - allDatasetsLocator, - logsLocator - ); + }); const podActions: Action[] = [ { diff --git a/x-pack/plugins/apm/public/components/shared/transaction_action_menu/transaction_action_menu.test.tsx b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/transaction_action_menu.test.tsx index be78efeb870ee..ce9d81a52eb32 100644 --- a/x-pack/plugins/apm/public/components/shared/transaction_action_menu/transaction_action_menu.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/transaction_action_menu.test.tsx @@ -13,13 +13,14 @@ import { License } from '@kbn/licensing-plugin/common/license'; import { LOGS_LOCATOR_ID, NODE_LOGS_LOCATOR_ID, + TRACE_LOGS_LOCATOR_ID, } from '@kbn/logs-shared-plugin/common'; import { Transaction } from '../../../../typings/es_schemas/ui/transaction'; import { ApmPluginContextValue } from '../../../context/apm_plugin/apm_plugin_context'; import { mockApmPluginContextValue, MockApmPluginContextWrapper, - infraLocatorsMock, + logsLocatorsMock, } from '../../../context/apm_plugin/mock_apm_plugin_context'; import { LicenseContext } from '../../../context/license/license_context'; import * as hooks from '../../../hooks/use_fetcher'; @@ -43,11 +44,15 @@ const apmContextMock = { locators: { get: (id: string) => { if (id === LOGS_LOCATOR_ID) { - return infraLocatorsMock.logsLocator; + return logsLocatorsMock.logsLocator; } if (id === NODE_LOGS_LOCATOR_ID) { - return infraLocatorsMock.nodeLogsLocator; + return logsLocatorsMock.nodeLogsLocator; + } + + if (id === TRACE_LOGS_LOCATOR_ID) { + return logsLocatorsMock.traceLogsLocator; } }, }, @@ -102,9 +107,9 @@ const renderTransaction = async (transaction: Record) => { return rendered; }; -const expectInfraLocatorsToBeCalled = () => { - expect(infraLocatorsMock.nodeLogsLocator.getRedirectUrl).toBeCalled(); - expect(infraLocatorsMock.logsLocator.getRedirectUrl).toBeCalled(); +const expectLogsLocatorsToBeCalled = () => { + expect(logsLocatorsMock.nodeLogsLocator.getRedirectUrl).toBeCalled(); + expect(logsLocatorsMock.traceLogsLocator.getRedirectUrl).toBeCalled(); }; let useAdHocApmDataViewSpy: jest.SpyInstance; @@ -144,10 +149,10 @@ describe('TransactionActionMenu ', () => { expect(findByText('View transaction in Discover')).not.toBeNull(); }); - it('should call infra locators getRedirectUrl function', async () => { + it('should call logs locators getRedirectUrl function', async () => { await renderTransaction(Transactions.transactionWithMinimalData); - expectInfraLocatorsToBeCalled(); + expectLogsLocatorsToBeCalled(); }); describe('when there is no pod id', () => { @@ -169,10 +174,10 @@ describe('TransactionActionMenu ', () => { }); describe('when there is a pod id', () => { - it('should call infra locators getRedirectUrl function', async () => { + it('should call logs locators getRedirectUrl function', async () => { await renderTransaction(Transactions.transactionWithKubernetesData); - expectInfraLocatorsToBeCalled(); + expectLogsLocatorsToBeCalled(); }); it('renders the pod metrics link', async () => { @@ -206,11 +211,11 @@ describe('TransactionActionMenu ', () => { }); }); - describe('should call infra locators getRedirectUrl function', () => { + describe('should call logs locators getRedirectUrl function', () => { it('renders the Container logs link', async () => { await renderTransaction(Transactions.transactionWithContainerData); - expectInfraLocatorsToBeCalled(); + expectLogsLocatorsToBeCalled(); }); it('renders the Container metrics link', async () => { @@ -245,10 +250,10 @@ describe('TransactionActionMenu ', () => { }); describe('when there is a hostname', () => { - it('should call infra locators getRedirectUrl function', async () => { + it('should call logs locators getRedirectUrl function', async () => { await renderTransaction(Transactions.transactionWithHostData); - expectInfraLocatorsToBeCalled(); + expectLogsLocatorsToBeCalled(); }); it('renders the Host metrics link', async () => { diff --git a/x-pack/plugins/apm/public/components/shared/transaction_action_menu/transaction_action_menu.tsx b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/transaction_action_menu.tsx index 21cfea70c4e31..fe3cd90222ef4 100644 --- a/x-pack/plugins/apm/public/components/shared/transaction_action_menu/transaction_action_menu.tsx +++ b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/transaction_action_menu.tsx @@ -25,13 +25,8 @@ import { AllDatasetsLocatorParams, ALL_DATASETS_LOCATOR_ID, } from '@kbn/deeplinks-observability/locators'; -import { - LOGS_LOCATOR_ID, - LogsLocatorParams, - NODE_LOGS_LOCATOR_ID, - NodeLogsLocatorParams, -} from '@kbn/logs-shared-plugin/common'; import type { ProfilingLocators } from '@kbn/observability-shared-plugin/public'; +import { getLogsLocatorsFromUrlService } from '@kbn/logs-shared-plugin/common'; import { useAnyOfApmParams } from '../../../hooks/use_apm_params'; import { ApmFeatureFlagName } from '../../../../common/apm_feature_flags'; import { Transaction } from '../../../../typings/es_schemas/ui/transaction'; @@ -144,10 +139,7 @@ function ActionMenuSections({ const allDatasetsLocator = share.url.locators.get( ALL_DATASETS_LOCATOR_ID )!; - const logsLocator = - share.url.locators.get(LOGS_LOCATOR_ID)!; - const nodeLogsLocator = - share.url.locators.get(NODE_LOGS_LOCATOR_ID)!; + const logsLocators = getLogsLocatorsFromUrlService(share.url); const infraLinksAvailable = useApmFeatureFlag( ApmFeatureFlagName.InfraUiAvailable @@ -173,8 +165,7 @@ function ActionMenuSections({ rangeTo, environment, allDatasetsLocator, - logsLocator, - nodeLogsLocator, + logsLocators, dataViewId: dataView?.id, }); diff --git a/x-pack/plugins/apm/public/context/apm_plugin/mock_apm_plugin_context.tsx b/x-pack/plugins/apm/public/context/apm_plugin/mock_apm_plugin_context.tsx index 61710babd1dac..f6f45a273de45 100644 --- a/x-pack/plugins/apm/public/context/apm_plugin/mock_apm_plugin_context.tsx +++ b/x-pack/plugins/apm/public/context/apm_plugin/mock_apm_plugin_context.tsx @@ -13,6 +13,11 @@ import { merge } from 'lodash'; import { coreMock } from '@kbn/core/public/mocks'; import { UrlService } from '@kbn/share-plugin/common/url_service'; import { createObservabilityRuleTypeRegistryMock } from '@kbn/observability-plugin/public'; +import { + LogsLocatorParams, + NodeLogsLocatorParams, + TraceLogsLocatorParams, +} from '@kbn/logs-shared-plugin/common'; import { UI_SETTINGS } from '@kbn/data-plugin/common'; import { MlLocatorDefinition } from '@kbn/ml-plugin/public'; import { enableComparisonByDefault } from '@kbn/observability-plugin/public'; @@ -131,9 +136,10 @@ export const observabilityLogExplorerLocatorsMock = { singleDatasetLocator: sharePluginMock.createLocator(), }; -export const infraLocatorsMock = { - nodeLogsLocator: sharePluginMock.createLocator(), - logsLocator: sharePluginMock.createLocator(), +export const logsLocatorsMock = { + logsLocator: sharePluginMock.createLocator(), + nodeLogsLocator: sharePluginMock.createLocator(), + traceLogsLocator: sharePluginMock.createLocator(), }; const mockCorePlugins = { diff --git a/x-pack/plugins/apm/public/hooks/use_breakpoints.ts b/x-pack/plugins/apm/public/hooks/use_breakpoints.ts index 9ec8b20bb472d..5e991cc477762 100644 --- a/x-pack/plugins/apm/public/hooks/use_breakpoints.ts +++ b/x-pack/plugins/apm/public/hooks/use_breakpoints.ts @@ -9,19 +9,20 @@ import { useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint, } from '@elastic/eui'; +import { useMemo } from 'react'; export type Breakpoints = Record; export function useBreakpoints() { - const screenSizes = { - isXSmall: useIsWithinMaxBreakpoint('xs'), - isSmall: useIsWithinMaxBreakpoint('s'), - isMedium: useIsWithinMaxBreakpoint('m'), - isLarge: useIsWithinMaxBreakpoint('l'), - isXl: useIsWithinMaxBreakpoint('xl'), - isXXL: useIsWithinMaxBreakpoint('xxl'), - isXXXL: useIsWithinMinBreakpoint('xxxl'), - }; + const isXSmall = useIsWithinMaxBreakpoint('xs'); + const isSmall = useIsWithinMaxBreakpoint('s'); + const isMedium = useIsWithinMaxBreakpoint('m'); + const isLarge = useIsWithinMaxBreakpoint('l'); + const isXl = useIsWithinMaxBreakpoint('xl'); + const isXXL = useIsWithinMaxBreakpoint('xxl'); + const isXXXL = useIsWithinMinBreakpoint('xxxl'); - return screenSizes; + return useMemo(() => { + return { isXSmall, isSmall, isMedium, isLarge, isXl, isXXL, isXXXL }; + }, [isXSmall, isSmall, isMedium, isLarge, isXl, isXXL, isXXXL]); } diff --git a/x-pack/plugins/apm/server/routes/services/annotations/index.test.ts b/x-pack/plugins/apm/server/routes/services/annotations/index.test.ts index 729a2c16dd65e..c33ff0881dbe6 100644 --- a/x-pack/plugins/apm/server/routes/services/annotations/index.test.ts +++ b/x-pack/plugins/apm/server/routes/services/annotations/index.test.ts @@ -16,7 +16,8 @@ import { Annotation, AnnotationType } from '../../../../common/annotations'; import { errors } from '@elastic/elasticsearch'; import { APMEventClient } from '../../../lib/helpers/create_es_client/create_apm_event_client'; -describe('getServiceAnnotations', () => { +// FLAKY: https://github.com/elastic/kibana/issues/169106 +describe.skip('getServiceAnnotations', () => { const storedAnnotations = [ { type: AnnotationType.VERSION, diff --git a/x-pack/plugins/canvas/kibana.jsonc b/x-pack/plugins/canvas/kibana.jsonc index 7e4d0fcff071d..1f6a3bf5554b4 100644 --- a/x-pack/plugins/canvas/kibana.jsonc +++ b/x-pack/plugins/canvas/kibana.jsonc @@ -38,7 +38,6 @@ "reporting", "spaces", "usageCollection", - "savedObjects", ], "requiredBundles": [ "kibanaReact", diff --git a/x-pack/plugins/cases/public/components/actions/assignees/edit_assignees_flyout.test.tsx b/x-pack/plugins/cases/public/components/actions/assignees/edit_assignees_flyout.test.tsx index 15ab25f9db223..fec9999cbbcfc 100644 --- a/x-pack/plugins/cases/public/components/actions/assignees/edit_assignees_flyout.test.tsx +++ b/x-pack/plugins/cases/public/components/actions/assignees/edit_assignees_flyout.test.tsx @@ -35,7 +35,7 @@ describe('EditAssigneesFlyout', () => { jest.clearAllMocks(); appMock = createAppMockRenderer(); - useBulkGetUserProfilesMock.mockReturnValue({ data: userProfilesMap }); + useBulkGetUserProfilesMock.mockReturnValue({ data: userProfilesMap, isLoading: false }); useSuggestUserProfilesMock.mockReturnValue({ data: userProfiles, isLoading: false }); }); diff --git a/x-pack/plugins/cases/public/components/actions/tags/edit_tags_flyout.test.tsx b/x-pack/plugins/cases/public/components/actions/tags/edit_tags_flyout.test.tsx index a167d88f1bf62..d72d89bd909be 100644 --- a/x-pack/plugins/cases/public/components/actions/tags/edit_tags_flyout.test.tsx +++ b/x-pack/plugins/cases/public/components/actions/tags/edit_tags_flyout.test.tsx @@ -7,18 +7,19 @@ import React from 'react'; import userEvent from '@testing-library/user-event'; +import { waitFor, screen } from '@testing-library/react'; + import type { AppMockRenderer } from '../../../common/mock'; import { createAppMockRenderer } from '../../../common/mock'; -import { basicCase } from '../../../containers/mock'; -import { waitForComponentToUpdate } from '../../../common/test_utils'; +import { basicCase, tags } from '../../../containers/mock'; +import { useGetTags } from '../../../containers/use_get_tags'; import { EditTagsFlyout } from './edit_tags_flyout'; -import { waitFor } from '@testing-library/react'; -jest.mock('../../../containers/api'); +jest.mock('../../../containers/use_get_tags'); + +const useGetTagsMock = useGetTags as jest.Mock; -// Failing: See https://github.com/elastic/kibana/issues/174176 -// Failing: See https://github.com/elastic/kibana/issues/174177 -describe.skip('EditTagsFlyout', () => { +describe('EditTagsFlyout', () => { let appMock: AppMockRenderer; /** @@ -32,64 +33,57 @@ describe.skip('EditTagsFlyout', () => { onSaveTags: jest.fn(), }; + useGetTagsMock.mockReturnValue({ isLoading: false, data: tags }); + beforeEach(() => { - appMock = createAppMockRenderer(); jest.clearAllMocks(); + appMock = createAppMockRenderer(); }); it('renders correctly', async () => { - const result = appMock.render(); - - expect(result.getByTestId('cases-edit-tags-flyout')).toBeInTheDocument(); - expect(result.getByTestId('cases-edit-tags-flyout-title')).toBeInTheDocument(); - expect(result.getByTestId('cases-edit-tags-flyout-cancel')).toBeInTheDocument(); - expect(result.getByTestId('cases-edit-tags-flyout-submit')).toBeInTheDocument(); + appMock.render(); - await waitForComponentToUpdate(); + expect(await screen.findByTestId('cases-edit-tags-flyout')).toBeInTheDocument(); + expect(await screen.findByTestId('cases-edit-tags-flyout-title')).toBeInTheDocument(); + expect(await screen.findByTestId('cases-edit-tags-flyout-cancel')).toBeInTheDocument(); + expect(await screen.findByTestId('cases-edit-tags-flyout-submit')).toBeInTheDocument(); }); it('calls onClose when pressing the cancel button', async () => { - const result = appMock.render(); + appMock.render(); - userEvent.click(result.getByTestId('cases-edit-tags-flyout-cancel')); - expect(props.onClose).toHaveBeenCalled(); + userEvent.click(await screen.findByTestId('cases-edit-tags-flyout-cancel')); - await waitForComponentToUpdate(); + await waitFor(() => { + expect(props.onClose).toHaveBeenCalled(); + }); }); it('calls onSaveTags when pressing the save selection button', async () => { - const result = appMock.render(); - - await waitForComponentToUpdate(); + appMock.render(); - await waitFor(() => { - expect(result.getByText('coke')).toBeInTheDocument(); - }); + expect(await screen.findByText('coke')).toBeInTheDocument(); - userEvent.click(result.getByText('coke')); - userEvent.click(result.getByTestId('cases-edit-tags-flyout-submit')); + userEvent.click(await screen.findByText('coke')); + userEvent.click(await screen.findByTestId('cases-edit-tags-flyout-submit')); - expect(props.onSaveTags).toHaveBeenCalledWith({ - selectedItems: ['pepsi'], - unSelectedItems: ['coke'], + await waitFor(() => { + expect(props.onSaveTags).toHaveBeenCalledWith({ + selectedItems: ['pepsi'], + unSelectedItems: ['coke'], + }); }); }); it('shows the case title when selecting one case', async () => { - const result = appMock.render(); - - expect(result.getByText(basicCase.title)).toBeInTheDocument(); + appMock.render(); - await waitForComponentToUpdate(); + expect(await screen.findByText(basicCase.title)).toBeInTheDocument(); }); it('shows the number of total selected cases in the title when selecting multiple cases', async () => { - const result = appMock.render( - - ); - - expect(result.getByText('Selected cases: 2')).toBeInTheDocument(); + appMock.render(); - await waitForComponentToUpdate(); + expect(await screen.findByText('Selected cases: 2')).toBeInTheDocument(); }); }); diff --git a/x-pack/plugins/cases/public/components/create/submit_button.test.tsx b/x-pack/plugins/cases/public/components/create/submit_button.test.tsx index dc6e7f62746e8..a68b05bde5895 100644 --- a/x-pack/plugins/cases/public/components/create/submit_button.test.tsx +++ b/x-pack/plugins/cases/public/components/create/submit_button.test.tsx @@ -6,81 +6,55 @@ */ import React from 'react'; -import { mount } from 'enzyme'; -import { waitFor } from '@testing-library/react'; +import { waitFor, screen } from '@testing-library/react'; -import { useForm, Form } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib'; import { SubmitCaseButton } from './submit_button'; -import type { FormProps } from './schema'; -import { schema } from './schema'; +import type { AppMockRenderer } from '../../common/mock'; +import { createAppMockRenderer } from '../../common/mock'; +import { FormTestComponent } from '../../common/test_utils'; +import userEvent from '@testing-library/user-event'; -// FLAKY: https://github.com/elastic/kibana/issues/174376 -describe.skip('SubmitCaseButton', () => { +describe('SubmitCaseButton', () => { + let appMockRender: AppMockRenderer; const onSubmit = jest.fn(); - const MockHookWrapperComponent: React.FC = ({ children }) => { - const { form } = useForm({ - defaultValue: { title: 'My title' }, - schema: { - title: schema.title, - }, - onSubmit, - }); - - return
{children}
; - }; - beforeEach(() => { jest.clearAllMocks(); + appMockRender = createAppMockRenderer(); }); - it('it renders', async () => { - const wrapper = mount( - + it('renders', async () => { + appMockRender.render( + - + ); - expect(wrapper.find(`[data-test-subj="create-case-submit"]`).exists()).toBeTruthy(); + expect(await screen.findByTestId('create-case-submit')).toBeInTheDocument(); }); - it('it submits', async () => { - const wrapper = mount( - + it('submits', async () => { + appMockRender.render( + - + ); - wrapper.find(`button[data-test-subj="create-case-submit"]`).first().simulate('click'); - await waitFor(() => expect(onSubmit).toBeCalled()); - }); - it('it disables when submitting', async () => { - const wrapper = mount( - - - - ); + userEvent.click(await screen.findByTestId('create-case-submit')); - wrapper.find(`button[data-test-subj="create-case-submit"]`).first().simulate('click'); - await waitFor(() => - expect( - wrapper.find(`[data-test-subj="create-case-submit"]`).first().prop('isDisabled') - ).toBeTruthy() - ); + await waitFor(() => expect(onSubmit).toBeCalled()); }); - it('it is loading when submitting', async () => { - const wrapper = mount( - + it('disables when submitting', async () => { + appMockRender.render( + - + ); - wrapper.find(`button[data-test-subj="create-case-submit"]`).first().simulate('click'); - await waitFor(() => - expect( - wrapper.find(`[data-test-subj="create-case-submit"]`).first().prop('isLoading') - ).toBeTruthy() - ); + const button = await screen.findByTestId('create-case-submit'); + userEvent.click(button); + + await waitFor(() => expect(button).toBeDisabled()); }); }); diff --git a/x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_renderer.test.tsx b/x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_renderer.test.tsx index 636fa61b8d6f0..e4d6641d6b751 100644 --- a/x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_renderer.test.tsx +++ b/x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_renderer.test.tsx @@ -60,7 +60,16 @@ const defaultProps = { editorRef, }; -describe('EditableMarkdown', () => { +// FLAKY: https://github.com/elastic/kibana/issues/171177 +// FLAKY: https://github.com/elastic/kibana/issues/171178 +// FLAKY: https://github.com/elastic/kibana/issues/171179 +// FLAKY: https://github.com/elastic/kibana/issues/171180 +// FLAKY: https://github.com/elastic/kibana/issues/171181 +// FLAKY: https://github.com/elastic/kibana/issues/171182 +// FLAKY: https://github.com/elastic/kibana/issues/171183 +// FLAKY: https://github.com/elastic/kibana/issues/171184 +// FLAKY: https://github.com/elastic/kibana/issues/171185 +describe.skip('EditableMarkdown', () => { const MockHookWrapperComponent: React.FC<{ testProviderProps?: unknown }> = ({ children, testProviderProps = {}, diff --git a/x-pack/plugins/cases/public/components/user_actions/property_actions/alert_property_actions.test.tsx b/x-pack/plugins/cases/public/components/user_actions/property_actions/alert_property_actions.test.tsx index 79636d52572ba..982484f11ed47 100644 --- a/x-pack/plugins/cases/public/components/user_actions/property_actions/alert_property_actions.test.tsx +++ b/x-pack/plugins/cases/public/components/user_actions/property_actions/alert_property_actions.test.tsx @@ -17,7 +17,12 @@ import { } from '../../../common/mock'; import { AlertPropertyActions } from './alert_property_actions'; -describe('AlertPropertyActions', () => { +// FLAKY: https://github.com/elastic/kibana/issues/174667 +// FLAKY: https://github.com/elastic/kibana/issues/174668 +// FLAKY: https://github.com/elastic/kibana/issues/174669 +// FLAKY: https://github.com/elastic/kibana/issues/174670 +// FLAKY: https://github.com/elastic/kibana/issues/174671 +describe.skip('AlertPropertyActions', () => { let appMock: AppMockRenderer; const props = { diff --git a/x-pack/plugins/cases/public/components/user_actions/property_actions/registered_attachments_property_actions.test.tsx b/x-pack/plugins/cases/public/components/user_actions/property_actions/registered_attachments_property_actions.test.tsx index 273ac1db45eaf..8cbc69e30039f 100644 --- a/x-pack/plugins/cases/public/components/user_actions/property_actions/registered_attachments_property_actions.test.tsx +++ b/x-pack/plugins/cases/public/components/user_actions/property_actions/registered_attachments_property_actions.test.tsx @@ -18,7 +18,8 @@ import { import { RegisteredAttachmentsPropertyActions } from './registered_attachments_property_actions'; import { AttachmentActionType } from '../../../client/attachment_framework/types'; -describe('RegisteredAttachmentsPropertyActions', () => { +// FLAKY: https://github.com/elastic/kibana/issues/174384 +describe.skip('RegisteredAttachmentsPropertyActions', () => { let appMock: AppMockRenderer; const props = { diff --git a/x-pack/plugins/cases/public/components/user_actions_activity_bar/filter_activity.tsx b/x-pack/plugins/cases/public/components/user_actions_activity_bar/filter_activity.tsx index f3730a24cbad8..b6e3c2639aef5 100644 --- a/x-pack/plugins/cases/public/components/user_actions_activity_bar/filter_activity.tsx +++ b/x-pack/plugins/cases/public/components/user_actions_activity_bar/filter_activity.tsx @@ -28,7 +28,7 @@ const MyEuiFilterGroup = styled(EuiFilterGroup)` const FilterAllButton = styled(EuiFilterButton)` &, - & .euiFilterButton__textShift { + & .euiFilterButton__text { min-width: 28px; } `; diff --git a/x-pack/plugins/cloud_security_posture/common/utils/rules_states.ts b/x-pack/plugins/cloud_security_posture/common/utils/rules_states.ts new file mode 100644 index 0000000000000..c129b00bb831d --- /dev/null +++ b/x-pack/plugins/cloud_security_posture/common/utils/rules_states.ts @@ -0,0 +1,31 @@ +/* + * 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 { QueryDslQueryContainer } from '@kbn/data-views-plugin/common/types'; +import { CspBenchmarkRulesStates } from '../types/latest'; + +export const buildMutedRulesFilter = ( + rulesStates: CspBenchmarkRulesStates +): QueryDslQueryContainer[] => { + const mutedRules = Object.fromEntries( + Object.entries(rulesStates).filter(([key, value]) => value.muted === true) + ); + + const mutedRulesFilterQuery = Object.keys(mutedRules).map((key) => { + const rule = mutedRules[key]; + return { + bool: { + must: [ + { term: { 'rule.benchmark.id': rule.benchmark_id } }, + { term: { 'rule.benchmark.version': rule.benchmark_version } }, + { term: { 'rule.benchmark.rule_number': rule.rule_number } }, + ], + }, + }; + }); + + return mutedRulesFilterQuery; +}; diff --git a/x-pack/plugins/cloud_security_posture/public/common/hooks/use_cloud_posture_data_table/utils.ts b/x-pack/plugins/cloud_security_posture/public/common/hooks/use_cloud_posture_data_table/utils.ts index c715b6a90b4ca..6628cc7711a82 100644 --- a/x-pack/plugins/cloud_security_posture/public/common/hooks/use_cloud_posture_data_table/utils.ts +++ b/x-pack/plugins/cloud_security_posture/public/common/hooks/use_cloud_posture_data_table/utils.ts @@ -7,7 +7,7 @@ import type { EuiBasicTableProps, Pagination } from '@elastic/eui'; -type TablePagination = NonNullable['pagination']>; +type TablePagination = NonNullable['pagination']>; export const getPaginationTableParams = ( params: TablePagination & Pick, 'pageIndex' | 'pageSize'>, diff --git a/x-pack/plugins/cloud_security_posture/public/common/hooks/use_cloud_posture_table/utils.ts b/x-pack/plugins/cloud_security_posture/public/common/hooks/use_cloud_posture_table/utils.ts index 2d3f9b1c7605c..a74abccba1e18 100644 --- a/x-pack/plugins/cloud_security_posture/public/common/hooks/use_cloud_posture_table/utils.ts +++ b/x-pack/plugins/cloud_security_posture/public/common/hooks/use_cloud_posture_table/utils.ts @@ -35,7 +35,7 @@ const getBaseQuery = ({ } }; -type TablePagination = NonNullable['pagination']>; +type TablePagination = NonNullable['pagination']>; export const getPaginationTableParams = ( params: TablePagination & Pick, 'pageIndex' | 'pageSize'>, diff --git a/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings/use_get_benchmark_rules_state_api.ts b/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings/use_get_benchmark_rules_state_api.ts new file mode 100644 index 0000000000000..a0c957907c0af --- /dev/null +++ b/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings/use_get_benchmark_rules_state_api.ts @@ -0,0 +1,27 @@ +/* + * 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 { useQuery } from '@tanstack/react-query'; +import { CspBenchmarkRulesStates } from '../../../../common/types/latest'; +import { + CSP_GET_BENCHMARK_RULES_STATE_API_CURRENT_VERSION, + CSP_GET_BENCHMARK_RULES_STATE_ROUTE_PATH, +} from '../../../../common/constants'; +import { useKibana } from '../../../common/hooks/use_kibana'; + +const getRuleStatesKey = 'get_rules_state_key'; + +export const useGetCspBenchmarkRulesStatesApi = () => { + const { http } = useKibana().services; + return useQuery( + [getRuleStatesKey], + () => + http.get(CSP_GET_BENCHMARK_RULES_STATE_ROUTE_PATH, { + version: CSP_GET_BENCHMARK_RULES_STATE_API_CURRENT_VERSION, + }) + ); +}; diff --git a/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings/use_latest_findings.ts b/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings/use_latest_findings.ts index 0c0aee860d344..5584b1eae08a6 100644 --- a/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings/use_latest_findings.ts +++ b/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings/use_latest_findings.ts @@ -22,6 +22,9 @@ import { } from '../../../../common/constants'; import { MAX_FINDINGS_TO_LOAD } from '../../../common/constants'; import { showErrorToast } from '../../../common/utils/show_error_toast'; +import { useGetCspBenchmarkRulesStatesApi } from './use_get_benchmark_rules_state_api'; +import { CspBenchmarkRulesStates } from '../../../../common/types/latest'; +import { buildMutedRulesFilter } from '../../../../common/utils/rules_states'; interface UseFindingsOptions extends FindingsBaseEsQuery { sort: string[][]; @@ -42,31 +45,40 @@ interface FindingsAggs { count: estypes.AggregationsMultiBucketAggregateBase; } -export const getFindingsQuery = ({ query, sort }: UseFindingsOptions, pageParam: any) => ({ - index: CSP_LATEST_FINDINGS_DATA_VIEW, - sort: getMultiFieldsSort(sort), - size: MAX_FINDINGS_TO_LOAD, - aggs: getFindingsCountAggQuery(), - ignore_unavailable: false, - query: { - ...query, - bool: { - ...query?.bool, - filter: [ - ...(query?.bool?.filter ?? []), - { - range: { - '@timestamp': { - gte: `now-${LATEST_FINDINGS_RETENTION_POLICY}`, - lte: 'now', +export const getFindingsQuery = ( + { query, sort }: UseFindingsOptions, + rulesStates: CspBenchmarkRulesStates, + pageParam: any +) => { + const mutedRulesFilterQuery = buildMutedRulesFilter(rulesStates); + + return { + index: CSP_LATEST_FINDINGS_DATA_VIEW, + sort: getMultiFieldsSort(sort), + size: MAX_FINDINGS_TO_LOAD, + aggs: getFindingsCountAggQuery(), + ignore_unavailable: false, + query: { + ...query, + bool: { + ...query?.bool, + filter: [ + ...(query?.bool?.filter ?? []), + { + range: { + '@timestamp': { + gte: `now-${LATEST_FINDINGS_RETENTION_POLICY}`, + lte: 'now', + }, }, }, - }, - ], + ], + must_not: mutedRulesFilterQuery, + }, }, - }, - ...(pageParam ? { search_after: pageParam } : {}), -}); + ...(pageParam ? { search_after: pageParam } : {}), + }; +}; const getMultiFieldsSort = (sort: string[][]) => { return sort.map(([id, direction]) => { @@ -111,6 +123,8 @@ export const useLatestFindings = (options: UseFindingsOptions) => { data, notifications: { toasts }, } = useKibana().services; + const { data: rulesStates } = useGetCspBenchmarkRulesStatesApi(); + return useInfiniteQuery( ['csp_findings', { params: options }], async ({ pageParam }) => { @@ -118,7 +132,7 @@ export const useLatestFindings = (options: UseFindingsOptions) => { rawResponse: { hits, aggregations }, } = await lastValueFrom( data.search.search({ - params: getFindingsQuery(options, pageParam), + params: getFindingsQuery(options, rulesStates!, pageParam), // ruleStates always exists since it under the `enabled` dependency. }) ); if (!aggregations) throw new Error('expected aggregations to be an defined'); @@ -132,7 +146,7 @@ export const useLatestFindings = (options: UseFindingsOptions) => { }; }, { - enabled: options.enabled, + enabled: options.enabled && !!rulesStates, keepPreviousData: true, onError: (err: Error) => showErrorToast(toasts, err), getNextPageParam: (lastPage) => { diff --git a/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings/use_latest_findings_grouping.tsx b/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings/use_latest_findings_grouping.tsx index 9d092de673edf..7b1f10c406e15 100644 --- a/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings/use_latest_findings_grouping.tsx +++ b/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings/use_latest_findings_grouping.tsx @@ -31,6 +31,8 @@ import { } from './constants'; import { useCloudSecurityGrouping } from '../../../components/cloud_security_grouping'; import { getFilters } from '../utils/get_filters'; +import { useGetCspBenchmarkRulesStatesApi } from './use_get_benchmark_rules_state_api'; +import { buildMutedRulesFilter } from '../../../../common/utils/rules_states'; const getTermAggregation = (key: keyof FindingsGroupingAggregation, field: string) => ({ [key]: { @@ -154,6 +156,9 @@ export const useLatestFindingsGrouping = ({ groupStatsRenderer, }); + const { data: rulesStates } = useGetCspBenchmarkRulesStatesApi(); + const mutedRulesFilterQuery = rulesStates ? buildMutedRulesFilter(rulesStates) : []; + const groupingQuery = getGroupingQuery({ additionalFilters: query ? [query] : [], groupByField: selectedGroup, @@ -184,8 +189,16 @@ export const useLatestFindingsGrouping = ({ ], }); + const filteredGroupingQuery = { + ...groupingQuery, + query: { + ...groupingQuery.query, + bool: { ...groupingQuery.query.bool, must_not: mutedRulesFilterQuery }, + }, + }; + const { data, isFetching } = useGroupedFindings({ - query: groupingQuery, + query: filteredGroupingQuery, enabled: !isNoneSelected, }); diff --git a/x-pack/plugins/cloud_security_posture/public/pages/configurations/layout/findings_layout.tsx b/x-pack/plugins/cloud_security_posture/public/pages/configurations/layout/findings_layout.tsx index 468934d6acee3..2a39550a3c7d4 100644 --- a/x-pack/plugins/cloud_security_posture/public/pages/configurations/layout/findings_layout.tsx +++ b/x-pack/plugins/cloud_security_posture/public/pages/configurations/layout/findings_layout.tsx @@ -46,7 +46,7 @@ export const PageTitleText = ({ title }: { title: React.ReactNode }) => ( ); -export const getExpandColumn = ({ +export const getExpandColumn = ({ onClick, }: { onClick(item: T): void; diff --git a/x-pack/plugins/cloud_security_posture/public/pages/vulnerability_dashboard/vulnerability_table_panel.tsx b/x-pack/plugins/cloud_security_posture/public/pages/vulnerability_dashboard/vulnerability_table_panel.tsx index 79dd2b60f8db2..8906688efdae8 100644 --- a/x-pack/plugins/cloud_security_posture/public/pages/vulnerability_dashboard/vulnerability_table_panel.tsx +++ b/x-pack/plugins/cloud_security_posture/public/pages/vulnerability_dashboard/vulnerability_table_panel.tsx @@ -23,7 +23,7 @@ import { } from './vulnerability_table_panel.config'; import { ChartPanel } from '../../components/chart_panel'; -export interface VulnerabilityDashboardTableProps { +export interface VulnerabilityDashboardTableProps { tableType: DASHBOARD_TABLE_TYPES; columns: Array>; items: T[]; diff --git a/x-pack/plugins/cloud_security_posture/server/routes/benchmark_rules/get_states/v1.ts b/x-pack/plugins/cloud_security_posture/server/routes/benchmark_rules/get_states/v1.ts index 0682c48a70b1f..4d28b995cbdaf 100644 --- a/x-pack/plugins/cloud_security_posture/server/routes/benchmark_rules/get_states/v1.ts +++ b/x-pack/plugins/cloud_security_posture/server/routes/benchmark_rules/get_states/v1.ts @@ -15,6 +15,7 @@ import { INTERNAL_CSP_SETTINGS_SAVED_OBJECT_ID, INTERNAL_CSP_SETTINGS_SAVED_OBJECT_TYPE, } from '../../../../common/constants'; +import { buildMutedRulesFilter } from '../../../../common/utils/rules_states'; export const createCspSettingObject = async (soClient: SavedObjectsClientContract) => { return soClient.create( @@ -52,22 +53,6 @@ export const getMutedRulesFilterQuery = async ( encryptedSoClient: ISavedObjectsRepository | SavedObjectsClientContract ): Promise => { const rulesStates = await getCspBenchmarkRulesStatesHandler(encryptedSoClient); - const mutedRules = Object.fromEntries( - Object.entries(rulesStates).filter(([key, value]) => value.muted === true) - ); - - const mutedRulesFilterQuery = Object.keys(mutedRules).map((key) => { - const rule = mutedRules[key]; - return { - bool: { - must: [ - { term: { 'rule.benchmark.id': rule.benchmark_id } }, - { term: { 'rule.benchmark.version': rule.benchmark_version } }, - { term: { 'rule.benchmark.rule_number': rule.rule_number } }, - ], - }, - }; - }); - + const mutedRulesFilterQuery = buildMutedRulesFilter(rulesStates); return mutedRulesFilterQuery; }; diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/total_count_header.tsx b/x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/total_count_header.tsx index e681e6c85efcb..e69966992dd84 100644 --- a/x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/total_count_header.tsx +++ b/x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/total_count_header.tsx @@ -26,7 +26,7 @@ export const TotalCountHeader = ({ }: { id?: string; totalCount: number; - label?: string; + label?: React.ReactElement | string; loading?: boolean; approximate?: boolean; }) => { diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/data_visualizer_stats_table.tsx b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/data_visualizer_stats_table.tsx index e873beb97d164..71da03d5938bb 100644 --- a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/data_visualizer_stats_table.tsx +++ b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/data_visualizer_stats_table.tsx @@ -51,7 +51,7 @@ const FIELD_NAME = 'fieldName'; export type ItemIdToExpandedRowMap = Record; type DataVisualizerTableItem = FieldVisConfig | FileBasedFieldVisConfig; -interface DataVisualizerTableProps { +interface DataVisualizerTableProps { items: T[]; pageState: DataVisualizerTableState; updatePageState: (update: DataVisualizerTableState) => void; diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/use_table_settings.ts b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/use_table_settings.ts index 778aaa3697c7b..ed0a2752cd33f 100644 --- a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/use_table_settings.ts +++ b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/use_table_settings.ts @@ -12,13 +12,13 @@ import type { DataVisualizerTableState } from '../../../../../common/types'; const PAGE_SIZE_OPTIONS = [10, 25, 50, 100]; -interface UseTableSettingsReturnValue { +interface UseTableSettingsReturnValue { onTableChange: EuiBasicTableProps['onChange']; pagination: Pagination; sorting: { sort: PropertySort }; } -export function useTableSettings( +export function useTableSettings( items: TypeOfItem[], pageState: DataVisualizerTableState, updatePageState: (update: DataVisualizerTableState) => void diff --git a/x-pack/plugins/data_visualizer/public/application/data_drift/charts/data_drift_distribution_chart.tsx b/x-pack/plugins/data_visualizer/public/application/data_drift/charts/data_drift_distribution_chart.tsx index 0541d786c5af8..2440a669e763b 100644 --- a/x-pack/plugins/data_visualizer/public/application/data_drift/charts/data_drift_distribution_chart.tsx +++ b/x-pack/plugins/data_visualizer/public/application/data_drift/charts/data_drift_distribution_chart.tsx @@ -13,11 +13,11 @@ import { Position, ScaleType, Settings, - LEGACY_LIGHT_THEME, AreaSeries, CurveType, + PartialTheme, } from '@elastic/charts'; -import React from 'react'; +import React, { useMemo } from 'react'; import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common'; import { i18n } from '@kbn/i18n'; import { useStorage } from '@kbn/ml-local-storage'; @@ -33,9 +33,9 @@ import { DV_DATA_DRIFT_DISTRIBUTION_CHART_TYPE, } from '../../index_data_visualizer/types/storage'; import { DATA_DRIFT_COMPARISON_CHART_TYPE } from '../../index_data_visualizer/types/data_drift'; -import { useCurrentEuiTheme } from '../../common/hooks/use_current_eui_theme'; +import { useDataVisualizerKibana } from '../../kibana_context'; -const CHART_HEIGHT = 200; +const CHART_HEIGHT = 150; const showAsAreaChartOption = i18n.translate( 'xpack.dataVisualizer.dataDrift.showAsAreaChartOptionLabel', @@ -75,7 +75,9 @@ export const DataDriftDistributionChart = ({ secondaryType: string; domain?: Feature['domain']; }) => { - const euiTheme = useCurrentEuiTheme(); + const { + services: { charts }, + } = useDataVisualizerKibana(); const xAxisFormatter = useFieldFormatter(getFieldFormatType(secondaryType)); const yAxisFormatter = useFieldFormatter(FIELD_FORMAT_IDS.NUMBER); @@ -88,13 +90,23 @@ export const DataDriftDistributionChart = ({ DATA_DRIFT_COMPARISON_CHART_TYPE.AREA ); + const chartBaseTheme = charts.theme.useChartsBaseTheme(); + const chartThemeOverrides = useMemo(() => { + return { + background: { + color: 'transparent', + }, + }; + }, []); + if (!item || item.comparisonDistribution.length === 0) return ; const { featureName, fieldType, comparisonDistribution: data } = item; return ( -
+
- - - - - - {comparisonChartType === DATA_DRIFT_COMPARISON_CHART_TYPE.BAR ? ( - { - const key = identifier.seriesKeys[0]; - return key === COMPARISON_LABEL ? colors.comparisonColor : colors.referenceColor; - }} +
+ + + + - ) : ( - { - const key = identifier.seriesKeys[0]; - return key === COMPARISON_LABEL ? colors.comparisonColor : colors.referenceColor; - }} + - )} - + {comparisonChartType === DATA_DRIFT_COMPARISON_CHART_TYPE.BAR ? ( + { + const key = identifier.seriesKeys[0]; + return key === COMPARISON_LABEL ? colors.comparisonColor : colors.referenceColor; + }} + /> + ) : ( + { + const key = identifier.seriesKeys[0]; + return key === COMPARISON_LABEL ? colors.comparisonColor : colors.referenceColor; + }} + /> + )} + +
); }; diff --git a/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_hint.tsx b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_hint.tsx new file mode 100644 index 0000000000000..4bb2bcd59d918 --- /dev/null +++ b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_hint.tsx @@ -0,0 +1,57 @@ +/* + * 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 React from 'react'; +import { EuiButton, EuiEmptyPrompt } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n-react'; +import { i18n } from '@kbn/i18n'; + +const ANALYZE_DATA_DRIFT_LABEL = i18n.translate( + 'xpack.dataVisualizer.dataDrift.analyzeDataDriftLabel', + { + defaultMessage: 'Analyze data drift', + } +); + +export const DataDriftPromptHint = ({ + refresh, + canAnalyzeDataDrift, +}: { + refresh: () => void; + canAnalyzeDataDrift: boolean; +}) => { + return ( + +

+ +

+ + + {ANALYZE_DATA_DRIFT_LABEL} + + + } + data-test-subj="dataDriftRunAnalysisEmptyPrompt" + /> + ); +}; diff --git a/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_page.tsx b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_page.tsx index 2c45fd37a6858..00555f856f6d6 100644 --- a/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_page.tsx +++ b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_page.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { useCallback, useEffect, useState, FC, useMemo } from 'react'; +import React, { useCallback, useEffect, useState, FC, useMemo, useRef } from 'react'; import type * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey'; import { @@ -17,6 +17,7 @@ import { EuiSpacer, EuiPageHeader, EuiHorizontalRule, + EuiBadge, } from '@elastic/eui'; import type { WindowParameters } from '@kbn/aiops-utils'; @@ -35,6 +36,8 @@ import moment from 'moment'; import { css } from '@emotion/react'; import type { SearchQueryLanguage } from '@kbn/ml-query-utils'; import { i18n } from '@kbn/i18n'; +import { cloneDeep } from 'lodash'; +import type { SingleBrushWindowParameters } from './document_count_chart_single_brush/single_brush'; import type { InitialSettings } from './use_data_drift_result'; import { useDataDriftStateManagerContext } from './use_state_manager'; import { useData } from '../common/hooks/use_data'; @@ -51,7 +54,7 @@ import { DataDriftView } from './data_drift_view'; import { COMPARISON_LABEL, REFERENCE_LABEL } from './constants'; import { SearchPanelContent } from '../index_data_visualizer/components/search_panel/search_bar'; import { useSearch } from '../common/hooks/use_search'; -import { DocumentCountWithDualBrush } from './document_count_with_dual_brush'; +import { DocumentCountWithBrush } from './document_count_with_brush'; const dataViewTitleHeader = css({ minWidth: '300px', @@ -88,8 +91,8 @@ export const PageHeader: FC = () => { ); const hasValidTimeField = useMemo( - () => dataView.timeFieldName !== undefined && dataView.timeFieldName !== '', - [dataView.timeFieldName] + () => dataView && dataView.timeFieldName !== undefined && dataView.timeFieldName !== '', + [dataView] ); return ( @@ -126,16 +129,23 @@ export const PageHeader: FC = () => { ); }; -const getDataDriftDataLabel = (label: string, indexPattern?: string) => - i18n.translate('xpack.dataVisualizer.dataDrift.dataLabel', { - defaultMessage: '{label} data', - values: { label }, - }) + (indexPattern ? `: ${indexPattern}` : ''); - +const getDataDriftDataLabel = (label: string, indexPattern?: string) => ( + <> + {label} + {' ' + + i18n.translate('xpack.dataVisualizer.dataDrift.dataLabel', { + defaultMessage: 'data', + }) + + (indexPattern ? `: ${indexPattern}` : '')} + +); interface Props { initialSettings: InitialSettings; } +const isBarBetween = (start: number, end: number, min: number, max: number) => { + return start >= min && end <= max; +}; export const DataDriftPage: FC = ({ initialSettings }) => { const { services: { data: dataService }, @@ -248,49 +258,92 @@ export const DataDriftPage: FC = ({ initialSettings }) => { const colors = { referenceColor: euiTheme.euiColorVis2, comparisonColor: euiTheme.euiColorVis1, + overlapColor: '#490771', }; - const [windowParameters, setWindowParameters] = useState(); + const [brushRanges, setBrushRanges] = useState(); + + // Ref to keep track of previous values + const brushRangesRef = useRef>({}); + const [initialAnalysisStart, setInitialAnalysisStart] = useState< - number | WindowParameters | undefined + number | SingleBrushWindowParameters | undefined >(); const [isBrushCleared, setIsBrushCleared] = useState(true); - function brushSelectionUpdate(d: WindowParameters, force: boolean) { - if (!isBrushCleared || force) { - setWindowParameters(d); - } - if (force) { - setIsBrushCleared(false); - } - } + const referenceBrushSelectionUpdate = useCallback( + function referenceBrushSelectionUpdate(d: SingleBrushWindowParameters, force: boolean) { + if (!isBrushCleared || force) { + const clone = cloneDeep(brushRangesRef.current); + clone.baselineMin = d.min; + clone.baselineMax = d.max; + brushRangesRef.current = clone; + setBrushRanges(clone as WindowParameters); + } + if (force) { + setIsBrushCleared(false); + } + }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [brushRanges, isBrushCleared] + ); + + const comparisonBrushSelectionUpdate = useCallback( + function comparisonBrushSelectionUpdate(d: SingleBrushWindowParameters, force: boolean) { + if (!isBrushCleared || force) { + const clone = cloneDeep(brushRangesRef.current); + clone.deviationMin = d.min; + clone.deviationMax = d.max; + + brushRangesRef.current = clone; + + setBrushRanges(clone as WindowParameters); + } + if (force) { + setIsBrushCleared(false); + } + }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [brushRanges, isBrushCleared] + ); function clearSelection() { - setWindowParameters(undefined); + setBrushRanges(undefined); setIsBrushCleared(true); setInitialAnalysisStart(undefined); } const barStyleAccessor = useCallback( (datum: DataSeriesDatum) => { - if (!windowParameters) return null; - - const start = datum.x; - const end = - (typeof datum.x === 'string' ? parseInt(datum.x, 10) : datum.x) + - (documentCountStats?.interval ?? 0); - - if (start >= windowParameters.baselineMin && end <= windowParameters.baselineMax) { - return colors.referenceColor; - } - if (start >= windowParameters.deviationMin && end <= windowParameters.deviationMax) { - return colors.comparisonColor; - } + if (!brushRanges) return null; + + const start = typeof datum.x === 'string' ? parseInt(datum.x, 10) : datum.x; + const end = start + (documentCountStats?.interval ?? 0); + + const isBetweenReference = isBarBetween( + start, + end, + brushRanges.baselineMin, + brushRanges.baselineMax + ); + const isBetweenDeviation = isBarBetween( + start, + end, + brushRanges.deviationMin, + brushRanges.deviationMax + ); + if (isBetweenReference && isBetweenDeviation) return colors.overlapColor; + if (isBetweenReference) return colors.referenceColor; + if (isBetweenDeviation) return colors.comparisonColor; return null; }, // eslint-disable-next-line react-hooks/exhaustive-deps - [JSON.stringify({ windowParameters, colors })] + [JSON.stringify({ brushRanges, colors })] + ); + const hasValidTimeField = useMemo( + () => dataView && dataView.timeFieldName !== undefined && dataView.timeFieldName !== '', + [dataView] ); const referenceIndexPatternLabel = initialSettings?.reference @@ -317,12 +370,12 @@ export const DataDriftPage: FC = ({ initialSettings }) => { - = ({ initialSettings }) => { sampleProbability={sampleProbability} initialAnalysisStart={initialAnalysisStart} barStyleAccessor={barStyleAccessor} - baselineBrush={{ + brush={{ label: REFERENCE_LABEL, annotationStyle: { strokeWidth: 0, @@ -341,24 +394,15 @@ export const DataDriftPage: FC = ({ initialSettings }) => { }, badgeWidth: 80, }} - deviationBrush={{ - label: COMPARISON_LABEL, - annotationStyle: { - strokeWidth: 0, - stroke: colors.comparisonColor, - fill: colors.comparisonColor, - opacity: 0.5, - }, - badgeWidth: 90, - }} stateManager={referenceStateManager} /> - = ({ initialSettings }) => { sampleProbability={documentStatsProd.sampleProbability} initialAnalysisStart={initialAnalysisStart} barStyleAccessor={barStyleAccessor} - baselineBrush={{ - label: REFERENCE_LABEL, - annotationStyle: { - strokeWidth: 0, - stroke: colors.referenceColor, - fill: colors.referenceColor, - opacity: 0.5, - }, - badgeWidth: 80, - }} - deviationBrush={{ + brush={{ label: COMPARISON_LABEL, annotationStyle: { strokeWidth: 0, @@ -398,12 +432,13 @@ export const DataDriftPage: FC = ({ initialSettings }) => { initialSettings={initialSettings} isBrushCleared={isBrushCleared} onReset={clearSelection} - windowParameters={windowParameters} + windowParameters={brushRanges} dataView={dataView} searchString={searchString ?? ''} searchQueryLanguage={searchQueryLanguage} lastRefresh={lastRefresh} onRefresh={forceRefresh} + hasValidTimeField={hasValidTimeField} /> diff --git a/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_view.tsx b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_view.tsx index dc4193fe8a331..459710517d8de 100644 --- a/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_view.tsx +++ b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_view.tsx @@ -16,6 +16,7 @@ import { FormattedMessage } from '@kbn/i18n-react'; import { EuiSwitchEvent } from '@elastic/eui/src/components/form/switch/switch'; import { useTableState } from '@kbn/ml-in-memory-table'; import type { SearchQueryLanguage } from '@kbn/ml-query-utils'; +import { isPopulatedObject } from '@kbn/ml-is-populated-object'; import { kbnTypeToSupportedType } from '../common/util/field_types_utils'; import { getDataComparisonType, @@ -24,6 +25,7 @@ import { } from './use_data_drift_result'; import type { DataDriftField, Feature, TimeRange } from './types'; import { DataDriftOverviewTable } from './data_drift_overview_table'; +import { DataDriftPromptHint } from './data_drift_hint'; const showOnlyDriftedFieldsOptionLabel = i18n.translate( 'xpack.dataVisualizer.dataDrift.showOnlyDriftedFieldsOptionLabel', @@ -41,6 +43,7 @@ interface DataDriftViewProps { lastRefresh: number; onRefresh: () => void; initialSettings: InitialSettings; + hasValidTimeField: boolean; } // Data drift view export const DataDriftView = ({ @@ -53,6 +56,7 @@ export const DataDriftView = ({ lastRefresh, onRefresh, initialSettings, + hasValidTimeField, }: DataDriftViewProps) => { const [showDataComparisonOnly, setShowDataComparisonOnly] = useState(false); @@ -60,6 +64,18 @@ export const DataDriftView = ({ WindowParameters | undefined >(windowParameters); + const canAnalyzeDataDrift = useMemo(() => { + return ( + !hasValidTimeField || + isPopulatedObject(windowParameters, [ + 'baselineMin', + 'baselineMax', + 'deviationMin', + 'deviationMax', + ]) + ); + }, [windowParameters, hasValidTimeField]); + const [fetchInfo, setFetchIno] = useState< | { fields: DataDriftField[]; @@ -153,32 +169,40 @@ export const DataDriftView = ({ const requiresWindowParameters = dataView?.isTimeBased() && windowParameters === undefined; - return requiresWindowParameters ? ( - - -