From 2a9d617d63d1d213e65cd2ba773b25eb60c14c1e Mon Sep 17 00:00:00 2001 From: Igor Gaponenko Date: Tue, 15 Aug 2023 02:13:52 +0000 Subject: [PATCH] Web Dashboard: improved layout of the worker task histos --- src/www/qserv/js/QservWorkerTaskHist.js | 130 ++++++++++++++---------- 1 file changed, 78 insertions(+), 52 deletions(-) diff --git a/src/www/qserv/js/QservWorkerTaskHist.js b/src/www/qserv/js/QservWorkerTaskHist.js index f7a5c8826a..6782750e0d 100644 --- a/src/www/qserv/js/QservWorkerTaskHist.js +++ b/src/www/qserv/js/QservWorkerTaskHist.js @@ -47,15 +47,9 @@ function(CSSLoader, 'rowsPerTask' ]; static _table_head(histogram) { - if (_.isUndefined(histogram)) { - return ` - - worker -`; - } + if (_.isUndefined(histogram)) return ''; let html = ` - worker QID total @@ -78,6 +72,11 @@ function(CSSLoader,
+
+ + +
@@ -147,10 +146,20 @@ function(CSSLoader, _set_histogram_name(val) { this._form_control('select', 'histogram-name').val(val); } _update_interval_sec() { return this._form_control('select', 'update-interval').val(); } _set_update_interval_sec(val) { this._form_control('select', 'update-interval').val(val); } - - /** - * Table for displaying histograms that are being produced at workers. - */ + _worker() { return this._form_control('select', 'worker').val(); } + _set_worker(val) { this._form_control('select', 'worker').val(val); } + _set_workers(workers) { + const prev_worker = this._worker(); + let html = ''; + for (let i in workers) { + const worker = workers[i]; + const selected = (_.isEmpty(prev_worker) && (i === 0)) || + (!_.isEmpty(prev_worker) && (prev_worker === worker)); + html += ` + `; + } + this._form_control('select', 'worker').html(html); + } _table() { if (this._table_obj === undefined) { this._table_obj = this.fwk_app_container.find('table#fwk-qserv-task-hist'); @@ -162,18 +171,41 @@ function(CSSLoader, * Load data from a web service then render it to the application's page. */ _load() { - if (this._loading === undefined) this._loading = false; - if (this._loading) return; - this._loading = true; - - this._table().children('caption').addClass('updating'); - + if (this._loading === undefined) this._loading = false; + if (this._loading) return; + this._loading = true; + this._table().children('caption').addClass('updating'); + Fwk.web_service_GET( + "/replication/config", + {version: Common.RestAPIVersion}, + (data) => { + let workers = []; + for (let i in data.config.workers) { + workers.push(data.config.workers[i].name); + } + this._set_workers(workers); + this._load_histograms(); + }, + (msg) => { + console.log('request failed', this.fwk_app_name, msg); + this._table().children('caption').html('No Response'); + this._table().children('caption').removeClass('updating'); + this._loading = false; + } + ); + } + _load_histograms() { Fwk.web_service_GET( - "/replication/qserv/worker/status", + "/replication/qserv/worker/status/" + this._worker(), {timeout_sec: 2, version: Common.RestAPIVersion}, (data) => { - this._display(data.status); - Fwk.setLastUpdate(this._table().children('caption')); + if (data.success) { + this._display(data.status); + Fwk.setLastUpdate(this._table().children('caption')); + } else { + console.log('request failed', this.fwk_app_name, data.error); + this._table().children('caption').html('' + data.error + ''); + } this._table().children('caption').removeClass('updating'); this._loading = false; }, @@ -190,31 +222,29 @@ function(CSSLoader, * Display histograms */ _display(data) { - const queryInspectTitle = "Click to see detailed info (progress, messages, etc.) on the query."; - const qid = this._qid(); - const histogram_name = this._histogram_name(); let thead_html = QservWorkerTaskHist._table_head(); let tbody_html = ''; - for (let worker in data) { - if (!data[worker].success || _.isUndefined(data[worker].info.processor) || - _.isUndefined(data[worker].info.processor.queries) || - _.isUndefined(data[worker].info.processor.queries.query_stats)) { - continue; - } + const worker = this._worker(); + if (!data[worker].success || _.isUndefined(data[worker].info.processor) || + _.isUndefined(data[worker].info.processor.queries) || + _.isUndefined(data[worker].info.processor.queries.query_stats)) { + ; + } else { let query_stats = data[worker].info.processor.queries.query_stats; - if (_.isEmpty(query_stats)) continue; - let rowspan = 1; - let html = ''; - for (let queryId in query_stats) { - if (!_.isEmpty(qid) && (qid !== queryId)) continue; - if (!_.has(query_stats[queryId], "histograms")) continue; - let histograms = query_stats[queryId].histograms; - if (!_.has(histograms, histogram_name)) continue; - let histogram = histograms[histogram_name]; - if (_.isEmpty(html)) { - thead_html = QservWorkerTaskHist._table_head(histogram); - } - html += ` + if (!_.isEmpty(query_stats)) { + const queryInspectTitle = "Click to see detailed info (progress, messages, etc.) on the query."; + const qid = this._qid(); + const histogram_name = this._histogram_name(); + for (let queryId in query_stats) { + if (!_.isEmpty(qid) && (qid !== queryId)) continue; + if (!_.has(query_stats[queryId], "histograms")) continue; + let histograms = query_stats[queryId].histograms; + if (!_.has(histograms, histogram_name)) continue; + let histogram = histograms[histogram_name]; + if (_.isEmpty(thead_html)) { + thead_html = QservWorkerTaskHist._table_head(histogram); + } + tbody_html += ` 
${queryId}
@@ -223,19 +253,15 @@ function(CSSLoader, 
${histogram.total ? histogram.total.toFixed(3) : ''}
${histogram.totalCount ? histogram.totalCount : ''}
${histogram.avg ? histogram.avg.toFixed(3) : ''}
`; - for (let i in histogram.buckets) { - let bucket = histogram.buckets[i]; - html += ` + for (let i in histogram.buckets) { + let bucket = histogram.buckets[i]; + tbody_html += ` 
${bucket.count ? bucket.count : ''}
`; - } - html += ` + } + tbody_html += ` `; -rowspan++; + } } - tbody_html += ` - - ${worker} -` + html; } this._table().children('thead').html(thead_html); let tbody = this._table().children('tbody').html(tbody_html);