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>

presto-ui/src/components/ClusterHUD.jsx

@@ -135,7 +135,7 @@ export class ClusterHUD extends React.Component {
             });
         }
 
-        $('[data-bs-toggle="tooltip"]').tooltip();
+        $('[data-bs-toggle="tooltip"]')?.tooltip();
     }
 
     render() {

presto-ui/src/components/LivePlan.jsx

@@ -133,7 +133,7 @@ export class PlanNode extends React.Component<PlanNodeProps, PlanNodeState> {
 
     render(): any {
         return (
-            <div style={{color: "#000"}} data-bs-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>
@@ -310,7 +310,7 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
     componentDidUpdate() {
         this.updateD3Graph();
         //$FlowFixMe
-        $('[data-bs-toggle="tooltip"]').tooltip()
+        $('[data-bs-toggle="tooltip"]')?.tooltip()
     }
 
     render(): any {
@@ -340,16 +340,14 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
             )
         }
 
-        // 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-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"/>

presto-ui/src/components/PageTitle.jsx

@@ -72,7 +72,7 @@ export class PageTitle extends React.Component<Props, State> {
                     lastSuccess: Date.now(),
                     modalShown: false,
                 });
-                //$FlowFixMe$ Bootstrap 3 plugin
+                //$FlowFixMe$ Bootstrap 5 plugin
                 $('#no-connection-modal').hide();
                 this.resetTimer();
             })
@@ -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});
                 }
