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 69 additions and 49 deletions
public/app/features/dashboard/dashnav/dashnav.html
......@@ -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>
......
public/app/features/dashboard/export/export_modal.html
......@@ -4,19 +4,18 @@
<!-- into another Grafana instance. -->
<!-- </p> -->
<div class="share-modal-big-icon">
<div class="share-modal-header">
<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">
</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>
</div>
<div class="gf-form-group">
<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()">
......@@ -31,22 +30,22 @@
<i class="fa fa-check"></i>
</label>
</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> -->
<!-- <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">
<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>
......@@ -54,6 +53,7 @@
<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,16 +25,15 @@
</div>
<script type="text/ng-template" id="shareEmbed.html">
<div class="share-modal-header">
<div class="share-modal-big-icon">
<i class="fa fa-code"></i>
</div>
<div class="share-snapshot-header">
<p class="share-snapshot-info-text">
<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>
<div ng-include src="'shareLinkOptions.html'"></div>
......@@ -43,6 +42,8 @@
<textarea rows="5" data-share-panel-url class="gf-form-input width-30" ng-model='iframeHtml'></textarea>
</div>
</div>
</div>
</div>
</script>
<script type="text/ng-template" id="shareExport.html">
......@@ -69,10 +70,14 @@
</script>
<script type="text/ng-template" id="shareLink.html">
<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">
......@@ -89,29 +94,29 @@
<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>
</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-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="share-snapshot-header" ng-if="step === 1">
<p class="share-snapshot-info-text">
<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-snapshot-info-text">
<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>
<div class="share-snapshot-header" ng-if="step === 3">
<p class="share-snapshot-info-text">
<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>
......@@ -131,7 +136,7 @@
<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">
<a href="{{snapshotUrl}}" class="large share-modal-link" target="_blank">
<i class="fa fa-external-link-square"></i>
{{snapshotUrl}}
</a>
......@@ -141,21 +146,24 @@
</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">
<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 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>
{{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>
</div>
</div>
</script>
public/sass/components/_dropdown.scss
......@@ -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 {
......
public/sass/components/_modals.scss
......@@ -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;
}
}
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