Incorporate requested UX changes to Snapshot Restore

.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:

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 });
 

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;
+}

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>

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>
     </>
   );

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" />

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>
     </>
   );