From 06d8243ab590e81ffb3721f788672d995a6c0a3a Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Mon, 14 Jan 2019 16:51:43 +0100
Subject: [PATCH] feat: Possibility to change document title on pages using the
 Page component

---
 public/app/core/components/Page/Page.tsx | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/public/app/core/components/Page/Page.tsx b/public/app/core/components/Page/Page.tsx
index f225d4d3170..eeba4b3037b 100644
--- a/public/app/core/components/Page/Page.tsx
+++ b/public/app/core/components/Page/Page.tsx
@@ -7,7 +7,7 @@ import PageContents from './PageContents';
 import { CustomScrollbar } from '@grafana/ui';
 
 interface Props {
-  title: string;
+  title?: string;
   children: JSX.Element[] | JSX.Element;
 }
 
@@ -23,12 +23,24 @@ class Page extends Component<Props> {
   componentDidMount() {
     this.body.classList.add(this.bodyClass);
     this.copyFooter();
+    this.updateTitle();
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps.title !== this.props.title) {
+      this.updateTitle();
+    }
   }
 
   componentWillUnmount() {
     this.body.classList.remove(this.bodyClass);
   }
 
+  updateTitle = () => {
+    const { title } = this.props;
+    document.title = title ? title + ' - Grafana' : 'Grafana';
+  }
+
   copyFooter = () => {
     const c = this.scrollbarElementRef.current;
     c.append(this.footer);
@@ -37,11 +49,11 @@ class Page extends Component<Props> {
   render() {
     return (
       <div className="page-scrollbar-wrapper">
-          <CustomScrollbar autoHeightMin={'100%'}>
-            <div className="page-scrollbar-content" ref={this.scrollbarElementRef}>
-              {this.props.children}
-            </div>
-          </CustomScrollbar>
+        <CustomScrollbar autoHeightMin={'100%'}>
+          <div className="page-scrollbar-content" ref={this.scrollbarElementRef}>
+            {this.props.children}
+          </div>
+        </CustomScrollbar>
       </div>
     );
   }