energylink/public/app/features/dashboard/partials/shareModal.html

<div class="modal-body gf-box gf-box-no-margin" ng-controller="ShareModalCtrl" ng-init="init()">
	<div class="gf-box-header">
		<div class="gf-box-title">
			<i class="fa fa-share"></i>
			{{modalTitle}}
		</div>

		<div ng-model="editor.index" bs-tabs>
			<div ng-repeat="tab in tabs" data-title="{{tab.title}}">
			</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-repeat="tab in tabs" ng-if="editor.index == $index">
		<ng-include src="tab.src"></ng-include>
	</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>

<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="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="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>
		</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="editor-row" style="margin: 11px 20px 33px 20px">
			<div class="section" ng-if="step === 1">
				<div class="tight-form">
					<ul class="tight-form-list">
						<li class="tight-form-item" style="width: 110px;">
							Snapshot name
						</li>
						<li>
							<input type="text" ng-model="snapshot.name" class="input-large tight-form-input last" >
						</li>
					</ul>
					<div class="clearfix"></div>
				</div>
				<div class="tight-form">
					<ul class="tight-form-list">
						<li class="tight-form-item" style="width: 110px">
							Expire
						</li>
						<li>
							<select class="input-small tight-form-input last" style="width: 211px" ng-model="snapshot.expires" ng-options="f.value as f.text for f in expireOptions"></select>
						</li>
					</ul>
					<div class="clearfix"></div>
				</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">
			<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-click="createSnapshot(true)" ng-disabled="loading">
				<i class="fa fa-cloud-upload"></i>
				Publish to snapshot.raintank.io
			</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>
</script>