Add document titles (#3160)

* Update LDAP routes Use the authentication page to get to LDAP pages. Also delete old (and unused) LDAP pages. * Add document titles to core pages * Simplify DocumentTitle component We cannot properly keep the previous title, as component are not necessarily unmounted in the same order they were mounted. Instead of trying to be smart about this, we now reset the page title when `DocumentTitle` is unmounted, and consumers of this component can mount another instance with a different title if they want to customize the title. We can make this a bit smarted in the future if we need to, but right now is good enough. * Only add getting started title once
Graylog2 · Dec 8, 2016 · f525517 · f525517
1 parent be7e80b
commit f525517
Show file tree

Hide file tree

Showing 58 changed files with 1,008 additions and 1,025 deletions.
diff --git a/graylog2-web-interface/src/components/authentication/AccessTokenConfig.js b/graylog2-web-interface/src/components/authentication/AccessTokenConfig.js
@@ -1,17 +1,21 @@
 import React, { PropTypes } from 'react';
-import { PageHeader } from 'components/common';
+import { DocumentTitle, PageHeader } from 'components/common';
 
 const AccessTokenConfig = React.createClass({
   propTypes: {
     config: PropTypes.object,
   },
   render() {
-    return (<span>
-      <PageHeader title="Access Token Authenticator" subpage>
-        <span>Each user can generate access tokens to avoid having to use their main password in insecure scripts.</span>
-      </PageHeader>
-      <span>There currently is no configuration available for access tokens. You can safely disable this authenticator if you do not use access tokens.</span>
-    </span>);
+    return (
+      <DocumentTitle title="Access Token Authenticator">
+        <span>
+          <PageHeader title="Access Token Authenticator" subpage>
+            <span>Each user can generate access tokens to avoid having to use their main password in insecure scripts.</span>
+          </PageHeader>
+          <span>There currently is no configuration available for access tokens. You can safely disable this authenticator if you do not use access tokens.</span>
+        </span>
+      </DocumentTitle>
+    );
   },
 });
 

diff --git a/graylog2-web-interface/src/components/authentication/AuthProvidersConfig.jsx b/graylog2-web-interface/src/components/authentication/AuthProvidersConfig.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Row, Col, Button, Alert, Table } from 'react-bootstrap';
 import BootstrapModalForm from 'components/bootstrap/BootstrapModalForm';
-import { PageHeader, IfPermitted, SortableList } from 'components/common';
+import { DocumentTitle, PageHeader, IfPermitted, SortableList } from 'components/common';
 import Routes from 'routing/Routes';
 import ObjectUtils from 'util/ObjectUtils';
 import naturalSort from 'javascript-natural-sort';
