UI and backend connectivity implemented

pkg/api/api.go

@@ -69,6 +69,7 @@ func Register(r *macaron.Macaron) {
 
 	// dashboard snapshots
   r.Get("/dashboard/snapshot/*", Index)
+  r.Get("/dashboard/snapshots/", reqSignedIn, Index)
 
   // api for dashboard snapshots
   r.Post("/api/snapshots/", bind(m.CreateDashboardSnapshotCommand{}), CreateDashboardSnapshot)

pkg/api/index.go

@@ -63,7 +63,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
   data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
     Text: "Snapshots",
     Icon: "fa fa-fw fa-camera-retro",
-    Url:  "/snapshots",
+    Url:  "/dashboard/snapshots",
   })
 
 	if c.OrgRole == m.ROLE_ADMIN {

pkg/services/sqlstore/dashboard_snapshot.go

@@ -68,7 +68,7 @@ func GetDashboardSnapshot(query *m.GetDashboardSnapshotQuery) error {
 func SearchDashboardSnapshots(query *m.GetDashboardSnapshotsQuery) error {
   var snapshots = make(m.DashboardSnapshots, 0)
 
-  sess := x.Cols("name,key,delete_key").Limit(query.Limit)
+  sess := x.Limit(query.Limit)
 
   if query.Name != "" {
     sess.Where("name LIKE ?", query.Name)

public/app/features/all.js

@@ -5,6 +5,7 @@ define([
   './templating/templateSrv',
   './dashboard/all',
   './playlist/all',
+  './snapshot/all',
   './panel/all',
   './profile/profileCtrl',
   './profile/changePasswordCtrl',

public/app/features/snapshot/all.js

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

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

+<navbar icon="fa fa-fw fa-camera-retro" title="Dashboard snapshots"></navbar>
+
+<div class="page-container">
+  <div class="page-wide">
+
+    <h2>Available snapshots</h2>
+
+     <table class="filter-table" style="margin-top: 20px">
+      <thead>
+        <th><strong>Name</strong></th>
+        <th><strong>Snapshot url</strong></th>
+        <th style="width: 70px"></th>
+        <th style="width: 25px"></th>
+     
+     </thead>
+      
+      <tr ng-repeat="snapshot in snapshots">
+        <td>
+					<a href="dashboard/snapshot/{{snapshot.Key}}">{{snapshot.Name}}</a>
+        </td>
+        <td >
+          <a href="dashboard/snapshot/{{snapshot.Key}}">dashboard/snapshot/{{snapshot.Key}}</a>
+        </td>
+        <td class="text-center">
+          <a href="dashboard/snapshot/{{snapshot.Key}}" class="btn btn-inverse btn-mini">
+            <i class="fa fa-eye"></i>
+            View
+          </a>
+        </td>
+        <td  class="text-right">
+          <a ng-click="removeSnapshot(snapshot)" class="btn btn-danger btn-mini">
+            <i class="fa fa-remove"></i>
+          </a>
+        </td>
+      </tr>
+    </table>
+
+  </div>
+</div>

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_routes.js

+define([
+  'angular',
+  'app/core/config',
+  'lodash'
+],
+function (angular) {
+  'use strict';
+
+  var module = angular.module('grafana.routes');
+
+  module.config(function($routeProvider) {
+    $routeProvider
+      .when('/dashboard/snapshots', {
+        templateUrl: 'app/features/snapshot/partials/snapshots.html',
+        controller : 'SnapshotsCtrl'
+      });
+  });
+});