From 5a586a267b1aeed322974882f842736b91cdaba9 Mon Sep 17 00:00:00 2001
From: Mohamed Ould Hocine <mohamed.ould.hocine@graylog.com>
Date: Fri, 27 Oct 2023 17:12:02 +0200
Subject: [PATCH 1/4] Move existing DataNode config into separate page

---
 .../CertificateRenewal.tsx                    |  0
 .../CertificateRenewalPolicyConfig.tsx        |  2 +-
 .../DataNodeConfiguration.tsx                 |  0
 .../DataNodeConfiguration/index.tsx           |  0
 .../datanode/DataNodesPageNavigation.tsx      | 35 +++++++++++++++
 .../src/components/navigation/SystemMenu.tsx  |  3 ++
 .../src/pages/ConfigurationsPage.tsx          | 10 -----
 .../src/pages/DataNodesPage.tsx               | 43 +++++++++++++++++++
 graylog2-web-interface/src/pages/index.jsx    |  2 +
 .../src/routing/AppRouter.tsx                 | 14 +++---
 graylog2-web-interface/src/routing/Routes.ts  |  3 ++
 11 files changed, 94 insertions(+), 18 deletions(-)
 rename graylog2-web-interface/src/components/{configurations => datanode}/DataNodeConfiguration/CertificateRenewal.tsx (100%)
 rename graylog2-web-interface/src/components/{configurations => datanode}/DataNodeConfiguration/CertificateRenewalPolicyConfig.tsx (99%)
 rename graylog2-web-interface/src/components/{configurations => datanode}/DataNodeConfiguration/DataNodeConfiguration.tsx (100%)
 rename graylog2-web-interface/src/components/{configurations => datanode}/DataNodeConfiguration/index.tsx (100%)
 create mode 100644 graylog2-web-interface/src/components/datanode/DataNodesPageNavigation.tsx
 create mode 100644 graylog2-web-interface/src/pages/DataNodesPage.tsx