@@ -143,61 +143,63 @@ const AuthProvidersConfig = React.createClass({
 
   render() {
     return (
-      <span>
-        <PageHeader title="Authentication Providers" subpage>
-          <span>The following authentication providers executed in order during login. Disabled providers will be
-            skipped.<br/>A user is authenticated by the first matching provider, a successful match can cause a Graylog account for
-            this user to be created.
-          </span>
-        </PageHeader>
-        <Row>
-          <Col md={6}>
-            <Table striped bordered className="top-margin">
-              <thead>
-                <tr>
-                  <th>#</th>
-                  <th>Provider</th>
-                  <th>Description</th>
-                  <th>Status</th>
-                </tr>
-              </thead>
-              <tbody>
-              {this._summary()}
-              </tbody>
-            </Table>
-
-            <IfPermitted permissions="clusterconfigentry:edit">
-              <Button bsStyle="primary" onClick={this._openModal} className="save-button-margin">Update</Button>
-              <Button onClick={this._onCancel}>Cancel</Button>
-            </IfPermitted>
-
-            <BootstrapModalForm ref="configModal"
-                                title="Update Authentication Provider Configuration"
-                                onSubmitForm={this._saveConfig}
-                                onModalClose={this._resetConfig}
-                                submitButtonText="Save">
-              <h3>Order</h3>
-              <p>Use drag and drop to change the execution order of the authentication providers.</p>
-              <SortableList items={this._sortableItems()} onMoveItem={this._updateSorting}/>
-
-              <h3>Status</h3>
-              <p>Change the checkboxes to change the status of an authentication provider.</p>
-              <Table striped bordered condensed className="top-margin">
+      <DocumentTitle title="Authentication Providers">
+        <span>
+          <PageHeader title="Authentication Providers" subpage>
+            <span>The following authentication providers executed in order during login. Disabled providers will be
+              skipped.<br/>A user is authenticated by the first matching provider, a successful match can cause a Graylog account for
+              this user to be created.
+            </span>
+          </PageHeader>
+          <Row>
+            <Col md={6}>
+              <Table striped bordered className="top-margin">
                 <thead>
                   <tr>
+                    <th>#</th>
                     <th>Provider</th>
-                    <th>Enabled</th>
+                    <th>Description</th>
+                    <th>Status</th>
                   </tr>
                 </thead>
                 <tbody>
-                {this._statusForm()}
+                {this._summary()}
                 </tbody>
               </Table>
-              {this._noActiveRealmWarning()}
-            </BootstrapModalForm>
-          </Col>
-        </Row>
-      </span>
+
+              <IfPermitted permissions="clusterconfigentry:edit">
+                <Button bsStyle="primary" onClick={this._openModal} className="save-button-margin">Update</Button>
+                <Button onClick={this._onCancel}>Cancel</Button>
+              </IfPermitted>
+
+              <BootstrapModalForm ref="configModal"
+                                  title="Update Authentication Provider Configuration"
+                                  onSubmitForm={this._saveConfig}
+                                  onModalClose={this._resetConfig}
+                                  submitButtonText="Save">
+                <h3>Order</h3>
+                <p>Use drag and drop to change the execution order of the authentication providers.</p>
+                <SortableList items={this._sortableItems()} onMoveItem={this._updateSorting}/>
+
+                <h3>Status</h3>
+                <p>Change the checkboxes to change the status of an authentication provider.</p>
+                <Table striped bordered condensed className="top-margin">
+                  <thead>
+                    <tr>
+                      <th>Provider</th>
+                      <th>Enabled</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                  {this._statusForm()}
+                  </tbody>
+                </Table>
+                {this._noActiveRealmWarning()}
+              </BootstrapModalForm>
+            </Col>
+          </Row>
+        </span>
+      </DocumentTitle>
     );
   },
 });

diff --git a/graylog2-web-interface/src/components/authentication/LegacyLdapConfig.js b/graylog2-web-interface/src/components/authentication/LegacyLdapConfig.js
@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import { PageHeader } from 'components/common';
+import { DocumentTitle, PageHeader } from 'components/common';
 import { Button } from 'react-bootstrap';
 
 import LdapComponent from 'components/ldap/LdapComponent';
@@ -41,16 +41,23 @@ const LegacyLdapConfig = React.createClass({
     const toggleButtonText = this.state.showSettings ? 'LDAP Group Mapping' : 'LDAP Settings';
     const activeComponent = this.state.showSettings ? <LdapComponent onCancel={this._onCancel} /> : <LdapGroupsComponent onCancel={this._onSettingsCancel} />;
 
-    return (<span>
-      <PageHeader title="LDAP Settings" subpage>
-        <span>This page is the only resource you need to set up the Graylog LDAP integration. You can test the connection to your LDAP server and even try to log in with an LDAP account of your choice right away.</span>
-        {null}
+    return (
+      <DocumentTitle title="LDAP Settings">
         <span>
-          <Button bsStyle="success" onClick={this._toggleButton}>{toggleButtonText}</Button>
+          <PageHeader title="LDAP Settings" subpage>
+            <span>
+              This page is the only resource you need to set up the Graylog LDAP integration. You can test the
+              connection to your LDAP server and even try to log in with an LDAP account of your choice right away.
+            </span>
+            {null}
+            <span>
+              <Button bsStyle="success" onClick={this._toggleButton}>{toggleButtonText}</Button>
+            </span>
+          </PageHeader>
+          {activeComponent}
         </span>
-      </PageHeader>
-      {activeComponent}
-    </span>);
+      </DocumentTitle>
+    );
   },
 });
 

diff --git a/graylog2-web-interface/src/components/authentication/MongoDbPasswordConfig.jsx b/graylog2-web-interface/src/components/authentication/MongoDbPasswordConfig.jsx
@@ -1,17 +1,21 @@
 import React, { PropTypes } from 'react';
