Improve error states for Upgrade Assistant deprecation issues (#112457)

* Simplify error state for deprecation issues panels. Remove <EsStatsError />. * Rename components from stats -> panel. * Create common error-reporting component for use in both Kibana and ES deprecations pages. * Align order of loading, error, and success states between these pages. * Change references to 'deprecations' -> 'deprecation issues'. * Fix tests for panels. * Add API integration test for handling auth error. * Fix TS errors. Co-authored-by: Kibana Machine <[email protected]>
elastic · Sep 21, 2021 · 71bfe79 · 71bfe79
1 parent 2d67d8c
commit 71bfe79
Show file tree

Hide file tree

Showing 21 changed files with 219 additions and 287 deletions.
diff --git a/...gins/upgrade_assistant/__jest__/client_integration/es_deprecations/error_handling.test.ts b/...gins/upgrade_assistant/__jest__/client_integration/es_deprecations/error_handling.test.ts
@@ -31,13 +31,10 @@ describe('Error handling', () => {
       testBed = await setupElasticsearchPage({ isReadOnlyMode: false });
     });
 
-    const { component, exists, find } = testBed;
-
+    const { component, find } = testBed;
     component.update();
-
-    expect(exists('permissionsError')).toBe(true);
-    expect(find('permissionsError').text()).toContain(
-      'You are not authorized to view Elasticsearch deprecations.'
+    expect(find('deprecationsPageLoadingError').text()).toContain(
+      'You are not authorized to view Elasticsearch deprecation issues.'
     );
   });
 
@@ -59,12 +56,11 @@ describe('Error handling', () => {
       testBed = await setupElasticsearchPage({ isReadOnlyMode: false });
     });
 
-    const { component, exists, find } = testBed;
-
+    const { component, find } = testBed;
     component.update();
-
-    expect(exists('upgradedCallout')).toBe(true);
-    expect(find('upgradedCallout').text()).toContain('All Elasticsearch nodes have been upgraded.');
+    expect(find('deprecationsPageLoadingError').text()).toContain(
+      'All Elasticsearch nodes have been upgraded.'
+    );
   });
 
   it('shows partially upgrade error when nodes are running different versions', async () => {
@@ -83,12 +79,9 @@ describe('Error handling', () => {
       testBed = await setupElasticsearchPage({ isReadOnlyMode: false });
     });
 
-    const { component, exists, find } = testBed;
-
+    const { component, find } = testBed;
     component.update();
-
-    expect(exists('partiallyUpgradedWarning')).toBe(true);
-    expect(find('partiallyUpgradedWarning').text()).toContain(
+    expect(find('deprecationsPageLoadingError').text()).toContain(
       'Upgrade Kibana to the same version as your Elasticsearch cluster. One or more nodes in the cluster is running a different version than Kibana.'
     );
   });
@@ -106,11 +99,10 @@ describe('Error handling', () => {
       testBed = await setupElasticsearchPage({ isReadOnlyMode: false });
     });
 
-    const { component, exists, find } = testBed;
-
+    const { component, find } = testBed;
     component.update();
-
-    expect(exists('requestError')).toBe(true);
-    expect(find('requestError').text()).toContain('Could not retrieve Elasticsearch deprecations.');
+    expect(find('deprecationsPageLoadingError').text()).toContain(
+      'Could not retrieve Elasticsearch deprecation issues.'
+    );
   });
 });
diff --git a/.../upgrade_assistant/__jest__/client_integration/kibana_deprecations/error_handling.test.ts b/.../upgrade_assistant/__jest__/client_integration/kibana_deprecations/error_handling.test.ts
@@ -91,12 +91,9 @@ describe('Error handling', () => {
       });
     });
 
-    const { component, exists, find } = testBed;
-
+    const { component, find } = testBed;
     component.update();
-
-    expect(exists('kibanaRequestError')).toBe(true);
-    expect(find('kibanaRequestError').text()).toContain(
+    expect(find('deprecationsPageLoadingError').text()).toContain(
       'Could not retrieve Kibana deprecation issues'
     );
   });

diff --git a/...t__/client_integration/overview/fix_issues_step/elasticsearch_deprecation_issues.test.tsx b/...t__/client_integration/overview/fix_issues_step/elasticsearch_deprecation_issues.test.tsx
@@ -118,9 +118,11 @@ describe('Overview - Fix deprecation issues step - Elasticsearch deprecations',
         testBed = await setupOverviewPage();
       });
 
-      const { component, exists } = testBed;
+      const { component, find } = testBed;
       component.update();
