Skip to content

Commit

Permalink
Fit and Finish Changes for Snapshot Management Pages (#1157)
Browse files Browse the repository at this point in the history 
* Fit and Finish Changes for Snapshot Management Pages

Signed-off-by: Sandeep Kumawat <skumwt@amazon.com>

* Fixes

Signed-off-by: Sandeep Kumawat <skumwt@amazon.com>

* incorporate ux feedback

Signed-off-by: Sandeep Kumawat <skumwt@amazon.com>

---------

Signed-off-by: Sandeep Kumawat <skumwt@amazon.com>
Co-authored-by: Sandeep Kumawat <skumwt@amazon.com>
(cherry picked from commit 6c815fe)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
@github-actions
github-actions[bot] and Sandeep Kumawat committed Sep 3, 2024
1 parent f51d7ce commit 490bdb3
Show file tree
Hide file tree
Showing 25 changed files with 492 additions and 270 deletions.
32 changes: 17 additions & 15 deletions public/components/CustomLabel/CustomLabel.tsx
View file
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
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
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
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

0 comments on commit 490bdb3

Please sign in to comment.