Skip to content

N
nexpie-grafana-theme
Commit b883d7c1 by Erik Sundell
Options

stackdriver: make sure service and metric display name is used instead of value… 

stackdriver: make sure service and metric display name is used instead of value when loading a saved query editor
parent 2965f588
Showing with 46 additions and 29 deletions
public/app/plugins/datasource/stackdriver/partials/query.editor.html
<query-editor-row query-ctrl="ctrl" has-text-edit-mode="false"> <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-inline">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-9">Service</span> <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" <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.target.metricService)"></gf-form-dropdown> allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="ctrl.onServiceChange(ctrl.service)"></gf-form-dropdown>
</div> </div>
<div class="gf-form gf-form--grow"> <div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div> <div class="gf-form-label gf-form-label--grow"></div>
...@@ -22,7 +12,7 @@ ...@@ -22,7 +12,7 @@
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-9">Metric</span> <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> allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="ctrl.onMetricTypeChange()"></gf-form-dropdown>
</div> </div>
<div class="gf-form gf-form--grow"> <div class="gf-form gf-form--grow">
......
public/app/plugins/datasource/stackdriver/query_ctrl.ts
...@@ -32,8 +32,8 @@ export class StackdriverQueryCtrl extends QueryCtrl { ...@@ -32,8 +32,8 @@ export class StackdriverQueryCtrl extends QueryCtrl {
metricKind: any; metricKind: any;
valueType: any; valueType: any;
}; };
defaultDropdownValue = 'select metric'; defaultDropdownValue = 'Select Metric';
defaultServiceValue = 'all'; defaultServiceValue = 'All Services';
defaultRemoveGroupByValue = '-- remove group by --'; defaultRemoveGroupByValue = '-- remove group by --';
loadLabelsPromise: Promise<any>; loadLabelsPromise: Promise<any>;
stackdriverConstants; stackdriverConstants;
...@@ -59,8 +59,11 @@ export class StackdriverQueryCtrl extends QueryCtrl { ...@@ -59,8 +59,11 @@ export class StackdriverQueryCtrl extends QueryCtrl {
valueType: '', valueType: '',
}; };
service: string;
metricType: string;
metricDescriptors: any[]; metricDescriptors: any[];
metrics: any[]; metrics: any[];
services: any[];
groupBySegments: any[]; groupBySegments: any[];
removeSegment: any; removeSegment: any;
showHelp: boolean; showHelp: boolean;
...@@ -77,6 +80,9 @@ export class StackdriverQueryCtrl extends QueryCtrl { ...@@ -77,6 +80,9 @@ export class StackdriverQueryCtrl extends QueryCtrl {
_.defaultsDeep(this.target, this.defaults); _.defaultsDeep(this.target, this.defaults);
this.metricDescriptors = []; this.metricDescriptors = [];
this.metrics = []; 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-received', this.onDataReceived.bind(this), $scope);
this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope); this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
this.getCurrentProject() this.getCurrentProject()
...@@ -126,14 +132,15 @@ export class StackdriverQueryCtrl extends QueryCtrl { ...@@ -126,14 +132,15 @@ export class StackdriverQueryCtrl extends QueryCtrl {
async loadMetricDescriptors() { async loadMetricDescriptors() {
if (this.target.project.id !== 'default') { if (this.target.project.id !== 'default') {
this.metricDescriptors = await this.datasource.getMetricTypes(this.target.project.id); 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; return this.metricDescriptors;
} else { } else {
return []; return [];
} }
} }
getServices() { getServicesList() {
const defaultValue = { value: this.defaultServiceValue, text: this.defaultServiceValue }; const defaultValue = { value: this.defaultServiceValue, text: this.defaultServiceValue };
const services = this.metricDescriptors.map(m => { const services = this.metricDescriptors.map(m => {
const [service] = m.type.split('/'); const [service] = m.type.split('/');
...@@ -143,10 +150,15 @@ export class StackdriverQueryCtrl extends QueryCtrl { ...@@ -143,10 +150,15 @@ export class StackdriverQueryCtrl extends QueryCtrl {
text: serviceShortName, text: serviceShortName,
}; };
}); });
if (services.find(m => m.value === this.target.service)) {
this.service = this.target.service;
}
return services.length > 0 ? [defaultValue, ..._.uniqBy(services, 'value')] : []; return services.length > 0 ? [defaultValue, ..._.uniqBy(services, 'value')] : [];
} }
getMetrics() { getMetricsList() {
const metrics = this.metricDescriptors.map(m => { const metrics = this.metricDescriptors.map(m => {
const [service] = m.type.split('/'); const [service] = m.type.split('/');
const [serviceShortName] = service.split('.'); const [serviceShortName] = service.split('.');
...@@ -159,20 +171,19 @@ export class StackdriverQueryCtrl extends QueryCtrl { ...@@ -159,20 +171,19 @@ export class StackdriverQueryCtrl extends QueryCtrl {
}; };
}); });
let result;
if (this.target.service === this.defaultServiceValue) { 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 { } else {
return metrics.filter(m => m.service === this.target.service); result = metrics.filter(m => m.service === this.target.service);
} }
}
onServiceChange() { if (result.find(m => m.value === this.target.metricType)) {
this.metrics = this.getMetrics(); this.metricType = this.target.metricType;
if (!this.metrics.find(m => m.value === this.target.metricType)) { } else if (result.length > 0) {
this.target.metricType = this.defaultDropdownValue; this.metricType = this.target.metricType = result[0].value;
} else {
this.refresh();
} }
return result;
} }
async getLabels() { async getLabels() {
...@@ -190,13 +201,29 @@ export class StackdriverQueryCtrl extends QueryCtrl { ...@@ -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() { 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); const { valueType, metricKind } = this.metricDescriptors.find(m => m.type === this.target.metricType);
this.target.valueType = valueType; this.target.valueType = valueType;
this.target.metricKind = metricKind; this.target.metricKind = metricKind;
this.$scope.$broadcast('metricTypeChanged'); this.$scope.$broadcast('metricTypeChanged');
this.refresh();
this.getLabels();
} }
async getGroupBys(segment, index, removeText?: string, removeUsed = true) { async getGroupBys(segment, index, removeText?: string, removeUsed = true) {
......
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