Restore activities panel, monitoring restore progress, styling (#294)

* Bumping 2.x branch from version 2.1 to 2.2. (#218) * Bumping 2.x branch from version 2.1 to 2.2. Bumped terser version to 4.8.1 to address CVE. Signed-off-by: AWSHurneyt <hurneyt@amazon.com> * Drafted `2.2` release notes. Signed-off-by: AWSHurneyt <hurneyt@amazon.com> * Drafted `2.2` release notes. Signed-off-by: AWSHurneyt <hurneyt@amazon.com> * Updated rollup help text. (#220) (#221) Signed-off-by: AWSHurneyt <hurneyt@amazon.com> (cherry picked from commit 4821889) Co-authored-by: AWSHurneyt <hurneyt@amazon.com> * Amended 2.2 release notes. (#222) Signed-off-by: AWSHurneyt <hurneyt@amazon.com> * Refactored dependency used by test mock. Adjusted OSD version used by test workflows. (#229) * Enabled unit and cypress test workflows on all branches. Adjusted OSD version used by unit and cypress test workflows to align with OSD branching strategy. Signed-off-by: AWSHurneyt <hurneyt@amazon.com> * Adjusted path for a dependency used by unit tests to align with migration from EUI to OUI. Signed-off-by: AWSHurneyt <hurneyt@amazon.com> Signed-off-by: AWSHurneyt <hurneyt@amazon.com> * Bumped moment version to resolve dependabot alert. (#230) (#233) Signed-off-by: AWSHurneyt <hurneyt@amazon.com> Signed-off-by: AWSHurneyt <hurneyt@amazon.com> (cherry picked from commit 20374a4) Co-authored-by: AWSHurneyt <hurneyt@amazon.com> * 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> * Version increment 2.2.1 (#235) (#239) Signed-off-by: prudhvigodithi <pgodithi@amazon.com> Signed-off-by: prudhvigodithi <pgodithi@amazon.com> Signed-off-by: AWSHurneyt <hurneyt@amazon.com> Signed-off-by: prudhvigodithi <pgodithi@amazon.com> Signed-off-by: AWSHurneyt <hurneyt@amazon.com> Co-authored-by: Prudhvi Godithi <pgodithi@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> * Removed the extra forward slash leading to a non-existing documentation (#231) (#244) * Change alignment of Snapshot Management panels in pages/Main/Main.tsx (#236) (#241) * Version increment 2.3.0 (#247) * Add RestoreActivitiesPanel component folder, files (starter) 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> * Add refresh button to restore activities page, remove auto refreshing Signed-off-by: Chris Hesterman <phestech@amazon.com> * Added release notes for 2.3 (#250) (#254) * Added release notes for 2.3 Signed-off-by: Chris Hesterman <phestech@amazon.com> * Remove commit 221, move 229 to Maintenance, add 250 to Documentation Signed-off-by: Chris Hesterman <phestech@amazon.com> * Move 230 to Maintenance, 229 back to Bug fixes Signed-off-by: Chris Hesterman <phestech@amazon.com> * Move 229 back to Maintenance Signed-off-by: Chris Hesterman <phestech@amazon.com> Signed-off-by: Chris Hesterman <phestech@amazon.com> (cherry picked from commit 248a2fe) Signed-off-by: Angie Zhang <langelzh@amazon.com> Signed-off-by: Chris Hesterman <phestech@amazon.com> Signed-off-by: Angie Zhang <langelzh@amazon.com> Co-authored-by: phestecAMZN <111526961+phestecAMZN@users.noreply.github.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> * Changes to RestoreActivitesPanel to prep for listing indice 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> * 2.x _2.3 release notes, added 's' to 'Enhancement' header (#259) * Version increament 2.3.0 Signed-off-by: Chris Hesterman <phestech@amazon.com> * Update OSD version in cypress-workflow.yml Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add 2.3 release notes, added 's' to 'Enhancement' header Signed-off-by: Chris Hesterman <phestech@amazon.com> 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> * 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> * 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> * Small mods to rollups_spec and snapshots_spec Signed-off-by: Chris Hesterman <phestech@amazon.com> * Backport #276 to 2.x, Snapshot restore - basic restore functionality (#279) * Version increament 2.3.0 Signed-off-by: Chris Hesterman <phestech@amazon.com> * Update OSD version in cypress-workflow.yml Signed-off-by: Chris Hesterman <phestech@amazon.com> * Snapshot Restore, basic restore functionality with basic options. Initial PR (#276) * 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 back line 20 in rollups_spec, required by changes in 2.3 release. 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> * Change 2.3 to 2.3.0, cypress-workflow.yml Signed-off-by: Chris Hesterman <phestech@amazon.com> * Comment out line 20 rollups_spec.js causing error in PR E2E Signed-off-by: Chris Hesterman <phestech@amazon.com> * Change 2.2 to 2.3 unit-tests-workflow.yml Signed-off-by: Chris Hesterman <phestech@amazon.com> * Uncomment line 19, rollups_spec.js to attempt E2E success on github Signed-off-by: Chris Hesterman <phestech@amazon.com> * Fix url, change "Sample" to "sample" rollups_spec lines 17, 21 Signed-off-by: Chris Hesterman <phestech@amazon.com> * Change "sample data" to "Add data" rollops_spec.js Signed-off-by: Chris Hesterman <phestech@amazon.com> All of these variations pass seamlessly when run locally. Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add 10s wait line19, rollups_spec to help find button next step Signed-off-by: Chris Hesterman <phestech@amazon.com> Signed-off-by: Chris Hesterman <phestech@amazon.com> (cherry picked from commit f7db4af) * Change 2.3 to 2.3.0, cypress-workflow.yml Signed-off-by: Chris Hesterman <phestech@amazon.com> Signed-off-by: Chris Hesterman <phestech@amazon.com> * Change 2.3 to 2.3.0 in cypress-workflow.yml Signed-off-by: Chris Hesterman <phestech@amazon.com> * Select indices individually to fix test, line62, snapshots_spec Signed-off-by: Chris Hesterman <phestech@amazon.com> * Remove vertical space, snapshots_spec Signed-off-by: Chris Hesterman <phestech@amazon.com> * Backport - 2.x => 2.4 (#286) * Bump 2.x to 2.4 Signed-off-by: Chris Hesterman <phestech@amazon.com> 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 2.4, TODO rollups_spec, remove 'wait' when possible snapshots_spec Signed-off-by: Chris Hesterman <phestech@amazon.com> * Small changes to AddPrefixInput.test, opensearch_dashboards.json Signed-off-by: Chris Hesterman <phestech@amazon.com> * Changes in response to comments Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add comment to assist reader, RestoreActivitiesPanel Signed-off-by: Chris Hesterman <phestech@amazon.com> * Replace '!' with '?', line 31 RestoreActivitiesPanel Signed-off-by: Chris Hesterman <phestech@amazon.com> * Add typing to RestoreActivitiesPanel FC Signed-off-by: Chris Hesterman <phestech@amazon.com> * Memoize actions, RestoreActivitiesPanel Signed-off-by: Chris Hesterman <phestech@amazon.com> Signed-off-by: AWSHurneyt <hurneyt@amazon.com> Signed-off-by: Chris Hesterman <phestech@amazon.com> Signed-off-by: prudhvigodithi <pgodithi@amazon.com> Signed-off-by: Angie Zhang <langelzh@amazon.com> Co-authored-by: AWSHurneyt <hurneyt@amazon.com> Co-authored-by: opensearch-trigger-bot[bot] <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Co-authored-by: Prudhvi Godithi <pgodithi@amazon.com> Co-authored-by: Angie Zhang <langelzh@amazon.com>
opensearch-project · Oct 21, 2022 · 233e52c · 233e52c
1 parent 0aac214
commit 233e52c
Show file tree

Hide file tree

Showing 12 changed files with 308 additions and 24 deletions.
diff --git a/cypress.json b/cypress.json
@@ -2,11 +2,12 @@
   "viewportHeight": 900,
   "viewportWidth": 1440,
   "defaultCommandTimeout": 10000,
+  "nodeVersion": "system",
   "env": {
     "opensearch_url": "localhost:9200",
     "opensearch_dashboards": "http://localhost:5601",
     "security_enabled": false,
     "username": "admin",
     "password": "admin"
   }
-}
+}
diff --git a/cypress/integration/snapshots_spec.js b/cypress/integration/snapshots_spec.js
@@ -69,8 +69,6 @@ describe("Snapshots", () => {
       cy.get(`[data-test-subj="indicesComboBoxInput"]`).type("test_index_2{enter}");
       cy.get(`[data-test-subj="indicesComboBoxInput"]`).type("test_index_3{enter}");
 
-
-
       // Click 'Add' button to create snapshot
       cy.get("button").contains("Add", { timeout: 3000 }).click({ force: true });
 
@@ -119,7 +117,6 @@ describe("Snapshots", () => {
 
       cy.contains("Deleted snapshot");
       cy.contains("No items found");
-
     });
   })
 });
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -4,6 +4,7 @@
  */
 
 const { API, INDEX, ADMIN_AUTH } = require("./constants");
