Add new page for the deprecation logs

src/core/public/doc_links/doc_links_service.ts

@@ -224,6 +224,7 @@ export class DocLinksService {
           mappingTermVector: `${ELASTICSEARCH_DOCS}term-vector.html`,
           mappingTypesRemoval: `${ELASTICSEARCH_DOCS}removal-of-types.html`,
           migrateIndexAllocationFilters: `${ELASTICSEARCH_DOCS}migrate-index-allocation-filters.html`,
+          migrationApiDeprecation: `${ELASTICSEARCH_DOCS}migration-api-deprecation.html`,
           nodeRoles: `${ELASTICSEARCH_DOCS}modules-node.html#node-roles`,
           releaseHighlights: `${ELASTICSEARCH_DOCS}release-highlights.html`,
           remoteClusters: `${ELASTICSEARCH_DOCS}remote-clusters.html`,

src/plugins/es_ui_shared/__packages_do_not_import__/authorization/components/with_privileges.tsx

@@ -22,7 +22,7 @@ interface Props {
     isLoading: boolean;
     hasPrivileges: boolean;
     privilegesMissing: MissingPrivileges;
-  }) => JSX.Element;
+  }) => JSX.Element | null;
 }
 
 type Privilege = [string, string];

x-pack/plugins/upgrade_assistant/public/application/app.tsx

@@ -17,7 +17,13 @@ import { ClusterUpgradeState } from '../../common/types';
 import { APP_WRAPPER_CLASS, GlobalFlyout, AuthorizationProvider } from '../shared_imports';
 import { AppDependencies } from '../types';
 import { AppContextProvider, useAppContext } from './app_context';
-import { EsDeprecations, ComingSoonPrompt, KibanaDeprecations, Overview } from './components';
+import {
+  EsDeprecations,
+  EsDeprecationLogs,
+  ComingSoonPrompt,
+  KibanaDeprecations,
+  Overview,
+} from './components';
 
 const { GlobalFlyoutProvider } = GlobalFlyout;
 
