mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Starting css refactor for grafana-target
This commit is contained in:
Torkel Ödegaard
parent
af3aa81d71
commit
e1f410d32e
@ -12,6 +12,7 @@
|
||||
**Fixes**
|
||||
- [Issue #1298](https://github.com/grafana/grafana/issues/1298). InfluxDB: Fix handling of empty array in templating variable query
|
||||
- [Issue #1309](https://github.com/grafana/grafana/issues/1309). Graph: Fixed issue when using zero as a grid threshold
|
||||
- [Issue #1345](https://github.com/grafana/grafana/issues/1345). UI: Fixed position of confirm modal when scrolled down
|
||||
|
||||
**Tech**
|
||||
- [Issue #1311](https://github.com/grafana/grafana/issues/1311). Tech: Updated Font-Awesome from 3.2 to 4.2
|
||||
|
||||
@ -5,180 +5,175 @@
|
||||
ng-class="{'grafana-target-hidden': target.hide}"
|
||||
ng-controller="InfluxQueryCtrl"
|
||||
ng-init="init()">
|
||||
|
||||
<div class="grafana-target-inner-wrapper">
|
||||
<div class="grafana-target-inner">
|
||||
<ul class="grafana-segment-list pull-right">
|
||||
<li class="grafana-target-segment">
|
||||
<div class="dropdown">
|
||||
<a class="pointer dropdown-toggle"
|
||||
data-toggle="dropdown"
|
||||
tabindex="1">
|
||||
<i class="fa fa-bars"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu pull-right" role="menu">
|
||||
<li role="menuitem"><a tabindex="1" ng-click="duplicate()">Duplicate</a></li>
|
||||
<li role="menuitem"><a tabindex="1" ng-click="showQuery()" ng-hide="target.rawQuery">Raw query mode</a></li>
|
||||
<li role="menuitem"><a tabindex="1" ng-click="hideQuery()" ng-show="target.rawQuery">Query editor mode</a></li>
|
||||
<li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index-1)">Move up </a></li>
|
||||
<li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index+1)">Move down</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grafana-target-segment last">
|
||||
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
|
||||
<i class="fa fa-remove"></i>
|
||||
<div class="grafana-target-inner">
|
||||
<ul class="grafana-segment-list pull-right">
|
||||
<li class="grafana-target-segment">
|
||||
<div class="dropdown">
|
||||
<a class="pointer dropdown-toggle"
|
||||
data-toggle="dropdown"
|
||||
tabindex="1">
|
||||
<i class="fa fa-bars"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="grafana-segment-list">
|
||||
<li>
|
||||
<a class="grafana-target-segment" ng-click="target.hide = !target.hide; get_data();" role="menuitem">
|
||||
<i class="fa fa-eye"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Raw Query mode -->
|
||||
<ul class="grafana-segment-list" ng-show="target.rawQuery">
|
||||
<li>
|
||||
<input type="text"
|
||||
class="grafana-target-segment-input span10"
|
||||
ng-model="target.query"
|
||||
placeholder="select ..."
|
||||
focus-me="target.rawQuery"
|
||||
spellcheck='false'
|
||||
data-min-length=0 data-items=100
|
||||
ng-model-onblur
|
||||
ng-blur="get_data()">
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Query editor mode -->
|
||||
<ul class="grafana-segment-list" role="menu" ng-hide="target.rawQuery">
|
||||
<li class="grafana-target-segment">
|
||||
series
|
||||
</li>
|
||||
<li>
|
||||
<input type="text"
|
||||
class="grafana-target-segment-input span8"
|
||||
ng-model="target.series"
|
||||
spellcheck='false'
|
||||
bs-typeahead="listSeries"
|
||||
match-all="true"
|
||||
min-length="3"
|
||||
placeholder="series name"
|
||||
data-min-length=0 data-items=100
|
||||
ng-blur="seriesBlur()">
|
||||
</li>
|
||||
|
||||
<li class="grafana-target-segment">
|
||||
alias
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.alias"
|
||||
spellcheck='false' placeholder="alias" ng-blur="get_data()">
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
<div class="grafana-target-inner">
|
||||
<!-- Raw Query mode -->
|
||||
<ul class="grafana-segment-list" ng-show="target.rawQuery">
|
||||
<li class="grafana-target-segment">
|
||||
<i class="fa fa-eye invisible"></i>
|
||||
</li>
|
||||
<li class="grafana-target-segment">
|
||||
alias
|
||||
</li>
|
||||
<li>
|
||||
<input type="text"
|
||||
class="input-medium grafana-target-segment-input"
|
||||
ng-model="target.alias"
|
||||
spellcheck='false'
|
||||
placeholder="alias"
|
||||
ng-blur="get_data()">
|
||||
</li>
|
||||
<li class="grafana-target-segment">
|
||||
group by time
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval"
|
||||
spellcheck='false' placeholder="{{interval}}" data-placement="right"
|
||||
bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
|
||||
ng-model-onblur ng-change="get_data()" >
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Query editor mode -->
|
||||
<ul class="grafana-segment-list" role="menu" ng-hide="target.rawQuery">
|
||||
<li class="grafana-target-segment">
|
||||
<i class="fa fa-eye invisible"></i>
|
||||
</li>
|
||||
<li class="grafana-target-segment">
|
||||
select
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<span influxdb-func-editor class="grafana-target-segment grafana-target-function">
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li class="grafana-target-segment">
|
||||
where
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.condition"
|
||||
bs-tooltip="'Add a where clause'" data-placement="right" spellcheck='false' placeholder="column ~= value" ng-blur="get_data()">
|
||||
</li>
|
||||
|
||||
<li class="grafana-target-segment">
|
||||
group by time
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval"
|
||||
spellcheck='false' placeholder="{{interval}}" data-placement="right"
|
||||
bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
|
||||
ng-model-onblur ng-change="get_data()" >
|
||||
</li>
|
||||
|
||||
<li class="grafana-target-segment">
|
||||
and
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<input type="text" class="input-small grafana-target-segment-input" ng-model="target.groupby_field" bs-tooltip="'Add a group by column or leave blank'"
|
||||
placeholder="column" spellcheck="false" bs-typeahead="listColumns" data-min-length=0 ng-blur="get_data()">
|
||||
</li>
|
||||
|
||||
<li class="dropdown">
|
||||
<a class="grafana-target-segment pointer" data-toggle="dropdown" bs-tooltip="'Insert missing values, important when stacking'" data-placement="right">
|
||||
<span ng-show="target.fill">
|
||||
fill ({{target.fill}})
|
||||
</span>
|
||||
<span ng-show="!target.fill">
|
||||
no fill
|
||||
</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a ng-click="target.fill = ''">no fill</a></li>
|
||||
<li><a ng-click="target.fill = 'null'">fill (null)</a></li>
|
||||
<li><a ng-click="target.fill = '0'">fill (0)</a></li>
|
||||
<ul class="dropdown-menu pull-right" role="menu">
|
||||
<li role="menuitem"><a tabindex="1" ng-click="duplicate()">Duplicate</a></li>
|
||||
<li role="menuitem"><a tabindex="1" ng-click="showQuery()" ng-hide="target.rawQuery">Raw query mode</a></li>
|
||||
<li role="menuitem"><a tabindex="1" ng-click="hideQuery()" ng-show="target.rawQuery">Query editor mode</a></li>
|
||||
<li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index-1)">Move up </a></li>
|
||||
<li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index+1)">Move down</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grafana-target-segment last">
|
||||
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
|
||||
<i class="fa fa-remove"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</ul>
|
||||
<ul class="grafana-segment-list">
|
||||
<li>
|
||||
<a class="grafana-target-segment" ng-click="target.hide = !target.hide; get_data();" role="menuitem">
|
||||
<i class="fa fa-eye"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<!-- Raw Query mode -->
|
||||
<ul class="grafana-segment-list" ng-show="target.rawQuery">
|
||||
<li>
|
||||
<input type="text"
|
||||
class="grafana-target-segment-input span10"
|
||||
ng-model="target.query"
|
||||
placeholder="select ..."
|
||||
focus-me="target.rawQuery"
|
||||
spellcheck='false'
|
||||
data-min-length=0 data-items=100
|
||||
ng-model-onblur
|
||||
ng-blur="get_data()">
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Query editor mode -->
|
||||
<ul class="grafana-segment-list" role="menu" ng-hide="target.rawQuery">
|
||||
<li class="grafana-target-segment">
|
||||
series
|
||||
</li>
|
||||
<li>
|
||||
<input type="text"
|
||||
class="grafana-target-segment-input span8"
|
||||
ng-model="target.series"
|
||||
spellcheck='false'
|
||||
bs-typeahead="listSeries"
|
||||
match-all="true"
|
||||
min-length="3"
|
||||
placeholder="series name"
|
||||
data-min-length=0 data-items=100
|
||||
ng-blur="seriesBlur()">
|
||||
</li>
|
||||
|
||||
<li class="grafana-target-segment">
|
||||
alias
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.alias"
|
||||
spellcheck='false' placeholder="alias" ng-blur="get_data()">
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
<div class="grafana-target-inner">
|
||||
<!-- Raw Query mode -->
|
||||
<ul class="grafana-segment-list" ng-show="target.rawQuery">
|
||||
<li class="grafana-target-segment">
|
||||
<i class="fa fa-eye invisible"></i>
|
||||
</li>
|
||||
<li class="grafana-target-segment">
|
||||
alias
|
||||
</li>
|
||||
<li>
|
||||
<input type="text"
|
||||
class="input-medium grafana-target-segment-input"
|
||||
ng-model="target.alias"
|
||||
spellcheck='false'
|
||||
placeholder="alias"
|
||||
ng-blur="get_data()">
|
||||
</li>
|
||||
<li class="grafana-target-segment">
|
||||
group by time
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval"
|
||||
spellcheck='false' placeholder="{{interval}}" data-placement="right"
|
||||
bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
|
||||
ng-model-onblur ng-change="get_data()" >
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Query editor mode -->
|
||||
<ul class="grafana-segment-list" role="menu" ng-hide="target.rawQuery">
|
||||
<li class="grafana-target-segment">
|
||||
<i class="fa fa-eye invisible"></i>
|
||||
</li>
|
||||
<li class="grafana-target-segment">
|
||||
select
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<span influxdb-func-editor class="grafana-target-segment grafana-target-function">
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li class="grafana-target-segment">
|
||||
where
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.condition"
|
||||
bs-tooltip="'Add a where clause'" data-placement="right" spellcheck='false' placeholder="column ~= value" ng-blur="get_data()">
|
||||
</li>
|
||||
|
||||
<li class="grafana-target-segment">
|
||||
group by time
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval"
|
||||
spellcheck='false' placeholder="{{interval}}" data-placement="right"
|
||||
bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
|
||||
ng-model-onblur ng-change="get_data()" >
|
||||
</li>
|
||||
|
||||
<li class="grafana-target-segment">
|
||||
and
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<input type="text" class="input-small grafana-target-segment-input" ng-model="target.groupby_field" bs-tooltip="'Add a group by column or leave blank'"
|
||||
placeholder="column" spellcheck="false" bs-typeahead="listColumns" data-min-length=0 ng-blur="get_data()">
|
||||
</li>
|
||||
|
||||
<li class="dropdown">
|
||||
<a class="grafana-target-segment pointer" data-toggle="dropdown" bs-tooltip="'Insert missing values, important when stacking'" data-placement="right">
|
||||
<span ng-show="target.fill">
|
||||
fill ({{target.fill}})
|
||||
</span>
|
||||
<span ng-show="!target.fill">
|
||||
no fill
|
||||
</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a ng-click="target.fill = ''">no fill</a></li>
|
||||
<li><a ng-click="target.fill = 'null'">fill (null)</a></li>
|
||||
<li><a ng-click="target.fill = '0'">fill (0)</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="grafana-metric-options">
|
||||
|
||||
@ -4,216 +4,213 @@
|
||||
ng-class="{'grafana-target-hidden': target.hide}"
|
||||
ng-controller="OpenTSDBQueryCtrl"
|
||||
ng-init="init()">
|
||||
<div class="grafana-target-inner">
|
||||
<ul class="grafana-segment-list pull-right">
|
||||
<li class="grafana-target-segment">
|
||||
<div class="dropdown">
|
||||
<a class="pointer dropdown-toggle"
|
||||
data-toggle="dropdown"
|
||||
tabindex="1">
|
||||
<i class="fa fa-bars"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu pull-right" role="menu">
|
||||
<li role="menuitem">
|
||||
<a tabindex="1"
|
||||
ng-click="duplicate()">
|
||||
Duplicate
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grafana-target-segment last">
|
||||
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
|
||||
<i class="fa fa-remove"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="grafana-target-inner-wrapper">
|
||||
<div class="grafana-target-inner">
|
||||
<ul class="grafana-segment-list pull-right">
|
||||
<li class="grafana-target-segment">
|
||||
<div class="dropdown">
|
||||
<a class="pointer dropdown-toggle"
|
||||
data-toggle="dropdown"
|
||||
tabindex="1">
|
||||
<i class="fa fa-bars"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu pull-right" role="menu">
|
||||
<li role="menuitem">
|
||||
<a tabindex="1"
|
||||
ng-click="duplicate()">
|
||||
Duplicate
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grafana-target-segment last">
|
||||
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
|
||||
<i class="fa fa-remove"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="grafana-segment-list">
|
||||
<li>
|
||||
<a class="grafana-target-segment"
|
||||
ng-click="target.hide = !target.hide; get_data();"
|
||||
role="menuitem">
|
||||
<i class="fa fa-eye"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="grafana-segment-list">
|
||||
<li>
|
||||
<a class="grafana-target-segment"
|
||||
ng-click="target.hide = !target.hide; get_data();"
|
||||
role="menuitem">
|
||||
<i class="fa fa-eye"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="grafana-segment-list" role="menu">
|
||||
<li>
|
||||
<input type="text"
|
||||
class="grafana-target-segment-input"
|
||||
ng-model="target.metric"
|
||||
spellcheck='false'
|
||||
bs-typeahead="suggestMetrics"
|
||||
placeholder="metric name"
|
||||
data-min-length=0 data-items=100
|
||||
ng-blur="targetBlur()"
|
||||
>
|
||||
<a bs-tooltip="target.errors.metric"
|
||||
style="color: rgb(229, 189, 28)"
|
||||
ng-show="target.errors.metric">
|
||||
<i class="fa fa-warning"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="grafana-target-segment">
|
||||
Aggregator
|
||||
</li>
|
||||
<li>
|
||||
<select ng-model="target.aggregator"
|
||||
class="grafana-target-segment-input input-small"
|
||||
ng-options="agg for agg in aggregators"
|
||||
ng-change="targetBlur()">
|
||||
</select>
|
||||
<a bs-tooltip="target.errors.aggregator"
|
||||
style="color: rgb(229, 189, 28)"
|
||||
ng-show="target.errors.aggregator">
|
||||
<i class="fa fa-warning"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<ul class="grafana-segment-list" role="menu">
|
||||
<li>
|
||||
<input type="text"
|
||||
class="grafana-target-segment-input"
|
||||
ng-model="target.metric"
|
||||
spellcheck='false'
|
||||
bs-typeahead="suggestMetrics"
|
||||
placeholder="metric name"
|
||||
data-min-length=0 data-items=100
|
||||
ng-blur="targetBlur()"
|
||||
>
|
||||
<a bs-tooltip="target.errors.metric"
|
||||
style="color: rgb(229, 189, 28)"
|
||||
ng-show="target.errors.metric">
|
||||
<i class="fa fa-warning"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="grafana-target-segment">
|
||||
Aggregator
|
||||
</li>
|
||||
<li>
|
||||
<select ng-model="target.aggregator"
|
||||
class="grafana-target-segment-input input-small"
|
||||
ng-options="agg for agg in aggregators"
|
||||
ng-change="targetBlur()">
|
||||
</select>
|
||||
<a bs-tooltip="target.errors.aggregator"
|
||||
style="color: rgb(229, 189, 28)"
|
||||
ng-show="target.errors.aggregator">
|
||||
<i class="fa fa-warning"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="grafana-target-segment">
|
||||
Rate:
|
||||
<input type="checkbox"
|
||||
class="grafana-target-option-checkbox"
|
||||
ng-model="target.shouldComputeRate"
|
||||
ng-change="targetBlur()"
|
||||
>
|
||||
</li>
|
||||
<li class="grafana-target-segment" ng-hide="!target.shouldComputeRate">
|
||||
Counter:
|
||||
<li class="grafana-target-segment">
|
||||
Rate:
|
||||
<input type="checkbox"
|
||||
class="grafana-target-option-checkbox"
|
||||
ng-disabled="!target.shouldComputeRate"
|
||||
ng-model="target.isCounter"
|
||||
ng-change="targetBlur()">
|
||||
</li>
|
||||
<li class="grafana-target-segment" ng-hide="!target.isCounter">
|
||||
Counter Max:
|
||||
</li>
|
||||
<li ng-hide="!target.isCounter">
|
||||
<input type="text"
|
||||
class="grafana-target-segment-input input-medium"
|
||||
ng-disabled="!target.shouldComputeRate"
|
||||
ng-model="target.counterMax"
|
||||
spellcheck='false'
|
||||
placeholder="Counter max value"
|
||||
ng-blur="targetBlur()"
|
||||
/>
|
||||
</li>
|
||||
<li class="grafana-target-segment" ng-hide="!target.isCounter">
|
||||
Counter Reset Value:
|
||||
</li>
|
||||
<li ng-hide="!target.isCounter">
|
||||
<input type="text"
|
||||
class="grafana-target-segment-input input-medium"
|
||||
ng-disabled="!target.shouldComputeRate"
|
||||
ng-model="target.counterResetValue"
|
||||
spellcheck='false'
|
||||
placeholder="Counter reset value"
|
||||
ng-blur="targetBlur()"
|
||||
/>
|
||||
</li>
|
||||
<li class="grafana-target-segment">
|
||||
Alias:
|
||||
</li>
|
||||
<li>
|
||||
<input type="text"
|
||||
class="grafana-target-segment-input input-medium"
|
||||
ng-model="target.alias"
|
||||
spellcheck='false'
|
||||
placeholder="series alias"
|
||||
data-min-length=0 data-items=100
|
||||
ng-blur="targetBlur()"
|
||||
/>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
<div class="grafana-target-inner">
|
||||
<ul class="grafana-segment-list" role="menu">
|
||||
|
||||
<li class="grafana-target-segment">
|
||||
Downsample:
|
||||
<input type="checkbox"
|
||||
class="grafana-target-option-checkbox"
|
||||
ng-model="target.shouldDownsample"
|
||||
ng-change="targetBlur(target)"
|
||||
ng-model="target.shouldComputeRate"
|
||||
ng-change="targetBlur()"
|
||||
>
|
||||
</li>
|
||||
</li>
|
||||
<li class="grafana-target-segment" ng-hide="!target.shouldComputeRate">
|
||||
Counter:
|
||||
<input type="checkbox"
|
||||
class="grafana-target-option-checkbox"
|
||||
ng-disabled="!target.shouldComputeRate"
|
||||
ng-model="target.isCounter"
|
||||
ng-change="targetBlur()">
|
||||
</li>
|
||||
<li class="grafana-target-segment" ng-hide="!target.isCounter">
|
||||
Counter Max:
|
||||
</li>
|
||||
<li ng-hide="!target.isCounter">
|
||||
<input type="text"
|
||||
class="grafana-target-segment-input input-medium"
|
||||
ng-disabled="!target.shouldComputeRate"
|
||||
ng-model="target.counterMax"
|
||||
spellcheck='false'
|
||||
placeholder="Counter max value"
|
||||
ng-blur="targetBlur()"
|
||||
/>
|
||||
</li>
|
||||
<li class="grafana-target-segment" ng-hide="!target.isCounter">
|
||||
Counter Reset Value:
|
||||
</li>
|
||||
<li ng-hide="!target.isCounter">
|
||||
<input type="text"
|
||||
class="grafana-target-segment-input input-medium"
|
||||
ng-disabled="!target.shouldComputeRate"
|
||||
ng-model="target.counterResetValue"
|
||||
spellcheck='false'
|
||||
placeholder="Counter reset value"
|
||||
ng-blur="targetBlur()"
|
||||
/>
|
||||
</li>
|
||||
<li class="grafana-target-segment">
|
||||
Alias:
|
||||
</li>
|
||||
<li>
|
||||
<input type="text"
|
||||
class="grafana-target-segment-input input-medium"
|
||||
ng-model="target.alias"
|
||||
spellcheck='false'
|
||||
placeholder="series alias"
|
||||
data-min-length=0 data-items=100
|
||||
ng-blur="targetBlur()"
|
||||
/>
|
||||
</li>
|
||||
|
||||
<li ng-hide="!target.shouldDownsample">
|
||||
</ul>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
<div class="grafana-target-inner">
|
||||
<ul class="grafana-segment-list" role="menu">
|
||||
|
||||
<li class="grafana-target-segment">
|
||||
Downsample:
|
||||
<input type="checkbox"
|
||||
class="grafana-target-option-checkbox"
|
||||
ng-model="target.shouldDownsample"
|
||||
ng-change="targetBlur(target)"
|
||||
>
|
||||
</li>
|
||||
|
||||
<li ng-hide="!target.shouldDownsample">
|
||||
<input type="text"
|
||||
class="input-small grafana-target-segment-input"
|
||||
ng-disabled="!target.shouldDownsample"
|
||||
ng-model="target.downsampleInterval"
|
||||
ng-change="targetBlur()"
|
||||
placeholder="interval"
|
||||
>
|
||||
</li>
|
||||
|
||||
<li class="grafana-target-segment" ng-hide="!target.shouldDownsample">
|
||||
Aggregator
|
||||
</li>
|
||||
|
||||
<li ng-hide="!target.shouldDownsample">
|
||||
<select ng-model="target.downsampleAggregator"
|
||||
class="grafana-target-segment-input input-small"
|
||||
ng-options="agg for agg in aggregators"
|
||||
ng-change="targetBlur()">
|
||||
</select>
|
||||
</li>
|
||||
|
||||
<li class="grafana-target-segment">
|
||||
Tags:
|
||||
</li>
|
||||
<li ng-repeat="(key, value) in target.tags track by $index" class="grafana-target-segment">
|
||||
{{key}} = {{value}}
|
||||
<a ng-click="removeTag(key)">
|
||||
<i class="fa fa-remove"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="grafana-target-segment" ng-hide="addTagMode">
|
||||
<a ng-click="addTag()">
|
||||
<i class="fa fa-plus"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li ng-show="addTagMode">
|
||||
<input type="text"
|
||||
class="input-small grafana-target-segment-input"
|
||||
ng-disabled="!target.shouldDownsample"
|
||||
ng-model="target.downsampleInterval"
|
||||
ng-change="targetBlur()"
|
||||
placeholder="interval"
|
||||
>
|
||||
</li>
|
||||
|
||||
<li class="grafana-target-segment" ng-hide="!target.shouldDownsample">
|
||||
Aggregator
|
||||
</li>
|
||||
|
||||
<li ng-hide="!target.shouldDownsample">
|
||||
<select ng-model="target.downsampleAggregator"
|
||||
class="grafana-target-segment-input input-small"
|
||||
ng-options="agg for agg in aggregators"
|
||||
ng-change="targetBlur()">
|
||||
</select>
|
||||
</li>
|
||||
|
||||
<li class="grafana-target-segment">
|
||||
Tags:
|
||||
</li>
|
||||
<li ng-repeat="(key, value) in target.tags track by $index" class="grafana-target-segment">
|
||||
{{key}} = {{value}}
|
||||
<a ng-click="removeTag(key)">
|
||||
<i class="fa fa-remove"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="grafana-target-segment" ng-hide="addTagMode">
|
||||
spellcheck='false'
|
||||
bs-typeahead="suggestTagKeys"
|
||||
data-min-length=0 data-items=100
|
||||
ng-model="target.currentTagKey"
|
||||
placeholder="key">
|
||||
<input type="text"
|
||||
class="input-small grafana-target-segment-input"
|
||||
spellcheck='false'
|
||||
bs-typeahead="suggestTagValues"
|
||||
data-min-length=0 data-items=100
|
||||
ng-model="target.currentTagValue"
|
||||
placeholder="value">
|
||||
<a ng-click="addTag()">
|
||||
<i class="fa fa-plus"></i>
|
||||
</a>
|
||||
</li>
|
||||
<a bs-tooltip="target.errors.tags"
|
||||
style="color: rgb(229, 189, 28)"
|
||||
ng-show="target.errors.tags">
|
||||
<i class="fa fa-warning"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<li ng-show="addTagMode">
|
||||
<input type="text"
|
||||
class="input-small grafana-target-segment-input"
|
||||
spellcheck='false'
|
||||
bs-typeahead="suggestTagKeys"
|
||||
data-min-length=0 data-items=100
|
||||
ng-model="target.currentTagKey"
|
||||
placeholder="key">
|
||||
<input type="text"
|
||||
class="input-small grafana-target-segment-input"
|
||||
spellcheck='false'
|
||||
bs-typeahead="suggestTagValues"
|
||||
data-min-length=0 data-items=100
|
||||
ng-model="target.currentTagValue"
|
||||
placeholder="value">
|
||||
<a ng-click="addTag()">
|
||||
<i class="fa fa-plus"></i>
|
||||
</a>
|
||||
<a bs-tooltip="target.errors.tags"
|
||||
style="color: rgb(229, 189, 28)"
|
||||
ng-show="target.errors.tags">
|
||||
<i class="fa fa-warning"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -26,3 +26,4 @@ input[type="checkbox"]:checked+label {
|
||||
background: url(@checkboxImageUrl) 0px -18px no-repeat;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
@import "panel.less";
|
||||
@import "forms.less";
|
||||
@import "singlestat.less";
|
||||
@import "tightform.less";
|
||||
|
||||
.row-control-inner {
|
||||
padding:0px;
|
||||
@ -101,175 +102,6 @@
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.grafana-target:last-child {
|
||||
border-bottom: 1px solid @grafanaTargetBorder;
|
||||
}
|
||||
|
||||
.grafana-target-inner {
|
||||
border-top: 1px solid @grafanaTargetBorder;
|
||||
border-left: 1px solid @grafanaTargetBorder;
|
||||
border-right: 1px solid @grafanaTargetBorder;
|
||||
background: @grafanaTargetBackground;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grafana-target-onoff {
|
||||
display: inline-block;
|
||||
padding: 5px 7px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.grafana-segment-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
>li {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.grafana-metric-options {
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
// fix for fixed positioned panel & scrolling
|
||||
.grafana-segment-dropdown-menu {
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
|
||||
.grafana-target-segment {
|
||||
padding: 8px 7px;
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
border-right: 1px solid @grafanaTargetSegmentBorder;
|
||||
color: @grafanaTargetColor;
|
||||
display: inline-block;
|
||||
|
||||
.has-open-function & {
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.grafana-target-hidden & {
|
||||
color: @grafanaTargetColorHide;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
&a:hover {
|
||||
background: @grafanaTargetFuncBackground;
|
||||
}
|
||||
|
||||
&.template-param-name {
|
||||
border-right: none;
|
||||
padding-right: 3px;
|
||||
}
|
||||
&.annotation-segment {
|
||||
padding: 8px 15px;
|
||||
}
|
||||
|
||||
&.last {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.grafana-target-segment-icon {
|
||||
i {
|
||||
width: 15px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.grafana-target-function {
|
||||
background: @grafanaTargetFuncBackground;
|
||||
> a {
|
||||
color: @grafanaTargetColor;
|
||||
}
|
||||
> a:hover {
|
||||
color: @linkColor;
|
||||
}
|
||||
|
||||
&.show-function-controls {
|
||||
padding-top: 5px;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text].grafana-function-param-input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type=text].grafana-target-text-input {
|
||||
padding: 8px 7px;
|
||||
border: none;
|
||||
margin: 0px;
|
||||
background: transparent;
|
||||
float: left;
|
||||
color: @grafanaTargetColor;
|
||||
border-radius: 0;
|
||||
border-right: 1px solid @grafanaTargetSegmentBorder;
|
||||
}
|
||||
|
||||
[type=text].grafana-target-segment-input, [type=number].grafana-target-segment-input {
|
||||
border: none;
|
||||
border-right: 1px solid @grafanaTargetSegmentBorder;
|
||||
margin: 0px;
|
||||
border-radius: 0;
|
||||
padding: 8px 4px;
|
||||
&.last {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox].grafana-target-option-checkbox {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
select.grafana-target-segment-input {
|
||||
border: none;
|
||||
border-right: 1px solid @grafanaTargetSegmentBorder;
|
||||
margin: 0px;
|
||||
border-radius: 0;
|
||||
height: 36px;
|
||||
padding: 8px 5px;
|
||||
&.last {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.grafana-target .dropdown {
|
||||
padding: 0; margin: 0;
|
||||
}
|
||||
|
||||
.graphite-func-controls {
|
||||
display: none;
|
||||
text-align: center;
|
||||
|
||||
.fa-arrow-left {
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
.fa-arrow-right {
|
||||
float: right;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
.fa-remove {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.grafana-target {
|
||||
.popover-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
|
||||
165
src/css/less/tightform.less
Normal file
165
src/css/less/tightform.less
Normal file
@ -0,0 +1,165 @@
|
||||
|
||||
// old graphite-target
|
||||
.tight-form:last-child {
|
||||
border-bottom: 1px solid @grafanaTargetBorder;
|
||||
.dropdown {
|
||||
padding: 0; margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// old graphite-target-inner
|
||||
.tight-form-row {
|
||||
border-top: 1px solid @grafanaTargetBorder;
|
||||
border-left: 1px solid @grafanaTargetBorder;
|
||||
border-right: 1px solid @grafanaTargetBorder;
|
||||
background: @grafanaTargetBackground;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// old graphite-segment-list
|
||||
.tight-form-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
>li {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.grafana-metric-options {
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
// old grafana-target-segment {
|
||||
.tight-form-item {
|
||||
padding: 8px 7px;
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
border-right: 1px solid @grafanaTargetSegmentBorder;
|
||||
color: @grafanaTargetColor;
|
||||
display: inline-block;
|
||||
|
||||
.has-open-function & {
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
// old .grafana-target-hidden & {
|
||||
.tight-form-disabled & {
|
||||
color: @grafanaTargetColorHide;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&a:hover {
|
||||
background: @grafanaTargetFuncBackground;
|
||||
}
|
||||
|
||||
&.template-param-name {
|
||||
border-right: none;
|
||||
padding-right: 3px;
|
||||
}
|
||||
&.annotation-segment {
|
||||
padding: 8px 15px;
|
||||
}
|
||||
|
||||
&.last {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
//.grafana-target-segment-icon {
|
||||
.tight-form-item-icon {
|
||||
i {
|
||||
width: 15px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
//.grafana-target-function {
|
||||
.tight-form-item-func {
|
||||
background: @grafanaTargetFuncBackground;
|
||||
> a {
|
||||
color: @grafanaTargetColor;
|
||||
}
|
||||
> a:hover {
|
||||
color: @linkColor;
|
||||
}
|
||||
|
||||
&.show-function-controls {
|
||||
padding-top: 5px;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
//input[type=text].grafana-function-param-input {
|
||||
input[type=text].tight-form-func-param {
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
//input[type=text].grafana-target-text-input {
|
||||
// input[type=text].tight-form-input {
|
||||
// padding: 8px 7px;
|
||||
// border: none;
|
||||
// margin: 0px;
|
||||
// background: transparent;
|
||||
// float: left;
|
||||
// color: @grafanaTargetColor;
|
||||
// border-radius: 0;
|
||||
// border-right: 1px solid @grafanaTargetSegmentBorder;
|
||||
// }
|
||||
|
||||
//[type=text].grafana-target-segment-input, [type=number].grafana-target-segment-input {
|
||||
[type=text].tight-form-input, [type=number].tight-form-input {
|
||||
border: none;
|
||||
border-right: 1px solid @grafanaTargetSegmentBorder;
|
||||
margin: 0px;
|
||||
border-radius: 0;
|
||||
padding: 8px 4px;
|
||||
&.last {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
// input[type=checkbox].grafana-target-option-checkbox {
|
||||
// margin: 0;
|
||||
// }
|
||||
|
||||
select.tight-form-input {
|
||||
border: none;
|
||||
border-right: 1px solid @grafanaTargetSegmentBorder;
|
||||
margin: 0px;
|
||||
border-radius: 0;
|
||||
height: 36px;
|
||||
padding: 8px 5px;
|
||||
&.last {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
//.graphite-func-controls {
|
||||
.tight-form-func-controls {
|
||||
display: none;
|
||||
text-align: center;
|
||||
|
||||
.fa-arrow-left {
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
.fa-arrow-right {
|
||||
float: right;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
.fa-remove {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user