[8.x] [ResponseOps][Rules] Add loading state to rule params data views selector (#203654) (#204424)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ResponseOps][Rules] Add loading state to rule params data views
selector (#203654)](https://github.com/elastic/kibana/pull/203654)

<!--- Backport version: 9.4.3 -->

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

<!--BACKPORT [{"author":{"name":"Umberto
Pepato","email":"umbopepato@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-12-16T15:43:13Z","message":"[ResponseOps][Rules]
Add loading state to rule params data views selector (#203654)\n\n##
Summary\r\n\r\nIntroduces a loading state in the data views select
popover and renders\r\na loading indicator when DVs are not available
yet. This makes sure that\r\neven if the `savedObjectsClient.find` call
of the data views service\r\ntakes a long time, we don't show an empty
popover in the
meantime.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/5bbe0c68-3ceb-4d7f-91fd-357db4caa5c1\r\n\r\n##
References\r\n\r\nFixes #198502 \r\n\r\n## Release note\r\n\r\nFix race
condition in alerting rules data view
selector","sha":"713d4bbcb2d9f5e707d06c1d298287edd3e694d0","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","Team:ResponseOps","v9.0.0","backport:all-open"],"title":"[ResponseOps][Rules]
Add loading state to rule params data views
selector","number":203654,"url":"https://github.com/elastic/kibana/pull/203654","mergeCommit":{"message":"[ResponseOps][Rules]
Add loading state to rule params data views selector (#203654)\n\n##
Summary\r\n\r\nIntroduces a loading state in the data views select
popover and renders\r\na loading indicator when DVs are not available
yet. This makes sure that\r\neven if the `savedObjectsClient.find` call
of the data views service\r\ntakes a long time, we don't show an empty
popover in the
meantime.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/5bbe0c68-3ceb-4d7f-91fd-357db4caa5c1\r\n\r\n##
References\r\n\r\nFixes #198502 \r\n\r\n## Release note\r\n\r\nFix race
condition in alerting rules data view
selector","sha":"713d4bbcb2d9f5e707d06c1d298287edd3e694d0"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/203654","number":203654,"mergeCommit":{"message":"[ResponseOps][Rules]
Add loading state to rule params data views selector (#203654)\n\n##
Summary\r\n\r\nIntroduces a loading state in the data views select
popover and renders\r\na loading indicator when DVs are not available
yet. This makes sure that\r\neven if the `savedObjectsClient.find` call
of the data views service\r\ntakes a long time, we don't show an empty
popover in the
meantime.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/5bbe0c68-3ceb-4d7f-91fd-357db4caa5c1\r\n\r\n##
References\r\n\r\nFixes #198502 \r\n\r\n## Release note\r\n\r\nFix race
condition in alerting rules data view
selector","sha":"713d4bbcb2d9f5e707d06c1d298287edd3e694d0"}}]}]
BACKPORT-->

Co-authored-by: Umberto Pepato <umbopepato@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2024-12-17 04:39:48 +11:00 committed by GitHub
parent 9fd8170ff8
commit ab57078746
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -18,6 +18,7 @@ import {
EuiPopover,
EuiPopoverFooter,
EuiPopoverTitle,
EuiLoadingSpinner,
EuiText,
useEuiPaddingCSS,
useIsWithinBreakpoints,
@ -63,6 +64,7 @@ export const DataViewSelectPopover: React.FunctionComponent<DataViewSelectPopove
onSelectDataView,
onChangeMetaData,
}) => {
const [loadingDataViews, setLoadingDataViews] = useState(false);
const [dataViewItems, setDataViewsItems] = useState<DataViewListItemEnhanced[]>([]);
const [dataViewPopoverOpen, setDataViewPopoverOpen] = useState(false);
@ -71,7 +73,7 @@ export const DataViewSelectPopover: React.FunctionComponent<DataViewSelectPopove
const closeDataViewEditor = useRef<() => void | undefined>();
const allDataViewItems = useMemo(
() => [...dataViewItems, ...metadata.adHocDataViewList.map(toDataViewListItem)],
() => [...(dataViewItems ?? []), ...metadata.adHocDataViewList.map(toDataViewListItem)],
[dataViewItems, metadata.adHocDataViewList]
);
@ -87,10 +89,16 @@ export const DataViewSelectPopover: React.FunctionComponent<DataViewSelectPopove
);
const loadPersistedDataViews = useCallback(async () => {
const ids = await dataViews.getIds();
const dataViewsList = await Promise.all(ids.map((id) => dataViews.get(id)));
setDataViewsItems(dataViewsList.map(toDataViewListItem));
setLoadingDataViews(true);
try {
// Calling getIds with refresh = true to make sure we don't get stale data
const ids = await dataViews.getIds(true);
const dataViewsList = await Promise.all(ids.map((id) => dataViews.get(id)));
setDataViewsItems(dataViewsList.map(toDataViewListItem));
} catch (e) {
// Error fetching data views
}
setLoadingDataViews(false);
}, [dataViews]);
const onAddAdHocDataView = useCallback(
@ -153,8 +161,10 @@ export const DataViewSelectPopover: React.FunctionComponent<DataViewSelectPopove
[dataViews, onAddAdHocDataView, onChangeDataView]
);
if (!allDataViewItems) {
return null;
if (loadingDataViews) {
// The loading indicator is to make sure we don't render an
// empty popover when the DV cache is initially loading
return <EuiLoadingSpinner />;
}
return (