Skip to content

Commit 7dfb086

Browse files
alisonelizabethalisonelizabeth
authored
[Upgrade Assistant] Migrate to new page layout (#101691)
1 parent 85fa7c8 commit 7dfb086

6 files changed

Lines changed: 198 additions & 202 deletions

File tree

‎x-pack/plugins/upgrade_assistant/__jest__/client_integration/kibana.test.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -182,9 +182,7 @@ describe('Kibana deprecations', () => {
182182
component.update();
183183

184184
expect(exists('kibanaRequestError')).toBe(true);
185-
expect(find('kibanaRequestError').text()).toContain(
186-
'Could not retrieve Kibana deprecations.'
187-
);
185+
expect(find('kibanaRequestError').text()).toContain('Could not retrieve Kibana deprecations');
188186
});
189187

190188
test('handles deprecation service error', async () => {
@@ -217,7 +215,7 @@ describe('Kibana deprecations', () => {
217215
// Verify top-level callout renders
218216
expect(exists('kibanaPluginError')).toBe(true);
219217
expect(find('kibanaPluginError').text()).toContain(
220-
'Not all Kibana deprecations were retrieved successfully.'
218+
'Not all Kibana deprecations were retrieved successfully'
221219
);
222220

223221
// Open all deprecations

‎x-pack/plugins/upgrade_assistant/public/application/components/coming_soon_prompt.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const ComingSoonPrompt: React.FunctionComponent = () => {
1616
const { ELASTIC_WEBSITE_URL } = docLinks;
1717

1818
return (
19-
<EuiPageContent>
19+
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
2020
<EuiEmptyPrompt
2121
iconType="wrench"
2222
data-test-subj="comingSoonPrompt"

‎x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/es_deprecations.tsx‎

Lines changed: 44 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,12 @@ import { withRouter, RouteComponentProps } from 'react-router-dom';
1111
import {
1212
EuiButton,
1313
EuiButtonEmpty,
14-
EuiPageBody,
1514
EuiPageHeader,
1615
EuiTabbedContent,
1716
EuiTabbedContentTab,
18-
EuiPageContent,
19-
EuiPageContentBody,
2017
EuiToolTip,
2118
EuiNotificationBadge,
19+
EuiSpacer,
2220
} from '@elastic/eui';
2321
import { i18n } from '@kbn/i18n';
2422

@@ -162,51 +160,49 @@ export const EsDeprecationsContent = withRouter(
162160
}, [api, tabName, isLoading]);
163161

164162
return (
165-
<EuiPageBody>
166-
<EuiPageContent>
167-
<EuiPageHeader
168-
pageTitle={i18nTexts.pageTitle}
169-
description={i18nTexts.pageDescription}
170-
rightSideItems={[
171-
<EuiButtonEmpty
172-
href={docLinks.links.upgradeAssistant}
173-
target="_blank"
174-
iconType="help"
175-
data-test-subj="documentationLink"
176-
>
177-
{i18nTexts.docLinkText}
178-
</EuiButtonEmpty>,
179-
]}
180-
>
181-
<EuiToolTip position="bottom" content={i18nTexts.backupDataButton.tooltipText}>
182-
<EuiButton
183-
fill
184-
href={getUrlForApp('management', {
185-
path: 'data/snapshot_restore',
186-
})}
187-
iconType="popout"
188-
iconSide="right"
189-
target="_blank"
190-
>
191-
{i18nTexts.backupDataButton.label}
192-
</EuiButton>
193-
</EuiToolTip>
194-
</EuiPageHeader>
195-
196-
<EuiPageContentBody>
197-
<EuiTabbedContent
198-
data-test-subj={
199-
telemetryState === TelemetryState.Running
200-
? 'upgradeAssistantTelemetryRunning'
201-
: undefined
202-
}
203-
tabs={tabs}
204-
onTabClick={onTabClick}
205-
selectedTab={tabs.find((tab) => tab.id === tabName)}
206-
/>
207-
</EuiPageContentBody>
208-
</EuiPageContent>
209-
</EuiPageBody>
163+
<>
164+
<EuiPageHeader
165+
pageTitle={i18nTexts.pageTitle}
166+
description={i18nTexts.pageDescription}
167+
rightSideItems={[
168+
<EuiButtonEmpty
169+
href={docLinks.links.upgradeAssistant}
170+
target="_blank"
171+
iconType="help"
172+
data-test-subj="documentationLink"
173+
>
174+
{i18nTexts.docLinkText}
175+
</EuiButtonEmpty>,
176+
]}
177+
>
178+
<EuiToolTip position="bottom" content={i18nTexts.backupDataButton.tooltipText}>
179+
<EuiButton
180+
fill
181+
href={getUrlForApp('management', {
182+
path: 'data/snapshot_restore',
183+
})}
184+
iconType="popout"
185+
iconSide="right"
186+
target="_blank"
187+
>
188+
{i18nTexts.backupDataButton.label}
189+
</EuiButton>
190+
</EuiToolTip>
191+
</EuiPageHeader>
192+
193+
<EuiSpacer size="l" />
194+
195+
<EuiTabbedContent
196+
data-test-subj={
197+
telemetryState === TelemetryState.Running
198+
? 'upgradeAssistantTelemetryRunning'
199+
: undefined
200+
}
201+
tabs={tabs}
202+
onTabClick={onTabClick}
203+
selectedTab={tabs.find((tab) => tab.id === tabName)}
204+
/>
205+
</>
210206
);
211207
}
212208
);

‎x-pack/plugins/upgrade_assistant/public/application/components/kibana_deprecations/kibana_deprecation_errors.tsx‎

Lines changed: 44 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,44 +7,67 @@
77

88
import React from 'react';
99
import { i18n } from '@kbn/i18n';
10-
import { EuiCallOut } from '@elastic/eui';
10+
import { EuiPageContent, EuiEmptyPrompt } from '@elastic/eui';
1111

1212
interface Props {
1313
errorType: 'pluginError' | 'requestError';
1414
}
1515

1616
const i18nTexts = {
17-
pluginError: i18n.translate('xpack.upgradeAssistant.kibanaDeprecationErrors.pluginErrorMessage', {
18-
defaultMessage:
19-
'Not all Kibana deprecations were retrieved successfully. This list may be incomplete. Check the Kibana server logs for errors.',
20-
}),
21-
loadingError: i18n.translate(
22-
'xpack.upgradeAssistant.kibanaDeprecationErrors.loadingErrorMessage',
23-
{
24-
defaultMessage:
25-
'Could not retrieve Kibana deprecations. Check the Kibana server logs for errors.',
26-
}
27-
),
17+
pluginError: {
18+
title: i18n.translate('xpack.upgradeAssistant.kibanaDeprecationErrors.pluginErrorTitle', {
19+
defaultMessage: 'Not all Kibana deprecations were retrieved successfully',
20+
}),
21+
description: i18n.translate(
22+
'xpack.upgradeAssistant.kibanaDeprecationErrors.pluginErrorDescription',
23+
{
24+
defaultMessage: 'Check the Kibana server logs for errors.',
25+
}
26+
),
27+
},
28+
loadingError: {
29+
title: i18n.translate('xpack.upgradeAssistant.kibanaDeprecationErrors.loadingErrorTitle', {
30+
defaultMessage: 'Could not retrieve Kibana deprecations',
31+
}),
32+
description: i18n.translate(
33+
'xpack.upgradeAssistant.kibanaDeprecationErrors.loadingErrorDescription',
34+
{
35+
defaultMessage: 'Check the Kibana server logs for errors.',
36+
}
37+
),
38+
},
2839
};
2940

3041
export const KibanaDeprecationErrors: React.FunctionComponent<Props> = ({ errorType }) => {
3142
if (errorType === 'pluginError') {
3243
return (
33-
<EuiCallOut
34-
title={i18nTexts.pluginError}
35-
color="warning"
36-
iconType="alert"
44+
<EuiPageContent
45+
verticalPosition="center"
46+
horizontalPosition="center"
47+
color="danger"
3748
data-test-subj="kibanaPluginError"
38-
/>
49+
>
50+
<EuiEmptyPrompt
51+
iconType="alert"
52+
title={<h2>{i18nTexts.pluginError.title}</h2>}
53+
body={<p>{i18nTexts.pluginError.description}</p>}
54+
/>
55+
</EuiPageContent>
3956
);
4057
}
4158

4259
return (
43-
<EuiCallOut
44-
title={i18nTexts.loadingError}
60+
<EuiPageContent
61+
verticalPosition="center"
62+
horizontalPosition="center"
4563
color="danger"
46-
iconType="alert"
4764
data-test-subj="kibanaRequestError"
48-
/>
65+
>
66+
<EuiEmptyPrompt
67+
iconType="alert"
68+
title={<h2>{i18nTexts.loadingError.title}</h2>}
69+
body={<p>{i18nTexts.loadingError.description}</p>}
70+
/>
71+
</EuiPageContent>
4972
);
5073
};

‎x-pack/plugins/upgrade_assistant/public/application/components/kibana_deprecations/kibana_deprecations.tsx‎

Lines changed: 44 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,7 @@
88
import React, { useEffect, useState, useCallback } from 'react';
99
import { withRouter, RouteComponentProps } from 'react-router-dom';
1010

11-
import {
12-
EuiButtonEmpty,
13-
EuiPageBody,
14-
EuiPageHeader,
15-
EuiPageContent,
16-
EuiPageContentBody,
17-
EuiSpacer,
18-
} from '@elastic/eui';
11+
import { EuiButtonEmpty, EuiPageContent, EuiPageHeader, EuiSpacer } from '@elastic/eui';
1912
import { i18n } from '@kbn/i18n';
2013

2114
import type { DomainDeprecationDetails } from 'kibana/public';
@@ -135,46 +128,28 @@ export const KibanaDeprecationsContent = withRouter(({ history }: RouteComponent
135128
getAllDeprecations();
136129
}, [deprecations, getAllDeprecations]);
137130

138-
const getPageContent = () => {
139-
if (kibanaDeprecations && kibanaDeprecations.length === 0) {
140-
return (
131+
if (kibanaDeprecations && kibanaDeprecations.length === 0) {
132+
return (
133+
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
141134
<NoDeprecationsPrompt
142135
deprecationType={i18nTexts.deprecationLabel}
143136
navigateToOverviewPage={() => history.push('/overview')}
144137
/>
145-
);
146-
}
147-
148-
let content: React.ReactNode;
149-
150-
if (isLoading) {
151-
content = <SectionLoading>{i18nTexts.isLoading}</SectionLoading>;
152-
} else if (kibanaDeprecations?.length) {
153-
content = (
154-
<KibanaDeprecationList
155-
deprecations={kibanaDeprecations}
156-
showStepsModal={toggleStepsModal}
157-
showResolveModal={toggleResolveModal}
158-
reloadDeprecations={getAllDeprecations}
159-
isLoading={isLoading}
160-
/>
161-
);
162-
} else if (error) {
163-
content = <KibanaDeprecationErrors errorType="requestError" />;
164-
}
138+
</EuiPageContent>
139+
);
140+
}
165141

142+
if (isLoading) {
166143
return (
167-
<div data-test-subj="kibanaDeprecationsContent">
168-
<EuiSpacer />
169-
{content}
170-
</div>
144+
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
145+
<SectionLoading>{i18nTexts.isLoading}</SectionLoading>
146+
</EuiPageContent>
171147
);
172-
};
173-
174-
return (
175-
<EuiPageBody>
176-
<EuiPageContent>
148+
} else if (kibanaDeprecations?.length) {
149+
return (
150+
<div data-test-subj="kibanaDeprecationsContent">
177151
<EuiPageHeader
152+
bottomBorder
178153
pageTitle={i18nTexts.pageTitle}
179154
description={i18nTexts.pageDescription}
180155
rightSideItems={[
@@ -189,23 +164,33 @@ export const KibanaDeprecationsContent = withRouter(({ history }: RouteComponent
189164
]}
190165
/>
191166

192-
<EuiPageContentBody>
193-
{getPageContent()}
194-
195-
{stepsModalContent && (
196-
<StepsModal closeModal={() => toggleStepsModal()} modalContent={stepsModalContent} />
197-
)}
198-
199-
{resolveModalContent && (
200-
<ResolveDeprecationModal
201-
closeModal={() => toggleResolveModal()}
202-
resolveDeprecation={resolveDeprecation}
203-
isResolvingDeprecation={isResolvingDeprecation}
204-
deprecation={resolveModalContent}
205-
/>
206-
)}
207-
</EuiPageContentBody>
208-
</EuiPageContent>
209-
</EuiPageBody>
210-
);
167+
<EuiSpacer size="l" />
168+
169+
<KibanaDeprecationList
170+
deprecations={kibanaDeprecations}
171+
showStepsModal={toggleStepsModal}
172+
showResolveModal={toggleResolveModal}
173+
reloadDeprecations={getAllDeprecations}
174+
isLoading={isLoading}
175+
/>
176+
177+
{stepsModalContent && (
178+
<StepsModal closeModal={() => toggleStepsModal()} modalContent={stepsModalContent} />
179+
)}
180+
181+
{resolveModalContent && (
182+
<ResolveDeprecationModal
183+
closeModal={() => toggleResolveModal()}
184+
resolveDeprecation={resolveDeprecation}
185+
isResolvingDeprecation={isResolvingDeprecation}
186+
deprecation={resolveModalContent}
187+
/>
188+
)}
189+
</div>
190+
);
191+
} else if (error) {
192+
return <KibanaDeprecationErrors errorType="requestError" />;
193+
}
194+
195+
return null;
211196
});

0 commit comments

Comments
 (0)