refactoring:: dashboard save modal and save as modal needed an update

public/app/core/services/backend_srv.ts

@@ -202,8 +202,12 @@ export class BackendSrv {
 
   saveDashboard(dash, options) {
     options = (options || {});
-    const message = options.message || '';
-    return this.post('/api/dashboards/db/', {dashboard: dash, overwrite: options.overwrite === true, message});
+
+    return this.post('/api/dashboards/db/', {
+      dashboard: dash,
+      overwrite: options.overwrite === true,
+      message: options.message || '',
+    });
   }
 }
 

public/app/features/dashboard/all.js

@@ -5,8 +5,8 @@ define([
   './dashboardLoaderSrv',
   './dashnav/dashnav',
   './submenu/submenu',
-  './saveDashboardAsCtrl',
-  './saveDashboardMessageCtrl',
+  './save_as_modal',
+  './save_modal',
   './shareModalCtrl',
   './shareSnapshotCtrl',
   './dashboard_srv',
@@ -20,7 +20,6 @@ define([
   './import/dash_import',
   './export/export_modal',
   './export_data/export_data_modal',
-  './dash_list_ctrl',
   './ad_hoc_filters',
   './row/row_ctrl',
   './repeat_option/repeat_option',

public/app/features/dashboard/dash_list_ctrl.ts

@@ -1,11 +0,0 @@
-///<reference path="../../headers/common.d.ts" />
-
-import coreModule from 'app/core/core_module';
-
-export class DashListCtrl {
-  /** @ngInject */
-  constructor() {
-  }
-}
-
-coreModule.controller('DashListCtrl', DashListCtrl);

public/app/features/dashboard/dashboard_srv.ts

@@ -65,7 +65,7 @@ export class DashboardSrv {
         icon: "fa-warning",
         altActionText: "Save As",
         onAltAction: () => {
-          this.saveDashboardAs();
+          this.showSaveAsModal();
         },
         onConfirm: () => {
           this.saveDashboard({overwrite: true}, clone);
@@ -102,36 +102,33 @@ export class DashboardSrv {
     }
 
     if (this.dash.title === 'New dashboard') {
-      return this.saveDashboardAs();
+      return this.showSaveAsModal();
     }
 
     if (this.dash.version > 0) {
-      return this.saveDashboardMessage();
+      return this.showSaveModal();
     }
 
     return this.save(this.dash.getSaveModelClone(), options);
   }
 
-  saveDashboardAs() {
+  showSaveAsModal() {
     var newScope = this.$rootScope.$new();
     newScope.clone = this.dash.getSaveModelClone();
     newScope.clone.editable = true;
     newScope.clone.hideControls = false;
 
     this.$rootScope.appEvent('show-modal', {
-      src: 'public/app/features/dashboard/partials/saveDashboardAs.html',
+      templateHtml: '<save-dashboard-as-modal dismiss="dismiss()"></save-dashboard-as-modal>',
       scope: newScope,
       modalClass: 'modal--narrow'
     });
   }
 
-  saveDashboardMessage() {
-    var newScope = this.$rootScope.$new();
-    newScope.clone = this.dash.getSaveModelClone();
-
+  showSaveModal() {
     this.$rootScope.appEvent('show-modal', {
-      src: 'public/app/features/dashboard/partials/saveDashboardMessage.html',
-      scope: newScope,
+      templateHtml: '<save-dashboard-modal dismiss="dismiss()"></save-dashboard-modal>"',
+      scope: this.$rootScope.$new(),
       modalClass: 'modal--narrow'
     });
   }

public/app/features/dashboard/dashnav/dashnav.ts

@@ -87,8 +87,8 @@ export class DashNavCtrl {
       this.$rootScope.appEvent('panel-change-view', {fullscreen: false, edit: false});
     }
 
-    saveDashboard(options) {
-      return this.dashboardSrv.saveDashboard(options);
+    saveDashboard() {
+      return this.dashboardSrv.saveDashboard();
     }
 
     deleteDashboard() {
@@ -126,7 +126,7 @@ export class DashNavCtrl {
     }
 
     saveDashboardAs() {
-      return this.dashboardSrv.saveDashboardAs();
+      return this.dashboardSrv.showSaveAsModal();
     }
 
     viewJson() {

public/app/features/dashboard/partials/dash_list.html

@@ -1,10 +0,0 @@
-<navbar title="Dashboards" title-url="dashboards" icon="icon-gf icon-gf-dashboard">
-</navbar>
-
-<div class="page-container">
-  <div class="page-header">
-		<h1>Dashboards</h1>
-	</div>
-</div>
-
-

public/app/features/dashboard/partials/graphiteImport.html

@@ -1,35 +0,0 @@
-<div ng-controller="GraphiteImportCtrl" ng-init="init()">
-
-	<div ng-if="datasources.length > 0">
-		<h2 class="page-heading">Load dashboard from Graphite-Web</h2>
-
-		<div class="gf-form-group">
-			<div class="gf-form-inline">
-				<div class="gf-form">
-					<span class="gf-form-label width-10">Data source</span>
-				</div>
-				<div class="gf-form">
-					<div class="gf-form-select-wrapper">
-						<select type="text" ng-model="options.sourceName" class="gf-form-input gf-size-auto" ng-options="f for f in datasources">
-						</select>
-					</div>
-				</div>
-				<div class="gf-form">
-					<button class="btn btn-success pull-right" ng-click="listAll()">List dashboards</button>
-				</div>
-			</div>
-		</div>
-
-		<table class="grafana-options-table" style="margin-top: 20px;">
-			<tr ng-repeat="dash in dashboards">
-				<td style="">{{dash.name}}</td>
-				<td>
-					<button class="btn btn-inverse pull-right" ng-click="import(dash.name)">
-						Load
-					</button>
-				</td>
-			</tr>
-		</table>
-
-	</div>
-</div>

public/app/features/dashboard/partials/saveDashboardAs.html

@@ -1,27 +0,0 @@
-<div class="modal-body" ng-controller="SaveDashboardAsCtrl" ng-init="init();">
-	<div class="modal-header">
-		<h2 class="modal-header-title">
-			<i class="fa fa-copy"></i>
-			<span class="p-l-1">Save As...</span>
-		</h2>
-
-		<a class="modal-header-close" ng-click="dismiss();">
-			<i class="fa fa-remove"></i>
-		</a>
-	</div>
-
-	<div class="modal-content">
-		<div class="p-t-2">
-			<div class="gf-form">
-				<label class="gf-form-label">New name</label>
-				<input type="text" class="gf-form-input" ng-model="clone.title" give-focus="true" ng-keydown="keyDown($event)">
-			</div>
-		</div>
-
-		<div class="gf-form-button-row text-center">
-			<a class="btn btn-success" ng-click="saveClone();">Save</a>
-			<a class="btn-text" ng-click="dismiss();">Cancel</a>
-		</div>
-	</div>
-</div>
-

public/app/features/dashboard/partials/saveDashboardMessage.html

@@ -1,49 +0,0 @@
-<div class="modal-body" ng-controller="SaveDashboardMessageCtrl" ng-init="init();">
-	<div class="modal-header">
-		<h2 class="modal-header-title">
-			<i class="fa fa-save"></i>
-			<span class="p-l-1">Save Dashboard</span>
-		</h2>
-
-		<a class="modal-header-close" ng-click="dismiss();">
-			<i class="fa fa-remove"></i>
-		</a>
-	</div>
-
-	<form name="saveMessage" ng-submit="saveVersion(saveMessage.$valid)" class="modal-content" novalidate>
-		<h6 class="text-center">Add a note to describe the changes in this version</h6>
-		<div class="p-t-2">
-			<div class="gf-form">
-				<label class="gf-form-hint">
-					<input
-						type="text"
-						name="message"
-						class="gf-form-input"
-						placeholder="Updates to &hellip;"
-						give-focus="true"
-						ng-model="clone.message"
-						ng-model-options="{allowInvalid: true}"
-						ng-keydown="keyDown($event)"
-						ng-maxlength="clone.max"
-						autocomplete="off"
-						required />
-					<small class="gf-form-hint-text muted" ng-cloak>
-						<span ng-class="{'text-error': saveMessage.message.$invalid && saveMessage.message.$dirty }">
-							{{clone.message.length || 0}}
-						</span>
-						/ {{clone.max}} characters
-					</small>
-				</label>
-			</div>
-		</div>
-
-		<div class="gf-form-button-row text-center">
-			<button type="submit" class="btn btn-success" ng-disabled="saveMessage.$invalid">
-				Save
-			</button>
-			<button class="btn btn-inverse" ng-click="dismiss();">Cancel</button>
-		</div>
-	</form>
-</div>
-
-

public/app/features/dashboard/saveDashboardAsCtrl.js

@@ -1,39 +0,0 @@
-define([
-  'angular',
-],
-function (angular) {
-  'use strict';
-
-  var module = angular.module('grafana.controllers');
-
-  module.controller('SaveDashboardAsCtrl', function($scope, dashboardSrv) {
-
-    $scope.init = function() {
-      $scope.clone.id = null;
-      $scope.clone.editable = true;
-      $scope.clone.title = $scope.clone.title + " Copy";
-
-      // remove alerts
-      $scope.clone.rows.forEach(function(row) {
-        row.panels.forEach(function(panel) {
-          delete panel.alert;
-        });
-      });
-
-      // remove auto update
-      delete $scope.clone.autoUpdate;
-    };
-
-    $scope.keyDown = function (evt) {
-      if (evt.keyCode === 13) {
-        $scope.saveClone();
-      }
-    };
-
-    $scope.saveClone = function() {
-      return dashboardSrv.save($scope.clone, {overwrite: false})
-        .then(function() { $scope.dismiss(); });
-    };
-  });
-
-});

public/app/features/dashboard/saveDashboardMessageCtrl.js

@@ -1,29 +0,0 @@
-define([
-  'angular',
-],
-function (angular) {
-  'use strict';
-
-  var module = angular.module('grafana.controllers');
-
-  module.controller('SaveDashboardMessageCtrl', function($scope, dashboardSrv) {
-
-    $scope.init = function() {
-      $scope.clone.message = '';
-      $scope.clone.max = 64;
-    };
-
-    function saveDashboard(options) {
-      options.message = $scope.clone.message;
-      return dashboardSrv.save($scope.clone, options)
-        .then(function() { $scope.dismiss(); });
-    }
-
-    $scope.saveVersion = function(isValid) {
-      if (!isValid) { return; }
-      saveDashboard({overwrite: false});
-    };
-  });
-
-});
-

public/app/features/dashboard/save_as_modal.ts

@@ -0,0 +1,79 @@
+///<reference path="../../headers/common.d.ts" />
+
+import coreModule from 'app/core/core_module';
+
+const  template = `
+<div class="modal-body">
+	<div class="modal-header">
+		<h2 class="modal-header-title">
+			<i class="fa fa-copy"></i>
+			<span class="p-l-1">Save As...</span>
+		</h2>
+
+		<a class="modal-header-close" ng-click="ctrl.dismiss();">
+			<i class="fa fa-remove"></i>
+		</a>
+	</div>
+
+	<div class="modal-content">
+		<div class="p-t-2">
+			<div class="gf-form">
+				<label class="gf-form-label">New name</label>
+				<input type="text" class="gf-form-input" ng-model="ctrl.clone.title" give-focus="true" ng-keydown="ctrl.keyDown($event)">
+			</div>
+		</div>
+
+		<div class="gf-form-button-row text-center">
+			<a class="btn btn-success" ng-click="ctrl.save();">Save</a>
+			<a class="btn-text" ng-click="ctrl.dismiss();">Cancel</a>
+		</div>
+	</div>
+</div>
+`;
+
+export class SaveDashboardAsModalCtrl {
+  clone: any;
+  dismiss: () => void;
+
+  /** @ngInject */
+  constructor(private $scope, private dashboardSrv) {
+    var dashboard = this.dashboardSrv.getCurrent();
+    this.clone = dashboard.getSaveModelClone();
+    this.clone.id = null;
+    this.clone.title += ' Copy';
+    this.clone.editable = true;
+    this.clone.hideControls = false;
+
+    // remove alerts
+    this.clone.rows.forEach(row => {
+      row.panels.forEach(panel => {
+        delete panel.alert;
+      });
+    });
+
+    delete this.clone.autoUpdate;
+  }
+
+  save() {
+    return this.dashboardSrv.save(this.clone).then(this.dismiss);
+  }
+
+  keyDown(evt) {
+    if (evt.keyCode === 13) {
+      this.save();
+    }
+  }
+}
+
+export function saveDashboardAsDirective() {
+  return {
+    restrict: 'E',
+    template: template,
+    controller: SaveDashboardAsModalCtrl,
+    bindToController: true,
+    controllerAs: 'ctrl',
+    scope: {dismiss: "&"}
+  };
+}
+
+coreModule.directive('saveDashboardAsModal',  saveDashboardAsDirective);

public/app/features/dashboard/save_modal.ts

@@ -0,0 +1,95 @@
+///<reference path="../../headers/common.d.ts" />
+
+import coreModule from 'app/core/core_module';
+
+const  template = `
+<div class="modal-body">
+	<div class="modal-header">
+		<h2 class="modal-header-title">
+			<i class="fa fa-save"></i>
+			<span class="p-l-1">Save Dashboard</span>
+		</h2>
+
+		<a class="modal-header-close" ng-click="ctrl.dismiss();">
+			<i class="fa fa-remove"></i>
+		</a>
+	</div>
+
+	<form name="ctrl.saveForm" ng-submit="ctrl.save()" class="modal-content" novalidate>
+		<h6 class="text-center">Add a note to describe your changes</h6>
+		<div class="p-t-2">
+			<div class="gf-form">
+				<label class="gf-form-hint">
+					<input
+						type="text"
+						name="message"
+						class="gf-form-input"
+						placeholder="Updates to &hellip;"
+						give-focus="true"
+						ng-model="ctrl.message"
+						ng-model-options="{allowInvalid: true}"
+						ng-maxlength="this.max"
+						ng-keydown="ctrl.keyDown($event)"
+						autocomplete="off"
+						required />
+					<small class="gf-form-hint-text muted" ng-cloak>
+						<span ng-class="{'text-error': ctrl.saveForm.message.$invalid && ctrl.saveForm.message.$dirty }">
+							{{ctrl.message.length || 0}}
+						</span>
+						/ {{ctrl.max}} characters
+					</small>
+				</label>
+			</div>
+		</div>
+
+		<div class="gf-form-button-row text-center">
+			<button type="submit" class="btn btn-success" ng-disabled="ctrl.saveForm.$invalid">Save</button>
+			<button class="btn btn-inverse" ng-click="ctrl.dismiss();">Cancel</button>
+		</div>
+	</form>
+</div>
+`;
+
+export class SaveDashboardModalCtrl {
+  message: string;
+  max: number;
+  saveForm: any;
+  dismiss: () => void;
+
+  /** @ngInject */
+  constructor(private $scope, private dashboardSrv) {
+    this.message = '';
+    this.max = 64;
+  }
+
+  save() {
+    if (!this.saveForm.$valid) {
+      return;
+    }
+
+    var dashboard = this.dashboardSrv.getCurrent();
+    var saveModel = dashboard.getSaveModelClone();
+    var options = {message: this.message};
+
+    return this.dashboardSrv.save(saveModel, options).then(this.dismiss);
+  }
+
+  keyDown(evt) {
+    if (evt.keyCode === 13) {
+      this.save();
+    }
+  }
+}
+
+export function saveDashboardModalDirective() {
+  return {
+    restrict: 'E',
+    template: template,
+    controller: SaveDashboardModalCtrl,
+    bindToController: true,
+    controllerAs: 'ctrl',
+    scope: {dismiss: "&"}
+  };
+}
+
+coreModule.directive('saveDashboardModal',  saveDashboardModalDirective);