diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/overview/fix_issues_step/fix_issues_step.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/overview/fix_issues_step/fix_issues_step.tsx
index b061ab5ea2d4d..590bfac96770d 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/overview/fix_issues_step/fix_issues_step.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/overview/fix_issues_step/fix_issues_step.tsx
@@ -70,7 +70,7 @@ export const getFixIssuesStep = ({
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/shared/deprecation_count.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/shared/deprecation_count.tsx
index 3312508a87073..32d214f0d80f2 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/shared/deprecation_count.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/shared/deprecation_count.tsx
@@ -6,10 +6,11 @@
*/
import React, { FunctionComponent } from 'react';
-
import { EuiFlexGroup, EuiFlexItem, EuiHealth } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
+import { LevelInfoTip } from './level_info_tip';
+
const i18nTexts = {
getCriticalStatusLabel: (count: number) =>
i18n.translate('xpack.upgradeAssistant.deprecationCount.criticalStatusLabel', {
@@ -39,14 +40,31 @@ export const DeprecationCount: FunctionComponent = ({
return (
-
- {i18nTexts.getCriticalStatusLabel(totalCriticalDeprecations)}
-
+
+
+
+ {i18nTexts.getCriticalStatusLabel(totalCriticalDeprecations)}
+
+
+
+
+
+
+
+
-
- {i18nTexts.getWarningStatusLabel(totalWarningDeprecations)}
-
+
+
+
+ {i18nTexts.getWarningStatusLabel(totalWarningDeprecations)}
+
+
+
+
+
+
+
);
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/shared/index.ts b/x-pack/plugins/upgrade_assistant/public/application/components/shared/index.ts
index ef7916f6e8d17..0efc91035001a 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/shared/index.ts
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/shared/index.ts
@@ -9,3 +9,4 @@ export { NoDeprecationsPrompt } from './no_deprecations';
export { DeprecationCount } from './deprecation_count';
export { DeprecationBadge } from './deprecation_badge';
export { DeprecationsPageLoadingError } from './deprecations_page_loading_error';
+export { LevelInfoTip } from './level_info_tip';
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/shared/level_info_tip.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/shared/level_info_tip.tsx
new file mode 100644
index 0000000000000..d3600a7290b4e
--- /dev/null
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/shared/level_info_tip.tsx
@@ -0,0 +1,27 @@
+/*
+ * 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, { FunctionComponent } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiIconTip } from '@elastic/eui';
+
+const i18nTexts = {
+ critical: i18n.translate('xpack.upgradeAssistant.levelInfoTip.criticalLabel', {
+ defaultMessage: 'Critical issues must be resolved before you upgrade',
+ }),
+ warning: i18n.translate('xpack.upgradeAssistant.levelInfoTip.warningLabel', {
+ defaultMessage: 'Warning issues can be ignored at your discretion',
+ }),
+};
+
+interface Props {
+ level: 'critical' | 'warning';
+}
+
+export const LevelInfoTip: FunctionComponent = ({ level }) => {
+ return ;
+};