Skip to content

Commit 8582cd3

Browse files
skumawat2025Sandeep Kumawat
skumawat2025
and
Sandeep Kumawat
committed
Fit and Finish Changes for Snapshot Management Pages (opensearch-project#1157)
Signed-off-by: Sandeep Kumawat <[email protected]> --------- Signed-off-by: Sandeep Kumawat <[email protected]> Co-authored-by: Sandeep Kumawat <[email protected]>
1 parent 44531cf commit 8582cd3

File tree

25 files changed

+503
-294
lines changed

25 files changed

+503
-294
lines changed

‎public/components/CustomLabel/CustomLabel.tsx

+17-15
Original file line numberDiff line numberDiff line change
@@ -7,28 +7,30 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from "@elastic/eui";
77
import React from "react";
88

99
interface CustomLabelProps {
10-
title: string;
10+
title: string | JSX.Element;
1111
isOptional?: boolean;
1212
helpText?: string | JSX.Element;
1313
}
1414

1515
const CustomLabel = ({ title, isOptional = false, helpText }: CustomLabelProps) => (
1616
<>
17-
<EuiFlexGroup gutterSize="xs">
18-
<EuiFlexItem grow={false}>
19-
<EuiText size="xs">
20-
<h4>{title}</h4>
21-
</EuiText>
22-
</EuiFlexItem>
23-
24-
{isOptional ? (
25-
<EuiFlexItem>
26-
<EuiText size="xs" color="subdued">
27-
<i> – optional</i>
28-
</EuiText>
17+
{title && typeof title == "string" ? (
18+
<EuiFlexGroup gutterSize="xs" alignItems="center">
19+
<EuiFlexItem grow={false}>
20+
<EuiText size="s">{<h3>{title}</h3>}</EuiText>
2921
</EuiFlexItem>
30-
) : null}
31-
</EuiFlexGroup>
22+
23+
{isOptional ? (
24+
<EuiFlexItem>
25+
<EuiText color="subdued">
26+
x<i> – optional</i>
27+
</EuiText>
28+
</EuiFlexItem>
29+
) : null}
30+
</EuiFlexGroup>
31+
) : (
32+
title
33+
)}
3234

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

‎public/pages/CreateSnapshotPolicy/components/SnapshotAdvancedSettings/SnapshotAdvancedSettings.tsx

+18-5
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@
33
* SPDX-License-Identifier: Apache-2.0
44
*/
55

6-
import { EuiCompressedCheckbox, EuiSpacer } from "@elastic/eui";
6+
import { EuiCompressedCheckbox, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from "@elastic/eui";
77
import CustomLabel from "../../../../components/CustomLabel";
88
import React, { ChangeEvent } from "react";
9+
import { CheckBoxLabel } from "../../../Snapshots/helper";
910

1011
interface SnapshotAdvancedSettingsProps {
1112
includeGlobalState: boolean;
@@ -17,6 +18,18 @@ interface SnapshotAdvancedSettingsProps {
1718
width?: string;
1819
}
1920

21+
const lableTitle = (titleText: string) => {
22+
return (
23+
<EuiFlexGroup gutterSize="xs" alignItems="center">
24+
<EuiFlexItem grow={false}>
25+
<EuiText size="s">
26+
<h4>{titleText}</h4>
27+
</EuiText>
28+
</EuiFlexItem>
29+
</EuiFlexGroup>
30+
);
31+
};
32+
2033
const SnapshotAdvancedSettings = ({
2134
includeGlobalState,
2235
onIncludeGlobalStateToggle,
@@ -26,10 +39,10 @@ const SnapshotAdvancedSettings = ({
2639
onPartialToggle,
2740
width,
2841
}: SnapshotAdvancedSettingsProps) => (
29-
<div style={{ padding: "10px 10px", width: width }}>
42+
<div>
3043
<EuiCompressedCheckbox
3144
id="include_global_state"
32-
label={<CustomLabel title="Include cluster state in snapshots" />}
45+
label={<CheckBoxLabel title="Include cluster state in snapshots" />}
3346
checked={includeGlobalState}
3447
onChange={onIncludeGlobalStateToggle}
3548
/>
@@ -39,7 +52,7 @@ const SnapshotAdvancedSettings = ({
3952
<EuiCompressedCheckbox
4053
id="ignore_unavailable"
4154
label={
42-
<CustomLabel
55+
<CheckBoxLabel
4356
title="Ignore unavailable indices"
4457
helpText="Instead of failing snapshot, ignore any indexes that are unavailable or do not exist."
4558
/>
@@ -52,7 +65,7 @@ const SnapshotAdvancedSettings = ({
5265

5366
<EuiCompressedCheckbox
5467
id="partial"
55-
label={<CustomLabel title="Allow partial snapshots" helpText="Allow partial snapshots if one or more shards failed to store." />}
68+
label={<CheckBoxLabel title="Allow partial snapshots" helpText="Allow partial snapshots if one or more shards failed to store." />}
5669
checked={partial}
5770
onChange={onPartialToggle}
5871
/>

‎public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx

+102-64
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
5757
import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
5858
import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
5959
import { ExternalLink } from "../../../utils/display-utils";
60+
import { TopNavControlDescriptionData, TopNavControlLinkData } from "src/plugins/navigation/public";
6061

6162
interface CreateSMPolicyProps extends RouteComponentProps, DataSourceMenuProperties {
6263
snapshotManagementService: SnapshotManagementService;
@@ -559,13 +560,17 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
559560

560561
const descriptionData = [
561562
{
562-
renderComponent: (
563-
<EuiText size="s" color="subdued">
564-
Snapshot policies allow you to define an automated snapshot schedule and retention period.{" "}
565-
<ExternalLink href={SNAPSHOT_MANAGEMENT_DOCUMENTATION_URL} />
566-
</EuiText>
567-
),
568-
},
563+
description: "Snapshot policies allow you to define an automated snapshot schedule and retention period.",
564+
links: {
565+
label: "Learn more",
566+
href: SNAPSHOT_MANAGEMENT_DOCUMENTATION_URL,
567+
iconType: "popout",
568+
iconSide: "right",
569+
controlType: "link",
570+
target: "_blank",
571+
flush: "both",
572+
} as TopNavControlLinkData,
573+
} as TopNavControlDescriptionData,
569574
];
570575
const padding_style = this.state.useNewUX ? { padding: "0px 0px" } : { padding: "5px 50px" };
571576
return (
@@ -574,15 +579,21 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
574579
<HeaderControl setMountPoint={setAppDescriptionControls} controls={descriptionData} />
575580
) : (
576581
<>
577-
<EuiTitle size="l">
582+
<EuiText size="s">
578583
<h1>{isEdit ? "Edit" : "Create"} policy</h1>
579-
</EuiTitle>
584+
</EuiText>
580585
{subTitleText}
581586
<EuiSpacer />
582587
</>
583588
)}
584589

585-
<ContentPanel title="Policy settings" titleSize="s">
590+
<EuiPanel>
591+
<EuiFlexGroup gutterSize="xs" alignItems="center">
592+
<EuiText size="s">
593+
<h2>Policy settings</h2>
594+
</EuiText>
595+
</EuiFlexGroup>
596+
<EuiHorizontalRule margin={"xs"} />
586597
<CustomLabel title="Policy name" />
587598
<EuiCompressedFormRow isInvalid={!!policyIdError} error={policyIdError}>
588599
<EuiCompressedFieldText
@@ -605,11 +616,17 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
605616
data-test-subj="description"
606617
/>
607618
</EuiCompressedFormRow>
608-
</ContentPanel>
619+
</EuiPanel>
609620

610621
<EuiSpacer />
611622

612-
<ContentPanel title="Source and destination" titleSize="s">
623+
<EuiPanel>
624+
<EuiFlexGroup gutterSize="xs" alignItems="center">
625+
<EuiText size="s">
626+
<h2>Source and destination</h2>
627+
</EuiText>
628+
</EuiFlexGroup>
629+
<EuiHorizontalRule margin={"xs"} />
613630
<SnapshotIndicesRepoInput
614631
indexOptions={indexOptions}
615632
selectedIndexOptions={selectedIndexOptions}
@@ -630,11 +647,17 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
630647
snapshotManagementService={this.props.snapshotManagementService}
631648
repoError={repoError}
632649
/>
633-
</ContentPanel>
650+
</EuiPanel>
634651

635652
<EuiSpacer />
636653

637-
<ContentPanel title="Snapshot schedule" titleSize="s">
654+
<EuiPanel>
655+
<EuiFlexGroup gutterSize="xs" alignItems="center">
656+
<EuiText size="s">
657+
<h2>Snapshot schedule</h2>
658+
</EuiText>
659+
</EuiFlexGroup>
660+
<EuiHorizontalRule margin={"xs"} />
638661
<CronSchedule
639662
frequencyTitle="Snapshot frequency"
640663
frequencyType={creationScheduleFrequencyType}
@@ -657,11 +680,17 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
657680
this.setState({ policy: this.setPolicyHelper("creation.schedule.cron.expression", expression) });
658681
}}
659682
/>
660-
</ContentPanel>
683+
</EuiPanel>
661684

662685
<EuiSpacer />
663686

664-
<ContentPanel title="Retention period" titleSize="s">
687+
<EuiPanel>
688+
<EuiFlexGroup gutterSize="xs" alignItems="center">
689+
<EuiText size="s">
690+
<h2>Retention period</h2>
691+
</EuiText>
692+
</EuiFlexGroup>
693+
<EuiHorizontalRule margin={"xs"} />
665694
<EuiCompressedRadioGroup
666695
options={rententionEnableRadios}
667696
idSelected={deleteConditionEnabled ? "retention_enabled" : "retention_disabled"}
@@ -759,62 +788,71 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
759788
</EuiAccordion>
760789
</>
761790
) : null}
762-
</ContentPanel>
791+
</EuiPanel>
763792

764793
<EuiSpacer />
765794

766-
<ContentPanel title="Notifications" titleSize="s">
767-
<div style={{ padding: "10px 10px" }}>
768-
<EuiText>Notify on snapshot activities</EuiText>
769-
770-
<EuiSpacer size="s" />
771-
<EuiCompressedCheckbox
772-
id="notification-creation"
773-
label="When a snapshot has been created."
774-
checked={getNotifyCreation(policy)}
775-
onChange={(e: ChangeEvent<HTMLInputElement>) => {
776-
this.setState({ policy: this.setPolicyHelper("notification.conditions.creation", e.target.checked) });
777-
}}
778-
/>
795+
<EuiPanel>
796+
<EuiFlexGroup gutterSize="xs" alignItems="center">
797+
<EuiText size="s">
798+
<h2>Notifications</h2>
799+
</EuiText>
800+
</EuiFlexGroup>
801+
<EuiHorizontalRule margin={"xs"} />
802+
<EuiText size="s">
803+
<h3>Notify on snapshot activities</h3>
804+
</EuiText>
779805

780-
<EuiSpacer size="s" />
806+
<EuiSpacer size="s" />
807+
<EuiCompressedCheckbox
808+
id="notification-creation"
809+
label="When a snapshot has been created."
810+
checked={getNotifyCreation(policy)}
811+
onChange={(e: ChangeEvent<HTMLInputElement>) => {
812+
this.setState({ policy: this.setPolicyHelper("notification.conditions.creation", e.target.checked) });
813+
}}
814+
/>
781815

782-
<EuiCompressedCheckbox
783-
id="notification-deletion"
784-
label="When a snapshots has been deleted."
785-
checked={getNotifyDeletion(policy)}
786-
onChange={(e: ChangeEvent<HTMLInputElement>) => {
787-
this.setState({ policy: this.setPolicyHelper("notification.conditions.deletion", e.target.checked) });
788-
}}
789-
/>
816+
<EuiSpacer size="s" />
790817

791-
<EuiSpacer size="s" />
818+
<EuiCompressedCheckbox
819+
id="notification-deletion"
820+
label="When a snapshots has been deleted."
821+
checked={getNotifyDeletion(policy)}
822+
onChange={(e: ChangeEvent<HTMLInputElement>) => {
823+
this.setState({ policy: this.setPolicyHelper("notification.conditions.deletion", e.target.checked) });
824+
}}
825+
/>
792826

793-
<EuiCompressedCheckbox
794-
id="notification-failure"
795-
label="When a snapshot has failed."
796-
checked={getNotifyFailure(policy)}
797-
onChange={(e: ChangeEvent<HTMLInputElement>) => {
798-
this.setState({ policy: this.setPolicyHelper("notification.conditions.failure", e.target.checked) });
799-
}}
800-
/>
801-
</div>
827+
<EuiSpacer size="s" />
828+
829+
<EuiCompressedCheckbox
830+
id="notification-failure"
831+
label="When a snapshot has failed."
832+
checked={getNotifyFailure(policy)}
833+
onChange={(e: ChangeEvent<HTMLInputElement>) => {
834+
this.setState({ policy: this.setPolicyHelper("notification.conditions.failure", e.target.checked) });
835+
}}
836+
/>
802837
{showNotificationChannel ? (
803-
<Notification
804-
channelId={_.get(policy, "notification.channel.id") || ""}
805-
channels={channels}
806-
loadingChannels={loadingChannels}
807-
onChangeChannelId={this.onChangeChannelId}
808-
getChannels={this.getChannels}
809-
/>
838+
<>
839+
<EuiSpacer size="s" />
840+
<Notification
841+
channelId={_.get(policy, "notification.channel.id") || ""}
842+
channels={channels}
843+
loadingChannels={loadingChannels}
844+
onChangeChannelId={this.onChangeChannelId}
845+
getChannels={this.getChannels}
846+
/>
847+
</>
810848
) : null}
811-
</ContentPanel>
849+
</EuiPanel>
812850

813851
<EuiSpacer />
814852

815853
{/* Advanced settings */}
816-
<EuiPanel style={{ paddingLeft: "0px", paddingRight: "0px" }}>
817-
<EuiFlexGroup style={{ padding: "0px 10px" }} justifyContent="flexStart" alignItems="center" gutterSize="none">
854+
<EuiPanel>
855+
<EuiFlexGroup justifyContent="flexStart" alignItems="center" gutterSize="none">
818856
<EuiFlexItem grow={false}>
819857
<EuiSmallButtonIcon
820858
iconType={advancedSettingsOpen ? "arrowDown" : "arrowRight"}
@@ -826,11 +864,11 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
826864
/>
827865
</EuiFlexItem>
828866
<EuiFlexItem grow={false}>
829-
<EuiTitle size="s">
830-
<h1>
867+
<EuiText size="s">
868+
<h2>
831869
Advanced settings <i>– optional</i>
832-
</h1>
833-
</EuiTitle>
870+
</h2>
871+
</EuiText>
834872
</EuiFlexItem>
835873
</EuiFlexGroup>
836874

@@ -890,7 +928,7 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
890928

891929
<EuiSpacer />
892930

893-
<EuiFlexGroup justifyContent="flexEnd">
931+
<EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
894932
<EuiFlexItem grow={false}>
895933
<EuiSmallButtonEmpty onClick={this.onClickCancel}>Cancel</EuiSmallButtonEmpty>
896934
</EuiFlexItem>

‎public/pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -821,7 +821,7 @@ Object {
821821
class="euiFlyoutFooter"
822822
>
823823
<div
824-
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
824+
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
825825
>
826826
<div
827827
class="euiFlexItem euiFlexItem--flexGrowZero"

0 commit comments

Comments
 (0)