From 6c815fe13341bf21e928c4f4fcdc137a42a2f890 Mon Sep 17 00:00:00 2001 From: Sandeep Kumawat <2025sandeepkumawat@gmail.com> Date: Mon, 2 Sep 2024 21:41:20 +0530 Subject: [PATCH] Fit and Finish Changes for Snapshot Management Pages (#1157) * Fit and Finish Changes for Snapshot Management Pages Signed-off-by: Sandeep Kumawat * Fixes Signed-off-by: Sandeep Kumawat * incorporate ux feedback Signed-off-by: Sandeep Kumawat --------- Signed-off-by: Sandeep Kumawat Co-authored-by: Sandeep Kumawat --- public/components/CustomLabel/CustomLabel.tsx | 32 ++-- .../SnapshotAdvancedSettings.tsx | 23 ++- .../CreateSnapshotPolicy.tsx | 166 +++++++++++------- .../CreateIndexFlyout.test.tsx.snap | 2 +- .../CreateRepositoryFlyout.tsx | 17 +- .../components/DeleteModal/DeleteModal.tsx | 8 +- .../containers/Repositories/Repositories.tsx | 55 ++++-- .../SnapshotPolicies/SnapshotPolicies.tsx | 40 ++--- .../SnapshotPolicyDetails.tsx | 73 +++++--- .../AddPrefixInput.test.tsx.snap | 8 +- .../CreateSnapshotFlyout.tsx | 24 ++- .../components/RenameInput/RenameInput.tsx | 4 +- .../__snapshots__/RenameInput.test.tsx.snap | 4 +- .../RestoreActivitiesPanel.tsx | 67 +++++-- .../RestoreSnapshotFlyout.tsx | 31 +++- .../SnapshotFlyout/SnapshotFlyout.tsx | 16 +- .../SnapshotRenameOptions.tsx | 7 +- .../SnapshotRenameOptions.test.tsx.snap | 20 ++- .../SnapshotRestoreAdvancedOptions.tsx | 4 +- .../SnapshotRestoreOption.tsx | 8 +- .../SnapshotRestoreOption.test.tsx.snap | 20 ++- .../containers/Snapshots/Snapshots.tsx | 111 +++++++----- public/pages/Snapshots/helper.tsx | 10 +- .../components/FlyoutFooter/FlyoutFooter.tsx | 10 +- .../__snapshots__/FlyoutFooter.test.tsx.snap | 2 +- 25 files changed, 492 insertions(+), 270 deletions(-) diff --git a/public/components/CustomLabel/CustomLabel.tsx b/public/components/CustomLabel/CustomLabel.tsx index 61f52bd24..64bd235b3 100644 --- a/public/components/CustomLabel/CustomLabel.tsx +++ b/public/components/CustomLabel/CustomLabel.tsx @@ -7,28 +7,30 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from "@elastic/eui"; import React from "react"; interface CustomLabelProps { - title: string; + title: string | JSX.Element; isOptional?: boolean; helpText?: string | JSX.Element; } const CustomLabel = ({ title, isOptional = false, helpText }: CustomLabelProps) => ( <> - - - -

{title}

- - - - {isOptional ? ( - - - – optional - + {title && typeof title == "string" ? ( + + + {

{title}

} - ) : null} - + + {isOptional ? ( + + + x – optional + + + ) : null} + + ) : ( + title + )} {helpText && typeof helpText === "string" ? {helpText} : helpText} diff --git a/public/pages/CreateSnapshotPolicy/components/SnapshotAdvancedSettings/SnapshotAdvancedSettings.tsx b/public/pages/CreateSnapshotPolicy/components/SnapshotAdvancedSettings/SnapshotAdvancedSettings.tsx index a67bf9683..eebd7696b 100644 --- a/public/pages/CreateSnapshotPolicy/components/SnapshotAdvancedSettings/SnapshotAdvancedSettings.tsx +++ b/public/pages/CreateSnapshotPolicy/components/SnapshotAdvancedSettings/SnapshotAdvancedSettings.tsx @@ -3,9 +3,10 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { EuiCompressedCheckbox, EuiSpacer } from "@elastic/eui"; +import { EuiCompressedCheckbox, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from "@elastic/eui"; import CustomLabel from "../../../../components/CustomLabel"; import React, { ChangeEvent } from "react"; +import { CheckBoxLabel } from "../../../Snapshots/helper"; interface SnapshotAdvancedSettingsProps { includeGlobalState: boolean; @@ -17,6 +18,18 @@ interface SnapshotAdvancedSettingsProps { width?: string; } +const lableTitle = (titleText: string) => { + return ( + + + +

{titleText}

+ + + + ); +}; + const SnapshotAdvancedSettings = ({ includeGlobalState, onIncludeGlobalStateToggle, @@ -26,10 +39,10 @@ const SnapshotAdvancedSettings = ({ onPartialToggle, width, }: SnapshotAdvancedSettingsProps) => ( -
+
} + label={} checked={includeGlobalState} onChange={onIncludeGlobalStateToggle} /> @@ -39,7 +52,7 @@ const SnapshotAdvancedSettings = ({ @@ -52,7 +65,7 @@ const SnapshotAdvancedSettings = ({ } + label={} checked={partial} onChange={onPartialToggle} /> diff --git a/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx b/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx index 7b4a9e6cb..6c2bed828 100644 --- a/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx +++ b/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx @@ -57,6 +57,7 @@ import MDSEnabledComponent from "../../../../components/MDSEnabledComponent"; import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent"; import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services"; import { ExternalLink } from "../../../utils/display-utils"; +import { TopNavControlDescriptionData, TopNavControlLinkData } from "src/plugins/navigation/public"; interface CreateSMPolicyProps extends RouteComponentProps, DataSourceMenuProperties { snapshotManagementService: SnapshotManagementService; @@ -559,13 +560,17 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent - Snapshot policies allow you to define an automated snapshot schedule and retention period.{" "} - - - ), - }, + description: "Snapshot policies allow you to define an automated snapshot schedule and retention period.", + links: { + label: "Learn more", + href: SNAPSHOT_MANAGEMENT_DOCUMENTATION_URL, + iconType: "popout", + iconSide: "right", + controlType: "link", + target: "_blank", + flush: "both", + } as TopNavControlLinkData, + } as TopNavControlDescriptionData, ]; const padding_style = this.state.useNewUX ? { padding: "0px 0px" } : { padding: "5px 50px" }; return ( @@ -574,15 +579,21 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent ) : ( <> - +

{isEdit ? "Edit" : "Create"} policy

- + {subTitleText} )} - + + + +

Policy settings

+ + + - + - + + + +

Source and destination

+ + + - + - + + + +

Snapshot schedule

+ + + - + - + + + +

Retention period

+ + + ) : null} - + - -
- Notify on snapshot activities - - - ) => { - this.setState({ policy: this.setPolicyHelper("notification.conditions.creation", e.target.checked) }); - }} - /> + + + +

