handle errors

graylog2-web-interface/src/components/datanode/Types.ts

@@ -85,7 +85,7 @@ export type MigrationStateItem = ExtractKeyValues<typeof MIGRATION_STATE>
 export type MigrationState = {
   state: MigrationStateItem,
   next_steps: Array<MigrationActions>,
-  error_message?: string|null,
+  error_message?: string | null,
   response?: { [_key: string]: unknown },
 }
 
@@ -99,6 +99,6 @@ export type StepArgs = {[_key: string]: unknown};
 
 export type OnTriggerStepFunction = (step: MigrationActions, args: StepArgs) => void
 export type MigrationStepComponentProps = {
-  nextSteps: Array<MigrationActions>,
+  currentStep: MigrationState,
   onTriggerStep: OnTriggerStepFunction,
 };

graylog2-web-interface/src/components/datanode/migrations/CAStep.tsx

@@ -20,12 +20,15 @@ import CAConfiguration from 'components/datanode/DataNodeConfiguration/CAConfigu
 import { Space } from 'preflight/components/common';
 import type { MigrationStepComponentProps } from 'components/datanode/Types';
 import MigrationStepTriggerButtonToolbar from 'components/datanode/migrations/common/MigrationStepTriggerButtonToolbar';
+import MigrationError from 'components/datanode/migrations/common/MigrationError';
 
