Skip to content

presto-ui forwardfit #24167

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yingsu00 merged 9 commits into from
Feb 12, 2025
Merged

presto-ui forwardfit #24167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
36ff293
Fixes: security issues for webapp jquery and bootstrap
sh-shamsan May 21, 2024
8923c39
Fix issue with Node details not showing on Stage page
sh-shamsan Jun 27, 2024
bfec191
Update stage navigation to match selected plan event
sh-shamsan Jul 1, 2024
ec7bf90
Check if event ID exists before processing and prevent child events
sh-shamsan Jul 7, 2024
dd19f54
Added data sanitization to queryId and nodeId, along with encodeURICo…
sh-shamsan Jul 14, 2024
7926add
fix(dependencies): switch from dagre-d3 to dagre-d3-es
sh-shamsan Aug 15, 2024
d42c85c
add signature index and event type for type safety
sh-shamsan Jan 19, 2025
a281a52
Update presto console docs
sh-shamsan Jan 19, 2025
e3f5668
Upgrade bootstrap and jquery for single page app
yhwang Jan 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions presto-docs/src/main/sphinx/develop/presto-console.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ Please follow these rules for composing UI components:
- Define components as JavaScript functions instead of classes: Some old components are written in classes and
must be refactored into functions. For new components, please use function components. Check
`Defining a component <https://react.dev/learn/your-first-component#defining-a-component>`_ for detailed information.
- Bootstrap: the current code base is using Bootstrap v3.3.5. You can find the CSS and components it provides
in the `Bootstrap Getting Started <https://bootstrapdocs.com/v3.3.5/docs/getting-started/>`_.
- Bootstrap: the current code base is using Bootstrap v5.3.3. You can find the CSS and components it provides
in the `Bootstrap Getting Started <https://getbootstrap.com/docs/5.3/getting-started/>`_.
- Use `flow <https://flow.org/>`_ as the static type checker: Add ``//@flow`` at the beginning of the ``.jsx`` file
to enable the type checker and use ``yarn run flow`` to run the flow checker.

Expand Down
2 changes: 1 addition & 1 deletion presto-router/src/main/resources/router_ui/vendor/bootstrap/css/bootstrap.min.css
View file
Open in desktop

Large diffs are not rendered by default.

60 changes: 30 additions & 30 deletions presto-ui/src/components/ClusterHUD.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export class ClusterHUD extends React.Component {
});
this.resetTimer();
}.bind(this))
.error(function () {
.fail(function () {
this.resetTimer();
}.bind(this));
}
Expand Down Expand Up @@ -135,53 +135,53 @@ export class ClusterHUD extends React.Component {
});
}

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

