Footer: Single footer component for both react & angular pages (#21389)

* Footer: Single footer implementation for both react & angular pages * Export type * Updates * Use footer links in help menu * Updates & Fixes * Updated snapshot * updated snapshot
2025-09-19 23:14:25 +08:00 · 2020-01-09 11:25:52 +01:00
parent 3866f609ce
commit 91ea3b15fa
40 changed files with 209 additions and 239 deletions
--- a/pkg/api/index.go
+++ b/pkg/api/index.go
@ -352,11 +352,7 @@ func (hs *HTTPServer) setIndexViewData(c *m.ReqContext) (*dtos.IndexViewData, er
 		Icon:         "gicon gicon-question",
 		HideFromMenu: true,
 		SortWeight:   dtos.WeightHelp,
-		Children: []*dtos.NavLink{
-			{Text: "Keyboard shortcuts", Url: "/shortcuts", Icon: "fa fa-fw fa-keyboard-o", Target: "_self"},
-			{Text: "Community site", Url: "http://community.grafana.com", Icon: "fa fa-fw fa-comment", Target: "_blank"},
-			{Text: "Documentation", Url: "http://docs.grafana.org", Icon: "fa fa-fw fa-file", Target: "_blank"},
-		},
+		Children:     []*dtos.NavLink{},
 	})

 	hs.HooksService.RunIndexDataHooks(&data)
--- a/public/app/core/angular_wrappers.ts
+++ b/public/app/core/angular_wrappers.ts
@ -21,8 +21,10 @@ import { GraphContextMenu } from 'app/plugins/panel/graph/GraphContextMenu';
 import ReactProfileWrapper from 'app/features/profile/ReactProfileWrapper';
 import { LokiAnnotationsQueryEditor } from '../plugins/datasource/loki/components/AnnotationsQueryEditor';
 import { HelpModal } from './components/help/HelpModal';
