Complete snapshot restore, mvp for 2.4 (opensearch-project#315)

* Change alignment of Snapshot Management panels in pages/Main/Main.tsx Signed-off-by: Chris Hesterman <phestech@amazon.com> * Unify vertical button alignment across panels, ContentPanel.tsx Signed-off-by: Chris Hesterman <phestech@amazon.com> * Update jest snapshots, add ROUTE_STYLE variable Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add placeholder restore button to Snapshots panel Signed-off-by: Chris Hesterman <phestech@amazon.com> * Comment out line 20 rollups_spec.js in cypress/integration/ Signed-off-by: Chris Hesterman <phestech@amazon.com> * Remove unused code and comment cypress/integration/rollups_spec.js Signed-off-by: Chris Hesterman <phestech@amazon.com> * Starting adaptation/use of existing code for Restore functionality Signed-off-by: Chris Hesterman <phestech@amazon.com> * Adapt Snapshots.tsx to include RestoreSnapshotFlyout Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add restoreSnapshot method to SMservice,RestoreSnapshotResponse int Signed-off-by: Chris Hesterman <phestech@amazon.com> * Implement RestoreSnapshotFlyout open/close Signed-off-by: Chris Hesterman <phestech@amazon.com> * Make Snapshot name appear on RestoreSnapshotFlyout Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add/adapt restoreSnapshot to server/SnapshotManagementService Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add route for restoreSnapshot in server/routes.ts Signed-off-by: Chris Hesterman <phestech@amazon.com> * Rudimentary restore from snapshot functionality reached, buggy Signed-off-by: Chris Hesterman <phestech@amazon.com> * Fix index list-snapshot restore, restrict restore to single selection Signed-off-by: Chris Hesterman <phestech@amazon.com> * Remove console.logs, commented out code Signed-off-by: Chris Hesterman <phestech@amazon.com> * Create Advanced options accordion for Snapshot restore. Signed-off-by: Chris Hesterman <phestech@amazon.com> Currently only visually functional. TODO - make it apply the options Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add initial restore/rename options to ui. Only visual functionality Signed-off-by: Chris Hesterman <phestech@amazon.com> * Resolve radio button events not firing Signed-off-by: Chris Hesterman <phestech@amazon.com> Split radio buttons into SnapshotRestoreOption and SnapshotRenameOptions Signed-off-by: Chris Hesterman <phestech@amazon.com> Move 'restore' button between 'delete' and 'take snapshot' Signed-off-by: Chris Hesterman <phestech@amazon.com> Set default rename option to 'add prefix' Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add AddPrefixInput, remove unused component RestoreSnapshotInitialOptions Signed-off-by: Chris Hesterman <phestech@amazon.com> * Fix issues with restore specific indices Signed-off-by: Chris Hesterman <phestech@amazon.com> Implement first 4 Advanced restore options functionality Signed-off-by: Chris Hesterman <phestech@amazon.com> * Begin cypress testing for snapshots Signed-off-by: Chris Hesterman <phestech@amazon.com> Passing tests for create repo and create snapshot Signed-off-by: Chris Hesterman <phestech@amazon.com> * Begin cypress testing Snapshots. Create repo and Create snapshot done Signed-off-by: Chris Hesterman <phestech@amazon.com> * Implement add_prefix functionality for snapshot restore Signed-off-by: Chris Hesterman <phestech@amazon.com> * Implement rename indices option for restore snapshot Signed-off-by: Chris Hesterman <phestech@amazon.com> * Remove console.logs, unusted variables in SnapshotFlyout, SMservice Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add full stop to help text/errors, add RESTORE_OPTIONS enum Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add placeholder examples to rename options, add line breaks to help text Signed-off-by: Chris Hesterman <phestech@amazon.com> * Progress on custom index settings, ignore index settings Signed-off-by: Chris Hesterman <phestech@amazon.com> * Implement custom index settings functionality Signed-off-by: Chris Hesterman <phestech@amazon.com> * Successfully implement/debug custom index settings/ignore index settings. Signed-off-by: Chris Hesterman <phestech@amazon.com> * Progress on IndexList component, using cat.index. Signed-off-by: Chris Hesterman <phestech@amazon.com> * IndexList with pagination fully functional, todo: styling Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add RestoreActivitiesPanel component folder, files (starter) Signed-off-by: Chris Hesterman <phestech@amazon.com> * Complete IndexList with pagination, sorting. Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add maxWidth to RestoreSnapshotFlyout Signed-off-by: Chris Hesterman <phestech@amazon.com * Implement tabs on Snapshots page: Snapshots, Restore activities... Signed-off-by: Chris Hesterman <phestech@amazon.com> Implement skeleton Restore activities panel, panel switching in Snapshots Signed-off-by: Chris Hesterman <phestech@amazon.com> * Progress on catIndexRecovery, TODO - debug Signed-off-by: Chris Hesterman <phestech@amazon.com> * Fix syntax bug - server/services/SnapshotManagementService.ts Signed-off-by: Chris Hesterman <phestech@amazon.com> * Resolved some errors, getting a response but not correct response. Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add back line 20 in rollups_spec, required by changes in 2.3 release. Signed-off-by: Chris Hesterman <phestech@amazon.com> * Implement code to use Index Recovery api. successful. Signed-off-by: Chris Hesterman <phestech@amazon.com> * Current progress extracting data and displaying in Restore activities Signed-off-by: Chris Hesterman <phestech@amazon.com> * Implement Restore Activities with self updating until restore done Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add clickable indexes link and hello world click handler Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add toast if no snapshot selected upon restore activities click Signed-off-by: Chris Hesterman <phestech@amazon.com> Add empty flyout where restoring indices will be listed Signed-off-by: Chris Hesterman <phestech@amazon.com> * Change danger toast to warning when no snapshot selected Signed-off-by: Chris Hesterman <phestech@amazon.com> * Fix bug when both custom settings and ignore settings chosen Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add refresh button to restore activities page, remove auto refreshing Signed-off-by: Chris Hesterman <phestech@amazon.com> * Remove unused getRepos func, add repo prop, trim state in RestoreFlyout Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add increment to 2.3.0 Signed-off-by: Chris Hesterman <phestech@amazon.com> * Remove index settings from options if none entered, RestoreFlyout Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add rel="noopener noreferrer" to links in help text, use url from constants. Signed-off-by: Chris Hesterman <phestech@amazon.com> * Create CatSnapshotIndex in server/models/interfaces, apply in IndexList Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add rel="noopener noreferrer" to links in IndexList, add CatSnapshotIndex interface Signed-off-by: Chris Hesterman <phestech@amazon.com> * Changes to RestoreActivitesPanel to prep for listing indice Signed-off-by: Chris Hesterman <phestech@amazon.com> * Re do merge commit - forgot to save file. Signed-off-by: Chris Hesterman <phestech@amazon.com> * Snapshots testing in progress Signed-off-by: Chris Hesterman <phestech@amazon.com> * Current progress, cypress testing Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add unit testing for AddPrefixInput, RenameInput components Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add unit tests for SnapshotRenameOptions component Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add unit tests for SnapshotRestoreOption component Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add unit tests for SnapshotIndicesInput component Signed-off-by: Chris Hesterman <phestech@amazon.com> * Change 'Indices' to 'Index' if only 1 index. Signed-off-by: Chris Hesterman <phestech@amazon.com> * Replace anchor tags with EuiLinks set to external, rename options Signed-off-by: Chris Hesterman <phestech@amazon.com> * Change anchor tags to EuiLinks, IndexSettings Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add rel attribute to EuiLink, IndexSettingsInput Signed-off-by: Chris Hesterman <phestech@amazon.com> * Auto populate prefix field initially with "restored_" Signed-off-by: Chris Hesterman <phestech@amazon.com> * Change Restore button to color="primary" (blue) Signed-off-by: Chris Hesterman <phestech@amazon.com> * Make flyout close on restore, direct user to activities tab Signed-off-by: Chris Hesterman <phestech@amazon.com> * Title case flyout 'status', use EuiHealth for status color dot Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add auto status check until 'DONE', RestoreActivities Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add auto status update until 'SUCCESS', Snapshots panel Signed-off-by: Chris Hesterman <phestech@amazon.com> * Change tab implementation to be consistent with other plugins Signed-off-by: Chris Hesterman <phestech@amazon.com> * Minor text and styling fixes, Snapshots panel Signed-off-by: Chris Hesterman <phestech@amazon.com> * Fix styling to match main Snapshot page, RestoreFlyout Signed-off-by: Chris Hesterman <phestech@amazon.com> * Update text to match mocks in Snapshots, RestoreSnapshotFlyout Signed-off-by: Chris Hesterman <phestech@amazon.com> * Pre fill rename inputs, prefix input with default values from mock Signed-off-by: Chris Hesterman <phestech@amazon.com> * Change to title case for status in Restore activities panel Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add warning banner if snapshot is partial, with checkbox to allow Signed-off-by: Chris Hesterman <phestech@amazon.com> * Fix behavior of IndexList, include size when active, else unknown Signed-off-by: Chris Hesterman <phestech@amazon.com> * Functioning start/stop times in RestoreActivities Signed-off-by: Chris Hesterman <phestech@amazon.com> Accurate listing of indices being restored from snapshot Signed-off-by: Chris Hesterman <phestech@amazon.com> * Restore start/stop working. Auto updating working. Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add EuiHealth to RestoreSnapshotFlyout Signed-off-by: Chris Hesterman <phestech@amazon.com> * Progress with restore monitoring, finally error free Signed-off-by: Chris Hesterman <phestech@amazon.com> * Progress on restore/delete buttons correctly disabled edge cases Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add EuiOverlayMask when RestoreSnapshotFlyout active Signed-off-by: Chris Hesterman <phestech@amazon.com> * Create user friendly error toasts with button to full error Signed-off-by: Chris Hesterman <phestech@amazon.com> * Direct user to browser console for full error from error toasts Signed-off-by: Chris Hesterman <phestech@amazon.com> * Progress with restore success toast with button. Close Signed-off-by: Chris Hesterman <phestech@amazon.com> * Custom restore success toast with button to activities panel done Signed-off-by: Chris Hesterman <phestech@amazon.com> * Created custom error toast. Need to debug. Signed-off-by: Chris Hesterman <phestech@amazon.com> * Custom error and success toasts fully functional and error free. Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add and debug Index Settings portion of Advanced Options. Successful. Signed-off-by: Chris Hesterman <phestech@amazon.com> * Remove stray console logs Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add, update jest and cypress testing for snapshots & restore snapshots Signed-off-by: Chris Hesterman <phestech@amazon.com> * Save small change snapshots_spec, forgot before prev commit Signed-off-by: Chris Hesterman <phestech@amazon.com> * Version bump 2.3.0 to 2.3 1 Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add version bump 2.3.1 for OS in cypress-workflow.yml Signed-off-by: Chris Hesterman <phestech@amazon.com> * Remove 2.3.1 bump Signed-off-by: Chris Hesterman <phestech@amazon.com> * Change 2.3 to 2.3.0 cypress-workflow.yml Signed-off-by: Chris Hesterman <phestech@amazon.com> * Change OSDB version to 2.3.1, opensearch_dashboards.json Signed-off-by: Chris Hesterman <phestech@amazon.com> * Change 2.4 to 2.4.0 opensearch_dashboards.json Signed-off-by: Chris Hesterman <phestech@amazon.com> * Update for 2.4 Signed-off-by: Chris Hesterman <phestech@amazon.com> * Update help text, Snapshots.jsx Signed-off-by: Chris Hesterman <phestech@amazon.com> * Remove Total size column from IndexList Signed-off-by: Chris Hesterman <phestech@amazon.com> * Disable restore if partial snapshot but not checked in banner Signed-off-by: Chris Hesterman <phestech@amazon.com> Remove total size column in indexList Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add status code and code meaning to toasts, error modal Signed-off-by: Chris Hesterman <phestech@amazon.com> * Progress making Restore activities panel independent Signed-off-by: Chris Hesterman <phestech@amazon.com> * RestoreActivitiesPanel no longer needs selected snapshot to access Signed-off-by: Chris Hesterman <phestech@amazon.com> * Clean up unused code,console logs Signed-off-by: Chris Hesterman <phestech@amazon.com> * Modify error toasts to be more user friendly Signed-off-by: Chris Hesterman <phestech@amazon.com> * Handle bad regex input, handle bad JSON input, RestoreSnapshotFlyout Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add check and toast for no indices selected, RestoreSnapshotFlyout Signed-off-by: Chris Hesterman <phestech@amazon.com> * Remove unused interface, server/models/interfaces Signed-off-by: Chris Hesterman <phestech@amazon.com> * Remove unused interface, console log. Signed-off-by: Chris Hesterman <phestech@amazon.com> * Small style changes, RestoreSnapshotFlyout Signed-off-by: Chris Hesterman <phestech@amazon.com> * Resolve one missed conflict from previous merge Signed-off-by: Chris Hesterman <phestech@amazon.com> * Update snapshots_spec.js Signed-off-by: Chris Hesterman <phestech@amazon.com> * Remove unneeded cy.wait, snapshots_spec Signed-off-by: Chris Hesterman <phestech@amazon.com> * Fix small bug with refresh button, Restore activities panel Signed-off-by: Chris Hesterman <phestech@amazon.com> * Remove conflicts in server/models/interfaces Signed-off-by: Chris Hesterman <phestech@amazon.com> * Remove unused prop"ignore", change ternary to if() in toast helper Signed-off-by: Chris Hesterman <phestech@amazon.com> * Change label text styling for radios and checkboxes in flyout Signed-off-by: Chris Hesterman <phestech@amazon.com> * Create checkBoxLabel component in helper.jsx Signed-off-by: Chris Hesterman <phestech@amazon.com> * Update jest snapshots for unit tests. Signed-off-by: Chris Hesterman <phestech@amazon.com> * Remove default close button from Restore activities/indiceslist Signed-off-by: Chris Hesterman <phestech@amazon.com> Signed-off-by: Chris Hesterman <phestech@amazon.com> Signed-off-by: Chris Hesterman <phestech@amazon.com
SuZhou-Joe · Nov 1, 2022 · 58b88b5 · 58b88b5
1 parent fa09afb
commit 58b88b5
Show file tree

Hide file tree

Showing 21 changed files with 526 additions and 284 deletions.
diff --git a/cypress/integration/snapshots_spec.js b/cypress/integration/snapshots_spec.js
@@ -100,7 +100,7 @@ describe("Snapshots", () => {
       cy.get("button").contains("Restore snapshot").click({ force: true });
 
       // Check for success toast
-      cy.contains("Restored snapshot test_snapshot to repository test_repo");
+      cy.contains(`Restore from snapshot "test_snapshot" is in progress.`);
     });
   });
 