+const { NODE_API } = require("../../server/utils/constants")
 
 // ***********************************************
 // This example commands.js shows you how to
@@ -79,7 +80,7 @@ Cypress.Commands.overwrite("request", (originalFn, ...args) => {
 });
 
 Cypress.Commands.add("deleteAllIndices", () => {
-  cy.request("DELETE", `${Cypress.env("opensearch")}/index*,sample*,opensearch_dashboards*`);
+  cy.request("DELETE", `${Cypress.env("opensearch")}/index*,sample*,opensearch_dashboards*,test*`);
   cy.request("DELETE", `${Cypress.env("opensearch")}/.opendistro-ism*?expand_wildcards=all`);
 });
 
@@ -121,6 +122,10 @@ Cypress.Commands.add("createIndex", (index, policyID = null, settings = {}) => {
   }
 });
 
+Cypress.Commands.add("deleteSnapshot", (repository, snapshot) => {
+  cy.request("DELETE", `${Cypress.env("opensearch")}${NODE_API._SNAPSHOTS}/${repository}/${snapshot}`)
+})
+
 Cypress.Commands.add("createRollup", (rollupId, rollupJSON) => {
   cy.request("PUT", `${Cypress.env("opensearch")}${API.ROLLUP_JOBS_BASE}/${rollupId}`, rollupJSON);
 });

