[APM] Improve no data message on the Infrastructure page (#136948)

* Improve no data message on the Infrastructure page

* pr review comments

x-pack/plugins/apm/public/components/app/infra_overview/infra_tabs/empty_prompt.tsx

@@ -5,38 +5,75 @@
  * 2.0.
  */
 
-import { EuiEmptyPrompt, EuiPageTemplate } from '@elastic/eui';
+import {
+  EuiDescriptionList,
+  EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
+  EuiEmptyPrompt,
+  EuiImage,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import noResultsIllustrationDark from '../../../../assets/no_results_dark.svg';
+import noResultsIllustrationLight from '../../../../assets/no_results_light.svg';
+import { useTheme } from '../../../../hooks/use_theme';
 
 export function EmptyPrompt() {
   return (
-    <EuiPageTemplate
-      pageContentProps={{
-        color: 'transparent',
-      }}
-      template="centeredBody"
-    >
-      <EuiEmptyPrompt
-        iconType="metricsApp"
-        color="subdued"
-        title={
-          <h2>
-            {i18n.translate('xpack.apm.infraTabs.noMetricsPromptTitle', {
-              defaultMessage: 'No infrastructure data found',
-            })}
-          </h2>
-        }
-        titleSize="m"
-        body={
-          <p>
-            {i18n.translate('xpack.apm.infraTabs.noMetricsPromptDescription', {
-              defaultMessage:
-                'Try adjusting your time range or check if you have any metrics data set up.',
-            })}
-          </p>
-        }
-      />
-    </EuiPageTemplate>
+    <EuiEmptyPrompt
+      body={
+        <EuiDescriptionList compressed>
+          <EuiDescriptionListTitle>
+            {i18n.translate(
+              'xpack.apm.infraTabs.emptyMessagePromptTimeRangeTitle',
+              {
+                defaultMessage: 'Expand your time range',
+              }
+            )}
+          </EuiDescriptionListTitle>
+          <EuiDescriptionListDescription>
+            {i18n.translate(
+              'xpack.apm.infraTabs.emptyMessagePromptDescription',
+              {
+                defaultMessage: 'Try searching over a longer period of time.',
+              }
+            )}
+          </EuiDescriptionListDescription>
+        </EuiDescriptionList>
+      }
+      color="subdued"
+      data-test-subj="metricsTableEmptyIndicesContent"
+      icon={<NoResultsIllustration />}
+      layout="horizontal"
+      title={
+        <h2>
+          {i18n.translate('xpack.apm.infraTabs.emptyMessagePromptTitle', {
+            defaultMessage: 'No results match your search criteria.',
+          })}
+        </h2>
+      }
+      titleSize="m"
+    />
   );
 }
+
+function NoResultsIllustration() {
+  const theme = useTheme();
+
+  const illustration = theme.darkMode
+    ? noResultsIllustrationDark
+    : noResultsIllustrationLight;
+
+  return (
+    <EuiImage
+      alt={noResultsIllustrationAlternativeText}
+      size="fullWidth"
+      src={illustration}
+    />
+  );
+}
+
+const noResultsIllustrationAlternativeText = i18n.translate(
+  'xpack.apm.infraTabs.emptyMessageIllustrationAlternativeText',
+  { defaultMessage: 'A magnifying glass with an exclamation mark' }
+);

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

@@ -7844,8 +7844,6 @@
     "xpack.apm.home.serviceMapTabLabel": "Carte des services",
     "xpack.apm.infraTabs.failurePromptDescription": "Un problème est survenu lors du chargement de l'onglet Infrastructure et de vos données. Vous pouvez contacter votre administrateur pour obtenir de l'aide.",
     "xpack.apm.infraTabs.failurePromptTitle": "Impossible de charger vos données d'infrastructure",
-    "xpack.apm.infraTabs.noMetricsPromptDescription": "Essayez d'ajuster votre plage temporelle ou vérifiez si des données d'indicateurs sont configurées.",
-    "xpack.apm.infraTabs.noMetricsPromptTitle": "Aucune donnée d'infrastructure trouvée",
     "xpack.apm.inspectButtonText": "Inspecter",
     "xpack.apm.instancesLatencyDistributionChartLegend": "Instances",
     "xpack.apm.instancesLatencyDistributionChartTitle": "Distribution de la latence des instances",

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

@@ -7838,8 +7838,6 @@
     "xpack.apm.home.serviceMapTabLabel": "サービスマップ",
     "xpack.apm.infraTabs.failurePromptDescription": "［インフラストラクチャ］タブとデータの読み込み中に問題が発生しました。ヘルプについては、管理者にお問い合わせください。",
     "xpack.apm.infraTabs.failurePromptTitle": "インフラストラクチャデータを読み込めません",
-    "xpack.apm.infraTabs.noMetricsPromptDescription": "時間範囲を調整するか、メトリックデータが設定されているかどうかを確認してください。",
-    "xpack.apm.infraTabs.noMetricsPromptTitle": "インフラストラクチャデータが見つかりません",
     "xpack.apm.inspectButtonText": "検査",
     "xpack.apm.instancesLatencyDistributionChartLegend": "インスタンス",
     "xpack.apm.instancesLatencyDistributionChartTitle": "インスタンスのレイテンシ分布",

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

@@ -7850,8 +7850,6 @@
     "xpack.apm.home.serviceMapTabLabel": "服务地图",
     "xpack.apm.infraTabs.failurePromptDescription": "加载基础架构选项卡和您的数据时出现问题。请联系您的管理员获取帮助。",
     "xpack.apm.infraTabs.failurePromptTitle": "无法加载基础架构数据",
-    "xpack.apm.infraTabs.noMetricsPromptDescription": "尝试调整时间范围，或检查是否设置了任何指标数据。",
-    "xpack.apm.infraTabs.noMetricsPromptTitle": "找不到任何基础架构数据",
     "xpack.apm.inspectButtonText": "检查",
     "xpack.apm.instancesLatencyDistributionChartLegend": "实例",
     "xpack.apm.instancesLatencyDistributionChartTitle": "实例延迟分布",