-import { PageHeader } from 'components/common';
+import { DocumentTitle, PageHeader } from 'components/common';
 
 const MongoDbPasswordConfig = React.createClass({
   propTypes: {
     config: PropTypes.object,
   },
   render() {
-    return (<span>
-      <PageHeader title="Password Authenticator" subpage>
-        <span>This authenticator uses the password stored in MongoDB to grant access to users, it usually runs last, so that other authentication sources have priority.</span>
-      </PageHeader>
-      <span>If you only rely on external authentication systems, such as LDAP or Active Directory, you can disable this authenticator. It currently has no configuration options.</span>
-    </span>);
+    return (
+      <DocumentTitle title="Password Authenticator">
+        <span>
+          <PageHeader title="Password Authenticator" subpage>
+            <span>This authenticator uses the password stored in MongoDB to grant access to users, it usually runs last, so that other authentication sources have priority.</span>
+          </PageHeader>
+          <span>If you only rely on external authentication systems, such as LDAP or Active Directory, you can disable this authenticator. It currently has no configuration options.</span>
+        </span>
+      </DocumentTitle>
+    );
   },
 });
 

diff --git a/graylog2-web-interface/src/components/authentication/MongoDbSessionConfig.js b/graylog2-web-interface/src/components/authentication/MongoDbSessionConfig.js
@@ -1,17 +1,21 @@
 import React, { PropTypes } from 'react';
-import { PageHeader } from 'components/common';
+import { DocumentTitle, PageHeader } from 'components/common';
 
 const MongoDbSessionConfig = React.createClass({
   propTypes: {
     config: PropTypes.object,
   },
   render() {
-    return (<span>
-      <PageHeader title="Session Authenticator" subpage>
-        <span>This authenticator uses the session supplied from the web interface to grant access to logged in users, it usually runs first.</span>
-      </PageHeader>
-      <span>Since sessions are necessary to let the web interface function it cannot be disabled.</span>
-    </span>);
+    return (
+      <DocumentTitle title="Session Authenticator">
+        <span>
+          <PageHeader title="Session Authenticator" subpage>
+            <span>This authenticator uses the session supplied from the web interface to grant access to logged in users, it usually runs first.</span>
+          </PageHeader>
+          <span>Since sessions are necessary to let the web interface function it cannot be disabled.</span>
+        </span>
+      </DocumentTitle>
+    );
   },
 });
 

diff --git a/graylog2-web-interface/src/components/authentication/RootUserConfig.js b/graylog2-web-interface/src/components/authentication/RootUserConfig.js
@@ -1,17 +1,21 @@
 import React, { PropTypes } from 'react';
-import { PageHeader } from 'components/common';
+import { DocumentTitle, PageHeader } from 'components/common';
 
 const RootUserConfig = React.createClass({
   propTypes: {
     config: PropTypes.object,
   },
   render() {
-    return (<span>
-      <PageHeader title="Admin User Authenticator" subpage>
-        <span>This authenticator grants access to the admin user specified in the configuration file.</span>
-      </PageHeader>
-      <span>Currently the admin user authenticator cannot be configured outside of the configuration file. It can also not be disabled at the moment.</span>
-    </span>);
+    return (
+      <DocumentTitle title="Admin User Authenticator">
+        <span>
+          <PageHeader title="Admin User Authenticator" subpage>
+            <span>This authenticator grants access to the admin user specified in the configuration file.</span>
+          </PageHeader>
+          <span>Currently the admin user authenticator cannot be configured outside of the configuration file. It can also not be disabled at the moment.</span>
+        </span>
+      </DocumentTitle>
+    );
   },
 });
 

