add datanode list, and skip check to welcome step

graylog2-web-interface/src/components/datanode/hooks/useDataNodes.ts

@@ -82,7 +82,7 @@ const fetchDataNodes = async (params?: Partial<SearchParams>) => {
   return fetch('GET', qualifyUrl(url));
 };
 
-type DataNodeResponse = {
+export type DataNodeResponse = {
   elements: DataNodes,
   pagination: PaginatedResponseType,
   attributes: Array<Attribute>

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

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import type { DataNodeResponse } from 'components/datanode/hooks/useDataNodes';
+import { Icon, Spinner } from 'components/common';
+import { Alert, Table } from 'components/bootstrap';
+import { DocumentationLink } from 'components/support';
+
+type Props = {
+  dataNodes: DataNodeResponse,
+}
+const StyledIcon = styled(Icon)`
+  margin-right: 0.5em;
+`;
+
+const MigrationDatanodeList = ({ dataNodes } : Props) => (
+  <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 datanode 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>
+      </>
+    ) : (
+      <>
+        <h4>Datanodes found:</h4>
+        <br />
+        <Table bordered condensed striped hover>
+          <thead>
+            <tr>
+              <th>Hostname</th>
+              <th>Transport address</th>
+              <th>status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {dataNodes.elements.map((datanode) => (
+              <tr>
+                <td>{datanode.hostname}</td>
+                <td>{datanode.transport_address}</td>
+                <td>{datanode.status}</td>
+              </tr>
+            ))}
+          </tbody>
+        </Table>
+      </>
+    )}
+  </div>
+);
+
+export default MigrationDatanodeList;

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

@@ -17,12 +17,15 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 
-import { Button, Panel } from 'components/bootstrap';
+import { Button, Col, Row, Panel, ButtonToolbar } from 'components/bootstrap';
 import { Icon } from 'components/common';
 import { DocumentationLink } from 'components/support';
+import MigrationDatanodeList from 'components/datanode/migrations/MigrationDatanodeList';
+import useDataNodes from 'components/datanode/hooks/useDataNodes';
 
 type Props = {
-    onStepComplete: () => void,
+  onStepComplete: () => void,
+  onSkipCompatibilityCheck: () => void,
 };
 const Headline = styled.h2`
   margin-top: 5px;
@@ -40,39 +43,51 @@ const StyledHelpPanel = styled(StyledPanel)`
   margin-top: 30px;
 `;
 
-const MigrationHelpStep = ({ onStepComplete }: Props) => (
-  <>
-    <Headline>Migration to Datanode !</Headline>
-    <p>
-      It looks like you updated Graylog and want to configure a data node.<br />
-      Data nodes allow you to index and search through all the messages in your Graylog message database.<br />
-    </p>
-    <p>
-      Using this migration tool you can check the compatibility and follow the steps to migrate your exsisting Opensearch data to a Datanode.<br />
-    </p>
-    <p>Migrating to datanode 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 documentation <DocumentationLink page="graylog-data-node" text="page" /></p>
-    <StyledHelpPanel bsStyle="info">
-      <Panel.Heading>
-        <Panel.Title componentClass="h3"><Icon name="info-circle" /> Migrating Elasticsearch 7.10</Panel.Title>
-      </Panel.Heading>
-      <Panel.Body>
+const MigrationHelpStep = ({ onStepComplete, onSkipCompatibilityCheck }: Props) => {
+  const { data: dataNodes } = useDataNodes();
+
+  return (
+    <Row>
+      <Col md={6}>
+        <Headline>Migration to Datanode !</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.
+        </p>
         <p>
-          <p>Migration from <code>Elasticsearch 7.10</code> needs an additional step. ES 7.10 does not understand JWT
-            authentication.
-            So you have to first migrate to OpenSearch before running the update of the security information. Look at
-            the supplied <code>es710-docker-compose.yml</code> as an example.
-          </p>
-          <p>Please note that except for the servicename, I changed the cluster name and hostnames etc. to opensearch.
-            In a regular setting, it would be the other way around and you would have to pull the elasticsearch names
-            through the whole process into the DataNode.
-          </p>
+          Using this migration tool you can check the compatibility and follow the steps to migrate your exsisting Opensearch data to a Datanode.<br />
         </p>
-      </Panel.Body>
-    </StyledHelpPanel>
-    <p>
-      <Button bsStyle="success" onClick={() => onStepComplete()}>Check Compatibility</Button>
-    </p>
-  </>
-);
+        <p>Migrating to datanode 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>
+        <br />
+        <MigrationDatanodeList dataNodes={dataNodes} />
+        <ButtonToolbar>
+          <Button bsStyle="success" disabled={!dataNodes} onClick={() => onStepComplete()}>Check Compatibility</Button>
+          <Button bsStyle="success" disabled={!dataNodes} onClick={() => onSkipCompatibilityCheck()}>Skip Compatibility check</Button>
+        </ButtonToolbar>
+      </Col>
+      <Col md={6}>
+        <StyledHelpPanel bsStyle="info">
+          <Panel.Heading>
+            <Panel.Title componentClass="h3"><Icon name="info-circle" /> Migrating Elasticsearch 7.10</Panel.Title>
+          </Panel.Heading>
+          <Panel.Body>
+            <p>
+              <p>Migration from <code>Elasticsearch 7.10</code> needs an additional step. ES 7.10 does not understand JWT
+                authentication.
+                So you have to first migrate to OpenSearch before running the update of the security information. Look at
+                the supplied <code>es710-docker-compose.yml</code> as an example.
+              </p>
+              <p>Please note that except for the servicename, I changed the cluster name and hostnames etc. to opensearch.
+                In a regular setting, it would be the other way around and you would have to pull the elasticsearch names
+                through the whole process into the DataNode.
+              </p>
+            </p>
+          </Panel.Body>
+        </StyledHelpPanel>
+      </Col>
+    </Row>
+  );
+};
+
 export default MigrationHelpStep;

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

@@ -39,7 +39,8 @@ const MigrationWizard = () => {
     {
       key: 'welcome',
       title: (<>Welcome</>),
-      component: <MigrationHelpStep onStepComplete={() => onWizardStepChange(STEP_KEYS[1])} />,
+      component: <MigrationHelpStep onStepComplete={() => onWizardStepChange(STEP_KEYS[1])}
+                                    onSkipCompatibilityCheck={() => onWizardStepChange(STEP_KEYS[2])} />,
     },
     {
       key: 'compatibility-check',