mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
58cffde0f2
* WIP: intial commit * Tests: Runs e2e tests * Refactor: Adds BASE_URL support * Refactor: Adds namespacing * Refactor: Cleans up the Page api * Build: Adds to build-branches-and-prs job for testing * Build: Hardcoded image for now * Refactor: Uses Selectors in App * Refactor: Adds addDataSource flow * WIP * Refactor: Adds e2eScenario * Refactor: Adds add and delete scenarios * Refactor: Adds logging * Refactor: Adds ability to for Selectors with variables * Refactor: Using variable selectors instead * Refactor: Adds flow until Share Panel * Refactor: Adds clicking on rendered image link * Refactor: Deletes log output * Refactor: Updates snapshots * Chore: Reverts changes * Refactor: Removes log plugin because maybe it breaks yarn build * Refactor: Adds rendered image download * Refactor: Adds image comparison * Refactor: Removes uncaught errors override * Refactor: Changes order of images to compare * Refactor: Updates truth image * Build: Updates path to CI artifacts * Refactor: Cleaning up types and config * wip * Refactor: Cleans up external api * Refactor: More cleanup * Refactor: More cleanup * Refactor: Removes usages of Pages and Flows * Refactor: Removes last traces of Cypress in spec * Refactor: Adds comments
183 lines
6.9 KiB
HTML
183 lines
6.9 KiB
HTML
<div class="modal-body" ng-controller="ShareModalCtrl" ng-init="init()">
|
|
<div class="modal-header">
|
|
<h2 class="modal-header-title">
|
|
<i class="fa fa-share-square-o"></i>
|
|
<span class="p-l-1">{{ modalTitle }}</span>
|
|
</h2>
|
|
|
|
<ul class="gf-tabs">
|
|
<li class="gf-tabs-item" ng-repeat="tab in tabs">
|
|
<a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
|
|
{{::tab.title}}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<a class="modal-header-close" ng-click="dismiss();">
|
|
<i class="fa fa-remove"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="modal-content" ng-repeat="tab in tabs" ng-if="editor.index == $index">
|
|
<div ng-include src="tab.src" class="share-modal-body"></div>
|
|
</div>
|
|
</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-modal-content">
|
|
<div ng-include src="'shareLinkOptions.html'"></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="gf-form-group gf-form--grow">
|
|
<div class="gf-form">
|
|
<textarea rows="5" data-share-panel-url class="gf-form-input" ng-model='iframeHtml'></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/ng-template" id="shareExport.html">
|
|
<dash-export-modal dismiss="dismiss()"></dash-export-modal>
|
|
</script>
|
|
|
|
<script type="text/ng-template" id="shareLinkOptions.html">
|
|
<div class="gf-form-group">
|
|
<gf-form-switch class="gf-form"
|
|
label="Current time range" label-class="width-12" switch-class="max-width-6"
|
|
checked="options.forCurrent" on-change="buildUrl()">
|
|
</gf-form-switch>
|
|
<gf-form-switch class="gf-form"
|
|
label="Template variables" label-class="width-12" switch-class="max-width-6"
|
|
checked="options.includeTemplateVars" on-change="buildUrl()">
|
|
</gf-form-switch>
|
|
<div class="gf-form">
|
|
<span class="gf-form-label width-12">Theme</span>
|
|
<div class="gf-form-select-wrapper width-10">
|
|
<select class="gf-form-input" ng-model="options.theme" ng-options="f as f for f in ['current', 'dark', 'light']" ng-change="buildUrl()"></select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/ng-template" id="shareLink.html">
|
|
<div class="share-modal-header">
|
|
<div class="share-modal-big-icon">
|
|
<i class="gicon gicon-link"></i>
|
|
</div>
|
|
<div class="share-modal-content">
|
|
<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">
|
|
<div class="gf-form-inline">
|
|
<div class="gf-form gf-form--grow">
|
|
<input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl">
|
|
</div>
|
|
<div class="gf-form">
|
|
<button class="btn btn-inverse" clipboard-button="getShareUrl()">Copy</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gf-form" ng-show="modeSharePanel">
|
|
<a href="{{imageUrl}}" target="_blank" aria-label={{selectors.linkToRenderedImage}}><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">
|
|
<div class="share-modal-big-icon">
|
|
<i ng-if="loading" class="fa fa-spinner fa-spin"></i>
|
|
<i ng-if="!loading" class="gicon gicon-snapshots"></i>
|
|
</div>
|
|
<div class="share-modal-content">
|
|
<div ng-if="step === 1">
|
|
<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>
|
|
|
|
<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" clipboard-button="getSnapshotUrl()">Copy Link</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div ng-if="step === 1">
|
|
<p class="share-modal-info-text">
|
|
You may need to configure the timeout value if it takes a long time to collect your dashboard's metrics.
|
|
</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">Timeout (seconds)</span>
|
|
<input type="number" ng-model="snapshot.timeoutSeconds" class="gf-form-input max-width-15">
|
|
</div>
|
|
</div>
|
|
|
|
<div ng-if="step === 1" class="gf-form-button-row">
|
|
<button class="btn gf-form-btn width-10 btn-primary" ng-click="createSnapshot()" ng-disabled="loading">
|
|
Local Snapshot
|
|
</button>
|
|
<button class="btn gf-form-btn width-16 btn-secondary" ng-if="externalEnabled" ng-click="createSnapshot(true)" ng-disabled="loading">
|
|
{{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>
|