Skip to content

N
nexpie-grafana-theme
Commit 840099be by Torkel Ödegaard
Options

refactor: metric segment remake

parent 76c4bfe2
Showing with 91 additions and 30 deletions
public/app/core/components/form_dropdown/form_dropdown.ts
...@@ -28,8 +28,9 @@ export class FormDropdownCtrl { ...@@ -28,8 +28,9 @@ export class FormDropdownCtrl {
onChange: any; onChange: any;
getOptions: any; getOptions: any;
optionCache: any; optionCache: any;
lookupText: boolean;
constructor(private $scope, $element, private $sce, private templateSrv) { constructor(private $scope, $element, private $sce, private templateSrv, private $q) {
this.inputElement = $element.find('input').first(); this.inputElement = $element.find('input').first();
this.linkElement = $element.find('a').first(); this.linkElement = $element.find('a').first();
this.linkMode = true; this.linkMode = true;
...@@ -69,29 +70,45 @@ export class FormDropdownCtrl { ...@@ -69,29 +70,45 @@ export class FormDropdownCtrl {
} }
}); });
this.inputElement.keydown(evt => {
if (evt.keyCode === 13) {
this.inputElement.blur();
}
});
this.inputElement.blur(this.inputBlur.bind(this)); this.inputElement.blur(this.inputBlur.bind(this));
} }
modelChanged(newVal) { getOptionsInternal(query) {
var result = this.getOptions({$query: query});
if (this.isPromiseLike(result)) {
return result;
}
return this.$q.when(result);
}
isPromiseLike(obj) {
return obj && (typeof obj.then === 'function');
}
modelChanged() {
if (_.isObject(this.model)) { if (_.isObject(this.model)) {
this.updateDisplay(this.model.text); this.updateDisplay(this.model.text);
} else { } else {
// if we have text use it // if we have text use it
if (this.text) { if (this.lookupText) {
this.updateDisplay(this.text); this.getOptionsInternal("").then(options => {
} else {
// otherwise we need to do initial lookup, usually happens first time
this.getOptions().then(options => {
var item = _.find(options, {value: this.model}); var item = _.find(options, {value: this.model});
this.updateDisplay(item ? item.text : this.model); this.updateDisplay(item ? item.text : this.model);
}); });
} else {
this.updateDisplay(this.model);
} }
} }
} }
typeaheadSource(query, callback) { typeaheadSource(query, callback) {
this.getOptions({$query: query}).then(options => { this.getOptionsInternal(query).then(options => {
this.optionCache = options; this.optionCache = options;
// extract texts // extract texts
...@@ -223,9 +240,8 @@ export function formDropdownDirective() { ...@@ -223,9 +240,8 @@ export function formDropdownDirective() {
cssClass: "@", cssClass: "@",
allowCustom: "@", allowCustom: "@",
labelMode: "@", labelMode: "@",
lookupText: "@",
}, },
link: function() {
}
}; };
} }
......
public/app/features/panel/partials/metrics_tab.html
...@@ -35,6 +35,7 @@ ...@@ -35,6 +35,7 @@
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label">Panel Data Source</label> <label class="gf-form-label">Panel Data Source</label>
<gf-form-dropdown model="ctrl.panelDsValue" <gf-form-dropdown model="ctrl.panelDsValue"
lookup-text="true"
get-options="ctrl.getOptions(true)" get-options="ctrl.getOptions(true)"
on-change="ctrl.datasourceChanged($option)"> on-change="ctrl.datasourceChanged($option)">
</gf-form-dropdown> </gf-form-dropdown>
......
public/app/plugins/datasource/elasticsearch/bucket_agg.js
...@@ -26,13 +26,21 @@ function (angular, _, queryDef) { ...@@ -26,13 +26,21 @@ function (angular, _, queryDef) {
var bucketAggs = $scope.target.bucketAggs; var bucketAggs = $scope.target.bucketAggs;
$scope.orderByOptions = []; $scope.orderByOptions = [];
$scope.bucketAggTypes = queryDef.bucketAggTypes;
$scope.orderOptions = queryDef.orderOptions; $scope.getBucketAggTypes = function() {
$scope.sizeOptions = queryDef.sizeOptions; return queryDef.bucketAggTypes;
};
$scope.getOrderOptions = function() {
return queryDef.orderOptions;
};
$scope.getSizeOptions = function() {
return queryDef.sizeOptions;
};
$rootScope.onAppEvent('elastic-query-updated', function() { $rootScope.onAppEvent('elastic-query-updated', function() {
$scope.validateModel(); $scope.validateModel();
$scope.updateOrderByOptions();
}, $scope); }, $scope);
$scope.init = function() { $scope.init = function() {
...@@ -166,11 +174,10 @@ function (angular, _, queryDef) { ...@@ -166,11 +174,10 @@ function (angular, _, queryDef) {
$scope.toggleOptions = function() { $scope.toggleOptions = function() {
$scope.showOptions = !$scope.showOptions; $scope.showOptions = !$scope.showOptions;
$scope.updateOrderByOptions();
}; };
$scope.updateOrderByOptions = function() { $scope.getOrderByOptions = function() {
$scope.orderByOptions = queryDef.getOrderByOptions($scope.target); return queryDef.getOrderByOptions($scope.target);
}; };
$scope.getFieldsInternal = function() { $scope.getFieldsInternal = function() {
......
public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html
...@@ -5,9 +5,22 @@ ...@@ -5,9 +5,22 @@
<span ng-hide="isFirst">Then by</span> <span ng-hide="isFirst">Then by</span>
</label> </label>
<gf-form-dropdown value="agg.type" options="bucketAggTypes" on-change="onTypeChanged()" custom="false" css-class="width-10"></gf-form-dropdown> <gf-form-dropdown model="agg.type"
<!-- <metric&#45;segment&#45;model property="agg.type" options="bucketAggTypes" on&#45;change="onTypeChanged()" custom="false" css&#45;class="width&#45;10"></metric&#45;segment&#45;model> --> lookup-text="true"
<metric-segment-model ng-if="agg.field" property="agg.field" get-options="getFieldsInternal()" on-change="onChange()" css-class="width-12"></metric-segment-model> get-options="getBucketAggTypes()"
on-change="onTypeChanged()"
allow-custom="false"
label-mode="true"
css-class="width-10">
</gf-form-dropdown>
<gf-form-dropdown ng-if="agg.field"
model="agg.field"
get-options="getFieldsInternal()"
on-change="onChange()"
allow-custom="false"
label-mode="true"
css-class="width-12">
</gf-form-dropdown>
</div> </div>
<div class="gf-form gf-form--grow"> <div class="gf-form gf-form--grow">
...@@ -34,7 +47,13 @@ ...@@ -34,7 +47,13 @@
<div ng-if="agg.type === 'date_histogram'"> <div ng-if="agg.type === 'date_histogram'">
<div class="gf-form offset-width-7"> <div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Interval</label> <label class="gf-form-label width-10">Interval</label>
<metric-segment-model property="agg.settings.interval" get-options="getIntervalOptions()" on-change="onChangeInternal()" css-class="width-12" custom="true"></metric-segment-model> <gf-form-dropdown model="agg.settings.interval"
get-options="getIntervalOptions()"
on-change="onChangeInternal()"
allow-custom="true"
label-mode="true"
css-class="width-12">
</gf-form-dropdown>
</div> </div>
<div class="gf-form offset-width-7"> <div class="gf-form offset-width-7">
...@@ -67,11 +86,23 @@ ...@@ -67,11 +86,23 @@
<div ng-if="agg.type === 'terms'"> <div ng-if="agg.type === 'terms'">
<div class="gf-form offset-width-7"> <div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Order</label> <label class="gf-form-label width-10">Order</label>
<metric-segment-model property="agg.settings.order" options="orderOptions" on-change="onChangeInternal()" css-class="width-12"></metric-segment-model> <gf-form-dropdown model="agg.settings.order"
lookup-text="true"
get-options="getOrderOptions()"
on-change="onChangeInternal()"
label-mode="true"
css-class="width-12">
</gf-form-dropdown>
</div> </div>
<div class="gf-form offset-width-7"> <div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Size</label> <label class="gf-form-label width-10">Size</label>
<metric-segment-model property="agg.settings.size" options="sizeOptions" on-change="onChangeInternal()" css-class="width-12"></metric-segment-model> <gf-form-dropdown model="agg.settings.size"
lookup-text="true"
get-options="getSizeOptions()"
on-change="onChangeInternal()"
label-mode="true"
css-class="width-12">
</gf-form-dropdown>
</div> </div>
<div class="gf-form offset-width-7"> <div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Min Doc Count</label> <label class="gf-form-label width-10">Min Doc Count</label>
...@@ -79,7 +110,13 @@ ...@@ -79,7 +110,13 @@
</div> </div>
<div class="gf-form offset-width-7"> <div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Order By</label> <label class="gf-form-label width-10">Order By</label>
<metric-segment-model property="agg.settings.orderBy" options="orderByOptions" on-change="onChangeInternal()" css-class="width-12"></metric-segment-model> <gf-form-dropdown model="agg.settings.orderBy"
lookup-text="true"
get-options="getOrderByOptions()"
on-change="onChangeInternal()"
label-mode="true"
css-class="width-12">
</gf-form-dropdown>
</div> </div>
<div class="gf-form offset-width-7"> <div class="gf-form offset-width-7">
<label class="gf-form-label width-10"> <label class="gf-form-label width-10">
......
public/app/plugins/datasource/elasticsearch/partials/metric_agg.html
...@@ -11,9 +11,9 @@ ...@@ -11,9 +11,9 @@
</div> </div>
<div class="gf-form"> <div class="gf-form">
<gf-form-dropdown value="agg.type" options="metricAggTypes" on-change="onTypeChanged()" custom="false" css-class="width-10"></gf-form-dropdown> <metric-segment-model property="agg.type" options="metricAggTypes" on-change="onTypeChange()" custom="false" css-class="width-10"></metric-segment-model>
<gf-form-dropdown ng-if="aggDef.requiresField" value="agg.field" get-options="getFieldsInternal()" on-change="onChange()" css-class="width-12"></gf-form-dropdown> <metric-segment-model ng-if="aggDef.requiresField" property="agg.field" get-options="getFieldsInternal()" on-change="onChange()" css-class="width-12"></metric-segment-model>
<gf-form-dropdown ng-if="aggDef.isPipelineAgg" value="agg.pipelineAgg" options="pipelineAggOptions" on-change="onChangeInternal()" custom="false" css-class="width-12"></gf-form-dropdown> <metric-segment-model ng-if="aggDef.isPipelineAgg" property="agg.pipelineAgg" options="pipelineAggOptions" on-change="onChangeInternal()" custom="false" css-class="width-12"></metric-segment-model>
</div> </div>
<div class="gf-form gf-form--grow"> <div class="gf-form gf-form--grow">
......
public/app/plugins/datasource/elasticsearch/query_ctrl.ts
...@@ -31,11 +31,11 @@ export class ElasticQueryCtrl extends QueryCtrl { ...@@ -31,11 +31,11 @@ export class ElasticQueryCtrl extends QueryCtrl {
queryUpdated() { queryUpdated() {
var newJson = angular.toJson(this.datasource.queryBuilder.build(this.target), true); var newJson = angular.toJson(this.datasource.queryBuilder.build(this.target), true);
if (newJson !== this.rawQueryOld) { if (this.rawQueryOld && newJson !== this.rawQueryOld) {
this.rawQueryOld = newJson;
this.refresh(); this.refresh();
} }
this.rawQueryOld = newJson;
this.$rootScope.appEvent('elastic-query-updated'); this.$rootScope.appEvent('elastic-query-updated');
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment