added submenu, made sure submenu visibility is always up to date

public/app/features/annotations/editor_ctrl.ts

@@ -2,6 +2,7 @@ import angular from 'angular';
 import _ from 'lodash';
 import $ from 'jquery';
 import coreModule from 'app/core/core_module';
+import { DashboardModel } from 'app/features/dashboard/state';
 
 export class AnnotationsEditorCtrl {
   mode: any;
@@ -10,6 +11,7 @@ export class AnnotationsEditorCtrl {
   currentAnnotation: any;
   currentDatasource: any;
   currentIsNew: any;
+  dashboard: DashboardModel;
 
   annotationDefaults: any = {
     name: '',
@@ -26,9 +28,10 @@ export class AnnotationsEditorCtrl {
   constructor($scope, private datasourceSrv) {
     $scope.ctrl = this;
 
+    this.dashboard = $scope.dashboard;
     this.mode = 'list';
     this.datasources = datasourceSrv.getAnnotationSources();
-    this.annotations = $scope.dashboard.annotations.list;
+    this.annotations = this.dashboard.annotations.list;
     this.reset();
 
     this.onColorChange = this.onColorChange.bind(this);
@@ -78,11 +81,13 @@ export class AnnotationsEditorCtrl {
     this.annotations.push(this.currentAnnotation);
     this.reset();
     this.mode = 'list';
+    this.dashboard.updateSubmenuVisibility();
   }
 
   removeAnnotation(annotation) {
     const index = _.indexOf(this.annotations, annotation);
     this.annotations.splice(index, 1);
+    this.dashboard.updateSubmenuVisibility();
   }
 
   onColorChange(newColor) {

public/app/features/dashboard/components/DashLinks/DashLinksEditorCtrl.ts

 import angular from 'angular';
 import _ from 'lodash';
+import { DashboardModel } from 'app/features/dashboard/state';
 
 export let iconMap = {
   'external link': 'fa-external-link',
@@ -12,7 +13,7 @@ export let iconMap = {
 };
 
 export class DashLinksEditorCtrl {
-  dashboard: any;
+  dashboard: DashboardModel;
   iconMap: any;
   mode: any;
   link: any;
@@ -40,6 +41,7 @@ export class DashLinksEditorCtrl {
   addLink() {
     this.dashboard.links.push(this.link);
     this.mode = 'list';
+    this.dashboard.updateSubmenuVisibility();
   }
 
   editLink(link) {

public/app/features/dashboard/components/DashNav/DashNavCtrl.ts

@@ -10,8 +10,6 @@ export class DashNavCtrl {
 
   /** @ngInject */
   constructor(private $scope, private dashboardSrv, private $location, public playlistSrv) {
-    appEvents.on('save-dashboard', this.saveDashboard.bind(this), $scope);
-
     if (this.dashboard.meta.isSnapshot) {
       const meta = this.dashboard.meta;
       this.titleTooltip = 'Created:  ' + moment(meta.created).calendar();

public/app/features/dashboard/components/SubMenu/SubMenu.tsx

+// Libaries
+import React, { PureComponent } from 'react';
+
+// Utils & Services
+import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
+
+// Types
+import { DashboardModel } from '../../state/DashboardModel';
+
+export interface Props {
+  dashboard: DashboardModel | null;
+}
+
+export class SubMenu extends PureComponent<Props> {
+  element: HTMLElement;
+  angularCmp: AngularComponent;
+
+  componentDidMount() {
+    const loader = getAngularLoader();
+
+    const template = '<dashboard-submenu dashboard="dashboard" />';
+    const scopeProps = { dashboard: this.props.dashboard };
+
+    this.angularCmp = loader.load(this.element, scopeProps, template);
+  }
+
+  componentWillUnmount() {
+    if (this.angularCmp) {
+      this.angularCmp.destroy();
+    }
+  }
+
+  render() {
+    return <div ref={element => this.element = element} />;
+  }
+}

public/app/features/dashboard/components/SubMenu/index.ts

 export { SubMenuCtrl } from './SubMenuCtrl';
+export { SubMenu } from './SubMenu';

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -12,6 +12,7 @@ import { createErrorNotification } from 'app/core/copy/appNotification';
 import { LoadingPlaceholder } from '@grafana/ui';
 import { DashboardGrid } from '../dashgrid/DashboardGrid';
 import { DashNav } from '../components/DashNav';
+import { SubMenu } from '../components/SubMenu';
 import { DashboardSettings } from '../components/DashboardSettings';
 
 // Redux
@@ -192,6 +193,7 @@ export class DashboardPage extends PureComponent<Props, State> {
           {dashboard && editview && <DashboardSettings dashboard={dashboard} />}
 
           <div className={gridWrapperClasses}>
+            {dashboard.meta.submenuEnabled && <SubMenu dashboard={dashboard} />}
             <DashboardGrid dashboard={dashboard} isEditing={isEditing} isFullscreen={isFullscreen} />
           </div>
         </div>

public/app/features/dashboard/services/DashboardSrv.ts

 import coreModule from 'app/core/core_module';
-import { DashboardModel } from '../state/DashboardModel';
+import { appEvents } from 'app/core/app_events';
 import locationUtil from 'app/core/utils/location_util';
+import { DashboardModel } from '../state/DashboardModel';
 
 export class DashboardSrv {
   dash: any;
 
   /** @ngInject */
-  constructor(private backendSrv, private $rootScope, private $location) {}
+  constructor(private backendSrv, private $rootScope, private $location) {
+    appEvents.on('save-dashboard', this.saveDashboard.bind(this), $rootScope);
+  }
 
   create(dashboard, meta) {
     return new DashboardModel(dashboard, meta);

public/app/features/explore/ExploreToolbar.tsx

@@ -97,10 +97,10 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
           <div className="explore-toolbar-header">
             <div className="explore-toolbar-header-title">
               {exploreId === 'left' && (
-                <a className="navbar-page-btn">
+                <span className="navbar-page-btn">
                   <i className="fa fa-rocket fa-fw" />
                   Explore
-                </a>
+                </span>
               )}
             </div>
             <div className="explore-toolbar-header-close">

public/sass/components/_navbar.scss

@@ -83,8 +83,7 @@
     font-size: 19px;
     line-height: 8px;
     opacity: 0.75;
-    margin-right: 8px;
-    // icon hidden on smaller screens
+    margin-right: 13px;
     display: none;
   }