[ObsUX] Add Profiling prompt to Host CPU card (#173177)

Closes #173150

This adds a prompt under the CPU card to open the Profiling tab.

![CleanShot 2023-12-12 at 16 56
55@2x](https://github.com/elastic/kibana/assets/793851/5beae41d-45da-426f-9d38-eb4b4376b346)

Co-authored-by: Kibana Machine <[email protected]>

x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/cpu_profiling_prompt.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { EuiButtonEmpty } from '@elastic/eui';
+import { EuiBadge } from '@elastic/eui';
+import { EuiFlexGroup } from '@elastic/eui';
+import { usePluginConfig } from '../../../../../containers/plugin_config_context';
+import { useTabSwitcherContext } from '../../../hooks/use_tab_switcher';
+
+export function CpuProfilingPrompt() {
+  const { showTab } = useTabSwitcherContext();
+  const { featureFlags } = usePluginConfig();
+
+  if (!featureFlags.profilingEnabled) {
+    return null;
+  }
+
+  return (
+    <EuiFlexGroup alignItems="center" justifyContent="flexStart" gutterSize="s">
+      <EuiBadge color="success">
+        {i18n.translate('xpack.infra.cpuProfilingPrompt.newBadgeLabel', {
+          defaultMessage: 'NEW',
+        })}
+      </EuiBadge>
+      <EuiFlexGroup alignItems="baseline" justifyContent="flexStart" gutterSize="xs">
+        {i18n.translate('xpack.infra.cpuProfilingPrompt.p.viewCPUBreakdownUsingLabel', {
+          defaultMessage: 'View CPU Breakdown using',
+        })}
+        <EuiButtonEmpty
+          data-test-subj="infraCpuProfilingPromptProfilingButton"
+          onClick={() => showTab('profiling')}
+          flush="both"
+        >
+          {i18n.translate('xpack.infra.cpuProfilingPrompt.profilingButtonEmptyLabel', {
+            defaultMessage: 'Profiling',
+          })}
+        </EuiButtonEmpty>
+      </EuiFlexGroup>
+    </EuiFlexGroup>
+  );
+}

x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/kpi_grid.tsx

@@ -13,6 +13,7 @@ import { findInventoryModel } from '@kbn/metrics-data-access-plugin/common';
 import useAsync from 'react-use/lib/useAsync';
 import { KPI_CHART_HEIGHT } from '../../../../../common/visualizations';
 import { Kpi } from './kpi';
+import { CpuProfilingPrompt } from './cpu_profiling_prompt';
 
 interface Props {
   dataView?: DataView;
@@ -48,6 +49,7 @@ export const KPIGrid = ({ assetName, dataView, dateRange }: Props) => {
             assetName={assetName}
             height={KPI_CHART_HEIGHT}
           />
+          {chartProps.id === 'cpuUsage' && <CpuProfilingPrompt />}
         </EuiFlexItem>
       ))}
     </EuiFlexGroup>