+import { Footer } from './components/Footer/Footer';

 export function registerAngularDirectives() {
+  react2AngularDirective('footer', Footer, []);
  react2AngularDirective('helpModal', HelpModal, []);
  react2AngularDirective('sidemenu', SideMenu, []);
  react2AngularDirective('functionEditor', FunctionEditor, ['func', 'onRemove', 'onMoveLeft', 'onMoveRight']);
--- a/public/app/core/components/Branding/Branding.tsx
+++ b/public/app/core/components/Branding/Branding.tsx
@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+
+export interface BrandComponentProps {
+  className: string;
+}
+
+export const LogoIcon: FC<BrandComponentProps> = ({ className }) => {
+  return <img className={className} src="public/img/grafana_icon.svg" alt="Grafana" />;
+};
+
+export const Wordmark: FC<BrandComponentProps> = ({ className }) => {
+  return <div className={className} />;
+};
+
+export class Branding {
+  static LogoIcon = LogoIcon;
+  static Wordmark = Wordmark;
+}
--- a/public/app/core/components/Footer/Footer.tsx
+++ b/public/app/core/components/Footer/Footer.tsx
@ -1,61 +1,77 @@
 import React, { FC } from 'react';
-import { Tooltip } from '@grafana/ui';
+import config from 'app/core/config';

-interface Props {
-  appName: string;
-  buildVersion: string;
-  buildCommit: string;
-  newGrafanaVersionExists: boolean;
-  newGrafanaVersion: string;
+export interface FooterLink {
+  text: string;
+  icon?: string;
+  url?: string;
 }

-export const Footer: FC<Props> = React.memo(
-  ({ appName, buildVersion, buildCommit, newGrafanaVersionExists, newGrafanaVersion }) => {
+export let getFooterLinks = (): FooterLink[] => {
+  return [
+    {
+      text: 'Docs',
+      icon: 'fa fa-file-code-o',
+      url: 'https://grafana.com/docs/grafana/latest/?utm_source=grafana_footer',
+    },
+    {
+      text: 'Support & Enterprise',
+      icon: 'fa fa-support',
+      url: 'https://grafana.com/products/enterprise/?utm_source=grafana_footer',
+    },
+    {
+      text: 'Community',
+      icon: 'fa fa-comments-o',
+      url: 'https://community.grafana.com/?utm_source=grafana_footer',
+    },
+  ];
+};
+
+export let getVersionLinks = (): FooterLink[] => {
+  const { buildInfo } = config;
+
+  const links: FooterLink[] = [
+    {
+      text: `Grafana v${buildInfo.version} (commit: ${buildInfo.commit})`,
+      url: 'https://grafana.com',
+    },
+  ];
+
+  if (buildInfo.hasUpdate) {
+    links.push({
+      text: `New version available!`,
+      icon: 'fa fa-download',
+      url: 'https://grafana.com/grafana/download?utm_source=grafana_footer',
+    });
+  }
+
+  return links;
+};
+
+export function setFooterLinksFn(fn: typeof getFooterLinks) {
+  getFooterLinks = fn;
+}
+
+export function setVersionLinkFn(fn: typeof getFooterLinks) {
+  getVersionLinks = fn;
+}
+
+export const Footer: FC = React.memo(() => {
+  const links = getFooterLinks().concat(getVersionLinks());
+
  return (
    <footer className="footer">
      <div className="text-center">
        <ul>
-            <li>
-              <a href="http://docs.grafana.org" target="_blank" rel="noopener">
-                <i className="fa fa-file-code-o" /> Docs
+          {links.map(link => (
+            <li key={link.text}>
+              <a href={link.url} target="_blank" rel="noopener">
+                <i className={link.icon} /> {link.text}
              </a>
            </li>
-            <li>
-              <a
-                href="https://grafana.com/products/enterprise/?utm_source=grafana_footer"
-                target="_blank"
-                rel="noopener"
-              >
-                <i className="fa fa-support" /> Support & Enterprise
-              </a>
-            </li>
-            <li>
-              <a href="https://community.grafana.com/" target="_blank" rel="noopener">
-                <i className="fa fa-comments-o" /> Community
-              </a>
-            </li>
-            <li>
-              <a href="https://grafana.com" target="_blank" rel="noopener">
-                {appName}
-              </a>{' '}
-              <span>
-                v{buildVersion} (commit: {buildCommit})
-              </span>
-            </li>
-            {newGrafanaVersionExists && (
-              <li>
-                <Tooltip placement="auto" content={newGrafanaVersion}>
-                  <a href="https://grafana.com/get" target="_blank" rel="noopener">
-                    New version available!
-                  </a>
-                </Tooltip>
-              </li>
-            )}
+          ))}
        </ul>
      </div>
    </footer>
  );
-  }
-);
-
-export default Footer;
+});
--- a/public/app/core/components/Login/LoginPage.tsx
+++ b/public/app/core/components/Login/LoginPage.tsx
@ -5,14 +5,15 @@ import LoginCtrl from './LoginCtrl';
 import { LoginForm } from './LoginForm';
 import { ChangePassword } from './ChangePassword';
 import { CSSTransition } from 'react-transition-group';
+import { Branding } from 'app/core/components/Branding/Branding';

 export const LoginPage: FC = () => {
  return (
    <div className="login container">
      <div className="login-content">
        <div className="login-branding">
-          <img className="logo-icon" src="public/img/grafana_icon.svg" alt="Grafana" />
-          <div className="logo-wordmark" />
+          <Branding.LogoIcon className="logo-icon" />
+          <Branding.Wordmark className="logo-wordmark" />
        </div>
        <LoginCtrl>
          {({
--- a/public/app/core/components/Page/Page.tsx
+++ b/public/app/core/components/Page/Page.tsx
@ -1,11 +1,10 @@
 // Libraries
 import React, { Component } from 'react';
-import config from 'app/core/config';
 import { getTitleFromNavModel } from 'app/core/selectors/navModel';

 // Components
 import PageHeader from '../PageHeader/PageHeader';
-import Footer from '../Footer/Footer';
+import { Footer } from '../Footer/Footer';
 import PageContents from './PageContents';
 import { CustomScrollbar } from '@grafana/ui';
 import { NavModel } from '@grafana/data';
@ -45,20 +44,13 @@ class Page extends Component<Props> {

  render() {
    const { navModel } = this.props;
-    const { buildInfo } = config;
    return (
      <div className="page-scrollbar-wrapper">
        <CustomScrollbar autoHeightMin={'100%'} className="custom-scrollbar--page">
          <div className="page-scrollbar-content">
            <PageHeader model={navModel} />
            {this.props.children}
-            <Footer
-              appName="Grafana"
-              buildCommit={buildInfo.commit}
-              buildVersion={buildInfo.version}
-              newGrafanaVersion={buildInfo.latestVersion}
-              newGrafanaVersionExists={buildInfo.hasUpdate}
-            />
+            <Footer />
          </div>
        </CustomScrollbar>
      </div>
--- a/public/app/core/components/sidemenu/BottomNavLinks.test.tsx
+++ b/public/app/core/components/sidemenu/BottomNavLinks.test.tsx
@ -90,11 +90,9 @@ describe('Render', () => {
 describe('Functions', () => {
  describe('item clicked', () => {
    const wrapper = setup();
-    const mockEvent = { preventDefault: jest.fn() };
    it('should emit show modal event if url matches shortcut', () => {
-      const child = { url: '/shortcuts', text: 'hello' };
      const instance = wrapper.instance() as BottomNavLinks;
-      instance.itemClicked(mockEvent as any, child);
+      instance.onOpenShortcuts();

      expect(appEvents.emit).toHaveBeenCalledWith(CoreEvents.showModal, { templateHtml: '<help-modal></help-modal>' });
    });
--- a/public/app/core/components/sidemenu/BottomNavLinks.tsx
+++ b/public/app/core/components/sidemenu/BottomNavLinks.tsx
@ -4,6 +4,7 @@ import { User } from '../../services/context_srv';
 import { NavModelItem } from '@grafana/data';
 import { CoreEvents } from 'app/types';
 import { OrgSwitcher } from '../OrgSwitcher';
+import { getFooterLinks } from '../Footer/Footer';

 export interface Props {
  link: NavModelItem;
@ -19,13 +20,10 @@ class BottomNavLinks extends PureComponent<Props, State> {
    showSwitcherModal: false,
  };

-  itemClicked = (event: React.SyntheticEvent, child: NavModelItem) => {
-    if (child.url === '/shortcuts') {
-      event.preventDefault();
+  onOpenShortcuts = () => {
    appEvents.emit(CoreEvents.showModal, {
      templateHtml: '<help-modal></help-modal>',
    });
-    }
  };

  toggleSwitcherModal = () => {
@ -38,6 +36,12 @@ class BottomNavLinks extends PureComponent<Props, State> {
    const { link, user } = this.props;
    const { showSwitcherModal } = this.state;

+    let children = link.children || [];
+
+    if (link.id === 'help') {
+      children = getFooterLinks();
+    }
+
    return (
      <div className="sidemenu-item dropdown dropup">
        <a href={link.url} className="sidemenu-link" target={link.target}>
@ -69,20 +73,25 @@ class BottomNavLinks extends PureComponent<Props, State> {

          {showSwitcherModal && <OrgSwitcher onDismiss={this.toggleSwitcherModal} />}

-          {link.children &&
-            link.children.map((child, index) => {
-              if (!child.hideFromMenu) {
+          {children.map((child, index) => {
            return (
              <li key={`${child.text}-${index}`}>
-                    <a href={child.url} target={child.target} onClick={event => this.itemClicked(event, child)}>
+                <a href={child.url} target="_blank" rel="noopener">
                  {child.icon && <i className={child.icon} />}
                  {child.text}
                </a>
              </li>
            );
-              }
-              return null;
          })}
+
+          {link.id === 'help' && (
+            <li key="keyboard-shortcuts">
+              <a onClick={() => this.onOpenShortcuts()}>
+                <i className="fa fa-keyboard-o" /> Keyboard shortcuts
+              </a>
+            </li>
+          )}
+
          <li className="side-menu-header">
            <span className="sidemenu-item-text">{link.text}</span>
          </li>
--- a/public/app/core/components/sidemenu/snapshots/BottomNavLinks.test.tsx.snap
+++ b/public/app/core/components/sidemenu/snapshots/BottomNavLinks.test.tsx.snap
@ -19,21 +19,32 @@ exports[`Render should render children 1`] = `
      key="undefined-0"
    >
      <a
-        onClick={[Function]}
+        rel="noopener"
+        target="_blank"
      />
    </li>
    <li
      key="undefined-1"
    >
      <a
-        onClick={[Function]}
+        rel="noopener"
+        target="_blank"
      />
    </li>
    <li
      key="undefined-2"
    >
      <a
-        onClick={[Function]}
+        rel="noopener"
+        target="_blank"
+      />
+    </li>
+    <li
+      key="undefined-3"
+    >
+      <a
+        rel="noopener"
+        target="_blank"
      />
    </li>
    <li
--- a/public/app/features/admin/StyleGuideCtrl.ts
+++ b/public/app/features/admin/StyleGuideCtrl.ts
@ -1,29 +0,0 @@
-import config from 'app/core/config';
-import { BackendSrv } from 'app/core/services/backend_srv';
-import { NavModelSrv } from 'app/core/core';
-
-export default class StyleGuideCtrl {
-  theme: string;
-  buttonNames = ['primary', 'secondary', 'inverse', 'success', 'warning', 'danger'];
-  buttonSizes = ['btn-small', '', 'btn-large'];
-  buttonVariants = ['-'];
-  navModel: any;
-
-  /** @ngInject */
-  constructor(private $routeParams: any, private backendSrv: BackendSrv, navModelSrv: NavModelSrv) {
-    this.navModel = navModelSrv.getNav('admin', 'styleguide', 0);
-    this.theme = config.bootData.user.lightTheme ? 'light' : 'dark';
-  }
-
-  switchTheme() {
-    this.$routeParams.theme = this.theme === 'dark' ? 'light' : 'dark';
-
-    const cmd = {
-      theme: this.$routeParams.theme,
-    };
-
-    this.backendSrv.put('/api/user/preferences', cmd).then(() => {
-      window.location.href = window.location.href;
-    });
-  }
-}
--- a/public/app/features/admin/snapshots/ServerStats.test.tsx.snap
+++ b/public/app/features/admin/snapshots/ServerStats.test.tsx.snap
@ -159,13 +159,14 @@ exports[`ServerStats Should render table with stats 1`] = `
            <ul>
              <li>
                <a
-                  href="http://docs.grafana.org"
+                  href="https://grafana.com/docs/grafana/latest/?utm_source=grafana_footer"
                  rel="noopener"
                  target="_blank"
                >
                  <i
                    className="fa fa-file-code-o"
                  />
+                   
                  Docs
                </a>
              </li>
@ -178,18 +179,20 @@ exports[`ServerStats Should render table with stats 1`] = `
                  <i
                    className="fa fa-support"
                  />
+                   
                  Support & Enterprise
                </a>
              </li>
              <li>
                <a
-                  href="https://community.grafana.com/"
+                  href="https://community.grafana.com/?utm_source=grafana_footer"
                  rel="noopener"
                  target="_blank"
                >
                  <i
                    className="fa fa-comments-o"
                  />
+                   
                  Community
                </a>
              </li>
@ -199,16 +202,10 @@ exports[`ServerStats Should render table with stats 1`] = `
                  rel="noopener"
                  target="_blank"
                >
-                  Grafana
-                </a>
+                  <i />
                   
-                <span>
-                  v
-                  v1.0
-                   (commit: 
-                  1
-                  )
-                </span>
+                  Grafana vv1.0 (commit: 1)
+                </a>
              </li>
            </ul>
          </div>
--- a/public/app/features/admin/index.ts
+++ b/public/app/features/admin/index.ts
@ -2,7 +2,6 @@ import AdminListUsersCtrl from './AdminListUsersCtrl';
 import AdminEditUserCtrl from './AdminEditUserCtrl';
 import AdminListOrgsCtrl from './AdminListOrgsCtrl';
 import AdminEditOrgCtrl from './AdminEditOrgCtrl';
-import StyleGuideCtrl from './StyleGuideCtrl';

 import coreModule from 'app/core/core_module';
 import { NavModelSrv } from 'app/core/core';
@ -21,4 +20,3 @@ coreModule.controller('AdminEditUserCtrl', AdminEditUserCtrl);
 coreModule.controller('AdminListOrgsCtrl', AdminListOrgsCtrl);
 coreModule.controller('AdminEditOrgCtrl', AdminEditOrgCtrl);
 coreModule.controller('AdminHomeCtrl', AdminHomeCtrl);
-coreModule.controller('StyleGuideCtrl', StyleGuideCtrl);
--- a/public/app/features/admin/partials/admin_home.html
+++ b/public/app/features/admin/partials/admin_home.html
@ -9,3 +9,4 @@

 </div>

+<footer />
--- a/public/app/features/admin/partials/edit_org.html
+++ b/public/app/features/admin/partials/edit_org.html
@ -42,3 +42,5 @@
 		</tr>
 	</table>
 </div>
+
+<footer />
--- a/public/app/features/admin/partials/edit_user.html
+++ b/public/app/features/admin/partials/edit_user.html
@ -181,3 +181,5 @@
    </div>
  </div>
 </div>
+
+<footer />
--- a/public/app/features/admin/partials/new_user.html
+++ b/public/app/features/admin/partials/new_user.html
@ -28,3 +28,5 @@
 		</div>
 	</form>
 </div>
+
+<footer />
--- a/public/app/features/admin/partials/orgs.html
+++ b/public/app/features/admin/partials/orgs.html
@ -37,3 +37,5 @@
    </tbody>
  </table>
 </div>
+
+<footer />
--- a/public/app/features/admin/partials/users.html
+++ b/public/app/features/admin/partials/users.html
@ -76,3 +76,5 @@
    </ol>
  </div>
 </div>
+
+<footer />
--- a/public/app/features/alerting/partials/notification_edit.html
+++ b/public/app/features/alerting/partials/notification_edit.html
@ -75,3 +75,5 @@
    </div>
  </form>
 </div>
+
+<footer />
--- a/public/app/features/alerting/partials/notifications_list.html
+++ b/public/app/features/alerting/partials/notifications_list.html
@ -57,3 +57,5 @@
    />
  </div>
 </div>
+
+<footer />
--- a/public/app/features/folders/partials/create_folder.html
+++ b/public/app/features/folders/partials/create_folder.html
@ -32,3 +32,5 @@
 	</form>

 </div>
+
+<footer />
--- a/public/app/features/folders/partials/folder_dashboards.html
+++ b/public/app/features/folders/partials/folder_dashboards.html
@ -3,3 +3,5 @@
 <div class="page-container page-body">
  <manage-dashboards ng-if="ctrl.folderId && ctrl.uid" folder-id="ctrl.folderId" folder-uid="ctrl.uid" />
 </div>
+
+<footer />
--- a/public/app/features/manage-dashboards/partials/dashboard_import.html
+++ b/public/app/features/manage-dashboards/partials/dashboard_import.html
@ -157,3 +157,5 @@

  </div>
 </div>
+
+<footer />
--- a/public/app/features/manage-dashboards/partials/dashboard_list.html
+++ b/public/app/features/manage-dashboards/partials/dashboard_list.html
@ -3,3 +3,5 @@
 <div class="page-container page-body">
  <manage-dashboards />
 </div>
+
+<footer />
--- a/public/app/features/manage-dashboards/partials/snapshot_list.html
+++ b/public/app/features/manage-dashboards/partials/snapshot_list.html
@ -34,3 +34,5 @@
  </table>

 </div>
+
+<footer />
--- a/public/app/features/org/partials/newOrg.html
+++ b/public/app/features/org/partials/newOrg.html
@ -20,3 +20,5 @@
 		</div>
 	</form>
 </div>
+
+<footer />
--- a/public/app/features/org/partials/select_org.html
+++ b/public/app/features/org/partials/select_org.html
@ -24,3 +24,4 @@
 </div>


+<footer />
--- a/public/app/features/playlist/partials/playlist.html
+++ b/public/app/features/playlist/partials/playlist.html
@ -100,3 +100,5 @@
 		<a class="btn-text" ng-click="ctrl.backToList()">Cancel</a>
 	</div>
 </div>
+
+<footer />
--- a/public/app/features/playlist/partials/playlists.html
+++ b/public/app/features/playlist/partials/playlists.html
@ -64,3 +64,5 @@
      proTipTarget="'_blank'" />
  </div>
 </div>
+
+<footer />
--- a/public/app/features/plugins/partials/plugin_page.html
+++ b/public/app/features/plugins/partials/plugin_page.html
@ -8,3 +8,5 @@
    </div>
  </div>
 </div>
+
+<footer />
--- a/public/app/features/profile/partials/profile.html
+++ b/public/app/features/profile/partials/profile.html
@ -32,3 +32,5 @@
    </table>
  </div>
 </div>
+
+<footer />
--- a/public/app/partials/error.html
+++ b/public/app/partials/error.html
@ -45,3 +45,5 @@
    <span class="react-resizable-handle" style="cursor: default"></span>
  </div>
 </div>
+
+<footer />
--- a/public/app/partials/reset_password.html
+++ b/public/app/partials/reset_password.html
@ -54,3 +54,5 @@
 		</form>
 	</div>
 </div>
+
+<footer />
--- a/public/app/partials/signup_invited.html
+++ b/public/app/partials/signup_invited.html
@ -33,4 +33,4 @@
 	</form>
 </div>

-
+<footer />
--- a/public/app/partials/signup_step2.html
+++ b/public/app/partials/signup_step2.html
@ -43,3 +43,5 @@
    </form>
  </div>
 </div>
+
+<footer />
--- a/public/app/routes/routes.ts
+++ b/public/app/routes/routes.ts
@ -378,11 +378,6 @@ export function setupAngularRoutes($routeProvider: route.IRouteProvider, $locati
      controller: 'AppPageCtrl',
      controllerAs: 'ctrl',
    })
-    .when('/styleguide/:page?', {
-      controller: 'StyleGuideCtrl',
-      controllerAs: 'ctrl',
-      templateUrl: 'public/app/features/admin/partials/styleguide.html',
-    })
    .when('/alerting', {
      redirectTo: '/alerting/list',
    })
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@ -103,7 +103,6 @@
@import 'pages/alerting';
@import 'pages/history';
@import 'pages/signup';
-@import 'pages/styleguide';
@import 'pages/errorpage';
@import 'pages/explore';
@import 'pages/plugins';
--- a/public/sass/components/_footer.scss
+++ b/public/sass/components/_footer.scss
@ -15,6 +15,11 @@
    &:hover {
      color: $footer-link-hover;
    }
+
+    i {
+      display: inline-block;
+      padding-right: $space-xxs;
+    }
  }

  ul {
@ -23,10 +28,10 @@

  li {
    display: inline-block;
-    padding-right: 2px;
+
    &::after {
      content: ' | ';
-      padding-left: 2px;
+      padding: 0 $space-sm;
    }
  }

@ -38,15 +43,6 @@
  }
 }

-.is-react .footer {
-  display: none;
-}
-
-.is-react .custom-scrollbar .footer {
-  display: block;
-}
-
-// Keeping footer inside the graphic on Login screen
 .login-page {
  .footer {
    display: block;
--- a/public/sass/pages/_styleguide.scss
+++ b/public/sass/pages/_styleguide.scss
@ -1,33 +0,0 @@
-.style-guide-color-card {
-  list-style: none;
-  margin: 0;
-  padding: $spacer;
-  width: 100%;
-  text-align: left;
-  text-shadow: 0 0 8px #fff;
-  color: $black;
-  font-size: $font-size-sm;
-}
-
-.color-card-body-bg {
-  background-color: $body-bg;
-}
-.color-card-page-bg {
-  background-color: $page-bg;
-}
-.color-card-gray {
-  background-color: $gray-1;
-}
-
-.style-guide-button-list {
-  padding: $spacer;
-  button {
-    display: block;
-    margin: 0 $spacer $spacer 0;
-  }
-}
-
-.style-guide-icon-list {
-  font-size: 1.8em;
-  text-align: center;
-}
--- a/public/views/index-template.html
+++ b/public/views/index-template.html
@ -214,45 +214,7 @@
      <dashboard-search></dashboard-search>

      <div class="main-view">
-        <div class="scroll-canvas">
-          <div ng-view></div>
-
-          <footer class="footer">
-            <div class="text-center">
-              <ul>
-                <li>
-                  <a href="http://docs.grafana.org" target="_blank">
-                    <i class="fa fa-file-code-o"></i>
-                    Docs
-                  </a>
-                </li>
-                <li>
-                  <a href="https://grafana.com/services/support" target="_blank">
-                    <i class="fa fa-support"></i>
-                    Support Plans
-                  </a>
-                </li>
-                <li>
-                  <a href="https://community.grafana.com/" target="_blank">
-                    <i class="fa fa-comments-o"></i>
-                    Community
-                  </a>
-                </li>
-                <li>
-                  <a href="https://grafana.com" target="_blank">[[.AppName]]</a>
-                  <span>v[[.BuildVersion]] (commit: [[.BuildCommit]])</span>
-                </li>
-                [[if .NewGrafanaVersionExists]]
-                <li>
-                  <a href="https://grafana.com/get" target="_blank" bs-tooltip="'[[.NewGrafanaVersion]]'">
-                    New version available!
-                  </a>
-                </li>
-                [[end]]
-              </ul>
-            </div>
-          </footer>
-        </div>
+				<div ng-view class="scroll-canvas"></div>
      </div>
    </grafana-app>