-      expect(exists('esRequestErrorIconTip')).toBe(true);
+      expect(find('loadingIssuesError').text()).toBe(
+        'Could not retrieve Elasticsearch deprecation issues.'
+      );
     });
 
     test('handles unauthorized error', async () => {
@@ -136,9 +138,11 @@ describe('Overview - Fix deprecation issues step - Elasticsearch deprecations',
         testBed = await setupOverviewPage();
       });
 
-      const { component, exists } = testBed;
+      const { component, find } = testBed;
       component.update();
-      expect(exists('unauthorizedErrorIconTip')).toBe(true);
+      expect(find('loadingIssuesError').text()).toBe(
+        'You are not authorized to view Elasticsearch deprecation issues.'
+      );
     });
 
     test('handles partially upgraded error', async () => {
@@ -157,9 +161,11 @@ describe('Overview - Fix deprecation issues step - Elasticsearch deprecations',
         testBed = await setupOverviewPage({ isReadOnlyMode: false });
       });
 
-      const { component, exists } = testBed;
+      const { component, find } = testBed;
       component.update();
-      expect(exists('partiallyUpgradedErrorIconTip')).toBe(true);
+      expect(find('loadingIssuesError').text()).toBe(
+        'Upgrade Kibana to the same version as your Elasticsearch cluster. One or more nodes in the cluster is running a different version than Kibana.'
+      );
     });
 
     test('handles upgrade error', async () => {
@@ -178,9 +184,9 @@ describe('Overview - Fix deprecation issues step - Elasticsearch deprecations',
         testBed = await setupOverviewPage({ isReadOnlyMode: false });
       });
 
-      const { component, exists } = testBed;
+      const { component, find } = testBed;
       component.update();
-      expect(exists('upgradedErrorIconTip')).toBe(true);
+      expect(find('loadingIssuesError').text()).toBe('All Elasticsearch nodes have been upgraded.');
     });
   });
 });
diff --git a/...t/__jest__/client_integration/overview/fix_issues_step/kibana_deprecation_issues.test.tsx b/...t/__jest__/client_integration/overview/fix_issues_step/kibana_deprecation_issues.test.tsx
@@ -122,9 +122,11 @@ describe('Overview - Fix deprecation issues step - Kibana deprecations', () => {
         });
       });
 
-      const { component, exists } = testBed;
+      const { component, find } = testBed;
       component.update();
-      expect(exists('kibanaRequestErrorIconTip')).toBe(true);
+      expect(find('loadingIssuesError').text()).toBe(
+        'Could not retrieve Kibana deprecation issues.'
+      );
     });
   });
 });
diff --git a/x-pack/plugins/upgrade_assistant/common/types.ts b/x-pack/plugins/upgrade_assistant/common/types.ts
@@ -11,6 +11,8 @@ import {
 } from '@elastic/elasticsearch/api/types';
 import { SavedObject, SavedObjectAttributes } from 'src/core/public';
 
