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 Co-authored-by: Shahad <[email protected]> Signed-off-by: Yihong Wang <[email protected]>
prestodb · Feb 4, 2025 · ee5d950 · ee5d950
1 parent 0e0f0a7
commit ee5d950
Show file tree

Hide file tree

Showing 28 changed files with 757 additions and 760 deletions.
diff --git a/presto-ui/src/components/LivePlan.jsx b/presto-ui/src/components/LivePlan.jsx
@@ -340,11 +340,9 @@ 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}

diff --git a/presto-ui/src/components/QueryHeader.jsx b/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,17 +84,24 @@ export class QueryHeader extends React.Component {
         );
     }
 
-    renderTab(path, name) {
+    isActive(path) {
         const queryId = this.props.query.queryId;
         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">
@@ -106,23 +114,15 @@ export class QueryHeader extends React.Component {
                         </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")}
+                        <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"/>

diff --git a/presto-ui/src/components/QueryOverview.jsx b/presto-ui/src/components/QueryOverview.jsx
@@ -1215,10 +1215,18 @@ export default function QueryOverview({ data, show }: { data: QueryData, show: b
         return;
     }
 
+    useEffect(() => {
+        /* $FlowIgnore[cannot-resolve-name] */
+        $('#query').each((i, block) => {
+            /* $FlowIgnore[cannot-resolve-name] */
+            hljs.highlightBlock(block);
+        });
+    }, [data]);
+
     const elapsedTime = (parseDuration(data.queryStats.elapsedTime) || 0) / 1000.0;
 
     return (
-        <div className={clsx(!show && 'hide')}>
+        <div className={clsx(!show && 'visually-hidden')}>
             <div className="row">
                 <div className="col-6">
                     <h3>Session</h3>

diff --git a/presto-ui/src/components/QueryPlanView.jsx b/presto-ui/src/components/QueryPlanView.jsx
@@ -99,8 +99,8 @@ export default function PlanView({show, data}) {
 
         // 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);
@@ -118,7 +118,7 @@ export default function PlanView({show, data}) {
     }, [data, show]);
 
     return (
-        <div className={clsx(!show && 'hide')}>
+        <div className={clsx(!show && 'visually-hidden')}>
             <div className="row">
             <div className="col-12">
                 <div id="plan-viewer" className="graph-container">

diff --git a/presto-ui/src/components/QuerySplitsView.jsx b/presto-ui/src/components/QuerySplitsView.jsx
@@ -126,7 +126,7 @@ export default function SplitView({ data, show }): void {
     }, [data, show]);
 
     return (
-        <div className={clsx(!show && 'hide')}>
+        <div className={clsx(!show && 'visually-hidden')}>
             <div id="legend" className="row">
                 <div>
                     <div className="red bar"></div>