-const CaStep = ({ nextSteps, onTriggerStep }: MigrationStepComponentProps) => (
+const CaStep = ({ currentStep, onTriggerStep }: MigrationStepComponentProps) => (
   <>
+    <MigrationError errorMessage={currentStep.error_message} />
     <CAConfiguration />
     <Space h="xs" />
-    <MigrationStepTriggerButtonToolbar nextSteps={nextSteps} onTriggerStep={onTriggerStep} />
+    {(currentStep.next_steps.length <= 0) && (<p>Please create a certificate Authority before proceeding.</p>)}
+    <MigrationStepTriggerButtonToolbar nextSteps={currentStep.next_steps} onTriggerStep={onTriggerStep} />
   </>
 );
 export default CaStep;

graylog2-web-interface/src/components/datanode/migrations/CertificateRenewalStep.tsx

@@ -20,12 +20,15 @@ import CertificateRenewalPolicyConfig from 'components/datanode/DataNodeConfigur
 import { Space } from 'preflight/components/common';
 import type { MigrationStepComponentProps } from 'components/datanode/Types';
 import MigrationStepTriggerButtonToolbar from 'components/datanode/migrations/common/MigrationStepTriggerButtonToolbar';
+import MigrationError from 'components/datanode/migrations/common/MigrationError';
 
-const CertificateRenewalStep = ({ nextSteps, onTriggerStep }: MigrationStepComponentProps) => (
+const CertificateRenewalStep = ({ currentStep, onTriggerStep }: MigrationStepComponentProps) => (
   <>
+    <MigrationError errorMessage={currentStep.error_message} />
     <CertificateRenewalPolicyConfig />
     <Space h="xs" />
-    <MigrationStepTriggerButtonToolbar nextSteps={nextSteps} onTriggerStep={onTriggerStep} />
+    {(currentStep.next_steps.length <= 0) && (<p>Please create a certificate renewal policy before proceeding.</p>)}
+    <MigrationStepTriggerButtonToolbar nextSteps={currentStep.next_steps} onTriggerStep={onTriggerStep} />
   </>
 
 );

graylog2-web-interface/src/components/datanode/migrations/CompatibilityCheckStep.test.tsx

@@ -20,6 +20,7 @@ import { render, screen } from 'wrappedTestingLibrary';
 import CompatibilityCheckStep from 'components/datanode/migrations/CompatibilityCheckStep';
 import { asMock } from 'helpers/mocking';
 import useCompatibilityCheck from 'components/datanode/hooks/useCompatibilityCheck';
+import type { MigrationState } from 'components/datanode/Types';
 
 jest.mock('components/datanode/hooks/useCompatibilityCheck', () => jest.fn(() => ({
   data: {
@@ -43,9 +44,18 @@ jest.mock('components/datanode/hooks/useCompatibilityCheck', () => jest.fn(() =>
   error: undefined,
 })));
 
+const currentStep = {
+  state: 'DIRECTORY_COMPATIBILITY_CHECK_PAGE',
+  next_steps: [
+    'SHOW_CA_CREATION',
+  ],
+  error_message: null,
+  response: null,
+} as MigrationState;
+
 describe('CompatibilityCheckStep', () => {
   it('should render CompatibilityCheckStep', async () => {
-    render(<CompatibilityCheckStep onTriggerStep={() => {}} nextSteps={[]} />);
+    render(<CompatibilityCheckStep onTriggerStep={() => {}} currentStep={currentStep} />);
 
     await screen.findByRole('heading', {
       name: /Your existing opensearch data can be migrated to data node\./i,
@@ -65,7 +75,7 @@ describe('CompatibilityCheckStep', () => {
       error: undefined,
     });
 
-    render(<CompatibilityCheckStep onTriggerStep={() => {}} nextSteps={[]} />);
+    render(<CompatibilityCheckStep onTriggerStep={() => {}} currentStep={currentStep} />);
 
     await screen.findByRole('heading', {
       name: /your existing opensearch data cannot be migrated to data node\./i,

graylog2-web-interface/src/components/datanode/migrations/CompatibilityCheckStep.tsx

@@ -29,7 +29,7 @@ const CompatibilityAlert = styled(Alert)`
   margin-bottom: 5px;
 `;
 
-const CompatibilityCheckStep = ({ nextSteps, onTriggerStep }: MigrationStepComponentProps) => {
+const CompatibilityCheckStep = ({ currentStep, onTriggerStep }: MigrationStepComponentProps) => {
   const { error: requestError, data, isInitialLoading, isError } = useCompatibilityCheck();
 
   if (isInitialLoading) {
@@ -60,7 +60,7 @@ const CompatibilityCheckStep = ({ nextSteps, onTriggerStep }: MigrationStepCompo
       {!isCompatible && (<p>Your Opensearch cluster cannot be migrated to this data node version because it&apos;s not compatible</p>)}
       {isCompatible && <CompatibilityStatus opensearchVersion={data.opensearch_version} nodeInfo={data.info} />}
 
-      <MigrationStepTriggerButtonToolbar nextSteps={nextSteps} onTriggerStep={onTriggerStep} />
+      <MigrationStepTriggerButtonToolbar nextSteps={currentStep.next_steps} onTriggerStep={onTriggerStep} />
     </>
   );
 };

graylog2-web-interface/src/components/datanode/migrations/ManualMigrationStep.tsx

@@ -29,6 +29,7 @@ import {
   ROLLING_UPGRADE_MIGRATION_STEPS,
 } from 'components/datanode/Constants';
 import RemoteReindexingMigration from 'components/datanode/migrations/RemoteReindexingMigration';
+import MigrationError from 'components/datanode/migrations/common/MigrationError';
 
 const ManualMigrationStep = () => {
   const migrationTypeOptions = [{ label: 'Rolling upgrade migration', value: 'SELECT_ROLLING_UPGRADE_MIGRATION' }, { label: 'Remote Re-indexing Migration', value: 'SELECT_REMOTE_REINDEX_MIGRATION' }];
@@ -62,6 +63,7 @@ const ManualMigrationStep = () => {
           </form>
         </Col>
       )}
+      <MigrationError errorMessage={currentStep.error_message} />
       {(currentStep && ROLLING_UPGRADE_MIGRATION_STEPS.includes(currentStep.state)) && <RollingUpgradeMigration onTriggerNextStep={onMigrationStepChange} currentStep={currentStep} />}
       {(currentStep && REMOTE_REINDEXING_MIGRATION_STEPS.includes(currentStep.state)) && <RemoteReindexingMigration onTriggerNextStep={onMigrationStepChange} currentStep={currentStep} />}
     </>

graylog2-web-interface/src/components/datanode/migrations/MigrationWelcomeStep.tsx

@@ -22,10 +22,11 @@ import { Icon } from 'components/common';
 import { DocumentationLink } from 'components/support';
 import MigrationDatanodeList from 'components/datanode/migrations/MigrationDatanodeList';
 import MigrationStepTriggerButtonToolbar from 'components/datanode/migrations/common/MigrationStepTriggerButtonToolbar';
-import type { MigrationActions, OnTriggerStepFunction } from 'components/datanode/Types';
+import type { MigrationState, OnTriggerStepFunction } from 'components/datanode/Types';
+import MigrationError from 'components/datanode/migrations/common/MigrationError';
 
 type Props = {
-  nextSteps: Array<MigrationActions>,
+  currentStep: MigrationState,
   onTriggerStep: OnTriggerStepFunction,
 };
 
@@ -47,9 +48,10 @@ const StyledHelpPanel = styled(StyledPanel)`
   margin-top: 30px;
 `;
 
-const MigrationWelcomeStep = ({ nextSteps, onTriggerStep }: Props) => (
+const MigrationWelcomeStep = ({ currentStep, onTriggerStep }: Props) => (
   <Row>
     <Col md={6}>
+      <MigrationError errorMessage={currentStep.error_message} />
       <Headline>Migration to Data node !</Headline>
       <p>
         It looks like you updated Graylog and want to configure a data node. Data nodes allow you to index and search through all the messages in your Graylog message database.
@@ -61,7 +63,7 @@ const MigrationWelcomeStep = ({ nextSteps, onTriggerStep }: Props) => (
       <p>You can get more information on the Data node migration <DocumentationLink page="graylog-data-node" text="documentation" /></p>
       <br />
       <MigrationDatanodeList />
-      <MigrationStepTriggerButtonToolbar nextSteps={nextSteps} onTriggerStep={onTriggerStep} />
+      <MigrationStepTriggerButtonToolbar nextSteps={currentStep.next_steps} onTriggerStep={onTriggerStep} />
     </Col>
     <Col md={6}>
       <StyledHelpPanel bsStyle="info">

graylog2-web-interface/src/components/datanode/migrations/MigrationWizard.tsx

@@ -40,28 +40,28 @@ const MigrationWizard = () => {
     onTriggerNextState({ step, args });
   };
 
-  const { state: activeStep, next_steps: nextSteps } = currentStep;
+  const { state: activeStep } = currentStep;
 
   const steps = [
     {
       key: MIGRATION_STATE.MIGRATION_WELCOME_PAGE.key,
       title: MIGRATION_STATE.MIGRATION_WELCOME_PAGE.description,
-      component: <MigrationWelcomeStep nextSteps={nextSteps} onTriggerStep={onTriggerStep} />,
+      component: <MigrationWelcomeStep currentStep={currentStep} onTriggerStep={onTriggerStep} />,
     },
     {
       key: MIGRATION_STATE.DIRECTORY_COMPATIBILITY_CHECK_PAGE.key,
       title: MIGRATION_STATE.DIRECTORY_COMPATIBILITY_CHECK_PAGE.description,
-      component: <CompatibilityCheckStep nextSteps={nextSteps} onTriggerStep={onTriggerStep} />,
+      component: <CompatibilityCheckStep currentStep={currentStep} onTriggerStep={onTriggerStep} />,
     },
     {
       key: MIGRATION_STATE.CA_CREATION_PAGE.key,
       title: MIGRATION_STATE.CA_CREATION_PAGE.description,
-      component: <CAStep nextSteps={nextSteps} onTriggerStep={onTriggerStep} />,
+      component: <CAStep currentStep={currentStep} onTriggerStep={onTriggerStep} />,
     },
     {
       key: MIGRATION_STATE.RENEWAL_POLICY_CREATION_PAGE.key,
       title: MIGRATION_STATE.RENEWAL_POLICY_CREATION_PAGE.description,
-      component: <CertificateRenewalStep nextSteps={nextSteps} onTriggerStep={onTriggerStep} />,
+      component: <CertificateRenewalStep currentStep={currentStep} onTriggerStep={onTriggerStep} />,
     },
     {
       key: MIGRATION_STATE.MIGRATION_SELECTION_PAGE.key,

graylog2-web-interface/src/components/datanode/migrations/RemoteReindexingMigration.tsx

@@ -23,6 +23,7 @@ import {
   REMOTE_REINDEXING_MIGRATION_STEPS,
 } from 'components/datanode/Constants';
 import type { MigrationActions, StepArgs, MigrationState, MigrationStateItem } from 'components/datanode/Types';
+import MigrationError from 'components/datanode/migrations/common/MigrationError';
 
 import Welcome from './remoteReindexing/Welcome';
 import ExistingDataMigrationQuestion from './remoteReindexing/ExistingDataMigrationQuestion';
@@ -68,7 +69,7 @@ type Props = {
 }
 
 const RemoteReindexingMigration = ({ currentStep, onTriggerNextStep }: Props) => {
-  const { next_steps: nextSteps, state: activeStep } = currentStep;
+  const { state: activeStep } = currentStep;
 
   const onStepComplete = (step: MigrationActions, args: StepArgs = {}) => {
     onTriggerNextStep(step, args);
@@ -77,22 +78,22 @@ const RemoteReindexingMigration = ({ currentStep, onTriggerNextStep }: Props) =>
   const getStepComponent = (step: MigrationStateItem) => {
     switch (step) {
       case MIGRATION_STATE.REMOTE_REINDEX_WELCOME_PAGE.key:
-        return <Welcome nextSteps={nextSteps} onTriggerStep={onStepComplete} />;
+        return <Welcome currentStep={currentStep} onTriggerStep={onStepComplete} />;
       case MIGRATION_STATE.PROVISION_DATANODE_CERTIFICATES_PAGE.key:
       case MIGRATION_STATE.PROVISION_DATANODE_CERTIFICATES_RUNNING.key:
-        return <CertificatesProvisioning nextSteps={nextSteps} onTriggerStep={onStepComplete} />;
+        return <CertificatesProvisioning currentStep={currentStep} onTriggerStep={onStepComplete} />;
       case MIGRATION_STATE.EXISTING_DATA_MIGRATION_QUESTION_PAGE.key:
-        return <ExistingDataMigrationQuestion nextSteps={nextSteps} onTriggerStep={onStepComplete} />;
+        return <ExistingDataMigrationQuestion currentStep={currentStep} onTriggerStep={onStepComplete} />;
       case MIGRATION_STATE.MIGRATE_EXISTING_DATA.key:
-        return <MigrateExistingData nextSteps={nextSteps} onTriggerStep={onStepComplete} />;
+        return <MigrateExistingData currentStep={currentStep} onTriggerStep={onStepComplete} />;
       case MIGRATION_STATE.REMOTE_REINDEX_RUNNING.key:
-        return <RemoteReindexRunning nextSteps={nextSteps} onTriggerStep={onStepComplete} />;
+        return <RemoteReindexRunning currentStep={currentStep} onTriggerStep={onStepComplete} />;
       case MIGRATION_STATE.ASK_TO_SHUTDOWN_OLD_CLUSTER.key:
-        return <ShutdownClusterStep nextSteps={nextSteps} onTriggerStep={onStepComplete} />;
+        return <ShutdownClusterStep currentStep={currentStep} onTriggerStep={onStepComplete} />;
       case MIGRATION_STATE.MANUALLY_REMOVE_OLD_CONNECTION_STRING_FROM_CONFIG.key:
-        return <ConnectionStringRemovalStep nextSteps={nextSteps} onTriggerStep={onStepComplete} />;
+        return <ConnectionStringRemovalStep currentStep={currentStep} onTriggerStep={onStepComplete} />;
       default:
-        return <Welcome nextSteps={nextSteps} onTriggerStep={onStepComplete} />;
+        return <Welcome currentStep={currentStep} onTriggerStep={onStepComplete} />;
     }
   };
 
@@ -114,6 +115,7 @@ const RemoteReindexingMigration = ({ currentStep, onTriggerNextStep }: Props) =>
                 </Panel.Title>
               </Panel.Heading>
               <Panel.Body collapsible>
+                <MigrationError errorMessage={currentStep.error_message} />
                 {getStepComponent(remoteReindexingStep)}
               </Panel.Body>
             </Panel>

graylog2-web-interface/src/components/datanode/migrations/RollingUpgradeMigration.tsx

@@ -26,6 +26,7 @@ import JournalDowntimeWarning from 'components/datanode/migrations/rollingUpgrad
 import StopMessageProcessing from 'components/datanode/migrations/rollingUpgrade/StopMessageProcessing';
 import CompatibilityCheckStep from 'components/datanode/migrations/CompatibilityCheckStep';
 import RestartGraylog from 'components/datanode/migrations/rollingUpgrade/RestartGraylog';
+import MigrationError from 'components/datanode/migrations/common/MigrationError';
 
 type Props = {
     currentStep: MigrationState,
@@ -62,7 +63,7 @@ const StyledPanelGroup = styled(PanelGroup)`
 `;
 
 const RollingUpgradeMigration = ({ currentStep, onTriggerNextStep }: Props) => {
-  const { next_steps: nextSteps, state: activeStep } = currentStep;
+  const { state: activeStep } = currentStep;
 
   const onStepComplete = (step: MigrationActions, args: StepArgs = {}) => {
     onTriggerNextStep(step, args);
@@ -71,20 +72,20 @@ const RollingUpgradeMigration = ({ currentStep, onTriggerNextStep }: Props) => {
   const getStepComponent = (step: MigrationStateItem) => {
     switch (step) {
       case MIGRATION_STATE.ROLLING_UPGRADE_MIGRATION_WELCOME_PAGE.key:
-        return <Welcome nextSteps={nextSteps} onTriggerStep={onStepComplete} />;
+        return <Welcome currentStep={currentStep} onTriggerStep={onStepComplete} />;
       case MIGRATION_STATE.DIRECTORY_COMPATIBILITY_CHECK_PAGE2.key:
-        return <CompatibilityCheckStep nextSteps={nextSteps} onTriggerStep={onStepComplete} />;
+        return <CompatibilityCheckStep currentStep={currentStep} onTriggerStep={onStepComplete} />;
       case MIGRATION_STATE.PROVISION_ROLLING_UPGRADE_NODES_WITH_CERTIFICATES.key:
       case MIGRATION_STATE.PROVISION_ROLLING_UPGRADE_NODES_RUNNING.key:
-        return <CertificatesProvisioning nextSteps={nextSteps} onTriggerStep={onStepComplete} />;
+        return <CertificatesProvisioning currentStep={currentStep} onTriggerStep={onStepComplete} />;
       case MIGRATION_STATE.JOURNAL_SIZE_DOWNTIME_WARNING.key:
-        return <JournalDowntimeWarning nextSteps={nextSteps} onTriggerStep={onStepComplete} />;
+        return <JournalDowntimeWarning currentStep={currentStep} onTriggerStep={onStepComplete} />;
       case MIGRATION_STATE.MESSAGE_PROCESSING_STOP.key:
-        return <StopMessageProcessing nextSteps={nextSteps} onTriggerStep={onStepComplete} />;
+        return <StopMessageProcessing currentStep={currentStep} onTriggerStep={onStepComplete} />;
       case MIGRATION_STATE.RESTART_GRAYLOG.key:
-        return <RestartGraylog nextSteps={nextSteps} onTriggerStep={onStepComplete} />;
+        return <RestartGraylog currentStep={currentStep} onTriggerStep={onStepComplete} />;
       default:
-        return <Welcome nextSteps={nextSteps} onTriggerStep={onStepComplete} />;
+        return <Welcome currentStep={currentStep} onTriggerStep={onStepComplete} />;
     }
   };
 
@@ -107,6 +108,7 @@ const RollingUpgradeMigration = ({ currentStep, onTriggerNextStep }: Props) => {
               </Panel.Heading>
               <Panel.Collapse>
                 <Panel.Body>
+                  <MigrationError errorMessage={currentStep.error_message} />
                   {getStepComponent(rollingUpgradeStep)}
                 </Panel.Body>
               </Panel.Collapse>

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

@@ -20,13 +20,13 @@ import type { MigrationStepComponentProps } from 'components/datanode/Types';
 import MigrationStepTriggerButtonToolbar from 'components/datanode/migrations/common/MigrationStepTriggerButtonToolbar';
 import { Space } from 'preflight/components/common';
 
-const ConnectionStringRemovalStep = ({ nextSteps, onTriggerStep }: MigrationStepComponentProps) => (
+const ConnectionStringRemovalStep = ({ currentStep, onTriggerStep }: MigrationStepComponentProps) => (
   <>
     <p>Please remove the <code>elasticsearch_hosts</code> line from you graylog configuration file (<code>graylog.conf</code>). </p>
     <p>Ex. <code>elasticsearch_hosts = https://admin:admin@opensearch1:9200,https://admin:admin@opensearch2:9200,https://admin:admin@opensearch3:9200</code></p>
     <Space h="md" />
     <p>Once that is done please proceed to the next step.</p>
-    <MigrationStepTriggerButtonToolbar nextSteps={nextSteps} onTriggerStep={onTriggerStep} />
+    <MigrationStepTriggerButtonToolbar nextSteps={currentStep.next_steps} onTriggerStep={onTriggerStep} />
   </>
 );
 export default ConnectionStringRemovalStep;

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

@@ -19,12 +19,12 @@ import * as React from 'react';
 import type { MigrationStepComponentProps } from '../../Types';
 import MigrationStepTriggerButtonToolbar from '../common/MigrationStepTriggerButtonToolbar';
 
-const ExistingDataMigrationQuestion = ({ nextSteps, onTriggerStep }: MigrationStepComponentProps) => (
+const ExistingDataMigrationQuestion = ({ currentStep, onTriggerStep }: MigrationStepComponentProps) => (
   <>
     Do you want to migrate your existing data?
     <br />
     <br />
-    <MigrationStepTriggerButtonToolbar nextSteps={nextSteps} onTriggerStep={onTriggerStep} />
+    <MigrationStepTriggerButtonToolbar nextSteps={currentStep.next_steps} onTriggerStep={onTriggerStep} />
   </>
 );
 

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

@@ -23,7 +23,7 @@ import type { RemoteReindexRequest } from '../../hooks/useRemoteReindexMigration
 import type { MigrationStepComponentProps } from '../../Types';
 import MigrationStepTriggerButtonToolbar from '../common/MigrationStepTriggerButtonToolbar';
 
-const MigrateExistingData = ({ nextSteps, onTriggerStep }: MigrationStepComponentProps) => {
+const MigrateExistingData = ({ currentStep, onTriggerStep }: MigrationStepComponentProps) => {
   const initialValues: RemoteReindexRequest = {
     hostname: '',
     user: '',
@@ -58,7 +58,7 @@ const MigrateExistingData = ({ nextSteps, onTriggerStep }: MigrationStepComponen
                  type="password"
                  value={values.password}
                  onChange={handleChange} />
-          <MigrationStepTriggerButtonToolbar nextSteps={nextSteps} onTriggerStep={onTriggerStep} args={values} />
+          <MigrationStepTriggerButtonToolbar nextSteps={currentStep.next_steps} onTriggerStep={onTriggerStep} args={values} />
         </Form>
       )}
     </Formik>