IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'export-dashboard' of github.com:grafana/grafana into export-dashboard

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-05-25 12:33:30 +02:00
parent ba6573af61 8d988f9582
commit 392407136d
5 changed files with 170 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/app/features/dashboard/dashnav/dashnav.html
View File

@@ -26,16 +26,19 @@
<li>
<a class="pointer" ng-click="shareDashboard(0)">
<i class="fa fa-link"></i> Link to Dashboard
<div class="dropdown-desc">Share an internal link to the current dashboard. Some configuration options available.</div>
</a>
</li>
<li>
<a class="pointer" ng-click="shareDashboard(1)">
<i class="icon-gf icon-gf-snapshot"></i>Snapshot
<div class="dropdown-desc">Interactive, publically accessible dashboard. Sensitive data is stripped out.</div>
</a>
</li>
<li>
<a class="pointer" ng-click="shareDashboard(2)">
<i class="fa fa-cloud-upload"></i>Export
<div class="dropdown-desc">Export the dashboard to a JSON file for others and to share on Grafana.net</div>
</a>
</li>
</ul>

100
public/app/features/dashboard/export/export_modal.html
View File

@@ -4,56 +4,56 @@
<!-- into another Grafana instance. -->
<!-- </p> -->
<div class="share-modal-big-icon">
<i class="fa fa-cloud-upload"></i>
</div>
<div class="share-snapshot-header">
<p class="share-snapshot-info-text">
Export the dashboard to a JSON file. The exporter will templatize the
dashboard's data sources to make it easy for other's to to import and reuse.
You can share dashboards on <a class="external-link" href="https://grafana.net">Grafana.net</a>
</p>
</div>
<div class="gf-form-group">
<div class="gf-form">
<label class="gf-form-label width-8">Title</label>
<input type="text" class="gf-form-input" ng-model="ctrl.dash.title" ng-change="ctrl.titleChanged()">
<label class="gf-form-label text-success" ng-show="ctrl.dash.title">
<i class="fa fa-check"></i>
</label>
<div class="share-modal-header">
<div class="share-modal-big-icon">
<i class="fa fa-cloud-upload"></i>
</div>
<div class="gf-form gf-form--grow">
<label class="gf-form-label width-8">Description</label>
<input type="text" class="gf-form-input" ng-model="ctrl.dash.description" ng-change="ctrl.titleChanged()">
<label class="gf-form-label text-success" ng-show="ctrl.dash.description">
<i class="fa fa-check"></i>
</label>
<div>
<p class="share-modal-info-text">
Export the dashboard to a JSON file. The exporter will templatize the
dashboard's data sources to make it easy for other's to to import and reuse.
You can share dashboards on <a class="external-link" href="https://grafana.net">Grafana.net</a>
</p>
<div class="gf-form-group">
<div class="gf-form">
<label class="gf-form-label width-8">Title</label>
<input type="text" class="gf-form-input" ng-model="ctrl.dash.title" ng-change="ctrl.titleChanged()">
<label class="gf-form-label text-success" ng-show="ctrl.dash.title">
<i class="fa fa-check"></i>
</label>
</div>
<div class="gf-form gf-form--grow">
<label class="gf-form-label width-8">Description</label>
<input type="text" class="gf-form-input" ng-model="ctrl.dash.description" ng-change="ctrl.titleChanged()">
<label class="gf-form-label text-success" ng-show="ctrl.dash.description">
<i class="fa fa-check"></i>
</label>
</div>
</div>
<!-- <h3 class="section&#45;heading"> -->
<!-- Dashboard data sources -->
<!-- </h3> -->
<!-- -->
<!-- <div class="gf&#45;form&#45;group"> -->
<!-- <div class="gf&#45;form&#45;inline" ng&#45;repeat="input in ctrl.dash.__inputs"> -->
<!-- <div class="gf&#45;form width&#45;25"> -->
<!-- <label class="gf&#45;form&#45;label width&#45;8">Name</label> -->
<!-- <input type="text" class="gf&#45;form&#45;input" ng&#45;model="input.name"> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<div class="gf-form-button-row">
<button type="button" class="btn gf-form-btn width-10 btn-success" ng-click="ctrl.save()">
<i class="fa fa-save"></i> Save to file
</button>
<button type="button" class="btn gf-form-btn width-10 btn-secondary" ng-click="ctrl.saveJson()">
<i class="fa fa-file-text-o"></i> View JSON
</button>
<a class="btn btn-link" ng-click="dismiss()">Cancel</a>
</div>
</div>
</div>
<!-- <h3 class="section&#45;heading"> -->
<!-- Dashboard data sources -->
<!-- </h3> -->
<!-- -->
<!-- <div class="gf&#45;form&#45;group"> -->
<!-- <div class="gf&#45;form&#45;inline" ng&#45;repeat="input in ctrl.dash.__inputs"> -->
<!-- <div class="gf&#45;form width&#45;25"> -->
<!-- <label class="gf&#45;form&#45;label width&#45;8">Name</label> -->
<!-- <input type="text" class="gf&#45;form&#45;input" ng&#45;model="input.name"> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<div class="gf-form-button-row">
<button type="button" class="btn gf-form-btn width-10 btn-success" ng-click="ctrl.save()">
<i class="fa fa-save"></i> Save to file
</button>
<button type="button" class="btn gf-form-btn width-10 btn-secondary" ng-click="ctrl.saveJson()">
<i class="fa fa-file-text-o"></i> View JSON
</button>
<a class="btn btn-link" ng-click="dismiss()">Cancel</a>
</div>
</div>

