[8.19] [Watcher] Fix watches table (elastic#218853) (elastic#219392)

# Backport

This will backport the following commits from `main` to `8.19`:
- [[Watcher] Fix watches table
(elastic#218853)](elastic#218853)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Elena
Stoeva","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-04-28T13:07:42Z","message":"[Watcher]
Fix watches table (elastic#218853)\n\nFixes
https://github.com/elastic/kibana/issues/218341\n\n## Summary\n\nThis PR
fixes the watches table where only up to 10 watches were\npreviously
displayed because the Query Watch API returns maximum 10\nwatches by
default. To fix this and to avoid performance issues for\nclusters with
a large number of watches, we use pagination to only fetch\nthe watches
for the current page.\n\n**Limitations:**\n- The Query Watch API only
allows sorting by `_id` and `metadata.*`\nfields. However, we cannot
allow sorting by ID in the table because this\nrequires enabling the
`indices.id_field_data.enabled` cluster setting,\nwhich is disabled by
default in the cluster. We can only sort by Name\nbecause the name is
part of the `metadata` property. Therefore, we need\nto remove sorting
for all columns but the Name.\n- We cannot utilize the native behavior
of the Search bar where the\ntable would filter all items by itself,
since in this case it would only\nfilter the current page of watches. We
need to pass the query to the\nQuery Watches API. However, again only
the `_id` and `metadata.*` fields\ncan be searched. Additionally, for
`_id` we cannot use a wildcard query\nso the user would need to input
the whole id for the requested watch to\nbe displayed. For name, we can
use a wildcard query so searching by a\nsubstring of a name should
work.\n\n**How to test:**\n1. Create more than 10 watches through the UI
or with a Console request:\n\n```\nPUT _watcher/watch/{id}\n{\n
\"metadata\": {\n \"name\": \"test-watch-{id}\",\n \"xpack\": {\n
\"type\": \"json\"\n }\n },\n \"trigger\": {\n \"schedule\": {\n
\"interval\": \"30m\"\n }\n }\n}\n```\n2. Verify that all watches can be
viewed in the table and that they can\nbe sorted by Name and search by
Name or
ID.\n\n\n\n\n\nhttps://github.com/user-attachments/assets/6c812c5d-51e9-472c-a4d9-b1035843b9bb\n\n---------\n\nCo-authored-by:
kibanamachine
<[email protected]>\nCo-authored-by:
Matthew Kime
<[email protected]>","sha":"d9c481799f0edb3088595d21e4d7615b1a4e12f6","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Watcher","Team:Kibana
Management","release_note:skip","backport:prev-minor","v9.1.0","v8.19.0","v8.18.1","v9.0.1"],"title":"[Watcher]
Fix watches
table","number":218853,"url":"https://github.com/elastic/kibana/pull/218853","mergeCommit":{"message":"[Watcher]
Fix watches table (elastic#218853)\n\nFixes
https://github.com/elastic/kibana/issues/218341\n\n## Summary\n\nThis PR
fixes the watches table where only up to 10 watches were\npreviously
displayed because the Query Watch API returns maximum 10\nwatches by
default. To fix this and to avoid performance issues for\nclusters with
a large number of watches, we use pagination to only fetch\nthe watches
for the current page.\n\n**Limitations:**\n- The Query Watch API only
allows sorting by `_id` and `metadata.*`\nfields. However, we cannot
allow sorting by ID in the table because this\nrequires enabling the
`indices.id_field_data.enabled` cluster setting,\nwhich is disabled by
default in the cluster. We can only sort by Name\nbecause the name is
part of the `metadata` property. Therefore, we need\nto remove sorting
for all columns but the Name.\n- We cannot utilize the native behavior
of the Search bar where the\ntable would filter all items by itself,
since in this case it would only\nfilter the current page of watches. We
need to pass the query to the\nQuery Watches API. However, again only
the `_id` and `metadata.*` fields\ncan be searched. Additionally, for
`_id` we cannot use a wildcard query\nso the user would need to input
the whole id for the requested watch to\nbe displayed. For name, we can
use a wildcard query so searching by a\nsubstring of a name should
work.\n\n**How to test:**\n1. Create more than 10 watches through the UI
or with a Console request:\n\n```\nPUT _watcher/watch/{id}\n{\n
\"metadata\": {\n \"name\": \"test-watch-{id}\",\n \"xpack\": {\n
\"type\": \"json\"\n }\n },\n \"trigger\": {\n \"schedule\": {\n
\"interval\": \"30m\"\n }\n }\n}\n```\n2. Verify that all watches can be
viewed in the table and that they can\nbe sorted by Name and search by
Name or
ID.\n\n\n\n\n\nhttps://github.com/user-attachments/assets/6c812c5d-51e9-472c-a4d9-b1035843b9bb\n\n---------\n\nCo-authored-by:
kibanamachine
<[email protected]>\nCo-authored-by:
Matthew Kime
<[email protected]>","sha":"d9c481799f0edb3088595d21e4d7615b1a4e12f6"}},"sourceBranch":"main","suggestedTargetBranches":["8.19","8.18","9.0"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/218853","number":218853,"mergeCommit":{"message":"[Watcher]
Fix watches table (elastic#218853)\n\nFixes
https://github.com/elastic/kibana/issues/218341\n\n## Summary\n\nThis PR
fixes the watches table where only up to 10 watches were\npreviously
displayed because the Query Watch API returns maximum 10\nwatches by
default. To fix this and to avoid performance issues for\nclusters with
a large number of watches, we use pagination to only fetch\nthe watches
for the current page.\n\n**Limitations:**\n- The Query Watch API only
allows sorting by `_id` and `metadata.*`\nfields. However, we cannot
allow sorting by ID in the table because this\nrequires enabling the
`indices.id_field_data.enabled` cluster setting,\nwhich is disabled by
default in the cluster. We can only sort by Name\nbecause the name is
part of the `metadata` property. Therefore, we need\nto remove sorting
for all columns but the Name.\n- We cannot utilize the native behavior
of the Search bar where the\ntable would filter all items by itself,
since in this case it would only\nfilter the current page of watches. We
need to pass the query to the\nQuery Watches API. However, again only
the `_id` and `metadata.*` fields\ncan be searched. Additionally, for
`_id` we cannot use a wildcard query\nso the user would need to input
the whole id for the requested watch to\nbe displayed. For name, we can
use a wildcard query so searching by a\nsubstring of a name should
work.\n\n**How to test:**\n1. Create more than 10 watches through the UI
or with a Console request:\n\n```\nPUT _watcher/watch/{id}\n{\n
\"metadata\": {\n \"name\": \"test-watch-{id}\",\n \"xpack\": {\n
\"type\": \"json\"\n }\n },\n \"trigger\": {\n \"schedule\": {\n
\"interval\": \"30m\"\n }\n }\n}\n```\n2. Verify that all watches can be
viewed in the table and that they can\nbe sorted by Name and search by
Name or
ID.\n\n\n\n\n\nhttps://github.com/user-attachments/assets/6c812c5d-51e9-472c-a4d9-b1035843b9bb\n\n---------\n\nCo-authored-by:
kibanamachine
<[email protected]>\nCo-authored-by:
Matthew Kime
<[email protected]>","sha":"d9c481799f0edb3088595d21e4d7615b1a4e12f6"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.0","label":"v9.0.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Elena Stoeva <[email protected]>
Co-authored-by: Matthew Kime <[email protected]>

Author: 3 people

x-pack/platform/plugins/private/translations/translations/fr-FR.json

@@ -51653,7 +51653,6 @@
     "xpack.watcher.sections.watchList.watchTable.commentHeader": "Commentaire",
     "xpack.watcher.sections.watchList.watchTable.commentHeader.tooltipText": "Si des actions ont été reconnues ou contraintes, ou si leur exécution a échoué.",
     "xpack.watcher.sections.watchList.watchTable.disabledWatchTooltipText": "Cette alerte est en lecture seule",
-    "xpack.watcher.sections.watchList.watchTable.errorOnSearch": "Recherche non valide : {queryError}",
     "xpack.watcher.sections.watchList.watchTable.idHeader": "ID",
     "xpack.watcher.sections.watchList.watchTable.lastFiredHeader": "Dernière correspondance de la condition",
     "xpack.watcher.sections.watchList.watchTable.lastFiredHeader.tooltipText": "Dernière fois où la condition a été remplie et qu'une action a été entreprise.",

x-pack/platform/plugins/private/translations/translations/ja-JP.json

@@ -51613,7 +51613,6 @@
     "xpack.watcher.sections.watchList.watchTable.commentHeader": "コメント",
     "xpack.watcher.sections.watchList.watchTable.commentHeader.tooltipText": "アクションが確認または調整されたか、あるいは実行が失敗したかどうか。",
     "xpack.watcher.sections.watchList.watchTable.disabledWatchTooltipText": "このウォッチは読み取り専用です",
-    "xpack.watcher.sections.watchList.watchTable.errorOnSearch": "無効な検索：{queryError}",
     "xpack.watcher.sections.watchList.watchTable.idHeader": "ID",
     "xpack.watcher.sections.watchList.watchTable.lastFiredHeader": "前回条件が満たされた日時",
     "xpack.watcher.sections.watchList.watchTable.lastFiredHeader.tooltipText": "最後に条件が満たされ、アクションが実行された日付。",

x-pack/platform/plugins/private/translations/translations/zh-CN.json

@@ -51697,7 +51697,6 @@
     "xpack.watcher.sections.watchList.watchTable.commentHeader": "注释",
     "xpack.watcher.sections.watchList.watchTable.commentHeader.tooltipText": "是已确认、已限制还是无法执行任何操作。",
     "xpack.watcher.sections.watchList.watchTable.disabledWatchTooltipText": "此监视为只读",
-    "xpack.watcher.sections.watchList.watchTable.errorOnSearch": "搜索无效：{queryError}",
     "xpack.watcher.sections.watchList.watchTable.idHeader": "ID",
     "xpack.watcher.sections.watchList.watchTable.lastFiredHeader": "上次符合条件",
     "xpack.watcher.sections.watchList.watchTable.lastFiredHeader.tooltipText": "上次符合条件并采取了操作的时间。",

x-pack/platform/plugins/private/watcher/__jest__/client_integration/watch_list_page.test.ts

@@ -76,48 +76,17 @@ describe('<WatchListPage />', () => {
           testBed.component.update();
         });
 
-        test('should show error callout if search is invalid', async () => {
-          const { exists, actions } = testBed;
-
-          await actions.searchWatches('or');
-
-          expect(exists('watcherListSearchError')).toBe(true);
-        });
-
         test('should retain the search query', async () => {
-          const { table, actions } = testBed;
-
-          await actions.searchWatches(watch1.name);
+          const { actions, find } = testBed;
 
-          const { tableCellsValues } = table.getMetaData('watchesTable');
-
-          // Expect "watch1" is only visible in the table
-          expect(tableCellsValues.length).toEqual(1);
-          const row = tableCellsValues[0];
-          const { name, id } = watch1;
-
-          const expectedRow = [
-            '', // checkbox
-            id,
-            name,
-            '', // state
-            '', // lastMetCondition
-            '', // lastChecked
-            '', // comment
-            '', // row actions
-          ];
-
-          expect(row).toEqual(expectedRow);
+          await actions.searchWatches('query text');
 
           await actions.advanceTimeToTableRefresh();
 
-          const { tableCellsValues: updatedTableCellsValues } = table.getMetaData('watchesTable');
-
-          // Verify "watch1" is still the only watch visible in the table
-          expect(updatedTableCellsValues.length).toEqual(1);
-          const updatedRow = updatedTableCellsValues[0];
-
-          expect(updatedRow).toEqual(expectedRow);
+          const searchInput = find('watchesTableContainer').find('input.euiFieldSearch');
+          // Verify the query text is still in the search bar
+          // @ts-ignore
+          expect(searchInput.instance().value).toEqual('query text');
         });
 
         test('should set the correct app title', () => {

x-pack/platform/plugins/private/watcher/common/types/index.ts

@@ -13,3 +13,5 @@ export type {
   ServerWatchStatusModel,
   ClientWatchStatusModel,
 } from './status_types';
+
+export type { BaseWatch } from './watch_types';

x-pack/platform/plugins/private/watcher/public/application/lib/api.ts

@@ -29,16 +29,33 @@ export const getHttpClient = () => {
 
 const basePath = ROUTES.API_ROOT;
 
-const loadWatchesDeserializer = ({ watches = [] }: { watches: any[] }) => {
-  return watches.map((watch: any) => Watch.fromUpstreamJson(watch));
+const loadWatchesDeserializer = ({
+  watches = [],
+  watchCount,
+}: {
+  watches: any[];
+  watchCount: number;
+}) => {
+  return {
+    watches: watches.map((watch: any) => Watch.fromUpstreamJson(watch)),
+    watchCount,
+  };
 };
 
-export const useLoadWatches = (pollIntervalMs: number) => {
+export const useLoadWatches = (
+  pollIntervalMs: number,
+  pageSize: number,
+  pageIndex: number,
+  sortField?: string,
+  sortDirection?: string,
+  query?: string
+) => {
   return useRequest({
     path: `${basePath}/watches`,
     method: 'get',
     pollIntervalMs,
     deserializer: loadWatchesDeserializer,
+    query: { pageSize, pageIndex, sortField, sortDirection, query },
   });
 };