diff --git a/public/pages/Snapshots/components/RestoreActivitiesPanel/RestoreActivitiesPanel.tsx b/public/pages/Snapshots/components/RestoreActivitiesPanel/RestoreActivitiesPanel.tsx
@@ -0,0 +1,157 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiInMemoryTable, EuiSpacer, EuiLink, EuiFlyout, EuiButton } from "@elastic/eui";
+import _ from "lodash";
+import React, { useEffect, useContext, useState, useMemo } from "react";
+import { SnapshotManagementService } from "../../../../services";
+import { CoreServicesContext } from "../../../../components/core_services";
+import { getErrorMessage } from "../../../../utils/helpers";
+import { GetIndexRecoveryResponse, CatSnapshotIndex } from "../../../../../server/models/interfaces";
+import { BREADCRUMBS } from "../../../../utils/constants";
+import { ContentPanel } from "../../../../components/ContentPanel";
+
+interface RestoreActivitiesPanelProps {
+  snapshotManagementService: SnapshotManagementService;
+  snapshotId: string;
+  repository: string;
+}
+
+export const RestoreActivitiesPanel: React.FC<RestoreActivitiesPanelProps> = ({ snapshotManagementService, snapshotId }: RestoreActivitiesPanelProps) => {
+  const context = useContext(CoreServicesContext);
+  const [startTime, setStartTime] = useState("");
+  const [stopTime, setStopTime] = useState("");
+  const [stage, setStage] = useState("");
+  const [indices, setIndices] = useState([{}]);
+  const [flyout, setFlyout] = useState(false);
+
+  useEffect(() => {
+    context?.chrome.setBreadcrumbs([BREADCRUMBS.SNAPSHOT_MANAGEMENT, BREADCRUMBS.SNAPSHOTS, BREADCRUMBS.SNAPSHOT_RESTORE]);
+    getRestoreStatus();
+  }, []);
+
+  const getRestoreStatus = async () => {
+    if (stage.indexOf("DONE") >= 0) {
+      return;
+    }
+    try {
+      const res = await snapshotManagementService.getIndexRecovery();
+
+      if (res.ok) {
+        const response: GetIndexRecoveryResponse = res.response;
+
+        setRestoreStatus(response);
+      } else {
+        context?.notifications.toasts.addDanger(res.error);
+      }
+    } catch (err) {
+      context?.notifications.toasts.addDanger(getErrorMessage(err, "There was a problem loading the recovery."));
+    }
+  };
+
+  const onIndexesClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setFlyout(true);
+  };
+
+  const onCloseFlyout = () => {
+    setFlyout(false);
+  };
+
+  const setRestoreStatus = (response: GetIndexRecoveryResponse) => {
+    let minStartTime: number = 0;
+    let maxStopTime: number = 0;
+    let stageIndex: number = Infinity;
+    let doneCount: number = 0;
+    const indexes: CatSnapshotIndex[] = [];
+    const stages: string[] = ["START", "INIT", "INDEX", "FINALIZE", "DONE"];
+
+    // Loop through indices in response, filter out kibana index, 
+    // gather progress info then use it to create progress field values.
+    for (let item in response) {
+      if (item.indexOf("kibana") < 0) {
+        const info = response[item as keyof GetIndexRecoveryResponse].shards[0]
+        const stage = stages.indexOf(info.stage);
+        const size = `${(info.index.size.total_in_bytes / 1024 ** 2).toFixed(2)}mb`;
+
+        const time = {
+          start_time: info.start_time_in_millis,
+          stop_time: info.stop_time_in_millis,
+        };
+
+        doneCount = stage === stages.length - 1 ? doneCount + 1 : doneCount;
+        stageIndex = stage < stageIndex ? stage : stageIndex;
+        minStartTime = minStartTime && minStartTime < time.start_time ? minStartTime : time.start_time;
+        maxStopTime = maxStopTime && maxStopTime > time.stop_time ? maxStopTime : time.stop_time;
+
+        if (info.source.index) {
+          indexes.push({ index: info.source.index, "store.size": size });
+        }
+      }
+    }
+    let percent = Math.floor((doneCount / indices.length) * 100);
+    percent = stageIndex === stages.length - 1 ? 100 : percent;
+
+    setStartTime(new Date(minStartTime).toLocaleString().replace(",", "  "));
+    setStopTime(new Date(maxStopTime).toLocaleString().replace(",", "  "));
+    setIndices(indexes);
+    setStage(`${stages[stageIndex]} (${percent}%)`);
+  };
+
+  const actions = useMemo(() => {
+    [
+      <EuiButton iconType="refresh" onClick={getRestoreStatus} data-test-subj="refreshStatusButton">
+        Refresh
+      </EuiButton>,
+    ];
+  }, [])
+
+  const indexes = `${indices.length} ${indices.length === 1 ? "Index" : "Indices"}`;
+  const restoreStatus = [
+    {
+      start_time: startTime,
+      stop_time: stopTime,
+      snapshot: snapshotId,
+      status: stage,
+      indexes: indexes,
+    },
+  ];
+  const columns = [
+    {
+      field: "start_time",
+      name: "Start time",
+    },
+    {
+      field: "stop_time",
+      name: "Completion time",
+    },
+    {
+      field: "snapshot",
+      name: "Snapshot name",
+    },
+    {
+      field: "status",
+      name: "Status",
+    },
+    {
+      field: "indexes",
+      name: "Indices being restored",
+      render: (text: object) => <EuiLink onClick={onIndexesClick}>{text}</EuiLink>,
+    },
+  ];
+
+  return (
+    <>
+      {flyout && <EuiFlyout ownFocus={false} maxWidth={600} onClose={onCloseFlyout} size="m"></EuiFlyout>}
+      <ContentPanel title="Restore activities in progress" actions={actions}>
+        <EuiInMemoryTable items={restoreStatus} columns={columns} pagination={false} />
+        <EuiSpacer size="xxl" />
+        <EuiSpacer size="xxl" />
+        <EuiSpacer size="xxl" />
+        <EuiSpacer size="xxl" />
+      </ContentPanel>
+    </>
+  );
+};
diff --git a/public/pages/Snapshots/components/RestoreActivitiesPanel/index.ts b/public/pages/Snapshots/components/RestoreActivitiesPanel/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { RestoreActivitiesPanel } from "./RestoreActivitiesPanel";
+
+export default RestoreActivitiesPanel;
diff --git a/public/pages/Snapshots/containers/Snapshots/Snapshots.tsx b/public/pages/Snapshots/containers/Snapshots/Snapshots.tsx
@@ -6,7 +6,7 @@
 import React, { Component } from "react";
 import _ from "lodash";
 import { RouteComponentProps } from "react-router-dom";
