-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Web Dashboard: added pages for displaying MySQL queries at Czar and w…
…orkers
- Loading branch information
1 parent
098cf37
commit 3f550dc
Showing
6 changed files
with
498 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| #fwk-czar-mysql-queries-controls label { | ||
| font-weight: bold; | ||
| } | ||
| table#fwk-czar-mysql-queries caption { | ||
| caption-side: top; | ||
| text-align: right; | ||
| padding-top: 0; | ||
| } | ||
| table#fwk-czar-mysql-queries > thead > tr > th.sticky { | ||
| position:sticky; | ||
| top:80px; | ||
| z-index:2; | ||
| } | ||
| table#fwk-czar-mysql-queries tbody th, | ||
| table#fwk-czar-mysql-queries tbody td { | ||
| vertical-align:middle; | ||
| } | ||
| table#fwk-czar-mysql-queries pre { | ||
| padding: 0; | ||
| margin: 0; | ||
| } | ||
| table#fwk-czar-mysql-queries tbody > tr > td.query_toggler:hover { | ||
| cursor:pointer; | ||
| } | ||
| table#fwk-czar-mysql-queries caption.updating { | ||
| background-color: #ffeeba; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| #fwk-worker-mysql-queries-controls label { | ||
| font-weight: bold; | ||
| } | ||
| table#fwk-worker-mysql-queries caption { | ||
| caption-side: top; | ||
| text-align: right; | ||
| padding-top: 0; | ||
| } | ||
| table#fwk-worker-mysql-queries > thead > tr > th.sticky { | ||
| position:sticky; | ||
| top:80px; | ||
| z-index:2; | ||
| } | ||
| table#fwk-worker-mysql-queries tbody th, | ||
| table#fwk-worker-mysql-queries tbody td { | ||
| vertical-align:middle; | ||
| } | ||
| table#fwk-worker-mysql-queries pre { | ||
| padding: 0; | ||
| margin: 0; | ||
| } | ||
| table#fwk-worker-mysql-queries tbody > tr > td.query_toggler:hover { | ||
| cursor:pointer; | ||
| } | ||
| table#fwk-worker-mysql-queries caption.updating { | ||
| background-color: #ffeeba; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,199 @@ | ||
| define([ | ||
| 'webfwk/CSSLoader', | ||
| 'webfwk/Fwk', | ||
| 'webfwk/FwkApplication', | ||
| 'qserv/Common', | ||
| 'underscore'], | ||
|
|
||
| function(CSSLoader, | ||
| Fwk, | ||
| FwkApplication, | ||
| Common, | ||
| _) { | ||
|
|
||
| CSSLoader.load('qserv/css/QservCzarMySQLQueries.css'); | ||
|
|
||
| class QservCzarMySQLQueries extends FwkApplication { | ||
|
|
||
| constructor(name) { | ||
| super(name); | ||
| this._queryId2Expanded = {}; // Store 'true' to allow persistent state for the expanded | ||
| // queries between updates. | ||
| this._id2query = {}; // Store query text for each identifier. The dictionary gets | ||
| // updated at each refresh of the page. | ||
| } | ||
| fwk_app_on_show() { | ||
| console.log('show: ' + this.fwk_app_name); | ||
| this.fwk_app_on_update(); | ||
| } | ||
| fwk_app_on_hide() { | ||
| console.log('hide: ' + this.fwk_app_name); | ||
| } | ||
| fwk_app_on_update() { | ||
| if (this.fwk_app_visible) { | ||
| this._init(); | ||
| if (this._prev_update_sec === undefined) { | ||
| this._prev_update_sec = 0; | ||
| } | ||
| let now_sec = Fwk.now().sec; | ||
| if (now_sec - this._prev_update_sec > this._update_interval_sec()) { | ||
| this._prev_update_sec = now_sec; | ||
| this._init(); | ||
| this._load(); | ||
| } | ||
| } | ||
| } | ||
| _init() { | ||
| if (this._initialized === undefined) this._initialized = false; | ||
| if (this._initialized) return; | ||
| this._initialized = true; | ||
| let html = ` | ||
| <div class="row" id="fwk-czar-mysql-queries-controls"> | ||
| <div class="col"> | ||
| <div class="form-row"> | ||
| <div class="form-group col-md-1"> | ||
| <label for="update-interval"><i class="bi bi-arrow-repeat"></i> interval:</label> | ||
| <select id="update-interval" class="form-control form-control-selector"> | ||
| <option value="5">5 sec</option> | ||
| <option value="10" selected>10 sec</option> | ||
| <option value="20">20 sec</option> | ||
| <option value="30">30 sec</option> | ||
| <option value="60">1 min</option> | ||
| <option value="120">2 min</option> | ||
| <option value="300">5 min</option> | ||
| </select> | ||
| </div> | ||
| <div class="form-group col-md-1"> | ||
| <label for="reset-controls-form"> </label> | ||
| <button id="reset-controls-form" class="btn btn-primary form-control">Reset</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="col"> | ||
| <table class="table table-sm table-hover table-bordered" id="fwk-czar-mysql-queries"> | ||
| <thead class="thead-light"> | ||
| <tr> | ||
| <th class="sticky" style="text-align:right;">Id</th> | ||
| <th class="sticky" style="text-align:right;">Time</th> | ||
| <th class="sticky" style="text-align:right;">State</th> | ||
| <th class="sticky" style="text-align:center;"><i class="bi bi-clipboard-fill"></i></th> | ||
| <th class="sticky">Query</th> | ||
| </tr> | ||
| </thead> | ||
| <caption class="updating">Loading...</caption> | ||
| <tbody></tbody> | ||
| </table> | ||
| </div> | ||
| </div>`; | ||
| let cont = this.fwk_app_container.html(html); | ||
| cont.find(".form-control-selector").change(() => { | ||
| this._load(); | ||
| }); | ||
| cont.find("button#reset-controls-form").click(() => { | ||
| this._set_update_interval_sec(10); | ||
| this._load(); | ||
| }); | ||
| } | ||
| _form_control(elem_type, id) { | ||
| if (this._form_control_obj === undefined) this._form_control_obj = {}; | ||
| if (!_.has(this._form_control_obj, id)) { | ||
| this._form_control_obj[id] = this.fwk_app_container.find(elem_type + '#' + id); | ||
| } | ||
| return this._form_control_obj[id]; | ||
| } | ||
| _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() { | ||
| if (this._table_obj === undefined) { | ||
| this._table_obj = this.fwk_app_container.find('table#fwk-czar-mysql-queries'); | ||
| } | ||
| return this._table_obj; | ||
| } | ||
| _load() { | ||
| 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/qserv/master/db", | ||
| { timeout_sec: 2, version: Common.RestAPIVersion | ||
| }, | ||
| (data) => { | ||
| if (data.success) { | ||
| this._display(data.status.queries); | ||
| Fwk.setLastUpdate(this._table().children('caption')); | ||
| } else { | ||
| console.log('request failed', this.fwk_app_name, data.error); | ||
| this._table().children('caption').html('<span style="color:maroon">' + data.error + '</span>'); | ||
| } | ||
| this._table().children('caption').removeClass('updating'); | ||
| this._loading = false; | ||
| }, | ||
| (msg) => { | ||
| console.log('request failed', this.fwk_app_name, msg); | ||
| this._table().children('caption').html('<span style="color:maroon">No Response</span>'); | ||
| this._table().children('caption').removeClass('updating'); | ||
| this._loading = false; | ||
| } | ||
| ); | ||
| } | ||
| _display(queries) { | ||
| const queryCopyTitle = "Click to copy the query text to the clipboard."; | ||
| const COL_Id = 0, COL_Command = 4, COL_Time = 5, COL_State = 6, COL_Info = 7; | ||
| let tbody = this._table().children('tbody'); | ||
| if (_.isEmpty(queries.columns)) { | ||
| tbody.html(''); | ||
| return; | ||
| } | ||
| this._id2query = {}; | ||
| let html = ''; | ||
| for (let i in queries.rows) { | ||
| let row = queries.rows[i]; | ||
| if (row[COL_Command] !== 'Query') continue; | ||
| let queryId = row[COL_Id]; | ||
| let query = row[COL_Info]; | ||
| this._id2query[queryId] = query; | ||
| const expanded = (queryId in this._queryId2Expanded) && this._queryId2Expanded[queryId]; | ||
| const queryToggleTitle = "Click to toggle query formatting."; | ||
| const queryStyle = "color:#4d4dff;"; | ||
| html += ` | ||
| <tr id="${queryId}"> | ||
| <th style="text-align:right;"><pre>${queryId}</pre></th> | ||
| <td style="text-align:right;"><pre>${row[COL_Time]}</pre></td> | ||
| <td style="text-align:right;"><pre>${row[COL_State]}</pre></td> | ||
| <td style="text-align:center; padding-top:0; padding-bottom:0"> | ||
| <button class="btn btn-outline-dark btn-sm copy-query" style="height:20px; margin:0px;" title="${queryCopyTitle}"></button> | ||
| </td> | ||
| <td class="query_toggler" title="${queryToggleTitle}"><pre class="query" style="${queryStyle}">` + this._query2text(queryId, expanded) + `<pre></td> | ||
| </tr>`; | ||
| } | ||
| tbody.html(html); | ||
| let that = this; | ||
| let copyQueryToClipboard = function(e) { | ||
| let button = $(e.currentTarget); | ||
| let queryId = button.parent().parent().attr("id"); | ||
| let query = that._id2query[queryId]; | ||
| navigator.clipboard.writeText(query, | ||
| () => {}, | ||
| () => { alert("Failed to write the query to the clipboard. Please copy the text manually: " + query); } | ||
| ); | ||
| }; | ||
| let toggleQueryDisplay = function(e) { | ||
| let td = $(e.currentTarget); | ||
| 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; | ||
| }; | ||
| tbody.find("button.copy-query").click(copyQueryToClipboard); | ||
| tbody.find("td.query_toggler").click(toggleQueryDisplay); | ||
| } | ||
| _query2text(queryId, expanded) { | ||
| return Common.query2text(this._id2query[queryId], expanded); | ||
| } | ||
| } | ||
| return QservCzarMySQLQueries; | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.