[Upgrade Assistant] Overview page redesign

x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/overview.helpers.ts

@@ -54,10 +54,10 @@ export const setup = async (overrides?: Record<string, unknown>): Promise<Overvi
 
 export type OverviewTestSubjects =
   | 'esStatsPanel'
-  | 'esStatsPanel.totalDeprecations'
+  | 'esStatsPanel.warningDeprecations'
   | 'esStatsPanel.criticalDeprecations'
   | 'kibanaStatsPanel'
-  | 'kibanaStatsPanel.totalDeprecations'
+  | 'kibanaStatsPanel.warningDeprecations'
   | 'kibanaStatsPanel.criticalDeprecations'
   | 'deprecationLoggingFormRow'
   | 'esRequestErrorIconTip'

x-pack/plugins/upgrade_assistant/__jest__/client_integration/overview/review_logs_step/mocked_responses.ts

@@ -47,4 +47,10 @@ export const kibanaDeprecations: DomainDeprecationDetails[] = [
     message:
       'Disabling the Spaces plugin (xpack.spaces.enabled) will not be supported in the next major version (8.0)',
   },
+  {
+    correctiveActions: { manualSteps: ['test-step'] },
+    domainId: 'xpack.spaces',
+    level: 'warning',
+    message: 'Sample warning deprecation',
+  },
 ];

x-pack/plugins/upgrade_assistant/__jest__/client_integration/overview/review_logs_step/review_logs_step.test.tsx

@@ -42,7 +42,7 @@ describe('Overview - Fix deprecated settings step', () => {
       const { exists, find } = testBed;
 
       expect(exists('esStatsPanel')).toBe(true);
-      expect(find('esStatsPanel.totalDeprecations').text()).toContain('2');
+      expect(find('esStatsPanel.warningDeprecations').text()).toContain('1');
       expect(find('esStatsPanel.criticalDeprecations').text()).toContain('1');
     });
 
@@ -78,7 +78,7 @@ describe('Overview - Fix deprecated settings step', () => {
       expect(exists('noDeprecationsLabel')).toBe(true);
     });
 
