forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Synthetics] Fix overview page vizs for large number of monitors !! (e…
…lastic#199512) ## Summary Fixes elastic#187264 !! Apply filters directly instead of passing each monitor id !! ### Testing No special testing is needed, other than make sure, alerts/errors vizs continue to work as expected !! <img width="1726" alt="image" src="https://github.com/user-attachments/assets/9c1889a5-4822-442b-97af-c2a4084c4503"> --------- Co-authored-by: kibanamachine <[email protected]>
- Loading branch information
1 parent
764abe6
commit 944e6fa
Showing
22 changed files
with
410 additions
and
203 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
124 changes: 124 additions & 0 deletions
124
...thetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_filters.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| /* | ||
| * 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 * as spaceHook from '../../../../../hooks/use_kibana_space'; | ||
| import * as paramHook from '../../../hooks/use_url_params'; | ||
| import * as redux from 'react-redux'; | ||
| import { useMonitorFilters } from './use_monitor_filters'; | ||
| import { WrappedHelper } from '../../../utils/testing'; | ||
|
|
||
| describe('useMonitorFilters', () => { | ||
| beforeEach(() => { | ||
| jest.clearAllMocks(); | ||
| }); | ||
|
|
||
| const spaceSpy = jest.spyOn(spaceHook, 'useKibanaSpace'); | ||
| const paramSpy = jest.spyOn(paramHook, 'useGetUrlParams'); | ||
| const selSPy = jest.spyOn(redux, 'useSelector'); | ||
|
|
||
| it('should return an empty array when no parameters are provided', () => { | ||
| const { result } = renderHook(() => useMonitorFilters({}), { wrapper: WrappedHelper }); | ||
|
|
||
| expect(result.current).toEqual([]); | ||
| }); | ||
|
|
||
| it('should return filters for allIds and schedules', () => { | ||
| spaceSpy.mockReturnValue({} as any); | ||
| paramSpy.mockReturnValue({ schedules: 'daily' } as any); | ||
| selSPy.mockReturnValue({ status: { allIds: ['id1', 'id2'] } }); | ||
|
|
||
| const { result } = renderHook(() => useMonitorFilters({}), { wrapper: WrappedHelper }); | ||
|
|
||
| expect(result.current).toEqual([{ field: 'monitor.id', values: ['id1', 'id2'] }]); | ||
| }); | ||
|
|
||
| it('should return filters for allIds and empty schedules', () => { | ||
| spaceSpy.mockReturnValue({} as any); | ||
| paramSpy.mockReturnValue({ schedules: [] } as any); | ||
| selSPy.mockReturnValue({ status: { allIds: ['id1', 'id2'] } }); | ||
|
|
||
| const { result } = renderHook(() => useMonitorFilters({}), { wrapper: WrappedHelper }); | ||
|
|
||
| expect(result.current).toEqual([]); | ||
| }); | ||
|
|
||
| it('should return filters for project IDs', () => { | ||
| spaceSpy.mockReturnValue({ space: null } as any); | ||
| paramSpy.mockReturnValue({ projects: ['project1', 'project2'] } as any); | ||
| selSPy.mockReturnValue({ status: { allIds: [] } }); | ||
|
|
||
| const { result } = renderHook(() => useMonitorFilters({}), { wrapper: WrappedHelper }); | ||
|
|
||
| expect(result.current).toEqual([ | ||
| { field: 'monitor.project.id', values: ['project1', 'project2'] }, | ||
| ]); | ||
| }); | ||
|
|
||
| it('should return filters for tags and locations', () => { | ||
| spaceSpy.mockReturnValue({ space: null } as any); | ||
| paramSpy.mockReturnValue({ | ||
| tags: ['tag1', 'tag2'], | ||
| locations: ['location1', 'location2'], | ||
| } as any); | ||
| selSPy.mockReturnValue({ status: { allIds: [] } }); | ||
|
|
||
| const { result } = renderHook(() => useMonitorFilters({}), { wrapper: WrappedHelper }); | ||
|
|
||
| expect(result.current).toEqual([ | ||
| { field: 'tags', values: ['tag1', 'tag2'] }, | ||
| { field: 'observer.geo.name', values: ['location1', 'location2'] }, | ||
| ]); | ||
| }); | ||
|
|
||
| it('should include space filters for alerts', () => { | ||
| spaceSpy.mockReturnValue({ space: { id: 'space1' } } as any); | ||
| paramSpy.mockReturnValue({} as any); | ||
| selSPy.mockReturnValue({ status: { allIds: [] } }); | ||
|
|
||
| const { result } = renderHook(() => useMonitorFilters({ forAlerts: true }), { | ||
| wrapper: WrappedHelper, | ||
| }); | ||
|
|
||
| expect(result.current).toEqual([{ field: 'kibana.space_ids', values: ['space1'] }]); | ||
| }); | ||
|
|
||
| it('should include space filters for non-alerts', () => { | ||
| spaceSpy.mockReturnValue({ space: { id: 'space2' } } as any); | ||
| paramSpy.mockReturnValue({} as any); | ||
| selSPy.mockReturnValue({ status: { allIds: [] } }); | ||
|
|
||
| const { result } = renderHook(() => useMonitorFilters({}), { wrapper: WrappedHelper }); | ||
|
|
||
| expect(result.current).toEqual([{ field: 'meta.space_id', values: ['space2'] }]); | ||
| }); | ||
|
|
||
| it('should handle a combination of parameters', () => { | ||
| spaceSpy.mockReturnValue({ space: { id: 'space3' } } as any); | ||
| paramSpy.mockReturnValue({ | ||
| schedules: 'daily', | ||
| projects: ['projectA'], | ||
| tags: ['tagB'], | ||
| locations: ['locationC'], | ||
| monitorTypes: 'http', | ||
| } as any); | ||
| selSPy.mockReturnValue({ status: { allIds: ['id3', 'id4'] } }); | ||
|
|
||
| const { result } = renderHook(() => useMonitorFilters({ forAlerts: false }), { | ||
| wrapper: WrappedHelper, | ||
| }); | ||
|
|
||
| expect(result.current).toEqual([ | ||
| { field: 'monitor.id', values: ['id3', 'id4'] }, | ||
| { field: 'monitor.project.id', values: ['projectA'] }, | ||
| { field: 'monitor.type', values: ['http'] }, | ||
| { field: 'tags', values: ['tagB'] }, | ||
| { field: 'observer.geo.name', values: ['locationC'] }, | ||
| { field: 'meta.space_id', values: ['space3'] }, | ||
| ]); | ||
| }); | ||
| }); |
36 changes: 36 additions & 0 deletions
36
...n/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_filters.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| /* | ||
| * 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 { UrlFilter } from '@kbn/exploratory-view-plugin/public'; | ||
| import { useSelector } from 'react-redux'; | ||
| import { isEmpty } from 'lodash'; | ||
| import { useGetUrlParams } from '../../../hooks/use_url_params'; | ||
| import { useKibanaSpace } from '../../../../../hooks/use_kibana_space'; | ||
| import { selectOverviewStatus } from '../../../state/overview_status'; | ||
|
|
||
| export const useMonitorFilters = ({ forAlerts }: { forAlerts?: boolean }): UrlFilter[] => { | ||
| const { space } = useKibanaSpace(); | ||
| const { locations, monitorTypes, tags, projects, schedules } = useGetUrlParams(); | ||
| const { status: overviewStatus } = useSelector(selectOverviewStatus); | ||
| const allIds = overviewStatus?.allIds ?? []; | ||
|
|
||
| return [ | ||
| // since schedule isn't available in heartbeat data, in that case we rely on monitor.id | ||
| ...(allIds?.length && !isEmpty(schedules) ? [{ field: 'monitor.id', values: allIds }] : []), | ||
| ...(projects?.length ? [{ field: 'monitor.project.id', values: getValues(projects) }] : []), | ||
| ...(monitorTypes?.length ? [{ field: 'monitor.type', values: getValues(monitorTypes) }] : []), | ||
| ...(tags?.length ? [{ field: 'tags', values: getValues(tags) }] : []), | ||
| ...(locations?.length ? [{ field: 'observer.geo.name', values: getValues(locations) }] : []), | ||
| ...(space | ||
| ? [{ field: forAlerts ? 'kibana.space_ids' : 'meta.space_id', values: [space.id] }] | ||
| : []), | ||
| ]; | ||
| }; | ||
|
|
||
| const getValues = (values: string | string[]): string[] => { | ||
| return Array.isArray(values) ? values : [values]; | ||
| }; |
18 changes: 18 additions & 0 deletions
18
...hetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_query_filters.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| /* | ||
| * 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 { useMemo } from 'react'; | ||
| import { useGetUrlParams } from '../../../hooks'; | ||
| import { getQueryFilters } from '../../../../../../common/constants/client_defaults'; | ||
|
|
||
| export const useMonitorQueryFilters = () => { | ||
| const { query } = useGetUrlParams(); | ||
|
|
||
| return useMemo(() => { | ||
| return query ? [getQueryFilters(query)] : undefined; | ||
| }, [query]); | ||
| }; |
Oops, something went wrong.