stackdriver: make sure service and metric display name is used instead of value when loading a saved query editor

This commit is contained in:
Erik Sundell 2018-09-26 15:01:02 +02:00
parent 2965f58838
commit b883d7c1f3
2 changed files with 46 additions and 29 deletions

View File

@ -1,19 +1,9 @@
<query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
<!-- <div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-9">Metric Type</span>
<gf-form-dropdown model="ctrl.target.metricType" get-options="ctrl.getMetricTypes($query)" class="min-width-20"
disabled type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="ctrl.onMetricTypeChange()"></gf-form-dropdown>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div> -->
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-9">Service</span>
<gf-form-dropdown model="ctrl.target.service" get-options="ctrl.getServices()" class="min-width-20" disabled type="text"
allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="ctrl.onServiceChange(ctrl.target.metricService)"></gf-form-dropdown>
<gf-form-dropdown model="ctrl.service" get-options="ctrl.services" class="min-width-20" disabled type="text"
allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="ctrl.onServiceChange(ctrl.service)"></gf-form-dropdown>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
@ -22,7 +12,7 @@
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-9">Metric</span>
<gf-form-dropdown model="ctrl.target.metricType" get-options="ctrl.metrics" class="min-width-20" disabled type="text"
<gf-form-dropdown model="ctrl.metricType" get-options="ctrl.metrics" class="min-width-20" disabled type="text"
allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="ctrl.onMetricTypeChange()"></gf-form-dropdown>
</div>
<div class="gf-form gf-form--grow">

View File

@ -32,8 +32,8 @@ export class StackdriverQueryCtrl extends QueryCtrl {
metricKind: any;
valueType: any;
};
defaultDropdownValue = 'select metric';
defaultServiceValue = 'all';
defaultDropdownValue = 'Select Metric';
defaultServiceValue = 'All Services';
defaultRemoveGroupByValue = '-- remove group by --';
loadLabelsPromise: Promise<any>;
stackdriverConstants;
@ -59,8 +59,11 @@ export class StackdriverQueryCtrl extends QueryCtrl {
valueType: '',
};
service: string;
metricType: string;
metricDescriptors: any[];
metrics: any[];
services: any[];
groupBySegments: any[];
removeSegment: any;
showHelp: boolean;
@ -77,6 +80,9 @@ export class StackdriverQueryCtrl extends QueryCtrl {
_.defaultsDeep(this.target, this.defaults);
this.metricDescriptors = [];
this.metrics = [];
this.services = [];
this.metricType = this.defaultDropdownValue;
this.service = this.defaultServiceValue;
this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
this.getCurrentProject()
@ -126,14 +132,15 @@ export class StackdriverQueryCtrl extends QueryCtrl {
async loadMetricDescriptors() {
if (this.target.project.id !== 'default') {
this.metricDescriptors = await this.datasource.getMetricTypes(this.target.project.id);
this.metrics = this.getMetrics();
this.services = this.getServicesList();
this.metrics = this.getMetricsList();
return this.metricDescriptors;
} else {
return [];
}
}
getServices() {
getServicesList() {
const defaultValue = { value: this.defaultServiceValue, text: this.defaultServiceValue };
const services = this.metricDescriptors.map(m => {
const [service] = m.type.split('/');
@ -143,10 +150,15 @@ export class StackdriverQueryCtrl extends QueryCtrl {
text: serviceShortName,
};
});
if (services.find(m => m.value === this.target.service)) {
this.service = this.target.service;
}
return services.length > 0 ? [defaultValue, ..._.uniqBy(services, 'value')] : [];
}
getMetrics() {
getMetricsList() {
const metrics = this.metricDescriptors.map(m => {
const [service] = m.type.split('/');
const [serviceShortName] = service.split('.');
@ -159,20 +171,19 @@ export class StackdriverQueryCtrl extends QueryCtrl {
};
});
let result;
if (this.target.service === this.defaultServiceValue) {
return metrics.map(m => ({ ...m, text: `${m.service} - ${m.text}` }));
result = metrics.map(m => ({ ...m, text: `${m.service} - ${m.text}` }));
} else {
return metrics.filter(m => m.service === this.target.service);
result = metrics.filter(m => m.service === this.target.service);
}
}
onServiceChange() {
this.metrics = this.getMetrics();
if (!this.metrics.find(m => m.value === this.target.metricType)) {
this.target.metricType = this.defaultDropdownValue;
} else {
this.refresh();
if (result.find(m => m.value === this.target.metricType)) {
this.metricType = this.target.metricType;
} else if (result.length > 0) {
this.metricType = this.target.metricType = result[0].value;
}
return result;
}
async getLabels() {
@ -190,13 +201,29 @@ export class StackdriverQueryCtrl extends QueryCtrl {
});
}
onServiceChange() {
this.target.service = this.service;
this.metrics = this.getMetricsList();
this.setMetricType();
if (!this.metrics.find(m => m.value === this.target.metricType)) {
this.target.metricType = this.defaultDropdownValue;
} else {
this.refresh();
}
}
async onMetricTypeChange() {
this.setMetricType();
this.refresh();
this.getLabels();
}
setMetricType() {
this.target.metricType = this.metricType;
const { valueType, metricKind } = this.metricDescriptors.find(m => m.type === this.target.metricType);
this.target.valueType = valueType;
this.target.metricKind = metricKind;
this.$scope.$broadcast('metricTypeChanged');
this.refresh();
this.getLabels();
}
async getGroupBys(segment, index, removeText?: string, removeUsed = true) {