mirror of
https://github.com/timberjoegithub/grafana-statusmap.git
synced 2026-07-21 23:42:03 +00:00
ref: one codebase for hover tooltip and freezed tooltip
- 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
This commit is contained in:
Ivan Mikheykin
@@ -81,7 +81,7 @@
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label">
|
||||
<a class="pointer" tabindex="1" ng-click="ctrl.onEditorRemoveThreshold($index)">
|
||||
<a class="pointer" tabindex="1" ng-click="editor.onRemoveThreshold($index)">
|
||||
<i class="fa fa-trash"/>
|
||||
</a>
|
||||
</label>
|
||||
@@ -91,12 +91,12 @@
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form"></div>
|
||||
<div class="gf-form">
|
||||
<button class="btn btn-inverse" ng-click="ctrl.onEditorAddThreshold()">
|
||||
<button class="btn btn-inverse" ng-click="editor.onAddThreshold()">
|
||||
<i class="fa fa-plus"></i> Add new status
|
||||
</button>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<button class="btn btn-inverse" ng-click="ctrl.onEditorRemoveThresholds()">
|
||||
<button class="btn btn-inverse" ng-click="editor.onRemoveThresholds()">
|
||||
<i class="fa fa-minus"></i> Remove all
|
||||
</button>
|
||||
</div>
|
||||
@@ -108,12 +108,12 @@
|
||||
<label class="gf-form-label">Presets</label>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<button class="btn" ng-click="ctrl.onEditorAddThreeLights()">
|
||||
<button class="btn" ng-click="editor.onAddThreeLights()">
|
||||
Red-Yellow-Green
|
||||
</button>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<button class="btn" ng-click="ctrl.onEditorAddSolarized()">
|
||||
<button class="btn" ng-click="editor.onAddSolarized()">
|
||||
Solarized
|
||||
</button>
|
||||
</div>
|
||||
@@ -144,10 +144,6 @@
|
||||
label="Show legend"
|
||||
checked="ctrl.panel.legend.show" on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form" label-class="width-8"
|
||||
label="Show tooltip"
|
||||
checked="ctrl.panel.tooltip.show" on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form" label-class="width-8"
|
||||
label="Show X axis"
|
||||
checked="ctrl.panel.xAxis.show" on-change="ctrl.render()">
|
||||
@@ -159,17 +155,12 @@
|
||||
|
||||
<div class="gf-form" ng-show="ctrl.panel.yAxis.show">
|
||||
<label class="gf-form-label width-8">Min width</label>
|
||||
<input type="number" ng-model="ctrl.panel.xAxis.minWidth" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-change="ctrl.render()" ng-model-onblur>
|
||||
<input type="number" ng-model="ctrl.panel.yAxis.minWidth" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-change="ctrl.render()" ng-model-onblur>
|
||||
</div>
|
||||
<div class="gf-form" ng-show="ctrl.panel.yAxis.show">
|
||||
<label class="gf-form-label width-8">Max width</label>
|
||||
<input type="number" ng-model="ctrl.panel.xAxis.maxWidth" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-change="ctrl.render()" ng-model-onblur>
|
||||
<input type="number" ng-model="ctrl.panel.yAxis.maxWidth" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-change="ctrl.render()" ng-model-onblur>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">Buckets</h5>
|
||||
|
||||
<div class="gf-form" ng-show="ctrl.panel.yAxis.show">
|
||||
<label class="gf-form-label width-8">Rows sort</label>
|
||||
<div class="gf-form-select-wrapper">
|
||||
@@ -180,6 +171,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">Buckets</h5>
|
||||
|
||||
<gf-form-switch class="gf-form" label-class="width-8"
|
||||
label="Multiple values"
|
||||
checked="ctrl.panel.useMax" on-change="ctrl.render()">
|
||||
@@ -187,6 +183,13 @@
|
||||
<div class="gf-form" ng-show="ctrl.panel.useMax">
|
||||
Color for bucket with multiple values is determined by color mode<br/>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-8">Values index</label>
|
||||
<input type="number" class="gf-form-input width-5" placeholder="-1" data-placement="right"
|
||||
bs-tooltip="'Display only values with this index in a bucket. Use -1 to display all values'"
|
||||
ng-model="ctrl.panel.seriesFilterIndex" ng-change="ctrl.refresh()"
|
||||
ng-model-onblur>
|
||||
</div>
|
||||
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-8">Display nulls</label>
|
||||
@@ -194,6 +197,7 @@
|
||||
<select class="gf-form-input max-width-9" ng-model="ctrl.panel.nullPointMode" ng-options="f for f in ['as empty', 'as zero']" ng-change="ctrl.render()"></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-8">Min width</label>
|
||||
<input type="number" class="gf-form-input width-5" placeholder="5" data-placement="right" bs-tooltip="'Minimal card width for 1/1 resolution in pixels'" ng-model="ctrl.panel.cards.cardMinWidth" ng-change="ctrl.refresh()" ng-model-onblur>
|
||||
@@ -212,105 +216,4 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section gf-form-group width-30">
|
||||
<h5 class="section-heading">Filtering</h5>
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-9">Show only serie with Index</label>
|
||||
<input type="number" class="gf-form-input width-5" placeholder="2" data-placement="right"
|
||||
bs-tooltip="'Filter with the serie index to show the value on graph. Use -1 to get all values'" ng-model="ctrl.panel.seriesFilterIndex" ng-change="ctrl.refresh()"
|
||||
ng-model-onblur>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">URL</h5>
|
||||
|
||||
<div class="gf-form">
|
||||
Insert the url to navigate<br />
|
||||
</div>
|
||||
|
||||
<div class="gf-form">
|
||||
<gf-form-switch class="gf-form" label="Show extraSeries Tooltip when clicking elements" label-class="width-12"
|
||||
checked="ctrl.panel.usingUrl" on-change="ctrl.render()"></gf-form-switch>
|
||||
</div>
|
||||
|
||||
<div class="section gf-form-group" ng-if="ctrl.panel.usingUrl">
|
||||
<br>
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form"></div>
|
||||
<div class="gf-form">
|
||||
<button class="btn btn-inverse" ng-click="ctrl.onEditorAddUrl()">
|
||||
<i class="fa fa-plus"></i> Add new URL
|
||||
</button>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<button class="btn btn-inverse" ng-click="ctrl.onEditorRemoveUrls()">
|
||||
<i class="fa fa-minus"></i> Remove all URLs
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gf-form-block" ng-repeat="url in ctrl.panel.urls">
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-2">{{ $index }}</label>
|
||||
<label class="gf-form-label width-2">
|
||||
<a class="pointer" tabindex="1" ng-click="ctrl.onEditorRemoveUrl($index)">
|
||||
<i class="fa fa-trash" />
|
||||
</a>
|
||||
</label>
|
||||
<label class="gf-form-label width-4">Label: </label>
|
||||
<input type="text" class="gf-form-input width-16" placeholder="My URL" data-placement="right"
|
||||
ng-model="url.label" ng-change="ctrl.refresh()">
|
||||
<label class="gf-form-label width-4">URL: </label>
|
||||
<input type="text" class="gf-form-input width-c-50" placeholder="https://www.google.es" data-placement="right"
|
||||
bs-tooltip="'This is the url to be shown when the user clicks on it'" ng-model="url.base_url"
|
||||
ng-change="ctrl.refresh()">
|
||||
<info-popover mode="right-normal">
|
||||
<p>Specify an URL (relative or absolute)</p>
|
||||
<span>
|
||||
Use special variables to specify cell values:
|
||||
<br>
|
||||
<em>$series_label</em> name of the serie
|
||||
<br>
|
||||
<em>$(template.name)</em> name of the templated to be replaced
|
||||
<br>
|
||||
<em>$time</em> append &from...&to on the URL
|
||||
<br>
|
||||
<em>$series_extra</em> use extraSeries value to use it on URL
|
||||
</span>
|
||||
</info-popover>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-4">Icon: </label>
|
||||
<input type="text" class="gf-form-input width-12" placeholder="FA Icon" data-placement="right"
|
||||
bs-tooltip="'The icon shown on URL'" ng-model="url.icon_fa" ng-change="ctrl.refresh()">
|
||||
<gf-form-switch class="gf-form" label-class="width-8" label="Force lowercase" checked="url.forcelowercase"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form" label-class="width-6" label="Use Extra Serie Data" checked="url.useExtraSeries"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<div class="gf-form" ng-if="url.useExtraSeries == true">
|
||||
<label class="gf-form-label width-8">Extra Series Index: </label>
|
||||
<input type="number" class="gf-form-input width-12" placeholder="0" ng-if="url.useExtraSeries == true"
|
||||
data-placement="right" bs-tooltip="'Fields index to use its value on URL using $series_extra. Use -1 to disable it'" ng-model="url.extraSeries.index"
|
||||
ng-change="ctrl.refresh()">
|
||||
|
||||
<label class="gf-form-label width-9">Type</label>
|
||||
<div class="gf-form-select-wrapper width-8">
|
||||
<select class="input-small gf-form-input" ng-model="url.type" ng-options="s for s in ctrl.extraSeriesFormats" ng-change="ctrl.onChangeType(url)"></select>
|
||||
</div>
|
||||
|
||||
<div ng-if="url.type === 'Date'">
|
||||
<label class="gf-form-label width-12">Extra Series Date Format: </label>
|
||||
<input type="text" class="gf-form-input width-12" placeholder="YYYY/MM/DD/HH_mm_ss" ng-if="url.useExtraSeries == true"
|
||||
data-placement="right" bs-tooltip="'Date format to transformat extraSeries'" ng-model="url.extraSeries.format"
|
||||
ng-change="ctrl.refresh()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,120 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user