Merge pull request #3998 from utkarshcmu/ds-conf-box

Added DS deletion confirmation modal

public/app/core/routes/routes.ts

@@ -45,6 +45,7 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
   .when('/datasources', {
     templateUrl: 'public/app/features/datasources/partials/list.html',
     controller : 'DataSourcesCtrl',
+    controllerAs: 'ctrl',
     resolve: loadOrgBundle,
   })
   .when('/datasources/edit/:id', {

public/app/features/datasources/list_ctrl.js

-define([
-  'angular',
-  'lodash',
-],
-function (angular) {
-  'use strict';
-
-  var module = angular.module('grafana.controllers');
-
-  module.controller('DataSourcesCtrl', function($scope, $http, backendSrv, datasourceSrv) {
-
-    $scope.init = function() {
-      $scope.datasources = [];
-      $scope.getDatasources();
-    };
-
-    $scope.getDatasources = function() {
-      backendSrv.get('/api/datasources').then(function(results) {
-        $scope.datasources = results;
-      });
-    };
-
-    $scope.remove = function(ds) {
-      backendSrv.delete('/api/datasources/' + ds.id).then(function() {
-        $scope.getDatasources();
-
-        backendSrv.get('/api/frontend/settings').then(function(settings) {
-          datasourceSrv.init(settings.datasources);
-        });
-      });
-    };
-
-    $scope.init();
-
-  });
-});

public/app/features/datasources/list_ctrl.ts

+///<reference path="../../headers/common.d.ts" />
+
+import angular from 'angular';
+import _ from 'lodash';
+import coreModule from '../../core/core_module';
+
+export class DataSourcesCtrl {
+  datasources: any;
+
+  /** @ngInject */
+  constructor(private $scope, private $location, private $http, private backendSrv, private datasourceSrv) {
+    backendSrv.get('/api/datasources')
+      .then((result) => {
+        this.datasources = result;
+      });
+  }
+
+  removeDataSourceConfirmed(ds) {
+
+    this.backendSrv.delete('/api/datasources/' + ds.id)
+      .then(() => {
+        this.$scope.appEvent('alert-success', ['Datasource deleted', '']);
+      }, () => {
+        this.$scope.appEvent('alert-error', ['Unable to delete datasource', '']);
+      }).then(() => {
+      this.backendSrv.get('/api/datasources')
+        .then((result) => {
+          this.datasources = result;
+        });
+      this.backendSrv.get('/api/frontend/settings')
+        .then((settings) => {
+          this.datasourceSrv.init(settings.datasources);
+        });
+    });
+  }
+
+  removeDataSource(ds) {
+
+    this.$scope.appEvent('confirm-modal', {
+      title: 'Confirm delete datasource',
+      text: 'Are you sure you want to delete datasource ' + ds.name + '?',
+      yesText: "Delete",
+      icon: "fa-warning",
+      onConfirm: () => {
+        this.removeDataSourceConfirmed(ds);
+      }
+    });
+  }
+
+}
+
+coreModule.controller('DataSourcesCtrl', DataSourcesCtrl);

public/app/features/datasources/partials/list.html

@@ -12,11 +12,11 @@
 		<h1>Data sources</h1>
 		<br>
 
-		<div ng-if="datasources.length === 0">
+		<div ng-if="ctrl.datasources.length === 0">
 			<em>No data sources defined</em>
 		</div>
 
-		<table class="filter-table" ng-if="datasources.length > 0">
+		<table class="filter-table" ng-if="ctrl.datasources.length > 0">
 			<thead>
 				<tr>
 					<th><strong>Name</strong></th>
@@ -27,7 +27,7 @@
 				</tr>
 			</thead>
 			<tbody>
-				<tr ng-repeat="ds in datasources">
+				<tr ng-repeat="ds in ctrl.datasources">
 					<td>
 						<a href="datasources/edit/{{ds.id}}">
 							<i class="fa fa-database"></i> &nbsp; {{ds.name}}
@@ -48,7 +48,7 @@
 						</a>
 					</td>
 					<td class="text-right">
-						<a ng-click="remove(ds)" class="btn btn-danger btn-mini">
+						<a ng-click="ctrl.removeDataSource(ds)" class="btn btn-danger btn-mini">
 							<i class="fa fa-remove"></i>
 						</a>
 					</td>