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 ( + + + {i18n.translate('xpack.infra.cpuProfilingPrompt.newBadgeLabel', { + defaultMessage: 'NEW', + })} + + + {i18n.translate('xpack.infra.cpuProfilingPrompt.p.viewCPUBreakdownUsingLabel', { + defaultMessage: 'View CPU Breakdown using', + })} + showTab('profiling')} + flush="both" + > + {i18n.translate('xpack.infra.cpuProfilingPrompt.profilingButtonEmptyLabel', { + defaultMessage: 'Profiling', + })} + + + + ); +} 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' && } ))}