[Profling] Adding Elastic agent instructions (elastic#158936)

<img width="1249" alt="Screenshot 2023-06-02 at 3 51 04 PM"
src="https://github.com/elastic/kibana/assets/55978943/46f007ad-def6-42e7-930e-98d453d3a06d">

(cherry picked from commit 1b3f238)

x-pack/plugins/profiling/public/components/no_data_page.tsx

@@ -5,6 +5,7 @@
  * 2.0.
  */
 import {
+  EuiButton,
   EuiCode,
   EuiCodeBlock,
   EuiFlexGroup,
@@ -30,6 +31,7 @@ import { ProfilingAppPageTemplate } from './profiling_app_page_template';
 export function NoDataPage({ subTitle }: { subTitle: string }) {
   const {
     services: { setupDataCollectionInstructions },
+    start: { core },
   } = useProfilingDependencies();
 
   const { data, status } = useAsync(
@@ -347,6 +349,61 @@ docker.elastic.co/observability/profiling-agent:${hostAgentVersion} /root/pf-hos
         },
       ],
     },
+    {
+      key: 'elasticAgentIntegration',
+      title: i18n.translate('xpack.profiling.tabs.elasticAgentIntegrarion.title', {
+        defaultMessage: 'Elastic Agent Integration',
+      }),
+      steps: [
+        {
+          title: i18n.translate('xpack.profiling.tabs.elasticAgentIntegrarion.step1', {
+            defaultMessage: 'Copy credentials',
+          }),
+          content: (
+            <>
+              <EuiText>
+                {i18n.translate('xpack.profiling.tabs.elasticAgentIntegrarion.step1.hint', {
+                  defaultMessage:
+                    "You'll need these credentials to set up Universal Profiling. Please save them in a secure location, as they will be required in the subsequent step.",
+                })}
+              </EuiText>
+              <EuiSpacer />
+              <EuiCodeBlock paddingSize="s" isCopyable>
+                {i18n.translate('xpack.profiling.tabs.elasticAgentIntegrarion.step1.secretToken', {
+                  defaultMessage: 'Secret token: {secretToken}',
+                  values: { secretToken },
+                })}
+              </EuiCodeBlock>
+              <EuiSpacer size="s" />
+              <EuiCodeBlock paddingSize="s" isCopyable>
+                {i18n.translate('xpack.profiling.tabs.elasticAgentIntegrarion.step1.apmServerUrl', {
+                  defaultMessage: 'APM server url: {apmServerUrl}',
+                  values: { apmServerUrl: collectionAgentHostPort },
+                })}
+              </EuiCodeBlock>
+            </>
+          ),
+        },
+        {
+          title: i18n.translate('xpack.profiling.tabs.elasticAgentIntegrarion.step2', {
+            defaultMessage: 'Fleet',
+          }),
+          content: (
+            <EuiButton
+              iconType="gear"
+              fill
+              href={`${core.http.basePath.prepend(
+                '/app/integrations/detail/profiler_agent-8.8.1-preview/overview'
+              )}`}
+            >
+              {i18n.translate('xpack.profiling.tabs.elasticAgentIntegrarion.step2.button', {
+                defaultMessage: 'Manage Universal Profiling agent in Fleet',
+              })}
+            </EuiButton>
+          ),
+        },
+      ],
+    },
   ];
 
   const [selectedTab, setSelectedTab] = useState(tabs[0].key);