From 0324de37d2caa63fac56746ad0dbcea53bea83a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Sun, 3 Feb 2019 20:38:13 +0100
Subject: [PATCH] refactorings and cleanup

---
 .../dashboard/components/DashNav/DashNav.tsx  | 71 ++++++++-----------
 .../components/DashNav/DashNavButton.tsx      | 21 ++++--
 .../features/dashboard/state/initDashboard.ts | 28 ++++++--
 3 files changed, 67 insertions(+), 53 deletions(-)

diff --git a/public/app/features/dashboard/components/DashNav/DashNav.tsx b/public/app/features/dashboard/components/DashNav/DashNav.tsx
index d6ee9ae1f68..559e3e1d66f 100644
--- a/public/app/features/dashboard/components/DashNav/DashNav.tsx
+++ b/public/app/features/dashboard/components/DashNav/DashNav.tsx
@@ -135,61 +135,49 @@ export class DashNav extends PureComponent<Props> {
           )}
 
           {canStar && (
-            <button
-              className="btn navbar-button navbar-button--star"
+            <DashNavButton
+              tooltip="Mark as favorite"
+              classSuffix="star"
+              icon={`${isStarred ? 'fa fa-star' : 'fa fa-star-o'}`}
               onClick={this.onStarDashboard}
-              title="Mark as favorite"
-            >
-              {isStarred && <i className="fa fa-star" />}
-              {!isStarred && <i className="fa fa-star-o" />}
-            </button>
+            />
           )}
 
           {canShare && (
-            <button
-              className="btn navbar-button navbar-button--share"
+            <DashNavButton
+              tooltip="Share dashboard"
+              classSuffix="share"
+              icon="fa fa-share-square-o"
               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>
+            <DashNavButton tooltip="Save dashboard" classSuffix="save" icon="fa fa-save" onClick={this.onSave} />
           )}
 
           {snapshotUrl && (
-            <a
-              className="btn navbar-button navbar-button--snapshot-origin"
+            <DashNavButton
+              tooltip="Open original dashboard"
+              classSuffix="snapshot-origin"
+              icon="fa fa-link"
               href={snapshotUrl}
-              title="Open original dashboard"
-            >
-              <i className="fa fa-link" />
-            </a>
+            />
           )}
 
           {showSettings && (
-            <button
-              className="btn navbar-button navbar-button--settings"
-              onClick={this.onOpenSettings}
-              title="Dashboard Settings"
-            >
-              <i className="fa fa-cog" />
-            </button>
+            <DashNavButton tooltip="Dashboard settings" classSuffix="settings" icon="fa fa-cog"
+            onClick={this.onOpenSettings} />
           )}
         </div>
 
         <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>
