Skip to content

Commit 9c4b683

Browse files
unidevelyhwang
unidevel
authored and
yhwang
committed
Fix dropdown style and diagram text alignment
1 parent c1ec5a7 commit 9c4b683

File tree

7 files changed

+20
-19
lines changed

7 files changed

+20
-19
lines changed

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -219,28 +219,28 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
219219
const stageRootNodeId = "stage-" + stage.id + "-root";
220220
const color = getStageStateColor(stage);
221221

222-
graph.setNode(clusterId, {style: 'fill: ' + color, labelStyle: 'fill: #fff'});
222+
graph.setNode(clusterId, {style: 'fill: ' + color, labelStyle: 'fill: #fff', class: 'text-center'});
223223

224224
// this is a non-standard use of ReactDOMServer, but it's the cleanest way to unify DagreD3 with React
225225
const html = ReactDOMServer.renderToString(<StageStatistics key={stage.id} stage={stage}/>);
226226

227-
graph.setNode(stageRootNodeId, {class: "stage-stats", label: html, labelType: "html"});
227+
graph.setNode(stageRootNodeId, {class: "stage-stats text-center", label: html, labelType: "html"});
228228
graph.setParent(stageRootNodeId, clusterId);
229229
graph.setEdge("node-" + stage.root, stageRootNodeId, {style: "visibility: hidden"});
230230

