added time picker

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

@@ -3,6 +3,7 @@ import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 
 // Utils & Services
+import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
 import { appEvents } from 'app/core/app_events';
 
 // Components
@@ -24,6 +25,24 @@ export interface Props {
 }
 
 export class DashNav extends PureComponent<Props> {
+  timePickerEl: HTMLElement;
+  timepickerCmp: AngularComponent;
+
+  componentDidMount() {
+    const loader = getAngularLoader();
+
+    const template = '<gf-time-picker class="gf-timepicker-nav" dashboard="dashboard" ng-if="!dashboard.timepicker.hidden" />';
+    const scopeProps = { dashboard: this.props.dashboard };
+
+    this.timepickerCmp = loader.load(this.timePickerEl, scopeProps, template);
+  }
+
+  componentWillUnmount() {
+    if (this.timepickerCmp) {
+      this.timepickerCmp.destroy();
+    }
+  }
+
   onOpenSearch = () => {
     appEvents.emit('show-dash-search');
   };
@@ -98,7 +117,7 @@ export class DashNav extends PureComponent<Props> {
 
   render() {
     const { dashboard, isFullscreen, editview } = this.props;
-    const { canEdit, canStar, canSave, canShare, folderTitle, showSettings, isStarred } = dashboard.meta;
+    const { canStar, canSave, canShare, folderTitle, showSettings, isStarred } = dashboard.meta;
     const { snapshot } = dashboard;
 
     const haveFolder = dashboard.meta.folderId > 0;
@@ -125,7 +144,7 @@ export class DashNav extends PureComponent<Props> {
         */}
 
         <div className="navbar-buttons navbar-buttons--actions">
-          {canEdit && (
+          {canSave && (
             <DashNavButton
               tooltip="Add panel"
               classSuffix="add-panel"
@@ -166,8 +185,12 @@ export class DashNav extends PureComponent<Props> {
           )}
 
           {showSettings && (
-            <DashNavButton tooltip="Dashboard settings" classSuffix="settings" icon="fa fa-cog"
+            <DashNavButton
-            onClick={this.onOpenSettings} />
+              tooltip="Dashboard settings"
+              classSuffix="settings"
+              icon="fa fa-cog"
+              onClick={this.onOpenSettings}
+            />
           )}
         </div>
 
@@ -180,9 +203,7 @@ export class DashNav extends PureComponent<Props> {
           />
         </div>
 
-        {
+        <div className="gf-timepicker-nav" ref={element => (this.timePickerEl = element)} />
-          // <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">

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

@@ -200,20 +200,17 @@ export class DashboardPage extends PureComponent<Props, State> {
   }
 }
 
-const mapStateToProps = (state: StoreState) => {
+const mapStateToProps = (state: StoreState) => ({
-  console.log('state location', state.location.query);
+  urlUid: state.location.routeParams.uid,
-  return {
+  urlSlug: state.location.routeParams.slug,
-    urlUid: state.location.routeParams.uid,
+  urlType: state.location.routeParams.type,
-    urlSlug: state.location.routeParams.slug,
+  editview: state.location.query.editview,
-    urlType: state.location.routeParams.type,
+  urlPanelId: state.location.query.panelId,
-    editview: state.location.query.editview,
+  urlFullscreen: state.location.query.fullscreen === true,
-    urlPanelId: state.location.query.panelId,
+  urlEdit: state.location.query.edit === true,
-    urlFullscreen: state.location.query.fullscreen === true,
+  loadingState: state.dashboard.loadingState,
-    urlEdit: state.location.query.edit === true,
+  dashboard: state.dashboard.model as DashboardModel,
-    loadingState: state.dashboard.loadingState,
+});
-    dashboard: state.dashboard.model as DashboardModel,
-  };
-};
 
 const mapDispatchToProps = {
   initDashboard,

public/sass/components/_navbar.scss

@@ -102,7 +102,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  margin-right: $spacer;
+  margin-left: 10px;
 
   &--close {
     display: none;