IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-30 10:47:30 -06:00
Code Issues Packages Projects Releases Wiki Activity

Refactoring of share modal

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-03-29 14:30:03 +02:00
parent ceb079a7ea
commit 0f791c9fa8
11 changed files with 88 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/dashboard/all.js
View File

@ -5,7 +5,7 @@ define([
'./saveDashboardAsCtrl', './saveDashboardAsCtrl',
'./playlistCtrl', './playlistCtrl',
'./rowCtrl', './rowCtrl',
'./sharePanelCtrl', './shareModalCtrl',
'./shareSnapshotCtrl', './shareSnapshotCtrl',
'./submenuCtrl', './submenuCtrl',
'./dashboardSrv', './dashboardSrv',

2
public/app/features/dashboard/dashboardNavCtrl.js
View File

@ -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(),
}); });
}; };

91
public/app/features/dashboard/partials/shareDashboard.html → public/app/features/dashboard/partials/shareModal.html
View File

@ -1,12 +1,12 @@
<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 @@
</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 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>
<div class="gf-box-body share-snapshot ng-cloak" ng-cloak ng-if="editor.index === 1" ng-controller="ShareSnapshotCtrl"> </div>
<script type="text/ng-template" id="shareEmbed.html">
<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>
</div>
</script>
<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 @@
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>

65
public/app/features/dashboard/partials/sharePanel.html
View File

@ -1,65 +0,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>

6
public/app/features/dashboard/partials/snapshotTopNav.html
View File

@ -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>

14
public/app/features/dashboard/sharePanelCtrl.js → public/app/features/dashboard/shareModalCtrl.js
View File

@ -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) {
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();
}; };

1
public/app/features/dashboard/shareSnapshotCtrl.js
View File

@ -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;
}); });

7
public/app/features/dashboard/snapshotTopNavCtrl.js
View File

@ -17,6 +17,13 @@ function (angular, moment) {
} }
}; };
$scope.shareDashboard = function() {
$scope.appEvent('show-modal', {
src: './app/features/dashboard/partials/shareModal.html',
scope: $scope.$new(),
});
};
}); });
}); });

2
public/app/features/panel/panelSrv.js
View File

@ -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()
}); });
}; };

4
public/test/specs/sharePanelCtrl-specs.js → public/test/specs/shareModalCtrl-specs.js
View File

@ -1,6 +1,6 @@
define([ define([
'helpers', 'helpers',
'features/dashboard/sharePanelCtrl' 'features/dashboard/shareModalCtrl'
], function(helpers) { ], function(helpers) {
'use strict'; 'use strict';
@ -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() {

2
public/test/test-main.js
View File

@ -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',