mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2024-12-27 06:29:42 -08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Fix: Improve typeahead on /graph page (#3742)

Browse source 
* Do not autoselect the first item in the dropdown

* Historical queries only show in dropdown when toggled on

* Move shared behavior to queryHistory.isEnabled function

* Do not auto submit selected history queries
This commit is contained in:
Lovisa Svallingson 2018-02-02 11:16:29 -07:00 committed by Julius Volz
parent 5169ccf258
commit 460fe4dd0c
2 changed files with 23 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
web/ui/bindata.go
View file

File diff suppressed because one or more lines are too long

26
web/ui/static/js/graph/index.js
View file

@ -260,10 +260,10 @@ Prometheus.Graph.prototype.populateInsertableMetrics = function() {
}; };
Prometheus.Graph.prototype.initTypeahead = function(self) { Prometheus.Graph.prototype.initTypeahead = function(self) {
const historyIsChecked = $("div.query-history").hasClass("is-checked"); const source = queryHistory.isEnabled() ? pageConfig.queryHistMetrics.concat(pageConfig.allMetrics) : pageConfig.allMetrics;
const source = historyIsChecked ? pageConfig.allMetrics.concat(JSON.parse(localStorage.getItem("history"))) : pageConfig.allMetrics;
self.expr.typeahead({ self.expr.typeahead({
autoSelect: false,
source, source,
items: "all", items: "all",
matcher: function (item) { matcher: function (item) {
@ -829,7 +829,9 @@ Prometheus.Graph.prototype.formatKMBT = function(y) {
* Page * Page
*/ */
const pageConfig = { const pageConfig = {
graphs: [] graphs: [],
queryHistMetrics: JSON.parse(localStorage.getItem('history')) || [],
allMetrics: [],
}; };
Prometheus.Page = function() {}; Prometheus.Page = function() {};
@ -994,12 +996,16 @@ function redirectToMigratedURL() {
* Query History helper functions * Query History helper functions
* **/ * **/
const queryHistory = { const queryHistory = {
isEnabled: function() {
return JSON.parse(localStorage.getItem('enable-query-history'))
},
bindHistoryEvents: function(graph) { bindHistoryEvents: function(graph) {
const targetEl = $('div.query-history'); const targetEl = $('div.query-history');
const icon = $(targetEl).children('i'); const icon = $(targetEl).children('i');
targetEl.off('click'); targetEl.off('click');
if (JSON.parse(localStorage.getItem('enable-query-history'))) { if (queryHistory.isEnabled()) {
this.toggleOn(targetEl); this.toggleOn(targetEl);
} }
@ -1030,12 +1036,14 @@ const queryHistory = {
parsedQueryHistory = parsedQueryHistory.slice(queryCount - 50, queryCount); parsedQueryHistory = parsedQueryHistory.slice(queryCount - 50, queryCount);
localStorage.setItem('history', JSON.stringify(parsedQueryHistory)); localStorage.setItem('history', JSON.stringify(parsedQueryHistory));
pageConfig.queryHistMetrics = parsedQueryHistory;
this.updateTypeaheadMetricSet(parsedQueryHistory); if (queryHistory.isEnabled()) {
this.updateTypeaheadMetricSet(pageConfig.queryHistMetrics.concat(pageConfig.allMetrics));
}
}, },
toggleOn: function(targetEl) { toggleOn: function(targetEl) {
this.updateTypeaheadMetricSet(JSON.parse(localStorage.getItem('history'))); this.updateTypeaheadMetricSet(pageConfig.queryHistMetrics.concat(pageConfig.allMetrics));
$(targetEl).children('i').removeClass('glyphicon-unchecked').addClass('glyphicon-check'); $(targetEl).children('i').removeClass('glyphicon-unchecked').addClass('glyphicon-check');
targetEl.addClass('is-checked'); targetEl.addClass('is-checked');
@ -1043,7 +1051,7 @@ const queryHistory = {
}, },
toggleOff: function(targetEl) { toggleOff: function(targetEl) {
this.updateTypeaheadMetricSet(); this.updateTypeaheadMetricSet(pageConfig.allMetrics);
$(targetEl).children('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked'); $(targetEl).children('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked');
targetEl.removeClass('is-checked'); targetEl.removeClass('is-checked');
@ -1052,7 +1060,7 @@ const queryHistory = {
updateTypeaheadMetricSet: function(metricSet) { updateTypeaheadMetricSet: function(metricSet) {
pageConfig.graphs.forEach(function(graph) { pageConfig.graphs.forEach(function(graph) {
graph.expr.data('typeahead').source = metricSet ? pageConfig.allMetrics.concat(metricSet) : pageConfig.allMetrics; graph.expr.data('typeahead').source = metricSet;
}); });
} }
}; };