Fix explore mode in Grafana 6.x, closes #888

Migrate target.mode to target.queryType because Explore uses target.mode and overwrites it.
This commit is contained in:
Alexander Zobnin
2020-04-13 12:16:44 +03:00
parent e6f7e66667
commit 08b1b635b7
6 changed files with 69 additions and 54 deletions

View File

@@ -133,29 +133,29 @@ export class ZabbixDatasource {
let useTrends = this.isUseTrends(timeRange); let useTrends = this.isUseTrends(timeRange);
// Metrics or Text query mode // Metrics or Text query
if (!target.mode || target.mode === c.MODE_METRICS || target.mode === c.MODE_TEXT) { if (!target.queryType || target.queryType === c.MODE_METRICS || target.queryType === c.MODE_TEXT) {
// Don't request undefined targets // Don't request undefined targets
if (!target.group || !target.host || !target.item) { if (!target.group || !target.host || !target.item) {
return []; return [];
} }
if (!target.mode || target.mode === c.MODE_METRICS) { if (!target.queryType || target.queryType === c.MODE_METRICS) {
return this.queryNumericData(target, timeRange, useTrends, options); return this.queryNumericData(target, timeRange, useTrends, options);
} else if (target.mode === c.MODE_TEXT) { } else if (target.queryType === c.MODE_TEXT) {
return this.queryTextData(target, timeRange); return this.queryTextData(target, timeRange);
} }
} else if (target.mode === c.MODE_ITEMID) { } else if (target.queryType === c.MODE_ITEMID) {
// Item ID mode // Item ID query
if (!target.itemids) { if (!target.itemids) {
return []; return [];
} }
return this.queryItemIdData(target, timeRange, useTrends, options); return this.queryItemIdData(target, timeRange, useTrends, options);
} else if (target.mode === c.MODE_ITSERVICE) { } else if (target.queryType === c.MODE_ITSERVICE) {
// IT services mode // IT services query
return this.queryITServiceData(target, timeRange, options); return this.queryITServiceData(target, timeRange, options);
} else if (target.mode === c.MODE_TRIGGERS) { } else if (target.queryType === c.MODE_TRIGGERS) {
// Triggers mode // Triggers query
return this.queryTriggersData(target, timeRange); return this.queryTriggersData(target, timeRange);
} else { } else {
return []; return [];
@@ -171,7 +171,7 @@ export class ZabbixDatasource {
} }
/** /**
* Query target data for Metrics mode * Query target data for Metrics
*/ */
queryNumericData(target, timeRange, useTrends, options) { queryNumericData(target, timeRange, useTrends, options) {
let queryStart, queryEnd; let queryStart, queryEnd;
@@ -276,7 +276,7 @@ export class ZabbixDatasource {
} }
/** /**
* Query target data for Text mode * Query target data for Text
*/ */
queryTextData(target, timeRange) { queryTextData(target, timeRange) {
let options = { let options = {
@@ -289,7 +289,7 @@ export class ZabbixDatasource {
} }
/** /**
* Query target data for Item ID mode * Query target data for Item ID
*/ */
queryItemIdData(target, timeRange, useTrends, options) { queryItemIdData(target, timeRange, useTrends, options) {
let itemids = target.itemids; let itemids = target.itemids;
@@ -307,7 +307,7 @@ export class ZabbixDatasource {
} }
/** /**
* Query target data for IT Services mode * Query target data for IT Services
*/ */
queryITServiceData(target, timeRange, options) { queryITServiceData(target, timeRange, options) {
// Don't show undefined and hidden targets // Don't show undefined and hidden targets

View File

@@ -1,4 +1,5 @@
import _ from 'lodash'; import _ from 'lodash';
import * as c from './constants';
/** /**
* Query format migration. * Query format migration.
@@ -27,6 +28,29 @@ export function migrateFrom2To3version(target) {
return target; return target;
} }
function migratePercentileAgg(target) {
if (target.functions) {
for (const f of target.functions) {
if (f.def && f.def.name === 'percentil') {
f.def.name = 'percentile';
}
}
}
}
function migrateQueryType(target) {
if (target.queryType === undefined) {
if (target.mode === 'Metrics') {
// Explore mode
target.queryType = c.MODE_METRICS;
} else if (target.mode !== undefined) {
target.queryType = target.mode;
delete target.mode;
}
}
}
export function migrate(target) { export function migrate(target) {
target.resultFormat = target.resultFormat || 'time_series'; target.resultFormat = target.resultFormat || 'time_series';
target = fixTargetGroup(target); target = fixTargetGroup(target);
@@ -34,6 +58,7 @@ export function migrate(target) {
return migrateFrom2To3version(target); return migrateFrom2To3version(target);
} }
migratePercentileAgg(target); migratePercentileAgg(target);
migrateQueryType(target);
return target; return target;
} }
@@ -52,16 +77,6 @@ function convertToRegex(str) {
} }
} }
function migratePercentileAgg(target) {
if (target.functions) {
for (const f of target.functions) {
if (f.def && f.def.name === 'percentil') {
f.def.name = 'percentile';
}
}
}
}
export const DS_CONFIG_SCHEMA = 2; export const DS_CONFIG_SCHEMA = 2;
export function migrateDSConfig(jsonData) { export function migrateDSConfig(jsonData) {
if (!jsonData) { if (!jsonData) {

View File

@@ -5,13 +5,13 @@
<label class="gf-form-label width-7">Query Mode</label> <label class="gf-form-label width-7">Query Mode</label>
<div class="gf-form-select-wrapper max-width-20"> <div class="gf-form-select-wrapper max-width-20">
<select class="gf-form-input" <select class="gf-form-input"
ng-change="ctrl.switchEditorMode(ctrl.target.mode)" ng-change="ctrl.switchEditorMode(ctrl.target.queryType)"
ng-model="ctrl.target.mode" ng-model="ctrl.target.queryType"
ng-options="m.mode as m.text for m in ctrl.editorModes"> ng-options="m.queryType as m.text for m in ctrl.editorModes">
</select> </select>
</div> </div>
</div> </div>
<div class="gf-form" ng-show="ctrl.target.mode == editorMode.TEXT"> <div class="gf-form" ng-show="ctrl.target.queryType == editorMode.TEXT">
<label class="gf-form-label query-keyword width-8">Format As</label> <label class="gf-form-label query-keyword width-8">Format As</label>
<div class="gf-form-select-wrapper"> <div class="gf-form-select-wrapper">
<select class="gf-form-input gf-size-auto" ng-model="ctrl.target.resultFormat" ng-options="f.value as f.text for f in ctrl.resultFormats" ng-change="ctrl.refresh()"></select> <select class="gf-form-input gf-size-auto" ng-model="ctrl.target.resultFormat" ng-options="f.value as f.text for f in ctrl.resultFormats" ng-change="ctrl.refresh()"></select>
@@ -23,7 +23,7 @@
</div> </div>
<!-- IT Service editor --> <!-- IT Service editor -->
<div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.ITSERVICE"> <div class="gf-form-inline" ng-show="ctrl.target.queryType == editorMode.ITSERVICE">
<div class="gf-form max-width-20"> <div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">IT Service</label> <label class="gf-form-label query-keyword width-7">IT Service</label>
<input type="text" <input type="text"
@@ -54,7 +54,7 @@
</div> </div>
</div> </div>
<div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.METRICS || ctrl.target.mode == editorMode.TEXT || ctrl.target.mode == editorMode.TRIGGERS"> <div class="gf-form-inline" ng-show="ctrl.target.queryType == editorMode.METRICS || ctrl.target.queryType == editorMode.TEXT || ctrl.target.queryType == editorMode.TRIGGERS">
<!-- Select Group --> <!-- Select Group -->
<div class="gf-form max-width-20"> <div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Group</label> <label class="gf-form-label query-keyword width-7">Group</label>
@@ -91,7 +91,7 @@
</div> </div>
</div> </div>
<div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.METRICS || ctrl.target.mode == editorMode.TEXT || ctrl.target.mode == editorMode.TRIGGERS"> <div class="gf-form-inline" ng-show="ctrl.target.queryType == editorMode.METRICS || ctrl.target.queryType == editorMode.TEXT || ctrl.target.queryType == editorMode.TRIGGERS">
<!-- Select Application --> <!-- Select Application -->
<div class="gf-form max-width-20"> <div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Application</label> <label class="gf-form-label query-keyword width-7">Application</label>
@@ -109,7 +109,7 @@
</div> </div>
<!-- Select Item --> <!-- Select Item -->
<div class="gf-form" ng-show="ctrl.target.mode == editorMode.METRICS || ctrl.target.mode == editorMode.TEXT"> <div class="gf-form" ng-show="ctrl.target.queryType == editorMode.METRICS || ctrl.target.queryType == editorMode.TEXT">
<label class="gf-form-label query-keyword width-8">Item</label> <label class="gf-form-label query-keyword width-8">Item</label>
<input type="text" <input type="text"
ng-model="ctrl.target.item.filter" ng-model="ctrl.target.item.filter"
@@ -124,7 +124,7 @@
}"> }">
</div> </div>
<div class="gf-form max-width-23" ng-show="ctrl.target.mode == editorMode.TRIGGERS"> <div class="gf-form max-width-23" ng-show="ctrl.target.queryType == editorMode.TRIGGERS">
<label class="gf-form-label query-keyword width-8">Min Severity</label> <label class="gf-form-label query-keyword width-8">Min Severity</label>
<div class="gf-form-select-wrapper width-16"> <div class="gf-form-select-wrapper width-16">
<select class="gf-form-input" <select class="gf-form-input"
@@ -134,7 +134,7 @@
</select> </select>
</div> </div>
</div> </div>
<div class="gf-form max-width-20" ng-show="ctrl.target.mode == editorMode.TRIGGERS"> <div class="gf-form max-width-20" ng-show="ctrl.target.queryType == editorMode.TRIGGERS">
<label class="gf-form-label query-keyword width-8">Acknowledged</label> <label class="gf-form-label query-keyword width-8">Acknowledged</label>
<div class="gf-form-select-wrapper width-12"> <div class="gf-form-select-wrapper width-12">
<select class="gf-form-input" <select class="gf-form-input"
@@ -145,13 +145,13 @@
</div> </div>
</div> </div>
<gf-form-switch class="gf-form" label="Count" ng-show="ctrl.target.mode == editorMode.TRIGGERS" <gf-form-switch class="gf-form" label="Count" ng-show="ctrl.target.queryType == editorMode.TRIGGERS"
checked="ctrl.target.triggers.count" on-change="ctrl.onTargetBlur()"> checked="ctrl.target.triggers.count" on-change="ctrl.onTargetBlur()">
</gf-form-switch> </gf-form-switch>
<div class="gf-form gf-form--grow"> <div class="gf-form gf-form--grow">
<label class="gf-form-label gf-form-label--grow"> <label class="gf-form-label gf-form-label--grow">
<a ng-click="ctrl.toggleQueryOptions()" ng-hide="ctrl.target.mode == editorMode.TRIGGERS"> <a ng-click="ctrl.toggleQueryOptions()" ng-hide="ctrl.target.queryType == editorMode.TRIGGERS">
<i class="fa fa-caret-down" ng-show="ctrl.showQueryOptions"></i> <i class="fa fa-caret-down" ng-show="ctrl.showQueryOptions"></i>
<i class="fa fa-caret-right" ng-hide="ctrl.showQueryOptions"></i> <i class="fa fa-caret-right" ng-hide="ctrl.showQueryOptions"></i>
{{ctrl.queryOptionsText}} {{ctrl.queryOptionsText}}
@@ -162,14 +162,14 @@
<!-- Query options --> <!-- Query options -->
<div class="gf-form-group" ng-if="ctrl.showQueryOptions"> <div class="gf-form-group" ng-if="ctrl.showQueryOptions">
<div class="gf-form offset-width-7" ng-hide="ctrl.target.mode == editorMode.TRIGGERS"> <div class="gf-form offset-width-7" ng-hide="ctrl.target.queryType == editorMode.TRIGGERS">
<gf-form-switch class="gf-form" label-class="width-10" <gf-form-switch class="gf-form" label-class="width-10"
label="Show disabled items" label="Show disabled items"
checked="ctrl.target.options.showDisabledItems" checked="ctrl.target.options.showDisabledItems"
on-change="ctrl.onQueryOptionChange()"> on-change="ctrl.onQueryOptionChange()">
</gf-form-switch> </gf-form-switch>
</div> </div>
<div class="gf-form offset-width-7" ng-show="ctrl.target.mode === editorMode.TEXT && ctrl.target.resultFormat === 'table'"> <div class="gf-form offset-width-7" ng-show="ctrl.target.queryType === editorMode.TEXT && ctrl.target.resultFormat === 'table'">
<gf-form-switch class="gf-form" label-class="width-10" <gf-form-switch class="gf-form" label-class="width-10"
label="Skip empty values" label="Skip empty values"
checked="ctrl.target.options.skipEmptyValues" checked="ctrl.target.options.skipEmptyValues"
@@ -179,7 +179,7 @@
</div> </div>
<!-- Item IDs editor mode --> <!-- Item IDs editor mode -->
<div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.ITEMID"> <div class="gf-form-inline" ng-show="ctrl.target.queryType == editorMode.ITEMID">
<div class="gf-form max-width-20"> <div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Item IDs</label> <label class="gf-form-label query-keyword width-7">Item IDs</label>
<input type="text" <input type="text"
@@ -201,7 +201,7 @@
</div> </div>
<!-- Metric processing functions --> <!-- Metric processing functions -->
<div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.METRICS || ctrl.target.mode == editorMode.ITEMID || ctrl.target.mode == editorMode.ITSERVICE"> <div class="gf-form-inline" ng-show="ctrl.target.queryType == editorMode.METRICS || ctrl.target.queryType == editorMode.ITEMID || ctrl.target.queryType == editorMode.ITSERVICE">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label query-keyword width-7">Functions</label> <label class="gf-form-label query-keyword width-7">Functions</label>
</div> </div>
@@ -216,7 +216,7 @@
</div> </div>
<!-- Text mode options --> <!-- Text mode options -->
<div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.TEXT"> <div class="gf-form-inline" ng-show="ctrl.target.queryType == editorMode.TEXT">
<!-- Text metric regex --> <!-- Text metric regex -->
<div class="gf-form max-width-20"> <div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Text filter</label> <label class="gf-form-label query-keyword width-7">Text filter</label>

View File

@@ -17,11 +17,11 @@ export class ZabbixQueryController extends QueryCtrl {
this.templateSrv = templateSrv; this.templateSrv = templateSrv;
this.editorModes = [ this.editorModes = [
{value: 'num', text: 'Metrics', mode: c.MODE_METRICS}, {value: 'num', text: 'Metrics', queryType: c.MODE_METRICS},
{value: 'text', text: 'Text', mode: c.MODE_TEXT}, {value: 'text', text: 'Text', queryType: c.MODE_TEXT},
{value: 'itservice', text: 'IT Services', mode: c.MODE_ITSERVICE}, {value: 'itservice', text: 'IT Services', queryType: c.MODE_ITSERVICE},
{value: 'itemid', text: 'Item ID', mode: c.MODE_ITEMID}, {value: 'itemid', text: 'Item ID', queryType: c.MODE_ITEMID},
{value: 'triggers', text: 'Triggers', mode: c.MODE_TRIGGERS} {value: 'triggers', text: 'Triggers', queryType: c.MODE_TRIGGERS}
]; ];
this.$scope.editorMode = { this.$scope.editorMode = {
@@ -81,7 +81,7 @@ export class ZabbixQueryController extends QueryCtrl {
// Load default values // Load default values
var targetDefaults = { var targetDefaults = {
'mode': c.MODE_METRICS, 'queryType': c.MODE_METRICS,
'group': { 'filter': "" }, 'group': { 'filter': "" },
'host': { 'filter': "" }, 'host': { 'filter': "" },
'application': { 'filter': "" }, 'application': { 'filter': "" },
@@ -107,12 +107,12 @@ export class ZabbixQueryController extends QueryCtrl {
return metricFunctions.createFuncInstance(func.def, func.params); return metricFunctions.createFuncInstance(func.def, func.params);
}); });
if (target.mode === c.MODE_METRICS || if (target.queryType === c.MODE_METRICS ||
target.mode === c.MODE_TEXT || target.queryType === c.MODE_TEXT ||
target.mode === c.MODE_TRIGGERS) { target.queryType === c.MODE_TRIGGERS) {
this.initFilters(); this.initFilters();
} }
else if (target.mode === c.MODE_ITSERVICE) { else if (target.queryType === c.MODE_ITSERVICE) {
_.defaults(target, {slaProperty: {name: "SLA", property: "sla"}}); _.defaults(target, {slaProperty: {name: "SLA", property: "sla"}});
this.suggestITServices(); this.suggestITServices();
} }
@@ -123,7 +123,7 @@ export class ZabbixQueryController extends QueryCtrl {
} }
initFilters() { initFilters() {
let itemtype = _.find(this.editorModes, {'mode': this.target.mode}); let itemtype = _.find(this.editorModes, {'queryType': this.target.queryType});
itemtype = itemtype ? itemtype.value : null; itemtype = itemtype ? itemtype.value : null;
return Promise.all([ return Promise.all([
this.suggestGroups(), this.suggestGroups(),
@@ -329,7 +329,7 @@ export class ZabbixQueryController extends QueryCtrl {
* 2 - Text metrics * 2 - Text metrics
*/ */
switchEditorMode(mode) { switchEditorMode(mode) {
this.target.mode = mode; this.target.queryType = mode;
this.init(); this.init();
this.targetChanged(); this.targetChanged();
} }

View File

@@ -119,7 +119,7 @@ describe('ZabbixDatasource', () => {
item: {filter: "System information"}, item: {filter: "System information"},
textFilter: "", textFilter: "",
useCaptureGroups: true, useCaptureGroups: true,
mode: 2, queryType: 2,
resultFormat: "table", resultFormat: "table",
options: { options: {
skipEmptyValues: false skipEmptyValues: false