Converted ctrl to typescript

public/app/core/routes/all.js

@@ -134,7 +134,8 @@ define([
       })
       })
       .when('/dashboard/snapshots', {
       .when('/dashboard/snapshots', {
         templateUrl: 'app/features/snapshot/partials/snapshots.html',
         templateUrl: 'app/features/snapshot/partials/snapshots.html',
-        controller : 'SnapshotsCtrl'
+        controller : 'SnapshotsCtrl',
+        controllerAs: 'ctrl',
       })
       })
       .when('/apps', {
       .when('/apps', {
         templateUrl: 'app/features/apps/partials/list.html',
         templateUrl: 'app/features/apps/partials/list.html',

public/app/features/snapshot/all.js

-define([
-  './snapshot_ctrl',
-], function () {});

public/app/features/snapshot/all.ts

+import './snapshot_ctrl';

public/app/features/snapshot/partials/snapshots.html

 <navbar icon="fa fa-fw fa-camera-retro" title="Dashboard snapshots"></navbar>
 <navbar icon="fa fa-fw fa-camera-retro" title="Dashboard snapshots"></navbar>
 
 
 <div class="page-container">
 <div class="page-container">
-  <div class="page-wide">
+  <div class="page-wide" ng-init="ctrl.init()">
 
 
     <h2>Available snapshots</h2>
     <h2>Available snapshots</h2>
 
 
@@ -14,7 +14,7 @@
      
      
      </thead>
      </thead>
       
       
-      <tr ng-repeat="snapshot in snapshots">
+      <tr ng-repeat="snapshot in ctrl.snapshots">
         <td>
         <td>
 					<a href="dashboard/snapshot/{{snapshot.Key}}">{{snapshot.Name}}</a>
 					<a href="dashboard/snapshot/{{snapshot.Key}}">{{snapshot.Name}}</a>
         </td>
         </td>
@@ -28,7 +28,7 @@
           </a>
           </a>
         </td>
         </td>
         <td  class="text-right">
         <td  class="text-right">
-          <a ng-click="removeSnapshot(snapshot)" class="btn btn-danger btn-mini">
+          <a ng-click="ctrl.removeSnapshot(snapshot)" class="btn btn-danger btn-mini">
             <i class="fa fa-remove"></i>
             <i class="fa fa-remove"></i>
           </a>
           </a>
         </td>
         </td>

public/app/features/snapshot/snapshot_ctrl.js

-define([
-  'angular',
-  'lodash'
-],
-function (angular, _) {
-  'use strict';
-
-  var module = angular.module('grafana.controllers');
-
-  module.controller('SnapshotsCtrl', function($scope, $location, backendSrv) {
-    backendSrv.get('/api/dashboard/snapshots')
-      .then(function(result) {
-        $scope.snapshots = result;
-      });
-
-    $scope.removeSnapshotConfirmed = function(snapshot) {
-      _.remove($scope.snapshots, {Key: snapshot.Key});
-
-      backendSrv.get('/api/snapshots-delete/' + snapshot.DeleteKey)
-      .then(function() {
-        $scope.appEvent('alert-success', ['Snapshot deleted', '']);
-      }, function() {
-        $scope.appEvent('alert-error', ['Unable to delete snapshot', '']);
-        $scope.snapshots.push(snapshot);
-      });
-    };
-
-    $scope.removeSnapshot = function(snapshot) {
-
-      $scope.appEvent('confirm-modal', {
-        title: 'Confirm delete snapshot',
-        text: 'Are you sure you want to delete snapshot ' + snapshot.Name + '?',
-        yesText: "Delete",
-        icon: "fa-warning",
-        onConfirm: function() {
-          $scope.removeSnapshotConfirmed(snapshot);
-        }
-      });
-
-    };
-
-  });
-});

public/app/features/snapshot/snapshot_ctrl.ts

+///<reference path="../../headers/common.d.ts" />
+
+import angular from 'angular';
+import _ from 'lodash';
+
+export class SnapshotsCtrl {
+  snapshots: any[];
+
+  /** @ngInject */
+  constructor(private backendSrv: any) {}
+
+  init() {
+    this.backendSrv.get('/api/dashboard/snapshots').then(snapshots => {
+      this.snapshots = snapshots;
+    });
+    console.log(this.snapshots);
+  }
+}
+  
+angular.module('grafana.controllers').controller('SnapshotsCtrl', SnapshotsCtrl);