diff --git a/public/components/CustomLabel/CustomLabel.tsx b/public/components/CustomLabel/CustomLabel.tsx
index 61f52bd24..43443b869 100644
--- a/public/components/CustomLabel/CustomLabel.tsx
+++ b/public/components/CustomLabel/CustomLabel.tsx
@@ -7,32 +7,35 @@ 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;
+ checkboxLable?: boolean;
}
-const CustomLabel = ({ title, isOptional = false, helpText }: CustomLabelProps) => (
+const CustomLabel = ({ title, isOptional = false, helpText, checkboxLable = false }: CustomLabelProps) => (
<>
-
-
-
- {title}
-
-
-
- {isOptional ? (
-
-
- – optional
-
+ {title && typeof title == "string" ? (
+
+
+ {checkboxLable ? {title}
: {title}
}
- ) : null}
-
+
+ {isOptional ? (
+
+
+ x – optional
+
+
+ ) : null}
+
+ ) : (
+ title
+ )}
{helpText && typeof helpText === "string" ? {helpText} : helpText}
-
+ {checkboxLable ? null : }
>
);
diff --git a/public/pages/CreateSnapshotPolicy/components/SnapshotAdvancedSettings/SnapshotAdvancedSettings.tsx b/public/pages/CreateSnapshotPolicy/components/SnapshotAdvancedSettings/SnapshotAdvancedSettings.tsx
index a67bf9683..99944e676 100644
--- a/public/pages/CreateSnapshotPolicy/components/SnapshotAdvancedSettings/SnapshotAdvancedSettings.tsx
+++ b/public/pages/CreateSnapshotPolicy/components/SnapshotAdvancedSettings/SnapshotAdvancedSettings.tsx
@@ -3,7 +3,7 @@
* 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";
@@ -17,6 +17,18 @@ interface SnapshotAdvancedSettingsProps {
width?: string;
}
+const lableTitle = (titleText: string) => {
+ return (
+
+
+
+ {titleText}
+
+
+
+ );
+};
+
const SnapshotAdvancedSettings = ({
includeGlobalState,
onIncludeGlobalStateToggle,
@@ -26,10 +38,10 @@ const SnapshotAdvancedSettings = ({
onPartialToggle,
width,
}: SnapshotAdvancedSettingsProps) => (
-
+
}
+ label={
}
checked={includeGlobalState}
onChange={onIncludeGlobalStateToggle}
/>
@@ -42,6 +54,7 @@ const SnapshotAdvancedSettings = ({
}
checked={ignoreUnavailable}
@@ -52,7 +65,13 @@ 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 fc5f23a55..aa9f2cf74 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 (
@@ -582,7 +587,13 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent
)}
-
+
+
+
+ Policy settings
+
+
+
-
+
-
+
+
+
+ Source and destination
+
+
+
-
+
-
+
+
+
+ Snapshot schedule
+
+
+
-
+
-
+
+
+
+ Retention period
+
+
+
- Number of snapshots retained
+ Number of snapshots retained
@@ -726,7 +755,7 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent
- Deletion frequency
+ Deletion frequency
Configure when to check retention conditions and delete snapshots.
@@ -759,62 +788,71 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent
>
) : 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
-
-
+
+
diff --git a/public/pages/PolicyDetails/components/DeleteModal/DeleteModal.tsx b/public/pages/PolicyDetails/components/DeleteModal/DeleteModal.tsx
index 26574fb9d..976ac9632 100644
--- a/public/pages/PolicyDetails/components/DeleteModal/DeleteModal.tsx
+++ b/public/pages/PolicyDetails/components/DeleteModal/DeleteModal.tsx
@@ -4,7 +4,7 @@
*/
import React, { ChangeEvent, Component, Fragment } from "react";
-import { EuiConfirmModal, EuiForm, EuiCompressedFormRow, EuiCompressedFieldText, EuiOverlayMask, EuiSpacer } from "@elastic/eui";
+import { EuiConfirmModal, EuiForm, EuiCompressedFormRow, EuiCompressedFieldText, EuiOverlayMask, EuiSpacer, EuiText } from "@elastic/eui";
interface DeleteModalProps {
policyId: string;
@@ -30,7 +30,11 @@ export default class DeleteModal extends Component
+ Delete policy
+
+ }
onCancel={closeDeleteModal}
onConfirm={onClickDelete}
cancelButtonText="Cancel"
diff --git a/public/pages/PolicyDetails/components/DeleteModal/__snapshots__/DeleteModal.test.tsx.snap b/public/pages/PolicyDetails/components/DeleteModal/__snapshots__/DeleteModal.test.tsx.snap
index 3b72dd09a..166a359ab 100644
--- a/public/pages/PolicyDetails/components/DeleteModal/__snapshots__/DeleteModal.test.tsx.snap
+++ b/public/pages/PolicyDetails/components/DeleteModal/__snapshots__/DeleteModal.test.tsx.snap
@@ -47,7 +47,13 @@ exports[` spec renders the component 1`] = `
class="euiModalHeader__title"
data-test-subj="confirmModalTitleText"
>
- Delete policy
+
+
+ Delete policy
+
+
-
+
+ Advanced settings
+
+ }
+ >
@@ -272,9 +279,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 0ab77b5f2..f31dae634 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 ? undefined : "Repositories";
@@ -353,18 +381,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()}
>
);
diff --git a/public/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx b/public/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx
index d5031c7d0..ff7b44454 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";
@@ -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"
/>
diff --git a/public/pages/Snapshots/components/CreateSnapshotFlyout/CreateSnapshotFlyout.tsx b/public/pages/Snapshots/components/CreateSnapshotFlyout/CreateSnapshotFlyout.tsx
index 63b2b6545..8b93eb477 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(" ")}{" "}
+
diff --git a/public/pages/Snapshots/components/RenameInput/RenameInput.tsx b/public/pages/Snapshots/components/RenameInput/RenameInput.tsx
index 1e38cb97c..94c7dade8 100644
--- a/public/pages/Snapshots/components/RenameInput/RenameInput.tsx
+++ b/public/pages/Snapshots/components/RenameInput/RenameInput.tsx
@@ -30,7 +30,7 @@ const RenameInput = ({ getRenamePattern, getRenameReplacement, showPatternError,
const patternLabel = (
<>
-
+
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"
>