@@ -112,6 +118,7 @@ const AppHandlingClusterUpgradeState: React.FunctionComponent = () => {
     <Switch>
       <Route exact path="/overview" component={Overview} />
       <Route exact path="/es_deprecations" component={EsDeprecations} />
+      <Route exact path="/es_deprecation_logs" component={EsDeprecationLogs} />
       <Route exact path="/kibana_deprecations" component={KibanaDeprecations} />
       <Redirect from="/" to="/overview" />
     </Switch>

x-pack/plugins/upgrade_assistant/public/application/components/es_deprecation_logs/es_deprecation_logs.tsx

@@ -0,0 +1,74 @@
+/*
+ * 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, useEffect } from 'react';
+
+import {
+  EuiPageHeader,
+  EuiButtonEmpty,
+  EuiSpacer,
+  EuiPageBody,
+  EuiPageContentBody,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { METRIC_TYPE } from '@kbn/analytics';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { useAppContext } from '../../app_context';
+import { uiMetricService, UIM_ES_DEPRECATION_LOGS_PAGE_LOAD } from '../../lib/ui_metric';
+import { FixDeprecationLogs } from './fix_deprecation_logs';
+
+export const EsDeprecationLogs: FunctionComponent = () => {
+  const {
+    services: {
+      breadcrumbs,
+      core: { docLinks },
+    },
+  } = useAppContext();
+
+  useEffect(() => {
+    uiMetricService.trackUiMetric(METRIC_TYPE.LOADED, UIM_ES_DEPRECATION_LOGS_PAGE_LOAD);
+  }, []);
+
+  useEffect(() => {
+    breadcrumbs.setBreadcrumbs('esDeprecationLogs');
+  }, [breadcrumbs]);
+
+  return (
+    <EuiPageBody restrictWidth={true} data-test-subj="esDeprecationLogs">
+      <EuiPageContentBody color="transparent" paddingSize="none">
+        <EuiPageHeader
+          bottomBorder
+          pageTitle={i18n.translate('xpack.upgradeAssistant.esDeprecationLogs.pageTitle', {
+            defaultMessage: 'Elasticsearch deprecation logs',
+          })}
+          description={i18n.translate('xpack.upgradeAssistant.esDeprecationLogs.pageDescription', {
+            defaultMessage:
+              'Deprecation logs might identify deprecated API use in your applications. Review the logs to determine whether you need to update any of your applications.',
+          })}
+          rightSideItems={[
+            <EuiButtonEmpty
+              href={docLinks.links.elasticsearch.migrationApiDeprecation}
+              target="_blank"
+              iconType="help"
+              data-test-subj="documentationLink"
+            >
+              <FormattedMessage
+                id="xpack.upgradeAssistant.esDeprecationLogs.documentationLinkText"
+                defaultMessage="Documentation"
+              />
+            </EuiButtonEmpty>,
+          ]}
+        />
+
+        <EuiSpacer size="l" />
+
+        <FixDeprecationLogs />
+      </EuiPageContentBody>
+    </EuiPageBody>
+  );
+};

x-pack/plugins/upgrade_assistant/public/application/components/es_deprecation_logs/fix_deprecation_logs/fix_logs_step.tsx → x-pack/plugins/upgrade_assistant/public/application/components/es_deprecation_logs/fix_deprecation_logs/fix_deprecation_logs.tsx

@@ -92,7 +92,7 @@ interface Props {
   privilegesMissing: MissingPrivileges;
 }
 
-const FixLogsStep: FunctionComponent<Props> = ({ hasPrivileges, privilegesMissing }) => {
+const FixDeprecationLogsUI: FunctionComponent<Props> = ({ hasPrivileges, privilegesMissing }) => {
   const {
     services: {
       core: { docLinks },
@@ -190,11 +190,11 @@ const FixLogsStep: FunctionComponent<Props> = ({ hasPrivileges, privilegesMissin
   );
 };
 
-export const getFixLogsStep = () => {
+export const FixDeprecationLogs = () => {
   return (
     <WithPrivileges privileges={`index.${DEPRECATION_LOGS_INDEX}`}>
       {({ hasPrivileges, privilegesMissing, isLoading }) => (
-        <FixLogsStep
+        <FixDeprecationLogsUI
           hasPrivileges={!isLoading && hasPrivileges}
           privilegesMissing={privilegesMissing}
         />

x-pack/plugins/upgrade_assistant/public/application/components/es_deprecation_logs/fix_deprecation_logs/index.ts

@@ -5,4 +5,4 @@
  * 2.0.
  */
 
-export { getFixLogsStep } from './fix_logs_step';
+export { FixDeprecationLogs } from './fix_deprecation_logs';

x-pack/plugins/upgrade_assistant/public/application/components/es_deprecation_logs/index.ts

@@ -4,3 +4,5 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+
+export { EsDeprecationLogs } from './es_deprecation_logs';

x-pack/plugins/upgrade_assistant/public/application/components/index.ts

@@ -7,5 +7,6 @@
 
 export { KibanaDeprecations } from './kibana_deprecations';
 export { EsDeprecations } from './es_deprecations';
+export { EsDeprecationLogs } from './es_deprecation_logs';
 export { ComingSoonPrompt } from './coming_soon_prompt';
 export { Overview } from './overview';

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

@@ -7,11 +7,13 @@
 
 import React, { FunctionComponent, useState, useEffect } from 'react';
 
-import { EuiText, EuiFlexItem, EuiFlexGroup, EuiSpacer } from '@elastic/eui';
+import { EuiText, EuiFlexItem, EuiFlexGroup, EuiSpacer, EuiLink } 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 { DEPRECATION_LOGS_INDEX } from '../../../../../common/constants';
+import { WithPrivileges } from '../../../../shared_imports';
 import type { OverviewStepProps } from '../../types';
 import { EsDeprecationIssuesPanel, KibanaDeprecationIssuesPanel } from './components';
 
@@ -49,10 +51,45 @@ const FixIssuesStep: FunctionComponent<Props> = ({ setIsComplete }) => {
   );
 };
 
