Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Backport 2.x] Fit and Finish Changes for Snapshot Management Pages #1165

Merged
merged 1 commit into from
Sep 3, 2024
Merged

[Backport 2.x] Fit and Finish Changes for Snapshot Management Pages #1165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 17 additions & 15 deletions public/components/CustomLabel/CustomLabel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
<>
<EuiFlexGroup gutterSize="xs">
<EuiFlexItem grow={false}>
<EuiText size="xs">
<h4>{title}</h4>
</EuiText>
</EuiFlexItem>

{isOptional ? (
<EuiFlexItem>
<EuiText size="xs" color="subdued">
<i> – optional</i>
</EuiText>
{title && typeof title == "string" ? (
<EuiFlexGroup gutterSize="xs" alignItems="center">
<EuiFlexItem grow={false}>
<EuiText size="s">{<h3>{title}</h3>}</EuiText>
</EuiFlexItem>
) : null}
</EuiFlexGroup>

{isOptional ? (
<EuiFlexItem>
<EuiText color="subdued">
x<i> – optional</i>
</EuiText>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
) : (
title
)}

{helpText && typeof helpText === "string" ? <span style={{ fontWeight: 200, fontSize: "12px" }}>{helpText}</span> : helpText}

Expand Down
23 changes: 18 additions & 5 deletions ...ges/CreateSnapshotPolicy/components/SnapshotAdvancedSettings/SnapshotAdvancedSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -17,6 +18,18 @@ interface SnapshotAdvancedSettingsProps {
width?: string;
}

const lableTitle = (titleText: string) => {
return (
<EuiFlexGroup gutterSize="xs" alignItems="center">
<EuiFlexItem grow={false}>
<EuiText size="s">
<h4>{titleText}</h4>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
);
};

const SnapshotAdvancedSettings = ({
includeGlobalState,
onIncludeGlobalStateToggle,
Expand All @@ -26,10 +39,10 @@ const SnapshotAdvancedSettings = ({
onPartialToggle,
width,
}: SnapshotAdvancedSettingsProps) => (
<div style={{ padding: "10px 10px", width: width }}>
<div>
<EuiCompressedCheckbox
id="include_global_state"
label={<CustomLabel title="Include cluster state in snapshots" />}
label={<CheckBoxLabel title="Include cluster state in snapshots" />}
checked={includeGlobalState}
onChange={onIncludeGlobalStateToggle}
/>
Expand All @@ -39,7 +52,7 @@ const SnapshotAdvancedSettings = ({
<EuiCompressedCheckbox
id="ignore_unavailable"
label={
<CustomLabel
<CheckBoxLabel
title="Ignore unavailable indices"
helpText="Instead of failing snapshot, ignore any indexes that are unavailable or do not exist."
/>
Expand All @@ -52,7 +65,7 @@ const SnapshotAdvancedSettings = ({

<EuiCompressedCheckbox
id="partial"
label={<CustomLabel title="Allow partial snapshots" helpText="Allow partial snapshots if one or more shards failed to store." />}
label={<CheckBoxLabel title="Allow partial snapshots" helpText="Allow partial snapshots if one or more shards failed to store." />}
checked={partial}
onChange={onPartialToggle}
/>
Expand Down
166 changes: 102 additions & 64 deletions public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -559,13 +560,17 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp

const descriptionData = [
{
renderComponent: (
<EuiText size="s" color="subdued">
Snapshot policies allow you to define an automated snapshot schedule and retention period.{" "}
<ExternalLink href={SNAPSHOT_MANAGEMENT_DOCUMENTATION_URL} />
</EuiText>
),
},
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 (
Expand All @@ -574,15 +579,21 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
<HeaderControl setMountPoint={setAppDescriptionControls} controls={descriptionData} />
) : (
<>
<EuiTitle size="l">
<EuiText size="s">
<h1>{isEdit ? "Edit" : "Create"} policy</h1>
</EuiTitle>
</EuiText>
{subTitleText}
<EuiSpacer />
</>
)}

<ContentPanel title="Policy settings" titleSize="s">
<EuiPanel>
<EuiFlexGroup gutterSize="xs" alignItems="center">
<EuiText size="s">
<h2>Policy settings</h2>
</EuiText>
</EuiFlexGroup>
<EuiHorizontalRule margin={"xs"} />
<CustomLabel title="Policy name" />
<EuiCompressedFormRow isInvalid={!!policyIdError} error={policyIdError}>
<EuiCompressedFieldText
Expand All @@ -605,11 +616,17 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
data-test-subj="description"
/>
</EuiCompressedFormRow>
</ContentPanel>
</EuiPanel>

<EuiSpacer />

<ContentPanel title="Source and destination" titleSize="s">
<EuiPanel>
<EuiFlexGroup gutterSize="xs" alignItems="center">
<EuiText size="s">
<h2>Source and destination</h2>
</EuiText>
</EuiFlexGroup>
<EuiHorizontalRule margin={"xs"} />
<SnapshotIndicesRepoInput
indexOptions={indexOptions}
selectedIndexOptions={selectedIndexOptions}
Expand All @@ -630,11 +647,17 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
snapshotManagementService={this.props.snapshotManagementService}
repoError={repoError}
/>
</ContentPanel>
</EuiPanel>

<EuiSpacer />

<ContentPanel title="Snapshot schedule" titleSize="s">
<EuiPanel>
<EuiFlexGroup gutterSize="xs" alignItems="center">
<EuiText size="s">
<h2>Snapshot schedule</h2>
</EuiText>
</EuiFlexGroup>
<EuiHorizontalRule margin={"xs"} />
<CronSchedule
frequencyTitle="Snapshot frequency"
frequencyType={creationScheduleFrequencyType}
Expand All @@ -657,11 +680,17 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
this.setState({ policy: this.setPolicyHelper("creation.schedule.cron.expression", expression) });
}}
/>
</ContentPanel>
</EuiPanel>

<EuiSpacer />

<ContentPanel title="Retention period" titleSize="s">
<EuiPanel>
<EuiFlexGroup gutterSize="xs" alignItems="center">
<EuiText size="s">
<h2>Retention period</h2>
</EuiText>
</EuiFlexGroup>
<EuiHorizontalRule margin={"xs"} />
<EuiCompressedRadioGroup
options={rententionEnableRadios}
idSelected={deleteConditionEnabled ? "retention_enabled" : "retention_disabled"}
Expand Down Expand Up @@ -759,62 +788,71 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
</EuiAccordion>
</>
) : null}
</ContentPanel>
</EuiPanel>

<EuiSpacer />

<ContentPanel title="Notifications" titleSize="s">
<div style={{ padding: "10px 10px" }}>
<EuiText>Notify on snapshot activities</EuiText>

<EuiSpacer size="s" />
<EuiCompressedCheckbox
id="notification-creation"
label="When a snapshot has been created."
checked={getNotifyCreation(policy)}
onChange={(e: ChangeEvent<HTMLInputElement>) => {
this.setState({ policy: this.setPolicyHelper("notification.conditions.creation", e.target.checked) });
}}
/>
<EuiPanel>
<EuiFlexGroup gutterSize="xs" alignItems="center">
<EuiText size="s">
<h2>Notifications</h2>
</EuiText>
</EuiFlexGroup>
<EuiHorizontalRule margin={"xs"} />
<EuiText size="s">
<h3>Notify on snapshot activities</h3>
</EuiText>

<EuiSpacer size="s" />
<EuiSpacer size="s" />
<EuiCompressedCheckbox
id="notification-creation"
label="When a snapshot has been created."
checked={getNotifyCreation(policy)}
onChange={(e: ChangeEvent<HTMLInputElement>) => {
this.setState({ policy: this.setPolicyHelper("notification.conditions.creation", e.target.checked) });
}}
/>

<EuiCompressedCheckbox
id="notification-deletion"
label="When a snapshots has been deleted."
checked={getNotifyDeletion(policy)}
onChange={(e: ChangeEvent<HTMLInputElement>) => {
this.setState({ policy: this.setPolicyHelper("notification.conditions.deletion", e.target.checked) });
}}
/>
<EuiSpacer size="s" />

<EuiSpacer size="s" />
<EuiCompressedCheckbox
id="notification-deletion"
label="When a snapshots has been deleted."
checked={getNotifyDeletion(policy)}
onChange={(e: ChangeEvent<HTMLInputElement>) => {
this.setState({ policy: this.setPolicyHelper("notification.conditions.deletion", e.target.checked) });
}}
/>

<EuiCompressedCheckbox
id="notification-failure"
label="When a snapshot has failed."
checked={getNotifyFailure(policy)}
onChange={(e: ChangeEvent<HTMLInputElement>) => {
this.setState({ policy: this.setPolicyHelper("notification.conditions.failure", e.target.checked) });
}}
/>
</div>
<EuiSpacer size="s" />

<EuiCompressedCheckbox
id="notification-failure"
label="When a snapshot has failed."
checked={getNotifyFailure(policy)}
onChange={(e: ChangeEvent<HTMLInputElement>) => {
this.setState({ policy: this.setPolicyHelper("notification.conditions.failure", e.target.checked) });
}}
/>
{showNotificationChannel ? (
<Notification
channelId={_.get(policy, "notification.channel.id") || ""}
channels={channels}
loadingChannels={loadingChannels}
onChangeChannelId={this.onChangeChannelId}
getChannels={this.getChannels}
/>
<>
<EuiSpacer size="s" />
<Notification
channelId={_.get(policy, "notification.channel.id") || ""}
channels={channels}
loadingChannels={loadingChannels}
onChangeChannelId={this.onChangeChannelId}
getChannels={this.getChannels}
/>
</>
) : null}
</ContentPanel>
</EuiPanel>

<EuiSpacer />

{/* Advanced settings */}
<EuiPanel style={{ paddingLeft: "0px", paddingRight: "0px" }}>
<EuiFlexGroup style={{ padding: "0px 10px" }} justifyContent="flexStart" alignItems="center" gutterSize="none">
<EuiPanel>
<EuiFlexGroup justifyContent="flexStart" alignItems="center" gutterSize="none">
<EuiFlexItem grow={false}>
<EuiSmallButtonIcon
iconType={advancedSettingsOpen ? "arrowDown" : "arrowRight"}
Expand All @@ -826,11 +864,11 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiTitle size="s">
<h1>
<EuiText size="s">
<h2>
Advanced settings <i>– optional</i>
</h1>
</EuiTitle>
</h2>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>

Expand Down Expand Up @@ -890,7 +928,7 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp

<EuiSpacer />

<EuiFlexGroup justifyContent="flexEnd">
<EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiSmallButtonEmpty onClick={this.onClickCancel}>Cancel</EuiSmallButtonEmpty>
</EuiFlexItem>
Expand Down
2 changes: 1 addition & 1 deletion .../pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -821,7 +821,7 @@ Object {
class="euiFlyoutFooter"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
Expand Down
Loading
Loading