Skip to content

Commit

Permalink
[Upgrade Assistant] Improve loading/error states for deprecation togg…
Browse files Browse the repository at this point in the history 
…le (#97294) (#98948)
  • Loading branch information
@alisonelizabeth
alisonelizabeth authored Apr 30, 2021
1 parent 2bb5565 commit a2a8cdc
Show file tree
Hide file tree
Showing 7 changed files with 258 additions and 107 deletions.
2 changes: 0 additions & 2 deletions x-pack/plugins/translations/translations/ja-JP.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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} マイナーリリースで確認できます。この警告は、リストがすべて解決されると消えます。",
Expand Down
2 changes: 0 additions & 2 deletions x-pack/plugins/translations/translations/zh-CN.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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} 次要版本中提供。完成列表后，此警告将消失。",
Expand Down
187 changes: 139 additions & 48 deletions ...s/upgrade_assistant/public/application/components/overview/deprecation_logging_toggle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<ResponseError | undefined>(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<boolean | undefined>(undefined);
const [isUpdating, setIsUpdating] = useState(false);
const [updateError, setUpdateError] = useState<ResponseError | undefined>(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 <EuiLoadingSpinner size="l" />;
}
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 (
<EuiSwitch
data-test-subj="upgradeAssistantDeprecationToggle"
label={renderLoggingState()}
checked={isEnabled}
onChange={toggleLogging}
disabled={isLoading || Boolean(error)}
/>
<EuiFlexGroup alignItems="baseline">
<EuiFlexItem grow={false}>
<EuiButton
data-test-subj="upgradeAssistantDeprecationToggle"
isLoading={isLoading || isUpdating}
onClick={toggleLogging}
color={isEnabled ? 'text' : 'primary'}
disabled={Boolean(fetchError)}
>
{getButtonLabel()}
</EuiButton>
</EuiFlexItem>

{fetchError && (
<EuiFlexItem>
<EuiText>
<p data-test-subj="fetchLoggingError">
<EuiTextColor color="danger">{i18nTexts.fetchErrorMessage}</EuiTextColor>
{fetchError.statusCode && fetchError.message && (
<>
{' '}
<EuiTextColor color="danger">{`${fetchError.statusCode}: ${fetchError.message}`}</EuiTextColor>
</>
)}{' '}
<EuiButtonEmpty iconType="refresh" onClick={resendRequest}>
{i18nTexts.reloadButtonLabel}
</EuiButtonEmpty>
</p>
</EuiText>
</EuiFlexItem>
)}

{updateError && (
<EuiFlexItem>
<EuiText>
<p data-test-subj="updateLoggingError">
<EuiTextColor color="danger">{i18nTexts.updateErrorMessage}</EuiTextColor>
{updateError.statusCode && updateError.message && (
<>
{' '}
<EuiTextColor color="danger">{`${updateError.statusCode}: ${updateError.message}`}</EuiTextColor>
</>
)}
</p>
</EuiText>
</EuiFlexItem>
)}
</EuiFlexGroup>
);
};
78 changes: 49 additions & 29 deletions x-pack/plugins/upgrade_assistant/public/application/components/overview/overview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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) => (
<FormattedMessage
id="xpack.upgradeAssistant.deprecationLoggingDescription"
defaultMessage="Log deprecated actions. {learnMore}"
id="xpack.upgradeAssistant.overview.deprecationLoggingDescription"
defaultMessage="Enable {deprecationLoggingLink} to see if you are using deprecated features that will not be available after you upgrade to Elastic {nextMajor}."
values={{
learnMore: (
nextMajor,
deprecationLoggingLink: (
<EuiLink href={href} target="_blank">
{i18n.translate('xpack.upgradeAssistant.deprecationLoggingDescription.learnMoreLink', {
defaultMessage: 'Learn more.',
})}
{i18n.translate(
'xpack.upgradeAssistant.deprecationLoggingDescription.deprecationLoggingLink',
{
defaultMessage: 'deprecation logging',
}
)}
</EuiLink>
),
}}
/>
),
docLink: i18n.translate('xpack.upgradeAssistant.documentationLinkText', {
defaultMessage: 'Documentation',
}),
};

interface Props {
Expand Down Expand Up @@ -104,7 +110,7 @@ export const DeprecationsOverview: FunctionComponent<Props> = ({ history }) => {
<EuiPageContentBody>
<>
<EuiText data-test-subj="overviewDetail" grow={false}>
<p>{i18nTexts.getPageDescription(`${nextMajor}.x`)}</p>
<p>{i18nTexts.pageDescription}</p>
</EuiText>

<EuiSpacer />
Expand All @@ -114,6 +120,7 @@ export const DeprecationsOverview: FunctionComponent<Props> = ({ history }) => {

<EuiSpacer size="xl" />

{/* Deprecation stats */}
<EuiFlexGroup>
<EuiFlexItem>
<ESDeprecationStats history={history} />
Expand All @@ -126,14 +133,27 @@ export const DeprecationsOverview: FunctionComponent<Props> = ({ history }) => {

<EuiSpacer />

<EuiFormRow
helpText={i18nTexts.getDeprecationLoggingLabel(
docLinks.links.elasticsearch.deprecationLogging
)}
data-test-subj="deprecationLoggingFormRow"
>
<DeprecationLoggingToggle />
</EuiFormRow>
{/* Deprecation logging */}
<EuiFlexGroup>
<EuiFlexItem>
<EuiTitle size="s">
<h2>{i18nTexts.deprecationLoggingTitle}</h2>
</EuiTitle>

<EuiText>
<p>
{i18nTexts.getDeprecationLoggingDescription(
`${nextMajor}.x`,
docLinks.links.elasticsearch.deprecationLogging
)}
</p>
</EuiText>

<EuiSpacer size="m" />

<DeprecationLoggingToggle />
</EuiFlexItem>
</EuiFlexGroup>
</>
</EuiPageContentBody>
</EuiPageContent>
Expand Down
Loading

0 comments on commit a2a8cdc

Please sign in to comment.