Skip to content

Commit

Permalink
Web Dashboard: Improved transaction summary display
Browse files Browse the repository at this point in the history
  • Loading branch information
@iagaponenko
iagaponenko committed Sep 12, 2024
1 parent 300a19a commit bc795c7
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 10 deletions.
36 changes: 31 additions & 5 deletions src/www/qserv/js/IngestStatus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,8 @@ function(CSSLoader,
*/
_display(databaseInfo) {

const contribInspectTitle = 'Click to see contributions made in a scope of the relevant transactions';

let html = '';

const database = this._get_database();
Expand Down Expand Up @@ -445,7 +447,8 @@ function(CSSLoader,
<table class="table table-sm table-hover">
<thead class="thead-light">
<tr>
<th style="border-top:none">&nbsp;</th>
<th class="center-aligned"><i class="bi bi-bar-chart-steps"></i></th>
<th style="border-top:none">Context</th>
<th class="right-aligned" style="border-top:none">Data [GB]</th>
<th class="right-aligned" style="border-top:none">Rows</th>
<th class="right-aligned" style="border-top:none">Rows loaded</th>
Expand All @@ -456,7 +459,8 @@ function(CSSLoader,
</thead>
<thead>
<tr>
<th colspan="4" style="border-bottom:none">Table</th>
<th class="center-aligned">&nbsp;</th>
<th colspan="4" style="border-bottom:none">Tables:</th>
</tr>
</thead>
<tbody>`;
Expand All @@ -466,6 +470,9 @@ function(CSSLoader,
let attentionCssClass4warnings = tableStats[table].num_warnings === 0 ? '' : 'table-danger';
html += `
<tr>
<td class="controls" style="text-align:center; padding-top:0; padding-bottom:0">
<button class="btn btn-outline-info btn-sm contrib_table" id="${baseTableName[table]}" style="height:20px; margin:0px;" title="${contribInspectTitle}"></button>
</td>
<td class="level-2"><pre class="database_table" database="${database}" table="${baseTableName[table]}">${table}</pre></td>
<td class="right-aligned"><pre>${tableStats[table].data.toFixed(2)}</pre></td>
<td class="right-aligned"><pre>${tableStats[table].num_rows}</pre></td>
Expand All @@ -479,7 +486,8 @@ function(CSSLoader,
</tbody>
<thead>
<tr>
<th colspan="4" style="border-bottom:none">Worker</th>
<th class="center-aligned">&nbsp;</th>
<th colspan="4" style="border-bottom:none">Workers:</th>
</tr>
</thead>
<tbody>`;
Expand All @@ -489,6 +497,9 @@ function(CSSLoader,
let attentionCssClass4warnings = workerStats[worker].num_warnings === 0 ? '' : 'table-danger';
html += `
<tr>
<td class="controls" style="text-align:center; padding-top:0; padding-bottom:0">
<button class="btn btn-outline-info btn-sm contrib_worker" id="${worker}" style="height:20px; margin:0px;" title="${contribInspectTitle}"></button>
</td>
<td class="level-2"><pre>${worker}</pre></td>
<td class="right-aligned"><pre>${workerStats[worker].data.toFixed(2)}</pre></td>
<td class="right-aligned"><pre>${workerStats[worker].num_rows}</pre></td>
Expand All @@ -505,14 +516,29 @@ function(CSSLoader,
</div>
</div>
</div>`;
this._database().html(html).find("pre.database_table").click((e) => {
var tbody = this._database().html(html);
tbody.find("pre.database_table").click((e) => {
const elem = $(e.currentTarget);
const database = elem.attr("database");
const table = elem.attr("table");
Fwk.show("Replication", "Schema");
Fwk.current().loadSchema(database, table);
});
}
tbody.find("button.contrib_table").click((e) => {
const worker = undefined;
const table = $(e.currentTarget).attr("id");
const transactionId = undefined;
Fwk.find("Ingest", "Contributions").search(worker, this._get_database(), table, transactionId);
Fwk.show("Ingest", "Contributions");
});
tbody.find("button.contrib_worker").click((e) => {
const worker = $(e.currentTarget).attr("id");
const table = undefined;
const transactionId = undefined;
Fwk.find("Ingest", "Contributions").search(worker, this._get_database(), table, transactionId);
Fwk.show("Ingest", "Contributions");
});
}

static timeAgo(timestamp) {
let ivalSec = Fwk.now().sec - Math.floor(timestamp / 1000);
Expand Down
39 changes: 34 additions & 5 deletions src/www/qserv/js/IngestTransactions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,23 @@ function(CSSLoader,
<select id="trans-database" class="form-control form-control-view">
</select>
</div>
<div class="form-group col-md-1">
<label for="trans-state">Trans.state:</label>
<select id="trans-state" class="form-control form-control-view">
<option value="">&lt;any&gt;</option>
<option value="IS_STARTING">IS_STARTING</option>
<option value="STARTED" selected>STARTED</option>
<option value="!STARTED">!STARTED</option>
<option value="IS_FINISHING">IS_FINISHING</option>
<option value="IS_ABORTING">IS_ABORTING</option>
<option value="FINISHED">FINISHED</option>
<option value="!FINISHED">!FINISHED</option>
<option value="ABORTED">ABORTED</option>
<option value="START_FAILED">START_FAILED</option>
<option value="FINISH_FAILED">FINISH_FAILED</option>
<option value="ABORT_FAILED">ABORT_FAILED</option>
</select>
</div>
<div class="form-group col-md-1">
${Common.html_update_ival('update-interval')}
</div>
Expand All @@ -76,7 +93,8 @@ function(CSSLoader,
<table class="table table-sm table-hover table-bordered" id="fwk-ingest-transactions">
<thead class="thead-light">
<tr>
<th rowspan="2" class="left-aligned">More...</th>
<th rowspan="2" class="center-aligned"><i class="bi bi-info-circle-fill"></i></th>
<th rowspan="2" class="center-aligned"><i class="bi bi-bar-chart-steps"></i></th>
<th rowspan="2" class="right-aligned">Id</th>
<th rowspan="2" class="center-aligned">State</th>
<th colspan="8" class="left-aligned">Timing</th>
Expand Down Expand Up @@ -145,6 +163,8 @@ function(CSSLoader,
);
if (in_collection && current_database) this._set_database(current_database);
}
_get_state() { return this._form_control('select', 'trans-state').val(); }
_set_state(val) { this._form_control('select', 'trans-state').val(val); }
_disable_selectors(disable) {
this.fwk_app_container.find(".form-control-view").prop('disabled', disable);
}
Expand Down Expand Up @@ -203,7 +223,12 @@ function(CSSLoader,
}
Fwk.web_service_GET(
"/ingest/trans",
{database: current_database, contrib: 1, contrib_long: 0, version: Common.RestAPIVersion},
{ database: current_database,
trans_state: this._get_state(),
contrib: 1,
contrib_long: 0,
version: Common.RestAPIVersion
},
(data) => {
if (!data.success) {
this._on_failure(data.error);
Expand All @@ -226,6 +251,8 @@ function(CSSLoader,
this._loading = false;
}
_display(databaseInfo) {
const transInspectTitle = 'Click to inspect transaction events log';
const contribInspectTitle = 'Click to see contributions made in a scope of the transaction';
let html = '';
if (databaseInfo.transactions.length === 0) {
html += `
Expand Down Expand Up @@ -284,9 +311,11 @@ function(CSSLoader,
let attentionCssClass4warnings = numWarnings === 0 ? '' : 'table-danger';
return html + `
<tr>
<th class="controls">
<button type="button" class="activity btn btn-light btn-sm" id="${info.id}" title="Click to inspect transaction events log"><i class="bi bi-info-circle"></i></button>
<button type="button" class="contrib btn btn-light btn-sm" id="${info.id}" title="Click to see contributions made in a scope of the transaction"><i class="bi bi-filetype-csv"></i></button>
<th class="controls" style="text-align:center; padding-top:0; padding-bottom:0">
<button class="btn btn-outline-info btn-sm activity" id="${info.id}" style="height:20px; margin:0px;" title="${transInspectTitle}"></button>
</th>
<th class="controls" style="text-align:center; padding-top:0; padding-bottom:0">
<button class="btn btn-outline-info btn-sm contrib" id="${info.id}" style="height:20px; margin:0px;" title="${contribInspectTitle}"></button>
</th>
<th class="right-aligned"><pre>${info.id}</pre></th>
<td class="center-aligned ${transactionCssClass}"><pre>${info.state}</pre></td>
Expand Down

0 comments on commit bc795c7

Please sign in to comment.