-import { EuiButton, EuiInMemoryTable, EuiLink, EuiTableFieldDataColumnType, EuiText } from "@elastic/eui";
+import { EuiButton, EuiInMemoryTable, EuiLink, EuiTableFieldDataColumnType, EuiText, EuiPageHeader } from "@elastic/eui";
 import { FieldValueSelectionFilterConfigType } from "@elastic/eui/src/components/search_bar/filters/field_value_selection_filter";
 import { CoreServicesContext } from "../../../../components/core_services";
 import { SnapshotManagementService, IndexService } from "../../../../services";
@@ -16,6 +16,7 @@ import { ContentPanel } from "../../../../components/ContentPanel";
 import SnapshotFlyout from "../../components/SnapshotFlyout/SnapshotFlyout";
 import CreateSnapshotFlyout from "../../components/CreateSnapshotFlyout";
 import RestoreSnapshotFlyout from "../../components/RestoreSnapshotFlyout";
+import RestoreActivitiesPanel from "../../components/RestoreActivitiesPanel";
 import { Snapshot } from "../../../../../models/interfaces";
 import { BREADCRUMBS, RESTORE_SNAPSHOT_DOCUMENTATION_URL, ROUTES } from "../../../../utils/constants";
 import { renderTimestampMillis } from "../../../SnapshotPolicies/helpers";