diff --git a/public/models/interfaces.ts b/public/models/interfaces.ts
@@ -44,6 +44,19 @@ interface ArgsWithError {
 }
 export type OnSearchChangeArgs = ArgsWithQuery | ArgsWithError;
 
+export interface Toast {
+  id?: string;
+  title?: string;
+  iconType?: string;
+  color: string;
+  text?: JSX.Element;
+}
+
+export interface RestoreError {
+  reason?: string,
+  type?: string
+}
+
 export interface LatestActivities {
   activityType: "Creation" | "Deletion";
   status?: string;

diff --git a/public/pages/Snapshots/components/ErrorModal/ErrorModal.tsx b/public/pages/Snapshots/components/ErrorModal/ErrorModal.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiModal, EuiText, EuiButton, EuiModalHeader, EuiModalFooter, EuiModalBody, EuiModalHeaderTitle } from "@elastic/eui";
+import React from "react";
+
+
+interface ErrorModalProps {
+  error: React.ErrorInfo;
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const ErrorModal = ({ onClick, error }: ErrorModalProps) => {
+
+  return (
+    <>
+      <EuiModal onClose={onClick}>
+        <EuiModalHeader color="danger" style={{ flexDirection: "column", alignItems: "flex-start" }}>
+          <EuiModalHeaderTitle><h1>{error.type}</h1></EuiModalHeaderTitle>
+        </EuiModalHeader>
+
+        <EuiModalBody>
+          <EuiText size="m" color="danger">{error.reason}.</EuiText>
+        </EuiModalBody>
+
+        <EuiModalFooter>
+          <EuiButton onClick={onClick} fill>Close</EuiButton>
+        </EuiModalFooter>
+      </EuiModal>
+    </>
+  );
+};
+
+export default ErrorModal;
diff --git a/public/pages/Snapshots/components/ErrorModal/index.ts b/public/pages/Snapshots/components/ErrorModal/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import ErrorModal from "./ErrorModal";
+
+export default ErrorModal;
diff --git a/public/pages/Snapshots/components/IndexList/IndexList.tsx b/public/pages/Snapshots/components/IndexList/IndexList.tsx
@@ -21,14 +21,10 @@ const IndexList = ({ indices, snapshot, onClick, title }: IndexListProps) => {
     {
       field: "index",
       name: "Index",
-      width: "70%",
+      width: "100%",
+      truncateText: true,
       sortable: true,
-    },
-    {
-      field: "store.size",
-      name: "Total size",
-      sortable: true,
-    },
+    }
   ];
 
   return (

diff --git a/public/pages/Snapshots/components/RenameInput/RenameInput.test.tsx b/public/pages/Snapshots/components/RenameInput/RenameInput.test.tsx
@@ -34,11 +34,11 @@ describe("RenameInput component", () => {
 
   it("accepts user input", () => {
     // User enters text
-    userEvent.type(screen.getByTestId("renamePatternInput"), "(.+)");
+    userEvent.type(screen.getByTestId("renamePatternInput"), "{selectall}{del}(.+)");
 
     expect(screen.getByTestId("renamePatternInput")).toHaveValue("(.+)");
 
-    userEvent.type(screen.getByTestId("renameReplacementInput"), "test_$1");
+    userEvent.type(screen.getByTestId("renameReplacementInput"), "{selectall}{del}test_$1");
 
     expect(screen.getByTestId("renameReplacementInput")).toHaveValue("test_$1");
   });

diff --git a/public/pages/Snapshots/components/RenameInput/RenameInput.tsx b/public/pages/Snapshots/components/RenameInput/RenameInput.tsx
@@ -3,18 +3,17 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiFormRow, EuiFieldText, EuiSpacer } from "@elastic/eui";
+import { EuiFormRow, EuiFieldText, EuiSpacer, EuiText, EuiLink } from "@elastic/eui";
 import React, { useState, ChangeEvent } from "react";
-import CustomLabel from "../../../../components/CustomLabel";
-
+import { RESTORE_SNAPSHOT_DOCUMENTATION_URL } from "../../../../utils/constants"
 interface RenameInputProps {
   getRenamePattern: (prefix: string) => void;
   getRenameReplacement: (prefix: string) => void;
 }
 
 const RenameInput = ({ getRenamePattern, getRenameReplacement }: RenameInputProps) => {
-  const [renamePattern, setRenamePattern] = useState("");
-  const [renameReplacement, setRenameReplacement] = useState("");
+  const [renamePattern, setRenamePattern] = useState("(.+)");
+  const [renameReplacement, setRenameReplacement] = useState("restored_$1");
 
   const onPatternChange = (e: ChangeEvent<HTMLInputElement>) => {
     setRenamePattern(e.target.value);
@@ -26,23 +25,44 @@ const RenameInput = ({ getRenamePattern, getRenameReplacement }: RenameInputProp
     getRenameReplacement(e.target.value);
   };
 
-  const patternHelpText =
-    "Use regular expressiojn to define how index names will be renamed. By default, input (.+) to reuse the entire index name. [Learn more]";
-  const replacementHelpText =
-    "Define the format of renamed indices. Use $0 to include the entire matching index name, $1 to include the content of the first capture group, etc. [Learn more]";
-
   return (
     <>
       <EuiSpacer size="l" />
 
-      <CustomLabel title="Rename Pattern" helpText={patternHelpText} />
+      <EuiText size="xs">
+        <h4>Rename Pattern</h4>
+      </EuiText>
+      <EuiText size="xs" style={{ padding: "0px 0px 5px 0px" }}>
+        <p style={{ fontWeight: 200 }}>
+          Use regular expression to define how index names will be renamed.
+          <br />
+          By default, input (.+) to reuse the entire index name.{" "}
+          <EuiLink href={RESTORE_SNAPSHOT_DOCUMENTATION_URL} target="_blank" rel="noopener noreferrer" external={true}>
+            Learn more
+          </EuiLink>
+        </p>
+      </EuiText>
       <EuiFormRow>
         <EuiFieldText value={renamePattern} onChange={onPatternChange} data-test-subj="renamePatternInput" />
       </EuiFormRow>
 
       <EuiSpacer size="m" />
 
-      <CustomLabel title="Rename Replacement" helpText={replacementHelpText} />
+      <EuiText size="xs">
+        <h4>Rename Replacement</h4>
+      </EuiText>
+      <EuiText size="xs" style={{ padding: "0px 0px 5px 0px" }}>
+        <p style={{ fontWeight: 200 }}>
+          Define the format of renamed indices. Use $0 to include the
+          <br />
+          entire matching index name, $1 to include the content of the first
+          <br />
+          capture group, etc.{" "}
+          <EuiLink href={RESTORE_SNAPSHOT_DOCUMENTATION_URL} target="_blank" rel="noopener noreferrer" external={true}>
+            Learn more
+          </EuiLink>
+        </p>
+      </EuiText>
       <EuiFormRow>
         <EuiFieldText value={renameReplacement} onChange={onReplacementChange} data-test-subj="renameReplacementInput" />
       </EuiFormRow>

diff --git a/public/pages/Snapshots/components/RenameInput/__snapshots__/RenameInput.test.tsx.snap b/public/pages/Snapshots/components/RenameInput/__snapshots__/RenameInput.test.tsx.snap
@@ -6,28 +6,39 @@ exports[`RenameInput component renders without error 1`] = `
     class="euiSpacer euiSpacer--l"
   />
   <div
-    class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+    class="euiText euiText--extraSmall"
   >
-    <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
+    <h4>
+      Rename Pattern
+    </h4>
+  </div>
+  <div
+    class="euiText euiText--extraSmall"
+    style="padding: 0px 0px 5px 0px;"
+  >
+    <p
+      style="font-weight: 200;"
     >
-      <div
-        class="euiText euiText--extraSmall"
+      Use regular expression to define how index names will be renamed.
+      <br />
+      By default, input (.+) to reuse the entire index name.
+       
+      <a
+        class="euiLink euiLink--primary"
+        href="https://opensearch.org/docs/latest/opensearch/snapshots/snapshot-restore/#restore-snapshots"
+        rel="noopener noreferrer"
+        target="_blank"
       >
-        <h4>
-          Rename Pattern
-        </h4>
-      </div>
-    </div>
+        Learn more
+        EuiIconMock
+        <span
+          class="euiScreenReaderOnly"
+        >
+          (opens in a new tab or window)
+        </span>
+      </a>
+    </p>
   </div>
-  <span
-    style="font-weight: 200; font-size: 12px;"
-  >
-    Use regular expressiojn to define how index names will be renamed. By default, input (.+) to reuse the entire index name. [Learn more]
-  </span>
-  <div
-    class="euiSpacer euiSpacer--s"
-  />
   <div
     class="euiFormRow"
     id="some_html_id-row"
@@ -46,7 +57,7 @@ exports[`RenameInput component renders without error 1`] = `
             data-test-subj="renamePatternInput"
             id="some_html_id"
             type="text"
-            value=""
+            value="(.+)"
           />
         </div>
       </div>
@@ -56,28 +67,41 @@ exports[`RenameInput component renders without error 1`] = `
     class="euiSpacer euiSpacer--m"
   />
   <div
-    class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+    class="euiText euiText--extraSmall"
   >
-    <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
+    <h4>
+      Rename Replacement
+    </h4>
+  </div>
+  <div
+    class="euiText euiText--extraSmall"
+    style="padding: 0px 0px 5px 0px;"
+  >
+    <p
+      style="font-weight: 200;"
     >
-      <div
-        class="euiText euiText--extraSmall"
+      Define the format of renamed indices. Use $0 to include the
+      <br />
+      entire matching index name, $1 to include the content of the first
+      <br />
+      capture group, etc.
+       
+      <a
+        class="euiLink euiLink--primary"
+        href="https://opensearch.org/docs/latest/opensearch/snapshots/snapshot-restore/#restore-snapshots"
+        rel="noopener noreferrer"
+        target="_blank"
       >
-        <h4>
-          Rename Replacement
-        </h4>
-      </div>
-    </div>
+        Learn more
+        EuiIconMock
+        <span
+          class="euiScreenReaderOnly"
+        >
+          (opens in a new tab or window)
+        </span>
+      </a>
+    </p>
   </div>
-  <span
-    style="font-weight: 200; font-size: 12px;"
-  >
-    Define the format of renamed indices. Use $0 to include the entire matching index name, $1 to include the content of the first capture group, etc. [Learn more]
-  </span>
-  <div
-    class="euiSpacer euiSpacer--s"
-  />
   <div
     class="euiFormRow"
     id="some_html_id-row"
@@ -96,7 +120,7 @@ exports[`RenameInput component renders without error 1`] = `
             data-test-subj="renameReplacementInput"
             id="some_html_id"
             type="text"
-            value=""
+            value="restored_$1"
           />
         </div>
       </div>