[8.x] [Inventory][ECO] API error handler (elastic#193560) (elastic#19…

…3606)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Inventory][ECO] API error handler
(elastic#193560)](elastic#193560)

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

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

<!--BACKPORT [{"author":{"name":"Cauê
Marcondes","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-09-20T15:18:11Z","message":"[Inventory][ECO]
API error handler (elastic#193560)\n\ncloses
https://github.com/elastic/kibana/issues/193547\r\n\r\n<img
width=\"1278\" alt=\"Screenshot 2024-09-20 at 13 32
26\"\r\nsrc=\"https://github.com/user-attachments/assets/f68a0952-8d1f-4ff6-acf2-ac74982a9680\">","sha":"9b4ace8343f15fb73f79d05e0ff7b4212866ebb9","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor","ci:project-deploy-observability","v8.16.0"],"title":"[Inventory][ECO]
API error
handler","number":193560,"url":"https://github.com/elastic/kibana/pull/193560","mergeCommit":{"message":"[Inventory][ECO]
API error handler (elastic#193560)\n\ncloses
https://github.com/elastic/kibana/issues/193547\r\n\r\n<img
width=\"1278\" alt=\"Screenshot 2024-09-20 at 13 32
26\"\r\nsrc=\"https://github.com/user-attachments/assets/f68a0952-8d1f-4ff6-acf2-ac74982a9680\">","sha":"9b4ace8343f15fb73f79d05e0ff7b4212866ebb9"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/193560","number":193560,"mergeCommit":{"message":"[Inventory][ECO]
API error handler (elastic#193560)\n\ncloses
https://github.com/elastic/kibana/issues/193547\r\n\r\n<img
width=\"1278\" alt=\"Screenshot 2024-09-20 at 13 32
26\"\r\nsrc=\"https://github.com/user-attachments/assets/f68a0952-8d1f-4ff6-acf2-ac74982a9680\">","sha":"9b4ace8343f15fb73f79d05e0ff7b4212866ebb9"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Cauê Marcondes <[email protected]>

x-pack/plugins/observability_solution/inventory/public/hooks/use_inventory_abortable_async.ts

@@ -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 { useAbortableAsync } from '@kbn/observability-utils/hooks/use_abortable_async';
+import { i18n } from '@kbn/i18n';
+import { IHttpFetchError, ResponseErrorBody } from '@kbn/core-http-browser';
+import { useKibana } from './use_kibana';
+
+const getDetailsFromErrorResponse = (error: IHttpFetchError<ResponseErrorBody>) =>
+  error.body?.message ?? error.response?.statusText;
+
+export function useInventoryAbortableAsync<T>(...args: Parameters<typeof useAbortableAsync<T>>) {
+  const {
+    core: { notifications },
+  } = useKibana();
+  const response = useAbortableAsync(...args);
+
+  if (response.error) {
+    const errorMessage =
+      'response' in response.error
+        ? getDetailsFromErrorResponse(response.error as IHttpFetchError<ResponseErrorBody>)
+        : response.error.message;
+
+    notifications.toasts.addDanger({
+      title: i18n.translate('xpack.inventory.apiCall.error.title', {
+        defaultMessage: `Error while fetching resource`,
+      }),
+      text: errorMessage,
+    });
+  }
+
+  return response;
+}

x-pack/plugins/observability_solution/inventory/public/pages/inventory_page/index.tsx

@@ -4,13 +4,13 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React from 'react';
-import { useAbortableAsync } from '@kbn/observability-utils/hooks/use_abortable_async';
 import { EuiDataGridSorting } from '@elastic/eui';
+import React from 'react';
 import { EntitiesGrid } from '../../components/entities_grid';
-import { useKibana } from '../../hooks/use_kibana';
+import { useInventoryAbortableAsync } from '../../hooks/use_inventory_abortable_async';
 import { useInventoryParams } from '../../hooks/use_inventory_params';
 import { useInventoryRouter } from '../../hooks/use_inventory_router';
+import { useKibana } from '../../hooks/use_kibana';
 
 export function InventoryPage() {
   const {
@@ -20,7 +20,7 @@ export function InventoryPage() {
   const { sortDirection, sortField, pageIndex } = query;
   const inventoryRoute = useInventoryRouter();
 
-  const { value = { entities: [] }, loading } = useAbortableAsync(
+  const { value = { entities: [] }, loading } = useInventoryAbortableAsync(
     ({ signal }) => {
       return inventoryAPIClient.fetch('GET /internal/inventory/entities', {
         params: {

x-pack/plugins/observability_solution/inventory/tsconfig.json

@@ -37,6 +37,7 @@
     "@kbn/es-types",
     "@kbn/entities-schema",
     "@kbn/i18n-react",
-    "@kbn/io-ts-utils"
+    "@kbn/io-ts-utils",
+    "@kbn/core-http-browser"
   ]
 }