diff --git a/web/ui/static/js/graph.js b/web/ui/static/js/graph.js index a0aabf91f..cb6befbea 100644 --- a/web/ui/static/js/graph.js +++ b/web/ui/static/js/graph.js @@ -627,13 +627,40 @@ Prometheus.Graph.prototype.remove = function() { }; function parseGraphOptionsFromURL() { - var hashOptions = window.location.hash.slice(1); - if (!hashOptions) { - return []; + var allGraphsOptions = []; + var queryStringBeginning = window.location.href.indexOf('?') + if(queryStringBeginning == -1) { + return allGraphsOptions; } - var optionsJSON = decodeURIComponent(window.location.hash.slice(1)); - options = JSON.parse(optionsJSON); - return options; + var paramTuples = window.location.href.slice(queryStringBeginning + 1).split('&'); + + paramTuples.forEach(function(tuple){ + var paramNameAndValue = tuple.split('='); + var paramName = paramNameAndValue[0] + var paramValue = decodeURIComponent(paramNameAndValue[1]) + + var indexAndName = paramName.split('.'); + var optionName = indexAndName[1]; + + if(optionName == "end_input"){ + paramValue = paramValue.replace("+", " ") // workaround jquery.param space plus + } + + if(optionName == "tab"){ + paramValue = parseInt(paramValue) // tab is int + } + + var indexStr = indexAndName[0].substring(1); + if(isNaN(indexStr) == false) { + var index = parseInt(indexStr); + if(typeof allGraphsOptions[index] === 'undefined') { + allGraphsOptions[index] = {}; + } + allGraphsOptions[index][optionName] = paramValue; + } + }); + + return allGraphsOptions } // NOTE: This needs to be kept in sync with /util/strutil/strconv.go:GraphLinkForExpression @@ -642,8 +669,19 @@ function storeGraphOptionsInURL() { for (var i = 0; i < graphs.length; i++) { allGraphsOptions.push(graphs[i].getOptions()); } - var optionsJSON = JSON.stringify(allGraphsOptions); - window.location.hash = encodeURIComponent(optionsJSON); + + var queryString = generateQueryString(allGraphsOptions); + history.pushState({}, "", "graph?" + queryString); +} + +function generateQueryString(allGraphsOptions) { + return allGraphsOptions.map(function(graphsOptions, index){ + var queryObject = {} + Object.keys(graphsOptions).map(function(key){ + queryObject["g" + index + "." + key] = graphsOptions[key]; + }); + return $.param(queryObject) + }).join("&"); } function addGraph(options) {