conditional rendering for backward compatibility

Author: anandamideShakyan

presto-router/src/main/resources/router_ui/src/components/QueryList.jsx

@@ -171,9 +171,11 @@ export class QueryListItem extends React.Component {
                         <div className="row stat-row">
                             {driverDetails}
                         </div>
+                        { query.queryStats.completedSplits &&
                         <div className="row stat-row">
                             {splitDetails}
                         </div>
+                        }
                         <div className="row stat-row">
                             {timingDetails}
                         </div>

presto-ui/src/components/QueryDetail.jsx

@@ -160,7 +160,7 @@ function TaskList({tasks}) {
             name: (<span className="bi bi-pause-circle-fill" style={GLYPHICON_HIGHLIGHT}
                          data-bs-toggle="tooltip" data-bs-placement="top"
                          title="Pending splits"/>),
-            selector: row => row.stats.queuedSplits,
+            selector: row => row.stats.queuedSplits ?? row.stats.queuedDrivers,
             sortable: true,
             maxWidth: '50px',
             minWidth: '40px',
@@ -169,7 +169,7 @@ function TaskList({tasks}) {
             name: (<span className="bi bi-play-circle-fill" style={GLYPHICON_HIGHLIGHT}
                          data-bs-toggle="tooltip" data-bs-placement="top"
                          title="Running splits"/>),
-            selector: row => row.stats.runningSplits,
+            selector: row => row.stats.runningSplits ?? row.stats.runningDrivers,
             sortable: true,
             maxWidth: '50px',
             minWidth: '40px',
@@ -188,7 +188,7 @@ function TaskList({tasks}) {
             name: (<span className="bi bi-check-lg" style={GLYPHICON_HIGHLIGHT}
                          data-bs-toggle="tooltip" data-bs-placement="top"
                          title="Completed splits"/>),
-            selector: row => row.stats.completedSplits,
+            selector: row => row.stats.completedSplits ?? row.stats.completedDrivers,
             sortable: true,
             maxWidth: '50px',
             minWidth: '40px',

presto-ui/src/components/QueryList.jsx

@@ -255,9 +255,11 @@ export class QueryListItem extends React.Component {
                         <div className="row stat-row">
                             {driverDetails}
                         </div>
-                        <div className="row stat-row">
-                            {splitDetails}
-                        </div>
+                        { query.queryStats.completedSplits &&
+                            <div className="row stat-row">
+                                {splitDetails}
+                            </div>
+                        }
                         <div className="row stat-row">
                             {timingDetails}
                         </div>

presto-ui/src/components/QueryOverview.jsx

@@ -331,7 +331,7 @@ function TaskList({ tasks }: { tasks: Task[] }) : React.Node {
             name: (<span className="bi bi-pause-circle-fill" style={GLYPHICON_HIGHLIGHT}
                 data-bs-toggle="tooltip" data-placement="top"
                 title="Pending splits" />),
-            selector: (row: Task) => row.stats.queuedSplits,
+            selector: (row: Task) => row.stats.queuedSplits ?? row.stats.queuedDrivers,
             sortable: true,
             maxWidth: '50px',
             minWidth: '40px',
@@ -340,7 +340,7 @@ function TaskList({ tasks }: { tasks: Task[] }) : React.Node {
             name: (<span className="bi bi-play-circle-fill" style={GLYPHICON_HIGHLIGHT}
                 data-bs-toggle="tooltip" data-placement="top"
                 title="Running splits" />),
-            selector: (row: Task) => row.stats.runningSplits,
+            selector: (row: Task) => row.stats.runningSplits ?? row.stats.runningDrivers,
             sortable: true,
             maxWidth: '50px',
             minWidth: '40px',
@@ -359,7 +359,7 @@ function TaskList({ tasks }: { tasks: Task[] }) : React.Node {
             name: (<span className="bi bi-check-lg" style={GLYPHICON_HIGHLIGHT}
                 data-bs-toggle="tooltip" data-placement="top"
                 title="Completed splits" />),
-            selector: (row: Task) => row.stats.completedSplits,
+            selector: (row: Task) => row.stats.completedSplits ?? row.stats.completedDrivers,
             sortable: true,
             maxWidth: '50px',
             minWidth: '40px',