Notifications

+ + + + +

Notify on snapshot activities

+ - + + ) => { + this.setState({ policy: this.setPolicyHelper("notification.conditions.creation", e.target.checked) }); + }} + /> - ) => { - this.setState({ policy: this.setPolicyHelper("notification.conditions.deletion", e.target.checked) }); - }} - /> + - + ) => { + this.setState({ policy: this.setPolicyHelper("notification.conditions.deletion", e.target.checked) }); + }} + /> - ) => { - this.setState({ policy: this.setPolicyHelper("notification.conditions.failure", e.target.checked) }); - }} - /> -
+ + + ) => { + this.setState({ policy: this.setPolicyHelper("notification.conditions.failure", e.target.checked) }); + }} + /> {showNotificationChannel ? ( - + <> + + + ) : null} - + {/* Advanced settings */} - - + + - -

+ +

Advanced settings – optional -

- +

+ @@ -890,7 +928,7 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent - + Cancel diff --git a/public/pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap b/public/pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap index 5ff8cf96a..65b709610 100644 --- a/public/pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap +++ b/public/pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap @@ -821,7 +821,7 @@ Object { class="euiFlyoutFooter" >
- + +

Advanced settings

+ + } + > @@ -274,9 +281,11 @@ export class CreateRepositoryFlyout extends MDSEnabledComponent - -

{!!editRepo ? "Edit" : "Create"} repository

- + + +

{!!editRepo ? "Edit" : "Create"} repository

+ + diff --git a/public/pages/Repositories/components/DeleteModal/DeleteModal.tsx b/public/pages/Repositories/components/DeleteModal/DeleteModal.tsx index c848665da..2a4ca9a69 100644 --- a/public/pages/Repositories/components/DeleteModal/DeleteModal.tsx +++ b/public/pages/Repositories/components/DeleteModal/DeleteModal.tsx @@ -4,7 +4,7 @@ */ import React, { ChangeEvent, Component } from "react"; -import { EuiConfirmModal, EuiCompressedFieldText, EuiForm, EuiCompressedFormRow, EuiOverlayMask, EuiSpacer } from "@elastic/eui"; +import { EuiConfirmModal, EuiCompressedFieldText, EuiForm, EuiCompressedFormRow, EuiOverlayMask, EuiSpacer, EuiText } from "@elastic/eui"; interface DeleteModalProps { closeDeleteModal: (event?: any) => void; @@ -41,7 +41,11 @@ export default class DeleteModal extends Component +

Delete {type}

+ + } onCancel={closeDeleteModal} onConfirm={() => { onClickDelete(); diff --git a/public/pages/Repositories/containers/Repositories/Repositories.tsx b/public/pages/Repositories/containers/Repositories/Repositories.tsx index c7142b4b4..9927d5775 100644 --- a/public/pages/Repositories/containers/Repositories/Repositories.tsx +++ b/public/pages/Repositories/containers/Repositories/Repositories.tsx @@ -12,6 +12,7 @@ import { EuiText, EuiTextColor, EuiButtonIcon, + EuiPanel, } from "@elastic/eui"; import { getErrorMessage } from "../../../../utils/helpers"; import React, { Component, useContext } from "react"; @@ -29,6 +30,7 @@ import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../ser import MDSEnabledComponent from "../../../../components/MDSEnabledComponent"; import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent"; import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services"; +import { TopNavControlDescriptionData } from "src/plugins/navigation/public"; interface RepositoriesProps extends RouteComponentProps, DataSourceMenuProperties { snapshotManagementService: SnapshotManagementService; @@ -289,7 +291,7 @@ export class Repositories extends MDSEnabledComponent - Repositories are remote storage locations used to store snapshots. - - ), - }, + description: "Repositories are remote storage locations used to store snapshots.", + } as TopNavControlDescriptionData, ]; const controlControlsData = [ @@ -339,6 +337,36 @@ export class Repositories extends MDSEnabledComponent { + return !useNewUX ? ( + + this.setState({ selectedItems }) }} + search={search} + loading={loading} + /> + + ) : ( + + this.setState({ selectedItems }) }} + search={search} + loading={loading} + /> + + ); + }; + const { HeaderControl } = getNavigationUI(); const { setAppRightControls, setAppDescriptionControls } = getApplication(); const useTitle = useNewUX @@ -359,18 +387,7 @@ export class Repositories extends MDSEnabledComponent ) : null} - - this.setState({ selectedItems }) }} - search={search} - loading={loading} - /> - + {repositoriesTable()} {showFlyout && ( - Define an automated snapshot schedule and retention period with a snapshot policy.{" "} - - - ), - }, + description: "Define an automated snapshot schedule and retention period with a snapshot policy.", + links: { + label: "Learn more", + href: SNAPSHOT_MANAGEMENT_DOCUMENTATION_URL, + iconType: "popout", + iconSide: "right", + controlType: "link", + target: "_blank", + flush: "both", + } as TopNavControlLinkData, + } as TopNavControlDescriptionData, ]; const controlControlsData = [ @@ -538,11 +545,9 @@ export class SnapshotPolicies extends MDSEnabledComponent { return ( - + {CommonTable()} {CommonModal()} @@ -593,8 +592,8 @@ export class SnapshotPolicies extends MDSEnabledComponent - - + + + {CommonTable()} - + {CommonModal()} ); diff --git a/public/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx b/public/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx index d5031c7d0..eedef193d 100644 --- a/public/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx +++ b/public/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx @@ -21,6 +21,8 @@ import { EuiText, EuiTitle, EuiHealth, + EuiHorizontalRule, + EuiPanel, } from "@elastic/eui"; import { NotificationService, SnapshotManagementService } from "../../../../services"; import { SMMetadata, SMPolicy } from "../../../../../models/interfaces"; @@ -424,9 +426,9 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent - - {_.truncate(policyId)} - + +

{_.truncate(policyId)}

+ @@ -446,7 +448,13 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent )} - + + + +

