Show tasks progress in Remote Reindex Migration

changelog/unreleased/pr-19657.toml

@@ -0,0 +1,4 @@
+type = "a"
+message = "Show tasks progress in Remote Reindex Migration"
+
+pulls = ["19657"]

graylog2-web-interface/src/components/datanode/migrations/common/RemoteReindexProgressBar.tsx

@@ -0,0 +1,85 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import { ProgressBar } from 'components/common';
+import { Button } from 'components/bootstrap';
+
+import type { MigrationStatus, RemoteReindexMigration } from '../../hooks/useRemoteReindexMigrationStatus';
+
+const MainProgressBar = styled(ProgressBar)`
+  margin-bottom: 0;
+`;
+
+const TaskProgressBar = styled(ProgressBar)(({ theme }) => `
+  margin-top: ${theme.spacings.sm};
+  margin-bottom: ${theme.spacings.sm};
+`);
+
+const displayStatus = (status: MigrationStatus): string => {
+  switch (status) {
+    case 'NOT_STARTED':
+      return 'LOADING...';
+    case 'STARTING':
+      return 'STARTING...';
+    case 'RUNNING':
+      return 'RUNNING...';
+    default:
+      return status || '';
+  }
+};
+
+type Props = {
+  migrationStatus: RemoteReindexMigration;
+}
+
+const RemoteReindexProgressBar = ({ migrationStatus }: Props) => {
+  const [showTasks, setShowTasks] = useState<boolean>(false);
+
+  const progress = migrationStatus?.progress || 0;
+  const status = displayStatus(migrationStatus?.status);
+  const tasks_progress = migrationStatus?.tasks_progress || {};
+
+  return (
+    <>
+      <MainProgressBar bars={[{
+        animated: true,
+        value: progress,
+        bsStyle: 'info',
+        label: `${status} ${progress}%`,
+      }]} />
+      {Object.keys(tasks_progress).length > 0 && (
+        <>
+          <Button bsStyle="link" bsSize="xs" onClick={() => setShowTasks(!showTasks)}>
+            {showTasks ? 'Hide tasks' : 'Show tasks'}
+          </Button>
+          {showTasks && Object.keys(tasks_progress).map((task) => (
+            <TaskProgressBar bars={[{
+              animated: false,
+              value: tasks_progress[task] || 0,
+              bsStyle: 'info',
+              label: `${task} ${tasks_progress[task] || 0}%`,
+            }]} />
+          ))}
+        </>
+      )}
+    </>
+  );
+};
+
+export default RemoteReindexProgressBar;

graylog2-web-interface/src/components/datanode/migrations/remoteReindexing/RemoteReindexRunning.tsx

@@ -19,14 +19,14 @@ import { useState } from 'react';
 import styled, { css } from 'styled-components';
 import type { ColorVariant } from '@graylog/sawmill';
 
-import { ConfirmDialog, ProgressBar } from 'components/common';
+import { ConfirmDialog } from 'components/common';
 import { Alert, BootstrapModalWrapper, Button, Modal } from 'components/bootstrap';
 
 import type { MigrationStepComponentProps } from '../../Types';
 import MigrationStepTriggerButtonToolbar from '../common/MigrationStepTriggerButtonToolbar';
-import type { MigrationStatus } from '../../hooks/useRemoteReindexMigrationStatus';
 import useRemoteReindexMigrationStatus from '../../hooks/useRemoteReindexMigrationStatus';
 import { MIGRATION_ACTIONS } from '../../Constants';
+import RemoteReindexTasksProgress from '../common/RemoteReindexProgressBar';
 
 const IndicesContainer = styled.div`
   max-height: 100px;
@@ -61,19 +61,6 @@ const getColorVariantFromLogLevel = (logLovel: string): ColorVariant|undefined =
   }
 };
 
-const displayStatus = (status: MigrationStatus): string => {
-  switch (status) {
-    case 'NOT_STARTED':
-      return 'LOADING...';
-    case 'STARTING':
-      return 'STARTING...';
-    case 'RUNNING':
-      return 'RUNNING...';
-    default:
-      return status || '';
-  }
-};
-
 const RetryMigrateExistingData = 'RETRY_MIGRATE_EXISTING_DATA';
 
 const RemoteReindexRunning = ({ currentStep, onTriggerStep }: MigrationStepComponentProps) => {
@@ -90,13 +77,7 @@ const RemoteReindexRunning = ({ currentStep, onTriggerStep }: MigrationStepCompo
       once the data migration is finished you will be automatically transitioned to the next step.
       <br />
       <br />
-      <ProgressBar bars={[{
-        animated: true,
-        striped: true,
-        value: migrationStatus?.progress || 0,
-        bsStyle: 'info',
-        label: `${displayStatus(migrationStatus?.status)} ${migrationStatus?.progress || 0}%`,
-      }]} />
+      <RemoteReindexTasksProgress migrationStatus={migrationStatus} />
       {(indicesWithErrors.length > 0) && (
         <Alert title="Migration failed" bsStyle="danger">
           <IndicesContainer>
@@ -111,14 +92,14 @@ const RemoteReindexRunning = ({ currentStep, onTriggerStep }: MigrationStepCompo
       )}
       <MigrationStepTriggerButtonToolbar nextSteps={(nextSteps || currentStep.next_steps).filter((step) => step !== RetryMigrateExistingData)} onTriggerStep={handleTriggerStep}>
         <Button bsStyle="default" bsSize="small" onClick={() => setShowLogView(true)}>Log View</Button>
-        <Button bsStyle="default" bsSize="small" onClick={() => (hasMigrationFailed ? onTriggerStep(RetryMigrateExistingData) : setShowRetryMigrationConfirmDialog(true))}>{MIGRATION_ACTIONS[RetryMigrateExistingData]?.label}</Button>
+        <Button bsStyle="default" bsSize="small" onClick={() => (hasMigrationFailed ? handleTriggerStep(RetryMigrateExistingData) : setShowRetryMigrationConfirmDialog(true))}>{MIGRATION_ACTIONS[RetryMigrateExistingData]?.label}</Button>
       </MigrationStepTriggerButtonToolbar>
       {showRetryMigrationConfirmDialog && (
         <ConfirmDialog show={showRetryMigrationConfirmDialog}
                        title="Retry migrating existing data"
                        onCancel={() => setShowRetryMigrationConfirmDialog(false)}
                        onConfirm={() => {
-                         onTriggerStep(RetryMigrateExistingData);
+                         handleTriggerStep(RetryMigrateExistingData);
                          setShowRetryMigrationConfirmDialog(false);
                        }}>
           Are you sure you want to stop the current running remote reindexing migration and retry migrating existing data?