IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactor: metric segment remake

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-06-15 15:56:24 -04:00
parent 76c4bfe268
commit 840099bec0
6 changed files with 91 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
public/app/core/components/form_dropdown/form_dropdown.ts
View File

@@ -28,8 +28,9 @@ export class FormDropdownCtrl {
onChange: any;
getOptions: 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.linkElement = $element.find('a').first();
this.linkMode = true;
@@ -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));
}
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)) {
this.updateDisplay(this.model.text);
} else {
// if we have text use it
if (this.text) {
this.updateDisplay(this.text);
} else {
// otherwise we need to do initial lookup, usually happens first time
this.getOptions().then(options => {
if (this.lookupText) {
this.getOptionsInternal("").then(options => {
var item = _.find(options, {value: this.model});
this.updateDisplay(item ? item.text : this.model);
});
} else {
this.updateDisplay(this.model);
}
}
}
typeaheadSource(query, callback) {
this.getOptions({$query: query}).then(options => {
this.getOptionsInternal(query).then(options => {
this.optionCache = options;
// extract texts
@@ -223,9 +240,8 @@ export function formDropdownDirective() {
cssClass: "@",
allowCustom: "@",
labelMode: "@",
lookupText: "@",
},
link: function() {
}
};
}

1
public/app/features/panel/partials/metrics_tab.html
View File

@@ -35,6 +35,7 @@
<div class="gf-form">
<label class="gf-form-label">Panel Data Source</label>
<gf-form-dropdown model="ctrl.panelDsValue"
lookup-text="true"
get-options="ctrl.getOptions(true)"
on-change="ctrl.datasourceChanged($option)">
</gf-form-dropdown>

21
public/app/plugins/datasource/elasticsearch/bucket_agg.js
View File

@@ -26,13 +26,21 @@ function (angular, _, queryDef) {
var bucketAggs = $scope.target.bucketAggs;
$scope.orderByOptions = [];
$scope.bucketAggTypes = queryDef.bucketAggTypes;
$scope.orderOptions = queryDef.orderOptions;
$scope.sizeOptions = queryDef.sizeOptions;
$scope.getBucketAggTypes = function() {
return queryDef.bucketAggTypes;
};
$scope.getOrderOptions = function() {
return queryDef.orderOptions;
};
$scope.getSizeOptions = function() {
return queryDef.sizeOptions;
};
$rootScope.onAppEvent('elastic-query-updated', function() {
$scope.validateModel();
$scope.updateOrderByOptions();
}, $scope);
$scope.init = function() {
@@ -166,11 +174,10 @@ function (angular, _, queryDef) {
$scope.toggleOptions = function() {
$scope.showOptions = !$scope.showOptions;
$scope.updateOrderByOptions();
};
$scope.updateOrderByOptions = function() {
$scope.orderByOptions = queryDef.getOrderByOptions($scope.target);
$scope.getOrderByOptions = function() {
return queryDef.getOrderByOptions($scope.target);
};
$scope.getFieldsInternal = function() {

51
public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html
View File

@@ -5,9 +5,22 @@
<span ng-hide="isFirst">Then by</span>
</label>
<gf-form-dropdown value="agg.type" options="bucketAggTypes" on-change="onTypeChanged()" custom="false" css-class="width-10"></gf-form-dropdown>
<!-- <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> -->
<metric-segment-model ng-if="agg.field" property="agg.field" get-options="getFieldsInternal()" on-change="onChange()" css-class="width-12"></metric-segment-model>
<gf-form-dropdown model="agg.type"
lookup-text="true"
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 class="gf-form gf-form--grow">
@@ -34,7 +47,13 @@
<div ng-if="agg.type === 'date_histogram'">
<div class="gf-form offset-width-7">
<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 class="gf-form offset-width-7">
@@ -67,11 +86,23 @@
<div ng-if="agg.type === 'terms'">
<div class="gf-form offset-width-7">
<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 class="gf-form offset-width-7">
<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 class="gf-form offset-width-7">
<label class="gf-form-label width-10">Min Doc Count</label>
@@ -79,7 +110,13 @@
</div>
<div class="gf-form offset-width-7">
<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 class="gf-form offset-width-7">
<label class="gf-form-label width-10">

6
public/app/plugins/datasource/elasticsearch/partials/metric_agg.html
View File

@@ -11,9 +11,9 @@
</div>
<div class="gf-form">
<gf-form-dropdown value="agg.type" options="metricAggTypes" on-change="onTypeChanged()" custom="false" css-class="width-10"></gf-form-dropdown>
<gf-form-dropdown ng-if="aggDef.requiresField" value="agg.field" get-options="getFieldsInternal()" on-change="onChange()" css-class="width-12"></gf-form-dropdown>
<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 property="agg.type" options="metricAggTypes" on-change="onTypeChange()" custom="false" css-class="width-10"></metric-segment-model>
<metric-segment-model ng-if="aggDef.requiresField" property="agg.field" get-options="getFieldsInternal()" on-change="onChange()" css-class="width-12"></metric-segment-model>
<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 class="gf-form gf-form--grow">

4
public/app/plugins/datasource/elasticsearch/query_ctrl.ts
View File

@@ -31,11 +31,11 @@ export class ElasticQueryCtrl extends QueryCtrl {
queryUpdated() {
var newJson = angular.toJson(this.datasource.queryBuilder.build(this.target), true);
if (newJson !== this.rawQueryOld) {
this.rawQueryOld = newJson;
if (this.rawQueryOld && newJson !== this.rawQueryOld) {
this.refresh();
}
this.rawQueryOld = newJson;
this.$rootScope.appEvent('elastic-query-updated');
}