Skip to content

Commit 069298b

Browse files
iagaponenkoiagaponenko
committed
DM-53152: Improved layout of the user table ingest pages
1 parent c16e3d9 commit 069298b

File tree

3 files changed

+70
-42
lines changed

3 files changed

+70
-42
lines changed

‎src/www/qserv/css/IngestUserTableRequest.css‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
#fwk-ingest-contrib-info-controls label {
22
font-weight: bold;
33
}
4+
#fwk-ingest-user-table-request-status {
5+
margin-bottom: 1em;
6+
}
47
#fwk-ingest-user-table-request-status #status {
58
text-align: right;
69
}
710
#fwk-ingest-user-table-request-status #status.updating {
811
background-color: #ffeeba;
912
}
1013
#fwk-ingest-user-table-request-general div.header,
14+
#fwk-ingest-user-table-request-errors div.header,
1115
#fwk-ingest-user-table-request-extended div.header,
1216
#fwk-ingest-user-table-request-schema div.header,
1317
#fwk-ingest-user-table-request-indexes div.header {
@@ -28,13 +32,19 @@
2832
#fwk-ingest-user-table-request-general table #status > pre.status-failed-lr {
2933
color: orange;
3034
}
31-
#fwk-ingest-user-table-request-general div#error {
35+
#fwk-ingest-user-table-request-errors > div#error {
3236
width: 100%;
3337
height: 100%;
34-
padding-left: 0.5em;
35-
padding-right: 0.5em;
38+
padding: 1em;
39+
padding-top: 0;
40+
margin: 0;
3641
border:0;
42+
word-break: break-all;
3743
overflow-y: scroll;
44+
overflow-x: scroll;
45+
color: maroon;
46+
}
47+
#fwk-ingest-user-table-request-errors > div#error > pre {
3848
color: maroon;
3949
}
4050
#fwk-ingest-user-table-request-extended table pre {

‎src/www/qserv/js/IngestUserTableRequest.js‎