+export type DeprecationSource = 'Kibana' | 'Elasticsearch';
+
 export enum ReindexStep {
   // Enum values are spaced out by 10 to give us room to insert steps in between.
   created = 0,

diff --git a/...upgrade_assistant/public/application/components/es_deprecations/es_deprecation_errors.tsx b/...upgrade_assistant/public/application/components/es_deprecations/es_deprecation_errors.tsx
diff --git a/...ugins/upgrade_assistant/public/application/components/es_deprecations/es_deprecations.tsx b/...ugins/upgrade_assistant/public/application/components/es_deprecations/es_deprecations.tsx
@@ -14,9 +14,9 @@ import { i18n } from '@kbn/i18n';
 import { EnrichedDeprecationInfo } from '../../../../common/types';
 import { SectionLoading } from '../../../shared_imports';
 import { useAppContext } from '../../app_context';
+import { getEsDeprecationError } from '../../lib/get_es_deprecation_error';
+import { DeprecationsPageLoadingError, NoDeprecationsPrompt, DeprecationCount } from '../shared';
 import { EsDeprecationsTable } from './es_deprecations_table';
-import { EsDeprecationErrors } from './es_deprecation_errors';
-import { NoDeprecationsPrompt, DeprecationCount } from '../shared';
 
 const getDeprecationCountByLevel = (deprecations: EnrichedDeprecationInfo[]) => {
   const criticalDeprecations: EnrichedDeprecationInfo[] = [];
@@ -87,7 +87,12 @@ export const EsDeprecations = withRouter(({ history }: RouteComponentProps) => {
   }, [api, isLoading, isInitialRequest]);
 
   if (error) {
-    return <EsDeprecationErrors error={error} />;
+    return (
+      <DeprecationsPageLoadingError
+        deprecationSource="Elasticsearch"
+        message={getEsDeprecationError(error).message}
+      />
+    );
   }
 
   if (isLoading) {

diff --git a/...grade_assistant/public/application/components/kibana_deprecations/kibana_deprecations.tsx b/...grade_assistant/public/application/components/kibana_deprecations/kibana_deprecations.tsx
@@ -8,14 +8,14 @@
 import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import uuid from 'uuid';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { EuiPageContent, EuiPageHeader, EuiSpacer, EuiCallOut, EuiEmptyPrompt } from '@elastic/eui';
+import { EuiPageContent, EuiPageHeader, EuiSpacer, EuiCallOut } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import type { DomainDeprecationDetails } from 'kibana/public';
 import { SectionLoading, GlobalFlyout } from '../../../shared_imports';
 import { useAppContext } from '../../app_context';
-import { NoDeprecationsPrompt, DeprecationCount } from '../shared';
+import { DeprecationsPageLoadingError, NoDeprecationsPrompt, DeprecationCount } from '../shared';
 import { KibanaDeprecationsTable } from './kibana_deprecations_table';
 import {
   DeprecationDetailsFlyout,
@@ -67,15 +67,6 @@ const i18nTexts = {
         pluginIds: pluginIds.join(', '),
       },
     }),
-  requestErrorTitle: i18n.translate('xpack.upgradeAssistant.kibanaDeprecations.requestErrorTitle', {
-    defaultMessage: 'Could not retrieve Kibana deprecation issues',
-  }),
-  requestErrorDescription: i18n.translate(
-    'xpack.upgradeAssistant.kibanaDeprecationErrors.requestErrorDescription',
-    {
-      defaultMessage: 'Check the Kibana server logs for errors.',
-    }
-  ),
 };
 
 export interface DeprecationResolutionState {
@@ -251,15 +242,8 @@ export const KibanaDeprecations = withRouter(({ history }: RouteComponentProps)
     getAllDeprecations();
   }, [deprecations, getAllDeprecations]);
 
-  if (kibanaDeprecations && kibanaDeprecations.length === 0) {
-    return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
-        <NoDeprecationsPrompt
-          deprecationType={i18nTexts.deprecationLabel}
-          navigateToOverviewPage={() => history.push('/overview')}
-        />
-      </EuiPageContent>
-    );
+  if (error) {
+    return <DeprecationsPageLoadingError deprecationSource="Kibana" />;
   }
 
   if (isLoading) {
@@ -270,63 +254,53 @@ export const KibanaDeprecations = withRouter(({ history }: RouteComponentProps)
     );
   }
 
-  if (kibanaDeprecations?.length) {
+  if (kibanaDeprecations?.length === 0) {
     return (
-      <div data-test-subj="kibanaDeprecations">
-        <EuiPageHeader
-          bottomBorder
-          pageTitle={i18nTexts.pageTitle}
-          description={i18nTexts.pageDescription}
-        >
-          <DeprecationCount
-            totalCriticalDeprecations={deprecationsCountByLevel.criticalDeprecations}
-            totalWarningDeprecations={deprecationsCountByLevel.warningDeprecations}
-          />
-        </EuiPageHeader>
-
-        <EuiSpacer size="l" />
-
-        {kibanaDeprecationErrors.length > 0 && (
-          <>
-            <EuiCallOut
-              title={i18nTexts.kibanaDeprecationErrorTitle}
-              color="warning"
-              iconType="alert"
-              data-test-subj="kibanaDeprecationErrors"
-            >
-              <p>{i18nTexts.getKibanaDeprecationErrorDescription(kibanaDeprecationErrors)}</p>
-            </EuiCallOut>
-
-            <EuiSpacer />
-          </>
-        )}
-
-        <KibanaDeprecationsTable
-          deprecations={kibanaDeprecations}
-          reload={getAllDeprecations}
-          toggleFlyout={toggleFlyout}
-          deprecationResolutionState={deprecationResolutionState}
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+        <NoDeprecationsPrompt
+          deprecationType={i18nTexts.deprecationLabel}
+          navigateToOverviewPage={() => history.push('/overview')}
         />
-      </div>
+      </EuiPageContent>
     );
   }
 
-  if (error) {
-    return (
-      <EuiPageContent
-        verticalPosition="center"
-        horizontalPosition="center"
-        color="danger"
-        data-test-subj="kibanaRequestError"
+  return (
+    <div data-test-subj="kibanaDeprecations">
+      <EuiPageHeader
+        bottomBorder
+        pageTitle={i18nTexts.pageTitle}
+        description={i18nTexts.pageDescription}
       >
-        <EuiEmptyPrompt
-          iconType="alert"
-          title={<h2>{i18nTexts.requestErrorTitle}</h2>}
-          body={<p>{i18nTexts.requestErrorDescription}</p>}
+        <DeprecationCount
+          totalCriticalDeprecations={deprecationsCountByLevel.criticalDeprecations}
+          totalWarningDeprecations={deprecationsCountByLevel.warningDeprecations}
         />
-      </EuiPageContent>
-    );
-  }
-
-  return null;
+      </EuiPageHeader>
+
+      <EuiSpacer size="l" />
+
+      {kibanaDeprecationErrors.length > 0 && (
+        <>
+          <EuiCallOut
+            title={i18nTexts.kibanaDeprecationErrorTitle}
+            color="warning"
+            iconType="alert"
+            data-test-subj="kibanaDeprecationErrors"
+          >
+            <p>{i18nTexts.getKibanaDeprecationErrorDescription(kibanaDeprecationErrors)}</p>
+          </EuiCallOut>
+
+          <EuiSpacer />
+        </>
+      )}
+
+      <KibanaDeprecationsTable
+        deprecations={kibanaDeprecations}
+        reload={getAllDeprecations}
+        toggleFlyout={toggleFlyout}
+        deprecationResolutionState={deprecationResolutionState}
+      />
+    </div>
+  );
 });
diff --git a/...nt/public/application/components/overview/fix_issues_step/components/_es_stats_error.scss b/...nt/public/application/components/overview/fix_issues_step/components/_es_stats_error.scss