Added more buttons in dashboard nav

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

@@ -12,7 +12,7 @@ import { updateLocation } from 'app/core/actions';
 import { DashboardModel } from '../../state/DashboardModel';
 
 export interface Props {
-  dashboard: DashboardModel | null;
+  dashboard: DashboardModel;
   editview: string;
   isEditing: boolean;
   isFullscreen: boolean;
@@ -25,7 +25,20 @@ export class DashNav extends PureComponent<Props> {
     appEvents.emit('show-dash-search');
   };
 
-  onAddPanel = () => {};
+  onAddPanel = () => {
+    const { dashboard } = this.props;
+
+    // Return if the "Add panel" exists already
+    if (dashboard.panels.length > 0 && dashboard.panels[0].type === 'add-panel') {
+      return;
+    }
+
+    dashboard.addPanel({
+      type: 'add-panel',
+      gridPos: { x: 0, y: 0, w: 12, h: 8 },
+      title: 'Panel Title',
+    });
+  };
 
   onClose = () => {
     this.props.updateLocation({
@@ -34,6 +47,16 @@ export class DashNav extends PureComponent<Props> {
     });
   };
 
+  onToggleTVMode = () => {
+    appEvents.emit('toggle-kiosk-mode');
+  };
+
+  onSave = () => {
+    const { $injector } = this.props;
+    const dashboardSrv = $injector.get('dashboardSrv');
+    dashboardSrv.saveDashboard();
+  };
+
   onOpenSettings = () => {
     this.props.updateLocation({
       query: { editview: 'settings' },
@@ -51,30 +74,25 @@ export class DashNav extends PureComponent<Props> {
     });
   };
 
-  renderLoadingState() {
-    return (
-      <div className="navbar">
-        <div>
-          <a className="navbar-page-btn" onClick={this.onOpenSearch}>
-            <i className="gicon gicon-dashboard" />
-            Loading...
-            <i className="fa fa-caret-down" />
-          </a>
-        </div>
-      </div>
-    );
-  }
+  onOpenShare = () => {
+    const $rootScope = this.props.$injector.get('$rootScope');
+    const modalScope = $rootScope.$new();
+    modalScope.tabIndex = 0;
+    modalScope.dashboard = this.props.dashboard;
 
+    appEvents.emit('show-modal', {
+      src: 'public/app/features/dashboard/components/ShareModal/template.html',
+      scope: modalScope,
+    });
+  };
 
   render() {
     const { dashboard, isFullscreen, editview } = this.props;
-
-    if (!dashboard) {
-      return this.renderLoadingState();
-    }
+    const { canEdit, canStar, canSave, canShare, folderTitle, showSettings, isStarred } = dashboard.meta;
+    const { snapshot } = dashboard;
 
     const haveFolder = dashboard.meta.folderId > 0;
-    const { canEdit, canStar, canSave, folderTitle, showSettings, isStarred } = dashboard.meta;
+    const snapshotUrl = snapshot && snapshot.originalUrl;
 
     return (
       <div className="navbar">
@@ -124,34 +142,50 @@ export class DashNav extends PureComponent<Props> {
             </button>
           )}
 
+          {canShare && (
+            <button
+              className="btn navbar-button navbar-button--share"
+              onClick={this.onOpenShare}
+              title="Share Dashboard"
+            >
+              <i className="fa fa-share-square-o" />
+            </button>
+          )}
+
+          {canSave && (
+            <button
+              className="btn navbar-button navbar-button--save"
+              onClick={this.onSave}
+              title="Save dashboard <br> CTRL+S"
+            >
+              <i className="fa fa-save" />
+            </button>
+          )}
+
+          {snapshotUrl && (
+            <a
+              className="btn navbar-button navbar-button--snapshot-origin"
+              href={snapshotUrl}
+              title="Open original dashboard"
+            >
+              <i className="fa fa-link" />
+            </a>
+          )}
+
+          <div className="navbar-buttons navbar-buttons--tv">
+            <button
+              className="btn navbar-button navbar-button--tv"
+              onClick={this.onToggleTVMode}
+              title="Cycle view mode"
+            >
+              <i className="fa fa-desktop" />
+            </button>
+          </div>
+
           {
-            //
-            //   <button class="btn navbar-button navbar-button--share" ng-show="::ctrl.dashboard.meta.canShare" ng-click="ctrl.shareDashboard(0)" bs-tooltip="'Share dashboard'" data-placement="bottom">
-            // 		<i class="fa fa-share-square-o"></i></a>
-            // 	</button>
-            //
-            //   <button class="btn navbar-button navbar-button--save" ng-show="ctrl.dashboard.meta.canSave" ng-click="ctrl.saveDashboard()" bs-tooltip="'Save dashboard <br> CTRL+S'" data-placement="bottom">
-            // 		<i class="fa fa-save"></i>
-            // 	</button>
-            //
-            // 	<a class="btn navbar-button navbar-button--snapshot-origin" ng-if="::ctrl.dashboard.snapshot.originalUrl" href="{{ctrl.dashboard.snapshot.originalUrl}}" bs-tooltip="'Open original dashboard'" data-placement="bottom">
-            // 		<i class="fa fa-link"></i>
-            // 	</a>
-            //
-            // 	<button class="btn navbar-button navbar-button--settings" ng-click="ctrl.toggleSettings()" bs-tooltip="'Dashboard Settings'" data-placement="bottom" ng-show="ctrl.dashboard.meta.showSettings">
-            // 		<i class="fa fa-cog"></i>
-            // 	</button>
-            // </div>
-            //
-            // <div class="navbar-buttons navbar-buttons--tv">
-            //   <button class="btn navbar-button navbar-button--tv" ng-click="ctrl.toggleViewMode()" bs-tooltip="'Cycle view mode'" data-placement="bottom">
-            //     <i class="fa fa-desktop"></i>
-            //   </button>
-            // </div>
-            //
             // <gf-time-picker class="gf-timepicker-nav" dashboard="ctrl.dashboard" ng-if="!ctrl.dashboard.timepicker.hidden"></gf-time-picker>
-            //
           }
+
           {(isFullscreen || editview) && (
             <div className="navbar-buttons navbar-buttons--close">
               <button

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

@@ -166,11 +166,19 @@ export class DashboardPage extends PureComponent<Props, State> {
     const { dashboard, editview, $injector } = this.props;
     const { isSettingsOpening, isEditing, isFullscreen } = this.state;
 
+    if (!dashboard) {
+      return null;
+    }
+
     const classes = classNames({
       'dashboard-page--settings-opening': isSettingsOpening,
       'dashboard-page--settings-open': !isSettingsOpening && editview,
     });
 
+    const gridWrapperClasses = classNames({
+      'dashboard-container': true,
+      'dashboard-container--has-submenu': dashboard.meta.submenuEnabled,
+    });
     return (
       <div className={classes}>
         <DashNav
@@ -180,8 +188,13 @@ export class DashboardPage extends PureComponent<Props, State> {
           editview={editview}
           $injector={$injector}
         />
-        {!dashboard && this.renderLoadingState()}
-        {dashboard && this.renderDashboard()}
+        <div className="scroll-canvas scroll-canvas--dashboard">
+          {dashboard && editview && <DashboardSettings dashboard={dashboard} />}
+
+          <div className={gridWrapperClasses}>
+            <DashboardGrid dashboard={dashboard} isEditing={isEditing} isFullscreen={isFullscreen} />
+          </div>
+        </div>
       </div>
     );
   }

public/app/features/dashboard/state/initDashboard.ts

@@ -88,7 +88,7 @@ export function initDashboard({ $injector, $scope, urlUid, urlSlug, urlType }: I
     try {
       await $injector.get('variableSrv').init(dashboard);
     } catch (err) {
-      dispatch(notifyApp(createErrorNotification('Templating init failed', err.toString())));
+      dispatch(notifyApp(createErrorNotification('Templating init failed')));
       console.log(err);
     }