@@ -31,6 +32,7 @@ interface SnapshotsState {
   snapshots: SnapshotsWithRepoAndPolicy[];
   existingPolicyNames: string[];
   loadingSnapshots: boolean;
+  snapshotPanel: boolean;
 
   selectedItems: SnapshotsWithRepoAndPolicy[];
 
@@ -57,6 +59,7 @@ export default class Snapshots extends Component<SnapshotsProps, SnapshotsState>
       snapshots: [],
       existingPolicyNames: [],
       loadingSnapshots: false,
+      snapshotPanel: true,
       selectedItems: [],
       showFlyout: false,
       flyoutSnapshotId: "",
@@ -240,20 +243,51 @@ export default class Snapshots extends Component<SnapshotsProps, SnapshotsState>
     this.setState({ showRestoreFlyout: false });
   };
 
+  onClickTab = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    const { selectedItems } = this.state;
+    const target = e.currentTarget;
+    const snapshotPanel = target.textContent === "Snapshots" ? true : false;
+    const prev = target.previousElementSibling;
+    const next = target.nextElementSibling;
+
+    if (selectedItems.length === 0) {
+      this.context.notifications.toasts.addWarning("Please select a snapshot to view restore activities");
+      return;
+    }
+
+    this.context.chrome.setBreadcrumbs([BREADCRUMBS.SNAPSHOT_MANAGEMENT, BREADCRUMBS.SNAPSHOTS]);
+
+    target.ariaSelected = "true";
+    target.classList.add("euiTab-isSelected");
+
+    if (prev) {
+      prev.classList.remove("euiTab-isSelected");
+      prev.ariaSelected = "false";
+    }
+    if (next) {
+      next.classList.remove("euiTab-isSelected");
+      next.ariaSelected = "false";
+    }
+
+    this.setState({ snapshotPanel: snapshotPanel });
+  };
+
   render() {
     const {
       snapshots,
       existingPolicyNames,
       selectedItems,
       loadingSnapshots,
+      snapshotPanel,
       showFlyout,
       flyoutSnapshotId,
       flyoutSnapshotRepo,
       showCreateFlyout,
       showRestoreFlyout,
       isDeleteModalVisible,
     } = this.state;
-
+    const { indexService, snapshotManagementService } = this.props;
     const repos = [...new Set(snapshots.map((snapshot) => snapshot.repository))];
     const status = [...new Set(snapshots.map((snapshot) => snapshot.status))];
     const search = {
@@ -314,24 +348,48 @@ export default class Snapshots extends Component<SnapshotsProps, SnapshotsState>
 
     return (
       <>
-        <ContentPanel title="Snapshots" actions={actions} subTitleText={subTitleText}>
-          <EuiInMemoryTable
-            items={snapshots}
-            itemId={(item) => `${item.repository}:${item.id}`}
-            columns={this.columns}
-            pagination={true}
-            sorting={{
-              sort: {
-                field: "end_epoch",
-                direction: "desc",
-              },
-            }}
-            isSelectable={true}
-            selection={{ onSelectionChange: this.onSelectionChange }}
-            search={search}
-            loading={loadingSnapshots}
+        <EuiPageHeader
+          tabs={[
+            {
+              label: "Snapshots",
+              isSelected: true,
+              onClick: this.onClickTab,
+            },
+            {
+              label: "Restore activities in progress",
+              onClick: this.onClickTab,
+            },
+          ]}
+          paddingSize="l"
+          onClick={this.onClickTab}
+        />
+        {snapshotPanel || (
+          <RestoreActivitiesPanel
+            snapshotManagementService={snapshotManagementService}
+            indexService={indexService}
+            snapshotId={selectedItems[0].id}
           />
-        </ContentPanel>
+        )}
+        {snapshotPanel && (
+          <ContentPanel title="Snapshots" actions={actions} subTitleText={subTitleText}>
+            <EuiInMemoryTable
+              items={snapshots}
+              itemId={(item) => `${item.repository}:${item.id}`}
+              columns={this.columns}
+              pagination={true}
+              sorting={{
+                sort: {
+                  field: "end_epoch",
+                  direction: "desc",
+                },
+              }}
+              isSelectable={true}
+              selection={{ onSelectionChange: this.onSelectionChange }}
+              search={search}
+              loading={loadingSnapshots}
+            />
+          </ContentPanel>
+        )}
 
         {showFlyout && (
           <SnapshotFlyout