From c1d93ad0e04e45aeb4aeaae263317b8cc6bb7683 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 13 Dec 2023 06:53:45 -0500
Subject: [PATCH] [8.12] [ObsUX] Add Profiling prompt to Host CPU card
 (#173177) (#173252)

# Backport

This will backport the following commits from `main` to `8.12`:
- [[ObsUX] Add Profiling prompt to Host CPU card
(#173177)](https://github.com/elastic/kibana/pull/173177)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Mykola
Harmash","email":"mykola.harmash@gmail.com"},"sourceCommit":{"committedDate":"2023-12-13T10:25:59Z","message":"[ObsUX]
Add Profiling prompt to Host CPU card (#173177)\n\nCloses
https://github.com/elastic/kibana/issues/173150\r\n\r\nThis adds a
prompt under the CPU card to open the Profiling tab.\r\n\r\n![CleanShot
2023-12-12 at 16
56\r\n55@2x](https://github.com/elastic/kibana/assets/793851/5beae41d-45da-426f-9d38-eb4b4376b346)\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"669235a79897b414202b4752704067496b82d488","branchLabelMapping":{"^v8.13.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v8.12.0","Team:obs-ux-infra_services","v8.13.0"],"number":173177,"url":"https://github.com/elastic/kibana/pull/173177","mergeCommit":{"message":"[ObsUX]
Add Profiling prompt to Host CPU card (#173177)\n\nCloses
https://github.com/elastic/kibana/issues/173150\r\n\r\nThis adds a
prompt under the CPU card to open the Profiling tab.\r\n\r\n![CleanShot
2023-12-12 at 16
56\r\n55@2x](https://github.com/elastic/kibana/assets/793851/5beae41d-45da-426f-9d38-eb4b4376b346)\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"669235a79897b414202b4752704067496b82d488"}},"sourceBranch":"main","suggestedTargetBranches":["8.12"],"targetPullRequestStates":[{"branch":"8.12","label":"v8.12.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.13.0","labelRegex":"^v8.13.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/173177","number":173177,"mergeCommit":{"message":"[ObsUX]
Add Profiling prompt to Host CPU card (#173177)\n\nCloses
https://github.com/elastic/kibana/issues/173150\r\n\r\nThis adds a
prompt under the CPU card to open the Profiling tab.\r\n\r\n![CleanShot
2023-12-12 at 16
56\r\n55@2x](https://github.com/elastic/kibana/assets/793851/5beae41d-45da-426f-9d38-eb4b4376b346)\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"669235a79897b414202b4752704067496b82d488"}}]}]
BACKPORT-->

Co-authored-by: Mykola Harmash <mykola.harmash@gmail.com>
---
 .../overview/kpis/cpu_profiling_prompt.tsx    | 47 +++++++++++++++++++
 .../tabs/overview/kpis/kpi_grid.tsx           |  2 +
 2 files changed, 49 insertions(+)
 create mode 100644 x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/cpu_profiling_prompt.tsx

diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/cpu_profiling_prompt.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/cpu_profiling_prompt.tsx
new file mode 100644
index 0000000000000..afe39963e966d
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/kpi_grid.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/kpi_grid.tsx
index 957cb7e628ee6..f1b8877cdca80 100644
--- a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/kpi_grid.tsx
+++ b/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>