diff --git a/graylog2-web-interface/src/components/common/DocumentTitle.jsx b/graylog2-web-interface/src/components/common/DocumentTitle.jsx
@@ -10,16 +10,14 @@ const DocumentTitle = React.createClass({
   },
 
   componentDidMount() {
-    this.originalTitle = document.title;
     document.title = `${document.title} - ${this.props.title}`;
   },
 
   componentWillUnmount() {
-    document.title = this.originalTitle;
+    document.title = this.defaultTitle;
   },
 
-  originalTitle: undefined,
-
+  defaultTitle: 'Graylog',
   render() {
     return this.props.children;
   },

diff --git a/graylog2-web-interface/src/components/gettingstarted/GettingStarted.jsx b/graylog2-web-interface/src/components/gettingstarted/GettingStarted.jsx
@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
 import { Button, Grid, Row, Col } from 'react-bootstrap';
 import Qs from 'qs';
 
-import {Spinner} from 'components/common';
+import { Spinner } from 'components/common';
 
 import ActionsProvider from 'injection/ActionsProvider';
 const GettingStartedActions = ActionsProvider.getActions('GettingStarted');

diff --git a/graylog2-web-interface/src/components/ldap/LdapComponent.jsx b/graylog2-web-interface/src/components/ldap/LdapComponent.jsx
@@ -64,7 +64,7 @@ const HelperText = {
       <span>
         The default Graylog role determines whether a user created via Active Directory can access the entire system, or has limited access.<br/>
         You can assign additional permissions by{' '}
-        <LinkContainer to={Routes.SYSTEM.LDAP.GROUPS}><a>mapping Active Directory groups to Graylog roles</a></LinkContainer>,{' '}
+        <LinkContainer to={Routes.SYSTEM.AUTHENTICATION.PROVIDERS.provider('legacy-ldap-groups')}><a>mapping Active Directory groups to Graylog roles</a></LinkContainer>,{' '}
         or you can assign additional Graylog roles to Active Directory users below.
       </span>
     ),
@@ -118,7 +118,7 @@ const HelperText = {
       <span>
         The default Graylog role determines whether a user created via LDAP can access the entire system, or has limited access.<br/>
         You can assign additional permissions by{' '}
-        <LinkContainer to={Routes.SYSTEM.LDAP.GROUPS}><a>mapping LDAP groups to Graylog roles</a></LinkContainer>,{' '}
+        <LinkContainer to={Routes.SYSTEM.AUTHENTICATION.PROVIDERS.provider('legacy-ldap-groups')}><a>mapping LDAP groups to Graylog roles</a></LinkContainer>,{' '}
         or you can assign additional Graylog roles to LDAP users below.
       </span>
     ),

diff --git a/graylog2-web-interface/src/components/ldap/LdapGroupsComponent.jsx b/graylog2-web-interface/src/components/ldap/LdapGroupsComponent.jsx
@@ -95,7 +95,7 @@ const LdapGroupsComponent = React.createClass({
       return (
         <p>
           No LDAP/Active Directory groups found. Please verify that your{' '}
-          <LinkContainer to={Routes.SYSTEM.LDAP.SETTINGS}><a>LDAP group mapping</a></LinkContainer>{' '}
+          <LinkContainer to={Routes.SYSTEM.AUTHENTICATION.PROVIDERS.provider('legacy-ldap')}><a>LDAP group mapping</a></LinkContainer>{' '}
           settings are correct.
         </p>
       );

diff --git a/graylog2-web-interface/src/pages/AlertConditionsPage.jsx b/graylog2-web-interface/src/pages/AlertConditionsPage.jsx
@@ -4,7 +4,7 @@ import { Button, Col, Row } from 'react-bootstrap';
 import { LinkContainer } from 'react-router-bootstrap';
 
 import DocumentationLink from 'components/support/DocumentationLink';
-import { PageHeader } from 'components/common';
+import { DocumentTitle, PageHeader } from 'components/common';
 import { AlertConditionsComponent } from 'components/alertconditions';
 
 import Routes from 'routing/Routes';
@@ -17,30 +17,32 @@ const AlertConditionsPage = React.createClass({
   mixins: [Reflux.connect(CurrentUserStore)],
   render() {
     return (
-      <div>
-        <PageHeader title="Manage alert conditions">
-          <span>
-            Alert conditions define situations that require your attention. Graylog will check those conditions
-            periodically and notify you when their statuses change.
-          </span>
-
-          <span>
-            Read more about alerting in the <DocumentationLink page={DocsHelper.PAGES.ALERTS} text="documentation"/>.
-          </span>
-
-          <span>
-            <LinkContainer to={Routes.ALERTS.NOTIFICATIONS}>
-              <Button bsStyle="info">Manage notifications</Button>
-            </LinkContainer>
-          </span>
-        </PageHeader>
-
-        <Row className="content">
-          <Col md={12}>
-            <AlertConditionsComponent />
-          </Col>
-        </Row>
-      </div>
+      <DocumentTitle title="Alert conditions">
+        <div>
+          <PageHeader title="Manage alert conditions">
+            <span>
+              Alert conditions define situations that require your attention. Graylog will check those conditions
+              periodically and notify you when their statuses change.
+            </span>
+
+            <span>
+              Read more about alerting in the <DocumentationLink page={DocsHelper.PAGES.ALERTS} text="documentation" />.
+            </span>
+
+            <span>
+              <LinkContainer to={Routes.ALERTS.NOTIFICATIONS}>
+                <Button bsStyle="info">Manage notifications</Button>
+              </LinkContainer>
+            </span>
+          </PageHeader>
+
+          <Row className="content">
+            <Col md={12}>
+              <AlertConditionsComponent />
+            </Col>
+          </Row>
+        </div>
+      </DocumentTitle>
     );
   },
 });