From b85b9ff4442ef677fd407d200099238f91cd0bdc Mon Sep 17 00:00:00 2001
From: Edmundo Alvarez <github@edmundoa.com>
Date: Mon, 26 Sep 2016 20:06:42 +0200
Subject: [PATCH] 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
---
 .../src/components/common/DocumentTitle.jsx   | 28 +++++++++++++++++++
 .../src/components/common/index.jsx           |  1 +
 .../src/pages/NodesPage.jsx                   | 26 +++++++++--------
 3 files changed, 43 insertions(+), 12 deletions(-)
 create mode 100644 graylog2-web-interface/src/components/common/DocumentTitle.jsx

diff --git a/graylog2-web-interface/src/components/common/DocumentTitle.jsx b/graylog2-web-interface/src/components/common/DocumentTitle.jsx
new file mode 100644
index 000000000000..16ecc32edf38
--- /dev/null
+++ b/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;
diff --git a/graylog2-web-interface/src/components/common/index.jsx b/graylog2-web-interface/src/components/common/index.jsx
index 3f34eaa8ba16..05a951917976 100644
--- a/graylog2-web-interface/src/components/common/index.jsx
+++ b/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';
diff --git a/graylog2-web-interface/src/pages/NodesPage.jsx b/graylog2-web-interface/src/pages/NodesPage.jsx
index eb2a01aa2685..abdd1dc06b81 100644
--- a/graylog2-web-interface/src/pages/NodesPage.jsx
+++ b/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>
     );
   },
 });