Centralized [LIST] view of Graylog cluster components

changelog/unreleased/pr-21058.toml

@@ -0,0 +1,5 @@
+type = "fixed"
+message = "Centralized view of Graylog cluster components"
+
+issues = ["20997"]
+pulls = ["21058"]

graylog2-web-interface/src/components/cluster-configuration/ClusterConfigurationClusterView.tsx

@@ -0,0 +1,54 @@
+/*
+ * 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 { Col, Row } from 'components/bootstrap';
+
+import ClusterConfigurationStatusLabel from './ClusterConfigurationStatusLabel';
+import type { ClusterNode } from './useClusterNodes';
+
+type Props = {
+  graylogNodes: ClusterNode[],
+  dataNodes: ClusterNode[],
+}
+
+const ClusterConfigurationClusterView = ({ graylogNodes, dataNodes }: Props) => (
+  <Row style={{ marginTop: 10 }}>
+    <Col md={3} sm={4} xs={6}>
+      <h6><b>Graylog</b></h6>
+      {graylogNodes.map((graylogNode) => (
+        <div style={{ marginTop: 10, padding: 10, border: '1px solid', borderRadius: '10px' }}>
+          <div>{graylogNode.nodeName}</div>
+          <div><small>{graylogNode.role}</small></div>
+          <ClusterConfigurationStatusLabel status={graylogNode.state} />
+        </div>
+      ))}
+    </Col>
+    <Col md={3} sm={4} xs={6}>
+      <h6><b>Data Node</b></h6>
+      {dataNodes.map((dataNode) => (
+        <div style={{ marginTop: 10, padding: 10, border: '1px solid', borderRadius: '10px', width: '100%' }}>
+          <div>{dataNode.nodeName}</div>
+          <div><small>{dataNode.role}</small></div>
+          <ClusterConfigurationStatusLabel status={dataNode.state} />
+        </div>
+      ))}
+    </Col>
+  </Row>
+);
+
+export default ClusterConfigurationClusterView;

graylog2-web-interface/src/components/cluster-configuration/ClusterConfigurationStatusLabel.tsx

@@ -0,0 +1,44 @@
+/*
+ * 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 styled from 'styled-components';
+
+import { Label } from 'components/bootstrap';
+
+const StatusLabel = styled(Label)`
+  display: inline-flex;
+  justify-content: center;
+  gap: 4px;
+`;
+
+type Props = {
+  status: string,
+};
+
+const ClusterConfigurationStatusLabel = ({ status }: Props) => {
+  const disabled = status !== 'Available';
+
+  return (
+    <StatusLabel bsStyle={disabled ? 'warning' : 'success'}
+                  title={status}
+                  aria-label={status}>
+      {status}
+    </StatusLabel>
+  );
+};
+
+export default ClusterConfigurationStatusLabel;

graylog2-web-interface/src/components/cluster-configuration/ClusterConfigurationTableView.tsx

@@ -0,0 +1,64 @@
+/*
+ * 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 { Table } from 'components/bootstrap';
+import MoreActions from 'components/common/EntityDataTable/MoreActions';
+
+import ClusterConfigurationStatusLabel from './ClusterConfigurationStatusLabel';
+import type { ClusterNode } from './useClusterNodes';
+
+type Props = {
+  graylogNodes: ClusterNode[],
+  dataNodes: ClusterNode[],
+}
+
+const ClusterConfigurationTableView = ({ graylogNodes, dataNodes }: Props) => (
+  <Table>
+    <thead>
+      <tr>
+        <th>Node</th>
+        <th>Type</th>
+        <th>Role</th>
+        <th>State</th>
+        <th className="text-right">Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      {graylogNodes.map((graylogNode) => (
+        <tr>
+          <td>{graylogNode.nodeName}</td>
+          <td>{graylogNode.type}</td>
+          <td>{graylogNode.role}</td>
+          <td><ClusterConfigurationStatusLabel status={graylogNode.state} /></td>
+          <td align='right'><MoreActions /></td>
+        </tr>
+      ))}
+      {dataNodes.map((dataNode) => (
+        <tr>
+          <td>{dataNode.nodeName}</td>
+          <td>{dataNode.type}</td>
+          <td>{dataNode.role}</td>
+          <td><ClusterConfigurationStatusLabel status={dataNode.state} /></td>
+          <td align='right'><MoreActions /></td>
+        </tr>
+      ))}
+    </tbody>
+  </Table>
+);
+
+export default ClusterConfigurationTableView;

graylog2-web-interface/src/components/cluster-configuration/useClusterNodes.ts

@@ -0,0 +1,54 @@
+/*
+ * 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 { useStore } from 'stores/connect';
+import useDataNodes from 'components/datanode/hooks/useDataNodes';
+import { NodesStore } from 'stores/nodes/NodesStore';
+
+export type ClusterNode = {
+  nodeName: string,
+  type: string,
+  role: string,
+  state: string,
+}
+
+const useClusterNodes = () : {
+  graylogNodes: ClusterNode[],
+  dataNodes: ClusterNode[],
+} => {
+  const { nodes: _graylogNodes } = useStore(NodesStore);
+  const graylogNodes = Object.values(_graylogNodes || {}).map((graylogNode) => ({
+    nodeName: `${graylogNode.short_node_id} / ${graylogNode.hostname}`,
+    type: 'Graylog',
+    role: graylogNode.is_leader ? 'Leader' : 'Non-Leader',
+    state: 'Available',
+  }));
+
+  const { data: _dataNodes } = useDataNodes();
+  const dataNodes = (_dataNodes?.list || []).map((dataNode) => ({
+    nodeName: dataNode.hostname,
+    type: 'Data Node - OpenSearch',
+    role: 'Cluster-Manager-Eligible',
+    state: 'Available',
+  }));
+
+  return ({
+    graylogNodes,
+    dataNodes,
+  });
+};
+
+export default useClusterNodes;

graylog2-web-interface/src/components/navigation/bindings.ts

@@ -49,6 +49,7 @@ const navigationBindings: PluginExports = {
           [
             { path: Routes.SYSTEM.OVERVIEW, description: 'Overview' },
             { path: Routes.SYSTEM.CONFIGURATIONS, description: 'Configurations', permissions: ['clusterconfigentry:read'] },
+            { path: Routes.SYSTEM.CLUSTER, description: 'Cluster Configurations' },
             { path: Routes.SYSTEM.NODES.LIST, description: 'Nodes' },
             { path: Routes.SYSTEM.DATANODES.LIST, description: 'Data Nodes', permissions: ['datanodes:read'] },
             { path: Routes.SYSTEM.INPUTS, description: 'Inputs', permissions: ['inputs:read'] },

graylog2-web-interface/src/pages/ClusterConfigurationPage.tsx

@@ -0,0 +1,83 @@
+/*
+ * 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, { useState } from 'react';
+import styled from 'styled-components';
+
+import { DocumentTitle, Icon, PageHeader } from 'components/common';
+import { Col, Row, SegmentedControl } from 'components/bootstrap';
+import useClusterNodes from 'components/cluster-configuration/useClusterNodes';
+import ClusterConfigurationClusterView from 'components/cluster-configuration/ClusterConfigurationClusterView';
+import ClusterConfigurationTableView from 'components/cluster-configuration/ClusterConfigurationTableView';
+
+const ViewTypeSwitchContainer = styled(Col)`
+  display: flex;
+  justify-content: right;
+`;
+
+const VIEW_TYPES_SEGMENTS = [
+  {
+    value: 'list' as const,
+    label: (<Icon name="list" />),
+  },
+  {
+    value: 'cards' as const,
+    label: (<Icon name="account_tree" type='regular' />),
+  },
+];
+
+type ViewTypesSegments = 'list' | 'cards';
+
+const ClusterConfigurationPage = () => {
+  const [viewType, setViewType] = useState<ViewTypesSegments>('list');
+  const { graylogNodes, dataNodes } = useClusterNodes();
+
+  return (
+    <DocumentTitle title="Cluster Configuration">
+      <div>
+        <PageHeader title="Cluster Configuration">
+          <span>
+            This page provides a real-time overview of the nodes in your Graylog cluster.
+            You can pause message processing at any time. The process buffers will not accept any new messages until
+            you resume it. If the message journal is enabled for a node, which it is by default, incoming messages
+            will be persisted to disk, even when processing is disabled.
+          </span>
+        </PageHeader>
+        <Row className="content">
+          <Col xs={6}>
+            <h2>Nodes</h2>
+          </Col>
+          <ViewTypeSwitchContainer xs={6}>
+            <SegmentedControl data={VIEW_TYPES_SEGMENTS}
+                              radius="sm"
+                              value={viewType}
+                              onChange={(newViewType) => setViewType(newViewType)} />
+          </ViewTypeSwitchContainer>
+          <Col md={12}>
+            {viewType === 'list' && (
+              <ClusterConfigurationTableView graylogNodes={graylogNodes} dataNodes={dataNodes} />
+            )}
+            {viewType === 'cards' && (
+              <ClusterConfigurationClusterView graylogNodes={graylogNodes} dataNodes={dataNodes} />
+            )}
+          </Col>
+        </Row>
+      </div>
+    </DocumentTitle>
+  );
+};
+
+export default ClusterConfigurationPage;

graylog2-web-interface/src/pages/index.jsx

@@ -24,6 +24,7 @@ const AuthenticationOverviewPage = loadAsync(() => import('./AuthenticationOverv
 const AuthenticationPage = loadAsync(() => import('./AuthenticationPage'));
 const AuthenticatorsPage = loadAsync(() => import('./AuthenticatorsPage'));
 const AuthenticatorsEditPage = loadAsync(() => import('./AuthenticatorsEditPage'));
+const ClusterConfigurationPage = loadAsync(() => import('./ClusterConfigurationPage'));
 const ConfigurationsPage = loadAsync(() => import('./ConfigurationsPage'));
 const ContentPacksPage = loadAsync(() => import('./ContentPacksPage'));
 const CreateEventDefinitionPage = loadAsync(() => import('./CreateEventDefinitionPage'));
@@ -122,6 +123,7 @@ export {
   AuthenticationOverviewPage,
   AuthenticatorsPage,
   AuthenticatorsEditPage,
+  ClusterConfigurationPage,
   ConfigurationsPage,
   ContentPacksPage,
   CreateEventDefinitionPage,

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

@@ -113,6 +113,7 @@ import {
   ViewEventDefinitionPage,
   SidecarFailureTrackingPage,
   IndexSetFieldTypesPage,
+  ClusterConfigurationPage,
 } from 'pages';
 import AppConfig from 'util/AppConfig';
 import { appPrefixed } from 'util/URLUtils';
@@ -257,6 +258,8 @@ const AppRouter = () => {
             { path: RoutePaths.SYSTEM.PIPELINES.SIMULATOR, element: <SimulatorPage /> },
             { path: RoutePaths.SYSTEM.PIPELINES.PIPELINE(':pipelineId'), element: <PipelineDetailsPage /> },
 
+            !isCloud && { path: RoutePaths.SYSTEM.CLUSTER, element: <ClusterConfigurationPage /> },
+
             !isCloud && { path: RoutePaths.SYSTEM.LOGGING, element: <LoggersPage /> },
             { path: RoutePaths.SYSTEM.METRICS(':nodeId'), element: <ShowMetricsPage /> },
             !isCloud && { path: RoutePaths.SYSTEM.NODES.LIST, element: <NodesPage /> },

graylog2-web-interface/src/routing/Routes.ts

@@ -81,6 +81,7 @@ const Routes = {
   WELCOME: '/welcome',
   GLOBAL_API_BROWSER_URL: '/api/api-browser/global/index.html',
   SYSTEM: {
+    CLUSTER: '/system/cluster',
     CONFIGURATIONS: '/system/configurations',
     configurationsSection: (section: string, pluginSection?: string) => `/system/configurations/${section}${pluginSection ? `/${pluginSection}` : ''}`,
     CONTENTPACKS: {