From 033713da2bf9f2b1ea9a87b33266f94d1f62a965 Mon Sep 17 00:00:00 2001 From: Igor Gaponenko Date: Wed, 27 Jul 2022 23:57:09 -0500 Subject: [PATCH] Web Dashboard: Optimized implementation of the query monitoring page --- src/www/qserv/css/StatusUserQueries.css | 8 --- src/www/qserv/js/StatusUserQueries.js | 78 +++++++++++-------------- 2 files changed, 35 insertions(+), 51 deletions(-) diff --git a/src/www/qserv/css/StatusUserQueries.css b/src/www/qserv/css/StatusUserQueries.css index 2859eb1606..8192cb44ec 100644 --- a/src/www/qserv/css/StatusUserQueries.css +++ b/src/www/qserv/css/StatusUserQueries.css @@ -37,14 +37,6 @@ table#fwk-status-queries tbody > tr > td.query_toggler:hover, table#fwk-status-queries-past tbody > tr > td.query_toggler:hover { cursor:pointer; } -table#fwk-status-queries tbody pre.query.hidden, -table#fwk-status-queries-past tbody pre.query.hidden { - display:none; -} -table#fwk-status-queries tbody pre.query.visible, -table#fwk-status-queries-past tbody pre.query.visible { - display:block; -} table#fwk-status-queries span, table#fwk-status-queries-past span { font-family: monospace; diff --git a/src/www/qserv/js/StatusUserQueries.js b/src/www/qserv/js/StatusUserQueries.js index 47ee6636be..eb597c3f43 100644 --- a/src/www/qserv/js/StatusUserQueries.js +++ b/src/www/qserv/js/StatusUserQueries.js @@ -16,7 +16,10 @@ function(CSSLoader, class StatusUserQueries extends FwkApplication { /// @returns the suggested server-side timeout for retreiving results - static server_proc_timeout_sec() { return 2; } + static _server_proc_timeout_sec() { return 2; } + + static _sqlFormatterConfig = {"language":"mysql", "uppercase:":true, "indent":" "}; + static _max_compact_length = 120; constructor(name) { super(name); @@ -307,7 +310,7 @@ function(CSSLoader, search_pattern: this._get_query_search_pattern(), search_boolean_mode: this._get_query_search_mode() == "BOOLEAN" ? 1 : 0, limit4past: this._get_max_queries(), - timeout_sec: StatusUserQueries.server_proc_timeout_sec() + timeout_sec: StatusUserQueries._server_proc_timeout_sec() }, (data) => { if (!data.success) { @@ -332,22 +335,21 @@ function(CSSLoader, */ _display(data) { this._id2query = {}; - let queryToggleTitle = "Click to toggle query formatting."; - let queryCopyTitle = "Click to copy the query text to the clipboard."; - let queryInspectTitle = "Click to see detailed info (progress, messages, etc.) on the query."; - let sqlFormatterConfig = {"language":"mysql","uppercase:":true,"indent":" "}; - let queryStyle = "color:#4d4dff;"; + const queryToggleTitle = "Click to toggle query formatting."; + const queryCopyTitle = "Click to copy the query text to the clipboard."; + const queryInspectTitle = "Click to see detailed info (progress, messages, etc.) on the query."; + const queryStyle = "color:#4d4dff;"; let html = ''; for (let i in data.queries) { let query = data.queries[i]; this._id2query[query.queryId] = query.query; - let progress = Math.floor(100. * query.completedChunks / query.totalChunks); - let scheduler = _.isUndefined(query.scheduler) ? 'Loading...' : query.scheduler.substring('Sched'.length); - let scheduler_color = _.has(this._scheduler2color, scheduler) ? + const progress = Math.floor(100. * query.completedChunks / query.totalChunks); + const scheduler = _.isUndefined(query.scheduler) ? 'Loading...' : query.scheduler.substring('Sched'.length); + const scheduler_color = _.has(this._scheduler2color, scheduler) ? this._scheduler2color[scheduler] : this._scheduler2color['Loading']; - let elapsed = this._elapsed(query.samplingTime_sec - query.queryBegin_sec); + const elapsed = this._elapsed(query.samplingTime_sec - query.queryBegin_sec); let leftSeconds; if (query.completedChunks > 0 && query.samplingTime_sec - query.queryBegin_sec > 0) { leftSeconds = Math.floor( @@ -355,13 +357,10 @@ function(CSSLoader, (query.completedChunks / (query.samplingTime_sec - query.queryBegin_sec)) ); } - let left = this._elapsed(leftSeconds); - let trend = this._trend(query.queryId, leftSeconds); - let performance = this._performance(query.completedChunks, query.samplingTime_sec - query.queryBegin_sec); - let expanded = (query.queryId in this._queryId2Expanded) && this._queryId2Expanded[query.queryId]; - let query_class = expanded ? "row_expanded" : "row_compact"; - let query_compact_class = expanded ? "hidden" : "visible"; - let query_expanded_class = expanded ? "visible" : "hidden"; + const left = this._elapsed(leftSeconds); + const trend = this._trend(query.queryId, leftSeconds); + const performance = this._performance(query.completedChunks, query.samplingTime_sec - query.queryBegin_sec); + const expanded = (query.queryId in this._queryId2Expanded) && this._queryId2Expanded[query.queryId]; html += ` 
` + query.queryBegin + `
@@ -381,29 +380,17 @@ function(CSSLoader, - - 
` + query.query + `
- 
` + sqlFormatter.format(query.query, sqlFormatterConfig) + `
- + 
` + this._query2text(query.queryId, expanded) + `
`; } let that = this; let toggleQueryDisplay = function(e) { let td = $(e.currentTarget); - let queryCompact = td.find("pre.query.compact"); - let queryExpanded = td.find("pre.query.expanded"); - let queryId = td.parent().attr("id"); - if (td.hasClass("row_compact")) { - td.removeClass("row_compact").addClass("row_expanded"); - queryCompact.removeClass("visible").addClass("hidden"); - queryExpanded.removeClass("hidden").addClass("visible"); - that._queryId2Expanded[queryId] = true; - } else { - td.removeClass("row_expanded").addClass("row_compact"); - queryCompact.removeClass("hidden").addClass("visible"); - queryExpanded.removeClass("visible").addClass("hidden"); - that._queryId2Expanded[queryId] = false; - } + let pre = td.find("pre.query"); + const queryId = td.parent().attr("id"); + const expanded = !((queryId in that._queryId2Expanded) && that._queryId2Expanded[queryId]); + pre.text(that._query2text(queryId, expanded)); + that._queryId2Expanded[queryId] = expanded; }; let copyQueryToClipboard = function(e) { let button = $(e.currentTarget); @@ -431,9 +418,6 @@ function(CSSLoader, let failed_query_class = query.status !== "COMPLETED" ? "table-danger" : ""; let performance = this._performance(query.chunkCount, query.completed_sec - query.submitted_sec); let expanded = (query.queryId in this._queryId2Expanded) && this._queryId2Expanded[query.queryId]; - let query_class = expanded ? "row_expanded" : "row_compact"; - let query_compact_class = expanded ? "hidden" : "visible"; - let query_expanded_class = expanded ? "visible" : "hidden"; html += ` 
` + query.submitted + `
@@ -451,10 +435,7 @@ function(CSSLoader, - - 
` + query.query + `
- 
` + sqlFormatter.format(query.query, sqlFormatterConfig) + `
- + 
` + this._query2text(query.queryId, expanded) + `
`; } let tbodyPastQueries = this._tablePastQueries().children('tbody').html(html); @@ -515,6 +496,17 @@ function(CSSLoader, if (chunks === 0 || totalSeconds <= 0) return 0; return Math.floor(chunks / (totalSeconds / 60.)); } + + _query2text(queryId, expanded) { + let query = this._id2query[queryId]; + if (expanded) { + return sqlFormatter.format(query, StatusUserQueries.sqlFormatterConfig); + } else if (query.length > StatusUserQueries._max_compact_length) { + return query.substring(0, StatusUserQueries._max_compact_length) + "..."; + } else { + return query; + } + } } return StatusUserQueries; });