UI: replaced native confirm dialogs with nicer custom ones

src/app/controllers/dashboardNavCtrl.js

@@ -93,12 +93,18 @@ function (angular, _, moment, config, store) {
     };
 
     $scope.deleteDashboard = function(evt, options) {
-      if (!confirm('Do you want to delete dashboard ' + options.title + ' ?')) {
-        return;
-      }
-
       if (!$scope.isAdmin()) { return false; }
 
+      $scope.appEvent('confirm-modal', {
+        title: 'Delete dashboard',
+        text: 'Do you want to delete dashboard ' + options.title + '?',
+        onConfirm: function() {
+          $scope.deleteDashboardConfirmed(options);
+        }
+      });
+    };
+
+    $scope.deleteDashboardConfirmed = function(options) {
       var id = options.id;
       $scope.db.deleteDashboard(id).then(function(id) {
         $scope.appEvent('alert-success', ['Dashboard Deleted', id + ' has been deleted']);

src/app/controllers/row.js

@@ -47,9 +47,13 @@ function (angular, app, _) {
     };
 
     $scope.delete_row = function() {
-      if (confirm("Are you sure you want to delete this row?")) {
-        $scope.dashboard.rows = _.without($scope.dashboard.rows, $scope.row);
-      }
+      $scope.appEvent('confirm-modal', {
+        title: 'Delete row',
+        text: 'Are you sure you want to delete this row?',
+        onConfirm: function() {
+          $scope.dashboard.rows = _.without($scope.dashboard.rows, $scope.row);
+        }
+      });
     };
 
     $scope.move_row = function(direction) {
@@ -77,7 +81,8 @@ function (angular, app, _) {
 
     $scope.remove_panel_from_row = function(row, panel) {
       $scope.appEvent('confirm-modal', {
-        title: 'Are you sure you want to remove this panel?',
+        title: 'Remove panel',
+        text: 'Are you sure you want to remove this panel?',
         onConfirm: function() {
           row.panels = _.without(row.panels, panel);
         }

src/app/partials/confirm_modal.html

@@ -2,17 +2,20 @@
 	<div class="dashboard-editor-header">
 		<div class="dashboard-editor-title">
 			<i class="icon icon-ok"></i>
-			Confirm
+			{{title}}
 		</div>
 	</div>
 
 	<div class="dashboard-editor-body">
+		<p class="row-fluid text-center large">
+			{{text}}
+			<br>
+			<br>
+		</p>
 		<div class="row-fluid">
-		<span class="span4">
-				{{title}}
-		</span>
-	  <button type="button" class="btn btn-info span2" ng-click="dismiss()">Cancel</button>
-	  <button type="button" class="btn btn-success span2" ng-click="onConfirm();dismiss();">OK</button>
+		<span class="span4"></span>
+	  <button type="button" class="btn btn-success span2" ng-click="dismiss()">No</button>
+	  <button type="button" class="btn btn-danger span2" ng-click="onConfirm();dismiss();">Yes</button>
 		<span class="span4"></span>
   </div>
 

src/app/services/alertSrv.js

@@ -69,6 +69,7 @@ function (angular, _) {
       var confirmModal = $modal({
         template: './app/partials/confirm_modal.html',
         persist: true,
+        modalClass: 'confirm-modal',
         show: false,
         scope: scope,
         keyboard: false

src/css/less/grafana.less

@@ -561,3 +561,7 @@ select.grafana-target-segment-input {
   th:last-child { text-align: left; }
   td:first-child { text-align: right; }
 }
+
+.confirm-modal {
+  max-width: 500px;
+}