231231
stage.nodes.forEach(node => {
232232
const nodeId = "node-" + node.id;
233233
const nodeHtml = ReactDOMServer.renderToString(<PlanNode {...node}/>);
234234

235-
graph.setNode(nodeId, {label: nodeHtml, style: 'fill: #fff', labelType: "html"});
235+
graph.setNode(nodeId, {label: nodeHtml, style: 'fill: #fff', labelType: "html", class: "text-center"});
236236
graph.setParent(nodeId, clusterId);
237237

238238
node.sources.forEach(source => {
239239
graph.setEdge("node-" + source, nodeId, {class: "plan-edge", arrowheadClass: "plan-arrowhead"});
240240
});
241241

242242
if (node.remoteSources.length > 0) {
243-
graph.setNode(nodeId, {label: '', shape: "circle"});
243+
graph.setNode(nodeId, {label: '', shape: "circle", class: "text-center"});
244244

245245
node.remoteSources.forEach(sourceId => {
246246
const source = allStages.get(sourceId);

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -33,28 +33,28 @@ export default function PlanView({show, data}) {
3333
const stageRootNodeId = "stage-" + stage.id + "-root";
3434
const color = getStageStateColor(stage);
3535

36-
graph.setNode(clusterId, { style: 'fill: ' + color, labelStyle: 'fill: #fff' });
36+
graph.setNode(clusterId, { style: 'fill: ' + color, labelStyle: 'fill: #fff', class: 'text-center' });
3737

3838
// this is a non-standard use of ReactDOMServer, but it's the cleanest way to unify DagreD3 with React
3939
const html = ReactDOMServer.renderToString(<StageStatistics key={stage.id} stage={stage} />);
4040

41-
graph.setNode(stageRootNodeId, { class: "stage-stats", label: html, labelType: "html" });
41+
graph.setNode(stageRootNodeId, { class: "stage-stats text-center", label: html, labelType: "html" });
4242
graph.setParent(stageRootNodeId, clusterId);
4343
graph.setEdge("node-" + stage.root, stageRootNodeId, { style: "visibility: hidden" });
4444

4545
stage.nodes.forEach(node => {
4646
const nodeId = "node-" + node.id;
4747
const nodeHtml = ReactDOMServer.renderToString(<PlanNode {...node} />);
4848

49-
graph.setNode(nodeId, { label: nodeHtml, style: 'fill: #fff', labelType: "html" });
49+
graph.setNode(nodeId, { label: nodeHtml, style: 'fill: #fff', labelType: "html", class: 'text-center' });
5050
graph.setParent(nodeId, clusterId);
5151

5252
node.sources.forEach(source => {
5353
graph.setEdge("node-" + source, nodeId, { class: "plan-edge", arrowheadClass: "plan-arrowhead" });
5454
});
5555

5656
if (node.remoteSources.length > 0) {
57-
graph.setNode(nodeId, { label: '', shape: "circle" });
57+
graph.setNode(nodeId, { label: '', shape: "circle", class: 'text-center' });
5858

5959
node.remoteSources.forEach(sourceId => {
6060
const source = allStages.get(sourceId);

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,9 @@ export function QueryResults({ results }) {
4949
<div className='col-6'>
5050
<h3>Results</h3>
5151
</div>
52-
<div className="col-6">
52+
<div className="col-6 mt-2">
5353
{results.queryId &&
54-
<a style={{ display: 'block', marginTop: '27px', marginBottom: '10px' }}
54+
<a style={{ display: 'block'}}
5555
href={"query.html?" + results.queryId} target="_blank"
5656
data-bs-toggle="tooltip" data-trigger="hover" title="Query ID"
5757
>

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -529,15 +529,15 @@ export default function StageView({ data, show }) {
529529
<div className="col-2 align-self-end">
530530
<div className="stage-dropdown" role="group">
531531
<div className="btn-group">
532-
<button type="button" className="btn btn-secondary dropdown-toggle"
532+
<button type="button" className="btn btn-secondary dropdown-toggle bg-white text-dark"
533533
data-bs-toggle="dropdown" aria-haspopup="true"
534534
aria-expanded="false">Select Stage<span className="caret"/>
535535
</button>
536-
<ul className="dropdown-menu">
536+
<ul className="dropdown-menu bg-white">
537537
{
538538
allStages.map(stageId => (
539539
<li key={stageId}>
540-
<a className={clsx('dropdown-item', stage.plan.id === stageId && 'active')}
540+
<a className={clsx('dropdown-item text-dark', stage.plan.id === stageId && 'selected')}
541541
onClick={() => setState({selectedStageId: stageId})}>{stageId}</a>
542542
</li>
543543
))

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -105,12 +105,12 @@ function SQLDropDown({ text, values, onSelect }) {
105105

106106
return (
107107
<div className="btn-group">
108-
<button type="button" className="btn btn-secondary dropdown-toggle"
108+
<button type="button" className="btn btn-secondary dropdown-toggle bg-white text-dark"
109109
data-bs-toggle="dropdown" aria-haspopup="true"
110110
aria-expanded="false">{text}</button>
111-
<ul className="dropdown-menu">
111+
<ul className="dropdown-menu bg-white">
112112
{items.map((item, idx) => (
113-
<li key={idx}><a href="#" className={clsx('dropdown-item', data.current === item && 'active')} onClick={() => selectItem(item)}>{item}</a></li>
113+
<li key={idx}><a href="#" className={clsx('dropdown-item text-dark', data.current === item && 'selected')} onClick={() => selectItem(item)}>{item}</a></li>
114114
))}
115115
</ul>
116116
</div>

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -618,15 +618,15 @@ export class StageDetail extends React.Component {
618618
<div className="col-2 align-self-end">
619619
<div className="stage-dropdown" role="group">
620620
<div className="btn-group">
621-
<button type="button" className="btn btn-secondary dropdown-toggle"
621+
<button type="button" className="btn bg-white btn-secondary text-dark dropdown-toggle"
622622
data-bs-toggle="dropdown" aria-haspopup="true"
623623
aria-expanded="false">Select Stage<span className="caret"/>
624624
</button>
625-
<ul className="dropdown-menu">
625+
<ul className="dropdown-menu bg-white">
626626
{
627627
allStages.map(stageId => (
628628
<li key={stageId}>
629-
<a className={clsx('dropdown-item', stage.plan.id === stageId && 'active')}
629+
<a className={clsx('dropdown-item text-dark', stage.plan.id === stageId && 'selected')}
630630
onClick={() => this.setState({selectedStageId: stageId})}>{stageId}</a>
631631
</li>
632632
))

‎presto-ui/src/static/assets/presto.css

+1
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ pre {
127127

128128
.table > tbody > tr > td {
129129
border: none;
130+
background-color: inherit;
130131
}
131132

132133
.table > tbody > tr:first-child {

0 commit comments

Comments
 (0)