fix review comments

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

@@ -26,7 +26,7 @@ export const MIGRATION_STEP = {
   },
   COMPATIBILITY_CHECK: {
     key: 'COMPATIBILITY_CHECK',
-    description: 'Check opensearch compatibility with datanode',
+    description: 'Check OpenSearch compatibility with datanode',
   },
   MANUAL_MIGRATION_STEP: {
     key: 'MANUAL_MIGRATION_STEP',
@@ -49,7 +49,7 @@ export const MIGRATION_STATE = {
   },
   CA_CREATION_PAGE: {
     key: 'CA_CREATION_PAGE',
-    description: 'Certificate autority',
+    description: 'Certificate authority',
   },
   RENEWAL_POLICY_CREATION_PAGE: {
     key: 'RENEWAL_POLICY_CREATION_PAGE',
@@ -81,19 +81,19 @@ export const MIGRATION_STATE = {
   },
   RESTART_GRAYLOG: {
     key: 'RESTART_GRAYLOG',
-    description: 'Update configuration file and restart graylog',
+    description: 'Update configuration file and restart Graylog',
   },
   REMOTE_REINDEX_WELCOME_PAGE: {
     key: 'REMOTE_REINDEX_WELCOME_PAGE',
     description: 'Remote reindexing migration',
   },
   PROVISION_DATANODE_CERTIFICATES_PAGE: {
     key: 'PROVISION_DATANODE_CERTIFICATES_PAGE',
-    description: 'Provision data node with certificates',
+    description: 'Provision Data Node with certificates',
   },
   PROVISION_DATANODE_CERTIFICATES_RUNNING: {
     key: 'PROVISION_DATANODE_CERTIFICATES_RUNNING',
-    description: 'Provision data node with certificates running',
+    description: 'Provision Data Node with certificates running',
   },
   EXISTING_DATA_MIGRATION_QUESTION_PAGE: {
     key: 'EXISTING_DATA_MIGRATION_QUESTION_PAGE',
@@ -121,7 +121,7 @@ export const MIGRATION_STATE = {
   },
   PROVISION_ROLLING_UPGRADE_NODES_RUNNING: {
     key: 'PROVISION_ROLLING_UPGRADE_NODES_RUNNING',
-    description: 'Provisionning data nodes certificate.',
+    description: 'Provisionning Data Nodes certificate.',
   },
   JOURNAL_SIZE_DOWNTIME_WARNING: {
     key: 'JOURNAL_SIZE_DOWNTIME_WARNING',
@@ -186,7 +186,7 @@ export const MIGRATION_ACTIONS = {
   },
   PROVISION_DATANODE_CERTIFICATES: {
     key: 'PROVISION_DATANODE_CERTIFICATES',
-    label: 'Provision data nodes with certificates',
+    label: 'Provision Data Nodes with certificates',
   },
   SKIP_EXISTING_DATA_MIGRATION: {
     key: 'SKIP_EXISTING_DATA_MIGRATION',

graylog2-web-interface/src/components/datanode/DataNodeConfiguration/CAConfiguration.tsx

@@ -26,7 +26,7 @@ const CAConfiguration = () => (
     <h2>Configure Certificate Authority</h2>
     <p>
       In this first step you can either upload or create a new certificate authority.<br />
-      Using it we can provision your data nodes with certificates easily.
+      Using it we can provision your Data Nodes with certificates easily.
     </p>
     <Tabs defaultActiveKey={TAB_KEYS[0]} id="ca-configurations">
       <Tab eventKey={TAB_KEYS[0]} title="Create new CA">

graylog2-web-interface/src/components/datanode/DataNodeConfiguration/CACreateForm.tsx

@@ -55,7 +55,7 @@ const CaCreateForm = () => {
       <p>
         Here you can quickly create a new certificate authority.
         All you need to do is to click on the &ldquo;Create CA&rdquo; button.
-        The CA should only be used to secure your Graylog data nodes.
+        The CA should only be used to secure your Graylog Data Nodes.
       </p>
       <Formik initialValues={{ organization: 'Graylog CA' }} onSubmit={(formValues: FormValues) => onSubmit(formValues)}>
         {({ isSubmitting, isValid }) => (

graylog2-web-interface/src/components/datanode/DataNodeConfiguration/CertificateRenewal.tsx

@@ -61,7 +61,7 @@ const useDataNodes = () => {
     queryKey: ['data-nodes', 'overview'],
     queryFn: fetchDataNodes,
     onError: (errorThrown) => {
-      UserNotification.error(`Loading data nodes failed with status: ${errorThrown}`,
+      UserNotification.error(`Loading Data Nodes failed with status: ${errorThrown}`,
         'Could not load streams');
     },
     keepPreviousData: true,
@@ -153,9 +153,9 @@ const CertificateRenewal = () => {
     <div>
       <h2>Certificate Renewal & Provisioning</h2>
       <p>
-        Here you can manually trigger the certificate renewal or provisioning for Graylog data nodes.
+        Here you can manually trigger the certificate renewal or provisioning for Graylog Data Nodes.
         It is only necessary to manually provision certificates when the renewal policy mode &quot;Manual&quot; is configured and
-        data nodes have been started after the initial certificate provisioning.
+        Data Nodes have been started after the initial certificate provisioning.
       </p>
 
       {!!sortedDataNodes?.length && (
@@ -190,7 +190,7 @@ const CertificateRenewal = () => {
       {isInitialLoadingDataNodes && <Spinner />}
       {(!sortedDataNodes?.length && !isInitialLoadingDataNodes) && (
         <Alert>
-          No data nodes have been found.
+          No Data Nodes have been found.
         </Alert>
       )}
     </div>

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

@@ -30,6 +30,5 @@ const CertificateRenewalStep = ({ currentStep, onTriggerStep }: MigrationStepCom
     {(currentStep.next_steps.length <= 0) && (<p>Please create a certificate renewal policy before proceeding.</p>)}
     <MigrationStepTriggerButtonToolbar nextSteps={currentStep.next_steps} onTriggerStep={onTriggerStep} />
   </>
-
 );
 export default CertificateRenewalStep;

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

@@ -58,7 +58,7 @@ describe('CompatibilityCheckStep', () => {
     render(<CompatibilityCheckStep onTriggerStep={() => {}} currentStep={currentStep} />);
 
     await screen.findByRole('heading', {
-      name: /Your existing opensearch data can be migrated to data node\./i,
+      name: /Your existing OpenSearch data can be migrated to Data Node\./i,
     });
   });
 
@@ -78,7 +78,7 @@ describe('CompatibilityCheckStep', () => {
     render(<CompatibilityCheckStep onTriggerStep={() => {}} currentStep={currentStep} />);
 
     await screen.findByRole('heading', {
-      name: /your existing opensearch data cannot be migrated to data node\./i,
+      name: /your existing OpenSearch data cannot be migrated to Data Node\./i,
     });
   });
 });

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

@@ -42,10 +42,10 @@ const CompatibilityCheckStep = ({ currentStep, onTriggerStep }: MigrationStepCom
     <>
       <h3>Directory compatibility check</h3>
       <CompatibilityAlert bsStyle={(!isError && isCompatible) ? 'success' : 'danger'}>
-        {isCompatible && <h4>Your existing opensearch data can be migrated to data node.</h4>}
+        {isCompatible && <h4>Your existing OpenSearch data can be migrated to Data Node.</h4>}
         {!isError && !isCompatible && (
           <>
-            <h4>Your existing opensearch data cannot be migrated to data node.</h4>
+            <h4>Your existing OpenSearch data cannot be migrated to Data Node.</h4>
             <br />
             Error: {data?.compatibility_errors.map((error) => <dd key={error}>{error}</dd>)}
           </>
@@ -57,7 +57,7 @@ const CompatibilityCheckStep = ({ currentStep, onTriggerStep }: MigrationStepCom
           </>
         )}
       </CompatibilityAlert>
-      {!isCompatible && (<p>Your Opensearch cluster cannot be migrated to this data node version because it&apos;s not compatible</p>)}
+      {!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={currentStep.next_steps} onTriggerStep={onTriggerStep} />

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

@@ -28,13 +28,15 @@ type Props = {
     nodes: Array<NodeInfo>,
     opensearch_data_location: string,
   }
-}
+};
+
 const Grid = styled.div`
   display: grid;
   grid-template-columns: 25% 75%;
   grid-gap: 0.5rem;
   margin-bottom: 1rem;
 `;
+
 const StyledSpan = styled.span`
   display: block;
   clear: both;
@@ -51,7 +53,7 @@ const CompatibilityStatus = ({ opensearchVersion, nodeInfo }: Props) => {
   return (
     <Grid>
       <div>
-        <StyledSpan><strong>Datanode Opensearch version</strong>: {opensearchVersion}</StyledSpan>
+        <StyledSpan><strong>Datanode OpenSearch version</strong>: {opensearchVersion}</StyledSpan>
         <StyledSpan><strong>OpenSearch data location</strong>: {opensearchLocation}</StyledSpan>
       </div>
       <div>

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

@@ -30,29 +30,29 @@ const MigrationDatanodeList = () => {
   const { data: dataNodes, isInitialLoading } = useDataNodes();
 
   if (isInitialLoading) {
-    return <Spinner text="Loading data nodes" />;
+    return <Spinner text="Loading Data Nodes" />;
   }
 
   return (
     <div>
       {(!dataNodes || dataNodes?.elements.length === 0) ? (
         <>
-          <p><StyledIcon name="info-circle" />There are no data nodes found.</p>
-          <Alert bsStyle="warning" title="No data nodes found">
-            Please start at least a data node to continue the migration process. You can find more information on how to start a data nodes in our <DocumentationLink page="graylog-data-node" text="documentation" />.
+          <p><StyledIcon name="info-circle" />There are no Data Nodes found.</p>
+          <Alert bsStyle="warning" title="No Data Nodes found">
+            Please start at least a Data Node to continue the migration process. You can find more information on how to start a Data Nodes in our <DocumentationLink page="graylog-data-node" text="documentation" />.
           </Alert>
-          <p><Spinner text="Looking for data nodes..." /></p>
+          <p><Spinner text="Looking for Data Nodes..." /></p>
         </>
       ) : (
         <>
-          <h4>Data nodes found:</h4>
+          <h4>Data Nodes found:</h4>
           <br />
           <Table bordered condensed striped hover>
             <thead>
               <tr>
                 <th>Hostname</th>
                 <th>Transport address</th>
-                <th>status</th>
+                <th>Status</th>
                 <th>Certificate valid until</th>
               </tr>
             </thead>

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

@@ -52,15 +52,15 @@ const MigrationWelcomeStep = ({ currentStep, onTriggerStep }: Props) => (
   <Row>
     <Col md={6}>
       <MigrationError errorMessage={currentStep.error_message} />
-      <Headline>Migration to Data node !</Headline>
+      <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.
+        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.
       </p>
       <p>
-        Using this migration tool you can check the compatibility and follow the steps to migrate your exsisting Opensearch data to a Data node.<br />
+        Using this migration tool you can check the compatibility and follow the steps to migrate your exsisting OpenSearch data to a Data Node.<br />
       </p>
-      <p>Migrating to data node require some step the are performed using the UI in this wizard, but it also require some additional step that should be performed on the OS, you current OS/ES cluster and you config files</p>
-      <p>You can get more information on the Data node migration <DocumentationLink page="graylog-data-node" text="documentation" /></p>
+      <p>Migrating to Data Node requires some steps the are performed using the UI in this wizard, but it also requires some additional steps that should be performed on the OS, your current OS/ES cluster and your config files.</p>
+      <p>You can get more information on the Data Node migration <DocumentationLink page="graylog-data-node" text="documentation" />.</p>
       <br />
       <MigrationDatanodeList />
       <MigrationStepTriggerButtonToolbar nextSteps={currentStep.next_steps} onTriggerStep={onTriggerStep} />

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

@@ -15,6 +15,7 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import * as React from 'react';
+import styled from 'styled-components';
 
 import CompatibilityCheckStep from 'components/datanode/migrations/CompatibilityCheckStep';
 import { Spinner, Wizard } from 'components/common';
@@ -28,6 +29,14 @@ import MigrationWelcomeStep from 'components/datanode/migrations/MigrationWelcom
 import CertificateRenewalStep from 'components/datanode/migrations/CertificateRenewalStep';
 import MigrationFinishedStep from 'components/datanode/migrations/MigrationFinishedStep';
 
+const StyledWizard = styled(Wizard)`
+  .migration-wizard{
+    .nav > li > a {
+      background-color: red !important;
+    }
+  }
+`;
+
 const MigrationWizard = () => {
   const { step: currentStep, isLoading } = useMigrationWizardStep();
   const { onTriggerNextState } = useTriggerMigrationState();
@@ -76,13 +85,13 @@ const MigrationWizard = () => {
   ];
 
   return (
-    <Wizard steps={steps}
-            activeStep={activeStep}
-            onStepChange={() => {}}
-            horizontal
-            justified
-            containerClassName=""
-            hidePreviousNextButtons />
+    <StyledWizard steps={steps}
+                  activeStep={activeStep}
+                  onStepChange={() => {}}
+                  horizontal
+                  justified
+                  containerClassName="migration-wizard"
+                  hidePreviousNextButtons />
   );
 };
 

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

@@ -40,6 +40,7 @@ const StyledTitle = styled.h3`
     font-size: 80%;
   }
 `;
+
 const StyledPanelGroup = styled(PanelGroup)`
   &.panel-group > .panel {
     margin-top: 0;
@@ -121,7 +122,6 @@ const RemoteReindexingMigration = ({ currentStep, onTriggerNextStep }: Props) =>
             </Panel>
           );
         })}
-
       </StyledPanelGroup>
     </Col>
   );

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

@@ -31,14 +31,16 @@ import MigrationError from 'components/datanode/migrations/common/MigrationError
 type Props = {
     currentStep: MigrationState,
     onTriggerNextStep: (step: MigrationActions, args: StepArgs) => void,
-}
+};
+
 const StyledTitle = styled.h3`
   margin-bottom: 10px;
 
   & > small {
     font-size: 80%;
   }
 `;
+
 const StyledPanelGroup = styled(PanelGroup)`
   &.panel-group > .panel {
     margin-top: 0;
@@ -91,9 +93,9 @@ const RollingUpgradeMigration = ({ currentStep, onTriggerNextStep }: Props) => {
 
   return (
     <Col>
-      <StyledTitle>Rolling upgrade migration.</StyledTitle>
-      <p>Follow these steps to migrate your existing migrating an existing OpenSearch 2.x or 1.3.x cluster to Data
-        Node
+      <StyledTitle>Rolling upgrade migration</StyledTitle>
+      <p>Follow these steps to migrate your existing OpenSearch version 2.x or 1.3.x cluster to the Data
+        Node.
       </p>
       <StyledPanelGroup accordion id="first" activeKey={activeStep} onSelect={() => {}}>
         {ROLLING_UPGRADE_MIGRATION_STEPS.map((rollingUpgradeStep, index) => {

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

@@ -22,7 +22,7 @@ import { Space } from 'preflight/components/common';
 
 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>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>

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

@@ -22,11 +22,10 @@ import { Space } from 'preflight/components/common';
 
 const ShutdownClusterStep = ({ currentStep, onTriggerStep }: MigrationStepComponentProps) => (
   <>
-    <p>The migration from your current <code>Opensearch</code> to the data node is almost done.</p>
-    <p>to finish please shut down your <code>Opensearch</code> cluster before continuing.</p>
+    <p>The migration from your current <code>OpenSearch</code> to the Data Node is almost done.</p>
+    <p>to finish please shut down your <code>OpenSearch</code> cluster before continuing.</p>
     <Space h="md" />
     <MigrationStepTriggerButtonToolbar nextSteps={currentStep.next_steps} onTriggerStep={onTriggerStep} />
   </>
-
 );
 export default ShutdownClusterStep;

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

@@ -30,7 +30,7 @@ const Welcome = ({ currentStep, onTriggerStep } : MigrationStepComponentProps) =
     <>
       <h3>Welcome</h3>
       <p>Using the Remote Reindexing will allow you to move the datanode by reindexing the data in your existing cluster to the datanode cluster.</p>
-      <p>To start please install Data node on every OS/ES node from you previous setup. You can fing more information on how to download and install the data node  <DocumentationLink page="graylog-data-node" text="here" />.</p>
+      <p>To start please install Data Node on every OS/ES node from you previous setup. You can fing more information on how to download and install the Data Node  <DocumentationLink page="graylog-data-node" text="here" />.</p>
       <MigrationDatanodeList />
       <MigrationStepTriggerButtonToolbar disabled={dataNodes?.elements?.length <= 0} nextSteps={currentStep.next_steps} onTriggerStep={onTriggerStep} />
     </>

graylog2-web-interface/src/components/datanode/migrations/rollingUpgrade/CertificatesProvisioning.tsx

@@ -40,14 +40,14 @@ const CertificatesProvisioning = ({ currentStep, onTriggerStep }: MigrationStepC
       {isProvisioningOverview && (
       <p>
         Certificate authority has been configured successfully.<br />
-        You can now provision certificate for your data nodes.
+        You can now provision certificate for your Data Nodes.
       </p>
       )}
       {(isProvisioningRunning && !haveNextStep) && (
       <Spinner text="Provisioning certificate" />
       )}
       {(isProvisioningRunning && haveNextStep) && (
-      <Alert bsStyle="success">Provisioning the data node finished.</Alert>
+      <Alert bsStyle="success">Provisioning the Data Node finished.</Alert>
       )}
       <MigrationDatanodeList />
       <br />

graylog2-web-interface/src/components/datanode/migrations/rollingUpgrade/JournalDowntimeWarning.tsx

@@ -29,12 +29,13 @@ const DownsizeWarning = styled(Alert)`
 const JournalDowntimeWarning = ({ currentStep, onTriggerStep }: MigrationStepComponentProps) => (
   <>
     <h3>Journal downtime size warning</h3>
-    <p>Please note that during migration you will have to stop processing on your graylog node, this will result in the journal growing in size.</p>
+    <p>Please note that during migration you will have to stop processing on your Graylog node, this will result in the journal growing in size.</p>
     <p>Therefore you will have to increase your journal volume size during the Journal size downsize step or earlier.</p>
     <DownsizeWarning bsStyle="danger">
       <p>Please make sure your journal volume size is enough before proceeding.</p>
     </DownsizeWarning>
     <MigrationStepTriggerButtonToolbar nextSteps={currentStep.next_steps} onTriggerStep={onTriggerStep} />
   </>
 );
+
 export default JournalDowntimeWarning;