Proposal to make document title dynamic (#2842)

Introduce a component that takes care of modifying the document title to
a given value, and use it in one of the pages as an example.

Refs #2834

graylog2-web-interface/src/components/common/DocumentTitle.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const DocumentTitle = React.createClass({
+  propTypes: {
+    title: React.PropTypes.string.isRequired,
+    children: React.PropTypes.oneOfType([
+      React.PropTypes.arrayOf(React.PropTypes.element),
+      React.PropTypes.element,
+    ]).isRequired,
+  },
+
+  componentDidMount() {
+    this.originalTitle = document.title;
+    document.title = `${document.title} - ${this.props.title}`;
+  },
+
+  componentWillUnmount() {
+    document.title = this.originalTitle;
+  },
+
+  originalTitle: undefined,
+
+  render() {
+    return this.props.children;
+  },
+});
+
+export default DocumentTitle;

graylog2-web-interface/src/components/common/index.jsx

@@ -3,6 +3,7 @@ export { default as ClipboardButton } from './ClipboardButton';
 export { default as DataFilter } from './DataFilter';
 export { default as DataTable } from './DataTable';
 export { default as DatePicker } from './DatePicker';
+export { default as DocumentTitle } from './DocumentTitle';
 export { default as EntityList } from './EntityList';
 export { default as EntityListItem } from './EntityListItem';
 export { default as GridsterContainer } from './GridsterContainer';

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

@@ -4,25 +4,27 @@ import Reflux from 'reflux';
 import StoreProvider from 'injection/StoreProvider';
 const CurrentUserStore = StoreProvider.getStore('CurrentUser');
 
-import { PageHeader } from 'components/common';
+import { DocumentTitle, PageHeader } from 'components/common';
 import { NodesList } from 'components/nodes';
 
 const NodesPage = React.createClass({
   mixins: [Reflux.connect(CurrentUserStore)],
   render() {
     return (
-      <div>
-        <PageHeader title="Nodes">
-          <span>This page provides a real-time overview of the nodes in your Graylog cluster.</span>
+      <DocumentTitle title="Nodes">
+        <div>
+          <PageHeader title="Nodes">
+            <span>This page provides a real-time overview of the nodes in your Graylog cluster.</span>
 
-          <span>
-            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>
-        <NodesList permissions={this.state.currentUser.permissions}/>
-      </div>
+            <span>
+              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>
+          <NodesList permissions={this.state.currentUser.permissions}/>
+        </div>
+      </DocumentTitle>
     );
   },
 });