Custom snapshot topnav header, new custom dashboard snapshot icon, #1623

pkg/api/dashboard_snapshot.go

@@ -65,7 +65,11 @@ func GetDashboardSnapshot(c *middleware.Context) {
 
 	dto := dtos.Dashboard{
 		Model: snapshot.Dashboard,
-		Meta:  dtos.DashboardMeta{IsSnapshot: true},
+		Meta: dtos.DashboardMeta{
+			IsSnapshot: true,
+			Created:    snapshot.Created,
+			Expires:    snapshot.Expires,
+		},
 	}
 
 	metrics.M_Api_Dashboard_Snapshot_Get.Inc(1)

pkg/api/dtos/models.go

@@ -4,6 +4,7 @@ import (
 	"crypto/md5"
 	"fmt"
 	"strings"
+	"time"
 
 	m "github.com/grafana/grafana/pkg/models"
 )
@@ -27,10 +28,12 @@ type CurrentUser struct {
 }
 
 type DashboardMeta struct {
-	IsStarred  bool   `json:"isStarred"`
-	IsHome     bool   `json:"isHome"`
-	IsSnapshot bool   `json:"isSnapshot"`
-	Slug       string `json:"slug"`
+	IsStarred  bool      `json:"isStarred"`
+	IsHome     bool      `json:"isHome"`
+	IsSnapshot bool      `json:"isSnapshot"`
+	Slug       string    `json:"slug"`
+	Expires    time.Time `json:"expires"`
+	Created    time.Time `json:"created"`
 }
 
 type Dashboard struct {

src/app/directives/topnav.js

@@ -25,7 +25,7 @@ function (angular) {
               '<i class="fa fa-bars"></i>' +
             '</a>' +
 
-            '<span class="icon-circle top-nav-icon"">' +
+            '<span class="icon-circle top-nav-icon">' +
               '<i ng-class="icon"></i>' +
             '</span>' +
 

src/app/features/dashboard/all.js

@@ -1,6 +1,7 @@
 define([
   './dashboardCtrl',
   './dashboardNavCtrl',
+  './snapshotTopNavCtrl',
   './saveDashboardAsCtrl',
   './playlistCtrl',
   './rowCtrl',

src/app/features/dashboard/dashboardCtrl.js

@@ -21,6 +21,7 @@ function (angular, $, config) {
       $timeout) {
 
     $scope.editor = { index: 0 };
+    $scope.topNavPartial = 'app/features/dashboard/partials/dashboardTopNav.html';
     $scope.panels = config.panels;
 
     var resizeEventTimeout;
@@ -76,10 +77,7 @@ function (angular, $, config) {
       }
 
       if (dashboard.snapshot) {
-        meta.canEdit = false;
-        meta.canSave = false;
-        meta.canStar = false;
-        meta.canShare = false;
+        $scope.topNavPartial = 'app/features/dashboard/partials/snapshotTopNav.html';
       }
 
       $scope.dashboardMeta = meta;

src/app/features/dashboard/dashboardNavCtrl.js

@@ -1,25 +1,20 @@
 define([
   'angular',
   'lodash',
-  'moment',
   'config',
   'store',
   'filesaver'
 ],
-function (angular, _, moment) {
+function (angular, _) {
   'use strict';
 
   var module = angular.module('grafana.controllers');
 
-  module.controller('DashboardNavCtrl', function($scope, $rootScope, alertSrv, $location, playlistSrv, backendSrv, timeSrv, $timeout) {
+  module.controller('DashboardNavCtrl', function($scope, $rootScope, alertSrv, $location, playlistSrv, backendSrv, $timeout) {
 
     $scope.init = function() {
       $scope.onAppEvent('save-dashboard', $scope.saveDashboard);
       $scope.onAppEvent('delete-dashboard', $scope.deleteDashboard);
-
-      $scope.onAppEvent('zoom-out', function() {
-        $scope.zoom(2);
-      });
     };
 
     $scope.openEditView = function(editview) {
@@ -136,27 +131,6 @@ function (angular, _, moment) {
       window.saveAs(blob, $scope.dashboard.title + '-' + new Date().getTime());
     };
 
-    $scope.zoom = function(factor) {
-      var range = timeSrv.timeRange();
-
-      var timespan = (range.to.valueOf() - range.from.valueOf());
-      var center = range.to.valueOf() - timespan/2;
-
-      var to = (center + (timespan*factor)/2);
-      var from = (center - (timespan*factor)/2);
-
-      if(to > Date.now() && range.to <= Date.now()) {
-        var offset = to - Date.now();
-        from = from - offset;
-        to = Date.now();
-      }
-
-      timeSrv.setTime({
-        from: moment.utc(from).toDate(),
-        to: moment.utc(to).toDate(),
-      });
-    };
-
     $scope.snapshot = function() {
       $scope.dashboard.snapshot = true;
       $rootScope.$broadcast('refresh');

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

@@ -47,8 +47,12 @@
 
 	<div class="gf-box-body share-snapshot ng-cloak" ng-cloak ng-if="editor.index === 1" ng-controller="ShareSnapshotCtrl">
 
-		<div class="share-snapshot-header" ng-if="step === 1">
+		<div style="margin: 10px 0">
 			<i ng-if="loading" class="fa fa-spinner fa-spin"></i>
+			<i ng-if="!loading" class="gf-icon gf-icon-snapshot"></i>
+		</div>
+
+		<div class="share-snapshot-header" ng-if="step === 1">
 			<p class="share-snapshot-info-text">
 				A snapshot is an instant way to share an interactive dashboard publicly.
 				When created, we <strong>strip sensitive data</strong> like queries (metric, template and annotation) and panel links,
@@ -86,7 +90,7 @@
 				</div>
 			</div>
 
-			<div class="gf-form" ng-if="step === 2" style="margin-top: 55px">
+			<div class="gf-form" ng-if="step === 2" style="margin-top: 40px">
 				<div class="gf-form-row">
 					<a href="{{snapshotUrl}}" class="large share-snapshot-link" target="_blank">
 						<i class="fa fa-external-link-square"></i>

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

@@ -0,0 +1,31 @@
+<div class="navbar navbar-static-top" ng-controller='SnapshotTopNavCtrl' ng-init="init()">
+	<div class="navbar-inner">
+		<div class="container-fluid">
+
+			<div class="top-nav">
+				<a class="pointer top-nav-menu-btn" ng-if="!contextSrv.sidemenu" ng-click="contextSrv.toggleSideMenu()">
+					<img class="logo-icon" src="img/fav32.png"></img>
+					<i class="fa fa-bars"></i>
+				</a>
+
+				<div class="top-nav-snapshot-title">
+					<a class="pointer" bs-tooltip="titleTooltip" data-placement="bottom">
+						<i class="gf-icon gf-icon-snapshot"></i>
+						<span class="dashboard-title">
+							{{dashboard.title}}
+							<em class="small">&nbsp;&nbsp;(snapshot)</em>
+						</span>
+					</a>
+				</div>
+			</div>
+
+			<ul class="nav pull-right">
+				<li ng-repeat="pulldown in dashboard.nav" ng-controller="PulldownCtrl" ng-show="pulldown.enable">
+					<grafana-simple-panel type="pulldown.type" ng-cloak>
+					</grafana-simple-panel>
+				</li>
+			</ul>
+
+		</div>
+	</div>
+</div>

src/app/features/dashboard/snapshotTopNavCtrl.js

@@ -0,0 +1,22 @@
+define([
+  'angular',
+  'moment',
+],
+function (angular, moment) {
+  'use strict';
+
+  var module = angular.module('grafana.controllers');
+
+  module.controller('SnapshotTopNavCtrl', function($scope) {
+
+    $scope.init = function() {
+      var meta = $scope.dashboardMeta;
+      $scope.titleTooltip = 'Created:  ' + moment(meta.created).calendar();
+      if (meta.expires) {
+        $scope.titleTooltip += '<br>Expires: &nbsp;' + moment(meta.expires).fromNow() + '<br>';
+      }
+    };
+
+  });
+
+});

src/app/panels/timepicker/module.js

@@ -66,6 +66,10 @@ function (angular, app, _, moment, kbn) {
       }
 
       $scope.time = getScopeTimeObj(time.from, time.to);
+
+      $scope.onAppEvent('zoom-out', function() {
+        $scope.zoom(2);
+      });
     };
 
     $scope.customTime = function() {
@@ -213,5 +217,26 @@ function (angular, app, _, moment, kbn) {
       return moment(new Date(date.getTime() + date.getTimezoneOffset() * 60000)).toDate();
     };
 
+    $scope.zoom = function(factor) {
+      var range = timeSrv.timeRange();
+
+      var timespan = (range.to.valueOf() - range.from.valueOf());
+      var center = range.to.valueOf() - timespan/2;
+
+      var to = (center + (timespan*factor)/2);
+      var from = (center - (timespan*factor)/2);
+
+      if(to > Date.now() && range.to <= Date.now()) {
+        var offset = to - Date.now();
+        from = from - offset;
+        to = Date.now();
+      }
+
+      timeSrv.setTime({
+        from: moment.utc(from).toDate(),
+        to: moment.utc(to).toDate(),
+      });
+    };
+
   });
 });

src/app/partials/dashboard.html

@@ -1,14 +1,14 @@
 <div body-class class="dashboard" ng-class="{'dashboard-fullscreen': dashboardViewState.fullscreen}">
 
-	<div ng-include="'app/partials/dashboard_topnav.html'">
+	<div ng-include src="topNavPartial">
 	</div>
 
-
 	<div dash-editor-view></div>
 	<div dash-search-view></div>
 
 	<div ng-if="submenuEnabled" ng-include="'app/partials/submenu.html'">
   </div>
+
 	<div class="clearfix"></div>
 
 	<div class="main-view-container">

src/css/less/grafana.less

@@ -14,6 +14,7 @@
 @import "dashlist.less";
 @import "admin.less";
 @import "validation.less";
+@import "fonts.less";
 
 .row-control-inner {
   padding:0px;
@@ -298,6 +299,14 @@
 .share-snapshot {
   text-align: center;
 
+  .gf-icon-snapshot {
+    font-size: 70px;
+  }
+
+  .fa-spinner {
+    font-size: 70px;
+  }
+
   .share-snapshot-info-text {
     margin: 10px 105px;
     strong {
@@ -307,16 +316,6 @@
   }
 
   .share-snapshot-header {
-    .fa-spinner {
-      position: absolute;
-      font-size: 600%;
-      left: 44%;
-      color: @grafanaTargetFuncBackground;
-      z-index: -1;
-    }
-
-    position: relative;
-    z-index: 1000;
     margin: 20px 0 22px 0;
   }
 

src/css/less/navbar.less

@@ -90,12 +90,12 @@
     position: relative;
     top: 4px;
   }
+}
 
-  .dashboard-title {
-    padding: 0px 6px 5px 5px;
-    color: @linkColorHover;
-    font-size: 17px;
-  }
+.dashboard-title {
+  padding: 0px 6px 5px 5px;
+  color: @linkColorHover;
+  font-size: 17px;
 }
 
 .top-nav-icon {
@@ -122,3 +122,19 @@
   color: @linkColor;
 }
 
+.top-nav-snapshot-title {
+  .gf-icon {
+    position: relative;
+    top: 3px;
+  }
+  a {
+    display: inline-block;
+    padding: 3px 15px 5px 10px;
+  }
+  display: block;
+  float: left;
+  font-size: 1.4em;
+  margin: 9px 18px 5px 14px;
+  color: @linkColor;
+}
+

src/vendor/css/font-awesome.min.css

@@ -11,6 +11,7 @@
   font-weight: normal;
   font-style: normal;
 }
+
 .fa {
   display: inline-block;
   font: normal normal normal 14px/1 FontAwesome;