diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index a6187937cbf6dc..8dc3227e74e1cb 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -22163,8 +22163,6 @@ "xpack.upgradeAssistant.checkupTab.reindexing.reindexButton.loadingLabel": "読み込み中…", "xpack.upgradeAssistant.checkupTab.reindexing.reindexButton.pausedLabel": "一時停止中", "xpack.upgradeAssistant.checkupTab.reindexing.reindexButton.reindexLabel": "再インデックス", - "xpack.upgradeAssistant.overviewTab.steps.deprecationLogsStep.enableDeprecationLoggingToggleSwitch.enabledLabel": "オン", - "xpack.upgradeAssistant.overviewTab.steps.deprecationLogsStep.enableDeprecationLoggingToggleSwitch.errorLabel": "ログステータスを読み込めませんでした", "xpack.upgradeAssistant.reindex.reindexPrivilegesErrorBatch": "「{indexName}」に再インデックスするための権限が不十分です。", "xpack.upgradeAssistant.tabs.incompleteCallout.calloutBody.breackingChangesDocButtonLabel": "廃止と互換性を破る変更", "xpack.upgradeAssistant.tabs.incompleteCallout.calloutBody.calloutDetail": "Elasticsearch {nextEsVersion} の {breakingChangesDocButton} の完全なリストは、最終の {currentEsVersion} マイナーリリースで確認できます。この警告は、リストがすべて解決されると消えます。", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 6a452f25f0283a..7ea3ed2e1bf2ca 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -22515,8 +22515,6 @@ "xpack.upgradeAssistant.checkupTab.reindexing.reindexButton.loadingLabel": "正在加载……", "xpack.upgradeAssistant.checkupTab.reindexing.reindexButton.pausedLabel": "已暂停", "xpack.upgradeAssistant.checkupTab.reindexing.reindexButton.reindexLabel": "重新索引", - "xpack.upgradeAssistant.overviewTab.steps.deprecationLogsStep.enableDeprecationLoggingToggleSwitch.enabledLabel": "开启", - "xpack.upgradeAssistant.overviewTab.steps.deprecationLogsStep.enableDeprecationLoggingToggleSwitch.errorLabel": "无法加载日志状态", "xpack.upgradeAssistant.reindex.reindexPrivilegesErrorBatch": "您没有足够的权限重新索引“{indexName}”。", "xpack.upgradeAssistant.tabs.incompleteCallout.calloutBody.breackingChangesDocButtonLabel": "弃用内容和重大更改", "xpack.upgradeAssistant.tabs.incompleteCallout.calloutBody.calloutDetail": "Elasticsearch {nextEsVersion} 中的 {breakingChangesDocButton} 完整列表将在最终的 {currentEsVersion} 次要版本中提供。完成列表后，此警告将消失。", diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/overview/deprecation_logging_toggle.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/overview/deprecation_logging_toggle.tsx index 6be7793f0bd4a4..ab2f94ee58240a 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/components/overview/deprecation_logging_toggle.tsx +++ b/x-pack/plugins/upgrade_assistant/public/application/components/overview/deprecation_logging_toggle.tsx @@ -7,104 +7,195 @@ import React, { useEffect, useState } from 'react'; -import { EuiLoadingSpinner, EuiSwitch } from '@elastic/eui'; +import { + EuiButton, + EuiFlexItem, + EuiFlexGroup, + EuiText, + EuiTextColor, + EuiButtonEmpty, +} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { useAppContext } from '../../app_context'; import { ResponseError } from '../../lib/api'; const i18nTexts = { - toggleErrorLabel: i18n.translate( - 'xpack.upgradeAssistant.overviewTab.steps.deprecationLogsStep.enableDeprecationLoggingToggleSwitch.errorLabel', + fetchErrorMessage: i18n.translate( + 'xpack.upgradeAssistant.overview.deprecationLogs.fetchErrorMessage', { - defaultMessage: 'Could not load logging state', + defaultMessage: 'Could not retrieve logging information.', } ), - toggleLabel: i18n.translate( - 'xpack.upgradeAssistant.overviewTab.steps.deprecationLogsStep.enableDeprecationLoggingToggleSwitch.enabledLabel', + reloadButtonLabel: i18n.translate( + 'xpack.upgradeAssistant.overview.deprecationLogs.reloadButtonLabel', { - defaultMessage: 'Enable deprecation logging', + defaultMessage: 'Try again', + } + ), + updateErrorMessage: i18n.translate( + 'xpack.upgradeAssistant.overview.deprecationLogs.updateErrorMessage', + { + defaultMessage: 'Could not update logging state.', } ), enabledMessage: i18n.translate( - 'xpack.upgradeAssistant.overviewTab.steps.deprecationLogsStep.enableDeprecationLoggingToggleSwitch.enabledToastMessage', + 'xpack.upgradeAssistant.overview.deprecationLogs.enabledToastMessage', { defaultMessage: 'Log deprecated actions.', } ), disabledMessage: i18n.translate( - 'xpack.upgradeAssistant.overviewTab.steps.deprecationLogsStep.enableDeprecationLoggingToggleSwitch.disabledToastMessage', + 'xpack.upgradeAssistant.overview.deprecationLogs.disabledToastMessage', { defaultMessage: 'Do not log deprecated actions.', } ), + fetchButtonLabel: i18n.translate( + 'xpack.upgradeAssistant.overview.deprecationLogging.loadingLabel', + { + defaultMessage: 'Retrieving logging state', + } + ), + enablingButtonLabel: i18n.translate( + 'xpack.upgradeAssistant.overview.deprecationLogs.enablingButtonLabel', + { + defaultMessage: 'Enabling deprecation logging', + } + ), + disablingButtonLabel: i18n.translate( + 'xpack.upgradeAssistant.overview.deprecationLogs.disablingButtonLabel', + { + defaultMessage: 'Disabling deprecation logging', + } + ), + enableButtonLabel: i18n.translate( + 'xpack.upgradeAssistant.overview.deprecationLogs.enableButtonLabel', + { + defaultMessage: 'Enable deprecation logging', + } + ), + disableButtonLabel: i18n.translate( + 'xpack.upgradeAssistant.overview.deprecationLogs.disableButtonLabel', + { + defaultMessage: 'Disable deprecation logging', + } + ), + fetchErrorButtonLabel: i18n.translate( + 'xpack.upgradeAssistant.overview.deprecationLogs.fetchErrorButtonLabel', + { + defaultMessage: 'Deprecation logging unavailable', + } + ), }; export const DeprecationLoggingToggle: React.FunctionComponent = () => { const { api, notifications } = useAppContext(); - const [isEnabled, setIsEnabled] = useState(true); - const [isLoading, setIsLoading] = useState(false); - const [error, setError] = useState(undefined); - - useEffect(() => { - async function getDeprecationLoggingStatus() { - setIsLoading(true); - - const { data, error: responseError } = await api.getDeprecationLogging(); + const { data, error: fetchError, isLoading, resendRequest } = api.useLoadDeprecationLogging(); - setIsLoading(false); + const [isEnabled, setIsEnabled] = useState(undefined); + const [isUpdating, setIsUpdating] = useState(false); + const [updateError, setUpdateError] = useState(undefined); - if (responseError) { - setError(responseError); - } else if (data) { - setIsEnabled(data.isEnabled); - } + const getButtonLabel = () => { + if (isLoading) { + return i18nTexts.fetchButtonLabel; } - getDeprecationLoggingStatus(); - }, [api]); + if (isUpdating) { + return isEnabled ? i18nTexts.disablingButtonLabel : i18nTexts.enablingButtonLabel; + } - if (isLoading) { - return ; - } + if (fetchError) { + return i18nTexts.fetchErrorButtonLabel; + } - const renderLoggingState = () => { - if (error) { - return i18nTexts.toggleErrorLabel; + if (isEnabled) { + return i18nTexts.disableButtonLabel; } - return i18nTexts.toggleLabel; + return i18nTexts.enableButtonLabel; }; + useEffect(() => { + if (isLoading === false && data) { + setIsEnabled(data.isEnabled); + } + }, [data, isLoading]); + const toggleLogging = async () => { const newIsEnabledValue = !isEnabled; - setIsLoading(true); + setIsUpdating(true); - const { data, error: updateError } = await api.updateDeprecationLogging({ + const { + data: updatedLoggingState, + error: updateDeprecationError, + } = await api.updateDeprecationLogging({ isEnabled: newIsEnabledValue, }); - setIsLoading(false); + setIsUpdating(false); - if (updateError) { - setError(updateError); - } else if (data) { - setIsEnabled(data.isEnabled); + if (updateDeprecationError) { + setUpdateError(updateDeprecationError); + } else if (updatedLoggingState) { + setIsEnabled(updatedLoggingState.isEnabled); notifications.toasts.addSuccess( - data.isEnabled ? i18nTexts.enabledMessage : i18nTexts.disabledMessage + updatedLoggingState.isEnabled ? i18nTexts.enabledMessage : i18nTexts.disabledMessage ); } }; return ( - + + + + {getButtonLabel()} + + + + {fetchError && ( + + +

+ {i18nTexts.fetchErrorMessage} + {fetchError.statusCode && fetchError.message && ( + <> + {' '} + {`${fetchError.statusCode}: ${fetchError.message}`} + + )}{' '} + + {i18nTexts.reloadButtonLabel} + +

+ + + )} + + {updateError && ( + + +

+ {i18nTexts.updateErrorMessage} + {updateError.statusCode && updateError.message && ( + <> + {' '} + {`${updateError.statusCode}: ${updateError.message}`} + + )} +

+ + + )} + ); }; diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/overview/overview.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/overview/overview.tsx index b346d918f212a4..6b3048b669aa2e 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/components/overview/overview.tsx +++ b/x-pack/plugins/upgrade_assistant/public/application/components/overview/overview.tsx @@ -17,8 +17,8 @@ import { EuiFlexItem, EuiFlexGroup, EuiSpacer, + EuiTitle, EuiLink, - EuiFormRow, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -31,35 +31,41 @@ import { KibanaDeprecationStats } from './kibana_stats'; import { DeprecationLoggingToggle } from './deprecation_logging_toggle'; const i18nTexts = { - pageTitle: i18n.translate('xpack.upgradeAssistant.pageTitle', { + pageTitle: i18n.translate('xpack.upgradeAssistant.overview.pageTitle', { defaultMessage: 'Upgrade Assistant', }), - getPageDescription: (nextMajor: string) => - i18n.translate('xpack.upgradeAssistant.pageDescription', { - defaultMessage: - 'Prepare to upgrade by identifying deprecated settings and updating your configuration. Enable deprecation logging to see if your are using deprecated features that will not be available after you upgrade to Elastic {nextMajor}.', - values: { - nextMajor, - }, - }), - getDeprecationLoggingLabel: (href: string) => ( + pageDescription: i18n.translate('xpack.upgradeAssistant.overview.pageDescription', { + defaultMessage: + 'Prepare to upgrade by identifying deprecated settings and updating your configuration.', + }), + docLink: i18n.translate('xpack.upgradeAssistant.overview.documentationLinkText', { + defaultMessage: 'Documentation', + }), + deprecationLoggingTitle: i18n.translate( + 'xpack.upgradeAssistant.overview.deprecationLoggingTitle', + { + defaultMessage: 'Deprecation logs', + } + ), + getDeprecationLoggingDescription: (nextMajor: string, href: string) => ( - {i18n.translate('xpack.upgradeAssistant.deprecationLoggingDescription.learnMoreLink', { - defaultMessage: 'Learn more.', - })} + {i18n.translate( + 'xpack.upgradeAssistant.deprecationLoggingDescription.deprecationLoggingLink', + { + defaultMessage: 'deprecation logging', + } + )} ), }} /> ), - docLink: i18n.translate('xpack.upgradeAssistant.documentationLinkText', { - defaultMessage: 'Documentation', - }), }; interface Props { @@ -104,7 +110,7 @@ export const DeprecationsOverview: FunctionComponent = ({ history }) => { <> -

{i18nTexts.getPageDescription(`${nextMajor}.x`)}

+

{i18nTexts.pageDescription}

 @@ -114,6 +120,7 @@ export const DeprecationsOverview: FunctionComponent = ({ history }) => { + {/* Deprecation stats */} @@ -126,14 +133,27 @@ export const DeprecationsOverview: FunctionComponent = ({ history }) => { - - - + {/* Deprecation logging */} + + + +

{i18nTexts.deprecationLoggingTitle}

+ + + +

+ {i18nTexts.getDeprecationLoggingDescription( + `${nextMajor}.x`, + docLinks.links.elasticsearch.deprecationLogging + )} +

+ + + + + + + diff --git a/x-pack/plugins/upgrade_assistant/public/application/lib/api.ts b/x-pack/plugins/upgrade_assistant/public/application/lib/api.ts index 1bb8be62f1700e..1c42c249e9d545 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/lib/api.ts +++ b/x-pack/plugins/upgrade_assistant/public/application/lib/api.ts @@ -62,12 +62,11 @@ export class ApiService { return result; } - public async getDeprecationLogging() { - const result = await this.sendRequest<{ isEnabled: boolean }>({ + public useLoadDeprecationLogging() { + return this.useRequest<{ isEnabled: boolean }>({ path: `${API_BASE_PATH}/deprecation_logging`, method: 'get', }); - return result; } public async updateDeprecationLogging(loggingData: { isEnabled: boolean }) { diff --git a/x-pack/plugins/upgrade_assistant/tests_client_integration/helpers/overview.helpers.ts b/x-pack/plugins/upgrade_assistant/tests_client_integration/helpers/overview.helpers.ts index 52346c94ef46b0..9e4b2eae483ea3 100644 --- a/x-pack/plugins/upgrade_assistant/tests_client_integration/helpers/overview.helpers.ts +++ b/x-pack/plugins/upgrade_assistant/tests_client_integration/helpers/overview.helpers.ts @@ -5,6 +5,7 @@ * 2.0. */ +import { act } from 'react-dom/test-utils'; import { registerTestBed, TestBed, TestBedConfig } from '@kbn/test/jest'; import { DeprecationsOverview } from '../../public/application/components/overview'; import { WithAppDependencies } from './setup_environment'; @@ -17,7 +18,29 @@ const testBedConfig: TestBedConfig = { doMountAsync: true, }; -export type OverviewTestBed = TestBed; +export type OverviewTestBed = TestBed & { + actions: ReturnType; +}; + +const createActions = (testBed: TestBed) => { + /** + * User Actions + */ + + const clickDeprecationToggle = async () => { + const { find, component } = testBed; + + await act(async () => { + find('upgradeAssistantDeprecationToggle').simulate('click'); + }); + + component.update(); + }; + + return { + clickDeprecationToggle, + }; +}; export const setup = async (overrides?: Record): Promise => { const initTestBed = registerTestBed( @@ -26,7 +49,10 @@ export const setup = async (overrides?: Record): Promise { describe('Deprecation logging', () => { test('toggles deprecation logging', async () => { - const { form, find, component } = testBed; + const { find, actions } = testBed; httpRequestsMockHelpers.setUpdateDeprecationLoggingResponse({ isEnabled: false }); - expect(find('upgradeAssistantDeprecationToggle').props()['aria-checked']).toBe(true); - expect(find('upgradeAssistantDeprecationToggle').props().disabled).toBe(false); - - await act(async () => { - form.toggleEuiSwitch('upgradeAssistantDeprecationToggle'); - }); + expect(find('upgradeAssistantDeprecationToggle').text()).toEqual( + 'Disable deprecation logging' + ); - component.update(); + await actions.clickDeprecationToggle(); - expect(find('upgradeAssistantDeprecationToggle').props()['aria-checked']).toBe(false); - expect(find('upgradeAssistantDeprecationToggle').props().disabled).toBe(false); + const latestRequest = server.requests[server.requests.length - 1]; + expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual({ isEnabled: false }); + expect(find('upgradeAssistantDeprecationToggle').text()).toEqual( + 'Enable deprecation logging' + ); }); - test('handles network error', async () => { + test('handles network error when updating logging state', async () => { const error = { statusCode: 500, error: 'Internal server error', message: 'Internal server error', }; - const { form, find, component } = testBed; + const { actions, find, exists } = testBed; httpRequestsMockHelpers.setUpdateDeprecationLoggingResponse(undefined, error); - expect(find('upgradeAssistantDeprecationToggle').props()['aria-checked']).toBe(true); - expect(find('upgradeAssistantDeprecationToggle').props().disabled).toBe(false); - expect(find('deprecationLoggingFormRow').find('.euiSwitch__label').text()).toContain( - 'Enable deprecation logging' + expect(find('upgradeAssistantDeprecationToggle').text()).toEqual( + 'Disable deprecation logging' + ); + + await actions.clickDeprecationToggle(); + + // Logging state should not change since there was an error + expect(find('upgradeAssistantDeprecationToggle').text()).toEqual( + 'Disable deprecation logging' ); + expect(exists('updateLoggingError')).toBe(true); + }); + + test('handles network error when fetching logging state', async () => { + const error = { + statusCode: 500, + error: 'Internal server error', + message: 'Internal server error', + }; + + httpRequestsMockHelpers.setLoadDeprecationLoggingResponse(undefined, error); await act(async () => { - form.toggleEuiSwitch('upgradeAssistantDeprecationToggle'); + testBed = await setupOverviewPage(); }); + const { component, exists, find } = testBed; + component.update(); - expect(find('upgradeAssistantDeprecationToggle').props()['aria-checked']).toBe(true); - expect(find('upgradeAssistantDeprecationToggle').props().disabled).toBe(true); - expect(find('deprecationLoggingFormRow').find('.euiSwitch__label').text()).toContain( - 'Could not load logging state' + expect(find('upgradeAssistantDeprecationToggle').text()).toEqual( + 'Deprecation logging unavailable' ); + expect(exists('fetchLoggingError')).toBe(true); }); });