Skip to content

Commit

Permalink
Merge branch 'fit-and-finish-snapshots' into demo-header
Browse files Browse the repository at this point in the history
  • Loading branch information
Sandeep Kumawat committed Aug 29, 2024
2 parents 3e79480 + 564766e commit 49ea71c
Show file tree
Hide file tree
Showing 23 changed files with 470 additions and 240 deletions.
37 changes: 20 additions & 17 deletions public/components/CustomLabel/CustomLabel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
<>
<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">{checkboxLable ? <h4>{title}</h4> : <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}

<EuiSpacer size="s" />
{checkboxLable ? null : <EuiSpacer size="s" />}
</>
);

Expand Down
27 changes: 23 additions & 4 deletions ...ges/CreateSnapshotPolicy/components/SnapshotAdvancedSettings/SnapshotAdvancedSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -17,6 +17,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 +38,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={<CustomLabel title="Include cluster state in snapshots" checkboxLable={true} />}
checked={includeGlobalState}
onChange={onIncludeGlobalStateToggle}
/>
Expand All @@ -42,6 +54,7 @@ const SnapshotAdvancedSettings = ({
<CustomLabel
title="Ignore unavailable indices"
helpText="Instead of failing snapshot, ignore any indexes that are unavailable or do not exist."
checkboxLable={true}
/>
}
checked={ignoreUnavailable}
Expand All @@ -52,7 +65,13 @@ const SnapshotAdvancedSettings = ({

<EuiCompressedCheckbox
id="partial"
label={<CustomLabel title="Allow partial snapshots" helpText="Allow partial snapshots if one or more shards failed to store." />}
label={
<CustomLabel
title="Allow partial snapshots"
helpText="Allow partial snapshots if one or more shards failed to store."
checkboxLable={true}
/>
}
checked={partial}
onChange={onPartialToggle}
/>
Expand Down
164 changes: 101 additions & 63 deletions public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx
View file
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 @@ -582,7 +587,13 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
</>
)}

<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 @@ -698,7 +727,7 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
<EuiAccordion id="additional_delete_conditions" buttonContent="Additional settings">
<EuiSpacer size="m" />

<EuiText>Number of snapshots retained</EuiText>
<EuiText size="s">Number of snapshots retained</EuiText>
<EuiSpacer size="s" />

<EuiFlexGroup alignItems="flexStart">
Expand Down Expand Up @@ -726,7 +755,7 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp

<EuiSpacer size="m" />

<EuiText>Deletion frequency</EuiText>
<EuiText size="s">Deletion frequency</EuiText>
<span style={{ color: "grey", fontWeight: 200, fontSize: "12px" }}>
Configure when to check retention conditions and delete snapshots.
</span>
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
8 changes: 6 additions & 2 deletions public/pages/PolicyDetails/components/DeleteModal/DeleteModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -30,7 +30,11 @@ export default class DeleteModal extends Component<DeleteModalProps, DeleteModal
return (
<EuiOverlayMask>
<EuiConfirmModal
title="Delete policy"
title={
<EuiText size="s">
<h2>Delete policy</h2>
</EuiText>
}
onCancel={closeDeleteModal}
onConfirm={onClickDelete}
cancelButtonText="Cancel"
Expand Down
Loading

0 comments on commit 49ea71c

Please sign in to comment.