chore: Reactify footer

public/app/core/components/Footer/Footer.tsx

@@ -0,0 +1,50 @@
+import React, { SFC } from 'react';
+import { Tooltip } from '@grafana/ui';
+
+interface Props {
+  appName: string;
+  buildVersion: string;
+  buildCommit: string;
+  newGrafanaVersionExists: boolean;
+  newGrafanaVersion: string;
+}
+
+export const Footer: SFC<Props> = ({appName, buildVersion, buildCommit, newGrafanaVersionExists, newGrafanaVersion}) => {
+  return (
+    <footer className="footer">
+      <div className="text-center">
+        <ul>
+          <li>
+            <a href="http://docs.grafana.org" target="_blank">
+              <i className="fa fa-file-code-o" /> Docs
+            </a>
+          </li>
+          <li>
+            <a href="https://grafana.com/services/support" target="_blank">
+              <i className="fa fa-support" /> Support Plans
+            </a>
+          </li>
+          <li>
+            <a href="https://community.grafana.com/" target="_blank">
+              <i className="fa fa-comments-o" /> Community
+            </a>
+          </li>
+          <li>
+            <a href="https://grafana.com" target="_blank">{appName}</a> <span>v{buildVersion} (commit: {buildCommit})</span>
+          </li>
+          {newGrafanaVersionExists && (
+            <li>
+              <Tooltip placement="auto" content={newGrafanaVersion}>
+                <a href="https://grafana.com/get" target="_blank">
+                  New version available!
+                </a>
+              </Tooltip>
+            </li>
+          )}
+        </ul>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

public/app/core/components/Page/Page.tsx

@@ -1,11 +1,14 @@
 // Libraries
 import React, { Component } from 'react';
+import config from 'app/core/config';
 
 // Components
 import PageHeader from '../PageHeader/PageHeader';
+import Footer from '../Footer/Footer';
 import PageContents from './PageContents';
 import { CustomScrollbar } from '@grafana/ui';
 
+
 interface Props {
   title?: string;
   children: JSX.Element[] | JSX.Element;
@@ -14,15 +17,11 @@ interface Props {
 class Page extends Component<Props> {
   private bodyClass = 'is-react';
   private body = document.getElementsByTagName('body')[0];
-  private footer = document.getElementsByClassName('footer')[0].cloneNode(true);
-  private scrollbarElementRef = React.createRef<HTMLDivElement>();
   static Header = PageHeader;
   static Contents = PageContents;
 
-
   componentDidMount() {
     this.body.classList.add(this.bodyClass);
-    this.copyFooter();
     this.updateTitle();
   }
 
@@ -41,17 +40,19 @@ class Page extends Component<Props> {
     document.title = title ? title + ' - Grafana' : 'Grafana';
   }
 
-  copyFooter = () => {
-    const c = this.scrollbarElementRef.current;
-    c.append(this.footer);
-  }
-
   render() {
+    const { buildInfo } = config;
     return (
       <div className="page-scrollbar-wrapper">
         <CustomScrollbar autoHeightMin={'100%'}>
-          <div className="page-scrollbar-content" ref={this.scrollbarElementRef}>
+          <div className="page-scrollbar-content">
             {this.props.children}
+            <Footer
+              appName="Grafana"
+              buildCommit={buildInfo.commit}
+              buildVersion={buildInfo.version}
+              newGrafanaVersion={buildInfo.latestVersion}
+              newGrafanaVersionExists={buildInfo.hasUpdate} />
           </div>
         </CustomScrollbar>
       </div>

public/app/core/config.ts

@@ -6,6 +6,8 @@ export interface BuildInfo {
   commit: string;
   isEnterprise: boolean;
   env: string;
+  latestVersion: string;
+  hasUpdate: boolean;
 }
 
 export class Settings {