mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
feat(mixed datasources): updated OpenTSDB data source query editor to new model, #436
This commit is contained in:
Torkel Ödegaard
@@ -80,8 +80,7 @@
|
||||
|
||||
<div class="tight-form" ng-hide="target.rawQuery">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item" style="width: 44px"></li>
|
||||
<li class="tight-form-item query-keyword" style="width: 75px;">
|
||||
<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
|
||||
FROM
|
||||
</li>
|
||||
<li>
|
||||
@@ -94,9 +93,7 @@
|
||||
|
||||
<div class="tight-form" ng-hide="target.rawQuery">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item" style="width: 44px"></li>
|
||||
|
||||
<li class="tight-form-item query-keyword" style="width: 75px;">
|
||||
<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
|
||||
WHERE
|
||||
</li>
|
||||
|
||||
@@ -109,8 +106,7 @@
|
||||
|
||||
<div class="tight-form">
|
||||
<ul class="tight-form-list" ng-hide="target.rawQuery">
|
||||
<li class="tight-form-item" style="width: 44px"></li>
|
||||
<li class="tight-form-item query-keyword">
|
||||
<li class="tight-form-item query-keyword tight-form-align">
|
||||
GROUP BY
|
||||
</li>
|
||||
|
||||
@@ -144,13 +140,14 @@
|
||||
Alias pattern
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="input-medium tight-form-input" ng-model="target.alias" spellcheck='false' placeholder="alias" ng-model-onblur ng-change="get_data()">
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
<input type="text" class="input-medium tight-form-input"
|
||||
ng-model="target.alias" spellcheck='false' placeholder="alias"
|
||||
ng-model-onblur ng-change="get_data()"></input>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
define([
|
||||
'angular',
|
||||
'lodash',
|
||||
'kbn',
|
||||
],
|
||||
function (angular, _, kbn) {
|
||||
function (angular, _) {
|
||||
'use strict';
|
||||
|
||||
var module = angular.module('grafana.services');
|
||||
@@ -27,12 +26,6 @@ function (angular, _, kbn) {
|
||||
return { data: _.flatten(_.pluck(results, 'data')) };
|
||||
});
|
||||
|
||||
// console.log(options.targets);
|
||||
// // get from & to in seconds
|
||||
// var from = kbn.parseDate(options.range.from).getTime();
|
||||
// var to = kbn.parseDate(options.range.to).getTime();
|
||||
//
|
||||
// return backendSrv.get('/api/metrics/test', { from: from, to: to, maxDataPoints: options.maxDataPoints });
|
||||
};
|
||||
|
||||
return MixedDatasource;
|
||||
|
||||
@@ -1,241 +1,208 @@
|
||||
<div class="editor-row" style="margin-top: 10px;">
|
||||
|
||||
<div ng-repeat="target in panel.targets"
|
||||
style="margin-bottom: 10px;"
|
||||
ng-class="{'tight-form-disabled': target.hide}"
|
||||
ng-controller="OpenTSDBQueryCtrl"
|
||||
ng-init="init()">
|
||||
|
||||
<div class="tight-form">
|
||||
<ul class="tight-form-list pull-right">
|
||||
<li class="tight-form-item">
|
||||
<div class="dropdown">
|
||||
<a class="pointer dropdown-toggle"
|
||||
data-toggle="dropdown"
|
||||
tabindex="1">
|
||||
<i class="fa fa-bars"></i>
|
||||
<div class="tight-form">
|
||||
<ul class="tight-form-list pull-right">
|
||||
<li class="tight-form-item">
|
||||
<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>
|
||||
<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="tight-form-item last">
|
||||
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
|
||||
<i class="fa fa-remove"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="tight-form-item last">
|
||||
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
|
||||
<i class="fa fa-remove"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="tight-form-list">
|
||||
<li>
|
||||
<a class="tight-form-item"
|
||||
ng-click="target.hide = !target.hide; get_data();"
|
||||
role="menuitem">
|
||||
<i class="fa fa-eye"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item" style="min-width: 15px; text-align: center">
|
||||
{{targetLetters[$index]}}
|
||||
</li>
|
||||
<li>
|
||||
<a class="tight-form-item"
|
||||
ng-click="target.hide = !target.hide; get_data();"
|
||||
role="menuitem">
|
||||
<i class="fa fa-eye"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="tight-form-list" role="menu">
|
||||
<li class="tight-form-item" style="width: 86px">
|
||||
Metric
|
||||
</li>
|
||||
<li>
|
||||
<input type="text"
|
||||
class="input-large tight-form-input"
|
||||
ng-model="target.metric"
|
||||
spellcheck='false'
|
||||
bs-typeahead="suggestMetrics"
|
||||
placeholder="metric name"
|
||||
data-min-length=0 data-items=100
|
||||
ng-model-onblur
|
||||
ng-change="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="tight-form-item">
|
||||
Aggregator
|
||||
</li>
|
||||
<li>
|
||||
<select ng-model="target.aggregator"
|
||||
class="tight-form-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="tight-form-list" role="menu">
|
||||
<li class="tight-form-item" style="width: 86px">
|
||||
Metric
|
||||
</li>
|
||||
<li>
|
||||
<input type="text"
|
||||
class="input-large tight-form-input"
|
||||
ng-model="target.metric"
|
||||
spellcheck='false'
|
||||
bs-typeahead="suggestMetrics"
|
||||
placeholder="metric name"
|
||||
data-min-length=0 data-items=100
|
||||
ng-model-onblur
|
||||
ng-change="targetBlur()">
|
||||
</input>
|
||||
<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="tight-form-item">
|
||||
Aggregator
|
||||
</li>
|
||||
<li>
|
||||
<select ng-model="target.aggregator" class="tight-form-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="tight-form-item">
|
||||
Alias:
|
||||
<tip>Use patterns like $tag_tagname to replace part of the alias for a tag value</tip>
|
||||
</li>
|
||||
<li>
|
||||
<li class="tight-form-item">
|
||||
Alias:
|
||||
<tip>Use patterns like $tag_tagname to replace part of the alias for a tag value</tip>
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="tight-form-input input-large"
|
||||
ng-model="target.alias"
|
||||
spellcheck='false'
|
||||
placeholder="series alias"
|
||||
data-min-length=0 data-items=100
|
||||
ng-blur="targetBlur()"></input>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
<div class="tight-form">
|
||||
<ul class="tight-form-list" role="menu">
|
||||
<li class="tight-form-item tight-form-align" style="width: 86px">
|
||||
Down sample
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<input type="text" class="input-large tight-form-input"
|
||||
ng-model="target.downsampleInterval"
|
||||
ng-model-onblur
|
||||
ng-change="targetBlur()"
|
||||
placeholder="interval (empty = auto)">
|
||||
</li>
|
||||
|
||||
<li class="tight-form-item">
|
||||
Aggregator
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<select ng-model="target.downsampleAggregator" class="tight-form-input input-small"
|
||||
ng-options="agg for agg in aggregators"
|
||||
ng-change="targetBlur()">
|
||||
</select>
|
||||
</li>
|
||||
|
||||
<li class="tight-form-item">
|
||||
<editor-checkbox text="Disable downsampling" model="target.disableDownsampling" change="targetBlur()"></editor-checkbox>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
<div class="tight-form">
|
||||
<ul class="tight-form-list" role="menu">
|
||||
<li class="tight-form-item tight-form-align" style="width: 86px">
|
||||
Tags
|
||||
</li>
|
||||
<li ng-repeat="(key, value) in target.tags track by $index" class="tight-form-item">
|
||||
{{key}} = {{value}}
|
||||
<a ng-click="removeTag(key)">
|
||||
<i class="fa fa-remove"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="tight-form-item" 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 tight-form-input"
|
||||
spellcheck='false'
|
||||
bs-typeahead="suggestTagKeys"
|
||||
data-min-length=0 data-items=100
|
||||
ng-model="target.currentTagKey"
|
||||
placeholder="key">
|
||||
<input type="text"
|
||||
class="tight-form-input input-large"
|
||||
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="tight-form">
|
||||
<ul class="tight-form-list" role="menu">
|
||||
<li class="tight-form-item">
|
||||
<i class="fa fa-eye invisible"></i>
|
||||
class="input-small tight-form-input"
|
||||
spellcheck='false'
|
||||
bs-typeahead="suggestTagValues"
|
||||
data-min-length=0 data-items=100
|
||||
ng-model="target.currentTagValue"
|
||||
placeholder="value">
|
||||
</input>
|
||||
<a ng-click="addTag()">
|
||||
add tag
|
||||
</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>
|
||||
|
||||
<li class="tight-form-item" style="width: 86px">
|
||||
Down sample
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<input type="text"
|
||||
class="input-large tight-form-input"
|
||||
ng-model="target.downsampleInterval"
|
||||
ng-model-onblur
|
||||
ng-change="targetBlur()"
|
||||
placeholder="interval (empty = auto)"
|
||||
>
|
||||
</li>
|
||||
|
||||
<li class="tight-form-item">
|
||||
Aggregator
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<select ng-model="target.downsampleAggregator"
|
||||
class="tight-form-input input-small"
|
||||
ng-options="agg for agg in aggregators"
|
||||
ng-change="targetBlur()">
|
||||
</select>
|
||||
</li>
|
||||
|
||||
<li class="tight-form-item">
|
||||
<editor-checkbox text="Disable downsampling" model="target.disableDownsampling" change="targetBlur()"></editor-checkbox>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
<div class="tight-form">
|
||||
<ul class="tight-form-list" role="menu">
|
||||
<li class="tight-form-item">
|
||||
<i class="fa fa-eye invisible"></i>
|
||||
</li>
|
||||
|
||||
<li class="tight-form-item" style="width: 86px">
|
||||
Tags
|
||||
</li>
|
||||
<li ng-repeat="(key, value) in target.tags track by $index" class="tight-form-item">
|
||||
{{key}} = {{value}}
|
||||
<a ng-click="removeTag(key)">
|
||||
<i class="fa fa-remove"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="tight-form-item" 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 tight-form-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 tight-form-input"
|
||||
spellcheck='false'
|
||||
bs-typeahead="suggestTagValues"
|
||||
data-min-length=0 data-items=100
|
||||
ng-model="target.currentTagValue"
|
||||
placeholder="value">
|
||||
<a ng-click="addTag()">
|
||||
add tag
|
||||
</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="tight-form">
|
||||
<ul class="tight-form-list" role="menu">
|
||||
<li class="tight-form-item">
|
||||
<i class="fa fa-eye invisible"></i>
|
||||
</li>
|
||||
|
||||
<li class="tight-form-item" style="width: 86px">
|
||||
<li class="tight-form-item tight-form-align" style="width: 86px">
|
||||
<editor-checkbox text="Rate" model="target.shouldComputeRate" change="targetBlur()"></editor-checkbox>
|
||||
</li>
|
||||
|
||||
<li class="tight-form-item" ng-hide="!target.shouldComputeRate">
|
||||
<li class="tight-form-item" ng-hide="!target.shouldComputeRate">
|
||||
<editor-checkbox text="Counter" model="target.isCounter" change="targetBlur()"></editor-checkbox>
|
||||
</li>
|
||||
|
||||
<li class="tight-form-item" ng-hide="!target.isCounter">
|
||||
Counter Max:
|
||||
</li>
|
||||
Counter Max:
|
||||
</li>
|
||||
|
||||
<li ng-hide="!target.isCounter">
|
||||
<input type="text"
|
||||
class="tight-form-input input-small"
|
||||
ng-disabled="!target.shouldComputeRate"
|
||||
ng-model="target.counterMax"
|
||||
spellcheck='false'
|
||||
placeholder="max value"
|
||||
ng-model-onblur
|
||||
ng-blur="targetBlur()"
|
||||
/>
|
||||
</li>
|
||||
<li class="tight-form-item" ng-hide="!target.isCounter">
|
||||
Reset Value:
|
||||
</li>
|
||||
<li ng-hide="!target.isCounter">
|
||||
<input type="text"
|
||||
class="tight-form-input input-small"
|
||||
ng-disabled="!target.shouldComputeRate"
|
||||
ng-model="target.counterResetValue"
|
||||
spellcheck='false'
|
||||
placeholder="reset value"
|
||||
ng-model-onblur
|
||||
ng-blur="targetBlur()"
|
||||
/>
|
||||
</li>
|
||||
<li ng-hide="!target.isCounter">
|
||||
<input type="text" class="tight-form-input input-small"
|
||||
ng-disabled="!target.shouldComputeRate"
|
||||
ng-model="target.counterMax"
|
||||
spellcheck='false'
|
||||
placeholder="max value"
|
||||
ng-model-onblur
|
||||
ng-blur="targetBlur()"></input>
|
||||
</li>
|
||||
<li class="tight-form-item" ng-hide="!target.isCounter">
|
||||
Reset Value:
|
||||
</li>
|
||||
<li ng-hide="!target.isCounter">
|
||||
<input type="text" class="tight-form-input input-small"
|
||||
ng-disabled="!target.shouldComputeRate"
|
||||
ng-model="target.counterResetValue"
|
||||
spellcheck='false'
|
||||
placeholder="reset value"
|
||||
ng-model-onblur
|
||||
ng-blur="targetBlur()"></input>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,6 +8,13 @@ function (angular, _, kbn) {
|
||||
|
||||
var module = angular.module('grafana.controllers');
|
||||
|
||||
module.directive('metricQueryEditorOpentsdb', function() {
|
||||
return {
|
||||
controller: 'OpenTSDBQueryCtrl',
|
||||
templateUrl: 'app/plugins/datasource/opentsdb/partials/query.editor.html',
|
||||
};
|
||||
});
|
||||
|
||||
module.controller('OpenTSDBQueryCtrl', function($scope, $timeout) {
|
||||
|
||||
$scope.init = function() {
|
||||
@@ -113,6 +120,7 @@ function (angular, _, kbn) {
|
||||
return errs;
|
||||
}
|
||||
|
||||
$scope.init();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@@ -29,6 +29,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.spaced-form {
|
||||
.tight-form {
|
||||
margin: 7px 0;
|
||||
@@ -209,3 +210,7 @@ select.tight-form-input {
|
||||
}
|
||||
}
|
||||
|
||||
.tight-form-align {
|
||||
padding-left: 66px;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user