Skip to content

Commit 859ed50

Browse files
sh-shamsanRoney ThomasAlia-AlshehaMohammad-LinjawiDawi-Alotaibi
authored and
yingsu00
committed
Fixes: security issues for webapp jquery and bootstrap
Presto web app CVE-related package updates and its side effect fixes. The main change is to update bootstrap to 5 and jQuery to 3.7.1 to resolve the security issues. This cherry-pick resolves all conflicts introduced along with applying the updates to new prestodb components: QueryOverview, QueryPlanView, QueryResults, QueryStageView, QueryViewer, SQLInput, StaticQueryHeader, and SessionProps. And adds a minor change to the proxy object in webpack.config to resolve an issue with yarn serve command not working. Co-authored-by: Roney Thomas <Roney.Thomas2@ibm.com> Co-authored-by: Alia-Alsheha <alia.alsheha@ibm.com> Co-authored-by: Mohammad-Linjawi <mohammad.linjawi@ibm.com> Co-authored-by: Dawi-Alotaibi <dawi.alotaibi@ibm.com> Co-authored-by: a-alosaimi <a.alosaimi@ibm.com> Co-authored-by: Shibil-Rahman-P2 <shibil.rahman.p2@ibm.com>
1 parent 2c5f929 commit 859ed50

File tree

93 files changed

+64463
-23325
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

93 files changed

+64463
-23325
lines changed

‎presto-router/src/main/resources/router_ui/vendor/bootstrap/css/bootstrap.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

+30-30
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export class ClusterHUD extends React.Component {
105105
});
106106
this.resetTimer();
107107
}.bind(this))
108-
.error(function () {
108+
.fail(function () {
109109
this.resetTimer();
110110
}.bind(this));
111111
}
@@ -135,53 +135,53 @@ export class ClusterHUD extends React.Component {
135135
});
136136
}
137137

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

141141
render() {
142142
return (<div className="row">
143-
<div className="col-xs-12">
143+
<div className="col-12">
144144
<div className="row">
145-
<div className="col-xs-4">
145+
<div className="col-4">
146146
<div className="stat-title">
147-
<span className="text" data-toggle="tooltip" data-placement="right" title="Total number of queries currently running">
147+
<span className="text" data-bs-toggle="tooltip" data-placement="right" title="Total number of queries currently running">
148148
Running queries
149149
</span>
150150
</div>
151151
</div>
152-
<div className="col-xs-4">
152+
<div className="col-4">
153153
<div className="stat-title">
154-
<span className="text" data-toggle="tooltip" data-placement="right" title="Total number of active worker nodes">
154+
<span className="text" data-bs-toggle="tooltip" data-placement="right" title="Total number of active worker nodes">
155155
Active workers
156156
</span>
157157
</div>
158158
</div>
159-
<div className="col-xs-4">
159+
<div className="col-4">
160160
<div className="stat-title">
161-
<span className="text" data-toggle="tooltip" data-placement="right" title="Moving average of input rows processed per second">
161+
<span className="text" data-bs-toggle="tooltip" data-placement="right" title="Moving average of input rows processed per second">
162162
Rows/sec
163163
</span>
164164
</div>
165165
</div>
166166
</div>
167167
<div className="row stat-line-end">
168-
<div className="col-xs-4">
168+
<div className="col-4">
169169
<div className="stat stat-large">
170170
<span className="stat-text">
171171
{this.state.runningQueries[this.state.runningQueries.length - 1]}
172172
</span>
173173
<span className="sparkline" id="running-queries-sparkline"><div className="loader">Loading ...</div></span>
174174
</div>
175175
</div>
176-
<div className="col-xs-4">
176+
<div className="col-4">
177177
<div className="stat stat-large">
178178
<span className="stat-text">
179179
{this.state.activeWorkers[this.state.activeWorkers.length - 1]}
180180
</span>
181181
<span className="sparkline" id="active-workers-sparkline"><div className="loader">Loading ...</div></span>
182182
</div>
183183
</div>
184-
<div className="col-xs-4">
184+
<div className="col-4">
185185
<div className="stat stat-large">
186186
<span className="stat-text">
187187
{formatCount(this.state.rowInputRate[this.state.rowInputRate.length - 1])}
@@ -191,46 +191,46 @@ export class ClusterHUD extends React.Component {
191191
</div>
192192
</div>
193193
<div className="row">
194-
<div className="col-xs-4">
194+
<div className="col-4">
195195
<div className="stat-title">
196-
<span className="text" data-toggle="tooltip" data-placement="right" title="Total number of queries currently queued and awaiting execution">
196+
<span className="text" data-bs-toggle="tooltip" data-placement="right" title="Total number of queries currently queued and awaiting execution">
197197
Queued queries
198198
</span>
199199
</div>
200200
</div>
201-
<div className="col-xs-4">
201+
<div className="col-4">
202202
<div className="stat-title">
203-
<span className="text" data-toggle="tooltip" data-placement="right" title="Moving average of total running drivers">
203+
<span className="text" data-bs-toggle="tooltip" data-placement="right" title="Moving average of total running drivers">
204204
Runnable drivers
205205
</span>
206206
</div>
207207
</div>
208-
<div className="col-xs-4">
208+
<div className="col-4">
209209
<div className="stat-title">
210-
<span className="text" data-toggle="tooltip" data-placement="right" title="Moving average of input bytes processed per second">
210+
<span className="text" data-bs-toggle="tooltip" data-placement="right" title="Moving average of input bytes processed per second">
211211
Bytes/sec
212212
</span>
213213
</div>
214214
</div>
215215
</div>
216216
<div className="row stat-line-end">
217-
<div className="col-xs-4">
217+
<div className="col-4">
218218
<div className="stat stat-large">
219219
<span className="stat-text">
220220
{this.state.queuedQueries[this.state.queuedQueries.length - 1]}
221221
</span>
222222
<span className="sparkline" id="queued-queries-sparkline"><div className="loader">Loading ...</div></span>
223223
</div>
224224
</div>
225-
<div className="col-xs-4">
225+
<div className="col-4">
226226
<div className="stat stat-large">
227227
<span className="stat-text">
228228
{formatCount(this.state.runningDrivers[this.state.runningDrivers.length - 1])}
229229
</span>
230230
<span className="sparkline" id="running-drivers-sparkline"><div className="loader">Loading ...</div></span>
231231
</div>
232232
</div>
233-
<div className="col-xs-4">
233+
<div className="col-4">
234234
<div className="stat stat-large">
235235
<span className="stat-text">
236236
{formatDataSizeBytes(this.state.byteInputRate[this.state.byteInputRate.length - 1])}
@@ -240,46 +240,46 @@ export class ClusterHUD extends React.Component {
240240
</div>
241241
</div>
242242
<div className="row">
243-
<div className="col-xs-4">
243+
<div className="col-4">
244244
<div className="stat-title">
245-
<span className="text" data-toggle="tooltip" data-placement="right" title="Total number of queries currently blocked and unable to make progress">
245+
<span className="text" data-bs-toggle="tooltip" data-placement="right" title="Total number of queries currently blocked and unable to make progress">
246246
Blocked Queries
247247
</span>
248248
</div>
249249
</div>
250-
<div className="col-xs-4">
250+
<div className="col-4">
251251
<div className="stat-title">
252-
<span className="text" data-toggle="tooltip" data-placement="right" title="Total amount of memory reserved by all running queries">
252+
<span className="text" data-bs-toggle="tooltip" data-placement="right" title="Total amount of memory reserved by all running queries">
253253
Reserved Memory (B)
254254
</span>
255255
</div>
256256
</div>
257-
<div className="col-xs-4">
257+
<div className="col-4">
258258
<div className="stat-title">
259-
<span className="text" data-toggle="tooltip" data-placement="right" title="Moving average of CPU time utilized per second per worker">
259+
<span className="text" data-bs-toggle="tooltip" data-placement="right" title="Moving average of CPU time utilized per second per worker">
260260
Worker Parallelism
261261
</span>
262262
</div>
263263
</div>
264264
</div>
265265
<div className="row stat-line-end">
266-
<div className="col-xs-4">
266+
<div className="col-4">
267267
<div className="stat stat-large">
268268
<span className="stat-text">
269269
{this.state.blockedQueries[this.state.blockedQueries.length - 1]}
270270
</span>
271271
<span className="sparkline" id="blocked-queries-sparkline"><div className="loader">Loading ...</div></span>
272272
</div>
273273
</div>
274-
<div className="col-xs-4">
274+
<div className="col-4">
275275
<div className="stat stat-large">
276276
<span className="stat-text">
277277
{formatDataSizeBytes(this.state.reservedMemory[this.state.reservedMemory.length - 1])}
278278
</span>
279279
<span className="sparkline" id="reserved-memory-sparkline"><div className="loader">Loading ...</div></span>
280280
</div>
281281
</div>
282-
<div className="col-xs-4">
282+
<div className="col-4">
283283
<div className="stat stat-large">
284284
<span className="stat-text">
285285
{formatCount(this.state.perWorkerCpuTimeRate[this.state.perWorkerCpuTimeRate.length - 1])}

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

+7-7
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-toggle="tooltip" data-placement="bottom" data-container="body" data-html="true"
136+
<div style={{color: "#000"}} data-bs-toggle="tooltip" data-placement="bottom" data-container="body" data-html="true"
137137
title={"<h4>" + this.props.name + "</h4>" + this.props.identifier}>
138138
<strong>{this.props.name}</strong>
139139
<div>
@@ -292,8 +292,8 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
292292
if (this.state.ended) {
293293
// Zoom doesn't deal well with DOM changes
294294
const initialScale = Math.min(width / graphWidth, height / graphHeight);
295-
const zoom = d3.zoom().scaleExtent([initialScale, 1]).on("zoom", function () {
296-
inner.attr("transform", d3.event.transform);
295+
const zoom = d3.zoom().scaleExtent([initialScale, 1]).on("zoom",(event) => {
296+
inner.attr("transform", event.transform);
297297
});
298298

299299
svg.call(zoom);
@@ -310,7 +310,7 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
310310
componentDidUpdate() {
311311
this.updateD3Graph();
312312
//$FlowFixMe
313-
$('[data-toggle="tooltip"]').tooltip()
313+
$('[data-bs-toggle="tooltip"]').tooltip()
314314
}
315315

316316
render(): any {
@@ -323,7 +323,7 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
323323
}
324324
return (
325325
<div className="row error-message">
326-
<div className="col-xs-12"><h4>{label}</h4></div>
326+
<div className="col-12"><h4>{label}</h4></div>
327327
</div>
328328
);
329329
}
@@ -332,7 +332,7 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
332332
if (query && !query.outputStage) {
333333
loadingMessage = (
334334
<div className="row error-message">
335-
<div className="col-xs-12">
335+
<div className="col-12">
336336
<h4>Live plan graph will appear automatically when query starts running.</h4>
337337
<div className="loader">Loading...</div>
338338
</div>
@@ -346,7 +346,7 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
346346
<div>
347347
{queryHeader}
348348
<div className="row">
349-
<div className="col-xs-12">
349+
<div className="col-12">
350350
{loadingMessage}
351351
<div id="live-plan" className="graph-container">
352352
<div className="pull-right">

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

+7-4
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export class PageTitle extends React.Component<Props, State> {
7373
modalShown: false,
7474
});
7575
//$FlowFixMe$ Bootstrap 3 plugin
76-
$('#no-connection-modal').modal('hide');
76+
$('#no-connection-modal').hide();
7777
this.resetTimer();
7878
})
7979
.catch(error => {
@@ -121,7 +121,7 @@ export class PageTitle extends React.Component<Props, State> {
121121

122122
return (
123123
<div>
124-
<nav className="navbar">
124+
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
125125
<div className="container-fluid">
126126
<div className="navbar-header">
127127
<table>
@@ -135,6 +135,9 @@ export class PageTitle extends React.Component<Props, State> {
135135
</tbody>
136136
</table>
137137
</div>
138+
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
139+
<span className="navbar-toggler-icon"></span>
140+
</button>
138141
<div id="navbar" className="navbar-collapse collapse">
139142
<ul className="nav navbar-nav navbar-right">
140143
<li>
@@ -152,7 +155,7 @@ export class PageTitle extends React.Component<Props, State> {
152155
<li>
153156
<span className="navbar-cluster-info">
154157
<span className="uppercase">Uptime</span><br/>
155-
<span data-toggle="tooltip" data-placement="bottom" title="Connection status">
158+
<span data-bs-toggle="tooltip" data-placement="bottom" title="Connection status">
156159
{this.renderStatusLight()}
157160
</span>
158161
&nbsp;
@@ -167,7 +170,7 @@ export class PageTitle extends React.Component<Props, State> {
167170
<div className="modal-dialog modal-sm" role="document">
168171
<div className="modal-content">
169172
<div className="row error-message">
170-
<div className="col-xs-12">
173+
<div className="col-12">
171174
<br />
172175
<h4>Unable to connect to server</h4>
173176
<p>{this.state.errorText ? "Error: " + this.state.errorText : null}</p>

0 commit comments

Comments
 (0)