render() {
return (<div className="row">
<div className="col-xs-12">
<div className="col-12">
<div className="row">
<div className="col-xs-4">
<div className="col-4">
<div className="stat-title">
<span className="text" data-toggle="tooltip" data-placement="right" title="Total number of queries currently running">
<span className="text" data-bs-toggle="tooltip" data-placement="right" title="Total number of queries currently running">
Running queries
</span>
</div>
</div>
<div className="col-xs-4">
<div className="col-4">
<div className="stat-title">
<span className="text" data-toggle="tooltip" data-placement="right" title="Total number of active worker nodes">
<span className="text" data-bs-toggle="tooltip" data-placement="right" title="Total number of active worker nodes">
Active workers
</span>
</div>
</div>
<div className="col-xs-4">
<div className="col-4">
<div className="stat-title">
<span className="text" data-toggle="tooltip" data-placement="right" title="Moving average of input rows processed per second">
<span className="text" data-bs-toggle="tooltip" data-placement="right" title="Moving average of input rows processed per second">
Rows/sec
</span>
</div>
</div>
</div>
<div className="row stat-line-end">
<div className="col-xs-4">
<div className="col-4">
<div className="stat stat-large">
<span className="stat-text">
{this.state.runningQueries[this.state.runningQueries.length - 1]}
</span>
<span className="sparkline" id="running-queries-sparkline"><div className="loader">Loading ...</div></span>
</div>
</div>
<div className="col-xs-4">
<div className="col-4">
<div className="stat stat-large">
<span className="stat-text">
{this.state.activeWorkers[this.state.activeWorkers.length - 1]}
</span>
<span className="sparkline" id="active-workers-sparkline"><div className="loader">Loading ...</div></span>
</div>
</div>
<div className="col-xs-4">
<div className="col-4">
<div className="stat stat-large">
<span className="stat-text">
{formatCount(this.state.rowInputRate[this.state.rowInputRate.length - 1])}
Expand All @@ -191,46 +191,46 @@ export class ClusterHUD extends React.Component {
</div>
</div>
<div className="row">
<div className="col-xs-4">
<div className="col-4">
<div className="stat-title">
<span className="text" data-toggle="tooltip" data-placement="right" title="Total number of queries currently queued and awaiting execution">
<span className="text" data-bs-toggle="tooltip" data-placement="right" title="Total number of queries currently queued and awaiting execution">
Queued queries
</span>
</div>
</div>
<div className="col-xs-4">
<div className="col-4">
<div className="stat-title">
<span className="text" data-toggle="tooltip" data-placement="right" title="Moving average of total running drivers">
<span className="text" data-bs-toggle="tooltip" data-placement="right" title="Moving average of total running drivers">
Runnable drivers
</span>
</div>
</div>
<div className="col-xs-4">
<div className="col-4">
<div className="stat-title">
<span className="text" data-toggle="tooltip" data-placement="right" title="Moving average of input bytes processed per second">
<span className="text" data-bs-toggle="tooltip" data-placement="right" title="Moving average of input bytes processed per second">
Bytes/sec
</span>
</div>
</div>
</div>
<div className="row stat-line-end">
<div className="col-xs-4">
<div className="col-4">
<div className="stat stat-large">
<span className="stat-text">
{this.state.queuedQueries[this.state.queuedQueries.length - 1]}
</span>
<span className="sparkline" id="queued-queries-sparkline"><div className="loader">Loading ...</div></span>
</div>
</div>
<div className="col-xs-4">
<div className="col-4">
<div className="stat stat-large">
<span className="stat-text">
{formatCount(this.state.runningDrivers[this.state.runningDrivers.length - 1])}
</span>
<span className="sparkline" id="running-drivers-sparkline"><div className="loader">Loading ...</div></span>
</div>
</div>
<div className="col-xs-4">
<div className="col-4">
<div className="stat stat-large">
<span className="stat-text">
{formatDataSizeBytes(this.state.byteInputRate[this.state.byteInputRate.length - 1])}
Expand All @@ -240,46 +240,46 @@ export class ClusterHUD extends React.Component {
</div>
</div>
<div className="row">
<div className="col-xs-4">
<div className="col-4">
<div className="stat-title">
<span className="text" data-toggle="tooltip" data-placement="right" title="Total number of queries currently blocked and unable to make progress">
<span className="text" data-bs-toggle="tooltip" data-placement="right" title="Total number of queries currently blocked and unable to make progress">
Blocked Queries
</span>
</div>
</div>
<div className="col-xs-4">
<div className="col-4">
<div className="stat-title">
<span className="text" data-toggle="tooltip" data-placement="right" title="Total amount of memory reserved by all running queries">
<span className="text" data-bs-toggle="tooltip" data-placement="right" title="Total amount of memory reserved by all running queries">
Reserved Memory (B)
</span>
</div>
</div>
<div className="col-xs-4">
<div className="col-4">
<div className="stat-title">
<span className="text" data-toggle="tooltip" data-placement="right" title="Moving average of CPU time utilized per second per worker">
<span className="text" data-bs-toggle="tooltip" data-placement="right" title="Moving average of CPU time utilized per second per worker">
Worker Parallelism
</span>
</div>
</div>
</div>
<div className="row stat-line-end">
<div className="col-xs-4">
<div className="col-4">
<div className="stat stat-large">
<span className="stat-text">
{this.state.blockedQueries[this.state.blockedQueries.length - 1]}
</span>
<span className="sparkline" id="blocked-queries-sparkline"><div className="loader">Loading ...</div></span>
</div>
</div>
<div className="col-xs-4">
<div className="col-4">
<div className="stat stat-large">
<span className="stat-text">
{formatDataSizeBytes(this.state.reservedMemory[this.state.reservedMemory.length - 1])}
</span>
<span className="sparkline" id="reserved-memory-sparkline"><div className="loader">Loading ...</div></span>
</div>
</div>
<div className="col-xs-4">
<div className="col-4">
<div className="stat stat-large">
<span className="stat-text">
{formatCount(this.state.perWorkerCpuTimeRate[this.state.perWorkerCpuTimeRate.length - 1])}
Expand Down
26 changes: 12 additions & 14 deletions presto-ui/src/components/LivePlan.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@

import React from "react";
import ReactDOMServer from "react-dom/server";
import * as dagreD3 from "dagre-d3";
import * as dagreD3 from "dagre-d3-es";
import * as d3 from "d3";

import {formatRows, getStageStateColor, truncateString} from "../utils";
Expand Down Expand Up @@ -133,7 +133,7 @@ export class PlanNode extends React.Component<PlanNodeProps, PlanNodeState> {

render(): any {
return (
<div style={{color: "#000"}} data-toggle="tooltip" data-placement="bottom" data-container="body" data-html="true"
<div style={{color: "#000"}} data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-container="body" data-bs-html="true"
title={"<h4>" + this.props.name + "</h4>" + this.props.identifier}>
<strong>{this.props.name}</strong>
<div>
Expand Down Expand Up @@ -206,8 +206,8 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
});
}

static handleStageClick(stageCssId: string) {
window.open("stage.html?" + stageCssId, '_blank');
static handleStageClick(stageCssId: any) {
window.open("stage.html?" + stageCssId.target.__data__, '_blank');
}

componentDidMount() {
Expand Down Expand Up @@ -292,8 +292,8 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
if (this.state.ended) {
// Zoom doesn't deal well with DOM changes
const initialScale = Math.min(width / graphWidth, height / graphHeight);
const zoom = d3.zoom().scaleExtent([initialScale, 1]).on("zoom", function () {
inner.attr("transform", d3.event.transform);
const zoom = d3.zoom().scaleExtent([initialScale, 1]).on("zoom",(event) => {
inner.attr("transform", event.transform);
});

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

render(): any {
Expand All @@ -323,7 +323,7 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
}
return (
<div className="row error-message">
<div className="col-xs-12"><h4>{label}</h4></div>
<div className="col-12"><h4>{label}</h4></div>
</div>
);
}
Expand All @@ -332,24 +332,22 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
if (query && !query.outputStage) {
loadingMessage = (
<div className="row error-message">
<div className="col-xs-12">
<div className="col-12">
<h4>Live plan graph will appear automatically when query starts running.</h4>
<div className="loader">Loading...</div>
</div>
</div>
)
}

// TODO: Refactor components to move refreshLoop to parent rather than using this property
const queryHeader = this.props.isEmbedded ? null : <QueryHeader query={query}/>;
return (
<div>
{queryHeader}
{!this.props.isEmbedded && <QueryHeader query={query}/>}
<div className="row">
<div className="col-xs-12">
<div className="col-12">
{loadingMessage}
<div id="live-plan" className="graph-container">
<div className="pull-right">
<div className="float-end">
{this.state.ended ? "Scroll to zoom." : "Zoom disabled while query is running." } Click stage to view additional statistics
</div>
<svg id="plan-canvas"/>
Expand Down
17 changes: 10 additions & 7 deletions presto-ui/src/components/PageTitle.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,8 @@ export class PageTitle extends React.Component<Props, State> {
lastSuccess: Date.now(),
modalShown: false,
});
//$FlowFixMe$ Bootstrap 3 plugin
$('#no-connection-modal').modal('hide');
//$FlowFixMe$ Bootstrap 5 plugin
$('#no-connection-modal').hide();
this.resetTimer();
})
.catch(error => {
Expand All @@ -85,7 +85,7 @@ export class PageTitle extends React.Component<Props, State> {
this.resetTimer();

if (!this.state.modalShown && (error || (Date.now() - this.state.lastSuccess) > 30 * 1000)) {
//$FlowFixMe$ Bootstrap 3 plugin
//$FlowFixMe$ Bootstrap 5 plugin
$('#no-connection-modal').modal();
this.setState({modalShown: true});
}
Expand Down Expand Up @@ -121,7 +121,7 @@ export class PageTitle extends React.Component<Props, State> {

return (
<div>
<nav className="navbar">
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container-fluid">
<div className="navbar-header">
<table>
Expand All @@ -135,8 +135,11 @@ export class PageTitle extends React.Component<Props, State> {
</tbody>
</table>
</div>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div id="navbar" className="navbar-collapse collapse">
<ul className="nav navbar-nav navbar-right">
<ul className="nav navbar-nav navbar-right ms-auto">
<li>
<span className="navbar-cluster-info">
<span className="uppercase">Version</span><br/>
Expand All @@ -152,7 +155,7 @@ export class PageTitle extends React.Component<Props, State> {
<li>
<span className="navbar-cluster-info">
<span className="uppercase">Uptime</span><br/>
<span data-toggle="tooltip" data-placement="bottom" title="Connection status">
<span data-bs-toggle="tooltip" data-bs-placement="bottom" title="Connection status">
{this.renderStatusLight()}
</span>
&nbsp;
Expand All @@ -167,7 +170,7 @@ export class PageTitle extends React.Component<Props, State> {
<div className="modal-dialog modal-sm" role="document">
<div className="modal-content">
<div className="row error-message">
<div className="col-xs-12">
<div className="col-12">
<br />
<h4>Unable to connect to server</h4>
<p>{this.state.errorText ? "Error: " + this.state.errorText : null}</p>
Expand Down
Loading
Loading