186
public/app/features/dashboard/partials/shareModal.html
View File

@@ -25,22 +25,23 @@
</div>
<script type="text/ng-template" id="shareEmbed.html">
<div class="share-modal-big-icon">
<i class="fa fa-code"></i>
</div>
<div class="share-modal-header">
<div class="share-modal-big-icon">
<i class="fa fa-code"></i>
</div>
<div>
<p class="share-modal-info-text">
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.
</p>
<div class="share-snapshot-header">
<p class="share-snapshot-info-text">
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.
</p>
</div>
<div ng-include src="'shareLinkOptions.html'"></div>
<div ng-include src="'shareLinkOptions.html'"></div>
<div class="gf-form-group section">
<div class="gf-form width-30">
<textarea rows="5" data-share-panel-url class="gf-form-input width-30" ng-model='iframeHtml'></textarea>
<div class="gf-form-group section">
<div class="gf-form width-30">
<textarea rows="5" data-share-panel-url class="gf-form-input width-30" ng-model='iframeHtml'></textarea>
</div>
</div>
</div>
</div>
</script>
@@ -69,91 +70,98 @@
</script>
<script type="text/ng-template" id="shareLink.html">
<div class="share-modal-big-icon">
<i class="fa fa-link"></i>
</div>
<div ng-include src="'shareLinkOptions.html'"></div>
<div>
<div class="gf-form-group section">
<div class="gf-form-inline">
<div class="gf-form width-30">
<input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl"></input>
</div>
<div class="gf-form pull-right">
<button class="btn btn-inverse pull-right" data-clipboard-text="{{shareUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
<div class="share-modal-header">
<div class="share-modal-big-icon">
<i class="fa fa-link"></i>
</div>
<div>
<p class="share-modal-info-text">
Create a direct link to this dashboard or panel, customized with the options below.
</p>
<div ng-include src="'shareLinkOptions.html'"></div>
<div>
<div class="gf-form-group section">
<div class="gf-form-inline">
<div class="gf-form width-30">
<input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl"></input>
</div>
<div class="gf-form pull-right">
<button class="btn btn-inverse pull-right" data-clipboard-text="{{shareUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
</div>
</div>
</div>
</div>
<div class="gf-form section" ng-show="modeSharePanel">
<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
</div>
</div>
</div>
<div class="gf-form section" ng-show="modeSharePanel">
<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
</div>
</script>
<script type="text/ng-template" id="shareSnapshot.html">
<div class="ng-cloak" ng-cloak ng-controller="ShareSnapshotCtrl" ng-init="init()">
<div class="share-modal-big-icon">
<i ng-if="loading" class="fa fa-spinner fa-spin"></i>
<i ng-if="!loading" class="icon-gf icon-gf-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,
leaving only the visible metric data and series names embedded into your dashboard.
</p>
<p class="share-snapshot-info-text">
Keep in mind, your <strong>snapshot can be viewed by anyone</strong> that has the link and can reach the URL.
Share wisely.
</p>
</div>
<div class="share-snapshot-header" ng-if="step === 3">
<p class="share-snapshot-info-text">
The snapshot has now been deleted. If it you have already accessed it once, It might take up to an hour before it is removed from
browser caches or CDN caches.
</p>
</div>
<div class="gf-form-group share-modal-options">
<div class="gf-form" ng-if="step === 1">
<span class="gf-form-label width-12">Snapshot name</span>
<input type="text" ng-model="snapshot.name" class="gf-form-input max-width-15" >
<div class="share-modal-header" ng-if="step === 1">
<div class="share-modal-big-icon">
<i ng-if="loading" class="fa fa-spinner fa-spin"></i>
<i ng-if="!loading" class="icon-gf icon-gf-snapshot"></i>
</div>
<div class="gf-form" ng-if="step === 1">
<span class="gf-form-label width-12">Expire</span>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input" ng-model="snapshot.expires" ng-options="f.value as f.text for f in expireOptions"></select>
<div>
<p class="share-modal-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,
leaving only the visible metric data and series names embedded into your dashboard.
</p>
<p class="share-modal-info-text">
Keep in mind, your <strong>snapshot can be viewed by anyone</strong> that has the link and can reach the URL.
Share wisely.
</p>
<div class="share-modal-header" ng-if="step === 3">
<p class="share-modal-info-text">
The snapshot has now been deleted. If it you have already accessed it once, It might take up to an hour before it is removed from
browser caches or CDN caches.
</p>
</div>
<div class="gf-form-group share-modal-options">
<div class="gf-form" ng-if="step === 1">
<span class="gf-form-label width-12">Snapshot name</span>
<input type="text" ng-model="snapshot.name" class="gf-form-input max-width-15" >
</div>
<div class="gf-form" ng-if="step === 1">
<span class="gf-form-label width-12">Expire</span>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input" ng-model="snapshot.expires" ng-options="f.value as f.text for f in expireOptions"></select>
</div>
</div>
<div class="gf-form" ng-if="step === 2" style="margin-top: 40px">
<div class="gf-form-row">
<a href="{{snapshotUrl}}" class="large share-modal-link" target="_blank">
<i class="fa fa-external-link-square"></i>
{{snapshotUrl}}
</a>
<br>
<button class="btn btn-inverse btn-large" data-clipboard-text="{{snapshotUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy Link</button>
</div>
</div>
</div>
<div ng-if="step === 1" class="gf-form-button-row">
<button class="btn gf-form-btn width-10 btn-success" ng-click="createSnapshot()" ng-disabled="loading">
<i class="fa fa-save"></i>
Local Snapshot
</button>
<button class="btn gf-form-btn width-16 btn-secondary" ng-if="externalEnabled" ng-click="createSnapshot(true)" ng-disabled="loading">
<i class="fa fa-cloud-upload"></i>
{{sharingButtonText}}
</button>
<a class="btn btn-link" ng-click="dismiss()">Cancel</a>
</div>
<div class="pull-right" ng-if="step === 2" style="padding: 5px">
Did you make a mistake? <a class="pointer" ng-click="deleteSnapshot()" target="_blank">delete snapshot.</a>
</div>
</div>
<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>
{{snapshotUrl}}
</a>
<br>
<button class="btn btn-inverse btn-large" data-clipboard-text="{{snapshotUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy Link</button>
</div>
</div>
</div>
<div ng-if="step === 1" class="gf-form-buttons-row">
<button class="btn btn-success btn-large" ng-click="createSnapshot()" ng-disabled="loading">
<i class="fa fa-save"></i>
Local Snapshot
</button>
<button class="btn btn-primary btn-large" ng-if="externalEnabled" ng-click="createSnapshot(true)" ng-disabled="loading">
<i class="fa fa-cloud-upload"></i>
{{sharingButtonText}}
</button>
</div>
<div class="pull-right" ng-if="step === 2" style="padding: 5px">
Did you make a mistake? <a class="pointer" ng-click="deleteSnapshot()" target="_blank">delete snapshot.</a>
</div>
</div>

