Fix dropdown style and diagram text alignment

unidevel · yhwang · commit 9c4b6838a6ed · 2025-02-18T10:22:24.000-08:00
diff --git a/presto-ui/src/components/LivePlan.jsx b/presto-ui/src/components/LivePlan.jsx
@@ -219,28 +219,28 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
         const stageRootNodeId = "stage-" + stage.id + "-root";
         const color = getStageStateColor(stage);
 
-        graph.setNode(clusterId, {style: 'fill: ' + color, labelStyle: 'fill: #fff'});
+        graph.setNode(clusterId, {style: 'fill: ' + color, labelStyle: 'fill: #fff', class: 'text-center'});
 
         // this is a non-standard use of ReactDOMServer, but it's the cleanest way to unify DagreD3 with React
         const html = ReactDOMServer.renderToString(<StageStatistics key={stage.id} stage={stage}/>);
 
-        graph.setNode(stageRootNodeId, {class: "stage-stats", label: html, labelType: "html"});
+        graph.setNode(stageRootNodeId, {class: "stage-stats text-center", label: html, labelType: "html"});
         graph.setParent(stageRootNodeId, clusterId);
         graph.setEdge("node-" + stage.root, stageRootNodeId, {style: "visibility: hidden"});
 
         stage.nodes.forEach(node => {
             const nodeId = "node-" + node.id;
             const nodeHtml = ReactDOMServer.renderToString(<PlanNode {...node}/>);
 
-            graph.setNode(nodeId, {label: nodeHtml, style: 'fill: #fff', labelType: "html"});
+            graph.setNode(nodeId, {label: nodeHtml, style: 'fill: #fff', labelType: "html", class: "text-center"});
             graph.setParent(nodeId, clusterId);
 
             node.sources.forEach(source => {
                 graph.setEdge("node-" + source, nodeId, {class: "plan-edge", arrowheadClass: "plan-arrowhead"});
             });
 
             if (node.remoteSources.length > 0) {
-                graph.setNode(nodeId, {label: '', shape: "circle"});
+                graph.setNode(nodeId, {label: '', shape: "circle", class: "text-center"});
 
                 node.remoteSources.forEach(sourceId => {
                     const source = allStages.get(sourceId);
diff --git a/presto-ui/src/components/QueryPlanView.jsx b/presto-ui/src/components/QueryPlanView.jsx
@@ -33,28 +33,28 @@ export default function PlanView({show, data}) {
         const stageRootNodeId = "stage-" + stage.id + "-root";
         const color = getStageStateColor(stage);
 
-        graph.setNode(clusterId, { style: 'fill: ' + color, labelStyle: 'fill: #fff' });
+        graph.setNode(clusterId, { style: 'fill: ' + color, labelStyle: 'fill: #fff', class: 'text-center' });
 
         // this is a non-standard use of ReactDOMServer, but it's the cleanest way to unify DagreD3 with React
         const html = ReactDOMServer.renderToString(<StageStatistics key={stage.id} stage={stage} />);
 
-        graph.setNode(stageRootNodeId, { class: "stage-stats", label: html, labelType: "html" });
+        graph.setNode(stageRootNodeId, { class: "stage-stats text-center", label: html, labelType: "html" });
         graph.setParent(stageRootNodeId, clusterId);
         graph.setEdge("node-" + stage.root, stageRootNodeId, { style: "visibility: hidden" });
 
         stage.nodes.forEach(node => {
             const nodeId = "node-" + node.id;
             const nodeHtml = ReactDOMServer.renderToString(<PlanNode {...node} />);
 
-            graph.setNode(nodeId, { label: nodeHtml, style: 'fill: #fff', labelType: "html" });
+            graph.setNode(nodeId, { label: nodeHtml, style: 'fill: #fff', labelType: "html", class: 'text-center' });
             graph.setParent(nodeId, clusterId);
 
             node.sources.forEach(source => {
                 graph.setEdge("node-" + source, nodeId, { class: "plan-edge", arrowheadClass: "plan-arrowhead" });
             });
 
             if (node.remoteSources.length > 0) {
-                graph.setNode(nodeId, { label: '', shape: "circle" });
+                graph.setNode(nodeId, { label: '', shape: "circle", class: 'text-center' });
 
                 node.remoteSources.forEach(sourceId => {
                     const source = allStages.get(sourceId);
diff --git a/presto-ui/src/components/QueryResults.jsx b/presto-ui/src/components/QueryResults.jsx
@@ -49,9 +49,9 @@ export function QueryResults({ results }) {
                 <div className='col-6'>
                     <h3>Results</h3>
                 </div>
-                <div className="col-6">
+                <div className="col-6 mt-2">
                     {results.queryId &&
-                        <a style={{ display: 'block', marginTop: '27px', marginBottom: '10px' }}
+                        <a style={{ display: 'block'}}
                             href={"query.html?" + results.queryId} target="_blank"
                             data-bs-toggle="tooltip" data-trigger="hover" title="Query ID"
                         >
diff --git a/presto-ui/src/components/QueryStageView.jsx b/presto-ui/src/components/QueryStageView.jsx
@@ -529,15 +529,15 @@ export default function StageView({ data, show }) {
                         <div className="col-2 align-self-end">
                             <div className="stage-dropdown" role="group">
                                 <div className="btn-group">
-                                    <button type="button" className="btn btn-secondary dropdown-toggle"
+                                    <button type="button" className="btn btn-secondary dropdown-toggle bg-white text-dark"
                                         data-bs-toggle="dropdown" aria-haspopup="true"
                                         aria-expanded="false">Select Stage<span className="caret"/>
                                     </button>
-                                    <ul className="dropdown-menu">
+                                    <ul className="dropdown-menu bg-white">
                                         {
                                             allStages.map(stageId => (
                                                 <li key={stageId}>
-                                                    <a className={clsx('dropdown-item', stage.plan.id === stageId && 'active')}
+                                                    <a className={clsx('dropdown-item text-dark', stage.plan.id === stageId && 'selected')}
                                                         onClick={() => setState({selectedStageId: stageId})}>{stageId}</a>
                                                 </li>
                                             ))
diff --git a/presto-ui/src/components/SQLInput.jsx b/presto-ui/src/components/SQLInput.jsx
@@ -105,12 +105,12 @@ function SQLDropDown({ text, values, onSelect }) {
 
     return (
         <div className="btn-group">
-            <button type="button" className="btn btn-secondary dropdown-toggle"
+            <button type="button" className="btn btn-secondary dropdown-toggle bg-white text-dark"
                 data-bs-toggle="dropdown" aria-haspopup="true"
                 aria-expanded="false">{text}</button>
-            <ul className="dropdown-menu">
+            <ul className="dropdown-menu bg-white">
                 {items.map((item, idx) => (
-                    <li key={idx}><a href="#" className={clsx('dropdown-item', data.current === item && 'active')} onClick={() => selectItem(item)}>{item}</a></li>
+                    <li key={idx}><a href="#" className={clsx('dropdown-item text-dark', data.current === item && 'selected')} onClick={() => selectItem(item)}>{item}</a></li>
                 ))}
             </ul>
         </div>
diff --git a/presto-ui/src/components/StageDetail.jsx b/presto-ui/src/components/StageDetail.jsx
@@ -618,15 +618,15 @@ export class StageDetail extends React.Component {
                             <div className="col-2 align-self-end">
                                 <div className="stage-dropdown" role="group">
                                     <div className="btn-group">
-                                        <button type="button" className="btn btn-secondary dropdown-toggle"
+                                        <button type="button" className="btn bg-white btn-secondary text-dark dropdown-toggle"
                                             data-bs-toggle="dropdown" aria-haspopup="true"
                                             aria-expanded="false">Select Stage<span className="caret"/>
                                         </button>
-                                        <ul className="dropdown-menu">
+                                        <ul className="dropdown-menu bg-white">
                                             {
                                                 allStages.map(stageId => (
                                                     <li key={stageId}>
-                                                        <a className={clsx('dropdown-item', stage.plan.id === stageId && 'active')}
+                                                        <a className={clsx('dropdown-item text-dark', stage.plan.id === stageId && 'selected')}
                                                             onClick={() => this.setState({selectedStageId: stageId})}>{stageId}</a>
                                                     </li>
                                                 ))
diff --git a/presto-ui/src/static/assets/presto.css b/presto-ui/src/static/assets/presto.css
@@ -127,6 +127,7 @@ pre {
 
 .table > tbody > tr > td {
     border: none;
+    background-color: inherit;
 }
 
 .table > tbody > tr:first-child {

Original file line number	Diff line number	Diff line change
`@@ -127,6 +127,7 @@ pre {`
`127`	`127`
`128`	`128`	`.table > tbody > tr > td {`
`129`	`129`	`border: none;`
	`130`	`+ background-color: inherit;`
`130`	`131`	`}`
`131`	`132`
`132`	`133`	`.table > tbody > tr:first-child {`