From ea6597a706bbdb57de9c14fa50b3a3baaac222df Mon Sep 17 00:00:00 2001
From: cauemarcondes <caue.marcondes@elastic.co>
Date: Wed, 23 Feb 2022 17:02:46 -0500
Subject: [PATCH] showing callout with space name

---
 .../app/settings/apm_indices/index.tsx        | 35 +++++++++++++++++++
 x-pack/plugins/apm/public/plugin.ts           |  2 ++
 2 files changed, 37 insertions(+)

diff --git a/x-pack/plugins/apm/public/components/app/settings/apm_indices/index.tsx b/x-pack/plugins/apm/public/components/app/settings/apm_indices/index.tsx
index 1a1654e22eb19..383be90168a10 100644
--- a/x-pack/plugins/apm/public/components/app/settings/apm_indices/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/settings/apm_indices/index.tsx
@@ -8,6 +8,7 @@
 import {
   EuiButton,
   EuiButtonEmpty,
+  EuiCallOut,
   EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
@@ -19,9 +20,12 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
 import React, { useEffect, useState } from 'react';
+import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public';
 import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
 import { useFetcher } from '../../../../hooks/use_fetcher';
+import { ApmPluginStartDeps } from '../../../../plugin';
 import { clearCache } from '../../../../services/rest/call_api';
 import {
   APIReturnType,
@@ -93,6 +97,8 @@ const INITIAL_STATE: ApiResponse = { apmIndexSettings: [] };
 
 export function ApmIndices() {
   const { core } = useApmPluginContext();
+  const { services } = useKibana<ApmPluginStartDeps>();
+
   const { notifications, application } = core;
   const canSave = application.capabilities.apm.save;
 
@@ -108,6 +114,10 @@ export function ApmIndices() {
     [canSave]
   );
 
+  const { data: space } = useFetcher(() => {
+    return services.spaces?.getActiveSpace();
+  }, [services.spaces]);
+
   useEffect(() => {
     setApmIndices(
       data.apmIndexSettings.reduce(
@@ -191,6 +201,31 @@ export function ApmIndices() {
 
       <EuiSpacer size="m" />
 
+      {space?.name && (
+        <>
+          <EuiFlexGroup alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiCallOut
+                color="primary"
+                iconType="spacesApp"
+                title={
+                  <EuiText size="s">
+                    <FormattedMessage
+                      id="xpack.apm.settings.apmIndices.spaceDescription"
+                      defaultMessage="The index settings apply to the {spaceName} space."
+                      values={{
+                        spaceName: <strong>{space?.name}</strong>,
+                      }}
+                    />
+                  </EuiText>
+                }
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer size="m" />
+        </>
+      )}
+
       <EuiFlexGroup alignItems="center">
         <EuiFlexItem grow={false}>
           <EuiForm>
diff --git a/x-pack/plugins/apm/public/plugin.ts b/x-pack/plugins/apm/public/plugin.ts
index 952df64da840a..75c3c290512d8 100644
--- a/x-pack/plugins/apm/public/plugin.ts
+++ b/x-pack/plugins/apm/public/plugin.ts
@@ -53,6 +53,7 @@ import { getLazyAPMPolicyCreateExtension } from './components/fleet_integration/
 import { getLazyAPMPolicyEditExtension } from './components/fleet_integration/lazy_apm_policy_edit_extension';
 import { featureCatalogueEntry } from './feature_catalogue_entry';
 import type { SecurityPluginStart } from '../../security/public';
+import { SpacesPluginStart } from '../../spaces/public';
 
 export type ApmPluginSetup = ReturnType<ApmPlugin['setup']>;
 
@@ -82,6 +83,7 @@ export interface ApmPluginStartDeps {
   observability: ObservabilityPublicStart;
   fleet?: FleetStart;
   security?: SecurityPluginStart;
+  spaces?: SpacesPluginStart;
 }
 
 const servicesTitle = i18n.translate('xpack.apm.navigation.servicesTitle', {