10
public/sass/components/_dropdown.scss
View File

@@ -17,6 +17,16 @@
outline: 0;
}
.dropdown-desc {
position: relative;
top: -3px;
width: 250px;
font-size: 80%;
margin-left: 22px;
color: $gray-2;
white-space: normal;
}
// Dropdown arrow/caret
// --------------------
.caret {

21
public/sass/components/_modals.scss
View File

@@ -118,7 +118,6 @@
}
.share-modal-body {
text-align: center;
padding: 10px 0;
.tight-form {
@@ -126,35 +125,36 @@
}
.share-modal-options {
margin: 11px 20px 33px 20px;
margin: 11px 0px 33px 0px;
display: inline-block;
}
.share-modal-big-icon {
margin-bottom: 2rem;
margin-bottom: 10px;
margin-right: 2rem;
.fa, .icon-gf {
font-size: 70px;
font-size: 50px;
}
}
.share-snapshot-info-text {
margin: 10px 105px;
.share-modal-info-text {
margin-top: 5px;
strong {
color: $headings-color;
font-weight: 500;
}
}
.share-snapshot-header {
margin: 20px 0 22px 0;
.share-modal-header {
display: flex;
margin: 0px 0 22px 0;
}
.tight-form {
text-align: left;
}
.share-snapshot-link {
.share-modal-link {
max-width: 716px;
white-space: nowrap;
overflow: hidden;
@@ -162,4 +162,3 @@
text-overflow: ellipsis;
}
}