Lines changed: 53 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -93,25 +93,13 @@ function(CSSLoader,
9393
<td style="text-align:left"><pre id="delete_time"></pre></td>
9494
</tr>
9595
<tr>
96-
<th style="text-align:left" scope="row">transaction_id</th>
97-
<td style="text-align:left"><pre id="transaction_id"></pre></td>
98-
</tr>
99-
<tr>
100-
<th style="text-align:left" scope="row">num_chunks</th>
101-
<td style="text-align:left"><pre id="num_chunks"></pre></td>
102-
</tr>
103-
<tr>
104-
<th style="text-align:left" scope="row">num_rows</th>
105-
<td style="text-align:left"><pre id="num_rows"></pre></td>
106-
</tr>
107-
<tr>
108-
<th style="text-align:left" scope="row">num_bytes</th>
109-
<td style="text-align:left"><pre id="num_bytes"></pre></td>
96+
<th style="text-align:left" scope="row">&nbsp;</th>
97+
<td style="text-align:left">&nbsp;</td>
11098
</tr>
11199
</tbody>
112100
</table>
113101
</div>
114-
<div class="col col-md-3">
102+
<div class="col col-md-5">
115103
<table class="table table-sm table-hover">
116104
<tbody>
117105
<tr>
@@ -134,49 +122,55 @@ function(CSSLoader,
134122
<th style="text-align:left" scope="row">data_format</th>
135123
<td style="text-align:left"><pre id="data_format"></pre></td>
136124
</tr>
125+
</tbody>
126+
</table>
127+
</div>
128+
<div class="col col-md-3">
129+
<table class="table table-sm table-hover">
130+
<tbody>
137131
<tr>
138-
<th style="text-align:left" scope="row">&nbsp;</th>
139-
<td style="text-align:left">&nbsp;</td>
132+
<th style="text-align:left" scope="row">transaction_id</th>
133+
<td style="text-align:left"><pre id="transaction_id"></pre></td>
140134
</tr>
141135
<tr>
142-
<th style="text-align:left" scope="row">&nbsp;</th>
143-
<td style="text-align:left">&nbsp;</td>
136+
<th style="text-align:left" scope="row">num_chunks</th>
137+
<td style="text-align:left"><pre id="num_chunks"></pre></td>
144138
</tr>
145139
<tr>
146-
<th style="text-align:left" scope="row">&nbsp;</th>
147-
<td style="text-align:left">&nbsp;</td>
140+
<th style="text-align:left" scope="row">num_rows</th>
141+
<td style="text-align:left"><pre id="num_rows"></pre></td>
142+
</tr>
143+
<tr>
144+
<th style="text-align:left" scope="row">num_bytes</th>
145+
<td style="text-align:left"><pre id="num_bytes"></pre></td>
148146
</tr>
149-
</tbody>
150-
</table>
151-
</div>
152-
<div class="col col-md-5">
153-
<table class="table table-sm table-hover">
154-
<tbody>
155147
<tr>
156-
<th style="text-align:left" scope="row">error</th>
157-
<td style="text-align:left"><div id="error"></div></td>
148+
<th style="text-align:left" scope="row">&nbsp;</th>
149+
<td style="text-align:left">&nbsp;</td>
158150
</tr>
159151
</tbody>
160152
</table>
161153
</div>
154+
162155
</div>
163156
<div class="row" id="fwk-ingest-user-table-request-extended">
164157
<div class="col col-md-1 header">
165158
EXTENDED
166159
</div>
167160
<div class="col col-md-3">
168161
<table class="table table-sm table-hover">
169-
<thead class="thead-light">
170-
<tr>
171-
<th>Key</th>
172-
<th>Value</th>
173-
</tr>
174-
</thead>
175162
<tbody>
176163
</tbody>
177164
</table>
178165
</div>
179166
</div>
167+
<div class="row" id="fwk-ingest-user-table-request-errors">
168+
<div class="col col-md-1 header">
169+
ERROR(S)
170+
</div>
171+
<div class="col col-md-11" id="error">
172+
</div>
173+
</div>
180174
<div class="row" id="fwk-ingest-user-table-request-schema">
181175
<div class="col col-md-1 header">
182176
SCHEMA
@@ -252,6 +246,29 @@ function(CSSLoader,
252246
_set_general(attr, val) {
253247
this._general_attr(attr).text(val);
254248
}
249+
_set_errors(val) {
250+
if (this._errors_obj === undefined) {
251+
this._errors_obj = this.fwk_app_container.find('div#fwk-ingest-user-table-request-errors > #error');
252+
}
253+
254+
// If val is a JSON string, pretty print it. Otherwise just show it as is.
255+
// Truncate if too long.
256+
const maxLen = 2048;
257+
try {
258+
val = JSON.stringify(JSON.parse(val), null, 2);
259+
let len = val ? val.length : 0;
260+
if (len > maxLen) {
261+
val = val.substr(0, maxLen) + ' ...';
262+
}
263+
this._errors_obj.html('<pre>' + val + '</pre>');
264+
} catch (e) {
265+
let len = val ? val.length : 0;
266+
if (len > maxLen) {
267+
val = val.substr(0, maxLen) + ' ...';
268+
}
269+
this._errors_obj.text(val ? val.substr(0, maxLen) : '');
270+
}
271+
}
255272
_schema() {
256273
if (this._schema_obj === undefined) {
257274
this._schema_obj = this.fwk_app_container.find('div#fwk-ingest-user-table-request-schema table > tbody');
@@ -270,7 +287,6 @@ function(CSSLoader,
270287
}
271288
return this._extended_obj;
272289
}
273-
274290
_load() {
275291
if (!this._get_request_id()) {
276292
this._status().html('<span style="color:maroon">Request id is not set</span>');
@@ -323,7 +339,7 @@ function(CSSLoader,
323339
this._set_general("table_type", req.table_type);
324340
this._set_general("is_temporary", req.is_temporary);
325341
this._set_general("data_format", req.data_format);
326-
this._set_general("error", req.error);
342+
this._set_errors(req.error);
327343
let html ='';
328344
if (req.schema) {
329345
for (let i in req.schema) {

‎src/www/qserv/js/IngestUserTables.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,8 @@ function(CSSLoader,
109109
<tr>
110110
<th class="center-aligned"><i class="bi bi-info-circle-fill"></i></th>
111111
<th class="center-aligned"><i class="bi bi-bar-chart-steps"></i></th>
112-
<th class="sticky"><elem style="color:red;">&darr;</elem></th>
112+
<th class="sticky right-aligned">Id</th>
113+
<th class="sticky right-aligned"><elem style="color:red;">&darr;</elem></th>
113114
<th class="sticky right-aligned">Started</th>
114115
<th class="sticky right-aligned"><elem style="color:red;">&rarr;</elem></th>
115116
<th class="sticky right-aligned">Finished</th>
@@ -243,7 +244,8 @@ function(CSSLoader,
243244
</th>`;
244245
}
245246
html += `
246-
<th><pre>${beginDateStr}</pre></th>
247+
<th class="right-aligned"><pre>${req.id}</pre></th>
248+
<th class="right-aligned"><pre>${beginDateStr}</pre></th>
247249
<td class="right-aligned"><pre>${beginTimeStr}</pre></td>
248250
<th class="right-aligned"><pre>${endDeltaStr}</pre></th>
249251
<td class="right-aligned"><pre>${endTimeStr}</pre></td>

0 commit comments

Comments
 (0)