Incorporate requested UX changes to Snapshot Restore (#333) (#336)

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

Hide file tree

Showing 18 changed files with 530 additions and 307 deletions.
diff --git a/.github/workflows/cypress-workflow.yml b/.github/workflows/cypress-workflow.yml
@@ -7,7 +7,7 @@ on:
     branches:
       - "*"
 env:
-  OPENSEARCH_DASHBOARDS_VERSION: '2.x'
+  OPENSEARCH_DASHBOARDS_VERSION: '2.4'
   OPENSEARCH_VERSION: '2.4.0-SNAPSHOT'
 jobs:
   tests:

diff --git a/cypress/integration/snapshots_spec.js b/cypress/integration/snapshots_spec.js
@@ -84,6 +84,12 @@ describe("Snapshots", () => {
 
   describe("Snapshot can be restored", () => {
     it("Successfully restores indices from snapshot", () => {
+      // Must wait here before refreshing so snapshot status becomes 'success'
+      cy.wait(5000);
+
+      // Wait for snapshot to be created successfully
+      cy.get("button").contains("Refresh").click({ force: true });
+
       // Select test snapshot
       cy.get(`[data-test-subj="checkboxSelectRow-test_repo:test_snapshot"]`).check({ force: true });
 

diff --git a/public/models/interfaces.ts b/public/models/interfaces.ts
@@ -52,9 +52,20 @@ export interface Toast {
   text?: JSX.Element;
 }
 
+export interface Column {
+  field: string;
+  name: string;
+  width: string;
+  truncateText?: boolean;
+  sortable: boolean;
+}
+
+
 export interface RestoreError {
-  reason?: string,
-  type?: string
+  reason?: string;
+  type?: string;
+  ok?: boolean;
+  error?: string;
 }
 
 export interface LatestActivities {
@@ -82,3 +93,17 @@ export enum RESTORE_OPTIONS {
   customize_index_settings = "customize_index_settings",
   ignore_index_settings = "ignore_index_settings",
 }
+
+export interface ModifiedStages {
+  START: string;
+  INIT: string;
+  INDEX: string;
+  VERIFY_INDEX: string;
+  TRANSLOG: string;
+  FINALIZE: string;
+  DONE: string;
+}
+
+export interface IndexItem {
+  index: string;
+}
diff --git a/public/pages/Snapshots/components/ErrorModal/ErrorModal.tsx b/public/pages/Snapshots/components/ErrorModal/ErrorModal.tsx
@@ -5,24 +5,27 @@
 
 import { EuiModal, EuiText, EuiButton, EuiModalHeader, EuiModalFooter, EuiModalBody, EuiModalHeaderTitle } from "@elastic/eui";
 import React from "react";
+import { RestoreError } from "../../../../models/interfaces"
 
 
 interface ErrorModalProps {
-  error: React.ErrorInfo;
-  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  error: RestoreError;
+  snapshotId: string;
+  onClick: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement> | undefined) => void;
+  onClose: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement> | undefined) => void;
 }
 
-const ErrorModal = ({ onClick, error }: ErrorModalProps) => {
+const ErrorModal = ({ onClick, error, snapshotId }: ErrorModalProps) => {
 
   return (
     <>
       <EuiModal onClose={onClick}>
         <EuiModalHeader color="danger" style={{ flexDirection: "column", alignItems: "flex-start" }}>
-          <EuiModalHeaderTitle><h1>{error.type}</h1></EuiModalHeaderTitle>
+          <EuiModalHeaderTitle><h1>{`Failed to restore snapshot ${snapshotId}`}</h1></EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>
-          <EuiText size="m" color="danger">{error.reason}.</EuiText>
+          <EuiText size="m" color="danger">{error.reason ? error.reason : error}.</EuiText>
         </EuiModalBody>
 
         <EuiModalFooter>

diff --git a/public/pages/Snapshots/components/IndexList/IndexList.tsx b/public/pages/Snapshots/components/IndexList/IndexList.tsx
@@ -5,27 +5,19 @@
 
 import { EuiInMemoryTable, EuiIcon, EuiFlyoutHeader, EuiTitle } from "@elastic/eui";
 import React from "react";
-import { CatSnapshotIndex } from "../../../../../server/models/interfaces";
+import { Column } from "../../../../models/interfaces";
+import { IndexItem } from "../../../../models/interfaces"
 
 interface IndexListProps {
-  indices: CatSnapshotIndex[];
+  indices: IndexItem[];
   snapshot: string;
   title: string
+  columns: Column[];
   onClick: (e: React.MouseEvent) => void;
 }
 
-const IndexList = ({ indices, snapshot, onClick, title }: IndexListProps) => {
-  indices = indices.filter((index) => index.index?.substring(0, 7) !== ".kibana");
-
-  const columns = [
-    {
-      field: "index",
-      name: "Index",
-      width: "100%",
-      truncateText: true,
-      sortable: true,
-    }
-  ];
+const IndexList = ({ indices, snapshot, onClick, title, columns }: IndexListProps) => {
+  indices = indices.filter((index) => index.index.substring(0, 7) !== ".kibana");
 
   return (
     <>
@@ -38,7 +30,7 @@ const IndexList = ({ indices, snapshot, onClick, title }: IndexListProps) => {
         </EuiTitle>
       </EuiFlyoutHeader>
       <div style={{ padding: "1rem 1.5rem" }}>
-        <EuiInMemoryTable tableCaption="Indices" items={indices} columns={columns} tableLayout="auto" pagination={true} sorting={true} />
+        <EuiInMemoryTable tableCaption="Indices" items={indices} columns={columns} tableLayout="fixed" pagination={true} sorting={true} />
       </div>
     </>
   );

diff --git a/public/pages/Snapshots/components/IndexSettingsInput/IndexSettingsInput.tsx b/public/pages/Snapshots/components/IndexSettingsInput/IndexSettingsInput.tsx
@@ -8,16 +8,18 @@ import React, { useState, ChangeEvent } from "react";
 import { RESTORE_SNAPSHOT_DOCUMENTATION_URL } from "../../../../utils/constants"
 
 interface IndexSettingsInputProps {
-  getIndexSettings: (indexSettings: string) => void;
+  getIndexSettings: (indexSettings: string, ignore: boolean) => void;
+  showError: boolean;
+  inputError: string;
   ignore: boolean;
 }
 
-const IndexSettingsInput = ({ getIndexSettings, ignore }: IndexSettingsInputProps) => {
+const IndexSettingsInput = ({ getIndexSettings, ignore, showError, inputError }: IndexSettingsInputProps) => {
   const [indexSettings, setIndexSettings] = useState("");
 
   const onSettingsChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setIndexSettings(e.target.value);
-    getIndexSettings(e.target.value);
+    getIndexSettings(e.target.value, ignore);
   };
 
   const title = ignore ? "Specify index settings to ignore" : "Specify custom index settings";
@@ -28,10 +30,8 @@ const IndexSettingsInput = ({ getIndexSettings, ignore }: IndexSettingsInputProp
     ? `Example: \nindex.refresh_interval,\nindex.max_script_fields `
     : `Example: \n {\n\"index.number_of_replicas\": 0,\n\"index.auto_expand_replicas\": true\n}`;
 
-  return (
+  const indexSettingsLabel = (
     <>
-      <EuiSpacer size="m" />
-
       <EuiText size="xs">
         <h4>{title}</h4>
       </EuiText>
@@ -43,8 +43,15 @@ const IndexSettingsInput = ({ getIndexSettings, ignore }: IndexSettingsInputProp
           </EuiLink>
         </p>
       </EuiText>
-      <EuiFormRow>
-        <EuiTextArea value={indexSettings} onChange={onSettingsChange} placeholder={placeholderText} />
+    </>
+  );
+
+  return (
+    <>
+      <EuiSpacer size="m" />
+
+      <EuiFormRow isInvalid={showError} error={inputError} label={indexSettingsLabel}>
+        <EuiTextArea value={indexSettings} onChange={onSettingsChange} placeholder={placeholderText} isInvalid={showError} />
       </EuiFormRow>
 
       <EuiSpacer size="m" />

diff --git a/public/pages/Snapshots/components/RenameInput/RenameInput.tsx b/public/pages/Snapshots/components/RenameInput/RenameInput.tsx
@@ -9,11 +9,15 @@ import { RESTORE_SNAPSHOT_DOCUMENTATION_URL } from "../../../../utils/constants"
 interface RenameInputProps {
   getRenamePattern: (prefix: string) => void;
   getRenameReplacement: (prefix: string) => void;
+  showPatternError: boolean;
+  showRenameError: boolean
 }
 
-const RenameInput = ({ getRenamePattern, getRenameReplacement }: RenameInputProps) => {
+const RenameInput = ({ getRenamePattern, getRenameReplacement, showPatternError, showRenameError }: RenameInputProps) => {
   const [renamePattern, setRenamePattern] = useState("(.+)");
   const [renameReplacement, setRenameReplacement] = useState("restored_$1");
+  const badRenamePattern = "Please enter a valid Rename pattern.";
+  const badRenameReplacement = "Please enter a valid Rename replacement."
 
   const onPatternChange = (e: ChangeEvent<HTMLInputElement>) => {
     setRenamePattern(e.target.value);
@@ -24,47 +28,53 @@ const RenameInput = ({ getRenamePattern, getRenameReplacement }: RenameInputProp
     setRenameReplacement(e.target.value);
     getRenameReplacement(e.target.value);
   };
+  const patternText = `Define the format of renamed indices. Use $0 to include the \n
+  entire matching index name, $1 to include the content of the first\n
+  capture group, etc.`;
 
-  return (
-    <>
-      <EuiSpacer size="l" />
+  const renameText = `Define the format of renamed indices. Use $0 to include the\n
+  entire matching index name, $1 to include the content of the first\n
+  capture group, etc.`;
 
+  const patternLabel = (
+    <>
       <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 size="xs" style={{ padding: "0px 0px 5px 0px", fontWeight: "200" }}>
+        {patternText}{" "}
+        <EuiLink href={RESTORE_SNAPSHOT_DOCUMENTATION_URL} target="_blank" rel="noopener noreferrer" external={true}>
+          Learn more
+        </EuiLink>
       </EuiText>
-      <EuiFormRow>
-        <EuiFieldText value={renamePattern} onChange={onPatternChange} data-test-subj="renamePatternInput" />
-      </EuiFormRow>
-
-      <EuiSpacer size="m" />
+    </>
+  );
 
+  const renameLabel = (
+    <>
       <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 size="xs" style={{ padding: "0px 0px 5px 0px", fontWeight: "200" }}>
+        {renameText}{" "}
+        <EuiLink href={RESTORE_SNAPSHOT_DOCUMENTATION_URL} target="_blank" rel="noopener noreferrer" external={true}>
+          Learn more
+        </EuiLink>
       </EuiText>
-      <EuiFormRow>
-        <EuiFieldText value={renameReplacement} onChange={onReplacementChange} data-test-subj="renameReplacementInput" />
+    </>
+  );
+
+  return (
+    <>
+      <EuiSpacer size="l" />
+      <EuiFormRow error={badRenamePattern} isInvalid={showPatternError} label={patternLabel} >
+        <EuiFieldText value={renamePattern} onChange={onPatternChange} isInvalid={showPatternError} data-test-subj="renamePatternInput" />
+      </EuiFormRow>
+
+      <EuiSpacer size="m" />
+
+      <EuiFormRow error={badRenameReplacement} isInvalid={showRenameError} label={renameLabel}>
+        <EuiFieldText value={renameReplacement} onChange={onReplacementChange} isInvalid={showRenameError} data-test-subj="renameReplacementInput" />
       </EuiFormRow>
     </>
   );