Skip to content

N
nexpie-grafana-theme
Commit 0f791c9f by Torkel Ödegaard
Options

Refactoring of share modal

parent ceb079a7
Showing with 85 additions and 105 deletions
public/app/features/dashboard/all.js
...@@ -5,7 +5,7 @@ define([ ...@@ -5,7 +5,7 @@ define([
'./saveDashboardAsCtrl', './saveDashboardAsCtrl',
'./playlistCtrl', './playlistCtrl',
'./rowCtrl', './rowCtrl',
'./sharePanelCtrl', './shareModalCtrl',
'./shareSnapshotCtrl', './shareSnapshotCtrl',
'./submenuCtrl', './submenuCtrl',
'./dashboardSrv', './dashboardSrv',
......
public/app/features/dashboard/dashboardNavCtrl.js
...@@ -37,7 +37,7 @@ function (angular, _) { ...@@ -37,7 +37,7 @@ function (angular, _) {
$scope.shareDashboard = function() { $scope.shareDashboard = function() {
$scope.appEvent('show-modal', { $scope.appEvent('show-modal', {
src: './app/features/dashboard/partials/shareDashboard.html', src: './app/features/dashboard/partials/shareModal.html',
scope: $scope.$new(), scope: $scope.$new(),
}); });
}; };
......
public/app/features/dashboard/partials/shareDashboard.html → public/app/features/dashboard/partials/shareModal.html
<div class="modal-body gf-box gf-box-no-margin" ng-controller="SharePanelCtrl"> <div class="modal-body gf-box gf-box-no-margin" ng-controller="ShareModalCtrl">
<div class="gf-box-header"> <div class="gf-box-header">
<div class="gf-box-title"> <div class="gf-box-title">
<i class="fa fa-share-square-o"></i> <i class="fa fa-share"></i>
Share Dashboard {{modalTitle}}
</div> </div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;"> <div ng-model="editor.index" bs-tabs>
<div ng-repeat="tab in ['Link', 'Snapshot sharing']" data-title="{{tab}}"> <div ng-repeat="tab in tabs" data-title="{{tab.title}}">
</div> </div>
</div> </div>
...@@ -15,38 +15,58 @@ ...@@ -15,38 +15,58 @@
</button> </button>
</div> </div>
<div class="gf-box-body" ng-if="editor.index === 0"> <div class="gf-box-body" ng-repeat="tab in tabs" ng-if="editor.index == $index">
<br> <ng-include src="tab.src"></ng-include>
<div class="gf-form"> </div>
<div class="gf-form-row">
<editor-checkbox text="Current time range" model="options.forCurrent" change="buildUrl()"></editor-checkbox>
</div>
</div>
<div class="gf-form">
<div class="gf-form-row">
<editor-checkbox text="Include template variables" model="options.includeTemplateVars" change="buildUrl()"></editor-checkbox>
</div>
</div>
<br> </div>
<div class="gf-form">
<div class="gf-form-row">
<button class="btn btn-inverse pull-right" data-clipboard-text="{{shareUrl}}" 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='shareUrl'></input>
</span>
</div>
<div>
<div class="editor-row" style="margin-top: 5px;" ng-if="options.toPanel"> <script type="text/ng-template" id="shareEmbed.html">
<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a> <h5>IFrame embedding</h5>
</div> <p>
</div> <em>
The html code below can be pasted and included in another web page. Unless anonymous access
is enabled the user viewing that page need to be signed into grafana for the graph to load.
</em>
</p>
<div class="gf-form">
<div class="gf-form-row">
<span class="gf-fluid-input">
<textarea rows="5" data-share-panel-url class="input" ng-model='iframeHtml'></textarea>
</span>
</div> </div>
<button class="btn btn-inverse" data-clipboard-text="{{iframeHtml}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
</div> </div>
</script>
<div class="gf-box-body share-snapshot ng-cloak" ng-cloak ng-if="editor.index === 1" ng-controller="ShareSnapshotCtrl"> <script type="text/ng-template" id="shareLink.html">
<h5>Link options</h5>
<div class="gf-form">
<div class="gf-form-row">
<editor-checkbox text="Current time range" model="options.forCurrent" change="buildUrl()"></editor-checkbox>
</div>
</div>
<div class="gf-form">
<div class="gf-form-row">
<editor-checkbox text="Include template variables" model="options.includeTemplateVars" change="buildUrl()"></editor-checkbox>
</div>
</div>
<br>
<div class="gf-form">
<div class="gf-form-row">
<button class="btn btn-inverse pull-right" data-clipboard-text="{{shareUrl}}" 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='shareUrl'></input>
</span>
</div>
<div class="editor-row" style="margin-top: 5px;" ng-show="options.toPanel">
<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
</div>
</div>
</script>
<script type="text/ng-template" id="shareSnapshot.html">
<div class="share-snapshot ng-cloak" ng-cloak ng-controller="ShareSnapshotCtrl">
<div style="margin: 10px 0"> <div style="margin: 10px 0">
<i ng-if="loading" class="fa fa-spinner fa-spin"></i> <i ng-if="loading" class="fa fa-spinner fa-spin"></i>
<i ng-if="!loading" class="gf-icon gf-icon-snap-multi"></i> <i ng-if="!loading" class="gf-icon gf-icon-snap-multi"></i>
...@@ -118,5 +138,4 @@ ...@@ -118,5 +138,4 @@
Did you make a mistake? <a href="{{deleteUrl}}" target="_blank">delete snapshot.</a> Did you make a mistake? <a href="{{deleteUrl}}" target="_blank">delete snapshot.</a>
</div> </div>
</div> </div>
</div> </script>
public/app/features/dashboard/partials/sharePanel.html deleted 100644 → 0
<div class="modal-body gf-box gf-box-no-margin" ng-controller="SharePanelCtrl">
<div class="gf-box-header">
<div class="gf-box-title">
<i class="fa fa-share"></i>
Share Panel
</div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['Link', 'Embed']" data-title="{{tab}}">
</div>
</div>
<button class="gf-box-header-close-btn" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</button>
</div>
<div class="gf-box-body" ng-if="editor.index === 0">
<br>
<div class="gf-form">
<div class="gf-form-row">
<editor-checkbox text="Current time range" model="options.forCurrent" change="buildUrl()"></editor-checkbox>
</div>
</div>
<div class="gf-form">
<div class="gf-form-row">
<editor-checkbox text="Include template variables" model="options.includeTemplateVars" change="buildUrl()"></editor-checkbox>
</div>
</div>
<br>
<div class="gf-form">
<div class="gf-form-row">
<button class="btn btn-inverse pull-right" data-clipboard-text="{{shareUrl}}" 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='shareUrl'></input>
</span>
</div>
<div>
<div class="editor-row" style="margin-top: 5px;" ng-if="options.toPanel">
<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
</div>
</div>
</div>
</div>
<div class="gf-box-body" ng-if="editor.index === 1">
<h5>IFrame embedding</h5>
<p><em>The html code below can be pasted and included in another web page. Unless anonymous access
is enabled the user viewing that page need to be signed into grafana for the graph to load.
</em>
</p>
<div class="gf-form">
<div class="gf-form-row">
<span class="gf-fluid-input">
<textarea rows="5" data-share-panel-url class="input" ng-model='iframeHtml'></textarea>
</span>
</div>
<button class="btn btn-inverse" data-clipboard-text="{{iframeHtml}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
<br>
<br>
</div>
</div>
</div>
public/app/features/dashboard/partials/snapshotTopNav.html
...@@ -19,6 +19,12 @@ ...@@ -19,6 +19,12 @@
</div> </div>
</div> </div>
<ul class="nav pull-left top-nav-dash-actions">
<li>
<a class="pointer" ng-click="shareDashboard()" bs-tooltip="'Share dashboard'" data-placement="bottom"><i class="fa fa-share-square-o"></i></a>
</li>
</ul>
<ul class="nav pull-right"> <ul class="nav pull-right">
<li ng-repeat="pulldown in dashboard.nav" ng-controller="PulldownCtrl" ng-show="pulldown.enable"> <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 type="pulldown.type" ng-cloak>
......
public/app/features/dashboard/sharePanelCtrl.js → public/app/features/dashboard/shareModalCtrl.js
...@@ -9,7 +9,7 @@ function (angular, _, require, config) { ...@@ -9,7 +9,7 @@ function (angular, _, require, config) {
var module = angular.module('grafana.controllers'); var module = angular.module('grafana.controllers');
module.controller('SharePanelCtrl', function($scope, $rootScope, $location, $timeout, timeSrv, $element, templateSrv) { module.controller('ShareModalCtrl', function($scope, $rootScope, $location, $timeout, timeSrv, $element, templateSrv) {
$scope.init = function() { $scope.init = function() {
$scope.editor = { index: 0 }; $scope.editor = { index: 0 };
...@@ -19,6 +19,18 @@ function (angular, _, require, config) { ...@@ -19,6 +19,18 @@ function (angular, _, require, config) {
includeTemplateVars: true includeTemplateVars: true
}; };
$scope.tabs = [{title: 'Link', src: 'shareLink.html'}];
if ($scope.options.toPanel) {
$scope.modalTitle = 'Share Panel';
$scope.tabs.push({title: 'Embed', src: 'shareEmbed.html'});
} else {
$scope.modalTitle = 'Share Dashboard';
if (!$scope.dashboardMeta.isSnapshot) {
$scope.tabs.push({title: 'Snapshot sharing', src: 'shareSnapshot.html'});
}
}
$scope.buildUrl(); $scope.buildUrl();
}; };
......
public/app/features/dashboard/shareSnapshotCtrl.js
...@@ -63,6 +63,7 @@ function (angular, _) { ...@@ -63,6 +63,7 @@ function (angular, _) {
// remove template queries // remove template queries
_.each(dash.templating.list, function(variable) { _.each(dash.templating.list, function(variable) {
variable.query = ""; variable.query = "";
variable.options = [];
variable.refresh = false; variable.refresh = false;
}); });
......
public/app/features/dashboard/snapshotTopNavCtrl.js
...@@ -17,6 +17,13 @@ function (angular, moment) { ...@@ -17,6 +17,13 @@ function (angular, moment) {
} }
}; };
$scope.shareDashboard = function() {
$scope.appEvent('show-modal', {
src: './app/features/dashboard/partials/shareModal.html',
scope: $scope.$new(),
});
};
}); });
}); });
public/app/features/panel/panelSrv.js
...@@ -26,7 +26,7 @@ function (angular, _, config) { ...@@ -26,7 +26,7 @@ function (angular, _, config) {
$scope.sharePanel = function() { $scope.sharePanel = function() {
$scope.appEvent('show-modal', { $scope.appEvent('show-modal', {
src: './app/features/dashboard/partials/sharePanel.html', src: './app/features/dashboard/partials/shareModal.html',
scope: $scope.$new() scope: $scope.$new()
}); });
}; };
......
public/test/specs/sharePanelCtrl-specs.js → public/test/specs/shareModalCtrl-specs.js
define([ define([
'helpers', 'helpers',
'features/dashboard/sharePanelCtrl' 'features/dashboard/shareModalCtrl'
], function(helpers) { ], function(helpers) {
'use strict'; 'use strict';
...@@ -16,7 +16,7 @@ define([ ...@@ -16,7 +16,7 @@ define([
beforeEach(module('grafana.controllers')); beforeEach(module('grafana.controllers'));
beforeEach(ctx.providePhase()); beforeEach(ctx.providePhase());
beforeEach(ctx.createControllerPhase('SharePanelCtrl')); beforeEach(ctx.createControllerPhase('ShareModalCtrl'));
describe('shareUrl with current time range and panel', function() { describe('shareUrl with current time range and panel', function() {
......
public/test/test-main.js
...@@ -132,7 +132,7 @@ require([ ...@@ -132,7 +132,7 @@ require([
'specs/graph-specs', 'specs/graph-specs',
'specs/graph-tooltip-specs', 'specs/graph-tooltip-specs',
'specs/seriesOverridesCtrl-specs', 'specs/seriesOverridesCtrl-specs',
'specs/sharePanelCtrl-specs', 'specs/shareModalCtrl-specs',
'specs/timeSrv-specs', 'specs/timeSrv-specs',
'specs/templateSrv-specs', 'specs/templateSrv-specs',
'specs/templateValuesSrv-specs', 'specs/templateValuesSrv-specs',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment