mirror of
https://github.com/timberjoegithub/grafana-statusmap.git
synced 2026-07-22 07:49:47 +00:00
Ivan Mikheykin
8c7279561d
- rename variables for URL template, use templateSrv to render URL links - fix visibility of tooltip items and url template help popup whe the light theme is used - rework Tooltip settings pane, organize tooltip editor fields - rename properties in panel config, implement migration logic for legacy configuration - close button for the frozen tooltip - use relative positioning for proper page scrolling
121 lines
4.6 KiB
HTML
121 lines
4.6 KiB
HTML
<div class="editor-row">
|
|
<div class="section gf-form-group">
|
|
<gf-form-switch class="gf-form" label-class="width-10"
|
|
label="Show tooltip"
|
|
tooltip="'Show tooltip when mouse is over the card'"
|
|
checked="ctrl.panel.tooltip.show" on-change="ctrl.render()">
|
|
</gf-form-switch>
|
|
<gf-form-switch class="gf-form" label-class="width-10"
|
|
label="Freeze on click"
|
|
tooltip="'Freeze tooltip copy when card is clicked'"
|
|
checked="ctrl.panel.tooltip.freezeOnClick" on-change="ctrl.render()">
|
|
</gf-form-switch>
|
|
<gf-form-switch class="gf-form" label-class="width-10"
|
|
label="Show items"
|
|
tooltip="'Show items (urls) in tooltip'"
|
|
checked="ctrl.panel.tooltip.showItems" on-change="ctrl.render()">
|
|
</gf-form-switch>
|
|
</div>
|
|
|
|
<div class="section gf-form-group">
|
|
<h5 class="section-heading">Items</h5>
|
|
|
|
<div class="gf-form" ng-show="ctrl.panel.tooltip.items.length == 0">
|
|
<label class="gf-form-label width-2">0</label>
|
|
<label class="gf-form-input width-30">No items defined.</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div ng-repeat="item in ctrl.panel.tooltip.items">
|
|
<div class="gf-form gf-form--grow">
|
|
<label class="gf-form-label width-6">
|
|
URL
|
|
<info-popover mode="left-normal">
|
|
<p>Specify an URL (relative or absolute)</p>
|
|
<span>
|
|
Use special variables:
|
|
<br>
|
|
<em>${__y_label}</em> name of the time series (alias or legend in the query editor).
|
|
<!-- <br>
|
|
<em>$(template.name)</em> name of the templated to be replaced -->
|
|
<br>
|
|
<em>${__bucket_range}</em> refers to bucket range in the form of '&from=...&to=...'.
|
|
<br>
|
|
<em>${__graph_range}</em> refers to graph range in the form of '&from=...&to=...'.
|
|
<br>
|
|
<em>${__value}</em> refers to current bucket value or max value if multiple values mode is on.
|
|
<br>
|
|
<em>${__value_N}</em> refers to Nth value in current bucket. Value indexes are started from 0. For instance,
|
|
<em>${__value_1}</em> refers to second value.
|
|
</span>
|
|
</info-popover>
|
|
</label>
|
|
<input type="text" class="gf-form-input" placeholder="https://www.google.es" data-placement="top"
|
|
bs-tooltip="'This is the url to be shown when the user clicks on it'" ng-model="item.urlTemplate"
|
|
ng-change="ctrl.refresh()">
|
|
<label class="gf-form-label">
|
|
<i class="fa fa-trash pointer" ng-click="editor.onRemoveUrl($index)"></i>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="gf-form-inline">
|
|
<div class="gf-form">
|
|
<label class="gf-form-label width-4">Icon</label>
|
|
<label class="gf-form-label width-2">
|
|
<i class="fa fa-{{item.urlIcon}}"></i>
|
|
</label>
|
|
<input
|
|
class="gf-form-input width-10"
|
|
type="text"
|
|
ng-model="item.urlIcon"
|
|
bs-typeahead="editor.getFAIconClasses"
|
|
bs-tooltip="'The icon for URL link'"
|
|
data-placement="top"
|
|
ng-blur="ctrl.render()"
|
|
data-min-length="0"
|
|
data-items="100"
|
|
/>
|
|
</div>
|
|
<div class="gf-form">
|
|
<label class="gf-form-label width-4">Label</label>
|
|
<input type="text" class="gf-form-input width-16" placeholder="My URL" data-placement="top"
|
|
bs-tooltip="'Text for URL link'"
|
|
ng-model="item.urlText" ng-change="ctrl.refresh()">
|
|
</div>
|
|
|
|
<div class="gf-form">
|
|
<gf-form-switch class="gf-form" label-class="width-8" label="Lowercase link" checked="item.urlToLowerCase"
|
|
on-change="ctrl.render()">
|
|
</gf-form-switch>
|
|
</div>
|
|
|
|
<div class="gf-form">
|
|
<label class="gf-form-label width-8">Date format</label>
|
|
<input type="text" class="gf-form-input width-12" placeholder="YYYY/MM/DD/HH_mm_ss"
|
|
data-placement="top" bs-tooltip="'Date format for __value_date'"
|
|
bs-typeahead="editor.getValueDateFormats"
|
|
data-min-length="0"
|
|
data-items="100"
|
|
ng-model="item.valueDateFormat"
|
|
ng-blur="ctrl.render()">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gf-form-inline">
|
|
<div class="gf-form"></div>
|
|
<div class="gf-form">
|
|
<button class="btn btn-inverse" ng-click="editor.onAddUrl()">
|
|
<i class="fa fa-plus"></i> Add URL
|
|
</button>
|
|
</div>
|
|
<div class="gf-form">
|
|
<button class="btn btn-inverse" ng-click="editor.onRemoveUrls()">
|
|
<i class="fa fa-minus"></i> Remove all
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|