diff --git a/graylog2-web-interface/src/components/configurations/DataNodeConfiguration/CertificateRenewal.tsx b/graylog2-web-interface/src/components/datanode/DataNodeConfiguration/CertificateRenewal.tsx
similarity index 100%
rename from graylog2-web-interface/src/components/configurations/DataNodeConfiguration/CertificateRenewal.tsx
rename to graylog2-web-interface/src/components/datanode/DataNodeConfiguration/CertificateRenewal.tsx
diff --git a/graylog2-web-interface/src/components/configurations/DataNodeConfiguration/CertificateRenewalPolicyConfig.tsx b/graylog2-web-interface/src/components/datanode/DataNodeConfiguration/CertificateRenewalPolicyConfig.tsx
similarity index 99%
rename from graylog2-web-interface/src/components/configurations/DataNodeConfiguration/CertificateRenewalPolicyConfig.tsx
rename to graylog2-web-interface/src/components/datanode/DataNodeConfiguration/CertificateRenewalPolicyConfig.tsx
index 635637c526b7..a395ecbfd623 100644
--- a/graylog2-web-interface/src/components/configurations/DataNodeConfiguration/CertificateRenewalPolicyConfig.tsx
+++ b/graylog2-web-interface/src/components/datanode/DataNodeConfiguration/CertificateRenewalPolicyConfig.tsx
@@ -86,7 +86,7 @@ const smallestUnit = (duration: string) => {
 const fetchCurrentConfig = () => ConfigurationsActions.list(ConfigurationType.CERTIFICATE_RENEWAL_POLICY_CONFIG) as Promise<RenewalPolicy>;
 
 const NoExistingPolicy = ({ createPolicy }: { createPolicy: () => void }) => (
-  <span>There is no Certificate Renewal Policy yet. Click
+  <span>There is no Certificate Renewal Policy yet. Click&nbsp;
     <Button onClick={createPolicy}
             bsSize="xsmall"
             bsStyle="primary">here
diff --git a/graylog2-web-interface/src/components/configurations/DataNodeConfiguration/DataNodeConfiguration.tsx b/graylog2-web-interface/src/components/datanode/DataNodeConfiguration/DataNodeConfiguration.tsx
similarity index 100%
rename from graylog2-web-interface/src/components/configurations/DataNodeConfiguration/DataNodeConfiguration.tsx
rename to graylog2-web-interface/src/components/datanode/DataNodeConfiguration/DataNodeConfiguration.tsx
diff --git a/graylog2-web-interface/src/components/configurations/DataNodeConfiguration/index.tsx b/graylog2-web-interface/src/components/datanode/DataNodeConfiguration/index.tsx
similarity index 100%
rename from graylog2-web-interface/src/components/configurations/DataNodeConfiguration/index.tsx
rename to graylog2-web-interface/src/components/datanode/DataNodeConfiguration/index.tsx
diff --git a/graylog2-web-interface/src/components/datanode/DataNodesPageNavigation.tsx b/graylog2-web-interface/src/components/datanode/DataNodesPageNavigation.tsx
new file mode 100644
index 000000000000..82f0293462cc
--- /dev/null
+++ b/graylog2-web-interface/src/components/datanode/DataNodesPageNavigation.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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 * as React from 'react';
+
+import PageNavigation from 'components/common/PageNavigation';
+import Routes from 'routing/Routes';
+import { Row } from 'components/bootstrap';
+
+const NAV_ITEMS = [
+  { title: 'Overview', path: Routes.SYSTEM.DATANODES.OVERVIEW, exactPathMatch: true },
+  { title: 'Monitoring & Management', path: Routes.SYSTEM.DATANODES.OVERVIEW },
+  { title: 'Migrations', path: Routes.SYSTEM.DATANODES.OVERVIEW },
+];
+
+const DataNodesPageNavigation = () => (
+  <Row>
+    <PageNavigation items={NAV_ITEMS} />
+  </Row>
+);
+
+export default DataNodesPageNavigation;
diff --git a/graylog2-web-interface/src/components/navigation/SystemMenu.tsx b/graylog2-web-interface/src/components/navigation/SystemMenu.tsx
index 33aa3cb34fcb..c19b4c2607ef 100644
--- a/graylog2-web-interface/src/components/navigation/SystemMenu.tsx
+++ b/graylog2-web-interface/src/components/navigation/SystemMenu.tsx
@@ -98,6 +98,9 @@ const SystemMenu = () => {
       <HideOnCloud>
         <NavigationLink path={Routes.SYSTEM.NODES.LIST} description="Nodes" />
       </HideOnCloud>
+      <HideOnCloud>
+        <NavigationLink path={Routes.SYSTEM.DATANODES.OVERVIEW} description="Data Nodes" />
+      </HideOnCloud>
       <IfPermitted permissions={['inputs:read']}>
         {showInputs ? <NavigationLink path={Routes.SYSTEM.INPUTS} description="Inputs" /> : null}
       </IfPermitted>
diff --git a/graylog2-web-interface/src/pages/ConfigurationsPage.tsx b/graylog2-web-interface/src/pages/ConfigurationsPage.tsx
index a3f39298d50f..ec0888b4e41f 100644
--- a/graylog2-web-interface/src/pages/ConfigurationsPage.tsx
+++ b/graylog2-web-interface/src/pages/ConfigurationsPage.tsx
@@ -35,7 +35,6 @@ import PermissionsConfig from 'components/configurations/PermissionsConfig';
 import PluginsConfig from 'components/configurations/PluginsConfig';
 import 'components/maps/configurations';
 import useCurrentUser from 'hooks/useCurrentUser';
-import DataNodeConfiguration from 'components/configurations/DataNodeConfiguration/DataNodeConfiguration';
 import { LinkContainer } from 'components/common/router';
 import useLocation from 'routing/useLocation';
 
@@ -163,15 +162,6 @@ const ConfigurationsPage = () => {
         title: 'Index Set Defaults',
       },
     },
-    {
-      name: 'Data Node',
-      hide: isCloud,
-      SectionComponent: ConfigurationSection,
-      props: {
-        ConfigurationComponent: DataNodeConfiguration,
-        title: 'Certificate Renewal Policy',
-      },
-    },
     {
       name: 'Plugins',
       SectionComponent: PluginsConfig,
diff --git a/graylog2-web-interface/src/pages/DataNodesPage.tsx b/graylog2-web-interface/src/pages/DataNodesPage.tsx
new file mode 100644
index 000000000000..c0efedb0cd50
--- /dev/null
+++ b/graylog2-web-interface/src/pages/DataNodesPage.tsx
@@ -0,0 +1,43 @@
+/*
+ * 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 from 'react';
+
+import { Row, Col } from 'components/bootstrap';
+import { DocumentTitle, PageHeader } from 'components/common';
+import DocsHelper from 'util/DocsHelper';
+import DataNodeConfiguration from 'components/datanode/DataNodeConfiguration/DataNodeConfiguration';
+
+const DataNodesPage = () => (
+  <DocumentTitle title="Data Nodes">
+    <PageHeader title="Data Nodes"
+                documentationLink={{
+                  title: 'Data Nodes documentation',
+                  path: DocsHelper.PAGES.GRAYLOG_DATA_NODE,
+                }}>
+      <span>
+        Graylog data nodes offer a better integration with Graylog and simplify future updates. They allow you to index and search through all the messages in your Graylog message database.
+      </span>
+    </PageHeader>
+    <Row className="content">
+      <Col md={12}>
+        <DataNodeConfiguration />
+      </Col>
+    </Row>
+  </DocumentTitle>
+);
+
+export default DataNodesPage;
diff --git a/graylog2-web-interface/src/pages/index.jsx b/graylog2-web-interface/src/pages/index.jsx
index 0668401f1149..48a60938235e 100644
--- a/graylog2-web-interface/src/pages/index.jsx
+++ b/graylog2-web-interface/src/pages/index.jsx
@@ -30,6 +30,7 @@ const CreateEventDefinitionPage = loadAsync(() => import('./CreateEventDefinitio
 const CreateEventNotificationPage = loadAsync(() => import('./CreateEventNotificationPage'));
 const CreateContentPackPage = loadAsync(() => import('pages/CreateContentPackPage'));
 const CreateExtractorsPage = loadAsync(() => import('./CreateExtractorsPage'));
+const DataNodesPage = loadAsync(() => import('./DataNodesPage'));
 const DelegatedSearchPage = loadAsync(() => import('./DelegatedSearchPage'));
 const EditEventDefinitionPage = loadAsync(() => import('./EditEventDefinitionPage'));
 const EditEventNotificationPage = loadAsync(() => import('./EditEventNotificationPage'));
@@ -113,6 +114,7 @@ export {
   CreateEventNotificationPage,
   CreateContentPackPage,
   CreateExtractorsPage,
+  DataNodesPage,
   DelegatedSearchPage,
   EditEventDefinitionPage,
   EditEventNotificationPage,
diff --git a/graylog2-web-interface/src/routing/AppRouter.tsx b/graylog2-web-interface/src/routing/AppRouter.tsx
index 13a38a84fa81..ca882c356678 100644
--- a/graylog2-web-interface/src/routing/AppRouter.tsx
+++ b/graylog2-web-interface/src/routing/AppRouter.tsx
@@ -17,12 +17,6 @@
 import React from 'react';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import type { PluginRoute } from 'graylog-web-plugin';
-
-import App from 'routing/App';
-import PageContentLayout from 'components/layout/PageContentLayout';
-import AppConfig from 'util/AppConfig';
-import RoutePaths from 'routing/Routes';
-import { appPrefixed } from 'util/URLUtils';
 import {
   AuthenticationCreatePage,
   AuthenticationBackendCreatePage,
@@ -38,6 +32,7 @@ import {
   CreateEventDefinitionPage,
   CreateEventNotificationPage,
   CreateExtractorsPage,
+  DataNodesPage,
   DelegatedSearchPage,
   EditEventDefinitionPage,
   EditEventNotificationPage,
@@ -104,6 +99,11 @@ import {
   ViewEventDefinitionPage,
   SidecarFailureTrackingPage,
 } from 'pages';
+import AppConfig from 'util/AppConfig';
+import { appPrefixed } from 'util/URLUtils';
+import App from 'routing/App';
+import PageContentLayout from 'components/layout/PageContentLayout';
+import RoutePaths from 'routing/Routes';
 import RouterErrorBoundary from 'components/errors/RouterErrorBoundary';
 import usePluginEntities from 'hooks/usePluginEntities';
 import GlobalContextProviders from 'contexts/GlobalContextProviders';
@@ -241,7 +241,7 @@ const AppRouter = () => {
             { path: RoutePaths.SYSTEM.METRICS(':nodeId'), element: <ShowMetricsPage /> },
             !isCloud && { path: RoutePaths.SYSTEM.NODES.LIST, element: <NodesPage /> },
             !isCloud && { path: RoutePaths.SYSTEM.NODES.SHOW(':nodeId'), element: <ShowNodePage /> },
-
+            !isCloud && { path: RoutePaths.SYSTEM.DATANODES.OVERVIEW, element: <DataNodesPage /> },
             !isCloud && { path: RoutePaths.SYSTEM.OUTPUTS, element: <SystemOutputsPage /> },
 
             !isCloud && (
diff --git a/graylog2-web-interface/src/routing/Routes.ts b/graylog2-web-interface/src/routing/Routes.ts
index 6281ebdf64a3..8e7de51b5ac2 100644
--- a/graylog2-web-interface/src/routing/Routes.ts
+++ b/graylog2-web-interface/src/routing/Routes.ts
@@ -102,6 +102,9 @@ const Routes = {
       LIST: '/system/nodes',
       SHOW: (nodeId: string) => `/system/nodes/${nodeId}`,
     },
+    DATANODES: {
+      OVERVIEW: '/system/datanodes',
+    },
     THREADDUMP: (nodeId: string) => `/system/threaddump/${nodeId}`,
     OUTPUTS: '/system/outputs',
     OVERVIEW: '/system/overview',

From 6883d4e2ed6cf587ee11873114df44dcb641f35b Mon Sep 17 00:00:00 2001
From: Mohamed Ould Hocine <mohamed.ould.hocine@graylog.com>
Date: Fri, 27 Oct 2023 17:27:07 +0200
Subject: [PATCH 2/4] add changelog file

---
 changelog/unreleased/issue-17085.toml | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 changelog/unreleased/issue-17085.toml

diff --git a/changelog/unreleased/issue-17085.toml b/changelog/unreleased/issue-17085.toml
new file mode 100644
index 000000000000..9164ed0ba1b6
--- /dev/null
+++ b/changelog/unreleased/issue-17085.toml
@@ -0,0 +1,5 @@
+type = "added"
+message = "Move existing DataNode config into separate page."
+
+issues = ["17085"]
+pulls = ["17104"]

From fadc9931cb5edaabbbc0fe749693147143f0bce4 Mon Sep 17 00:00:00 2001
From: Mohamed Ould Hocine <mohamed.ould.hocine@graylog.com>
Date: Mon, 30 Oct 2023 10:39:23 +0100
Subject: [PATCH 3/4] fix eslint issue

---
 graylog2-web-interface/src/routing/AppRouter.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/graylog2-web-interface/src/routing/AppRouter.tsx b/graylog2-web-interface/src/routing/AppRouter.tsx
index ca882c356678..b9b94cc51501 100644
--- a/graylog2-web-interface/src/routing/AppRouter.tsx
+++ b/graylog2-web-interface/src/routing/AppRouter.tsx
@@ -17,6 +17,7 @@
 import React from 'react';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import type { PluginRoute } from 'graylog-web-plugin';
+
 import {
   AuthenticationCreatePage,
   AuthenticationBackendCreatePage,

From b6595286c3566bc349e41efb626f55618f949cce Mon Sep 17 00:00:00 2001
From: Mohamed Ould Hocine <mohamed.ould.hocine@graylog.com>
Date: Mon, 30 Oct 2023 10:39:35 +0100
Subject: [PATCH 4/4] fix tests

---
 .../components/navigation/SystemMenu.test.tsx | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/graylog2-web-interface/src/components/navigation/SystemMenu.test.tsx b/graylog2-web-interface/src/components/navigation/SystemMenu.test.tsx
index b09044581611..dfdca5012b4c 100644
--- a/graylog2-web-interface/src/components/navigation/SystemMenu.test.tsx
+++ b/graylog2-web-interface/src/components/navigation/SystemMenu.test.tsx
@@ -69,20 +69,20 @@ describe('SystemMenu', () => {
 
     it.each`
     permissions                    | count | links
-    ${[]}                          | ${2}  | ${['Overview', 'Nodes']}
-    ${['clusterconfigentry:read']} | ${3}  | ${['Configurations']}
-    ${['inputs:read']}             | ${3}  | ${['Inputs']}
-    ${['grok_pattern:read']}       | ${3}  | ${['Grok Patterns']}
-    ${['outputs:read']}            | ${3}  | ${['Outputs']}
-    ${['indices:read']}            | ${3}  | ${['Indices']}
-    ${['loggers:read']}            | ${3}  | ${['Logging']}
-    ${['authentication:edit']}     | ${3}  | ${['Authentication']}
-    ${['users:list']}              | ${3}  | ${['Users and Teams']}
-    ${['roles:read']}              | ${3}  | ${['Roles']}
-    ${['contentpack:read']}        | ${3}  | ${['Content Packs']}
-    ${['lookuptables:read']}       | ${3}  | ${['Lookup Tables']}
-    ${['sidecars:read']}           | ${3}  | ${['Sidecars']}
-    ${['pipeline:read', 'pipeline_connection:read']} | ${3}  | ${['Pipelines']}
+    ${[]}                          | ${3}  | ${['Overview', 'Nodes', 'Data Nodes']}
+    ${['clusterconfigentry:read']} | ${4}  | ${['Configurations']}
+    ${['inputs:read']}             | ${4}  | ${['Inputs']}
+    ${['grok_pattern:read']}       | ${4}  | ${['Grok Patterns']}
+    ${['outputs:read']}            | ${4}  | ${['Outputs']}
+    ${['indices:read']}            | ${4}  | ${['Indices']}
+    ${['loggers:read']}            | ${4}  | ${['Logging']}
+    ${['authentication:edit']}     | ${4}  | ${['Authentication']}
+    ${['users:list']}              | ${4}  | ${['Users and Teams']}
+    ${['roles:read']}              | ${4}  | ${['Roles']}
+    ${['contentpack:read']}        | ${4}  | ${['Content Packs']}
+    ${['lookuptables:read']}       | ${4}  | ${['Lookup Tables']}
+    ${['sidecars:read']}           | ${4}  | ${['Sidecars']}
+    ${['pipeline:read', 'pipeline_connection:read']} | ${4}  | ${['Pipelines']}
   `('shows $links for user with $permissions permissions', ({ permissions, count, links }) => {
       asMock(useCurrentUser).mockReturnValue(adminUser.toBuilder()
         .permissions(Immutable.List(permissions))