jennypavlova · Apr 10, 2024 · Mar 6, 2024 · Mar 7, 2024 · Mar 7, 2024 · Mar 8, 2024
diff --git a/...ty_solution/apm/public/components/app/service_dashboards/actions/save_dashboard_modal.tsx b/...ty_solution/apm/public/components/app/service_dashboards/actions/save_dashboard_modal.tsx
@@ -282,7 +282,7 @@ function getEditSuccessToastLabels(dashboardName: string) {
       }
     ),
     text: i18n.translate('xpack.apm.serviceDashboards.editSuccess.toast.text', {
-      defaultMessage: 'Your dashboard link have been updated',
+      defaultMessage: 'Your dashboard link has been updated',
     }),
   };
 }
diff --git a/x-pack/plugins/observability_solution/infra/common/custom_dashboards.ts b/x-pack/plugins/observability_solution/infra/common/custom_dashboards.ts
@@ -18,3 +18,7 @@ export interface InfraCustomDashboard {
 export interface InfraSavedCustomDashboard extends InfraCustomDashboard {
   id: string;
 }
+
+export interface DashboardItemWithTitle extends InfraSavedCustomDashboard {
+  title: string;
+}
diff --git a/x-pack/plugins/observability_solution/infra/common/http_api/custom_dashboards_api.ts b/x-pack/plugins/observability_solution/infra/common/http_api/custom_dashboards_api.ts
@@ -21,7 +21,7 @@ const SavedObjectIdRT = rt.type({
   id: rt.string,
 });
 
-const InfraCustomDashboardRT = rt.intersection([AssetTypeRT, PayloadRT, SavedObjectIdRT]);
+export const InfraCustomDashboardRT = rt.intersection([AssetTypeRT, PayloadRT, SavedObjectIdRT]);
 
 /**
  GET endpoint
@@ -59,3 +59,4 @@ export const InfraDeleteCustomDashboardsRequestParamsRT = rt.intersection([
   AssetTypeRT,
   SavedObjectIdRT,
 ]);
+export const InfraDeleteCustomDashboardsResponseBodyRT = rt.string;
diff --git a/x-pack/plugins/observability_solution/infra/kibana.jsonc b/x-pack/plugins/observability_solution/infra/kibana.jsonc
@@ -16,6 +16,7 @@
       "data",
       "dataViews",
       "dataViewEditor",
+      "dashboard",
       "discover",
       "embeddable",
       "features",

diff --git a/...ns/observability_solution/infra/public/common/asset_details_config/asset_details_tabs.tsx b/...ns/observability_solution/infra/public/common/asset_details_config/asset_details_tabs.tsx
@@ -51,4 +51,10 @@ export const commonFlyoutTabs: Tab[] = [
       defaultMessage: 'Osquery',
     }),
   },
+  {
+    id: ContentTabIds.DASHBOARDS,
+    name: i18n.translate('xpack.infra.infra.nodeDetails.tabs.dashboards', {
+      defaultMessage: 'Dashboards',
+    }),
+  },
 ];
diff --git a/.../plugins/observability_solution/infra/public/components/asset_details/content/content.tsx b/.../plugins/observability_solution/infra/public/components/asset_details/content/content.tsx
@@ -9,7 +9,16 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
 import { DatePicker } from '../date_picker/date_picker';
 import { useTabSwitcherContext } from '../hooks/use_tab_switcher';
-import { Anomalies, Logs, Metadata, Osquery, Overview, Processes, Profiling } from '../tabs';
+import {
+  Anomalies,
+  Dashboards,
+  Logs,
+  Metadata,
+  Osquery,
+  Overview,
+  Processes,
+  Profiling,
+} from '../tabs';
 import { ContentTabIds } from '../types';
 
 export const Content = () => {
@@ -23,6 +32,7 @@ export const Content = () => {
             ContentTabIds.METADATA,
             ContentTabIds.PROCESSES,
             ContentTabIds.ANOMALIES,
+            ContentTabIds.DASHBOARDS,
           ]}
         />
       </EuiFlexItem>
@@ -48,6 +58,9 @@ export const Content = () => {
         <TabPanel activeWhen={ContentTabIds.PROFILING}>
           <Profiling />
         </TabPanel>
+        <TabPanel activeWhen={ContentTabIds.DASHBOARDS}>
+          <Dashboards />
+        </TabPanel>
       </EuiFlexItem>
     </EuiFlexGroup>
   );

diff --git a/...ility_solution/infra/public/components/asset_details/hooks/use_asset_details_url_state.ts b/...ility_solution/infra/public/components/asset_details/hooks/use_asset_details_url_state.ts
@@ -59,6 +59,7 @@ const TabIdRT = rt.union([
   rt.literal(ContentTabIds.LOGS),
   rt.literal(ContentTabIds.ANOMALIES),
   rt.literal(ContentTabIds.OSQUERY),
+  rt.literal(ContentTabIds.DASHBOARDS),
 ]);
 
 const AlertStatusRT = rt.union([
@@ -84,6 +85,7 @@ const AssetDetailsUrlStateRT = rt.partial({
   logsSearch: rt.string,
   profilingSearch: rt.string,
   alertStatus: AlertStatusRT,
+  dashboardId: rt.string,
 });
 
 const AssetDetailsUrlRT = rt.union([AssetDetailsUrlStateRT, rt.null]);

diff --git a/...servability_solution/infra/public/components/asset_details/hooks/use_custom_dashboards.ts b/...servability_solution/infra/public/components/asset_details/hooks/use_custom_dashboards.ts
@@ -0,0 +1,211 @@
+/*
+ * 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 { useCallback } from 'react';
+import { fold } from 'fp-ts/lib/Either';
+import { identity } from 'fp-ts/lib/function';
+import { pipe } from 'fp-ts/lib/pipeable';
+import { i18n } from '@kbn/i18n';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
+import { useTrackedPromise } from '../../../utils/use_tracked_promise';
+import type {
+  InfraCustomDashboard,
+  InfraSavedCustomDashboard,
+  InfraCustomDashboardAssetType,
+} from '../../../../common/custom_dashboards';
+import {
+  InfraCustomDashboardRT,
+  InfraDeleteCustomDashboardsResponseBodyRT,
+} from '../../../../common/http_api/custom_dashboards_api';
+import { throwErrors, createPlainError } from '../../../../common/runtime_types';
+
+type ActionType = 'create' | 'update' | 'delete';
+const errorMessages: Record<ActionType, string> = {
+  create: i18n.translate('xpack.infra.linkDashboards.addFailure.toast.title', {
+    defaultMessage: 'Error while linking dashboards',
+  }),
+  update: i18n.translate('xpack.infra.updatingLinkedDashboards.addFailure.toast.title', {
+    defaultMessage: 'Error while updating linked dashboards',
+  }),
+  delete: i18n.translate('xpack.infra.deletingLinkedDashboards.addFailure.toast.title', {
+    defaultMessage: 'Error while deleting linked dashboards',
+  }),
+};
+
+const decodeResponse = (response: any) => {
+  return pipe(
+    InfraCustomDashboardRT.decode(response),
+    fold(throwErrors(createPlainError), identity)
+  );
+};
+
+export const useUpdateCustomDashboard = () => {
+  const { services } = useKibanaContextForPlugin();
+  const { notifications } = useKibana();
+
+  const onError = useCallback(
+    (errorMessage: string) => {
+      if (errorMessage) {
+        notifications.toasts.danger({
+          title: errorMessages.update,
+          body: errorMessage,
+        });
+      }
+    },
+    [notifications.toasts]
+  );
+
+  const [updateCustomDashboardRequest, updateCustomDashboard] = useTrackedPromise(
+    {
+      cancelPreviousOn: 'resolution',
+      createPromise: async ({
+        assetType,
+        id,
+        dashboardSavedObjectId,
+        dashboardFilterAssetIdEnabled,
+      }: InfraSavedCustomDashboard) => {
+        const rawResponse = await services.http.fetch(
+          `/api/infra/${assetType}/custom-dashboards/${id}`,
+          {
+            method: 'PUT',
+            body: JSON.stringify({
+              assetType,
+              dashboardSavedObjectId,
+              dashboardFilterAssetIdEnabled,
+            }),
+          }
+        );
+
+        return decodeResponse(rawResponse);
+      },
+      onResolve: (response) => response,
+      onReject: (e: Error | unknown) => onError((e as Error)?.message),
+    },
+    []
+  );
+
+  const isUpdateLoading = updateCustomDashboardRequest.state === 'pending';
+
+  const hasUpdateError = updateCustomDashboardRequest.state === 'rejected';
+
+  return {
+    updateCustomDashboard,
+    isUpdateLoading,
+    hasUpdateError,
+  };
+};
+
+export const useDeleteCustomDashboard = () => {
+  const { services } = useKibanaContextForPlugin();
+  const { notifications } = useKibana();
+
+  const decodeDeleteResponse = (response: any) => {
+    return pipe(
+      InfraDeleteCustomDashboardsResponseBodyRT.decode(response),
+      fold(throwErrors(createPlainError), identity)
+    );
+  };
+
+  const onError = useCallback(
+    (errorMessage: string) => {
+      if (errorMessage) {
+        notifications.toasts.danger({
+          title: errorMessages.delete,
+          body: errorMessage,
+        });
+      }
+    },
+    [notifications.toasts]
+  );
+
+  const [deleteCustomDashboardRequest, deleteCustomDashboard] = useTrackedPromise(
+    {
+      cancelPreviousOn: 'resolution',
+      createPromise: async ({
+        assetType,
+        id,
+      }: {
+        assetType: InfraCustomDashboardAssetType;
+        id: string;
+      }) => {
+        const rawResponse = await services.http.fetch(
+          `/api/infra/${assetType}/custom-dashboards/${id}`,
+          {
+            method: 'DELETE',
+          }
+        );
+
+        return decodeDeleteResponse(rawResponse);
+      },
+      onResolve: (response) => response,
+      onReject: (e: Error | unknown) => onError((e as Error)?.message),
+    },
+    []
+  );
+
+  const isDeleteLoading = deleteCustomDashboardRequest.state === 'pending';
+
+  const hasDeleteError = deleteCustomDashboardRequest.state === 'rejected';
+
+  return {
+    deleteCustomDashboard,
+    isDeleteLoading,
+    hasDeleteError,
+  };
+};
+
+export const useCreateCustomDashboard = () => {
+  const { services } = useKibanaContextForPlugin();
+  const { notifications } = useKibana();
+
+  const onError = useCallback(
+    (errorMessage: string) => {
+      if (errorMessage) {
+        notifications.toasts.danger({
+          title: errorMessages.delete,
+          body: errorMessage,
+        });
+      }
+    },
+    [notifications.toasts]
+  );
+
+  const [createCustomDashboardRequest, createCustomDashboard] = useTrackedPromise(
+    {
+      cancelPreviousOn: 'resolution',
+      createPromise: async ({
+        assetType,
+        dashboardSavedObjectId,
+        dashboardFilterAssetIdEnabled,
+      }: InfraCustomDashboard) => {
+        const rawResponse = await services.http.fetch(`/api/infra/${assetType}/custom-dashboards`, {
+          method: 'POST',
+          body: JSON.stringify({
+            dashboardSavedObjectId,
+            dashboardFilterAssetIdEnabled,
+          }),
+        });
+
+        return decodeResponse(rawResponse);
+      },
+      onResolve: (response) => response,
+      onReject: (e: Error | unknown) => onError((e as Error)?.message),
+    },
+    []
+  );
+
+  const isCreateLoading = createCustomDashboardRequest.state === 'pending';
+
+  const hasCreateError = createCustomDashboardRequest.state === 'rejected';
+
+  return {
+    createCustomDashboard,
+    isCreateLoading,
+    hasCreateError,
+  };
+};
diff --git a/...ervability_solution/infra/public/components/asset_details/hooks/use_dashboards_fetcher.ts b/...ervability_solution/infra/public/components/asset_details/hooks/use_dashboards_fetcher.ts
@@ -0,0 +1,69 @@
+/*
+ * 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 { useState, useEffect } from 'react';
+import type { SearchDashboardsResponse } from '@kbn/dashboard-plugin/public/services/dashboard_content_management/lib/find_dashboards';
+import { i18n } from '@kbn/i18n';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
+
+export enum FETCH_STATUS {
+  LOADING = 'loading',
+  SUCCESS = 'success',
+  FAILURE = 'failure',
+  NOT_INITIATED = 'not_initiated',
+}
+
+export interface SearchDashboardsResult {
+  data: SearchDashboardsResponse['hits'];
+  status: FETCH_STATUS;
+}
+
+export function useDashboardFetcher(query = ''): SearchDashboardsResult {
+  const {
+    services: { dashboard },
+  } = useKibanaContextForPlugin();
+  const { notifications } = useKibana();
+  const [result, setResult] = useState<SearchDashboardsResult>({
+    data: [],
+    status: FETCH_STATUS.NOT_INITIATED,
+  });
+
+  useEffect(() => {
+    const getDashboards = async () => {
+      setResult({
+        data: [],
+        status: FETCH_STATUS.LOADING,
+      });
+      try {
+        const findDashboardsService = await dashboard?.findDashboardsService();
+        const data = await findDashboardsService.search({
+          search: query,
+          size: 1000,
+        });
+
+        setResult({
+          data: data.hits,
+          status: FETCH_STATUS.SUCCESS,
+        });
+      } catch (error) {
+        setResult({
+          data: [],
+          status: FETCH_STATUS.FAILURE,
+        });
+        notifications.toasts.danger({
+          title: i18n.translate('xpack.infra.fetchingDashboards.addFailure.toast.title', {
+            defaultMessage: 'Error while fetching dashboards',
+          }),
+          body: error.message,
+        });
+      }
+    };
+    getDashboards();
+  }, [dashboard, notifications.toasts, query]);
+  return result;
+}