Adding snapshot storage and route, #1623

pkg/api/dashboard_snapshot.go

 package api
 
 import (
+	"github.com/grafana/grafana/pkg/api/dtos"
 	"github.com/grafana/grafana/pkg/bus"
 	"github.com/grafana/grafana/pkg/middleware"
 	m "github.com/grafana/grafana/pkg/models"
 	"github.com/grafana/grafana/pkg/util"
 )
 
-func CreateDashboardSnapshotCommand(c *middleware.Context, cmd m.CreateDashboardSnapshotCommand) {
+func CreateDashboardSnapshot(c *middleware.Context, cmd m.CreateDashboardSnapshotCommand) {
 	cmd.Key = util.GetRandomString(20)
 
 	if err := bus.Dispatch(&cmd); err != nil {
@@ -29,5 +30,10 @@ func GetDashboardSnapshot(c *middleware.Context) {
 		return
 	}
 
-	c.JSON(200, query.Result)
+	dto := dtos.Dashboard{
+		Model: query.Result.Dashboard,
+		Meta:  dtos.DashboardMeta{IsSnapshot: true},
+	}
+
+	c.JSON(200, dto)
 }

pkg/api/dtos/models.go

@@ -27,9 +27,10 @@ type CurrentUser struct {
 }
 
 type DashboardMeta struct {
-	IsStarred bool   `json:"isStarred"`
-	IsHome    bool   `json:"isHome"`
-	Slug      string `json:"slug"`
+	IsStarred  bool   `json:"isStarred"`
+	IsHome     bool   `json:"isHome"`
+	IsSnapshot bool   `json:"isSnapshot"`
+	Slug       string `json:"slug"`
 }
 
 type Dashboard struct {

pkg/services/sqlstore/migrations/dashboard_snapshot_mig.go

@@ -3,7 +3,7 @@ package migrations
 import . "github.com/grafana/grafana/pkg/services/sqlstore/migrator"
 
 func addDashboardSnapshotMigrations(mg *Migrator) {
-	snapshotV3 := Table{
+	snapshotV4 := Table{
 		Name: "dashboard_snapshot",
 		Columns: []*Column{
 			{Name: "id", Type: DB_BigInt, IsPrimaryKey: true, IsAutoIncrement: true},
@@ -19,6 +19,6 @@ func addDashboardSnapshotMigrations(mg *Migrator) {
 		},
 	}
 
-	mg.AddMigration("create dashboard_snapshot table v3", NewAddTableMigration(snapshotV3))
-	addTableIndicesMigrations(mg, "v3", snapshotV3)
+	mg.AddMigration("create dashboard_snapshot table v4", NewAddTableMigration(snapshotV4))
+	addTableIndicesMigrations(mg, "v4", snapshotV4)
 }

src/app/features/dashboard/partials/shareDashboard.html

@@ -54,7 +54,33 @@
 			</em>
 		</p>
 
-		<button class="btn btn-success btn" ng-click="snapshot()">Create snapshot</button>
+		<div ng-if="!snapshotUrl" style="margin-bottom: 20px;">
+			<div class="tight-form last">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 100px">
+						Snapshot name
+					</li>
+					<li>
+						<input type="text" ng-model="snapshot.name" class="input-xxlarge tight-form-input last" >
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+		</div>
+
+		<div class="gf-form" ng-if="snapshotUrl">
+			<div class="gf-form-row">
+				<button class="btn btn-inverse pull-right" data-clipboard-text="{{snapshotUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
+				<span class="gf-fluid-input">
+					<input type="text" data-share-panel-url class="input" ng-model='snapshotUrl'></input>
+				</span>
+			</div>
+		</div>
+
+		<button class="btn btn-success btn" ng-click="createSnapshot()" ng-if="!snapshotUrl" ng-disabled="loading">
+			Create snapshot
+			<i ng-if="loading" class="fa fa-spinner fa-spin"></i>
+		</button>
 
 	</div>
 

src/app/features/dashboard/shareSnapshotCtrl.js

@@ -6,18 +6,27 @@ function (angular) {
 
   var module = angular.module('grafana.controllers');
 
-  module.controller('ShareSnapshotCtrl', function($scope, $rootScope, backendSrv, $timeout) {
+  module.controller('ShareSnapshotCtrl', function($scope, $rootScope, $location, backendSrv, $timeout) {
 
-    $scope.snapshot = function() {
+    $scope.snapshot = {
+      name: $scope.dashboard.title
+    };
+
+    $scope.createSnapshot = function() {
       $scope.dashboard.snapshot = true;
+      $scope.loading = true;
       $rootScope.$broadcast('refresh');
 
       $timeout(function() {
         var dash = angular.copy($scope.dashboard);
-        backendSrv.post('/api/snapshots/', {
-          dashboard: dash
-        }).then(function(results) {
-          console.log(results);
+        backendSrv.post('/api/snapshots/', {dashboard: dash}).then(function(results) {
+          $scope.loading = false;
+
+          var baseUrl = $location.absUrl().replace($location.url(), "");
+          $scope.snapshotUrl = baseUrl + '/dashboard/snapshots/' + results.key;
+
+        }, function() {
+          $scope.loading = false;
         });
 
         $scope.dashboard.snapshot = false;

src/app/routes/all.js

@@ -35,6 +35,10 @@ define([
         controller : 'DashFromImportCtrl',
         reloadOnSearch: false,
       })
+      .when('/dashboard/snapshots/:key', {
+        templateUrl: 'app/partials/dashboard.html',
+        controller : 'DashFromSnapshotCtrl',
+      })
       .when('/dashboard/new', {
         templateUrl: 'app/partials/dashboard.html',
         controller : 'NewDashboardCtrl',

src/app/routes/dashLoadControllers.js

@@ -33,6 +33,15 @@ function (angular, _, kbn, moment, $) {
     });
   });
 
+  module.controller('DashFromSnapshotCtrl', function($scope, $routeParams, backendSrv) {
+    backendSrv.get('/api/snapshots/' + $routeParams.key).then(function(result) {
+      $scope.initDashboard(result, $scope);
+    },function() {
+      $scope.initDashboard({}, $scope);
+      $scope.appEvent('alert-error', ['Dashboard Snapshot', '']);
+    });
+  });
+
   module.controller('DashFromImportCtrl', function($scope, $location, alertSrv) {
     if (!window.grafanaImportDashboard) {
       alertSrv.set('Not found', 'Cannot reload page with unsaved imported dashboard', 'warning', 7000);
@@ -47,7 +56,7 @@ function (angular, _, kbn, moment, $) {
       meta: {},
       model: {
         title: "New dashboard",
-        rows: [{ height: '250px', panels:[] }]
+      rows: [{ height: '250px', panels:[] }]
       },
     }, $scope);
   });
@@ -57,10 +66,10 @@ function (angular, _, kbn, moment, $) {
     var file_load = function(file) {
       return $http({
         url: "public/dashboards/"+file.replace(/\.(?!json)/,"/")+'?' + new Date().getTime(),
-        method: "GET",
-        transformResponse: function(response) {
-          return angular.fromJson(response);
-        }
+             method: "GET",
+             transformResponse: function(response) {
+               return angular.fromJson(response);
+             }
       }).then(function(result) {
         if(!result) {
           return false;
@@ -83,8 +92,8 @@ function (angular, _, kbn, moment, $) {
     var execute_script = function(result) {
       var services = {
         dashboardSrv: dashboardSrv,
-        datasourceSrv: datasourceSrv,
-        $q: $q,
+    datasourceSrv: datasourceSrv,
+    $q: $q,
       };
 
       /*jshint -W054 */