apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactoring of share modal

Browse Source
pull/1656/head
Torkel Ödegaard 10 years ago
parent ceb079a7ea
commit 0f791c9fa8
11 changed files with 85 additions and 105 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      public/app/features/dashboard/all.js
  2. 2
      public/app/features/dashboard/dashboardNavCtrl.js
  3. 85
      public/app/features/dashboard/partials/shareModal.html
  4. 65
      public/app/features/dashboard/partials/sharePanel.html
  5. 6
      public/app/features/dashboard/partials/snapshotTopNav.html
  6. 14
      public/app/features/dashboard/shareModalCtrl.js
  7. 1
      public/app/features/dashboard/shareSnapshotCtrl.js
  8. 7
      public/app/features/dashboard/snapshotTopNavCtrl.js
  9. 2
      public/app/features/panel/panelSrv.js
  10. 4
      public/test/specs/shareModalCtrl-specs.js
  11. 2
      public/test/test-main.js

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

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

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

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

85
public/app/features/dashboard/partials/shareDashboard.html → public/app/features/dashboard/partials/shareModal.html
Unescape 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-title">
<i class="fa fa-share-square-o"></i>
Share Dashboard
<i class="fa fa-share"></i>
{{modalTitle}}
</div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['Link', 'Snapshot sharing']" data-title="{{tab}}">
<div ng-model="editor.index" bs-tabs>
<div ng-repeat="tab in tabs" data-title="{{tab.title}}">
</div>
</div>
@ -15,38 +15,58 @@
</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>
<div class="gf-box-body" ng-repeat="tab in tabs" ng-if="editor.index == $index">
<ng-include src="tab.src"></ng-include>
</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>
<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>
<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>
<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">
<i ng-if="loading" class="fa fa-spinner fa-spin"></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>
</div>
</div>
</div>
</script>

65
public/app/features/dashboard/partials/sharePanel.html
Unescape 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
Unescape View File

@ -19,6 +19,12 @@
</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">
<li ng-repeat="pulldown in dashboard.nav" ng-controller="PulldownCtrl" ng-show="pulldown.enable">
<grafana-simple-panel type="pulldown.type" ng-cloak>

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

@ -9,7 +9,7 @@ function (angular, _, require, config) {
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.editor = { index: 0 };
@ -19,6 +19,18 @@ function (angular, _, require, config) {
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();
};

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

@ -63,6 +63,7 @@ function (angular, _) {
// remove template queries
_.each(dash.templating.list, function(variable) {
variable.query = "";
variable.options = [];
variable.refresh = false;
});

7
public/app/features/dashboard/snapshotTopNavCtrl.js
Unescape 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
Unescape View File

@ -26,7 +26,7 @@ function (angular, _, config) {
$scope.sharePanel = function() {
$scope.appEvent('show-modal', {
src: './app/features/dashboard/partials/sharePanel.html',
src: './app/features/dashboard/partials/shareModal.html',
scope: $scope.$new()
});
};

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

@ -1,6 +1,6 @@
define([
'helpers',
'features/dashboard/sharePanelCtrl'
'features/dashboard/shareModalCtrl'
], function(helpers) {
'use strict';
@ -16,7 +16,7 @@ define([
beforeEach(module('grafana.controllers'));
beforeEach(ctx.providePhase());
beforeEach(ctx.createControllerPhase('SharePanelCtrl'));
beforeEach(ctx.createControllerPhase('ShareModalCtrl'));
describe('shareUrl with current time range and panel', function() {

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

@ -132,7 +132,7 @@ require([
'specs/graph-specs',
'specs/graph-tooltip-specs',
'specs/seriesOverridesCtrl-specs',
'specs/sharePanelCtrl-specs',
'specs/shareModalCtrl-specs',
'specs/timeSrv-specs',
'specs/templateSrv-specs',
'specs/templateValuesSrv-specs',

Write Preview
Loading…
Cancel
Save