feat(alerting): add confirm text dialog when deleting dashboards with alerts

public/app/core/services/alert_srv.ts

@@ -76,7 +76,22 @@ export class AlertSrv {
     scope.title = payload.title;
     scope.text = payload.text;
     scope.text2 = payload.text2;
-    scope.onConfirm = payload.onConfirm;
+    scope.confirmText = payload.confirmText;
+    scope.confirmTextRequired = payload.confirmText !== "";
+    scope.onConfirm = function() {
+      if (!scope.confirmTextRequired || (scope.confirmTextRequired && scope.confirmTextValid)) {
+        payload.onConfirm();
+        scope.dismiss();
+      }
+    };
+    scope.updateConfirmText = function(value) {
+      scope.confirmInput = value;
+      scope.confirmTextValid = scope.confirmText === scope.confirmInput;
+      scope.confirmInputStyle = scope.confirmTextValid ? "confirm-model-valid-input" : "confirm-model-invalid-input";
+    };
+
+    scope.updateConfirmText("");
+
     scope.icon = payload.icon || "fa-check";
     scope.yesText = payload.yesText || "Yes";
     scope.noText = payload.noText || "Cancel";

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

@@ -136,11 +136,29 @@ export class DashNavCtrl {
     };
 
     $scope.deleteDashboard = function() {
+      var confirmText = "";
+      var text2 = $scope.dashboard.title;
+      var alerts = 0;
+
+      _.each($scope.dashboard.rows, row => {
+        _.each(row.panels, panel => {
+          if (panel.alerting && panel.alerting.queryRef !== '- select query -') {
+            alerts += 1;
+          };
+        });
+      });
+
+      if (alerts > 0) {
+        confirmText = $scope.dashboard.title;
+        text2 = `This dashboad contains ${alerts} alerts. Deleting this dashboad will also delete those alerts`;
+      }
+
       $scope.appEvent('confirm-modal', {
         title: 'Delete',
         text: 'Do you want to delete this dashboard?',
-        text2: $scope.dashboard.title,
+        text2: text2,
         icon: 'fa-trash',
+        confirmText: confirmText,
         yesText: 'Delete',
         onConfirm: function() {
           $scope.deleteDashboardConfirmed();

public/app/partials/confirm_modal.html

@@ -21,9 +21,15 @@
 			</div>
 		</div>
 
+
+		<div class="modal-content-confirm-text" ng-if="confirmTextRequired">
+			<span><i class="fa fa-warning"></i>Please type in the name of the dashboard to confirm.</span>
+			<input type="text" class="gf-form-input width-16 {{confirmInputStyle}}" style="display: inline-block;" ng-model="confirmInput" ng-change="updateConfirmText(confirmInput)">
+		</div>
+
 		<div class="confirm-modal-buttons">
 			<button type="button" class="btn btn-inverse" ng-click="dismiss()">{{noText}}</button>
-			<button type="button" class="btn btn-danger" ng-click="onConfirm();dismiss();">{{yesText}}</button>
+			<button type="button" class="btn btn-danger" ng-click="onConfirm();" ng-disabled="!confirmTextValid">{{yesText}}</button>
 		</div>
 	</div>
 

public/sass/_variables.dark.scss

@@ -164,6 +164,7 @@ $input-border-focus:             $input-border-color !default;
 $input-box-shadow-focus:         rgba(102,175,233,.6) !default;
 $input-color-placeholder:        $gray-1 !default;
 $input-label-bg:				         $dark-3;
+$input-invalid-border-color:     lighten($red, 5%);
 
 // Search
 $search-shadow: 0 0 35px 0 $body-bg;

public/sass/_variables.light.scss

@@ -171,6 +171,7 @@ $input-border-focus:             $blue !default;
 $input-box-shadow-focus:         $blue !default;
 $input-color-placeholder:        $gray-4 !default;
 $input-label-bg:	        	     $gray-6;
+$input-invalid-border-color:     lighten($red, 5%);
 
 // Sidemenu
 // -------------------------

public/sass/components/_modals.scss

@@ -115,6 +115,17 @@
       margin-right: $spacer/2;
     }
   }
+
+  .confirm-model-invalid-input {
+    border: thin solid $input-invalid-border-color;
+  }
+
+  .modal-content-confirm-text {
+    margin-bottom: 2rem;
+    span {
+      text-align: center;
+    }
+  }
 }
 
 .share-modal-body {