@@ -139,7 +139,7 @@ export class PageTitle extends React.Component<Props, State> {
                             <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/>
@@ -155,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-bs-toggle="tooltip" data-placement="bottom" title="Connection status">
+                                        <span data-bs-toggle="tooltip" data-bs-placement="bottom" title="Connection status">
                                         {this.renderStatusLight()}
                                          </span>
                                         &nbsp;

presto-ui/src/components/QueryDetail.jsx

@@ -157,7 +157,7 @@ function TaskList({tasks}) {
         },
         {
             name: (<span className="bi bi-pause-circle-fill" style={GLYPHICON_HIGHLIGHT}
-                data-bs-toggle="tooltip" data-placement="top"
+                data-bs-toggle="tooltip" data-bs-placement="top"
                 title="Pending splits"/>),
             selector: row => row.stats.queuedDrivers,
             sortable: true,
@@ -166,7 +166,7 @@ function TaskList({tasks}) {
         },
         {
             name: (<span className="bi bi-play-circle-fill" style={GLYPHICON_HIGHLIGHT}
-                data-bs-toggle="tooltip" data-placement="top"
+                data-bs-toggle="tooltip" data-bs-placement="top"
                 title="Running splits"/>),
             selector: row => row.stats.runningDrivers,
             sortable: true,
@@ -176,7 +176,7 @@ function TaskList({tasks}) {
         {
             name: (<span className="bi bi-bookmark-check-fill"
                 style={GLYPHICON_HIGHLIGHT} data-bs-toggle="tooltip"
-                data-placement="top"
+                data-bs-placement="top"
                 title="Blocked splits"/>),
             selector: row => row.stats.blockedDrivers,
             sortable: true,
@@ -185,7 +185,7 @@ function TaskList({tasks}) {
         },
         {
             name: (<span className="bi bi-check-lg" style={GLYPHICON_HIGHLIGHT}
-                data-bs-toggle="tooltip" data-placement="top"
+                data-bs-toggle="tooltip" data-bs-placement="top"
                 title="Completed splits"/>),
             selector: row => row.stats.completedDrivers,
             sortable: true,
@@ -321,7 +321,7 @@ class RuntimeStatsList extends React.Component {
                      <th className="info-text">Max</th>
                      <th className="expand-charts-container">
                          <a onClick={this.toggleExpanded.bind(this)} className="expand-stats-button">
-                             <span className={"bi " + this.getExpandedIcon()} style={GLYPHICON_HIGHLIGHT} data-bs-toggle="tooltip" data-placement="top" title="Show metrics" />
+                             <span className={"bi " + this.getExpandedIcon()} style={GLYPHICON_HIGHLIGHT} data-bs-toggle="tooltip" data-bs-placement="top" title="Show metrics" />
                          </a>
                      </th>
                  </tr>
@@ -457,7 +457,7 @@ class StageSummary extends React.Component {
 
     renderTaskFilterListItem(taskFilter) {
         return (
-            <li><a href="#" className={this.state.taskFilter === taskFilter ? "selected" : ""}
+            <li><a href="#" className={`dropdown-item text-dark ${this.state.taskFilter === taskFilter ? "selected" : ""}`}
                    onClick={this.handleTaskFilterClick.bind(this, taskFilter)}>{taskFilter.text}</a></li>
         );
     }
@@ -479,13 +479,13 @@ class StageSummary extends React.Component {
                     <tbody>
                     <tr>
                         <td>
-                            <div className="input-group-btn text-right">
-                                <button type="button" className="btn btn-default dropdown-toggle pull-right text-right"
+                            <div className="btn-group text-right">
+                                <button type="button" className="btn dropdown-toggle bg-white text-dark float-end text-right rounded-0"
                                         data-bs-toggle="dropdown" aria-haspopup="true"
                                         aria-expanded="false">
                                     Show: {this.state.taskFilter.text} <span className="caret"/>
                                 </button>
-                                <ul className="dropdown-menu">
+                                <ul className="dropdown-menu bg-white text-dark rounded-0">
                                     {this.renderTaskFilterListItem(TASK_FILTER.ALL)}
                                     {this.renderTaskFilterListItem(TASK_FILTER.PLANNED)}
                                     {this.renderTaskFilterListItem(TASK_FILTER.RUNNING)}
@@ -702,7 +702,7 @@ class StageSummary extends React.Component {
                             </td>
                             <td className="expand-charts-container">
                                 <a onClick={this.toggleExpanded.bind(this)} className="expand-charts-button">
-                                    <span className={"bi " + this.getExpandedIcon()} style={GLYPHICON_HIGHLIGHT} data-bs-toggle="tooltip" data-placement="top" title="More"/>
+                                    <span className={"bi " + this.getExpandedIcon()} style={GLYPHICON_HIGHLIGHT} data-bs-toggle="tooltip" data-bs-placement="top" title="More"/>
                                 </a>
                             </td>
                         </tr>
@@ -1043,7 +1043,7 @@ export class QueryDetail extends React.Component {
             });
         }
 
-        $('[data-bs-toggle="tooltip"]').tooltip();
+        $('[data-bs-toggle="tooltip"]')?.tooltip();
         new Clipboard('.copy-button');
     }
 
@@ -1089,7 +1089,7 @@ export class QueryDetail extends React.Component {
             <div className="col-12">
                 <h3>
                     Prepared Query
-                        <a className="btn copy-button" data-clipboard-target="#prepared-query-text" data-bs-toggle="tooltip" data-placement="right" title="Copy to clipboard">
+                        <a className="btn copy-button" data-clipboard-target="#prepared-query-text" data-bs-toggle="tooltip" data-bs-placement="right" title="Copy to clipboard">
                             <span className="bi bi-copy" aria-hidden="true" alt="Copy to clipboard"/>
                         </a>
                 </h3>
@@ -1224,7 +1224,7 @@ export class QueryDetail extends React.Component {
                             <tr>
                                 <td className="info-title">
                                     Stack Trace
-                                    <a className="btn copy-button" data-clipboard-target="#stack-trace" data-bs-toggle="tooltip" data-placement="right" title="Copy to clipboard">
+                                    <a className="btn copy-button" data-clipboard-target="#stack-trace" data-bs-toggle="tooltip" data-bs-placement="right" title="Copy to clipboard">
                                         <span className="bi bi-copy" aria-hidden="true" alt="Copy to clipboard"/>
                                     </a>
                                 </td>
@@ -1263,7 +1263,7 @@ export class QueryDetail extends React.Component {
         return (
             <div>
                 <QueryHeader query={query}/>
-                <div className="row">
+                <div className="row mt-3">
                     <div className="col-6">
                         <h3>Session</h3>
                         <hr className="h3-hr"/>
@@ -1276,7 +1276,7 @@ export class QueryDetail extends React.Component {
                                 <td className="info-text wrap-text">
                                     <span id="query-user">{query.session.user}</span>
                                     &nbsp;&nbsp;
-                                    <a href="#" className="copy-button" data-clipboard-target="#query-user" data-bs-toggle="tooltip" data-placement="right" title="Copy to clipboard">
+                                    <a href="#" className="copy-button" data-clipboard-target="#query-user" data-bs-toggle="tooltip" data-bs-placement="right" title="Copy to clipboard">
                                         <span className="bi bi-copy" aria-hidden="true" alt="Copy to clipboard"/>
                                     </a>
                                 </td>
@@ -1495,7 +1495,7 @@ export class QueryDetail extends React.Component {
                                     </tr>
                                    <tr>
                                         <td className="info-title">
-                                            <span className="text" data-bs-toggle="tooltip" data-placement="right" title="The total number of rows shuffled across all query stages">
+                                            <span className="text" data-bs-toggle="tooltip" data-bs-placement="right" title="The total number of rows shuffled across all query stages">
                                                 Shuffled Rows
                                             </span>
                                         </td>
@@ -1505,7 +1505,7 @@ export class QueryDetail extends React.Component {
                                     </tr>
                                     <tr>
                                         <td className="info-title">
-                                            <span className="text" data-bs-toggle="tooltip" data-placement="right" title="The total number of bytes shuffled across all query stages">
+                                            <span className="text" data-bs-toggle="tooltip" data-bs-placement="right" title="The total number of bytes shuffled across all query stages">
                                                 Shuffled Data
                                             </span>
                                         </td>
@@ -1699,7 +1699,7 @@ export class QueryDetail extends React.Component {
                     <div className="col-12">
                         <h3>
                             Query
-                            <a className="btn copy-button" data-clipboard-target="#query-text" data-bs-toggle="tooltip" data-placement="right" title="Copy to clipboard">
+                            <a className="btn copy-button" data-clipboard-target="#query-text" data-bs-toggle="tooltip" data-bs-placement="right" title="Copy to clipboard">
                                 <span className="bi bi-copy" aria-hidden="true" alt="Copy to clipboard"/>
                             </a>
                         </h3>

presto-ui/src/components/QueryHeader.jsx

@@ -13,6 +13,7 @@
  */
 
 import React from "react";
+import { clsx } from 'clsx';
 
 import {getHumanReadableState, getProgressBarPercentage, getProgressBarTitle, getQueryStateColor, isQueryEnded} from "../utils";
 
@@ -83,46 +84,44 @@ export class QueryHeader extends React.Component {
         );
     }
 
-    renderTab(path, name) {
-        const queryId = this.props.query.queryId;
+    isActive(path) {
         if (window.location.pathname.includes(path)) {
-            return  <a href={path + '?' + queryId} className="btn btn-info navbar-btn nav-disabled">{name}</a>;
+            return  true;
         }
 
-        return <a href={path + '?' + queryId} className="btn btn-info navbar-btn">{name}</a>;
+        return false;
     }
 
     render() {
         const query = this.props.query;
+        const queryId = this.props.query.queryId;
+        const tabs = [
+            {path: 'query.html', label: 'Overview'},
+            {path: 'plan.html', label: 'Live Plan'},
+            {path: 'stage.html', label: 'Stage Performance'},
+            {path: 'timeline.html', label: 'Splits'},
+        ];
         return (
             <div>
-                <div className="row">
+                <div className="row mt-4">
                     <div className="col-6">
                         <h3 className="query-id">
                             <span id="query-id">{query.queryId}</span>
-                            <a className="btn copy-button" data-clipboard-target="#query-id" data-bs-toggle="tooltip" data-placement="right" title="Copy to clipboard">
+                            <a className="btn copy-button" data-clipboard-target="#query-id" data-bs-toggle="tooltip" data-bs-placement="right" title="Copy to clipboard">
                                 <span className="bi bi-copy" aria-hidden="true" alt="Copy to clipboard"/>
                             </a>
                         </h3>
                     </div>
-                    <div className="col-6">
-                        <table className="header-inline-links">
-                            <tbody>
-                            <tr>
-                                <td>
-                                    {this.renderTab("query.html", "Overview")}
-                                    &nbsp;
-                                    {this.renderTab("plan.html", "Live Plan")}
-                                    &nbsp;
-                                    {this.renderTab("stage.html", "Stage Performance")}
-                                    &nbsp;
-                                    {this.renderTab("timeline.html", "Splits")}
+                    <div className="col-6 d-flex justify-content-end">
+                        <nav className="nav nav-tabs">
+                            {tabs.map((page, _) => (
+                                <>
+                                    <a className={clsx('nav-link', 'navbar-btn', this.isActive(page.path) && 'active')} href={page.path + '?' + queryId} >{page.label}</a>
                                     &nbsp;
-                                    <a href={"/v1/query/" + query.queryId + "?pretty"} className="btn btn-info navbar-btn rounded-0" target="_blank">JSON</a>
-                                </td>
-                            </tr>
-                            </tbody>
-                        </table>
+                                </>
+                            ))}
+                            <a className="nav-link navbar-btn" href={"/v1/query/" + query.queryId + "?pretty"} target="_blank">JSON</a>
+                        </nav>
                     </div>
                 </div>
                 <hr className="h2-hr"/>