Skip to content

Commit b835409

Browse files
yhwangsh-shamsanunidevel
authored and
yingsu00
committed
Upgrade bootstrap and jquery for single page app
this commit upgrades bootstrap and jquery in the single page application along with bug fixes in the main components like stage view page - add bootstrap js/css and highligh.js properly to the single-page application's html. - use proper css to hide/show component - update nav bar css to new boostrap - update the modal dialog to align with the new bootstrap usage. - update d3 imports in d3utils - fix flow error - fix no key warning in the <ul> list - regenerate yarn.lock to fix flow error - fix alignments and dropdown Co-authored-by: Shahad <shahadshamsan@gmail.com> Co-authored-by: unidevel <unidevel@hotmail.com> Signed-off-by: Yihong Wang <yh.wang@ibm.com>
1 parent e2571ab commit b835409

33 files changed

+824
-830
lines changed

‎presto-ui/src/components/ClusterHUD.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ export class ClusterHUD extends React.Component {
135135
});
136136
}
137137

138-
$('[data-bs-toggle="tooltip"]').tooltip();
138+
$('[data-bs-toggle="tooltip"]')?.tooltip();
139139
}
140140

141141
render() {

‎presto-ui/src/components/LivePlan.jsx

+4-6
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ export class PlanNode extends React.Component<PlanNodeProps, PlanNodeState> {
133133

134134
render(): any {
135135
return (
136-
<div style={{color: "#000"}} data-bs-toggle="tooltip" data-placement="bottom" data-container="body" data-html="true"
136+
<div style={{color: "#000"}} data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-container="body" data-bs-html="true"
137137
title={"<h4>" + this.props.name + "</h4>" + this.props.identifier}>
138138
<strong>{this.props.name}</strong>
139139
<div>
@@ -310,7 +310,7 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
310310
componentDidUpdate() {
311311
this.updateD3Graph();
312312
//$FlowFixMe
313-
$('[data-bs-toggle="tooltip"]').tooltip()
313+
$('[data-bs-toggle="tooltip"]')?.tooltip()
314314
}
315315

316316
render(): any {
@@ -340,16 +340,14 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
340340
)
341341
}
342342

343-
// TODO: Refactor components to move refreshLoop to parent rather than using this property
344-
const queryHeader = this.props.isEmbedded ? null : <QueryHeader query={query}/>;
345343
return (
346344
<div>
347-
{queryHeader}
345+
{!this.props.isEmbedded && <QueryHeader query={query}/>}
348346
<div className="row">
349347
<div className="col-12">
350348
{loadingMessage}
351349
<div id="live-plan" className="graph-container">
352-
<div className="pull-right">
350+
<div className="float-end">
353351
{this.state.ended ? "Scroll to zoom." : "Zoom disabled while query is running." } Click stage to view additional statistics
354352
</div>
355353
<svg id="plan-canvas"/>

‎presto-ui/src/components/PageTitle.jsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export class PageTitle extends React.Component<Props, State> {
7272
lastSuccess: Date.now(),
7373
modalShown: false,
7474
});
75-
//$FlowFixMe$ Bootstrap 3 plugin
75+
//$FlowFixMe$ Bootstrap 5 plugin
7676
$('#no-connection-modal').hide();
7777
this.resetTimer();
7878
})
@@ -85,7 +85,7 @@ export class PageTitle extends React.Component<Props, State> {
8585
this.resetTimer();
8686

8787
if (!this.state.modalShown && (error || (Date.now() - this.state.lastSuccess) > 30 * 1000)) {
88-
//$FlowFixMe$ Bootstrap 3 plugin
88+
//$FlowFixMe$ Bootstrap 5 plugin
8989
$('#no-connection-modal').modal();
9090
this.setState({modalShown: true});
9191
}
@@ -139,7 +139,7 @@ export class PageTitle extends React.Component<Props, State> {
139139
<span className="navbar-toggler-icon"></span>
140140
</button>
141141
<div id="navbar" className="navbar-collapse collapse">
142-
<ul className="nav navbar-nav navbar-right">
142+
<ul className="nav navbar-nav navbar-right ms-auto">
143143
<li>
144144
<span className="navbar-cluster-info">
145145
<span className="uppercase">Version</span><br/>
@@ -155,7 +155,7 @@ export class PageTitle extends React.Component<Props, State> {
155155
<li>
156156
<span className="navbar-cluster-info">
157157
<span className="uppercase">Uptime</span><br/>
158-
<span data-bs-toggle="tooltip" data-placement="bottom" title="Connection status">
158+
<span data-bs-toggle="tooltip" data-bs-placement="bottom" title="Connection status">
159159
{this.renderStatusLight()}
160160
</span>
161161
&nbsp;

‎presto-ui/src/components/QueryDetail.jsx

+18-18
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ function TaskList({tasks}) {
157157
},
158158
{
159159
name: (<span className="bi bi-pause-circle-fill" style={GLYPHICON_HIGHLIGHT}
160-
data-bs-toggle="tooltip" data-placement="top"
160+
data-bs-toggle="tooltip" data-bs-placement="top"
161161
title="Pending splits"/>),
162162
selector: row => row.stats.queuedDrivers,
163163
sortable: true,
@@ -166,7 +166,7 @@ function TaskList({tasks}) {
166166
},
167167
{
168168
name: (<span className="bi bi-play-circle-fill" style={GLYPHICON_HIGHLIGHT}
169-
data-bs-toggle="tooltip" data-placement="top"
169+
data-bs-toggle="tooltip" data-bs-placement="top"
170170
title="Running splits"/>),
171171
selector: row => row.stats.runningDrivers,
172172
sortable: true,
@@ -176,7 +176,7 @@ function TaskList({tasks}) {
176176
{
177177
name: (<span className="bi bi-bookmark-check-fill"
178178
style={GLYPHICON_HIGHLIGHT} data-bs-toggle="tooltip"
179-
data-placement="top"
179+
data-bs-placement="top"
180180
title="Blocked splits"/>),
181181
selector: row => row.stats.blockedDrivers,
182182
sortable: true,
@@ -185,7 +185,7 @@ function TaskList({tasks}) {
185185
},
186186
{
187187
name: (<span className="bi bi-check-lg" style={GLYPHICON_HIGHLIGHT}
188-
data-bs-toggle="tooltip" data-placement="top"
188+
data-bs-toggle="tooltip" data-bs-placement="top"
189189
title="Completed splits"/>),
190190
selector: row => row.stats.completedDrivers,
191191
sortable: true,
@@ -321,7 +321,7 @@ class RuntimeStatsList extends React.Component {
321321
<th className="info-text">Max</th>
322322
<th className="expand-charts-container">
323323
<a onClick={this.toggleExpanded.bind(this)} className="expand-stats-button">
324-
<span className={"bi " + this.getExpandedIcon()} style={GLYPHICON_HIGHLIGHT} data-bs-toggle="tooltip" data-placement="top" title="Show metrics" />
324+
<span className={"bi " + this.getExpandedIcon()} style={GLYPHICON_HIGHLIGHT} data-bs-toggle="tooltip" data-bs-placement="top" title="Show metrics" />
325325
</a>
326326
</th>
327327
</tr>
@@ -457,7 +457,7 @@ class StageSummary extends React.Component {
457457

458458
renderTaskFilterListItem(taskFilter) {
459459
return (
460-
<li><a href="#" className={this.state.taskFilter === taskFilter ? "selected" : ""}
460+
<li><a href="#" className={`dropdown-item text-dark ${this.state.taskFilter === taskFilter ? "selected" : ""}`}
461461
onClick={this.handleTaskFilterClick.bind(this, taskFilter)}>{taskFilter.text}</a></li>
462462
);
463463
}
@@ -479,13 +479,13 @@ class StageSummary extends React.Component {
479479
<tbody>
480480
<tr>
481481
<td>
482-
<div className="input-group-btn text-right">
483-
<button type="button" className="btn btn-default dropdown-toggle pull-right text-right"
482+
<div className="btn-group text-right">
483+
<button type="button" className="btn dropdown-toggle bg-white text-dark float-end text-right rounded-0"
484484
data-bs-toggle="dropdown" aria-haspopup="true"
485485
aria-expanded="false">
486486
Show: {this.state.taskFilter.text} <span className="caret"/>
487487
</button>
488-
<ul className="dropdown-menu">
488+
<ul className="dropdown-menu bg-white text-dark rounded-0">
489489
{this.renderTaskFilterListItem(TASK_FILTER.ALL)}
490490
{this.renderTaskFilterListItem(TASK_FILTER.PLANNED)}
491491
{this.renderTaskFilterListItem(TASK_FILTER.RUNNING)}
@@ -702,7 +702,7 @@ class StageSummary extends React.Component {
702702
</td>
703703
<td className="expand-charts-container">
704704
<a onClick={this.toggleExpanded.bind(this)} className="expand-charts-button">
705-
<span className={"bi " + this.getExpandedIcon()} style={GLYPHICON_HIGHLIGHT} data-bs-toggle="tooltip" data-placement="top" title="More"/>
705+
<span className={"bi " + this.getExpandedIcon()} style={GLYPHICON_HIGHLIGHT} data-bs-toggle="tooltip" data-bs-placement="top" title="More"/>
706706
</a>
707707
</td>
708708
</tr>
@@ -1043,7 +1043,7 @@ export class QueryDetail extends React.Component {
10431043
});
10441044
}
10451045

1046-
$('[data-bs-toggle="tooltip"]').tooltip();
1046+
$('[data-bs-toggle="tooltip"]')?.tooltip();
10471047
new Clipboard('.copy-button');
10481048
}
10491049

@@ -1089,7 +1089,7 @@ export class QueryDetail extends React.Component {
10891089
<div className="col-12">
10901090
<h3>
10911091
Prepared Query
1092-
<a className="btn copy-button" data-clipboard-target="#prepared-query-text" data-bs-toggle="tooltip" data-placement="right" title="Copy to clipboard">
1092+
<a className="btn copy-button" data-clipboard-target="#prepared-query-text" data-bs-toggle="tooltip" data-bs-placement="right" title="Copy to clipboard">
10931093
<span className="bi bi-copy" aria-hidden="true" alt="Copy to clipboard"/>
10941094
</a>
10951095
</h3>
@@ -1224,7 +1224,7 @@ export class QueryDetail extends React.Component {
12241224
<tr>
12251225
<td className="info-title">
12261226
Stack Trace
1227-
<a className="btn copy-button" data-clipboard-target="#stack-trace" data-bs-toggle="tooltip" data-placement="right" title="Copy to clipboard">
1227+
<a className="btn copy-button" data-clipboard-target="#stack-trace" data-bs-toggle="tooltip" data-bs-placement="right" title="Copy to clipboard">
12281228
<span className="bi bi-copy" aria-hidden="true" alt="Copy to clipboard"/>
12291229
</a>
12301230
</td>
@@ -1263,7 +1263,7 @@ export class QueryDetail extends React.Component {
12631263
return (
12641264
<div>
12651265
<QueryHeader query={query}/>
1266-
<div className="row">
1266+
<div className="row mt-3">
12671267
<div className="col-6">
12681268
<h3>Session</h3>
12691269
<hr className="h3-hr"/>
@@ -1276,7 +1276,7 @@ export class QueryDetail extends React.Component {
12761276
<td className="info-text wrap-text">
12771277
<span id="query-user">{query.session.user}</span>
12781278
&nbsp;&nbsp;
1279-
<a href="#" className="copy-button" data-clipboard-target="#query-user" data-bs-toggle="tooltip" data-placement="right" title="Copy to clipboard">
1279+
<a href="#" className="copy-button" data-clipboard-target="#query-user" data-bs-toggle="tooltip" data-bs-placement="right" title="Copy to clipboard">
12801280
<span className="bi bi-copy" aria-hidden="true" alt="Copy to clipboard"/>
12811281
</a>
12821282
</td>
@@ -1495,7 +1495,7 @@ export class QueryDetail extends React.Component {
14951495
</tr>
14961496
<tr>
14971497
<td className="info-title">
1498-
<span className="text" data-bs-toggle="tooltip" data-placement="right" title="The total number of rows shuffled across all query stages">
1498+
<span className="text" data-bs-toggle="tooltip" data-bs-placement="right" title="The total number of rows shuffled across all query stages">
14991499
Shuffled Rows
15001500
</span>
15011501
</td>
@@ -1505,7 +1505,7 @@ export class QueryDetail extends React.Component {
15051505
</tr>
15061506
<tr>
15071507
<td className="info-title">
1508-
<span className="text" data-bs-toggle="tooltip" data-placement="right" title="The total number of bytes shuffled across all query stages">
1508+
<span className="text" data-bs-toggle="tooltip" data-bs-placement="right" title="The total number of bytes shuffled across all query stages">
15091509
Shuffled Data
15101510
</span>
15111511
</td>
@@ -1699,7 +1699,7 @@ export class QueryDetail extends React.Component {
16991699
<div className="col-12">
17001700
<h3>
17011701
Query
1702-
<a className="btn copy-button" data-clipboard-target="#query-text" data-bs-toggle="tooltip" data-placement="right" title="Copy to clipboard">
1702+
<a className="btn copy-button" data-clipboard-target="#query-text" data-bs-toggle="tooltip" data-bs-placement="right" title="Copy to clipboard">
17031703
<span className="bi bi-copy" aria-hidden="true" alt="Copy to clipboard"/>
17041704
</a>
17051705
</h3>

‎presto-ui/src/components/QueryHeader.jsx

+22-23
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
*/
1414

1515
import React from "react";
16+
import { clsx } from 'clsx';
1617

1718
import {getHumanReadableState, getProgressBarPercentage, getProgressBarTitle, getQueryStateColor, isQueryEnded} from "../utils";
1819

@@ -83,46 +84,44 @@ export class QueryHeader extends React.Component {
8384
);
8485
}
8586

86-
renderTab(path, name) {
87-
const queryId = this.props.query.queryId;
87+
isActive(path) {
8888
if (window.location.pathname.includes(path)) {
89-
return <a href={path + '?' + queryId} className="btn btn-info navbar-btn nav-disabled">{name}</a>;
89+
return true;
9090
}
9191

92-
return <a href={path + '?' + queryId} className="btn btn-info navbar-btn">{name}</a>;
92+
return false;
9393
}
9494

9595
render() {
9696
const query = this.props.query;
97+
const queryId = this.props.query.queryId;
98+
const tabs = [
99+
{path: 'query.html', label: 'Overview'},
100+
{path: 'plan.html', label: 'Live Plan'},
101+
{path: 'stage.html', label: 'Stage Performance'},
102+
{path: 'timeline.html', label: 'Splits'},
103+
];
97104
return (
98105
<div>
99-
<div className="row">
106+
<div className="row mt-4">
100107
<div className="col-6">
101108
<h3 className="query-id">
102109
<span id="query-id">{query.queryId}</span>
103-
<a className="btn copy-button" data-clipboard-target="#query-id" data-bs-toggle="tooltip" data-placement="right" title="Copy to clipboard">
110+
<a className="btn copy-button" data-clipboard-target="#query-id" data-bs-toggle="tooltip" data-bs-placement="right" title="Copy to clipboard">
104111
<span className="bi bi-copy" aria-hidden="true" alt="Copy to clipboard"/>
105112
</a>
106113
</h3>
107114
</div>
108-
<div className="col-6">
109-
<table className="header-inline-links">
110-
<tbody>
111-
<tr>
112-
<td>
113-
{this.renderTab("query.html", "Overview")}
114-
&nbsp;
115-
{this.renderTab("plan.html", "Live Plan")}
116-
&nbsp;
117-
{this.renderTab("stage.html", "Stage Performance")}
118-
&nbsp;
119-
{this.renderTab("timeline.html", "Splits")}
115+
<div className="col-6 d-flex justify-content-end">
116+
<nav className="nav nav-tabs">
117+
{tabs.map((page, _) => (
118+
<>
119+
<a className={clsx('nav-link', 'navbar-btn', this.isActive(page.path) && 'active')} href={page.path + '?' + queryId} >{page.label}</a>
120120
&nbsp;
121-
<a href={"/v1/query/" + query.queryId + "?pretty"} className="btn btn-info navbar-btn rounded-0" target="_blank">JSON</a>
122-
</td>
123-
</tr>
124-
</tbody>
125-
</table>
121+
</>
122+
))}
123+
<a className="nav-link navbar-btn" href={"/v1/query/" + query.queryId + "?pretty"} target="_blank">JSON</a>
124+
</nav>
126125
</div>
127126
</div>
128127
<hr className="h2-hr"/>

0 commit comments

Comments
 (0)