Policy settings

+ + + {policySettingItems.map((item) => ( @@ -473,11 +481,17 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent - + - + + + +

Snapshot schedule

+ + + {snapshotScheduleItems.map((item) => ( @@ -488,11 +502,17 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent ))} - + - + + + +

Snapshot retention period

+ + + {retentionItems.map((item) => ( @@ -516,11 +536,17 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent )} - + - + + + +

Notifications

+ + + {notificationItems.map((item) => ( @@ -531,21 +557,26 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent ))} - + - this.getPolicy(policyId)} data-test-subj="refreshButton"> - Refresh - - } - > + + + + +

Last creation/deletion

+ + + + this.getPolicy(policyId)} data-test-subj="refreshButton"> + Refresh + + + + - + {isDeleteModalVisible && ( diff --git a/public/pages/Snapshots/components/AddPrefixInput/__snapshots__/AddPrefixInput.test.tsx.snap b/public/pages/Snapshots/components/AddPrefixInput/__snapshots__/AddPrefixInput.test.tsx.snap index 651c664a3..1cd699546 100644 --- a/public/pages/Snapshots/components/AddPrefixInput/__snapshots__/AddPrefixInput.test.tsx.snap +++ b/public/pages/Snapshots/components/AddPrefixInput/__snapshots__/AddPrefixInput.test.tsx.snap @@ -6,17 +6,17 @@ exports[`AddPrefixInput component renders without error 1`] = ` class="euiSpacer euiSpacer--l" />
-

+

Specify prefix for restored index names -

+
diff --git a/public/pages/Snapshots/components/CreateSnapshotFlyout/CreateSnapshotFlyout.tsx b/public/pages/Snapshots/components/CreateSnapshotFlyout/CreateSnapshotFlyout.tsx index 63b2b6545..78e46619d 100644 --- a/public/pages/Snapshots/components/CreateSnapshotFlyout/CreateSnapshotFlyout.tsx +++ b/public/pages/Snapshots/components/CreateSnapshotFlyout/CreateSnapshotFlyout.tsx @@ -213,15 +213,16 @@ export class CreateSnapshotFlyout extends MDSEnabledComponent ({ value: r.id, text: r.id })); + const invalidChar = ["\\", "/", "*", "?", '"', "<", ">", "|", " ", ",", " ", "#"]; return ( - - + +

Create snapshot

- - + + @@ -236,7 +237,11 @@ export class CreateSnapshotFlyout extends MDSEnabledComponent - A valid snapshot name can not contain upper case characters. + + {" "} + A valid snapshot name must not start with _ and must be lowercase. It must not contain any of the following characters:{" "} + {invalidChar.map((char) => `[${char}]`).join(" ")}{" "} + @@ -254,7 +259,14 @@ export class CreateSnapshotFlyout extends MDSEnabledComponent - + +

Advanced options

+ + } + > - +

Rename Pattern

 @@ -44,7 +44,7 @@ const RenameInput = ({ getRenamePattern, getRenameReplacement, showPatternError, const renameLabel = ( <> - +

Rename Replacement

 diff --git a/public/pages/Snapshots/components/RenameInput/__snapshots__/RenameInput.test.tsx.snap b/public/pages/Snapshots/components/RenameInput/__snapshots__/RenameInput.test.tsx.snap index 7c8a2da7e..be4eafba8 100644 --- a/public/pages/Snapshots/components/RenameInput/__snapshots__/RenameInput.test.tsx.snap +++ b/public/pages/Snapshots/components/RenameInput/__snapshots__/RenameInput.test.tsx.snap @@ -17,7 +17,7 @@ exports[`RenameInput component renders without error 1`] = ` for="rename_pattern" >

Rename Pattern @@ -84,7 +84,7 @@ exports[`RenameInput component renders without error 1`] = ` for="rename_replacement" >

Rename Replacement diff --git a/public/pages/Snapshots/components/RestoreActivitiesPanel/RestoreActivitiesPanel.tsx b/public/pages/Snapshots/components/RestoreActivitiesPanel/RestoreActivitiesPanel.tsx index 596203268..007b62962 100644 --- a/public/pages/Snapshots/components/RestoreActivitiesPanel/RestoreActivitiesPanel.tsx +++ b/public/pages/Snapshots/components/RestoreActivitiesPanel/RestoreActivitiesPanel.tsx @@ -3,7 +3,21 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { EuiInMemoryTable, EuiSpacer, EuiLink, EuiFlyout, EuiSmallButton, EuiButtonIcon, EuiEmptyPrompt, EuiHealth } from "@elastic/eui"; +import { + EuiInMemoryTable, + EuiSpacer, + EuiLink, + EuiFlyout, + EuiSmallButton, + EuiButtonIcon, + EuiEmptyPrompt, + EuiHealth, + EuiPanel, + EuiFlexGroup, + EuiText, + EuiFlexItem, + EuiHorizontalRule, +} from "@elastic/eui"; import _ from "lodash"; import React, { useEffect, useContext, useState, useMemo } from "react"; import { SnapshotManagementService } from "../../../../services"; @@ -252,6 +266,39 @@ export const RestoreActivitiesPanel = ({ incremental: true, compressed: true, }, + compressed: true, + }; + + const restoreActivityTable = () => { + return !useNewUX ? ( + + + + ) : ( + + + + +

{title}

+ + + {useActions} + + + + ); }; const oldMessage = There are no restore activities.

} titleSize="s">; @@ -283,23 +330,7 @@ export const RestoreActivitiesPanel = ({ /> )} - - - {useNewUX ? null : ( - <> - - - - - - )} - + {restoreActivityTable()} ); }; diff --git a/public/pages/Snapshots/components/RestoreSnapshotFlyout/RestoreSnapshotFlyout.tsx b/public/pages/Snapshots/components/RestoreSnapshotFlyout/RestoreSnapshotFlyout.tsx index 89ef017f2..b29ae9cf1 100644 --- a/public/pages/Snapshots/components/RestoreSnapshotFlyout/RestoreSnapshotFlyout.tsx +++ b/public/pages/Snapshots/components/RestoreSnapshotFlyout/RestoreSnapshotFlyout.tsx @@ -386,9 +386,11 @@ export class RestoreSnapshotFlyout extends MDSEnabledComponent - -

Restore snapshot

- + + +

Restore snapshot

+ + @@ -396,20 +398,26 @@ export class RestoreSnapshotFlyout extends MDSEnabledComponent -

{snapshot?.snapshot}

+ +

{snapshot?.snapshot}

+ {" "} - {status} + +

{status}

+ - - {snapshot?.indices.length} + + +

{snapshot?.indices.length}

+ @@ -462,7 +470,14 @@ export class RestoreSnapshotFlyout extends MDSEnabledComponent - + +

Advanced options

+ + } + > +
Error details
@@ -116,16 +116,18 @@ export class SnapshotFlyout extends MDSEnabledComponent - -

{snapshot?.snapshot}

- + + +

{snapshot?.snapshot}

+ + {items1.map((item) => ( - +
{item.term}
{item.value}
 @@ -140,7 +142,7 @@ export class SnapshotFlyout extends MDSEnabledComponent {items2.map((item) => ( - +
{item.term}
{item.value}
 @@ -150,7 +152,7 @@ export class SnapshotFlyout extends MDSEnabledComponent - +
Indices
{snapshot?.indices.join(", ")}
 diff --git a/public/pages/Snapshots/components/SnapshotRenameOptions/SnapshotRenameOptions.tsx b/public/pages/Snapshots/components/SnapshotRenameOptions/SnapshotRenameOptions.tsx index 5d850272f..ea3b53ff1 100644 --- a/public/pages/Snapshots/components/SnapshotRenameOptions/SnapshotRenameOptions.tsx +++ b/public/pages/Snapshots/components/SnapshotRenameOptions/SnapshotRenameOptions.tsx @@ -29,11 +29,8 @@ const SnapshotRenameOptions = ({ const { do_not_rename, add_prefix, rename_indices } = RESTORE_OPTIONS; return ( -
-
Rename restored indices
- - - +
+
-
- Rename restored indices -
+
+
+

+ Rename restored indices +

+
+
+
+
-
Custom index settings
+ +
Custom index settings
+

By default, index settings are restored from indices in snapshots. You can choose to diff --git a/public/pages/Snapshots/components/SnapshotRestoreOption/SnapshotRestoreOption.tsx b/public/pages/Snapshots/components/SnapshotRestoreOption/SnapshotRestoreOption.tsx index d8b4390f2..8248cc25a 100644 --- a/public/pages/Snapshots/components/SnapshotRestoreOption/SnapshotRestoreOption.tsx +++ b/public/pages/Snapshots/components/SnapshotRestoreOption/SnapshotRestoreOption.tsx @@ -7,6 +7,7 @@ import React, { ChangeEvent } from "react"; import { EuiCompressedRadio, EuiSpacer } from "@elastic/eui"; import CustomLabel from "../../../../components/CustomLabel"; import { RESTORE_OPTIONS } from "../../../../models/interfaces"; +import { EuiText } from "@opensearch-project/oui"; interface SnapshotRestoreOptionProps { restoreAllIndices: boolean; @@ -26,11 +27,8 @@ const SnapshotRestoreOption = ({ const { restore_all_indices, restore_specific_indices } = RESTORE_OPTIONS; return ( -

-
Specify restore option
- - - +
+
-
- Specify restore option -
+
+
+

+ Specify restore option +

+
+
+
+
{ + onRestore = (success: boolean, response: object = {}) => { const { selectedItems } = this.state; let errorMessage: string | undefined; if (!success) { let optionalMessage = ""; + const errorString = response.error || JSON.stringify(response); - if (error.reason.indexOf("open index with same name") >= 0) { + if (errorString.indexOf("open index with same name") >= 0) { optionalMessage = "You have an index with the same name. Try a different prefix."; } - errorMessage = `${optionalMessage}`; + errorMessage = `${optionalMessage} ${errorString}`; } const toasts = success - ? getToasts("success_restore_toast", errorMessage, selectedItems[0].id, this.onClickTab) + ? getToasts("success_restore_toast", undefined, selectedItems[0].id, this.onClickTab) : getToasts("error_restore_toast", errorMessage, selectedItems[0].id, this.onOpenError); - this.setState({ toasts, error: error }); + this.setState({ toasts, error: response.error }); }; onOpenError = () => { @@ -495,7 +497,7 @@ export class Snapshots extends MDSEnabledComponent Restore , - + Take snapshot , ]; @@ -554,6 +556,7 @@ export class Snapshots extends MDSEnabledComponent - Index snapshots are taken automatically from snapshot policies, or you can initiate manual snapshots to save to a repository.{" "} -

- You can restore indices by selecting a snapshot. - - ), - }, + description: + "Index snapshots are taken automatically from snapshot policies, or you can initiate manual snapshots to save to a repository. You can restore indices by selecting a snapshot.", + } as TopNavControlDescriptionData, ]; + const snapshotTable = () => { + return !useNewUX ? ( + + `${item.repository}:${item.id}`} + columns={this.columns} + pagination={true} + sorting={{ + sort: { + field: "end_epoch", + direction: "desc", + }, + }} + isSelectable={true} + selection={{ onSelectionChange: this.onSelectionChange }} + search={search} + loading={loadingSnapshots} + /> + + ) : ( + + `${item.repository}:${item.id}`} + columns={this.columns} + pagination={true} + sorting={{ + sort: { + field: "end_epoch", + direction: "desc", + }, + }} + isSelectable={true} + selection={{ onSelectionChange: this.onSelectionChange }} + search={search} + loading={loadingSnapshots} + /> + + ); + }; + const { HeaderControl } = getNavigationUI(); const { setAppRightControls, setAppDescriptionControls } = getApplication(); - const showTitle = useNewUX - ? undefined - : ( - -

Snapshots

- - ); + const showTitle = useNewUX ? undefined : ( + +

Snapshots

+ + ); const SnapshotTabName = useNewUX ? "Index snapshots" : "Snapshots"; const useActions = useNewUX ? undefined : actions; const useSubTitle = useNewUX ? undefined : subTitleText; @@ -614,26 +652,7 @@ export class Snapshots extends MDSEnabledComponent )} - {snapshotPanel && ( - - `${item.repository}:${item.id}`} - columns={this.columns} - pagination={true} - sorting={{ - sort: { - field: "end_epoch", - direction: "desc", - }, - }} - isSelectable={true} - selection={{ onSelectionChange: this.onSelectionChange }} - search={search} - loading={loadingSnapshots} - /> - - )} + {snapshotPanel && snapshotTable()} {showFlyout && ( ( <> {title} - - {helpText} - + {helpText ? ( + + {helpText} + + ) : null} ); diff --git a/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx b/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx index 227479a1f..8b0de80a1 100644 --- a/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx +++ b/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx @@ -18,14 +18,20 @@ interface FlyoutFooterProps { } const FlyoutFooter = ({ edit, action, disabledAction = false, onClickCancel, onClickAction, save, restore, text }: FlyoutFooterProps) => ( - + Cancel - + {text ? text : restore ? "Restore snapshot" : !save ? `${edit ? "Edit" : "Add"} ${action}` : save ? "Save" : "Create"} diff --git a/public/pages/VisualCreatePolicy/components/FlyoutFooter/__snapshots__/FlyoutFooter.test.tsx.snap b/public/pages/VisualCreatePolicy/components/FlyoutFooter/__snapshots__/FlyoutFooter.test.tsx.snap index 4e160c81a..c227dabf4 100644 --- a/public/pages/VisualCreatePolicy/components/FlyoutFooter/__snapshots__/FlyoutFooter.test.tsx.snap +++ b/public/pages/VisualCreatePolicy/components/FlyoutFooter/__snapshots__/FlyoutFooter.test.tsx.snap @@ -2,7 +2,7 @@ exports[` spec renders the component 1`] = `