-    test('Has a link for viewing deprecations', () => {
+    test('Stats panel navigates to deprecations list if clicked', () => {
       const { component, exists, find } = testBed;
 
       component.update();
@@ -181,7 +181,7 @@ describe('Overview - Fix deprecated settings step', () => {
       const { exists, find } = testBed;
 
       expect(exists('kibanaStatsPanel')).toBe(true);
-      expect(find('kibanaStatsPanel.totalDeprecations').text()).toContain('1');
+      expect(find('kibanaStatsPanel.warningDeprecations').text()).toContain('1');
       expect(find('kibanaStatsPanel.criticalDeprecations').text()).toContain('1');
     });
 
@@ -217,9 +217,11 @@ describe('Overview - Fix deprecated settings step', () => {
       const { exists } = testBed;
 
       expect(exists('noDeprecationsLabel')).toBe(true);
+      expect(exists('kibanaStatsPanel.warningDeprecations')).toBe(false);
+      expect(exists('kibanaStatsPanel.criticalDeprecations')).toBe(false);
     });
 
-    test('Has a link for viewing deprecations', () => {
+    test('Stats panel navigates to deprecations list if clicked', () => {
       const { component, exists, find } = testBed;
 
       component.update();

x-pack/plugins/upgrade_assistant/public/application/components/overview/fix_deprecation_logs_step/deprecation_logging_toggle/deprecation_logging_toggle.tsx

@@ -19,7 +19,6 @@ import {
   EuiLoadingSpinner,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n/react';
 
 import { ResponseError } from '../../../../lib/api';
 import { DeprecationLoggingPreviewProps } from '../../../types';
@@ -49,6 +48,9 @@ const i18nTexts = {
   buttonLabel: i18n.translate('xpack.upgradeAssistant.overview.deprecationLogs.buttonLabel', {
     defaultMessage: 'Enable deprecation logging and indexing',
   }),
+  loadingLogsLabel: i18n.translate('xpack.upgradeAssistant.overview.loadingLogsLabel', {
+    defaultMessage: 'Loading log collection state…',
+  }),
 };
 
 const ErrorDetailsLink = ({ error }: { error: ResponseError }) => {
@@ -90,12 +92,7 @@ export const DeprecationLoggingToggle: FunctionComponent<DeprecationLoggingPrevi
         <EuiFlexItem grow={false} className="upgLoadingItem">
           <EuiLoadingSpinner size="m" />
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <FormattedMessage
-            id="xpack.upgradeAssistant.overview.loadingLogsLabel"
-            defaultMessage="Loading log collection state..."
-          />
-        </EuiFlexItem>
+        <EuiFlexItem grow={false}>{i18nTexts.loadingLogsLabel}</EuiFlexItem>
       </EuiFlexGroup>
     );
   }

x-pack/plugins/upgrade_assistant/public/application/components/overview/fix_deprecation_logs_step/external_links.tsx

@@ -62,7 +62,7 @@ const DiscoverAppLink: FunctionComponent = () => {
     <EuiLink href={discoveryUrl} target="_blank" data-test-subj="viewDiscoverLogs">
       <FormattedMessage
         id="xpack.upgradeAssistant.overview.viewDiscoverResultsAction"
-        defaultMessage="Analyse logs in Discover"
+        defaultMessage="Analyze logs in Discover"
       />
     </EuiLink>
   );

x-pack/plugins/upgrade_assistant/public/application/components/overview/fix_deprecation_logs_step/use_deprecation_logging.ts

@@ -39,10 +39,13 @@ export const useDeprecationLogging = (): DeprecationLoggingPreviewProps => {
 
   useEffect(() => {
     if (!isLoading && data) {
-      const { isDeprecationLogIndexingEnabled: isEnabled, isDeprecationLoggingEnabled } = data;
-      setIsDeprecationLogIndexingEnabled(isEnabled);
+      const {
+        isDeprecationLogIndexingEnabled: isIndexingEnabled,
+        isDeprecationLoggingEnabled,
+      } = data;
+      setIsDeprecationLogIndexingEnabled(isIndexingEnabled);
 
-      if (!isEnabled && isDeprecationLoggingEnabled) {
+      if (!isIndexingEnabled && isDeprecationLoggingEnabled) {
         setOnlyDeprecationLogWritingEnabled(true);
       }
     }

x-pack/plugins/upgrade_assistant/public/application/components/overview/review_logs_step/_index.scss

@@ -1 +1,2 @@
+@import 'stats_panel';
 @import 'no_deprecations/no_deprecations';

x-pack/plugins/upgrade_assistant/public/application/components/overview/review_logs_step/_stats_panel.scss

@@ -0,0 +1,6 @@
+// Used by both es_stats and kibana_stats panel for having the EuiPopover Icon
+// for errors shown next to the title without having to resort to wrapping everything
+// with EuiFlexGroups.
+.upgWarningIcon {
+  margin-left: $euiSizeS;
+}

x-pack/plugins/upgrade_assistant/public/application/components/overview/review_logs_step/es_stats/es_stats.tsx

@@ -28,7 +28,7 @@ const i18nTexts = {
   statsTitle: i18n.translate('xpack.upgradeAssistant.esDeprecationStats.statsTitle', {
     defaultMessage: 'Elasticsearch',
   }),
-  totalDeprecationsTitle: i18n.translate(
+  warningDeprecationsTitle: i18n.translate(
     'xpack.upgradeAssistant.esDeprecationStats.warningDeprecationsTitle',
     {
       defaultMessage: 'Warning',
@@ -50,7 +50,7 @@ const i18nTexts = {
         criticalDeprecations,
       },
     }),
-  getTotalDeprecationsMessage: (clusterCount: number, indexCount: number) =>
+  getWarningDeprecationMessage: (clusterCount: number, indexCount: number) =>
     i18n.translate('xpack.upgradeAssistant.esDeprecationStats.totalDeprecationsTooltip', {
       defaultMessage:
         'This cluster is using {clusterCount} deprecated cluster settings and {indexCount} deprecated index settings',
@@ -68,11 +68,14 @@ export const ESDeprecationStats: FunctionComponent = () => {
   const { data: esDeprecations, isLoading, error } = api.useLoadUpgradeStatus();
 
   const allDeprecations = esDeprecations?.cluster?.concat(esDeprecations?.indices) ?? [];
+  const warningDeprecations = allDeprecations.filter(
+    (deprecation) => deprecation.level === 'warning'
+  );
   const criticalDeprecations = allDeprecations.filter(
     (deprecation) => deprecation.level === 'critical'
   );
 
-  const hasWarnings = allDeprecations.length > 0;
+  const hasWarnings = warningDeprecations.length > 0;
   const hasCritical = criticalDeprecations.length > 0;
   const hasNoDeprecations = !isLoading && !error && !hasWarnings && !hasCritical;
   const shouldRenderStat = (forSection: boolean) => error || isLoading || forSection;
@@ -123,18 +126,18 @@ export const ESDeprecationStats: FunctionComponent = () => {
         {shouldRenderStat(hasWarnings) && (
           <EuiFlexItem>
             <EuiStat
-              data-test-subj="totalDeprecations"
-              title={error ? '--' : getDeprecationsUpperLimit(allDeprecations.length)}
+              data-test-subj="warningDeprecations"
+              title={error ? '--' : getDeprecationsUpperLimit(warningDeprecations.length)}
               titleElement="span"
-              description={i18nTexts.totalDeprecationsTitle}
+              description={i18nTexts.warningDeprecationsTitle}
               isLoading={isLoading}
             >
               {!error && (
                 <EuiScreenReaderOnly>
                   <p>
                     {isLoading
                       ? i18nTexts.loadingText
-                      : i18nTexts.getTotalDeprecationsMessage(
+                      : i18nTexts.getWarningDeprecationMessage(
                           esDeprecations?.cluster.length ?? 0,
                           esDeprecations?.indices.length ?? 0
                         )}

x-pack/plugins/upgrade_assistant/public/application/components/overview/review_logs_step/es_stats/es_stats_error.tsx

@@ -75,5 +75,5 @@ export const EsStatsErrors: React.FunctionComponent<Props> = ({ error }) => {
       );
   }
 
-  return <span style={{ marginLeft: 8 }}>{iconContent}</span>;
+  return <span className="upgWarningIcon">{iconContent}</span>;
 };

x-pack/plugins/upgrade_assistant/public/application/components/overview/review_logs_step/kibana_stats/kibana_stats.tsx

@@ -29,7 +29,7 @@ const i18nTexts = {
   statsTitle: i18n.translate('xpack.upgradeAssistant.kibanaDeprecationStats.statsTitle', {
     defaultMessage: 'Kibana',
   }),
-  totalDeprecationsTitle: i18n.translate(
+  warningDeprecationsTitle: i18n.translate(
     'xpack.upgradeAssistant.kibanaDeprecationStats.warningDeprecationsTitle',
     {
       defaultMessage: 'Warning',
@@ -52,16 +52,18 @@ const i18nTexts = {
   }),
   getCriticalDeprecationsMessage: (criticalDeprecations: number) =>
     i18n.translate('xpack.upgradeAssistant.kibanaDeprecationStats.criticalDeprecationsLabel', {
-      defaultMessage: 'Kibana has {criticalDeprecations} critical deprecations',
+      defaultMessage:
+        'Kibana has {criticalDeprecations} critical {criticalDeprecations, plural, one {deprecation} other {deprecations}}',
       values: {
         criticalDeprecations,
       },
     }),
-  getTotalDeprecationsMessage: (totalDeprecations: number) =>
-    i18n.translate('xpack.upgradeAssistant.kibanaDeprecationStats.totalDeprecationsLabel', {
-      defaultMessage: 'Kibana has {totalDeprecations} total deprecations',
+  getWarningDeprecationsMessage: (warningDeprecations: number) =>
+    i18n.translate('xpack.upgradeAssistant.kibanaDeprecationStats.getWarningDeprecationsMessage', {
+      defaultMessage:
+        'Kibana has {warningDeprecations} warning {warningDeprecations, plural, one {deprecation} other {deprecations}}',
       values: {
-        totalDeprecations,
+        warningDeprecations,
       },
     }),
 };
@@ -93,12 +95,13 @@ export const KibanaDeprecationStats: FunctionComponent = () => {
     getAllDeprecations();
   }, [deprecations]);
 
-  const warningDeprecationsCount = kibanaDeprecations?.length ?? 0;
+  const warningDeprecationsCount =
+    kibanaDeprecations?.filter((deprecation) => deprecation.level === 'warning')?.length ?? 0;
   const criticalDeprecationsCount =
     kibanaDeprecations?.filter((deprecation) => deprecation.level === 'critical')?.length ?? 0;
 
-  const hasWarnings = criticalDeprecationsCount > 0;
-  const hasCritical = warningDeprecationsCount > 0;
+  const hasCritical = criticalDeprecationsCount > 0;
+  const hasWarnings = warningDeprecationsCount > 0;
   const hasNoDeprecations = !isLoading && !error && !hasWarnings && !hasCritical;
   const shouldRenderStat = (forSection: boolean) => error || isLoading || forSection;
 
@@ -110,15 +113,17 @@ export const KibanaDeprecationStats: FunctionComponent = () => {
         <>
           {i18nTexts.statsTitle}
           {error && (
-            <EuiIconTip
-              type="alert"
-              color="danger"
-              size="l"
-              content={i18nTexts.loadingError}
-              iconProps={{
-                'data-test-subj': 'kibanaRequestErrorIconTip',
-              }}
-            />
+            <span className="upgWarningIcon">
+              <EuiIconTip
+                type="alert"
+                color="danger"
+                size="m"
+                content={i18nTexts.loadingError}
+                iconProps={{
+                  'data-test-subj': 'kibanaRequestErrorIconTip',
+                }}
+              />
+            </span>
           )}
         </>
       }
@@ -160,18 +165,18 @@ export const KibanaDeprecationStats: FunctionComponent = () => {
         {shouldRenderStat(hasWarnings) && (
           <EuiFlexItem>
             <EuiStat
-              data-test-subj="totalDeprecations"
+              data-test-subj="warningDeprecations"
               title={error ? '--' : getDeprecationsUpperLimit(warningDeprecationsCount)}
               titleElement="span"
-              description={i18nTexts.totalDeprecationsTitle}
+              description={i18nTexts.warningDeprecationsTitle}
               isLoading={isLoading}
             >
               {!error && (
                 <EuiScreenReaderOnly>
                   <p>
                     {isLoading
                       ? i18nTexts.loadingText
-                      : i18nTexts.getTotalDeprecationsMessage(warningDeprecationsCount)}
+                      : i18nTexts.getWarningDeprecationsMessage(warningDeprecationsCount)}
                   </p>
                 </EuiScreenReaderOnly>
               )}

x-pack/plugins/upgrade_assistant/public/application/components/overview/upgrade_step/upgrade_step.tsx

@@ -13,11 +13,9 @@ import {
   EuiFlexGroup,
   EuiSpacer,
   EuiButton,
-  EuiIcon,
-  EuiLink,
+  EuiButtonEmpty,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n/react';
 import type { EuiStepProps } from '@elastic/eui/src/components/steps/step';
 import type { DocLinksStart } from 'src/core/public';
 import { useKibana } from '../../../../shared_imports';
@@ -42,6 +40,12 @@ const i18nTexts = {
   upgradeStepLink: i18n.translate('xpack.upgradeAssistant.overview.upgradeStepLink', {
     defaultMessage: 'Learn more',
   }),
+  upgradeStepCloudLink: i18n.translate('xpack.upgradeAssistant.overview.upgradeStepCloudLink', {
+    defaultMessage: 'Upgrade on Cloud',
+  }),
+  upgradeGuideLink: i18n.translate('xpack.upgradeAssistant.overview.upgradeGuideLink', {
+    defaultMessage: 'View upgrade guide',
+  }),
 };
 
 const UpgradeStep = ({ docLinks }: { docLinks: DocLinksStart }) => {
@@ -54,31 +58,29 @@ const UpgradeStep = ({ docLinks }: { docLinks: DocLinksStart }) => {
 
   if (isCloudEnabled) {
     callToAction = (
-      <EuiFlexGroup alignItems="center">
+      <EuiFlexGroup alignItems="center" gutterSize="s">
         <EuiFlexItem grow={false}>
           <EuiButton
             href={cloudDeploymentUrl}
             target="_blank"
             data-test-subj="upgradeSetupCloudLink"
+            iconSide="right"
+            iconType="popout"
           >
-            <FormattedMessage
-              id="xpack.upgradeAssistant.overview.upgradeStepCloudLink"
-              defaultMessage="Upgrade on Cloud"
-            />
+            {i18nTexts.upgradeStepCloudLink}
           </EuiButton>
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
-          <EuiLink
+          <EuiButtonEmpty
             href={docLinks.links.elasticsearch.setupUpgrade}
             target="_blank"
             data-test-subj="upgradeSetupDocsLink"
+            iconSide="right"
+            iconType="popout"
           >
-            <FormattedMessage
-              id="xpack.upgradeAssistant.overview.upgradeGuideLink"
-              defaultMessage="View upgrade guide"
-            />
-          </EuiLink>
+            {i18nTexts.upgradeGuideLink}
+          </EuiButtonEmpty>
         </EuiFlexItem>
       </EuiFlexGroup>
     );
@@ -88,9 +90,10 @@ const UpgradeStep = ({ docLinks }: { docLinks: DocLinksStart }) => {
         href={docLinks.links.elasticsearch.setupUpgrade}
         target="_blank"
         data-test-subj="upgradeSetupDocsLink"
+        iconSide="right"
+        iconType="popout"
       >
         {i18nTexts.upgradeStepLink}
-        <EuiIcon type="popout" size="s" style={{ marginLeft: 4 }} />
       </EuiButton>
     );
   }

x-pack/plugins/upgrade_assistant/server/lib/telemetry/usage_collector.test.ts

@@ -28,6 +28,9 @@ describe('Upgrade Assistant Usage Collector', () => {
       body: {
         persistent: {},
         transient: {
+          logger: {
+            deprecation: 'WARN',
+          },
           cluster: {
             deprecation_indexing: {
               enabled: 'true',