+          <DashNavButton
+            tooltip="Cycke view mode"
+            classSuffix="tv"
+            icon="fa fa-desktop"
+            onClick={this.onToggleTVMode}
+          />
         </div>
 
         {
@@ -198,13 +186,12 @@ export class DashNav extends PureComponent<Props> {
 
         {(isFullscreen || editview) && (
           <div className="navbar-buttons navbar-buttons--close">
-            <button
-              className="btn navbar-button navbar-button--primary"
+            <DashNavButton
+              tooltip="Back to dashboard"
+              classSuffix="primary"
+              icon="fa fa-reply"
               onClick={this.onClose}
-              title="Back to dashboard"
-            >
-              <i className="fa fa-reply" />
-            </button>
+            />
           </div>
         )}
       </div>
diff --git a/public/app/features/dashboard/components/DashNav/DashNavButton.tsx b/public/app/features/dashboard/components/DashNav/DashNavButton.tsx
index 1a98bf961dc..505baaf1f5d 100644
--- a/public/app/features/dashboard/components/DashNav/DashNavButton.tsx
+++ b/public/app/features/dashboard/components/DashNav/DashNavButton.tsx
@@ -8,15 +8,26 @@ interface Props {
   icon: string;
   tooltip: string;
   classSuffix: string;
-  onClick: () => void;
+  onClick?: () => void;
+  href?: string;
 }
 
-export const DashNavButton: FunctionComponent<Props> = ({ icon, tooltip, classSuffix, onClick }) => {
+export const DashNavButton: FunctionComponent<Props> = ({ icon, tooltip, classSuffix, onClick, href }) => {
+  if (onClick) {
+    return (
+      <Tooltip content={tooltip}>
+        <button className={`btn navbar-button navbar-button--${classSuffix}`} onClick={onClick}>
+          <i className={icon} />
+        </button>
+      </Tooltip>
+    );
+  }
+
   return (
-    <Tooltip content={tooltip} placement="bottom">
-      <button className={`btn navbar-button navbar-button--${classSuffix}`} onClick={onClick}>
+    <Tooltip content={tooltip}>
+      <a className={`btn navbar-button navbar-button--${classSuffix}`} href={href}>
         <i className={icon} />
-      </button>
+      </a>
     </Tooltip>
   );
 };
diff --git a/public/app/features/dashboard/state/initDashboard.ts b/public/app/features/dashboard/state/initDashboard.ts
index 612ce46b422..a39a7fce285 100644
--- a/public/app/features/dashboard/state/initDashboard.ts
+++ b/public/app/features/dashboard/state/initDashboard.ts
@@ -1,6 +1,11 @@
 // Services & Utils
 import { createErrorNotification } from 'app/core/copy/appNotification';
 import { getBackendSrv } from 'app/core/services/backend_srv';
+import { DashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
+import { TimeSrv } from 'app/features/dashboard/services/TimeSrv';
+import { AnnotationsSrv } from 'app/features/annotations/annotations_srv';
+import { VariableSrv } from 'app/features/templating/variable_srv';
+import { KeybindingSrv } from 'app/core/services/keybindingSrv';
 
 // Actions
 import { updateLocation } from 'app/core/actions';
@@ -81,13 +86,21 @@ export function initDashboard({ $injector, $scope, urlUid, urlSlug, urlType }: I
     }
 
     // init services
-    $injector.get('timeSrv').init(dashboard);
-    $injector.get('annotationsSrv').init(dashboard);
+    const timeSrv: TimeSrv = $injector.get('timeSrv');
+    const annotationsSrv: AnnotationsSrv = $injector.get('annotationsSrv');
+    const variableSrv: VariableSrv = $injector.get('variableSrv');
+    const keybindingSrv: KeybindingSrv = $injector.get('keybindingSrv');
+    const unsavedChangesSrv = $injector.get('unsavedChangesSrv');
+    const viewStateSrv = $injector.get('dashboardViewStateSrv');
+    const dashboardSrv: DashboardSrv = $injector.get('dashboardSrv');
+
+    timeSrv.init(dashboard);
+    annotationsSrv.init(dashboard);
 
     // template values service needs to initialize completely before
     // the rest of the dashboard can load
     try {
-      await $injector.get('variableSrv').init(dashboard);
+      await variableSrv.init(dashboard);
     } catch (err) {
       dispatch(notifyApp(createErrorNotification('Templating init failed')));
       console.log(err);
@@ -99,10 +112,10 @@ export function initDashboard({ $injector, $scope, urlUid, urlSlug, urlType }: I
       dashboard.autoFitPanels(window.innerHeight);
 
       // init unsaved changes tracking
-      $injector.get('unsavedChangesSrv').init(dashboard, $scope);
+      unsavedChangesSrv.init(dashboard, $scope);
 
       $scope.dashboard = dashboard;
-      $injector.get('dashboardViewStateSrv').create($scope);
+      viewStateSrv.create($scope);
 
       // dashboard keybindings should not live in core, this needs a bigger refactoring
       // So declaring this here so it can depend on the removePanel util function
@@ -111,12 +124,15 @@ export function initDashboard({ $injector, $scope, urlUid, urlSlug, urlType }: I
         removePanel(dashboard, dashboard.getPanelById(panelId), true);
       };
 
-      $injector.get('keybindingSrv').setupDashboardBindings($scope, dashboard, onRemovePanel);
+      keybindingSrv.setupDashboardBindings($scope, dashboard, onRemovePanel);
     } catch (err) {
       dispatch(notifyApp(createErrorNotification('Dashboard init failed', err.toString())));
       console.log(err);
     }
 
+    // legacy srv state
+    dashboardSrv.setCurrent(dashboard);
+    // set model in redux (even though it's mutable)
     dispatch(setDashboardModel(dashboard));
   };
 }