From 8ec667ca5c1c1002b656c590ab7a000b742bcabd Mon Sep 17 00:00:00 2001
From: Mykola Harmash <mykola.harmash@gmail.com>
Date: Wed, 3 Jan 2024 14:13:09 +0100
Subject: [PATCH] [ObsUX][Profiling, Infra] Show "No Data" messages when there
 is no profiling data (#173633)

Closes https://github.com/elastic/kibana/issues/173153

## Summary

Adds a message when there is no data for flamegraph or top functions.

https://github.com/elastic/kibana/assets/793851/2a6158ca-86d3-4b23-9807-dc177ce0361b
(cherry picked from commit 9215e17cb7c9ce49e7b9347ea578ec363d50dd8e)
---
 .../tabs/profiling/empty_data_prompt.tsx      | 38 +++++++++++++++++++
 .../tabs/profiling/flamegraph.tsx             |  5 +++
 .../tabs/profiling/functions.tsx              |  5 +++
 3 files changed, 48 insertions(+)
 create mode 100644 x-pack/plugins/infra/public/components/asset_details/tabs/profiling/empty_data_prompt.tsx

diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/profiling/empty_data_prompt.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/profiling/empty_data_prompt.tsx
new file mode 100644
index 0000000000000..07cf4773fc418
--- /dev/null
+++ b/x-pack/plugins/infra/public/components/asset_details/tabs/profiling/empty_data_prompt.tsx
@@ -0,0 +1,38 @@
+/*
+ * 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 React from 'react';
+import { EuiEmptyPrompt, EuiSpacer } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export function EmptyDataPrompt() {
+  return (
+    <>
+      <EuiSpacer />
+      <EuiEmptyPrompt
+        color="subdued"
+        iconType="search"
+        titleSize="xs"
+        title={
+          <h2>
+            {i18n.translate('xpack.infra.profiling.emptyDataPromptTitle', {
+              defaultMessage: 'No data found',
+            })}
+          </h2>
+        }
+        body={
+          <p>
+            {i18n.translate('xpack.infra.profiling.emptyDataPromptBody', {
+              defaultMessage:
+                'Make sure this host is sending profiling data or try selecting a different date range.',
+            })}
+          </p>
+        }
+      />
+    </>
+  );
+}
diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/profiling/flamegraph.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/profiling/flamegraph.tsx
index a00b9373c2f02..80a7f0ad8539c 100644
--- a/x-pack/plugins/infra/public/components/asset_details/tabs/profiling/flamegraph.tsx
+++ b/x-pack/plugins/infra/public/components/asset_details/tabs/profiling/flamegraph.tsx
@@ -17,6 +17,7 @@ import { useTabSwitcherContext } from '../../hooks/use_tab_switcher';
 import { ContentTabIds } from '../../types';
 import { ErrorPrompt } from './error_prompt';
 import { ProfilingLinks } from './profiling_links';
+import { EmptyDataPrompt } from './empty_data_prompt';
 
 export function Flamegraph() {
   const { services } = useKibanaContextForPlugin();
@@ -47,6 +48,10 @@ export function Flamegraph() {
     return <ErrorPrompt />;
   }
 
+  if (!loading && response?.TotalSamples === 0) {
+    return <EmptyDataPrompt />;
+  }
+
   return (
     <>
       <ProfilingLinks
diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/profiling/functions.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/profiling/functions.tsx
index 1b9a58ff561b3..5e3cf66ae8429 100644
--- a/x-pack/plugins/infra/public/components/asset_details/tabs/profiling/functions.tsx
+++ b/x-pack/plugins/infra/public/components/asset_details/tabs/profiling/functions.tsx
@@ -17,6 +17,7 @@ import { useTabSwitcherContext } from '../../hooks/use_tab_switcher';
 import { ContentTabIds } from '../../types';
 import { ErrorPrompt } from './error_prompt';
 import { ProfilingLinks } from './profiling_links';
+import { EmptyDataPrompt } from './empty_data_prompt';
 
 export function Functions() {
   const { services } = useKibanaContextForPlugin();
@@ -50,6 +51,10 @@ export function Functions() {
     return <ErrorPrompt />;
   }
 
+  if (!loading && response?.TotalCount === 0) {
+    return <EmptyDataPrompt />;
+  }
+
   return (
     <>
       <ProfilingLinks