github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-25 02:09:32 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Upgrade Assistant] Improve flyout information architecture (#111713)

Browse source 
* Make sure longstrings inside flyout body are text-wrap

* Show resolved badge for reindex flyout and row

* Finish off rest of ES deprecation flyouts

* Refactor deprecation badge into its own component

* Add tests for kibana deprecations

* Add tests for es deprecations

* Also check that we have status=error before rendering error callout

* Check for non-complete states instead of just error

* Small refactor

* Default deprecation is not resolvable

* Add a bit more spacing between title and badge

* Address CR changes

* Use EuiSpacer instead of flexitems
This commit is contained in:
Ignacio Rivas 2021-09-15 12:31:41 +02:00 • committed by GitHub
parent a49c70bdf7
commit 70f2677213
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 171 additions and 143 deletions
Download patch file Download diff file Expand all files Collapse all files

1
x-pack/plugins/translations/translations/ja-JP.json
View file

@ -25845,7 +25845,6 @@
"xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.backgroundResumeDetail": "再インデックスはバックグラウンドで継続しますが、Kibana がシャットダウンまたは再起動した場合、このページに戻り再インデックスを再開させる必要があります。",
"xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.calloutTitle": "インデックスは再インデックス中にドキュメントを投入、更新、または削除できません",
"xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.cantStopDetail": "ドキュメントの更新を停止できない場合、または新しいクラスターに再インデックスする必要がある場合は、異なるアップグレード方法をお勧めします。",
"xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.doneLabel": "完了！",
"xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.reindexingLabel": "再インデックス中…",
"xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.resumeLabel": "再開",
"xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.runReindexLabel": "再インデックスを実行",

1
x-pack/plugins/translations/translations/zh-CN.json
View file

@ -26280,7 +26280,6 @@
"xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.backgroundResumeDetail": "重新索引将在后台继续，但如果 Kibana 关闭或重新启动，您将需要返回此页，才能恢复重新索引。",
"xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.calloutTitle": "在重新索引时，索引无法采集、更新或删除文档",
"xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.cantStopDetail": "如果您无法停止文档更新或需要重新索引到新的集群中，请考虑使用不同的升级策略。",
"xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.doneLabel": "已完成！",
"xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.reindexingLabel": "正在重新索引……",
"xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.resumeLabel": "恢复",
"xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.runReindexLabel": "运行重新索引",

6
x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/index_settings_deprecation_flyout.test.ts
View file

@ -47,12 +47,14 @@ describe('Index settings deprecation flyout', () => {
});
it('removes deprecated index settings', async () => {
const { find, actions } = testBed;
const { find, actions, exists } = testBed;
httpRequestsMockHelpers.setUpdateIndexSettingsResponse({
acknowledged: true,
});
expect(exists('indexSettingsDetails.warningDeprecationBadge')).toBe(true);
await actions.indexSettingsDeprecationFlyout.clickDeleteSettingsButton();
const request = server.requests[server.requests.length - 1];
@ -75,6 +77,8 @@ describe('Index settings deprecation flyout', () => {
expect(find('removeSettingsPrompt').length).toEqual(0);
// Verify the action button no longer displays
expect(find('indexSettingsDetails.deleteSettingsButton').length).toEqual(0);
// Verify the badge got marked as resolved
expect(exists('indexSettingsDetails.resolvedDeprecationBadge')).toBe(true);
});
it('handles failure', async () => {

24
x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/ml_snapshots_deprecation_flyout.test.ts
View file

@ -48,7 +48,7 @@ describe('Machine learning deprecation flyout', () => {
describe('upgrade snapshots', () => {
it('successfully upgrades snapshots', async () => {
const { find, actions } = testBed;
const { find, actions, exists } = testBed;
httpRequestsMockHelpers.setUpgradeMlSnapshotResponse({
nodeId: 'my_node',
@ -64,6 +64,7 @@ describe('Machine learning deprecation flyout', () => {
status: 'complete',
});
expect(exists('mlSnapshotDetails.criticalDeprecationBadge')).toBe(true);
expect(find('mlSnapshotDetails.upgradeSnapshotButton').text()).toEqual('Upgrade');
await actions.mlDeprecationFlyout.clickUpgradeSnapshot();
@ -86,10 +87,11 @@ describe('Machine learning deprecation flyout', () => {
// Reopen the flyout
await actions.table.clickDeprecationRowAt('mlSnapshot', 0);
// Flyout actions should be disabled if deprecation was resolved
expect(find('mlSnapshotDetails.upgradeSnapshotButton').props().disabled).toBe(true);
expect(find('mlSnapshotDetails.upgradeSnapshotButton').text()).toContain('Upgrade complete');
expect(find('mlSnapshotDetails.deleteSnapshotButton').props().disabled).toBe(true);
// Flyout actions should be hidden if deprecation was resolved
expect(exists('mlSnapshotDetails.upgradeSnapshotButton')).toBe(false);
expect(exists('mlSnapshotDetails.deleteSnapshotButton')).toBe(false);
// Badge should be updated in flyout title
expect(exists('mlSnapshotDetails.resolvedDeprecationBadge')).toBe(true);
});
it('handles upgrade failure', async () => {
@ -133,12 +135,13 @@ describe('Machine learning deprecation flyout', () => {
describe('delete snapshots', () => {
it('successfully deletes snapshots', async () => {
const { find, actions } = testBed;
const { find, actions, exists } = testBed;
httpRequestsMockHelpers.setDeleteMlSnapshotResponse({
acknowledged: true,
});
expect(exists('mlSnapshotDetails.criticalDeprecationBadge')).toBe(true);
expect(find('mlSnapshotDetails.deleteSnapshotButton').text()).toEqual('Delete');
await actions.mlDeprecationFlyout.clickDeleteSnapshot();
@ -158,10 +161,11 @@ describe('Machine learning deprecation flyout', () => {
// Reopen the flyout
await actions.table.clickDeprecationRowAt('mlSnapshot', 0);
// Flyout actions should be disabled if deprecation was resolved
expect(find('mlSnapshotDetails.deleteSnapshotButton').props().disabled).toBe(true);
expect(find('mlSnapshotDetails.deleteSnapshotButton').text()).toContain('Deletion complete');
expect(find('mlSnapshotDetails.upgradeSnapshotButton').props().disabled).toBe(true);
// Flyout actions should be hidden if deprecation was resolved
expect(exists('mlSnapshotDetails.upgradeSnapshotButton')).toBe(false);
expect(exists('mlSnapshotDetails.deleteSnapshotButton')).toBe(false);
// Badge should be updated in flyout title
expect(exists('mlSnapshotDetails.resolvedDeprecationBadge')).toBe(true);
});
it('handles delete failure', async () => {

10
x-pack/plugins/upgrade_assistant/__jest__/client_integration/kibana_deprecations/deprecation_details_flyout.test.ts
View file

@ -47,6 +47,7 @@ describe('Kibana deprecation details flyout', () => {
await actions.table.clickDeprecationAt(1);
expect(exists('kibanaDeprecationDetails')).toBe(true);
expect(exists('kibanaDeprecationDetails.warningDeprecationBadge')).toBe(true);
expect(find('kibanaDeprecationDetails.flyoutTitle').text()).toBe(manualDeprecation.title);
expect(find('manualStepsList').find('li').length).toEqual(
manualDeprecation.correctiveActions.manualSteps.length
@ -66,6 +67,7 @@ describe('Kibana deprecation details flyout', () => {
await actions.table.clickDeprecationAt(0);
expect(exists('kibanaDeprecationDetails')).toBe(true);
expect(exists('kibanaDeprecationDetails.criticalDeprecationBadge')).toBe(true);
expect(find('kibanaDeprecationDetails.flyoutTitle').text()).toBe(
quickResolveDeprecation.title
);
@ -87,8 +89,9 @@ describe('Kibana deprecation details flyout', () => {
// Resolve information should not display and Quick resolve button should be disabled
expect(exists('resolveSection')).toBe(false);
expect(find('resolveButton').props().disabled).toBe(true);
expect(find('resolveButton').text()).toContain('Resolved');
expect(exists('resolveButton')).toBe(false);
// Badge should be updated in flyout title
expect(exists('kibanaDeprecationDetails.resolvedDeprecationBadge')).toBe(true);
});
test('handles resolve failure', async () => {
@ -103,6 +106,7 @@ describe('Kibana deprecation details flyout', () => {
await actions.table.clickDeprecationAt(0);
expect(exists('kibanaDeprecationDetails')).toBe(true);
expect(exists('kibanaDeprecationDetails.criticalDeprecationBadge')).toBe(true);
expect(find('kibanaDeprecationDetails.flyoutTitle').text()).toBe(
quickResolveDeprecation.title
);
@ -123,6 +127,8 @@ describe('Kibana deprecation details flyout', () => {
expect(exists('quickResolveError')).toBe(true);
// Resolve information should display and Quick resolve button should be enabled
expect(exists('resolveSection')).toBe(true);
// Badge should remain the same
expect(exists('kibanaDeprecationDetails.criticalDeprecationBadge')).toBe(true);
expect(find('resolveButton').props().disabled).toBe(false);
expect(find('resolveButton').text()).toContain('Try again');
});

8
x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/default/flyout.tsx
View file

@ -18,9 +18,11 @@ import {
EuiText,
EuiTextColor,
EuiLink,
EuiSpacer,
} from '@elastic/eui';
import { EnrichedDeprecationInfo } from '../../../../../../common/types';
import { DeprecationBadge } from '../../../shared';
export interface DefaultDeprecationFlyoutProps {
deprecation: EnrichedDeprecationInfo;
@ -61,10 +63,10 @@ export const DefaultDeprecationFlyout = ({
return (
<>
<EuiFlyoutHeader hasBorder>
<DeprecationBadge isCritical={deprecation.isCritical} isResolved={false} />
<EuiSpacer size="s" />
<EuiTitle size="s" data-test-subj="flyoutTitle">
<h2 id="defaultDeprecationDetailsFlyoutTitle" className="eui-textBreakWord">
{message}
</h2>
<h2 id="defaultDeprecationDetailsFlyoutTitle">{message}</h2>
</EuiTitle>
{index && (
<EuiText data-test-subj="flyoutDescription">

3
x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/default/table_row.tsx
View file

@ -44,6 +44,7 @@ export const DefaultTableRow: React.FunctionComponent<Props> = ({ rowFieldNames,
},
flyoutProps: {
onClose: closeFlyout,
className: 'eui-textBreakWord',
'data-test-subj': 'defaultDeprecationDetails',
'aria-labelledby': 'defaultDeprecationDetailsFlyoutTitle',
},
@ -62,8 +63,8 @@ export const DefaultTableRow: React.FunctionComponent<Props> = ({ rowFieldNames,
>
<EsDeprecationsTableCells
fieldName={field}
openFlyout={() => setShowFlyout(true)}
deprecation={deprecation}
openFlyout={() => setShowFlyout(true)}
/>
</EuiTableRowCell>
);

6
x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/index_settings/flyout.tsx
View file

@ -26,6 +26,7 @@ import {
import { EnrichedDeprecationInfo, IndexSettingAction } from '../../../../../../common/types';
import type { ResponseError } from '../../../../lib/api';
import type { Status } from '../../../types';
import { DeprecationBadge } from '../../../shared';
export interface RemoveIndexSettingsFlyoutProps {
deprecation: EnrichedDeprecationInfo;
@ -109,6 +110,11 @@ export const RemoveIndexSettingsFlyout = ({
return (
<>
<EuiFlyoutHeader hasBorder>
<DeprecationBadge
isCritical={deprecation.isCritical}
isResolved={statusType === 'complete'}
/>
<EuiSpacer size="s" />
<EuiTitle size="s" data-test-subj="flyoutTitle">
<h2 id="indexSettingsDetailsFlyoutTitle">{message}</h2>
</EuiTitle>

1
x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/index_settings/table_row.tsx
View file

@ -75,6 +75,7 @@ export const IndexSettingsTableRow: React.FunctionComponent<Props> = ({
},
flyoutProps: {
onClose: closeFlyout,
className: 'eui-textBreakWord',
'data-test-subj': 'indexSettingsDetails',
'aria-labelledby': 'indexSettingsDetailsFlyoutTitle',
},

33
x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/ml_snapshots/flyout.tsx
View file

@ -24,6 +24,7 @@ import {
} from '@elastic/eui';
import { EnrichedDeprecationInfo } from '../../../../../../common/types';
import { DeprecationBadge } from '../../../shared';
import { MlSnapshotContext } from './context';
import { SnapshotState } from './use_snapshot_state';
@ -51,12 +52,6 @@ const i18nTexts = {
defaultMessage: 'Retry upgrade',
}
),
upgradeResolvedButtonLabel: i18n.translate(
'xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.deleteResolvupgradeResolvedButtonLabeledButtonLabel',
{
defaultMessage: 'Upgrade complete',
}
),
closeButtonLabel: i18n.translate(
'xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.closeButtonLabel',
{
@ -75,12 +70,6 @@ const i18nTexts = {
defaultMessage: 'Deleting…',
}
),
deleteResolvedButtonLabel: i18n.translate(
'xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.deleteResolvedButtonLabel',
{
defaultMessage: 'Deletion complete',
}
),
retryDeleteButtonLabel: i18n.translate(
'xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.retryDeleteButtonLabel',
{
@ -119,8 +108,6 @@ const getDeleteButtonLabel = (snapshotState: SnapshotState) => {
switch (snapshotState.status) {
case 'in_progress':
return i18nTexts.deletingButtonLabel;
case 'complete':
return i18nTexts.deleteResolvedButtonLabel;
case 'idle':
default:
return i18nTexts.deleteButtonLabel;
@ -138,8 +125,6 @@ const getUpgradeButtonLabel = (snapshotState: SnapshotState) => {
switch (snapshotState.status) {
case 'in_progress':
return i18nTexts.upgradingButtonLabel;
case 'complete':
return i18nTexts.upgradeResolvedButtonLabel;
case 'idle':
default:
return i18nTexts.upgradeButtonLabel;
@ -155,6 +140,8 @@ export const FixSnapshotsFlyout = ({
upgradeSnapshot,
deleteSnapshot,
}: FixSnapshotsFlyoutProps) => {
const isResolved = snapshotState.status === 'complete';
const onUpgradeSnapshot = () => {
upgradeSnapshot();
closeFlyout();
@ -168,12 +155,14 @@ export const FixSnapshotsFlyout = ({
return (
<>
<EuiFlyoutHeader hasBorder>
<DeprecationBadge isCritical={deprecation.isCritical} isResolved={isResolved} />
<EuiSpacer size="s" />
<EuiTitle size="s" data-test-subj="flyoutTitle">
<h2 id="mlSnapshotDetailsFlyoutTitle">{i18nTexts.flyoutTitle}</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
{snapshotState.error && (
{snapshotState.error && !isResolved && (
<>
<EuiCallOut
title={
@ -207,6 +196,7 @@ export const FixSnapshotsFlyout = ({
</EuiButtonEmpty>
</EuiFlexItem>
{!isResolved && (
<EuiFlexItem grow={false}>
<EuiFlexGroup>
<EuiFlexItem>
@ -217,9 +207,7 @@ export const FixSnapshotsFlyout = ({
isLoading={
snapshotState.action === 'delete' && snapshotState.status === 'in_progress'
}
disabled={
snapshotState.status === 'in_progress' || snapshotState.status === 'complete'
}
isDisabled={snapshotState.status === 'in_progress'}
>
{getDeleteButtonLabel(snapshotState)}
</EuiButtonEmpty>
@ -231,9 +219,7 @@ export const FixSnapshotsFlyout = ({
isLoading={
snapshotState.action === 'upgrade' && snapshotState.status === 'in_progress'
}
disabled={
snapshotState.status === 'in_progress' || snapshotState.status === 'complete'
}
isDisabled={snapshotState.status === 'in_progress'}
data-test-subj="upgradeSnapshotButton"
>
{getUpgradeButtonLabel(snapshotState)}
@ -241,6 +227,7 @@ export const FixSnapshotsFlyout = ({
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
)}
</EuiFlexGroup>
</EuiFlyoutFooter>
</>

1
x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/ml_snapshots/table_row.tsx
View file

@ -52,6 +52,7 @@ export const MlSnapshotsTableRowCells: React.FunctionComponent<TableRowProps> =
},
flyoutProps: {
onClose: closeFlyout,
className: 'eui-textBreakWord',
'data-test-subj': 'mlSnapshotDetails',
'aria-labelledby': 'mlSnapshotDetailsFlyoutTitle',
},

11
x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/checklist_step.tsx
View file

@ -41,13 +41,6 @@ const buttonLabel = (status?: ReindexStatus) => {
defaultMessage="Reindexing…"
/>
);
case ReindexStatus.completed:
return (
<FormattedMessage
id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.doneLabel"
defaultMessage="Resolved"
/>
);
case ReindexStatus.paused:
return (
<FormattedMessage
@ -143,6 +136,7 @@ export const ChecklistFlyoutStep: React.FunctionComponent<{
/>
</EuiButtonEmpty>
</EuiFlexItem>
{status !== ReindexStatus.completed && (
<EuiFlexItem grow={false}>
<EuiButton
fill
@ -150,11 +144,12 @@ export const ChecklistFlyoutStep: React.FunctionComponent<{
iconType={status === ReindexStatus.paused ? 'play' : undefined}
onClick={startReindex}
isLoading={loading}
disabled={loading || status === ReindexStatus.completed || !hasRequiredPrivileges}
disabled={loading || !hasRequiredPrivileges}
>
{buttonLabel(status)}
</EuiButton>
</EuiFlexItem>
)}
</EuiFlexGroup>
</EuiFlyoutFooter>
</Fragment>

6
x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/container.tsx
View file

@ -21,6 +21,7 @@ import { useAppContext } from '../../../../../app_context';
import type { ReindexStateContext } from '../context';
import { ChecklistFlyoutStep } from './checklist_step';
import { WarningsFlyoutStep } from './warnings_step';
import { DeprecationBadge } from '../../../../shared';
enum ReindexFlyoutStep {
reindexWarnings,
@ -130,6 +131,11 @@ export const ReindexFlyout: React.FunctionComponent<ReindexFlyoutProps> = ({
return (
<>
<EuiFlyoutHeader hasBorder>
<DeprecationBadge
isCritical={deprecation.isCritical}
isResolved={reindexState.status === ReindexStatus.completed}
/>
<EuiSpacer size="s" />
<EuiTitle size="s" data-test-subj="flyoutTitle">
<h2 id="reindexDetailsFlyoutTitle">
<FormattedMessage

1
x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/table_row.tsx
View file

@ -56,6 +56,7 @@ const ReindexTableRowCells: React.FunctionComponent<TableRowProps> = ({
},
flyoutProps: {
onClose: closeFlyout,
className: 'eui-textBreakWord',
'data-test-subj': 'reindexDetails',
'aria-labelledby': 'reindexDetailsFlyoutTitle',
},

21
x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/es_deprecations_table_cells.tsx
View file

@ -7,10 +7,11 @@
import React from 'react';
import { i18n } from '@kbn/i18n';
import { EuiBadge, EuiLink, EuiText, EuiToolTip } from '@elastic/eui';
import { EuiLink, EuiText, EuiToolTip } from '@elastic/eui';
import { EnrichedDeprecationInfo } from '../../../../common/types';
import { DEPRECATION_TYPE_MAP } from '../constants';
import { DeprecationTableColumns } from '../types';
import { DeprecationBadge } from '../shared';
interface Props {
resolutionTableCell?: React.ReactNode;
@ -20,18 +21,6 @@ interface Props {
}
const i18nTexts = {
criticalBadgeLabel: i18n.translate(
'xpack.upgradeAssistant.esDeprecations.defaultDeprecation.criticalBadgeLabel',
{
defaultMessage: 'Critical',
}
),
warningBadgeLabel: i18n.translate(
'xpack.upgradeAssistant.esDeprecations.defaultDeprecation.warningBadgeLabel',
{
defaultMessage: 'Warning',
}
),
manualCellLabel: i18n.translate(
'xpack.upgradeAssistant.esDeprecations.defaultDeprecation.manualCellLabel',
{
@ -54,11 +43,7 @@ export const EsDeprecationsTableCells: React.FunctionComponent<Props> = ({
}) => {
// "Status column"
if (fieldName === 'isCritical') {
if (deprecation.isCritical === true) {
return <EuiBadge color="danger">{i18nTexts.criticalBadgeLabel}</EuiBadge>;
}
return <EuiBadge color="default">{i18nTexts.warningBadgeLabel}</EuiBadge>;
return <DeprecationBadge isCritical={deprecation.isCritical} />;
}
// "Issue" column

18
x-pack/plugins/upgrade_assistant/public/application/components/kibana_deprecations/deprecation_details_flyout.tsx
View file

@ -25,6 +25,7 @@ import {
} from '@elastic/eui';
import type { DeprecationResolutionState, KibanaDeprecationDetails } from './kibana_deprecations';
import { DeprecationBadge } from '../shared';
import './_deprecation_details_flyout.scss';
@ -130,12 +131,18 @@ export const DeprecationDetailsFlyout = ({
deprecationResolutionState,
}: DeprecationDetailsFlyoutProps) => {
const { documentationUrl, message, correctiveActions, title } = deprecation;
const isCurrent = deprecationResolutionState?.id === deprecation.id;
const isResolved = isCurrent && deprecationResolutionState?.resolveDeprecationStatus === 'ok';
return (
<>
<EuiFlyoutHeader hasBorder>
<DeprecationBadge isCritical={deprecation.level === 'critical'} isResolved={isResolved} />
<EuiSpacer size="s" />
<EuiTitle size="s" data-test-subj="flyoutTitle">
<h2 id="kibanaDeprecationDetailsFlyoutTitle">{title}</h2>
<h2 id="kibanaDeprecationDetailsFlyoutTitle" className="eui-textBreakWord">
{title}
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
@ -154,7 +161,7 @@ export const DeprecationDetailsFlyout = ({
)}
<EuiText>
<p>{message}</p>
<p className="eui-textBreakWord">{message}</p>
{documentationUrl && (
<p>
@ -168,7 +175,7 @@ export const DeprecationDetailsFlyout = ({
<EuiSpacer />
{/* Hide resolution steps if already resolved */}
{deprecationResolutionState?.resolveDeprecationStatus !== 'ok' && (
{!isResolved && (
<div data-test-subj="resolveSection">
{correctiveActions.api && (
<>
@ -212,8 +219,8 @@ export const DeprecationDetailsFlyout = ({
</EuiButtonEmpty>
</EuiFlexItem>
{/* Only show the "Quick resolve" button if deprecation supports it */}
{correctiveActions.api && (
{/* Only show the "Quick resolve" button if deprecation supports it and deprecation is not yet resolved */}
{correctiveActions.api && !isResolved && (
<EuiFlexItem grow={false}>
<EuiButton
fill
@ -222,7 +229,6 @@ export const DeprecationDetailsFlyout = ({
isLoading={Boolean(
deprecationResolutionState?.resolveDeprecationStatus === 'in_progress'
)}
disabled={Boolean(deprecationResolutionState?.resolveDeprecationStatus === 'ok')}
>
{getQuickResolveButtonLabel(deprecationResolutionState)}
</EuiButton>

33
x-pack/plugins/upgrade_assistant/public/application/components/kibana_deprecations/kibana_deprecations_table.tsx
View file

@ -6,18 +6,12 @@
*/
import React from 'react';
import { i18n } from '@kbn/i18n';
import {
EuiInMemoryTable,
EuiBasicTableColumn,
EuiButton,
EuiLink,
EuiBadge,
Search,
} from '@elastic/eui';
import { EuiInMemoryTable, EuiBasicTableColumn, EuiButton, EuiLink, Search } from '@elastic/eui';
import { PAGINATION_CONFIG } from '../constants';
import type { DeprecationResolutionState, KibanaDeprecationDetails } from './kibana_deprecations';
import { ResolutionTableCell } from './resolution_table_cell';
import { DeprecationBadge } from '../shared';
const i18nTexts = {
refreshButtonLabel: i18n.translate(
@ -80,18 +74,6 @@ const i18nTexts = {
defaultMessage: 'Critical',
}
),
criticalBadgeLabel: i18n.translate(
'xpack.upgradeAssistant.kibanaDeprecations.table.criticalBadgeLabel',
{
defaultMessage: 'critical',
}
),
warningBadgeLabel: i18n.translate(
'xpack.upgradeAssistant.kibanaDeprecations.table.warningBadgeLabel',
{
defaultMessage: 'warning',
}
),
searchPlaceholderLabel: i18n.translate(
'xpack.upgradeAssistant.kibanaDeprecations.table.searchPlaceholderLabel',
{
@ -121,16 +103,7 @@ export const KibanaDeprecationsTable: React.FunctionComponent<Props> = ({
truncateText: true,
sortable: true,
render: (level: KibanaDeprecationDetails['level']) => {
switch (level) {
case 'critical':
return <EuiBadge color="danger">{i18nTexts.criticalBadgeLabel}</EuiBadge>;
case 'warning':
return <EuiBadge color="default">{i18nTexts.warningBadgeLabel}</EuiBadge>;
default:
return <>{''}</>;
}
return <DeprecationBadge isCritical={level === 'critical'} />;
},
},
{

51
x-pack/plugins/upgrade_assistant/public/application/components/shared/deprecation_badge.tsx Normal file
View file

@ -0,0 +1,51 @@
/*
* 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 } from 'react';
import { i18n } from '@kbn/i18n';
import { EuiBadge } from '@elastic/eui';
const i18nTexts = {
criticalBadgeLabel: i18n.translate('xpack.upgradeAssistant.deprecationBadge.criticalBadgeLabel', {
defaultMessage: 'Critical',
}),
resolvedBadgeLabel: i18n.translate('xpack.upgradeAssistant.deprecationBadge.resolvedBadgeLabel', {
defaultMessage: 'Resolved',
}),
warningBadgeLabel: i18n.translate('xpack.upgradeAssistant.deprecationBadge.warningBadgeLabel', {
defaultMessage: 'Warning',
}),
};
interface Props {
isCritical: boolean;
isResolved?: boolean;
}
export const DeprecationBadge: FunctionComponent<Props> = ({ isCritical, isResolved }) => {
if (isResolved) {
return (
<EuiBadge color="success" data-test-subj="resolvedDeprecationBadge">
{i18nTexts.resolvedBadgeLabel}
</EuiBadge>
);
}
if (isCritical) {
return (
<EuiBadge color="danger" data-test-subj="criticalDeprecationBadge">
{i18nTexts.criticalBadgeLabel}
</EuiBadge>
);
}
return (
<EuiBadge color="default" data-test-subj="warningDeprecationBadge">
{i18nTexts.warningBadgeLabel}
</EuiBadge>
);
};

1
x-pack/plugins/upgrade_assistant/public/application/components/shared/index.ts
View file

@ -7,3 +7,4 @@
export { NoDeprecationsPrompt } from './no_deprecations';
export { DeprecationCount } from './deprecation_count';
export { DeprecationBadge } from './deprecation_badge';