Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ResponceOps][MaintenanceWindow] MX Pagination #202539

Merged
merged 61 commits into from
Dec 21, 2024
Merged
Show file tree
Hide file tree
Changes from 48 commits
Commits
Show all changes
61 commits
Select commit Hold shift + click to select a range
be73cbb
introduce pagination for MW find API
guskovaue Oct 21, 2024
8a84cc2
add transmorm function
guskovaue Oct 22, 2024
815bfe4
Merge branch 'main' into MX-193076-MX-pagination-backend
guskovaue Oct 22, 2024
3e40644
add integration test for pagination
guskovaue Oct 22, 2024
1995414
fix types and unit tests after changes
guskovaue Oct 22, 2024
6009cd0
nit
guskovaue Oct 24, 2024
32f87a6
fix eslint
guskovaue Oct 24, 2024
a6d02f0
Merge branch 'main' into MX-193076-MX-pagination-backend
guskovaue Oct 24, 2024
cbb3185
[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…
kibanamachine Oct 24, 2024
f1e2e49
fixes after code review
guskovaue Oct 25, 2024
9d4850b
Merge branch 'MX-193076-MX-pagination-backend' of github.com:guskovau…
guskovaue Oct 25, 2024
1d20bee
more fixes after code review
guskovaue Oct 25, 2024
2698ca5
[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…
kibanamachine Oct 25, 2024
7427123
fix integration test
guskovaue Oct 25, 2024
8b83618
Merge branch 'MX-193076-MX-pagination-backend' of github.com:guskovau…
guskovaue Oct 25, 2024
d53050b
new integration test for validation max docs number
guskovaue Oct 25, 2024
f06b777
fix linter
guskovaue Oct 28, 2024
4efdc44
Merge branch 'main' into MX-193076-MX-pagination-backend
guskovaue Oct 28, 2024
5a3bc92
introduce search filter to MW table
guskovaue Dec 2, 2024
a8cf7d7
Merge branch 'main' into MX-193076-MX-pagination-frontend
guskovaue Dec 3, 2024
7d406eb
add distance between filters and table
guskovaue Dec 3, 2024
b4e2210
add search and statuses params to MW find query
guskovaue Dec 3, 2024
c9a211f
make statuses filter work
guskovaue Dec 5, 2024
00387e6
formatting
guskovaue Dec 9, 2024
546419a
add func and integration tests
guskovaue Dec 10, 2024
4a50a1a
Merge branch 'main' into MX-193076-MX-pagination-frontend
guskovaue Dec 10, 2024
1e8d11f
[CI] Auto-commit changed files from 'node scripts/check_mappings_upda…
kibanamachine Dec 10, 2024
3f83447
[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…
kibanamachine Dec 10, 2024
9ddf9b5
fix all tests and type after running ci
guskovaue Dec 11, 2024
d8758e9
Merge branch 'MX-193076-MX-pagination-frontend' of github.com:guskova…
guskovaue Dec 11, 2024
af9038a
[CI] Auto-commit changed files from 'node scripts/jest_integration -u…
kibanamachine Dec 11, 2024
8cb00ee
fixes
guskovaue Dec 11, 2024
57f3826
Merge branch 'MX-193076-MX-pagination-frontend' of github.com:guskova…
guskovaue Dec 11, 2024
c81fb63
add sorting on createdAt field desc
guskovaue Dec 11, 2024
fc58627
[CI] Auto-commit changed files from 'node scripts/check_mappings_upda…
kibanamachine Dec 11, 2024
585c785
[CI] Auto-commit changed files from 'node scripts/jest_integration -u…
kibanamachine Dec 11, 2024
fce0170
fix find mw test
guskovaue Dec 11, 2024
788681c
Merge branch 'MX-193076-MX-pagination-frontend' of github.com:guskova…
guskovaue Dec 11, 2024
59f3516
fix integration and func test after fixing sorting
guskovaue Dec 12, 2024
2d8ee8c
[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…
kibanamachine Dec 12, 2024
4642d73
fix mw func test for pagination
guskovaue Dec 12, 2024
4094bd2
Merge branch 'main' into MX-193076-MX-pagination-frontend
guskovaue Dec 12, 2024
5138f64
Merge branch 'MX-193076-MX-pagination-frontend' of github.com:guskova…
guskovaue Dec 12, 2024
00342f2
Merge branch 'main' into MX-193076-MX-pagination-frontend
guskovaue Dec 16, 2024
eabb0f8
Merge branch 'main' into MX-193076-MX-pagination-frontend
guskovaue Dec 16, 2024
a5b1df5
changes after code review
guskovaue Dec 17, 2024
c2bb6e2
Merge branch 'MX-193076-MX-pagination-frontend' of github.com:guskova…
guskovaue Dec 17, 2024
54a7575
fix brocken tests
guskovaue Dec 17, 2024
3ef396f
change loading from spinner to table progress bar
guskovaue Dec 18, 2024
cfbcdbc
Merge branch 'main' into MX-193076-MX-pagination-frontend
guskovaue Dec 18, 2024
24db939
delete extra import
guskovaue Dec 18, 2024
faa01f8
[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…
kibanamachine Dec 18, 2024
0b1485d
Merge branch 'main' into MX-193076-MX-pagination-frontend
guskovaue Dec 18, 2024
d3b12e2
uncomment
guskovaue Dec 19, 2024
c6f18cb
Merge branch 'MX-193076-MX-pagination-frontend' of github.com:guskova…
guskovaue Dec 19, 2024
0350f87
move one search state inside list component amd etc
guskovaue Dec 19, 2024
2af24c5
small fix
guskovaue Dec 19, 2024
f0c5380
[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…
kibanamachine Dec 19, 2024
5b6e3b2
fix linting
guskovaue Dec 19, 2024
4ad30d9
Merge branch 'MX-193076-MX-pagination-frontend' of github.com:guskova…
guskovaue Dec 19, 2024
8af17a7
Merge branch 'main' into MX-193076-MX-pagination-frontend
guskovaue Dec 20, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -762,7 +762,10 @@
],
"maintenance-window": [
"enabled",
"events"
"events",
"expirationDate",
"title",
"updatedAt"
],
"map": [
"bounds",
Expand Down
14 changes: 14 additions & 0 deletions packages/kbn-check-mappings-update-cli/current_mappings.json
Original file line number Diff line number Diff line change
Expand Up @@ -2521,6 +2521,20 @@
"events": {
"format": "epoch_millis||strict_date_optional_time",
"type": "date_range"
},
"expirationDate": {
"type": "date"
},
"title": {
"fields": {
"keyword": {
"type": "keyword"
}
},
"type": "text"
},
"updatedAt": {
"type": "date"
}
}
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ describe('checking migration metadata changes on all registered SO types', () =>
"lens": "5cfa2c52b979b4f8df56dd13c477e152183468b9",
"lens-ui-telemetry": "8c47a9e393861f76e268345ecbadfc8a5fb1e0bd",
"links": "1dd432cc94619a513b75cec43660a50be7aadc90",
"maintenance-window": "bf36863f5577c2d22625258bdad906eeb4cccccc",
"maintenance-window": "b84d9e0b3f89be0ae4b6fe1af6e38b4cd2554931",
"map": "76c71023bd198fb6b1163b31bafd926fe2ceb9da",
"metrics-data-source": "81b69dc9830699d9ead5ac8dcb9264612e2a3c89",
"metrics-explorer-view": "98cf395d0e87b89ab63f173eae16735584a8ff42",
Expand Down
2 changes: 2 additions & 0 deletions x-pack/plugins/alerting/common/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@ export {
MAINTENANCE_WINDOW_PATHS,
MAINTENANCE_WINDOW_DEEP_LINK_IDS,
MAINTENANCE_WINDOW_DATE_FORMAT,
MAINTENANCE_WINDOW_DEFAULT_PER_PAGE,
MAINTENANCE_WINDOW_DEFAULT_TABLE_ACTIVE_PAGE,
} from './maintenance_window';

export {
Expand Down
3 changes: 3 additions & 0 deletions x-pack/plugins/alerting/common/maintenance_window.ts
Original file line number Diff line number Diff line change
Expand Up @@ -110,3 +110,6 @@ export type MaintenanceWindowDeepLinkIds =
(typeof MAINTENANCE_WINDOW_DEEP_LINK_IDS)[keyof typeof MAINTENANCE_WINDOW_DEEP_LINK_IDS];

export const MAINTENANCE_WINDOW_DATE_FORMAT = 'MM/DD/YY hh:mm A';

export const MAINTENANCE_WINDOW_DEFAULT_PER_PAGE = 10 as const;
export const MAINTENANCE_WINDOW_DEFAULT_TABLE_ACTIVE_PAGE = 1 as const;
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,13 @@ import { maintenanceWindowResponseSchemaV1 } from '../../../response';

const MAX_DOCS = 10000;

const statusSchema = schema.oneOf([
schema.literal('running'),
schema.literal('finished'),
schema.literal('upcoming'),
schema.literal('archived'),
]);

export const findMaintenanceWindowsRequestQuerySchema = schema.object(
{
// we do not need to use schema.maybe here, because if we do not pass property page, defaultValue will be used
Expand All @@ -30,6 +37,15 @@ export const findMaintenanceWindowsRequestQuerySchema = schema.object(
description: 'The number of maintenance windows to return per page.',
},
}),
search: schema.maybe(
schema.string({
meta: {
description:
'An Elasticsearch simple_query_string query that filters the objects in the response.',
},
})
),
status: schema.maybe(schema.oneOf([statusSchema, schema.arrayOf(statusSchema)])),
},
{
validate: (params) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { AppMockRenderer, createAppMockRenderer } from '../lib/test_utils';
import { useFindMaintenanceWindows } from './use_find_maintenance_windows';

const mockAddDanger = jest.fn();
const mockedHttp = jest.fn();

jest.mock('../utils/kibana_react', () => {
const originalModule = jest.requireActual('../utils/kibana_react');
Expand All @@ -21,6 +22,7 @@ jest.mock('../utils/kibana_react', () => {
return {
services: {
...services,
http: mockedHttp,
notifications: { toasts: { addDanger: mockAddDanger } },
},
};
Expand All @@ -33,6 +35,8 @@ jest.mock('../services/maintenance_windows_api/find', () => ({

const { findMaintenanceWindows } = jest.requireMock('../services/maintenance_windows_api/find');

const defaultHookProps = { page: 1, perPage: 10, search: '', selectedStatus: [] };

let appMockRenderer: AppMockRenderer;

describe('useFindMaintenanceWindows', () => {
Expand All @@ -42,10 +46,20 @@ describe('useFindMaintenanceWindows', () => {
appMockRenderer = createAppMockRenderer();
});

it('should call findMaintenanceWindows with correct arguments on successful scenario', async () => {
renderHook(() => useFindMaintenanceWindows({ ...defaultHookProps }), {
wrapper: appMockRenderer.AppWrapper,
});

await waitFor(() =>
expect(findMaintenanceWindows).toHaveBeenCalledWith({ http: mockedHttp, ...defaultHookProps })
);
});

it('should call onError if api fails', async () => {
findMaintenanceWindows.mockRejectedValue('This is an error.');

renderHook(() => useFindMaintenanceWindows(), {
renderHook(() => useFindMaintenanceWindows({ ...defaultHookProps }), {
wrapper: appMockRenderer.AppWrapper,
});

Expand All @@ -55,7 +69,7 @@ describe('useFindMaintenanceWindows', () => {
});

it('should not try to find maintenance windows if not enabled', async () => {
renderHook(() => useFindMaintenanceWindows({ enabled: false }), {
renderHook(() => useFindMaintenanceWindows({ enabled: false, ...defaultHookProps }), {
wrapper: appMockRenderer.AppWrapper,
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,32 @@ import { i18n } from '@kbn/i18n';
import { useQuery } from '@tanstack/react-query';
import { useKibana } from '../utils/kibana_react';
import { findMaintenanceWindows } from '../services/maintenance_windows_api/find';
import { type MaintenanceWindowStatus } from '../../common';

interface UseFindMaintenanceWindowsProps {
enabled?: boolean;
page: number;
perPage: number;
search: string;
selectedStatus: MaintenanceWindowStatus[];
}

export const useFindMaintenanceWindows = (props?: UseFindMaintenanceWindowsProps) => {
const { enabled = true } = props || {};
export const useFindMaintenanceWindows = (params: UseFindMaintenanceWindowsProps) => {
const { enabled = true, page, perPage, search, selectedStatus } = params;

const {
http,
notifications: { toasts },
} = useKibana().services;

const queryFn = () => {
return findMaintenanceWindows({ http });
return findMaintenanceWindows({
http,
page,
perPage,
search,
selectedStatus,
});
};

const onErrorFn = (error: Error) => {
Expand All @@ -36,14 +47,10 @@ export const useFindMaintenanceWindows = (props?: UseFindMaintenanceWindowsProps
}
};

const {
isLoading,
isFetching,
isInitialLoading,
data = [],
refetch,
} = useQuery({
queryKey: ['findMaintenanceWindows'],
const queryKey = ['findMaintenanceWindows', page, perPage, search, selectedStatus];

const { isLoading, isFetching, isInitialLoading, data, refetch } = useQuery({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's also add keepPreviousData: true to avoid having the table clear every time we change status.

queryKey,
queryFn,
onError: onErrorFn,
refetchOnWindowFocus: false,
Expand All @@ -53,7 +60,7 @@ export const useFindMaintenanceWindows = (props?: UseFindMaintenanceWindowsProps
});

return {
maintenanceWindows: data,
data: data || { maintenanceWindows: [], total: 0 },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it is better to use the placeholderData config so the React query is aware of the initial data.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did not know about placeholderData. Thank for telling me.
But I've put it that in x-pack/plugins/alerting/public/pages/maintenance_windows/index.tsx when I destructe it: const { maintenanceWindows, total } = data; so it's no what it cannot be undefind and I do not need extra checks. But with placeholderData it does not work somehow.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this is happening because on an error data will be undefined. What if you keep the placeholderData and also do

const { data, ..// other stuff } = useFindMaintenanceWindows({ ...// args })
const { maintenanceWindows, total } = data ?? { maintenanceWindows: [], total: 0 };

isLoading: enabled && (isLoading || isFetching),
isInitialLoading,
refetch,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,15 @@ describe('MaintenanceWindowsList', () => {
isLoading={false}
items={items}
readOnly={false}
page={1}
perPage={10}
total={22}
onPageChange={() => {}}
inputText={''}
onSearchKeyup={() => {}}
onStatusChange={() => {}}
selectedStatus={[]}
onSearchChange={() => {}}
/>
);

Expand Down Expand Up @@ -128,6 +137,15 @@ describe('MaintenanceWindowsList', () => {
isLoading={false}
items={items}
readOnly={true}
page={1}
perPage={10}
total={22}
onPageChange={() => {}}
inputText={''}
onSearchKeyup={() => {}}
onStatusChange={() => {}}
selectedStatus={[]}
onSearchChange={() => {}}
/>
);

Expand All @@ -145,6 +163,15 @@ describe('MaintenanceWindowsList', () => {
isLoading={false}
items={items}
readOnly={false}
page={1}
perPage={10}
total={22}
onPageChange={() => {}}
inputText={''}
onSearchKeyup={() => {}}
onStatusChange={() => {}}
selectedStatus={[]}
onSearchChange={() => {}}
/>
);
fireEvent.click(result.getByTestId('refresh-button'));
Expand Down
Loading