Show Elasticsearch/OpenSearch cluster health summary on Indices page (#…

…13024)

* Introduce minimal 'IndexerClusterHealth' variant, use in 'IndicesPage'.

* Switch 'IndicesPage' to a pure function and TypeScript.

The former addresses a Reviewbot warning.

graylog2-web-interface/src/components/indexers/IndexerClusterHealth.tsx

@@ -29,6 +29,10 @@ import * as URLUtils from 'util/URLUtils';
 
 import IndexerClusterHealthError from './IndexerClusterHealthError';
 
+type Props = {
+  minimal: boolean,
+};
+
 const GET_INDEXER_CLUSTER_HEALTH = 'indexerCluster.health';
 const GET_INDEXER_CLUSTER_NAME = 'indexerCluster.name';
 
@@ -63,9 +67,21 @@ const useLoadHealthAndName = () => {
   });
 };
 
-const IndexerClusterHealth = () => {
+const IndexerClusterHealth = ({ minimal }: Props) => {
   const { health, name, loading, error, isSuccess } = useLoadHealthAndName();
 
+  const summary = (
+    <>
+      {isSuccess && <IndexerClusterHealthSummary health={health} name={name} />}
+      {loading && <p><Spinner /></p>}
+      {error && <IndexerClusterHealthError error={error} />}
+    </>
+  );
+
+  if (minimal) {
+    return summary;
+  }
+
   return (
     <Row className="content">
       <Col md={12}>
@@ -75,9 +91,8 @@ const IndexerClusterHealth = () => {
           The possible Elasticsearch cluster states and more related information is available in the{' '}
           <DocumentationLink page={DocsHelper.PAGES.CONFIGURING_ES} text="Graylog documentation" />.
         </SmallSupportLink>
-        {isSuccess && <IndexerClusterHealthSummary health={health} name={name} />}
-        {loading && <p><Spinner /></p>}
-        {error && <IndexerClusterHealthError error={error} />}
+
+        {summary}
       </Col>
     </Row>
   );

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

@@ -0,0 +1,76 @@
+/*
+ * 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 { LinkContainer } from 'components/common/router';
+import Routes from 'routing/Routes';
+import { Col, Row, Button } from 'components/bootstrap';
+import HideOnCloud from 'util/conditional/HideOnCloud';
+import DocsHelper from 'util/DocsHelper';
+import { DocumentTitle, IfPermitted, PageHeader } from 'components/common';
+import { DocumentationLink } from 'components/support';
+import { IndexSetsComponent } from 'components/indices';
+import { IndexerClusterHealth } from 'components/indexers';
+
+const IndicesPage = () => {
+  const pageHeader = (
+    <PageHeader title="Indices & Index Sets">
+      <span>
+        A Graylog stream write messages to an index set, which is a configuration for retention, sharding, and
+        replication of the stored data.
+        By configuring index sets, you could, for example, have different retention times for certain streams.
+      </span>
+
+      <span>
+        You can learn more about the index model in the{' '}
+        <DocumentationLink page={DocsHelper.PAGES.INDEX_MODEL} text="documentation" />
+      </span>
+
+      <span>
+        <LinkContainer to={Routes.SYSTEM.INDEX_SETS.CREATE}>
+          <Button bsStyle="success" bsSize="lg">Create index set</Button>
+        </LinkContainer>
+      </span>
+    </PageHeader>
+  );
+
+  return (
+    <DocumentTitle title="Indices and Index Sets">
+      <span>
+        {pageHeader}
+
+        <HideOnCloud>
+          <IfPermitted permissions="indexercluster:read">
+            <Row className="content">
+              <Col md={12}>
+                <IndexerClusterHealth minimal />
+              </Col>
+            </Row>
+          </IfPermitted>
+        </HideOnCloud>
+
+        <Row className="content">
+          <Col md={12}>
+            <IndexSetsComponent />
+          </Col>
+        </Row>
+      </span>
+    </DocumentTitle>
+  );
+};
+
+export default IndicesPage;