+interface CustomProps {
+  navigateToEsDeprecationLogs: () => void;
+}
+
+const AccessDeprecationLogsMessage = ({ navigateToEsDeprecationLogs }: CustomProps) => {
+  return (
+    <WithPrivileges privileges={`index.${DEPRECATION_LOGS_INDEX}`}>
+      {({ hasPrivileges, isLoading }) => {
+        if (isLoading || !hasPrivileges) {
+          // Don't show the message with the link to access deprecation logs
+          // to users who can't access the UI anyways.
+          return null;
+        }
+
+        return (
+          <FormattedMessage
+            id="xpack.upgradeAssistant.overview.accessEsDeprecationLogsLabel"
+            defaultMessage="Optionally you can consult the {esDeprecationLogsLink} to make sure your application is not using any deprecated APIs."
+            values={{
+              esDeprecationLogsLink: (
+                <EuiLink onClick={navigateToEsDeprecationLogs}>
+                  {i18n.translate('xpack.upgradeAssistant.overview.esDeprecationLogsLink', {
+                    defaultMessage: 'Elasticsearch deprecation logs',
+                  })}
+                </EuiLink>
+              ),
+            }}
+          />
+        );
+      }}
+    </WithPrivileges>
+  );
+};
+
 export const getFixIssuesStep = ({
   isComplete,
   setIsComplete,
-}: OverviewStepProps): EuiStepProps => {
+  navigateToEsDeprecationLogs,
+}: OverviewStepProps & CustomProps): EuiStepProps => {
   const status = isComplete ? 'complete' : 'incomplete';
 
   return {
@@ -65,7 +102,14 @@ export const getFixIssuesStep = ({
           <p>
             <FormattedMessage
               id="xpack.upgradeAssistant.overview.fixIssuesStepDescription"
-              defaultMessage="Update your Elasticsearch and Kibana deployments to be compatible with Elastic 8.x. Critical issues must be resolved before you upgrade. Warning issues can be ignored at your discretion."
+              defaultMessage="Update your Elasticsearch and Kibana deployments to be compatible with Elastic 8.x. Critical issues must be resolved before you upgrade. Warning issues can be ignored at your discretion. {accessDeprecationLogsMessage}"
+              values={{
+                accessDeprecationLogsMessage: (
+                  <AccessDeprecationLogsMessage
+                    navigateToEsDeprecationLogs={navigateToEsDeprecationLogs}
+                  />
+                ),
+              }}
             />
           </p>
         </EuiText>

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

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { FunctionComponent, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import {
   EuiSteps,
@@ -15,11 +15,12 @@ import {
   EuiSpacer,
   EuiLink,
   EuiPageBody,
-  EuiPageContent,
+  EuiPageContentBody,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { METRIC_TYPE } from '@kbn/analytics';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
 
 import { useAppContext } from '../../app_context';
 import { uiMetricService, UIM_OVERVIEW_PAGE_LOAD } from '../../lib/ui_metric';
@@ -30,7 +31,7 @@ import { getMigrateSystemIndicesStep } from './migrate_system_indices';
 
 type OverviewStep = 'backup' | 'migrate_system_indices' | 'fix_issues';
 
-export const Overview: FunctionComponent = () => {
+export const Overview = withRouter(({ history }: RouteComponentProps) => {
   const {
     services: {
       breadcrumbs,
@@ -63,7 +64,7 @@ export const Overview: FunctionComponent = () => {
 
   return (
     <EuiPageBody restrictWidth={true} data-test-subj="overview">
-      <EuiPageContent horizontalPosition="center" color="transparent" paddingSize="none">
+      <EuiPageContentBody color="transparent" paddingSize="none">
         <EuiPageHeader
           bottomBorder
           pageTitle={i18n.translate('xpack.upgradeAssistant.overview.pageTitle', {
@@ -112,11 +113,12 @@ export const Overview: FunctionComponent = () => {
             getFixIssuesStep({
               isComplete: isStepComplete('fix_issues'),
               setIsComplete: setCompletedStep.bind(null, 'fix_issues'),
+              navigateToEsDeprecationLogs: () => history.push('/es_deprecation_logs'),
             }),
             getUpgradeStep(),
           ]}
         />
-      </EuiPageContent>
+      </EuiPageContentBody>
     </EuiPageBody>
   );
-};
+});

x-pack/plugins/upgrade_assistant/public/application/lib/breadcrumbs.ts

@@ -18,6 +18,9 @@ const i18nTexts = {
     esDeprecations: i18n.translate('xpack.upgradeAssistant.breadcrumb.esDeprecationsLabel', {
       defaultMessage: 'Elasticsearch deprecation issues',
     }),
+    esDeprecationLogs: i18n.translate('xpack.upgradeAssistant.breadcrumb.esDeprecationLogsLabel', {
+      defaultMessage: 'Elasticsearch deprecation logs',
+    }),
     kibanaDeprecations: i18n.translate(
       'xpack.upgradeAssistant.breadcrumb.kibanaDeprecationsLabel',
       {
@@ -48,6 +51,15 @@ export class BreadcrumbService {
         text: i18nTexts.breadcrumbs.esDeprecations,
       },
     ],
+    esDeprecationLogs: [
+      {
+        text: i18nTexts.breadcrumbs.overview,
+        href: '/',
+      },
+      {
+        text: i18nTexts.breadcrumbs.esDeprecationLogs,
+      },
+    ],
     kibanaDeprecations: [
       {
         text: i18nTexts.breadcrumbs.overview,
@@ -65,7 +77,9 @@ export class BreadcrumbService {
     this.setBreadcrumbsHandler = setBreadcrumbsHandler;
   }
 
-  public setBreadcrumbs(type: 'overview' | 'esDeprecations' | 'kibanaDeprecations'): void {
+  public setBreadcrumbs(
+    type: 'overview' | 'esDeprecations' | 'esDeprecationLogs' | 'kibanaDeprecations'
+  ): void {
     if (!this.setBreadcrumbsHandler) {
       throw new Error('Breadcrumb service has not been initialized');
     }

x-pack/plugins/upgrade_assistant/public/application/lib/ui_metric.ts

@@ -12,6 +12,7 @@ export const UIM_APP_NAME = 'upgrade_assistant';
 export const UIM_ES_DEPRECATIONS_PAGE_LOAD = 'es_deprecations_page_load';
 export const UIM_KIBANA_DEPRECATIONS_PAGE_LOAD = 'kibana_deprecations_page_load';
 export const UIM_OVERVIEW_PAGE_LOAD = 'overview_page_load';
+export const UIM_ES_DEPRECATION_LOGS_PAGE_LOAD = 'es_deprecation_logs_page_load';
 export const UIM_REINDEX_OPEN_FLYOUT_CLICK = 'reindex_open_flyout_click';
 export const UIM_REINDEX_CLOSE_FLYOUT_CLICK = 'reindex_close_flyout_click';
 export const UIM_REINDEX_START_CLICK = 'reindex_start_click';