Move existing DataNode config into separate page

changelog/unreleased/issue-17085.toml

@@ -0,0 +1,5 @@
+type = "added"
+message = "Move existing DataNode config into separate page."
+
+issues = ["17085"]
+pulls = ["17104"]

graylog2-web-interface/src/components/configurations/DataNodeConfiguration/CertificateRenewalPolicyConfig.tsx → 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

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;

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))

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>

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,

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;

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,

graylog2-web-interface/src/routing/AppRouter.tsx

@@ -18,11 +18,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 +33,7 @@ import {
   CreateEventDefinitionPage,
   CreateEventNotificationPage,
   CreateExtractorsPage,
+  DataNodesPage,
   DelegatedSearchPage,
   EditEventDefinitionPage,
   EditEventNotificationPage,
@@ -104,6 +100,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 +242,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 && (

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',