Skip to content

N
nexpie-grafana-theme
Commit 39240713 by Torkel Ödegaard
Options

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

parents ba6573af 8d988f95
Showing with 165 additions and 145 deletions
public/app/features/dashboard/dashnav/dashnav.html
...@@ -26,16 +26,19 @@ ...@@ -26,16 +26,19 @@
<li> <li>
<a class="pointer" ng-click="shareDashboard(0)"> <a class="pointer" ng-click="shareDashboard(0)">
<i class="fa fa-link"></i> Link to Dashboard <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> </a>
</li> </li>
<li> <li>
<a class="pointer" ng-click="shareDashboard(1)"> <a class="pointer" ng-click="shareDashboard(1)">
<i class="icon-gf icon-gf-snapshot"></i>Snapshot <i class="icon-gf icon-gf-snapshot"></i>Snapshot
<div class="dropdown-desc">Interactive, publically accessible dashboard. Sensitive data is stripped out.</div>
</a> </a>
</li> </li>
<li> <li>
<a class="pointer" ng-click="shareDashboard(2)"> <a class="pointer" ng-click="shareDashboard(2)">
<i class="fa fa-cloud-upload"></i>Export <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> </a>
</li> </li>
</ul> </ul>
......
public/app/features/dashboard/export/export_modal.html
...@@ -4,56 +4,56 @@ ...@@ -4,56 +4,56 @@
<!-- into another Grafana instance. --> <!-- into another Grafana instance. -->
<!-- </p> --> <!-- </p> -->
<div class="share-modal-big-icon"> <div class="share-modal-header">
<i class="fa fa-cloud-upload"></i> <div class="share-modal-big-icon">
</div> <i class="fa fa-cloud-upload"></i>
<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>
<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>
</div> <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>
<!-- <h3 class="section&#45;heading"> --> <div class="gf-form-group">
<!-- Dashboard data sources --> <div class="gf-form">
<!-- </h3> --> <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()">
<!-- <div class="gf&#45;form&#45;group"> --> <label class="gf-form-label text-success" ng-show="ctrl.dash.title">
<!-- <div class="gf&#45;form&#45;inline" ng&#45;repeat="input in ctrl.dash.__inputs"> --> <i class="fa fa-check"></i>
<!-- <div class="gf&#45;form width&#45;25"> --> </label>
<!-- <label class="gf&#45;form&#45;label width&#45;8">Name</label> --> </div>
<!-- <input type="text" class="gf&#45;form&#45;input" ng&#45;model="input.name"> --> <div class="gf-form gf-form--grow">
<!-- </div> --> <label class="gf-form-label width-8">Description</label>
<!-- </div> --> <input type="text" class="gf-form-input" ng-model="ctrl.dash.description" ng-change="ctrl.titleChanged()">
<!-- </div> --> <label class="gf-form-label text-success" ng-show="ctrl.dash.description">
<i class="fa fa-check"></i>
</label>
</div>
</div>
<div class="gf-form-button-row"> <!-- <h3 class="section&#45;heading"> -->
<button type="button" class="btn gf-form-btn width-10 btn-success" ng-click="ctrl.save()"> <!-- Dashboard data sources -->
<i class="fa fa-save"></i> Save to file <!-- </h3> -->
</button> <!-- -->
<button type="button" class="btn gf-form-btn width-10 btn-secondary" ng-click="ctrl.saveJson()"> <!-- <div class="gf&#45;form&#45;group"> -->
<i class="fa fa-file-text-o"></i> View JSON <!-- <div class="gf&#45;form&#45;inline" ng&#45;repeat="input in ctrl.dash.__inputs"> -->
</button> <!-- <div class="gf&#45;form width&#45;25"> -->
<a class="btn btn-link" ng-click="dismiss()">Cancel</a> <!-- <label class="gf&#45;form&#45;label width&#45;8">Name</label> -->
</div> <!-- <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> </div>
public/app/features/dashboard/partials/shareModal.html
...@@ -25,22 +25,23 @@ ...@@ -25,22 +25,23 @@
</div> </div>
<script type="text/ng-template" id="shareEmbed.html"> <script type="text/ng-template" id="shareEmbed.html">
<div class="share-modal-big-icon"> <div class="share-modal-header">
<i class="fa fa-code"></i> <div class="share-modal-big-icon">
</div> <i class="fa fa-code"></i>
</div>
<div class="share-snapshot-header"> <div>
<p class="share-snapshot-info-text"> <p class="share-modal-info-text">
The html code below can be pasted and included in another web page. Unless anonymous access 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. is enabled the user viewing that page need to be signed into grafana for the graph to load.
</p> </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-group section">
<div class="gf-form width-30"> <div class="gf-form width-30">
<textarea rows="5" data-share-panel-url class="gf-form-input width-30" ng-model='iframeHtml'></textarea> <textarea rows="5" data-share-panel-url class="gf-form-input width-30" ng-model='iframeHtml'></textarea>
</div>
</div>
</div> </div>
</div> </div>
</script> </script>
...@@ -69,91 +70,98 @@ ...@@ -69,91 +70,98 @@
</script> </script>
<script type="text/ng-template" id="shareLink.html"> <script type="text/ng-template" id="shareLink.html">
<div class="share-modal-big-icon"> <div class="share-modal-header">
<i class="fa fa-link"></i> <div class="share-modal-big-icon">
</div> <i class="fa fa-link"></i>
</div>
<div ng-include src="'shareLinkOptions.html'"></div> <div>
<div> <p class="share-modal-info-text">
<div class="gf-form-group section"> Create a direct link to this dashboard or panel, customized with the options below.
<div class="gf-form-inline"> </p>
<div class="gf-form width-30"> <div ng-include src="'shareLinkOptions.html'"></div>
<input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl"></input> <div>
</div> <div class="gf-form-group section">
<div class="gf-form pull-right"> <div class="gf-form-inline">
<button class="btn btn-inverse pull-right" data-clipboard-text="{{shareUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button> <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> </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>
<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>
<script type="text/ng-template" id="shareSnapshot.html"> <script type="text/ng-template" id="shareSnapshot.html">
<div class="ng-cloak" ng-cloak ng-controller="ShareSnapshotCtrl" ng-init="init()"> <div class="ng-cloak" ng-cloak ng-controller="ShareSnapshotCtrl" ng-init="init()">
<div class="share-modal-big-icon"> <div class="share-modal-header" ng-if="step === 1">
<i ng-if="loading" class="fa fa-spinner fa-spin"></i> <div class="share-modal-big-icon">
<i ng-if="!loading" class="icon-gf icon-gf-snapshot"></i> <i ng-if="loading" class="fa fa-spinner fa-spin"></i>
</div> <i ng-if="!loading" class="icon-gf icon-gf-snapshot"></i>
<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> </div>
<div class="gf-form" ng-if="step === 1"> <div>
<span class="gf-form-label width-12">Expire</span> <p class="share-modal-info-text">
<div class="gf-form-select-wrapper max-width-15"> A snapshot is an instant way to share an interactive dashboard publicly.
<select class="gf-form-input" ng-model="snapshot.expires" ng-options="f.value as f.text for f in expireOptions"></select> 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>
</div>
<div class="gf-form" ng-if="step === 2" style="margin-top: 40px"> <div class="gf-form-group share-modal-options">
<div class="gf-form-row"> <div class="gf-form" ng-if="step === 1">
<a href="{{snapshotUrl}}" class="large share-snapshot-link" target="_blank"> <span class="gf-form-label width-12">Snapshot name</span>
<i class="fa fa-external-link-square"></i> <input type="text" ng-model="snapshot.name" class="gf-form-input max-width-15" >
{{snapshotUrl}} </div>
</a> <div class="gf-form" ng-if="step === 1">
<br> <span class="gf-form-label width-12">Expire</span>
<button class="btn btn-inverse btn-large" data-clipboard-text="{{snapshotUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy Link</button> <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>
</div>
</div>
<div ng-if="step === 1" class="gf-form-buttons-row"> <div ng-if="step === 1" class="gf-form-button-row">
<button class="btn btn-success btn-large" ng-click="createSnapshot()" ng-disabled="loading"> <button class="btn gf-form-btn width-10 btn-success" ng-click="createSnapshot()" ng-disabled="loading">
<i class="fa fa-save"></i> <i class="fa fa-save"></i>
Local Snapshot Local Snapshot
</button> </button>
<button class="btn btn-primary btn-large" ng-if="externalEnabled" ng-click="createSnapshot(true)" ng-disabled="loading"> <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> <i class="fa fa-cloud-upload"></i>
{{sharingButtonText}} {{sharingButtonText}}
</button> </button>
</div> <a class="btn btn-link" ng-click="dismiss()">Cancel</a>
</div>
<div class="pull-right" ng-if="step === 2" style="padding: 5px"> <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> Did you make a mistake? <a class="pointer" ng-click="deleteSnapshot()" target="_blank">delete snapshot.</a>
</div>
</div>
</div> </div>
</div> </div>
......
public/sass/components/_dropdown.scss
...@@ -17,6 +17,16 @@ ...@@ -17,6 +17,16 @@
outline: 0; 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 // Dropdown arrow/caret
// -------------------- // --------------------
.caret { .caret {
......
public/sass/components/_modals.scss
...@@ -118,7 +118,6 @@ ...@@ -118,7 +118,6 @@
} }
.share-modal-body { .share-modal-body {
text-align: center;
padding: 10px 0; padding: 10px 0;
.tight-form { .tight-form {
...@@ -126,35 +125,36 @@ ...@@ -126,35 +125,36 @@
} }
.share-modal-options { .share-modal-options {
margin: 11px 20px 33px 20px; margin: 11px 0px 33px 0px;
display: inline-block; display: inline-block;
} }
.share-modal-big-icon { .share-modal-big-icon {
margin-bottom: 2rem; margin-bottom: 10px;
margin-right: 2rem;
.fa, .icon-gf { .fa, .icon-gf {
font-size: 70px; font-size: 50px;
} }
} }
.share-snapshot-info-text { .share-modal-info-text {
margin: 10px 105px; margin-top: 5px;
strong { strong {
color: $headings-color; color: $headings-color;
font-weight: 500; font-weight: 500;
} }
} }
.share-snapshot-header { .share-modal-header {
margin: 20px 0 22px 0; display: flex;
margin: 0px 0 22px 0;
} }
.tight-form { .tight-form {
text-align: left; text-align: left;
} }
.share-snapshot-link { .share-modal-link {
max-width: 716px; max-width: 716px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
...@@ -162,4 +162,3 @@ ...@@ -162,4 +162,3 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
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